/* ==========================================================================
   VS Sebastianplatz – Gestaltungssystem „Ausmalbuch“
   Papier, Tinte, Buntstift. Klassenübersicht: public/css/README.md
   Stilübersicht im Browser: templates/pages/_gestaltung.php

   Inhalt
    1  Schriften
    2  Tokens
    3  Grundlagen
    4  Typografie
    5  Layout-Helfer
    6  Knöpfe und Links
    7  Karten, Fotos, Hinweise
    8  Listen, Tabellen, Formulare, Abzeichen
    9  Termin-Kategorien (Farbe + Muster)
   10  Zeichnungen und „Ausmalen“
   11  Kopf und Navigation
   12  Eltern-Leiste (Telefon)
   13  Fuß
   14  Inhaltsbausteine (Seitenkopf, Personen, Termine, Downloads, Galerie, Zahlen, Leerzustand)
   15  Startseite
   16  Bewegung reduziert, Druck
   ========================================================================== */

/* 1 ─ Schriften (selbst gehostet, OFL, Lizenztexte in /public/fonts) ───── */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url("../fonts/caveat.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* 2 ─ Tokens ────────────────────────────────────────────────────────────── */
:root {
  /* Grund und Schrift */
  --papier: #FFFBF2;
  --papier-tief: #FFF3D9;      /* Bänder; Tinte 15,5:1, Bleistift 6,2:1, Himbeer 6,5:1 */
  --weiss: #FFFFFF;
  --tinte: #1B1A2E;            /* 16,5:1 auf Papier */
  --bleistift: #5B5870;        /* 6,6:1 auf Papier – Nebentext */
  --haarlinie: #E4DCCB;        /* nur Deko, nie Text */
  --tinte-hauch: rgb(27 26 46 / .08);

  /* Buntstift – nur als Fläche, Tinte darauf */
  --gelb: #FFD23F;
  --blau: #74C0FC;
  --wiese: #8CE99A;
  --flieder: #B197FC;
  --rosa: #FFA8C5;
  --orange: #F28C28;

  /* Textfarben (Kontrast auf Papier) */
  --himbeer: #A61E4D;          /* 7,0:1 – Links, Akzent */
  --himbeer-tief: #7F1239;     /* 9,9:1 – Link beim Überfahren */
  --text-blau: #1864AB;        /* 5,9:1 */
  --text-gruen: #237A36;       /* 5,2:1 */
  --text-lila: #5F3DC4;        /* 6,9:1 */

  /* Schriften */
  --schrift-titel: "Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --schrift-text: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --schrift-hand: "Caveat", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;

  /* Typoskala (Basis 18 px) */
  --fs-klein: 1rem;                                           /* 16 */
  --fs-text: 1.125rem;                                        /* 18 */
  --fs-gross: clamp(1.1875rem, 1.1rem + .4vw, 1.375rem);      /* 19–22 */
  --fs-h4: 1.25rem;                                           /* 20 */
  --fs-h3: clamp(1.375rem, 1.25rem + .6vw, 1.625rem);         /* 22–26 */
  --fs-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.625rem);          /* 28–42 */
  --fs-h1: clamp(2.25rem, 1.6rem + 3vw, 4rem);                /* 36–64 */
  --fs-display: clamp(2.75rem, 1.4rem + 6vw, 6.25rem);        /* 44–100 */
  --fs-hand: clamp(1.5rem, 1.3rem + .8vw, 2rem);

  /* Abstände (Grundmaß 20 px) */
  --a-1: .25rem;  --a-2: .5rem;  --a-3: .75rem; --a-4: 1.25rem;
  --a-5: 2rem;    --a-6: 3rem;   --a-7: 5rem;   --a-8: 8rem;
  --abschnitt: clamp(3.5rem, 2rem + 5vw, 6rem);
  --rand: clamp(1rem, .5rem + 3vw, 2.5rem);
  --breite: 76rem;
  --breite-text: 42rem;

  /* Radien – handgezeichnet, nie ganz gleichmäßig */
  --r-hand: 22px 14px 26px 12px / 14px 24px 12px 22px;
  --r-hand-klein: 12px 8px 14px 7px / 8px 13px 7px 12px;
  --r-rund: 999px;

  /* Linien und Schatten */
  --strich: 2px;
  --schatten-versatz: 6px;
  --schatten-farbe: var(--gelb);
  --fokus: #A61E4D;

  --kopf-hoehe: 4.5rem;
  --leiste-hoehe: 0rem;
}

/* 3 ─ Grundlagen ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Sprungziele nicht unter dem stehenden Kopf verstecken. --kopf-sticky
     misst site.js; der Vorgabewert passt, falls JavaScript fehlt. */
  scroll-padding-top: calc(var(--kopf-sticky, 6.5rem) + 1rem);
  background: var(--papier);
  overflow-x: clip;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: var(--fs-text);
  line-height: 1.6;
  font-variant-numeric: lining-nums;
  overflow-x: clip;
  padding-bottom: var(--leiste-hoehe);
}
main { flex: 1 0 auto; display: block; }
main:focus { outline: none; }

img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
[data-cms] img { max-width: 100%; height: auto; }

a { color: var(--himbeer); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--himbeer-tief); text-decoration-style: wavy; text-decoration-thickness: .06em; }

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--gelb); color: var(--tinte); }

.nur-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.sprunglink {
  position: absolute;
  left: var(--rand);
  top: .5rem;
  z-index: 1000;
  padding: .75rem 1.25rem;
  background: var(--tinte);
  color: var(--papier);
  font-weight: 700;
  border-radius: var(--r-hand-klein);
  transform: translateY(-160%);
}
.sprunglink:focus-visible { transform: none; color: var(--papier); outline-color: var(--gelb); }

/* 4 ─ Typografie ────────────────────────────────────────────────────────── */
h1, h2, h3, h4, .titel-display, .titel-1, .titel-2, .titel-3, .titel-4 {
  font-family: var(--schrift-titel);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  text-wrap: balance;
  hyphens: manual;
  overflow-wrap: break-word;
}
h1, .titel-1 { font-size: var(--fs-h1); }
h2, .titel-2 { font-size: var(--fs-h2); }
h3, .titel-3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; }
h4, .titel-4 { font-size: var(--fs-h4); font-weight: 700; line-height: 1.25; letter-spacing: 0; }
.titel-display { font-size: var(--fs-display); line-height: .98; letter-spacing: -.03em; }

p, ul, ol, dl, blockquote, figure, table { margin: 0 0 1em; }
small, .klein { font-size: var(--fs-klein); }
strong, b { font-weight: 700; }

.vorzeile {
  display: inline-block;
  font-family: var(--schrift-text);
  font-size: var(--fs-klein);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--himbeer);
  margin: 0 0 .75rem;
}
.einleitung { font-size: var(--fs-gross); line-height: 1.55; max-width: 38rem; }
.gedaempft { color: var(--bleistift); }
.ziffern { font-variant-numeric: tabular-nums lining-nums; }

/* Handschrift: nur Zusatz, nie einzige Information */
.hand {
  font-family: var(--schrift-hand);
  font-weight: 600;
  font-size: var(--fs-hand);
  line-height: 1.1;
  color: var(--himbeer);
  letter-spacing: 0;
}
.hand--schief { display: inline-block; transform: rotate(-4deg); }

/* Buntstift-Markierung hinter Wörtern */
.markiert {
  background: linear-gradient(176deg, transparent 52%, var(--markier-farbe, var(--gelb)) 52% 88%, transparent 88%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding-inline: .08em;
}
/* Handgezogener Strich unter einem Wort */
.kritzel-unter {
  position: relative;
  display: inline-block;
  isolation: isolate;
}
.kritzel-unter::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -.06em; right: -.06em;
  bottom: .02em;
  height: .32em;
  background: var(--kritzel-farbe, var(--rosa));
  -webkit-mask: url("../img/zeichnungen/deko-strich.svg") center / 100% 100% no-repeat;
  mask: url("../img/zeichnungen/deko-strich.svg") center / 100% 100% no-repeat;
}

/* Fließtext aus dem Editor */
.fliesstext { max-width: var(--breite-text); }
.fliesstext > * + * { margin-top: 0; }
.fliesstext h2 { font-size: var(--fs-h3); margin-top: 1.8em; }
.fliesstext h3 { font-size: var(--fs-h4); margin-top: 1.6em; }
.fliesstext ul, .fliesstext ol { padding-left: 1.4em; }
.fliesstext li + li { margin-top: .35em; }
.fliesstext ul li::marker { color: var(--himbeer); }
.fliesstext ol li::marker { font-family: var(--schrift-titel); font-weight: 700; color: var(--himbeer); }
.fliesstext blockquote {
  margin-inline: 0;
  padding: .25rem 0 .25rem 1.25rem;
  border-left: 6px solid var(--flieder);
  font-size: var(--fs-gross);
}
.fliesstext img { border-radius: var(--r-hand); }
.fliesstext hr, hr.trenner {
  border: 0;
  height: 14px;
  margin: var(--a-6) 0;
  background: var(--haarlinie);
  -webkit-mask: url("../img/zeichnungen/deko-welle.svg") left center / 120px 14px repeat-x;
  mask: url("../img/zeichnungen/deko-welle.svg") left center / 120px 14px repeat-x;
}

/* 5 ─ Layout-Helfer ─────────────────────────────────────────────────────── */
.huelle {
  width: 100%;
  max-width: calc(var(--breite) + 2 * var(--rand));
  margin-inline: auto;
  padding-inline: var(--rand);
}
.huelle--schmal { max-width: calc(52rem + 2 * var(--rand)); }

.abschnitt { padding-block: var(--abschnitt); }
.abschnitt--eng { padding-block: calc(var(--abschnitt) * .6); }
.abschnitt--band { background: var(--papier-tief); }
.abschnitt + .abschnitt:not(.abschnitt--band) { padding-top: 0; }
.abschnitt--band + .abschnitt:not(.abschnitt--band) { padding-top: var(--abschnitt); }

.abschnitt__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--a-3) var(--a-5);
  margin-bottom: var(--a-5);
}
.abschnitt__kopf > :first-child { margin-bottom: 0; }
.abschnitt__kopf .titel-2, .abschnitt__kopf h2 { margin: 0; }

.stapel > * { margin-block: 0; }
.stapel > * + * { margin-top: var(--stapel-abstand, var(--a-4)); }

.reihe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--reihe-abstand, var(--a-3)); }

.raster {
  display: grid;
  gap: var(--raster-abstand, clamp(1.5rem, 1rem + 1.4vw, 2.25rem));
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--raster-min, 17rem)), 1fr));
}
.raster--2 { --raster-min: 22rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.raster--3 { --raster-min: 20rem; }
.raster--4 { --raster-min: 15rem; }

.zwei-spalten {
  display: grid;
  gap: var(--a-5) clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (min-width: 56rem) {
  .zwei-spalten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .zwei-spalten--bild-links > :first-child { order: 0; }
}

/* 6 ─ Knöpfe und Links ─────────────────────────────────────────────────── */
.knopf {
  --knopf-grund: var(--tinte);
  --knopf-text: var(--papier);
  --knopf-schatten: var(--gelb);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: 3rem;
  padding: .7rem 1.35rem;
  border: var(--strich) solid var(--tinte);
  border-radius: var(--r-hand-klein);
  background: var(--knopf-grund);
  color: var(--knopf-text);
  font-family: var(--schrift-text);
  font-size: var(--fs-text);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--knopf-schatten);
  transition: transform .15s ease, box-shadow .15s ease;
}
.knopf:hover {
  color: var(--knopf-text);
  text-decoration: none;
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--knopf-schatten);
}
.knopf:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--knopf-schatten); }
.knopf svg { width: 1.15em; height: 1.15em; flex: none; }
.knopf--bunt  { --knopf-grund: var(--gelb); --knopf-text: var(--tinte); --knopf-schatten: var(--tinte); }
.knopf--rand  { --knopf-grund: var(--weiss); --knopf-text: var(--tinte); --knopf-schatten: var(--rosa); }
.knopf--klein { min-height: 2.5rem; padding: .45rem .95rem; font-size: var(--fs-klein); box-shadow: 3px 3px 0 var(--knopf-schatten); }
.knopf--gross { min-height: 3.5rem; padding: .9rem 1.75rem; font-size: var(--fs-gross); }
.knopf[disabled], .knopf[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-weight: 700;
  color: var(--himbeer);
}
.textlink::after {
  content: "";
  width: 1.1em; height: .7em;
  background: currentColor;
  -webkit-mask: url("../img/zeichnungen/deko-weiter.svg") center / contain no-repeat;
  mask: url("../img/zeichnungen/deko-weiter.svg") center / contain no-repeat;
  transition: transform .15s ease;
}
.textlink:hover::after { transform: translateX(3px); }

/* 7 ─ Karten, Fotos, Hinweise ─────────────────────────────────────────── */
.karte {
  --karte-farbe: var(--gelb);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--weiss);
  border: var(--strich) solid var(--tinte);
  border-radius: var(--r-hand);
  box-shadow: var(--schatten-versatz) var(--schatten-versatz) 0 var(--karte-farbe);
  color: var(--tinte);
}
.karte__inhalt { padding: clamp(1.1rem, .9rem + 1vw, 1.6rem); display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.karte__inhalt > * { margin: 0; }
.karte__titel { font-family: var(--schrift-titel); font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; }
.karte__meta { font-size: var(--fs-klein); color: var(--bleistift); }
.karte__bild { margin: 0; border-bottom: var(--strich) solid var(--tinte); border-radius: 20px 12px 0 0 / 12px 22px 0 0; overflow: hidden; aspect-ratio: 3 / 2; background: var(--papier-tief); }
.karte__bild img { width: 100%; height: 100%; object-fit: cover; }
.karte__fuss { margin-top: auto; padding-top: .5rem; }

.karte--gelb    { --karte-farbe: var(--gelb); }
.karte--blau    { --karte-farbe: var(--blau); }
.karte--wiese   { --karte-farbe: var(--wiese); }
.karte--flieder { --karte-farbe: var(--flieder); }
.karte--rosa    { --karte-farbe: var(--rosa); }
.karte--orange  { --karte-farbe: var(--orange); }
.karte--flach   { box-shadow: none; }

/* Ganze Karte klickbar: Link im Titel mit .karte__link, Fläche über ::after */
.karte__link { color: inherit; text-decoration: none; }
.karte__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.karte__link:hover { color: inherit; text-decoration: underline; text-decoration-style: wavy; text-decoration-color: var(--himbeer); }
.karte__link:focus-visible { outline: none; }
.karte:has(.karte__link) { transition: transform .18s ease, box-shadow .18s ease; }
.karte:has(.karte__link:hover) { transform: translate(-3px, -3px); box-shadow: calc(var(--schatten-versatz) + 3px) calc(var(--schatten-versatz) + 3px) 0 var(--karte-farbe); }
.karte:has(.karte__link:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 4px; }

/* Foto im Zeichenrahmen mit versetztem Farbfleck */
.foto {
  --foto-farbe: var(--rosa);
  position: relative;
  margin: 0;
  isolation: isolate;
}
.foto::before {
  content: "";
  position: absolute;
  inset: 7% -.75rem -.75rem 6%;
  z-index: -1;
  background: var(--foto-farbe);
  border-radius: 46% 54% 42% 58% / 55% 42% 58% 45%;
  transform: rotate(-3deg);
}
.foto img {
  width: 100%;
  border: 3px solid var(--tinte);
  border-radius: var(--r-hand);
  background: var(--papier-tief);
}
.foto figcaption { margin-top: .6rem; font-size: var(--fs-klein); color: var(--bleistift); }
.foto--gelb { --foto-farbe: var(--gelb); }
.foto--blau { --foto-farbe: var(--blau); }
.foto--wiese { --foto-farbe: var(--wiese); }
.foto--flieder { --foto-farbe: var(--flieder); }

/* Hinweisbox */
.hinweis {
  --hinweis-farbe: var(--blau);
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .25rem 1rem;
  align-items: start;
  padding: 1.1rem 1.25rem 1.1rem 1rem;
  background: var(--weiss);
  border: var(--strich) solid var(--tinte);
  border-radius: var(--r-hand-klein);
  box-shadow: inset .55rem 0 0 var(--hinweis-farbe);
  padding-left: 1.6rem;
}
.hinweis__zeichen {
  grid-row: span 2;
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border: var(--strich) solid var(--tinte);
  border-radius: 50%;
  background: var(--hinweis-farbe);
  font-family: var(--schrift-titel);
  font-weight: 800;
  line-height: 1;
}
.hinweis__titel { margin: 0; font-weight: 700; font-size: var(--fs-text); font-family: var(--schrift-text); line-height: 1.35; }
.hinweis__text { margin: 0; }
.hinweis__text > :last-child { margin-bottom: 0; }
.hinweis--info    { --hinweis-farbe: var(--blau); }
.hinweis--wichtig { --hinweis-farbe: var(--gelb); }
.hinweis--gut     { --hinweis-farbe: var(--wiese); }
.hinweis--achtung { --hinweis-farbe: var(--rosa); }

/* 8 ─ Listen, Tabellen, Formulare, Abzeichen ──────────────────────────── */
.liste-haken, .liste-falter, .liste-schritte { list-style: none; padding: 0; margin: 0 0 1em; }
.liste-haken li, .liste-falter li { position: relative; padding-left: 2.1rem; }
.liste-haken li + li, .liste-falter li + li, .liste-schritte li + li { margin-top: .55rem; }
.liste-haken li::before {
  content: "";
  position: absolute; left: 0; top: .2em;
  width: 1.35rem; height: 1.35rem;
  background: var(--text-gruen);
  -webkit-mask: url("../img/zeichnungen/deko-haken.svg") center / contain no-repeat;
  mask: url("../img/zeichnungen/deko-haken.svg") center / contain no-repeat;
}
.liste-falter li::before {
  content: "";
  position: absolute; left: .2rem; top: .45em;
  width: 1.05rem; height: .8rem;
  background: var(--falter-farbe, var(--flieder));
  border: 2px solid var(--tinte);
  border-radius: 60% 10% 60% 10%;
}
.liste-falter li:nth-child(6n+2)::before { --falter-farbe: var(--gelb); }
.liste-falter li:nth-child(6n+3)::before { --falter-farbe: var(--blau); }
.liste-falter li:nth-child(6n+4)::before { --falter-farbe: var(--rosa); }
.liste-falter li:nth-child(6n+5)::before { --falter-farbe: var(--wiese); }
.liste-falter li:nth-child(6n+6)::before { --falter-farbe: var(--orange); }
.liste-schritte { counter-reset: schritt; }
.liste-schritte li { counter-increment: schritt; position: relative; padding-left: 3.1rem; min-height: 2.3rem; }
.liste-schritte li::before {
  content: counter(schritt);
  position: absolute; left: 0; top: -.1rem;
  width: 2.3rem; height: 2.3rem;
  display: grid; place-items: center;
  border: var(--strich) solid var(--tinte);
  border-radius: 48% 52% 45% 55% / 55% 45% 55% 45%;
  background: var(--gelb);
  font-family: var(--schrift-titel);
  font-weight: 800;
}

.tabelle-rahmen {
  overflow-x: auto;
  border: var(--strich) solid var(--tinte);
  border-radius: var(--r-hand-klein);
  background: var(--weiss);
  margin: 0 0 1em;
}
.tabelle-rahmen:focus-visible { outline-offset: 2px; }
.tabelle { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; margin: 0; }
.tabelle caption { text-align: left; padding: .9rem 1rem .2rem; font-weight: 700; }
.tabelle th, .tabelle td { padding: .7rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--haarlinie); }
.tabelle thead th { background: var(--papier-tief); border-bottom: var(--strich) solid var(--tinte); font-size: var(--fs-klein); letter-spacing: .02em; }
.tabelle tbody tr:last-child > * { border-bottom: 0; }
.tabelle tbody tr:hover { background: var(--papier); }

.formular { display: grid; gap: var(--a-4); max-width: 36rem; }
.feld { display: grid; gap: .35rem; }
.feld__label { font-weight: 700; }
.feld__pflicht { color: var(--himbeer); }
.feld__hilfe { font-size: var(--fs-klein); color: var(--bleistift); margin: 0; }
.feld__fehler { font-size: var(--fs-klein); color: var(--himbeer); font-weight: 700; margin: 0; }
.eingabe {
  width: 100%;
  min-height: 3rem;
  padding: .65rem .9rem;
  border: var(--strich) solid var(--tinte);
  border-radius: var(--r-hand-klein);
  background: var(--weiss);
  color: var(--tinte);
  font: inherit;
  line-height: 1.4;
}
textarea.eingabe { min-height: 8rem; resize: vertical; }
select.eingabe { appearance: none; padding-right: 2.5rem; background: var(--weiss) url("../img/zeichnungen/deko-winkel.svg") right .9rem center / 1rem no-repeat; }
.eingabe::placeholder { color: var(--bleistift); opacity: 1; }
.eingabe:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; box-shadow: 4px 4px 0 var(--gelb); }
.eingabe[aria-invalid="true"] { border-color: var(--himbeer); box-shadow: inset 0 0 0 1px var(--himbeer); }
.auswahl { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; }
.auswahl input { width: 1.35rem; height: 1.35rem; margin: .15rem 0 0; accent-color: var(--tinte); flex: none; }

/* Filterknöpfe (Mehrfachauswahl mit aria-pressed) */
.filter-knopf {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 2.75rem;
  padding: .45rem 1rem .45rem .6rem;
  border: var(--strich) solid var(--tinte);
  border-radius: var(--r-rund);
  background: var(--weiss);
  color: var(--tinte);
  font: inherit; font-size: var(--fs-klein); font-weight: 700;
  cursor: pointer;
}
.filter-knopf[aria-pressed="true"] { background: var(--kat-farbe, var(--gelb)); box-shadow: 3px 3px 0 var(--tinte); }
.filter-knopf[aria-pressed="true"]::after {
  content: ""; width: .95rem; height: .95rem; background: var(--tinte);
  -webkit-mask: url("../img/zeichnungen/deko-haken.svg") center / contain no-repeat;
  mask: url("../img/zeichnungen/deko-haken.svg") center / contain no-repeat;
}

.abzeichen {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .15rem .65rem .15rem .4rem;
  border: 1.5px solid var(--tinte);
  border-radius: var(--r-rund);
  background: var(--kat-farbe, var(--papier-tief));
  color: var(--tinte);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.5;
}
.abzeichen--schlicht { padding-left: .65rem; background: var(--papier-tief); }
.abzeichen--neu { background: var(--gelb); }

/* 9 ─ Termin-Kategorien: Farbe UND Muster ────────────────────────────── */
.kat-schulfrei { --kat-farbe: var(--gelb);    --kat-muster: radial-gradient(circle, var(--tinte) 1.3px, transparent 1.7px); --kat-muster-groesse: 6px 6px; }
.kat-fest      { --kat-farbe: var(--rosa);    --kat-muster: conic-gradient(rgb(27 26 46 / .55) 25%, transparent 0 50%, rgb(27 26 46 / .55) 0 75%, transparent 0); --kat-muster-groesse: 8px 8px; }
.kat-ausflug   { --kat-farbe: var(--wiese);   --kat-muster: repeating-linear-gradient(45deg, var(--tinte) 0 1.5px, transparent 1.5px 5px); --kat-muster-groesse: auto; }
.kat-eltern    { --kat-farbe: var(--blau);    --kat-muster: repeating-linear-gradient(0deg, var(--tinte) 0 1.5px, transparent 1.5px 5px); --kat-muster-groesse: auto; }
.kat-sport     { --kat-farbe: var(--orange);  --kat-muster: linear-gradient(var(--tinte) 1.2px, transparent 1.2px), linear-gradient(90deg, var(--tinte) 1.2px, transparent 1.2px); --kat-muster-groesse: 6px 6px; }
.kat-sonstiges { --kat-farbe: var(--flieder); --kat-muster: repeating-radial-gradient(circle at 0 0, transparent 0 2.6px, var(--tinte) 2.6px 3.8px); --kat-muster-groesse: auto; }

/* Kategorie-Zeichen: kleiner Flügel mit Muster */
.kat-marke {
  display: inline-block;
  flex: none;
  width: 1.15em;
  height: 1.15em;
  border: 1.5px solid var(--tinte);
  border-radius: 62% 8% 62% 8%;
  background-color: var(--kat-farbe, var(--papier-tief));
  background-image: var(--kat-muster, none);
  background-size: var(--kat-muster-groesse, auto);
  vertical-align: -.15em;
}
.kat-marke--gross { width: 2rem; height: 2rem; border-width: 2px; }

/* 10 ─ Zeichnungen und „Ausmalen“ ─────────────────────────────────────── */
.zeichnung { display: block; line-height: 0; }
.zeichnung svg, .zeichnung img { display: block; width: 100%; height: auto; overflow: visible; }
.zeichnung--xs { width: 2.5rem; }
.zeichnung--s  { width: 4.5rem; }
.zeichnung--m  { width: clamp(7rem, 5rem + 6vw, 10rem); }
.zeichnung--l  { width: clamp(10rem, 6rem + 12vw, 17rem); }
.zeichnung--xl { width: clamp(14rem, 8rem + 20vw, 28rem); }
.zeichnung--mitte { margin-inline: auto; }

.kr { stroke-dasharray: 1 1; stroke-dashoffset: 0; }

.js .ausmalen .kr {
  transition: stroke-dashoffset .85s cubic-bezier(.45, .05, .3, 1), opacity 0s linear;
}
.js .ausmalen:not(.ist-ausgemalt) .kr { stroke-dashoffset: 1; opacity: 0; }
.js .ausmalen .kr-2 { transition-delay: .12s; }
.js .ausmalen .kr-3 { transition-delay: .24s; }
.js .ausmalen .kr-4 { transition-delay: .36s; }
.js .ausmalen .kr-5 { transition-delay: .48s; }
.js .ausmalen .kr-6 { transition-delay: .58s; }
.js .ausmalen .kr-7 { transition-delay: .68s; }
.js .ausmalen .kr-8 { transition-delay: .78s; }
.js .ausmalen .kr-9 { transition-delay: .88s; }

/* Farbe wechseln: z. B. .zeichnung.farben-kuehl – oder jede Fläche per .f-gelb usw. */
.zeichnung .f-gelb    { stroke: var(--gelb); }
.zeichnung .f-blau    { stroke: var(--blau); }
.zeichnung .f-wiese   { stroke: var(--wiese); }
.zeichnung .f-flieder { stroke: var(--flieder); }
.zeichnung .f-rosa    { stroke: var(--rosa); }
.zeichnung .f-orange  { stroke: var(--orange); }
.zeichnung .z-linie   { stroke: var(--tinte); }
.zeichnung .z-voll    { fill: var(--tinte); }

/* Flattern beim Überfahren (Einzelschmetterling) */
.falter .flattern { transform-box: fill-box; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: no-preference) {
  .flatter-bei-hover:hover .flattern,
  a:hover .flatter-bei-hover .flattern,
  a:focus-visible .flatter-bei-hover .flattern {
    animation: flattern .16s ease-in-out 6 alternate;
  }
}
@keyframes flattern {
  from { transform: scaleX(1); }
  to   { transform: scaleX(.45); }
}

/* 11 ─ Kopf und Navigation ────────────────────────────────────────────── */
.oberleiste {
  display: none;
  background: var(--tinte);
  color: var(--papier);
  font-size: .9375rem;
}
.oberleiste .huelle { display: flex; justify-content: flex-end; align-items: center; gap: 1.75rem; height: var(--oberleiste-hoehe, 2.75rem); }
.oberleiste a { color: var(--papier); text-decoration: none; display: inline-flex; gap: .45rem; align-items: center; }
.oberleiste a:hover { color: var(--gelb); text-decoration: underline; }
.oberleiste a:focus-visible { outline-color: var(--gelb); }
/* Caveat hat eine hohe Oberlänge: Die Schrift sitzt in ihrer Zeile weit oben
   und klebte dadurch am oberen Rand. Etwas Luft oben gleicht das optisch aus. */
.oberleiste__hinweis { margin: 0 auto 0 0; opacity: 1; line-height: 1; padding-top: .3rem; }
.oberleiste__hinweis .hand { color: var(--gelb); font-size: 1.35rem; line-height: 1; }
.oberleiste svg { width: 1rem; height: 1rem; }
@media (min-width: 62rem) {
  :root { --oberleiste-hoehe: 2.75rem; }
  .oberleiste { display: block; }
}

/* Der Kopf bleibt beim Scrollen oben stehen. Die dunkle Oberleiste (nur am
   Desktop) darf wegrollen: Der Kopf rückt um ihre Höhe nach oben, stehen
   bleibt nur die Zeile mit Logo und Navigation. */
.kopf {
  position: sticky;
  top: calc(-1 * var(--oberleiste-hoehe, 0px));
  z-index: 50;
  background: var(--papier);
  transition: box-shadow .2s ease;
}
.ist-gescrollt .kopf { box-shadow: 0 6px 18px -12px rgb(27 26 46 / .45); }
.kopf::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -7px;
  height: 10px;
  background: var(--haarlinie);
  -webkit-mask: url("../img/zeichnungen/deko-welle.svg") left center / 90px 10px repeat-x;
  mask: url("../img/zeichnungen/deko-welle.svg") left center / 90px 10px repeat-x;
  pointer-events: none;
}
.kopf__zeile {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--kopf-hoehe);
  padding-block: .6rem;
}
.kopf__marke {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-right: auto;
  color: var(--tinte);
  text-decoration: none;
  min-width: 0;
}
.kopf__marke:hover { color: var(--tinte); text-decoration: none; }
.kopf__logo { width: clamp(3.6rem, 2.6rem + 3vw, 5.25rem); flex: none; }
.kopf__name { display: flex; flex-direction: column; line-height: 1.02; min-width: 0; }
.kopf__schule { font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bleistift); }
.kopf__titel { font-family: var(--schrift-titel); font-weight: 800; font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem); letter-spacing: -.02em; }
.kopf__ort { font-size: .875rem; color: var(--bleistift); margin-top: .1rem; }
.kopf__marke:hover .kopf__titel { text-decoration: none; }

/* Menü-Knopf (unter 70rem) */
.menue-knopf {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 2.9rem;
  padding: .5rem 1rem .5rem .8rem;
  border: var(--strich) solid var(--tinte);
  border-radius: var(--r-hand-klein);
  background: var(--weiss);
  color: var(--tinte);
  font: inherit;
  font-weight: 700;
  box-shadow: 3px 3px 0 var(--flieder);
  cursor: pointer;
}
.menue-knopf__zeichen { display: grid; gap: 4px; width: 1.25rem; }
.menue-knopf__zeichen span { display: block; height: 2.5px; border-radius: 2px; background: var(--tinte); }
.menue-knopf__zeichen span:nth-child(2) { width: 75%; }
html:not(.js) .menue-knopf { display: none; }

.hauptnav__kopf, .hauptnav__fuss { display: none; }

.nav-liste, .nav-unter { list-style: none; margin: 0; padding: 0; }
.nav-link {
  color: var(--tinte);
  text-decoration: none;
  font-weight: 700;
}
.nav-link[aria-current="page"], .nav-punkt.ist-aktiv > .nav-link { color: var(--himbeer); }
.nav-nr { font-family: var(--schrift-hand); font-weight: 600; color: var(--himbeer); }

/* — Telefon und Tablet: Inhaltsverzeichnis als Buchseite — */
@media (max-width: 69.99rem) {
  html:not(.js) .hauptnav { width: 100%; padding-bottom: 1rem; }
  html:not(.js) .kopf__zeile { flex-wrap: wrap; }

  .js .hauptnav {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    padding: 1rem var(--rand) calc(1.5rem + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    background:
      linear-gradient(90deg, transparent calc(var(--rand) + 2.1rem), rgb(166 30 77 / .35) calc(var(--rand) + 2.1rem) calc(var(--rand) + 2.25rem), transparent calc(var(--rand) + 2.25rem)) 0 5.2rem / 100% 100% no-repeat,
      repeating-linear-gradient(180deg, transparent 0 calc(3.2rem - 1px), rgb(116 192 252 / .45) calc(3.2rem - 1px) 3.2rem) 0 5.2rem / 100% 100% no-repeat,
      var(--papier);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-1.5rem);
    transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
  }
  .js.menue-offen .hauptnav {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .22s ease, transform .22s ease, visibility 0s;
  }
  .js.menue-offen body { overflow: hidden; }
  .js.menue-offen .kopf { z-index: 300; }

  .js .hauptnav__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.2rem;
    margin-bottom: .8rem;
  }
  .hauptnav__titel { margin: 0; font-family: var(--schrift-titel); font-weight: 800; font-size: 2.25rem; letter-spacing: -.02em; }
  .menue-zu {
    display: inline-flex; align-items: center; gap: .5rem;
    min-height: 2.9rem; padding: .5rem 1rem;
    border: var(--strich) solid var(--tinte);
    border-radius: var(--r-hand-klein);
    background: var(--weiss); color: var(--tinte);
    font: inherit; font-weight: 700; cursor: pointer;
  }
  .menue-zu svg { width: 1rem; height: 1rem; }

  .nav-liste { display: grid; }
  .nav-punkt { position: relative; }
  .nav-link {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    min-height: 3.2rem;
    padding: .55rem 0 .45rem;
    font-family: var(--schrift-titel);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.25;
  }
  .nav-link .nav-nr { width: 2.1rem; flex: none; font-size: 1.6rem; text-align: left; }
  .nav-link__text { flex: 0 1 auto; }
  .nav-link::after {
    content: "";
    flex: 1 1 2rem;
    align-self: center;
    height: 2px;
    margin-left: .5rem;
    background: radial-gradient(circle, var(--bleistift) 1px, transparent 1.4px) 0 0 / 7px 2px repeat-x;
    opacity: .6;
  }
  .nav-link[aria-current="page"] .nav-link__text { background: linear-gradient(176deg, transparent 55%, var(--gelb) 55% 92%, transparent 92%); }
  .nav-auf { display: none; }
  .nav-unter { padding: 0 0 .5rem 2.85rem; display: grid; }
  .nav-unter .nav-link { font-family: var(--schrift-text); font-size: 1.125rem; min-height: 3.2rem; padding-block: .8rem .6rem; }
  .nav-unter .nav-link::after { display: none; }

  .js .hauptnav__fuss {
    display: grid;
    gap: .6rem;
    margin-top: auto;
    padding-top: 1.5rem;
  }
  .hauptnav__fuss .knopf { width: 100%; }
}

/* — Desktop: Leiste mit Aufklappern — */
@media (min-width: 70rem) {
  .menue-knopf { display: none; }
  .nav-punkt--start { display: none !important; }
  .hauptnav { margin-left: auto; }
  .nav-liste { display: flex; align-items: center; gap: .15rem; }
  .nav-punkt { position: relative; display: flex; align-items: center; }
  .nav-nr { display: none; }
  .nav-link {
    display: block;
    padding: .55rem .7rem;
    border-radius: var(--r-hand-klein);
    font-size: 1.0625rem;
    white-space: nowrap;
  }
  .nav-link:hover { color: var(--tinte); background: var(--tinte-hauch); text-decoration: none; }
  .nav-link[aria-current="page"], .nav-punkt.ist-aktiv > .nav-link {
    color: var(--tinte);
    background: linear-gradient(176deg, transparent 58%, var(--gelb) 58% 88%, transparent 88%) no-repeat .7rem 0 / calc(100% - 1.4rem) 100%;
  }
  .hat-unter > .nav-link { padding-right: .2rem; }
  .nav-auf {
    display: grid;
    place-items: center;
    width: 2rem; height: 2.4rem;
    margin-left: -.1rem;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--tinte);
    cursor: pointer;
  }
  .nav-auf:hover { background: var(--tinte-hauch); }
  .nav-auf svg { width: .8rem; height: .8rem; transition: transform .2s ease; }
  .nav-auf[aria-expanded="true"] svg { transform: rotate(180deg); }

  .nav-unter {
    position: absolute;
    top: calc(100% + .5rem);
    left: 0;
    min-width: 16rem;
    padding: .6rem;
    background: var(--weiss);
    border: var(--strich) solid var(--tinte);
    border-radius: var(--r-hand);
    box-shadow: 6px 6px 0 var(--flieder);
    display: none;
  }
  .nav-unter::before { content: ""; position: absolute; left: 0; right: 0; top: -.6rem; height: .6rem; }
  .nav-punkt:last-child .nav-unter, .nav-punkt:nth-last-child(2) .nav-unter { left: auto; right: 0; }
  html:not(.js) .nav-punkt:hover > .nav-unter,
  html:not(.js) .nav-punkt:focus-within > .nav-unter,
  .nav-unter.ist-offen { display: grid; }
  .nav-unter .nav-link { white-space: normal; padding: .6rem .8rem; font-weight: 700; font-size: 1rem; }
  .nav-unter .nav-link[aria-current="page"] { background: var(--gelb); }
}

/* 12 ─ Eltern-Leiste (Telefon) ──────────────────────────────────────── */
.elternleiste { display: none; }
@media (max-width: 47.99rem) {
  :root { --leiste-hoehe: calc(4.6rem + env(safe-area-inset-bottom)); }
  .elternleiste {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .35rem;
    padding: .4rem .5rem calc(.45rem + env(safe-area-inset-bottom));
    background: var(--papier);
    border-top: var(--strich) solid var(--tinte);
    box-shadow: 0 -6px 0 rgb(27 26 46 / .04);
  }
  .elternleiste__weg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .1rem;
    min-height: 3.6rem;
    padding: .25rem .2rem;
    border-radius: var(--r-hand-klein);
    color: var(--tinte);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
  }
  .elternleiste__weg:hover { color: var(--tinte); background: var(--tinte-hauch); }
  .elternleiste__weg--krank { background: var(--gelb); border: var(--strich) solid var(--tinte); }
  .elternleiste__weg--krank:hover { background: var(--gelb); }
  .elternleiste__falter { width: 2rem; height: 2rem; }
  .elternleiste__falter img { width: 100%; height: 100%; }
}

/* 13 ─ Fuß ─────────────────────────────────────────────────────────────── */
.fuss {
  position: relative;
  margin-top: 2rem;
  background: var(--tinte);
  color: var(--papier);
  font-size: var(--fs-klein);
  line-height: 1.6;
}
.fuss::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -13px;
  height: 16px;
  background: linear-gradient(90deg, var(--gelb) 0 16.6%, var(--rosa) 0 33.3%, var(--blau) 0 50%, var(--wiese) 0 66.6%, var(--flieder) 0 83.3%, var(--orange) 0);
  -webkit-mask: url("../img/zeichnungen/deko-welle.svg") left center / 120px 16px repeat-x;
  mask: url("../img/zeichnungen/deko-welle.svg") left center / 120px 16px repeat-x;
}
.fuss a { color: var(--papier); text-decoration-color: rgb(255 251 242 / .5); }
.fuss a:hover { color: var(--gelb); text-decoration-color: var(--gelb); }
.fuss :focus-visible { outline-color: var(--gelb); }
.fuss__raster {
  display: grid;
  gap: 2rem 3rem;
  padding-block: clamp(3rem, 2rem + 4vw, 5rem) 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.fuss__marke { display: flex; gap: .9rem; align-items: flex-start; }
.fuss__logo { width: 4.5rem; flex: none; padding: .35rem; background: var(--papier); border-radius: var(--r-hand-klein); }
.fuss__name { font-family: var(--schrift-titel); font-weight: 800; font-size: 1.375rem; line-height: 1.1; margin: 0 0 .35rem; }
.fuss__titel { margin: 0 0 .6rem; font-family: var(--schrift-hand); font-weight: 600; font-size: 1.6rem; line-height: 1; color: var(--gelb); }
.fuss address { font-style: normal; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.fuss p { margin: 0 0 .5rem; }
.fuss__zeile {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem;
  padding-block: 1.25rem;
  border-top: 1px solid rgb(255 251 242 / .22);
}
.fuss__zeile p { margin: 0; }
.fuss .fuss__rechtlich { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }

/* 14 ─ Inhaltsbausteine ──────────────────────────────────────────────── */

/* Seitenkopf mit Zeichnung */
.seitenkopf { padding-block: clamp(2rem, 1rem + 4vw, 4.5rem) clamp(2rem, 1rem + 3vw, 3.5rem); }
.seitenkopf__raster { display: grid; gap: 1.5rem 3rem; align-items: center; }
.seitenkopf__raster > * { min-width: 0; }
.seitenkopf h1 { margin-bottom: .35em; }
.seitenkopf__bild { justify-self: center; width: min(13rem, 55vw); }
@media (min-width: 48rem) {
  .seitenkopf__raster { grid-template-columns: minmax(0, 1fr) auto; }
  .seitenkopf__bild { width: clamp(12rem, 8rem + 10vw, 18rem); }
}
.brotkrumen { font-size: var(--fs-klein); margin-bottom: 1rem; }
.brotkrumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: 0; padding: 0; }
.brotkrumen li + li::before { content: "›"; margin-right: .5rem; color: var(--bleistift); }
.brotkrumen a { color: var(--bleistift); }
.brotkrumen [aria-current="page"] { color: var(--tinte); font-weight: 700; }

/* Personen-Karten */
.personen {
  display: grid;
  gap: 2.25rem 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  list-style: none; padding: 0; margin: 0;
}
.person { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.person__bild {
  --person-farbe: var(--gelb);
  position: relative;
  width: min(11rem, 70%);
  aspect-ratio: 1;
  margin: 0 0 .9rem;
  isolation: isolate;
}
.person__bild::before {
  content: "";
  position: absolute; inset: -6% -8% -2% -2%;
  z-index: -1;
  background: var(--person-farbe);
  border-radius: 43% 57% 51% 49% / 55% 45% 55% 45%;
  transform: rotate(12deg);
}
.person__bild img, .person__platzhalter {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: 50%;
  border: 3px solid var(--tinte);
  background: var(--papier-tief);
}
.person__platzhalter { display: grid; place-items: center; font-family: var(--schrift-titel); font-weight: 800; font-size: 2.5rem; }
.personen > :nth-child(6n+2) .person__bild { --person-farbe: var(--blau); }
.personen > :nth-child(6n+3) .person__bild { --person-farbe: var(--rosa); }
.personen > :nth-child(6n+4) .person__bild { --person-farbe: var(--wiese); }
.personen > :nth-child(6n+5) .person__bild { --person-farbe: var(--flieder); }
.personen > :nth-child(6n+6) .person__bild { --person-farbe: var(--orange); }
.person__name { font-family: var(--schrift-titel); font-weight: 700; font-size: 1.25rem; line-height: 1.2; margin: 0; }
.person__rolle { color: var(--bleistift); margin: 0; font-size: var(--fs-klein); }
.person__kontakt { margin: .35rem 0 0; font-size: var(--fs-klein); display: grid; gap: .1rem; }

/* Termin-Liste */
.termine { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.termine__monat {
  display: flex; align-items: baseline; gap: .75rem;
  margin: 2.25rem 0 1rem;
  font-size: var(--fs-h2);
}
.termine__monat:first-child { margin-top: 0; }
.termine__monat small { font-family: var(--schrift-text); font-size: var(--fs-klein); font-weight: 700; color: var(--bleistift); letter-spacing: 0; }
.termin {
  position: relative;
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr);
  gap: 1.1rem;
  align-items: center;
  padding: .7rem 1rem .7rem .7rem;
  background: var(--weiss);
  border: var(--strich) solid var(--tinte);
  border-radius: var(--r-hand-klein);
  transition: transform .15s ease, box-shadow .15s ease;
}
/* Die ganze Terminkarte ist klickbar und führt zum Termin im Kalender. */
.termin__link { color: var(--tinte); text-decoration: none; }
.termin__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.termin:has(.termin__link:hover) { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--kat-farbe, var(--gelb)); }
.termin:has(.termin__link:hover) .termin__link { text-decoration: underline; text-underline-offset: .18em; }
.termin:has(.termin__link:focus-visible) { outline: 3px solid var(--himbeer); outline-offset: 3px; }
.termin__link:focus-visible { outline: none; }
.termin--heute:has(.termin__link:hover) { box-shadow: 5px 5px 0 var(--himbeer); }
@media (prefers-reduced-motion: reduce) { .termin:has(.termin__link:hover) { transform: none; } }
/* Im Editor darf die Linkfläche keine Klicks auf bearbeitbare Texte abfangen. */
.cms-edit-mode .termin__link::after { pointer-events: none; }
.termin__datum {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0;
  min-height: 4.6rem;
  padding: .3rem .2rem .35rem;
  border: var(--strich) solid var(--tinte);
  border-radius: 8px 10px 7px 11px;
  background: var(--kat-farbe, var(--papier-tief));
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
  text-align: center;
}
.termin__wt { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.termin__tag { font-family: var(--schrift-titel); font-weight: 800; font-size: 1.9rem; line-height: 1.05; }
.termin__mon { font-size: .875rem; font-weight: 700; }
.termin__inhalt { display: grid; gap: .3rem; min-width: 0; }
.termin__titel { margin: 0; font-weight: 700; font-size: var(--fs-text); line-height: 1.3; }
.termin__titel a { color: var(--tinte); }
.termin__meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; font-size: var(--fs-klein); color: var(--bleistift); font-variant-numeric: tabular-nums lining-nums; }
.termin--heute { box-shadow: 5px 5px 0 var(--himbeer); }
.termin--vorbei { opacity: .7; }

/* Download-Liste */
.downloads { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.download {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: .8rem 1rem;
  background: var(--weiss);
  border: var(--strich) solid var(--tinte);
  border-radius: var(--r-hand-klein);
  transition: transform .15s ease, box-shadow .15s ease;
}
.download:has(a:hover) { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--blau); }
.download:has(a:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 3px; }
.download__typ {
  display: grid; place-items: center;
  width: 3rem; height: 3.5rem;
  border: var(--strich) solid var(--tinte);
  border-radius: 4px 14px 4px 4px;
  background: linear-gradient(225deg, var(--tinte) 0 9px, var(--blau) 9px);
  font-size: .75rem; font-weight: 700; letter-spacing: .04em;
}
.download__titel { margin: 0; font-weight: 700; line-height: 1.3; }
.download__titel a { color: var(--tinte); text-decoration: none; }
.download__titel a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.download__titel a:focus-visible { outline: none; }
.download__meta { margin: .1rem 0 0; font-size: var(--fs-klein); color: var(--bleistift); }
.download__pfeil { width: 1.5rem; height: 1.5rem; }

/* Galerie-Raster */
.galerie {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  gap: clamp(.75rem, .5rem + 1vw, 1.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
}
.galerie__eintrag { margin: 0; }
.galerie__bild {
  display: block;
  border: 3px solid var(--tinte);
  border-radius: var(--r-hand-klein);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--papier-tief);
  transition: transform .18s ease, box-shadow .18s ease;
}
.galerie__bild img { width: 100%; height: 100%; object-fit: cover; }
.galerie__eintrag:nth-child(4n+1) .galerie__bild:hover { box-shadow: 6px 6px 0 var(--gelb); }
.galerie__eintrag:nth-child(4n+2) .galerie__bild:hover { box-shadow: 6px 6px 0 var(--rosa); }
.galerie__eintrag:nth-child(4n+3) .galerie__bild:hover { box-shadow: 6px 6px 0 var(--blau); }
.galerie__eintrag:nth-child(4n+4) .galerie__bild:hover { box-shadow: 6px 6px 0 var(--wiese); }
.galerie__bild:hover { transform: translate(-3px, -3px) rotate(-.6deg); }
.galerie__text { margin: .45rem 0 0; font-size: var(--fs-klein); color: var(--bleistift); }

.leuchtkasten {
  width: min(64rem, 100vw - 2rem);
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: 3px solid var(--tinte);
  border-radius: var(--r-hand);
  background: var(--papier);
  color: var(--tinte);
}
.leuchtkasten::backdrop { background: rgb(27 26 46 / .82); }
.leuchtkasten__bild { display: block; width: 100%; max-height: calc(100vh - 9rem); object-fit: contain; background: var(--tinte); }
.leuchtkasten__leiste { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .75rem 1rem; }
.leuchtkasten__text { margin: 0 auto 0 0; font-size: var(--fs-klein); }

/* Zahlen */
.zahlen { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.zahl { display: grid; justify-items: center; text-align: center; gap: .35rem; }
.zahl__wert {
  position: relative;
  display: grid; place-items: center;
  min-width: 8.5rem; min-height: 6rem;
  padding: .5rem 1.25rem;
  font-family: var(--schrift-titel);
  font-weight: 800;
  font-size: clamp(3rem, 2.4rem + 2.4vw, 4.25rem);
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: lining-nums;
  isolation: isolate;
}
.zahl__wert::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: var(--zahl-farbe, var(--rosa));
  -webkit-mask: url("../img/zeichnungen/deko-kreis.svg") center / 100% 100% no-repeat;
  mask: url("../img/zeichnungen/deko-kreis.svg") center / 100% 100% no-repeat;
}
.zahl:nth-child(4n+2) .zahl__wert { --zahl-farbe: var(--blau); }
.zahl:nth-child(4n+3) .zahl__wert { --zahl-farbe: var(--orange); }
.zahl:nth-child(4n+4) .zahl__wert { --zahl-farbe: var(--text-gruen); }
.zahl__text { margin: 0; font-weight: 700; max-width: 14rem; line-height: 1.35; }

/* Leerzustand */
.leer {
  display: grid;
  justify-items: center;
  gap: .5rem;
  padding: 2rem 1.25rem;
  text-align: center;
  border: 2px dashed var(--bleistift);
  border-radius: var(--r-hand);
  background: rgb(255 255 255 / .55);
}
.leer .zeichnung { width: 7.5rem; margin-bottom: .25rem; }
.leer__titel { margin: 0; font-family: var(--schrift-titel); font-weight: 700; font-size: var(--fs-h4); }
.leer__text { margin: 0; color: var(--bleistift); max-width: 30rem; }

/* Sticker (lose Stichwörter) */
.sticker { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .7rem .6rem; }
.sticker li {
  --sticker-farbe: var(--gelb);
  padding: .4rem .9rem;
  border: var(--strich) solid var(--tinte);
  border-radius: var(--r-hand-klein);
  background: var(--sticker-farbe);
  font-weight: 700;
  font-size: var(--fs-klein);
  line-height: 1.3;
  transform: rotate(-1.5deg);
  box-shadow: 2px 3px 0 var(--tinte);
}
.sticker li:nth-child(6n+2) { --sticker-farbe: var(--blau); transform: rotate(1.2deg); }
.sticker li:nth-child(6n+3) { --sticker-farbe: var(--rosa); transform: rotate(-.6deg); }
.sticker li:nth-child(6n+4) { --sticker-farbe: var(--wiese); transform: rotate(2deg); }
.sticker li:nth-child(6n+5) { --sticker-farbe: var(--flieder); transform: rotate(-2deg); }
.sticker li:nth-child(6n+6) { --sticker-farbe: var(--weiss); transform: rotate(.8deg); }

/* Randnotiz mit Pfeil */
.randnotiz { display: inline-flex; align-items: flex-end; gap: .35rem; color: var(--himbeer); }
.randnotiz::after {
  content: "";
  width: 3.2rem; height: 2.4rem;
  background: currentColor;
  -webkit-mask: url("../img/zeichnungen/deko-pfeil.svg") center / contain no-repeat;
  mask: url("../img/zeichnungen/deko-pfeil.svg") center / contain no-repeat;
  flex: none;
}

/* 15 ─ Startseite ────────────────────────────────────────────────────── */
.auftakt {
  position: relative;
  padding-block: clamp(1.25rem, .5rem + 3vw, 3.5rem) clamp(2rem, 1rem + 3vw, 3.5rem);
  overflow-x: clip;
}
.auftakt__raster {
  display: grid;
  gap: 0 clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.auftakt__raster > * { min-width: 0; }
.auftakt__bild {
  width: min(100%, 24rem);
  margin: -.5rem auto -.25rem;
}
.auftakt__text { text-align: left; }
.auftakt__titel { margin: 0 0 1.25rem; }
.auftakt__vorzeile { display: block; margin-bottom: .9rem; }
.auftakt__zeile { display: block; }
.auftakt__zeile--2 { padding-left: .6em; }
.auftakt__zeile--3 { color: var(--himbeer); }
.auftakt__knoepfe { margin-top: 1.75rem; }
.auftakt__notiz {
  position: absolute;
  right: 4%;
  top: 0;
  transform: rotate(6deg);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  pointer-events: none;
}
.auftakt__notiz { display: none; }
@media (min-width: 56rem) {
  .auftakt__raster { grid-template-columns: minmax(0, 1.15fr) minmax(0, .95fr); }
  .auftakt__bild { order: 2; width: 100%; max-width: 38rem; margin: 0 0 0 auto; }
  .auftakt__notiz { display: block; }
}

/* Die drei Schmetterlings-Wege */
.wege-bereich { position: relative; }
.wege-bereich__notiz { margin: 0 0 .5rem .25rem; }
.wege {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 1rem;
}
@media (min-width: 48rem) { .wege { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
.weg { display: flex; }
.weg__link {
  --weg-farbe: var(--rosa);
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .25rem 1rem;
  align-items: center;
  padding: 1rem 1.1rem 1rem .9rem;
  background: var(--weiss);
  border: var(--strich) solid var(--tinte);
  border-radius: var(--r-hand);
  box-shadow: 6px 6px 0 var(--weg-farbe);
  color: var(--tinte);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.weg__link:hover { color: var(--tinte); text-decoration: none; transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--weg-farbe); }
.weg__link:focus-visible { outline-offset: 5px; }
.weg--termine .weg__link { --weg-farbe: var(--rosa); }
.weg--krank .weg__link   { --weg-farbe: var(--gelb); }
.weg--kontakt .weg__link { --weg-farbe: var(--blau); }
.weg__falter { width: 4rem; grid-row: span 2; }
.weg__titel { font-family: var(--schrift-titel); font-weight: 800; font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); line-height: 1.1; align-self: end; }
.weg__text { font-size: var(--fs-klein); color: var(--bleistift); line-height: 1.4; align-self: start; }
.weg__text strong { color: var(--tinte); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.weg__pfeil { grid-row: span 2; width: 1.6rem; height: 1.6rem; transition: transform .18s ease; }
.weg__link:hover .weg__pfeil { transform: translateX(4px); }
@media (min-width: 48rem) {
  .weg__link { grid-template-columns: minmax(0, 1fr) auto; padding: 1.25rem 1.35rem 1.35rem; align-content: start; }
  .weg__falter { grid-row: auto; grid-column: 1 / -1; width: 5rem; margin: -.25rem 0 .35rem -.35rem; }
  .weg__titel { grid-column: 1; }
  .weg__pfeil { grid-column: 2; grid-row: 2; align-self: end; }
  .weg__text { grid-column: 1 / -1; }
}
.schoolfox { margin-top: 1.75rem; }

/* Termine-Vorschau */
.vorschau-termine { display: grid; gap: 2rem 3rem; align-items: start; }
@media (min-width: 62rem) {
  .vorschau-termine { grid-template-columns: minmax(0, 1fr) 17rem; }
}
.vorschau-termine__seite { display: none; }
@media (min-width: 62rem) {
  .vorschau-termine__seite { display: grid; gap: 1.25rem; justify-items: center; position: sticky; top: calc(var(--kopf-sticky, 6.5rem) + 1.5rem); }
}
.legende { list-style: none; margin: 0; padding: 1rem 1.1rem; display: grid; gap: .5rem; background: var(--weiss); border: var(--strich) solid var(--tinte); border-radius: var(--r-hand-klein); font-size: var(--fs-klein); width: 100%; }
.legende__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.legende li { display: flex; align-items: center; gap: .6rem; }
.legende__titel { font-weight: 700; margin: 0 0 .25rem; }

/* Beiträge */
.beitraege { list-style: none; margin: 0; padding: 0; }
@media (min-width: 62rem) { .beitraege { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.beitrag .karte__bild--zeichnung { display: grid; place-items: center; }
.beitrag .karte__bild--zeichnung .zeichnung { width: 42%; }
.beitrag:nth-child(3n+1) { --karte-farbe: var(--blau); }
.beitrag:nth-child(3n+2) { --karte-farbe: var(--rosa); }
.beitrag:nth-child(3n+3) { --karte-farbe: var(--wiese); }

/* Schulprofil */
.profil__bild { position: relative; justify-self: center; width: min(100%, 17rem); }
@media (min-width: 56rem) { .profil__bild { width: min(100%, 26rem); } }
.profil__bild .hand { position: absolute; right: 0; top: 2%; margin: 0; transform: rotate(8deg); }
.profil__bild .zeichnung { padding-top: 2.5rem; }
.profil__erleben { margin-top: 2rem; }
.profil__erleben-titel { font-family: var(--schrift-text); font-size: var(--fs-text); font-weight: 700; margin: 0 0 .9rem; }

/* Einstiege Betreuung / Beratung */
.einstieg .karte__inhalt { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; }
.einstieg__kopf { display: flex; align-items: center; gap: 1rem; }
.einstieg__kopf .zeichnung { width: 5.5rem; flex: none; }
.einstieg__kopf .karte__titel { margin: 0; }
.einstieg .liste-haken { margin: .25rem 0 .5rem; font-size: var(--fs-klein); }

/* Kontaktkachel */
.kontaktkachel {
  display: grid;
  gap: 1.5rem 3rem;
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  background: var(--weiss);
  border: 3px solid var(--tinte);
  border-radius: var(--r-hand);
  box-shadow: 10px 10px 0 var(--flieder);
}
@media (min-width: 56rem) { .kontaktkachel { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
.kontaktkachel .zeichnung { width: clamp(7rem, 5rem + 6vw, 11rem); }
.kontaktkachel h2 { margin-bottom: .4rem; }
.kontaktkachel address, .kontakt-adresse { font-style: normal; }
.kontaktkachel dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem 1rem; margin: 0; }
.kontaktkachel dt { font-weight: 700; }
.kontaktkachel dd { margin: 0; overflow-wrap: anywhere; }
.kontaktkachel__zeiten { list-style: none; padding: 0; margin: 0; }

/* Hero-Bewegung: Buch öffnet sich, Schmetterlinge fliegen los */
.z-auftakt .flugbahn path { stroke: var(--bleistift); }
.auftakt .falter .flattern { transform-box: fill-box; transform-origin: 50% 50%; }
.auftakt .teil { transform-box: fill-box; }
.auftakt .z-auftakt .buch { transform-origin: 50% 100%; }
.falter-1 { --von-x: 55%;  --von-y: 190%; --drehen: 25deg; }
.falter-2 { --von-x: -95%; --von-y: 140%; --drehen: -30deg; }
.falter-3 { --von-x: -15%; --von-y: 110%; --drehen: 12deg; }

@media (prefers-reduced-motion: no-preference) {
  .js .auftakt .z-auftakt .buch { animation: aufklappen .9s cubic-bezier(.3, 1.35, .5, 1) .1s both; }
  .js .auftakt .z-auftakt .falter { transform-origin: 50% 50%; animation: losfliegen 1.5s cubic-bezier(.2, .7, .25, 1) both; }
  .js .auftakt .z-auftakt .flugbahn { animation: einblenden .6s ease 1.9s both; }
  .js .auftakt .z-auftakt .falter-1 { animation-delay: .55s; }
  .js .auftakt .z-auftakt .falter-2 { animation-delay: .75s; }
  .js .auftakt .z-auftakt .falter-3 { animation-delay: .95s; }
  .js .auftakt .z-auftakt .falter-1 .flattern { animation: flattern .17s ease-in-out .55s 8 alternate, schweben 6s ease-in-out 2.4s infinite; }
  .js .auftakt .z-auftakt .falter-2 .flattern { animation: flattern .19s ease-in-out .75s 8 alternate, schweben 7s ease-in-out 3s infinite; }
  .js .auftakt .z-auftakt .falter-3 .flattern { animation: flattern .15s ease-in-out .95s 10 alternate, schweben 5.5s ease-in-out 2.7s infinite; }

  /* Ausmalen erst, wenn die Schmetterlinge gelandet sind */
  .js .auftakt .ausmalen .kr   { transition-duration: .7s; }
  .js .auftakt .ausmalen .kr-1 { transition-delay: 1.3s; }
  .js .auftakt .ausmalen .kr-2 { transition-delay: 1.45s; }
  .js .auftakt .ausmalen .kr-3 { transition-delay: 1.6s; }
  .js .auftakt .ausmalen .kr-4 { transition-delay: 1.75s; }
  .js .auftakt .ausmalen .kr-5 { transition-delay: 1.9s; }
  .js .auftakt .ausmalen .kr-6 { transition-delay: 2.05s; }
  .js .auftakt .ausmalen .kr-7 { transition-delay: 2.2s; }
  .js .auftakt .ausmalen .kr-8 { transition-delay: 2.35s; }
  .js .auftakt .ausmalen .kr-9 { transition-delay: 2.5s; }

  /* Weg überfahren → passender Schmetterling flattert */
  .startseite:has(.weg--termine .weg__link:is(:hover, :focus-visible)) .z-auftakt .falter-1 .flattern,
  .startseite:has(.weg--kontakt .weg__link:is(:hover, :focus-visible)) .z-auftakt .falter-2 .flattern,
  .startseite:has(.weg--krank .weg__link:is(:hover, :focus-visible)) .z-auftakt .falter-3 .flattern {
    animation: flattern .15s ease-in-out infinite alternate;
  }
  .weg__link:is(:hover, :focus-visible) .weg__falter .flattern { animation: flattern .15s ease-in-out 6 alternate; }
}
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }
@keyframes aufklappen {
  from { transform: scale(.72, .12); opacity: 0; }
  35%  { opacity: 1; }
  to   { transform: none; }
}
@keyframes losfliegen {
  from { transform: translate(var(--von-x), var(--von-y)) scale(.15) rotate(var(--drehen)); opacity: 0; }
  25%  { opacity: 1; }
  55%  { transform: translate(calc(var(--von-x) * -.15), calc(var(--von-y) * -.12)) scale(1.08) rotate(calc(var(--drehen) * -.4)); }
  to   { transform: none; opacity: 1; }
}
@keyframes schweben {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  30%      { transform: translate(2px, -5px) rotate(-3deg); }
  65%      { transform: translate(-2px, -2px) rotate(2deg); }
}

/* 16 ─ Bewegung reduziert, Druck ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .js .ausmalen:not(.ist-ausgemalt) .kr { stroke-dashoffset: 0; opacity: 1; }
}

@media print {
  :root { --leiste-hoehe: 0rem; }
  html, body { background: #fff; color: #000; font-size: 11pt; }
  .oberleiste, .hauptnav, .menue-knopf, .elternleiste, .sprunglink, .auftakt__knoepfe, .leuchtkasten, .kopf::after, .fuss::before { display: none !important; }
  .kopf { position: static; box-shadow: none; }
  .kopf__zeile { min-height: 0; }
  .fuss { background: #fff; color: #000; border-top: 1pt solid #000; margin-top: 2rem; }
  .fuss a, .fuss__titel { color: #000; }
  .fuss__logo { background: none; }
  .abschnitt { padding-block: 1.25rem; }
  .abschnitt--band { background: none; }
  .karte, .termin, .download, .weg__link, .kontaktkachel, .hinweis { box-shadow: none !important; break-inside: avoid; }
  .zeichnung { max-width: 5cm; }
  .fliesstext a[href^="http"]::after, .karte a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; word-break: break-all; }
  a { color: #000; }
  .js .ausmalen .kr { stroke-dashoffset: 0 !important; opacity: 1 !important; }
  h1, h2, h3 { break-after: avoid; }
}

/* Porträts im Hochformat: Ohne min-height: 0 wächst die quadratische Box
   (aspect-ratio) mit dem Bild in die Höhe und der Kreis wird oval. */
.person__bild { min-height: 0; }
.person__bild img { aspect-ratio: 1; }