/* GMG-Aupair Agentur. Bildwörterbuch: weißes Papier, Tinte, zwei Farbseiten. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-wdth-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-ext-wdth-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  unicode-range: U+0100-0130, U+0132-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1EFF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-0130, U+0132-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1EFF;
}
@font-face {
  font-family: "Playwrite DE Grund";
  src: url("../fonts/playwrite-de-grund-wght-normal.woff2") format("woff2");
  font-weight: 100 400;
  font-display: swap;
}

:root {
  /* Farben */
  --tinte: #101b3b;
  --tinte-2: #414b70;
  --papier: #ffffff;
  --papier-2: #eff2fb;
  --blau: #2244d6;
  --blau-hell: #d9e0ff;
  --gelb: #ffc83a;
  --gelb-hell: #fff0c2;
  --marker: #ffd84d;
  --rot: #d1341c;
  --gruen: #0b7d5e;
  --linie: #d3d9ec;
  --linie-stark: #7a85ac;
  --fokus: var(--tinte);
  --nacht: #101b3b;
  --nacht-flaeche: #101b3b;
  --flaeche: #ffffff;
  --knopf: #101b3b;
  --knopf-text: #ffffff;
  --knopf-hover: var(--blau);
  --abend: #101b3b;

  /* Schrift */
  --wort: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  --lesen: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --hand: "Playwrite DE Grund", "Segoe Print", cursive;

  /* Maße. Werte mit dem Vorsatz --regler lassen sich im Regler-Panel verschieben. */
  --rand: clamp(16px, 4vw, 48px);
  --max: 1240px;
  --abstand: clamp(56px, 9vw, 124px);
  --regler-aufschlag-hoehe: 52vh;
  --regler-stichwort: 1;
  --regler-bild-ueberstand: 28px;
  --regler-abstand: 1;
  --kopf-hoehe: 58px;
  --aus: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-hoehe) - 1px); scrollbar-color: var(--tinte) var(--papier-2); }
body {
  margin: 0;
  font-family: var(--lesen);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--tinte);
  background: var(--papier);
  caret-color: var(--blau);
  accent-color: var(--blau);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
::selection { background: var(--gelb); color: var(--nacht); }
img, svg, picture { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 0.08em; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
mark {
  color: var(--nacht);
  background: linear-gradient(transparent 12%, var(--marker) 12%, var(--marker) 92%, transparent 92%) no-repeat 0 0 / 100% 100%;
  padding: 0 0.18em;
  margin: 0 -0.08em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.innen { width: min(100% - 2 * var(--rand), var(--max)); margin-inline: auto; }
.innen--schmal { --max: 760px; }
.icon { width: 1.25em; height: 1.25em; flex: none; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprung { position: absolute; left: 8px; top: -80px; z-index: 100; background: var(--nacht); color: #fff; padding: 12px 16px; }
.sprung:focus { top: 8px; }

/* ---------- Kopf ---------- */
.oberzeile { display: none; background: var(--nacht-flaeche); color: #dfe4f7; font-size: 0.875rem; }
.oberzeile .innen { display: flex; gap: 28px; align-items: center; min-height: 38px; --fokus: var(--gelb); }
.oberzeile span, .oberzeile a { display: inline-flex; align-items: center; gap: 8px; }
.oberzeile a { margin-left: auto; color: #fff; font-weight: 700; text-decoration: none; }
.oberzeile a:hover { text-decoration: underline; }

.kopf { position: sticky; top: 0; z-index: 50; background: var(--papier); border-bottom: 1px solid var(--linie); }
.kopf .innen { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: var(--kopf-hoehe); }
.marke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinte); -webkit-tap-highlight-color: transparent; user-select: none; }
.marke__zeichen { width: 46px; height: 46px; transform: rotate(var(--dreh, 0deg)); transition: transform 0.35s var(--aus); }
@media (hover: hover) { .marke:hover .marke__zeichen { transform: rotate(calc(var(--dreh, 0deg) + 22.5deg)); } }
.marke__name { display: none; font-family: var(--wort); font-weight: 700; font-stretch: 90%; font-size: 1.05rem; letter-spacing: -0.01em; line-height: 1; }

.wegwahl { display: inline-flex; border: 2px solid var(--tinte); border-radius: 6px; overflow: hidden; }
.wegwahl a { display: inline-flex; align-items: center; height: 38px; padding: 0 12px; font-weight: 700; font-size: 0.9375rem; text-decoration: none; white-space: nowrap; transition: background-color 0.25s, color 0.25s; }
.wegwahl a + a { border-left: 2px solid var(--tinte); }
.wegwahl a:hover { background: var(--papier-2); }
.wegwahl a:focus-visible { outline-offset: -5px; }
.wegwahl .lang { display: none; }
[data-weg="familie"] .wegwahl [data-waehle="familie"] { background: var(--blau); color: #fff; }
[data-weg="aupair"] .wegwahl [data-waehle="aupair"] { background: var(--gelb); color: var(--nacht); }

.sprachen { display: inline-flex; }
.sprachen a { display: inline-grid; place-items: center; min-width: 32px; height: 44px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; text-decoration: none; color: var(--tinte-2); }
.sprachen a[aria-current] { color: var(--tinte); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.sprachen a:hover { color: var(--tinte); }

.thema { display: grid; place-items: center; width: 40px; height: 44px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--tinte); cursor: pointer; }
.thema:hover { background: var(--papier-2); }
.thema .icon { width: 22px; height: 22px; }
.thema .thema__sonne, [data-thema="dunkel"] .thema .thema__mond { display: none; }
[data-thema="dunkel"] .thema .thema__sonne { display: block; }
.kopf__rechts { display: inline-flex; align-items: center; gap: 2px; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 10px 22px;
  border: 2px solid var(--tinte); border-radius: 4px;
  background: transparent; color: var(--tinte);
  font-weight: 700; font-size: 1rem; line-height: 1.3; text-decoration: none; cursor: pointer;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s, transform 0.25s var(--aus);
}
.knopf .icon { transition: transform 0.35s var(--aus); }
.knopf:hover .icon:last-child { transform: translateX(5px); }
.knopf:hover .icon:first-child:not(:last-child) { transform: translateX(-4px); }
.knopf:active { transform: translateY(1px); }
.knopf--haupt { background: var(--knopf); border-color: var(--knopf); color: var(--knopf-text); }
.knopf--haupt:hover { background: var(--knopf-hover); border-color: var(--knopf-hover); }
.knopf--linie:hover { background: var(--tinte); color: var(--papier); }
.knopf[disabled] { opacity: 0.55; cursor: progress; }
.textknopf { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; border: 0; background: none; font-weight: 700; font-size: 0.9375rem; cursor: pointer; text-decoration: underline; text-underline-offset: 0.25em; }

/* ---------- Stichwörter ---------- */
.stichwort {
  font-family: var(--wort); font-weight: 800; font-stretch: 78%;
  letter-spacing: -0.025em; line-height: 0.92;
  display: block; white-space: nowrap;
}
.punkt { display: inline-block; width: 0.1em; height: 0.1em; margin: 0 0.04em 0 0.065em; border-radius: 50%; background: currentColor; opacity: 0.5; vertical-align: 0.3em; font-size: inherit; color: inherit; text-indent: -9em; overflow: hidden; }
.artikel {
  display: inline-flex; align-items: center; gap: 0.4em;
  margin-left: 0.7em; padding: 0.22em 0.55em 0.24em 0.45em; vertical-align: 0.95em;
  background: #fff; color: var(--nacht); border: 1.5px solid var(--nacht); border-radius: 3px;
  font-family: var(--lesen); font-stretch: 100%; font-weight: 700; font-size: 0.8125rem; letter-spacing: 0; line-height: 1;
  white-space: nowrap;
}
.artikel::before { content: ""; width: 0.72em; height: 0.72em; border-radius: 50%; background: currentColor; }
.artikel--der::before { background: var(--blau); }
.artikel--die::before { background: var(--rot); }
.artikel--das::before { background: var(--gruen); }

.kopfwort { display: grid; gap: clamp(10px, 1.4vw, 18px); margin-bottom: clamp(24px, 3vw, 40px); }
.kopfwort .stichwort { font-size: calc(var(--regler-stichwort) * clamp(2.6rem, 8.4vw, 5.6rem)); }
/* Reicht die Breite nicht, etwa solange die Webschrift fehlt, bricht der Artikel um statt die Seite zu verbreitern. */
.kopfwort .stichwort { white-space: normal; }
.kopfwort .stichwort--lang { font-size: calc(var(--regler-stichwort) * clamp(2.05rem, 6.6vw, 4.3rem)); font-stretch: 75%; }
.bedeutung { font-family: var(--wort); font-weight: 600; font-stretch: 92%; font-size: clamp(1.25rem, 2.3vw, 1.8rem); line-height: 1.3; letter-spacing: -0.01em; max-width: 26ch; }
.wort { display: block; margin-bottom: 0.35em; font-family: var(--lesen); font-style: italic; font-weight: 500; font-size: 1rem; letter-spacing: 0; color: var(--tinte-2); }
.wort::before { content: "= "; font-style: normal; }

/* ---------- Abbildungen mit Beschriftung ---------- */
.abb { position: relative; isolation: isolate; aspect-ratio: var(--verhaeltnis); }
.abb::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 2px solid currentColor; transform: rotate(-2.4deg); pointer-events: none; }
.abb:nth-of-type(even)::before, .raster-2 > .abb::before { transform: rotate(2.4deg); }
.abb picture, .abb img { width: 100%; height: 100%; object-fit: cover; }
.abb img { border-radius: 2px; }
.abb__linien { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 1px 1px rgba(16, 27, 59, 0.45)); }
.abb__linien line { stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 900; stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--aus); }
.schild, .zielpunkt { position: absolute; left: var(--x); top: var(--y); }
.schild {
  display: grid; padding: 5px 11px 6px;
  background: #fff; color: var(--nacht);
  font-family: var(--hand); font-weight: 400; font-size: clamp(0.8rem, 1.5vw, 1rem); line-height: 1.35; white-space: nowrap;
  transform: rotate(-2deg); transform-origin: left center;
  box-shadow: 0 3px 10px -2px rgba(16, 27, 59, 0.35);
  transition: opacity 0.5s, transform 0.7s var(--aus);
}
.schild:nth-of-type(4n + 3) { transform: rotate(1.5deg); }
.schild small { font-family: var(--lesen); font-size: 0.6875rem; font-weight: 500; color: #414b70; line-height: 1.2; }
.zielpunkt { width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; border: 3px solid var(--nacht); transition: transform 0.5s var(--aus); }
.js .abb:not(.sichtbar) .abb__linien line { stroke-dashoffset: 900; }
.js .abb:not(.sichtbar) .schild { opacity: 0; transform: rotate(-2deg) translateY(8px); }
.js .abb:not(.sichtbar) .zielpunkt { transform: scale(0); }
.abb.sichtbar .schild:nth-of-type(n + 3), .abb.sichtbar .abb__linien line:nth-child(2) { transition-delay: 0.25s; }

/* ---------- Aufschlag ---------- */
.aufschlag { padding-top: clamp(18px, 3vw, 40px); }
.aufschlag__kopf { display: grid; gap: 10px; padding-bottom: clamp(16px, 2.4vw, 32px); }
.aufschlag h1 { font-family: var(--wort); font-weight: 800; font-stretch: 84%; font-size: clamp(1.9rem, 3.5vw, 3rem); line-height: 1; letter-spacing: -0.025em; max-width: 16ch; }
.aufschlag__unter { display: none; color: var(--tinte-2); max-width: 96ch; }
.doppelseite { display: grid; }
.seite {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 31vw; column-gap: 14px; align-items: start;
  grid-template-rows: auto auto auto 1fr;
  padding: 18px var(--rand) 20px;
  --fokus: var(--nacht);
}
.seite--familie { background: var(--blau); color: #fff; --fokus: var(--gelb); }
.seite--aupair { background: var(--gelb); color: var(--nacht); }
.seite__text { display: contents; }
.seite__text > * { grid-column: 1; }
.seite__wort { font-size: inherit; font-weight: inherit; grid-column: 1 / -1; }
.seite .abb { grid-column: 2; grid-row: 2 / 5; align-self: end; }
.seite__wort .stichwort { font-size: clamp(2.1rem, 9.4vw, 4.5rem); }
.seite__uebersetzung { margin-top: 8px; font-style: italic; font-size: 0.9375rem; }
.seite--familie .seite__uebersetzung { color: var(--blau-hell); }
.seite--aupair .seite__uebersetzung { color: #4a3a05; }
.seite__definition { margin-top: 10px; font-size: 0.9375rem; line-height: 1.45; max-width: 34ch; }
.knopf--seite { margin-top: 14px; padding-inline: 16px; min-height: 48px; text-align: left; justify-content: space-between; align-self: end; justify-self: start; }
.knopf--wahl::after { content: ""; position: absolute; inset: 0; }
.knopf--offen { display: none; }
.seite--familie .knopf--seite { background: var(--gelb); border-color: var(--gelb); color: var(--nacht); }
.seite--aupair .knopf--seite { background: var(--nacht); border-color: var(--nacht); color: #fff; }
.seite:hover .knopf--seite .icon { transform: translateX(5px); }
.seite .abb img { transition: transform 0.9s var(--aus); }
.seite:hover .abb img { transform: scale(1.03); }
.abb--seite { overflow: visible; }
.abb--seite::before { border-color: var(--nacht); }
.abb--seite picture { display: block; overflow: hidden; height: 100%; }
.abb--seite .abb__linien, .abb--seite .abb__schilder { display: none; }
.aufschlag__fuss { display: flex; flex-wrap: wrap; gap: 4px 22px; padding-block: 14px 6px; font-size: 0.875rem; font-weight: 600; color: var(--tinte-2); }
.aufschlag__fuss li { display: inline-flex; align-items: center; gap: 8px; }
.aufschlag__fuss li::before { content: ""; width: 7px; height: 7px; background: var(--tinte); transform: rotate(45deg); }

.seite__sinne { display: none; }
.doppelseite[data-wahl] .seite:not(.seite--zu) .seite__sinne { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 2px 22px; margin-top: 14px; counter-reset: sinn; }
.doppelseite[data-wahl] .seite:not(.seite--zu) .knopf--wahl { display: none; }
.doppelseite[data-wahl] .seite:not(.seite--zu) .knopf--offen { display: inline-flex; }
.doppelseite[data-wahl] .seite--zu .knopf--offen { display: none; }
.doppelseite[data-wahl] .seite:not(.seite--zu) .seite__sinne { grid-column: 1 / -1; }
.doppelseite[data-wahl] .seite:not(.seite--zu) .abb { grid-row: 2 / 4; }
.seite__sinne li { counter-increment: sinn; }
.seite__sinne a { display: grid; grid-template-columns: 1.3em auto; align-items: baseline; min-height: 44px; align-content: center; font-family: var(--wort); font-stretch: 90%; font-weight: 700; font-size: 1.0625rem; line-height: 1.3; text-decoration: none; }
.seite__sinne a::before { content: counter(sinn); font-family: var(--lesen); font-weight: 500; font-size: 0.8125rem; opacity: 0.85; }
.seite__sinne a span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.22em; }
.seite__sinne a:hover span { text-decoration-thickness: 3px; }
.seite__sinne small { grid-column: 2; font-family: var(--lesen); font-style: italic; font-weight: 500; font-size: 0.8125rem; }

/* gewählte Seite: die andere klappt zu */
.doppelseite[data-wahl] .seite--zu .seite__definition,
.doppelseite[data-wahl] .seite--zu .seite__uebersetzung,
.doppelseite[data-wahl] .seite--zu .abb { display: none; }
.doppelseite[data-wahl] .seite--zu { grid-template-columns: 1fr auto; grid-template-rows: auto; align-items: center; }
.doppelseite[data-wahl] .seite--zu .seite__wort { grid-column: 1; }
.doppelseite[data-wahl] .seite--zu .knopf--seite { grid-column: 2; grid-row: 1; }
.doppelseite[data-wahl] .seite--zu .seite__wort .stichwort { font-size: clamp(1.3rem, 4.6vw, 2rem); }
.doppelseite[data-wahl] .seite--zu .seite__wort .artikel { display: none; }
.doppelseite[data-wahl] .seite--zu .knopf--seite { margin-top: 0; }

/* ---------- Abschnitte ---------- */
.eintrag { padding-block: calc(var(--abstand) * var(--regler-abstand)); position: relative; }
.flaeche--papier { background: var(--papier-2); }
.flaeche--blau { background: var(--blau); color: #fff; --fokus: var(--gelb); }
.flaeche--gelb { background: var(--gelb); color: var(--nacht); --fokus: var(--nacht); }
.flaeche--tinte { background: var(--nacht-flaeche); color: #fff; --fokus: var(--gelb); }
.flaeche--blau .wort { color: var(--blau-hell); }
.flaeche--tinte .wort { color: #c8d0f0; }
.flaeche--gelb .wort { color: #4a3a05; }
.raster-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); }
.fliess { max-width: 58ch; color: var(--tinte-2); }
.fliess + .fliess { margin-top: 1em; }
.klein { margin-top: 18px; font-size: 0.9375rem; color: var(--tinte-2); max-width: 56ch; }
.eintrag h3 { font-family: var(--wort); font-weight: 700; font-stretch: 90%; font-size: 1.35rem; line-height: 1.3; letter-spacing: -0.01em; }

.haken { display: grid; gap: 12px; }
.haken li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; }
.haken .icon { width: 26px; height: 26px; padding: 4px; background: var(--tinte); color: var(--papier); border-radius: 50%; margin-top: 1px; }

/* Lernkarten */
.karten-band { padding-block: clamp(28px, 4vw, 52px) 0; }
.karten__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin-bottom: 16px; }
.karten__kopf h2 { font-family: var(--wort); font-weight: 700; font-stretch: 90%; font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.3; }
.karten__kopf p { font-size: 0.9375rem; color: var(--tinte-2); }
.karten { display: grid; grid-auto-flow: column; grid-auto-columns: 44%; gap: 10px; margin-inline: calc(-1 * var(--rand)); padding: 4px var(--rand) 14px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.karten li { scroll-snap-align: start; }
.karte { display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; border: 0; background: none; cursor: pointer; perspective: 900px; text-align: left; }
.karte__innen { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.7s var(--aus); }
.karte[aria-pressed="true"] .karte__innen { transform: rotateY(180deg); }
.karte__seite { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 14px; border: 2px solid var(--tinte); border-radius: 4px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.karte__vorn { background: var(--flaeche); }
.karte__hinten { transform: rotateY(180deg); justify-content: center; }
.weg--familie .karte__hinten { background: var(--blau); border-color: var(--blau); color: #fff; }
.weg--aupair .karte__hinten { background: var(--gelb); color: var(--nacht); }
.karte__nr { position: absolute; top: 10px; left: 14px; font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.karte__zahl { font-family: var(--wort); font-weight: 800; font-stretch: 78%; font-size: clamp(2rem, 9vw, 3.1rem); line-height: 0.95; letter-spacing: -0.025em; white-space: nowrap; }
.karte__wort { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 700; font-size: 0.9375rem; line-height: 1.3; }
.karte__wort .artikel { margin: 0; vertical-align: 0; }
.karte__wort small { flex-basis: 100%; font-style: italic; font-weight: 500; font-size: 0.8125rem; color: var(--tinte-2); }
.karte__text { font-weight: 600; font-size: 0.9375rem; line-height: 1.4; }
.karte:hover .karte__vorn { background: var(--papier-2); }
.karte:focus-visible { outline: 0; }
.karte:focus-visible .karte__seite { outline: 3px solid var(--fokus); outline-offset: 3px; }

/* Entlastung */
.wenn { font-weight: 700; margin-bottom: 10px; }
.faelle { display: grid; gap: 8px; margin-bottom: 22px; font-family: var(--wort); font-stretch: 92%; font-weight: 500; font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.3; }
.faelle li { display: grid; grid-template-columns: 1.2em 1fr; }
.faelle li::before { content: "…"; color: var(--linie-stark); }

/* Woche */
.woche { margin-top: clamp(40px, 6vw, 80px); padding: clamp(20px, 3.4vw, 44px); background: var(--papier-2); }
.woche__kopf { display: grid; gap: 18px; margin-bottom: 26px; }
.woche__kopf h3 { margin-bottom: 8px; font-size: clamp(1.45rem, 2.6vw, 2rem); }
.woche__kopf p { color: var(--tinte-2); max-width: 60ch; }
.woche__zaehler { display: flex; align-items: center; gap: 14px; color: var(--tinte) !important; font-size: 0.9375rem; line-height: 1.3; font-weight: 600; }
.woche__zaehler b { font-family: var(--wort); font-stretch: 80%; font-weight: 800; font-size: clamp(3.4rem, 7vw, 4.75rem); line-height: 0.85; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; min-width: 2ch; }
.woche__plan { display: grid; gap: 6px; --zeit-a: 7; --zeit-b: 22; }
.woche__achse, .woche__zeile { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) 3.6rem; gap: 8px; align-items: center; }
.woche__achse div { position: relative; height: 18px; font-size: 0.75rem; color: var(--tinte-2); font-variant-numeric: tabular-nums; }
.woche__achse div span { position: absolute; left: calc((var(--h) - 7) / 15 * 100%); transform: translateX(-50%); }
.woche__achse div span:first-child { transform: none; }
.woche__achse div span:last-child { transform: translateX(-100%); }
.woche__notizen { display: none; grid-template-columns: 3rem minmax(0, 1fr) 4.2rem; gap: 8px; }
.woche__notizen div { position: relative; height: 34px; font-family: var(--hand); font-size: 0.875rem; }
.woche__notizen div span { position: absolute; bottom: 4px; left: calc((var(--a) - 7) / 15 * 100%); white-space: nowrap; transform: rotate(-2deg); transform-origin: left bottom; }
.sprachhinweis { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 16px; font-size: 0.9375rem; font-weight: 600; }
.sprachhinweis a { font-weight: 700; }
.woche__tag { font-weight: 700; font-size: 0.9375rem; }
.woche__tag abbr { text-decoration: none; }
.woche__spur {
  position: relative; height: 34px; background: var(--flaeche);
  background-image: linear-gradient(90deg, var(--linie) 1px, transparent 1px);
  background-size: 20% 100%;
}
.woche__summe { font-size: 0.8125rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.block {
  position: absolute; top: 0; bottom: 0;
  left: calc((var(--a) - 7) / 15 * 100%); width: calc((var(--b) - var(--a)) / 15 * 100%);
  display: flex; align-items: center; overflow: hidden;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.7s var(--aus); transition-delay: calc(var(--i) * 0.11s);
}
.block i { padding: 0 10px; font-style: normal; font-size: 0.75rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.block--k { background: var(--blau); color: #fff; }
.block--abend { background: var(--abend); }
.block--s { background: var(--gelb); color: var(--nacht); }
.block--f { background: repeating-linear-gradient(-45deg, transparent 0 7px, var(--linie) 7px 9px); color: var(--tinte-2); }
.js .woche:not(.fertig) .block { clip-path: inset(0 100% 0 0); transition: none; }
.woche__fuss { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; margin-top: 20px; }
.woche__legende { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 0.875rem; }
.woche__legende li { display: flex; align-items: start; gap: 8px; }
.woche__legende .muster { margin-top: 2px; }
.muster { width: 18px; height: 18px; flex: none; }
.muster--k { background: var(--blau); }
.muster--s { background: var(--gelb); }
.muster--a { background: var(--abend); }
.muster--f { background: repeating-linear-gradient(-45deg, var(--flaeche) 0 4px, var(--linie-stark) 4px 5px); border: 1px solid var(--linie-stark); }

/* Ablauf */
.strecke { position: relative; display: grid; gap: 30px; --fortschritt: 1; }
.strecke::before, .strecke::after { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: rgba(255, 255, 255, 0.3); }
.strecke::after { background: var(--gelb); transform-origin: top; transform: scaleY(var(--fortschritt)); }
.strecke li { position: relative; z-index: 1; display: grid; grid-template-columns: 44px 1fr; column-gap: 18px; }
.strecke__nr { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--blau); border: 2px solid #fff; font-family: var(--wort); font-weight: 800; font-size: 1.25rem; transition: background-color 0.4s, color 0.4s, border-color 0.4s; }
.strecke li.erreicht .strecke__nr, html:not(.js) .strecke__nr { background: var(--gelb); border-color: var(--gelb); color: var(--nacht); }
.strecke h3 { margin-bottom: 6px; align-self: center; }
.strecke p { grid-column: 2; color: var(--blau-hell); max-width: 44ch; }
.beleg { display: grid; gap: 14px; margin-top: clamp(40px, 6vw, 72px); }
.beleg__zahl { font-family: var(--wort); font-stretch: 78%; font-weight: 800; font-size: clamp(3.4rem, 10vw, 6rem); line-height: 1; letter-spacing: -0.03em; }
.beleg__zahl mark { display: inline-block; color: var(--nacht); background: var(--marker); padding: 0.16em 0.14em 0.04em; margin: 0; line-height: 1; }
.beleg__text { max-width: 40ch; font-size: 1.125rem; }
.abb--beleg { max-width: 300px; margin-top: 18px; }

/* Kosten und Listen mit Führungspunkten */
.rechnung { padding: clamp(22px, 3.4vw, 44px); background: var(--papier-2); border-top: 6px solid var(--tinte); align-self: start; }
.rechnung--gelb { background: var(--gelb-hell); }
.rechnung h3 { margin-bottom: 18px; font-size: clamp(1.45rem, 2.4vw, 1.9rem); }
.punktliste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.zeile { display: flex; align-items: baseline; gap: 6px; }
.zeile dt { flex: 1; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.zeile dt::after { content: ""; flex: 1; min-width: 16px; border-bottom: 2px dotted var(--linie-stark); transform: translateY(-4px); }
/* Auf schmalen Handys weicht die Punktlinie, bevor sie in den Betrag läuft. */
@media (max-width: 380px) { .zeile dt::after { min-width: 0; } }
.zeile dd { font-family: var(--wort); font-stretch: 88%; font-weight: 700; font-size: 1.25rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.punktliste--werte .zeile { flex-wrap: wrap; }
.punktliste--werte dd { white-space: normal; font-size: 1.0625rem; text-align: right; max-width: 60%; }
.zeile--summe { flex-wrap: wrap; margin-top: 6px; padding-top: 18px; border-top: 2px solid var(--tinte); }
.zeile--summe dd { margin-left: auto; }
.zeile--summe dt { font-weight: 700; }
.zeile--summe dt::after { border: 0; }
.zeile--summe dd { font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
.rechnung__dazu { margin-top: 24px; font-weight: 700; }
.pluspunkte { display: grid; gap: 6px; margin-top: 8px; }
.pluspunkte li { display: flex; gap: 10px; align-items: start; }
.pluspunkte .icon { margin-top: 0.2em; color: var(--blau); }
.rechnung__gebuehr { margin: 22px 0 18px; font-weight: 700; }
.rechnung .knopf { width: 100%; }
.rechnung--gelb .knopf { margin-top: 26px; }
.rechnung__stand { margin-top: 18px; font-size: 0.8125rem; color: var(--tinte-2); }
.abb--kosten { margin-top: 32px; }

/* Voraussetzungen */
.zwei-listen { display: grid; gap: clamp(28px, 4vw, 56px); margin-top: clamp(32px, 5vw, 64px); }
.zwei-listen h3 { margin-bottom: 18px; }
.zwei-listen__wir { background: var(--blau); color: #fff; padding: clamp(22px, 3.4vw, 44px); --fokus: var(--gelb); }
.zwei-listen__wir .haken .icon { background: var(--gelb); color: var(--nacht); }

/* Au-pair: Weg */
.route { display: grid; gap: 28px; margin-top: clamp(28px, 4vw, 56px); }
.route__karte svg { width: 100%; height: auto; overflow: visible; }
.route__netz path { stroke: rgba(16, 27, 59, 0.14); stroke-width: 1.5; }
.route__spur, .route__neben { stroke: rgba(16, 27, 59, 0.38); stroke-width: 3; stroke-dasharray: 2 9; stroke-linecap: round; }
.route__linie { stroke: var(--nacht); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.route__stationen circle { fill: var(--gelb); stroke: var(--nacht); stroke-width: 4; transition: fill 0.3s; }
.route__stationen circle.erreicht { fill: var(--nacht); }
.route__ort { fill: var(--nacht); }
.route__flieger { color: var(--nacht); }
.route__name { font-family: var(--wort); font-weight: 800; font-size: 26px; fill: var(--nacht); letter-spacing: -0.01em; }
.route__km { display: grid; gap: 2px; margin-top: 10px; font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.stationen { display: grid; gap: 4px; }
.stationen li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 12px 0; border-top: 2px solid rgba(16, 27, 59, 0.16); transition: opacity 0.4s; }
.stationen li:first-child { border-top: 0; }
.station__nr { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--nacht); font-family: var(--wort); font-weight: 800; font-size: 1.15rem; transition: background-color 0.3s, color 0.3s; }
.stationen h3 { margin-bottom: 4px; }
.stationen p { max-width: 50ch; }
.stationen li.erreicht .station__nr, html:not(.js) .station__nr { background: var(--nacht); color: var(--gelb); }
.js .route:not(.fertig) .stationen li:not(.erreicht) { opacity: 0.72; }
.js .route:not(.fertig) .route__linie { stroke-dashoffset: 1; }

/* Au-pair: Vorteil Deutsch */
.vorteil { display: grid; align-self: start; }
.vorteil__text { position: relative; z-index: 1; margin: -44px 0 0 clamp(16px, 4vw, 44px); padding: clamp(20px, 3vw, 34px); background: var(--blau); color: #fff; }
.vorteil__text h3 { margin-bottom: 10px; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.vorteil__text p { color: var(--blau-hell); }

/* Au-pair: Sicherheit */
.zusagen { display: grid; }
.zusagen li { padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, 0.24); }
.zusagen li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.24); }
.zusagen h3 { margin-bottom: 6px; color: var(--gelb); }
.zusagen p { color: #c8d0f0; max-width: 52ch; }
.abb--sicher { max-width: 520px; }

/* ---------- Formular ---------- */
.formular { position: relative; padding: clamp(18px, 3vw, 40px); background: var(--flaeche); border: 2px solid var(--tinte); border-radius: 4px; box-shadow: 0 18px 40px -24px rgba(16, 27, 59, 0.45); }
.fortschritt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fortschritt span { height: 6px; background: var(--linie); transition: background-color 0.4s; }
.formular[data-aktiv="1"] .fortschritt span:nth-child(-n + 1),
.formular[data-aktiv="2"] .fortschritt span:nth-child(-n + 2),
.formular[data-aktiv="3"] .fortschritt span:nth-child(-n + 3),
.formular:not([data-aktiv]) .fortschritt span:first-child { background: var(--tinte); }
.fortschritt__text { margin: 10px 0 18px; font-size: 0.875rem; font-weight: 700; color: var(--tinte-2); }
.schritt { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 22px; }
.schritt legend { padding: 0; margin-bottom: 4px; font-family: var(--wort); font-weight: 800; font-stretch: 84%; font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: -0.02em; line-height: 1.05; }
.gruppe__frage, .feld label { display: block; margin-bottom: 8px; font-weight: 700; }
.hinweis { margin: -4px 0 8px; font-size: 0.875rem; color: var(--tinte-2); }
.kacheln { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kacheln--3 { grid-template-columns: 1fr; }
.kachel { position: relative; display: block; cursor: pointer; }
.kachel input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.kachel span { display: grid; place-items: center; text-align: center; min-height: 52px; padding: 10px 12px; border: 2px solid var(--linie-stark); border-radius: 4px; font-weight: 700; line-height: 1.3; transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
.kachel:hover span { border-color: var(--tinte); }
.kachel input:checked + span { background: var(--tinte); border-color: var(--tinte); color: var(--papier); }
.kachel input:focus-visible + span { outline: 3px solid var(--fokus); outline-offset: 3px; }
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: 52px; padding: 12px 14px;
  border: 2px solid var(--linie-stark); border-radius: 4px; background: var(--flaeche);
  font-size: 1rem; transition: border-color 0.2s;
}
.feld textarea { resize: vertical; line-height: 1.45; }
.feld select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101b3b' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 22px; padding-right: 44px; }
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: var(--tinte); }
.feld input::placeholder { color: #68719a; }
.felder-2 { display: grid; gap: 22px; }
.fehlerhaft input:not([type="radio"]):not([type="checkbox"]), .fehlerhaft select, .fehlerhaft textarea, .fehlerhaft .kachel span { border-color: var(--rot); }
.fehler { display: flex; gap: 8px; margin-top: 8px; font-size: 0.9375rem; font-weight: 700; color: var(--rot); }
.fehler::before { content: "!"; display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--rot); color: #fff; font-size: 0.8125rem; margin-top: 2px; }
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vormerken { min-width: 0; border: 2px solid var(--linie-stark); border-radius: 4px; }
.vormerken summary { display: grid; grid-template-columns: 24px minmax(0, 1fr) 24px; gap: 12px; align-items: center; min-height: 52px; padding: 12px 14px; cursor: pointer; list-style: none; }
.vormerken summary::-webkit-details-marker { display: none; }
.vormerken summary > .icon:last-child { transition: transform 0.35s var(--aus); }
.vormerken[open] summary > .icon:last-child { transform: rotate(45deg); }
.vormerken__kopf { display: grid; gap: 2px; min-width: 0; }
.vormerken__kopf b { font-weight: 700; line-height: 1.3; }
.vormerken__kopf span { font-size: 0.875rem; color: var(--tinte-2); }
.vormerken.hat-dateien .vormerken__kopf span { color: var(--tinte); font-weight: 700; }
.vormerken__platz { display: grid; gap: 12px; padding: 0 14px 14px; min-width: 0; }
.zustimmung { display: grid; grid-template-columns: 26px 1fr; gap: 12px; font-size: 0.9375rem; line-height: 1.45; cursor: pointer; }
.zustimmung input { width: 24px; height: 24px; margin: 1px 0 0; }
.zustimmung.fehlerhaft { color: var(--rot); }
.formular__knoepfe { display: flex; gap: 10px; justify-content: space-between; margin-top: 6px; }
.formular__knoepfe .knopf--haupt { flex: 1; }
.formular__knoepfe [data-zurueck] { padding-inline: 14px; }
.formular__knoepfe [data-zurueck] span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.formular__fehler { padding: 12px 14px; background: #fde9e5; border: 2px solid var(--rot); border-radius: 4px; font-weight: 600; color: var(--nacht); }
.danke { display: grid; gap: 14px; justify-items: start; padding-block: 12px; }
.danke__zeichen { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--gruen); color: #fff; }
.danke__zeichen .icon { width: 30px; height: 30px; }
.danke h3 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.danke p { color: var(--tinte-2); max-width: 46ch; }
.danke__wege { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.danke__text-feld { width: 100%; min-height: 120px; padding: 12px; border: 2px solid var(--linie-stark); border-radius: 4px; font-size: 0.875rem; }
.direkt { margin-top: clamp(24px, 3vw, 40px); padding-top: 20px; border-top: 2px solid var(--tinte); max-width: 30rem; }
.direkt p { margin: 6px 0 14px; color: var(--tinte-2); }
.direkt__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.formular__seite .kopfwort { margin-bottom: 0; }
.eintrag--formular .kopfwort .stichwort { font-size: calc(var(--regler-stichwort) * clamp(2.3rem, 5.4vw, 4.1rem)); }

/* ---------- Fragen ---------- */
.fragen { border-top: 2px solid var(--tinte); }
.fragen details { border-bottom: 1px solid var(--linie-stark); }
.fragen summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 2px; cursor: pointer; list-style: none; font-family: var(--wort); font-weight: 600; font-stretch: 92%; font-size: clamp(1.1rem, 1.8vw, 1.3rem); line-height: 1.3; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary .icon { width: 26px; height: 26px; transition: transform 0.35s var(--aus); }
.fragen details[open] summary .icon { transform: rotate(45deg); }
.fragen summary:hover { color: var(--blau); }
.antwort { padding: 0 0 22px; max-width: 66ch; color: var(--tinte-2); }

/* ---------- Agentur ---------- */
.kontakt { display: grid; gap: 18px 28px; margin-top: 28px; padding-top: 28px; border-top: 2px solid var(--tinte); }
.kontakt dt { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 700; color: var(--tinte-2); margin-bottom: 2px; }
.kontakt dd { font-weight: 700; font-size: 1.0625rem; }
.kontakt dd ul { font-weight: 500; font-size: 1rem; }
.kontakt__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* ---------- Fuß ---------- */
.fuss { background: var(--nacht-flaeche); color: #dfe4f7; padding-block: clamp(40px, 6vw, 72px) 110px; --fokus: var(--gelb); }
.fuss .innen { display: grid; gap: 32px; }
.fuss__marke { display: flex; gap: 16px; align-items: center; }
.fuss__marke .marke__zeichen { width: 72px; height: 72px; color: #fff; flex: none; }
.fuss__marke strong { color: #fff; font-family: var(--wort); font-size: 1.2rem; }
.fuss h2 { margin-bottom: 10px; font-size: 0.875rem; font-weight: 700; color: #fff; }
.fuss ul { display: grid; gap: 2px; }
.fuss a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss__sozial { display: flex !important; gap: 8px !important; }
.fuss__sozial a { justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px; }
.fuss__sozial a:hover { background: var(--gelb); color: var(--nacht); border-color: var(--gelb); }
.fuss__klein { font-size: 0.8125rem; color: #aab3d6; }

/* ---------- feste Leiste ---------- */
.hat-leiste { --leiste-platz: calc(68px + env(safe-area-inset-bottom)); }
.hat-leiste .fuss { padding-bottom: calc(var(--leiste-platz) + 28px); }
html:not(.js) .leiste { display: none; }
.leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: stretch; gap: 8px;
  padding: 8px var(--rand) calc(8px + env(safe-area-inset-bottom));
  background: var(--flaeche); border-top: 2px solid var(--tinte);
  box-shadow: 0 -12px 30px -20px rgba(16, 27, 59, 0.55);
}
.leiste .knopf { min-height: 50px; padding: 8px 14px; gap: 8px; font-size: 0.9375rem; white-space: nowrap; }
.leiste__wa { flex: none; display: grid; place-items: center; width: 50px; border: 2px solid var(--tinte); border-radius: 4px; color: var(--tinte); transition: background-color 0.25s, color 0.25s; }
.leiste__wa:hover { background: var(--tinte); color: var(--papier); }
.leiste__wa .icon { width: 24px; height: 24px; }
.leiste__konto { flex: none; }
.leiste__haupt { position: relative; flex: 1 1 auto; min-width: 0; justify-content: space-between; }
.leiste__haupt.hat-neues::after { content: ""; position: absolute; top: -6px; right: -6px; width: 14px; height: 14px; border-radius: 50%; background: var(--rot); border: 2px solid var(--flaeche); }
@media (max-width: 379px) {
  .leiste { gap: 6px; }
  .leiste .knopf { padding-inline: 10px; }
  .leiste__konto .icon { display: none; }
}

/* ---------- Schicht: Seite aus dem Wörterbuch, die von unten aufgeht ---------- */
html.schicht-offen { overflow: hidden; }
.schicht {
  --seite-grund: var(--nacht-flaeche); --seite-text: #fff; --seite-text-2: #c8d0f0; --seite-fokus: var(--gelb);
  --schicht-rand: var(--rand);
  position: fixed; inset: auto 0 var(--tastatur, 0px) 0;
  width: 100%; max-width: none; height: 92vh; height: min(92dvh, calc(100dvh - var(--tastatur, 0px) - 8px)); max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: var(--tinte); overflow: visible;
}
.schicht[data-farbe="familie"] { --seite-grund: var(--blau); --seite-text: #fff; --seite-text-2: var(--blau-hell); --seite-fokus: var(--gelb); }
.schicht[data-farbe="aupair"] { --seite-grund: var(--gelb); --seite-text: var(--nacht); --seite-text-2: #4a3a05; --seite-fokus: var(--nacht); }
.schicht::backdrop { background: rgba(16, 27, 59, 0.62); opacity: 0; transition: opacity 0.3s; }
.schicht--da::backdrop { opacity: 1; transition-duration: 0.5s; }
.schicht__blatt {
  display: flex; flex-direction: column; width: 100%; max-width: 1280px; height: 100%; margin-inline: auto;
  background: var(--papier); border-radius: 20px 20px 0 0; overflow: hidden; overflow: clip;
  box-shadow: 0 -24px 60px -24px rgba(8, 14, 34, 0.7);
  transform: translateY(102%); transition: transform 0.28s cubic-bezier(0.5, 0, 0.9, 0.4);
}
.schicht--da .schicht__blatt { transform: translateY(0); transition: transform 0.55s var(--aus); }
.schicht--zieht .schicht__blatt { transition: none; }
.schicht__kopf, .ansicht__seite, .ansicht__direkt {
  --tinte: var(--seite-text); --tinte-2: var(--seite-text-2); --papier: var(--seite-grund); --fokus: var(--seite-fokus);
  background: var(--seite-grund); color: var(--seite-text);
  transition: background-color 0.3s, color 0.3s;
}
.schicht__kopf { flex: none; padding: 7px var(--schicht-rand) 4px; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.schicht--zieht .schicht__kopf { cursor: grabbing; }
.schicht__griff { display: block; width: 44px; height: 5px; margin: 0 auto 4px; border-radius: 3px; background: currentColor; opacity: 0.5; }
.schicht__leiste { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-height: 44px; }
.schicht__reiter { display: inline-flex; gap: 2px; margin-right: auto; margin-left: -10px; }
.schicht__reiter[hidden] { display: none; }
.schicht__reiter button { min-height: 44px; padding: 0 10px; border: 0; background: none; color: inherit; font-weight: 700; font-size: 0.9375rem; cursor: pointer; }
.schicht__reiter button > * { pointer-events: none; }
.schicht__reiter button[aria-pressed="false"] { opacity: 0.78; }
.schicht__reiter button[aria-pressed="false"]:hover { opacity: 1; }
.schicht__reiter button[aria-pressed="true"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.42em; }
.schicht__zu { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; color: inherit; cursor: pointer; }
.schicht__zu .icon { width: 26px; height: 26px; transform: rotate(45deg); transition: transform 0.3s var(--aus); }
.schicht__zu:hover .icon { transform: rotate(135deg); }
/* relative: Versteckte Eingaben (.vh) bleiben im Scrollbereich. Sonst ragen sie aus dem Blatt, und Fokus oder
   scrollIntoView schieben den Kopf mit den Reitern und dem Schließen-Knopf aus dem Bild. */
.schicht__inhalt { position: relative; flex: 1; min-height: 0; overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--linie-stark) transparent; }
.schicht__inhalt:focus { outline: 0; }
.ansicht[hidden] { display: none; }

.ansicht--formular { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; min-height: 100%; }
.ansicht__seite { padding: 2px var(--schicht-rand) 22px; }
.ansicht__seite .kopfwort { margin-bottom: 0; gap: 8px; }
.ansicht__seite .stichwort, .ansicht__seite .kopfwort .stichwort { font-size: clamp(2.2rem, 11vw, 3.6rem); }
.ansicht__seite .bedeutung { font-size: clamp(1.1rem, 2vw, 1.4rem); }
.ansicht__seite .wort { color: var(--seite-text-2); }
.ansicht__blatt { padding: clamp(20px, 3vw, 36px) var(--schicht-rand) 28px; min-width: 0; }
.ansicht__blatt .formular { padding: 0; background: none; border: 0; box-shadow: none; }
.ansicht__wechsel { margin-top: 18px; }
.ansicht__direkt { padding: 20px var(--schicht-rand) calc(24px + env(safe-area-inset-bottom)); }
.ansicht__direkt:empty { padding: 0; }
.ansicht__direkt .direkt { margin: 0; padding: 0; border: 0; max-width: 30rem; }
.ansicht__direkt .direkt h3 { font-family: var(--wort); font-weight: 700; font-stretch: 90%; font-size: 1.2rem; }

.ansicht--wahl { display: grid; grid-template-rows: auto 1fr; min-height: 100%; }
.ansicht--wahl[hidden] { display: none; }
.ansicht__titel { padding: clamp(18px, 3vw, 30px) var(--schicht-rand) 18px; font-family: var(--wort); font-weight: 800; font-stretch: 84%; font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1.05; letter-spacing: -0.02em; }
/* Die Wahl ist eine Doppelseite in klein: randlose Farbseiten mit derselben Abbildung wie auf der ersten Seite. */
.wahlkacheln { display: grid; grid-auto-rows: 1fr; }
.wahlkachel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr); grid-template-rows: auto 1fr auto; gap: 12px 16px; padding: 20px var(--schicht-rand); text-decoration: none; }
.wahlkachel:last-child { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
.wahlkachel:focus-visible { outline-offset: -8px; }
.wahlkachel--familie { background: var(--blau); color: #fff; --fokus: var(--gelb); }
.wahlkachel--aupair { background: var(--gelb); color: var(--nacht); --fokus: var(--nacht); }
.wahlkachel .stichwort { grid-column: 1 / -1; font-size: clamp(2.1rem, 10vw, 3.6rem); }
.wahlkachel .abb { grid-column: 2; grid-row: 2 / 4; align-self: end; }
.wahlkachel .abb--seite { margin-bottom: 0; box-shadow: none; }
.wahlkachel__text { grid-column: 1; max-width: 36ch; font-size: 0.9375rem; line-height: 1.45; }
.wahlkachel__knopf { grid-column: 1; justify-self: start; align-self: end; min-height: 48px; padding-inline: 16px; text-align: left; }
.wahlkachel--familie .wahlkachel__knopf { background: var(--gelb); border-color: var(--gelb); color: var(--nacht); }
.wahlkachel--aupair .wahlkachel__knopf { background: var(--nacht); border-color: var(--nacht); color: #fff; }
.wahlkachel:hover .icon { transform: translateX(5px); }

/* Abschluss eines Wegs auf der Seite: Das Formular selbst liegt in der Schicht. */
.abschluss { display: grid; gap: clamp(22px, 3vw, 32px); justify-items: start; align-content: start; }
.abschluss__knopf { min-height: 60px; padding-inline: 26px; font-size: 1.0625rem; }
.abschluss .direkt { margin-top: 0; width: 100%; }

@media (min-width: 760px) {
  .wahlkacheln { grid-template-columns: 1fr 1fr; }
  .wahlkachel { padding: clamp(28px, 3vw, 40px) var(--schicht-rand); grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
  .wahlkachel:last-child { padding-bottom: calc(clamp(28px, 3vw, 40px) + env(safe-area-inset-bottom)); }
  .wahlkachel .stichwort { font-size: clamp(3rem, 5.4vw, 5rem); }
  .wahlkachel__text { font-size: 1.0625rem; }
}
@media (min-width: 900px) {
  /* Auf großen Fenstern schwebt die Leiste als Dock, die Schicht wird zur aufgeschlagenen Doppelseite. */
  .hat-leiste { --leiste-platz: 84px; }
  /* Rechts statt mittig: In der Mitte läge das Dock auf der ersten Bildschirmseite über der Faktenzeile. */
  .leiste { left: auto; right: var(--rand); bottom: 14px; padding: 7px; gap: 7px; border: 2px solid var(--tinte); border-radius: 6px; box-shadow: 0 20px 44px -22px rgba(8, 14, 34, 0.75); }
  .leiste .knopf { min-height: 48px; padding-inline: 18px; }
  .leiste__wa { width: 48px; }
  .leiste__haupt { flex: none; min-width: 11.5rem; }
  .schicht { --schicht-rand: clamp(28px, 3.4vw, 44px); }
  .schicht__blatt { width: calc(100% - 48px); }
  .ansicht--formular { grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr); grid-template-rows: auto 1fr; }
  .ansicht__seite { grid-column: 1; grid-row: 1; padding: 10px var(--schicht-rand) 22px; }
  .ansicht__seite .stichwort, .ansicht__seite .kopfwort .stichwort { font-size: clamp(2.8rem, 4.6vw, 4rem); }
  .ansicht__direkt { grid-column: 1; grid-row: 2; padding: 8px var(--schicht-rand) 36px; }
  .ansicht__blatt { grid-column: 2; grid-row: 1 / span 2; padding: 32px clamp(32px, 5vw, 72px) 48px; }
  .ansicht__blatt .formular, .ansicht__blatt .ansicht__wechsel { max-width: 680px; }
}

/* Flache Fenster: Der Aufschlag rückt zusammen, damit beide Wahlknöpfe über dem Dock bleiben. */
@media (min-width: 900px) and (max-height: 780px) {
  .aufschlag { padding-top: 10px; }
  .aufschlag__kopf { padding-bottom: 10px; gap: 6px; }
}

/* Kurze Handys: Der Aufschlag rückt zusammen, damit Wahlknöpfe und Belegzeile nicht unter der Leiste liegen. */
@media (max-width: 759px) and (max-height: 860px) {
  .aufschlag { padding-top: 12px; }
  .aufschlag__kopf { padding-bottom: 10px; }
  .aufschlag h1 { font-size: 1.7rem; }
  .doppelseite:not([data-wahl]) .seite { padding-block: 12px; }
  .doppelseite:not([data-wahl]) .seite__definition { margin-top: 6px; }
}

/* ---------- Bewegung ----------
   Alle Ausgangszustände hängen an .regt. Ohne Skript und bei reduzierter Bewegung gilt sofort der Endzustand. */
.abb::before { transition: transform 1s var(--aus); }
.regt .abb:not(.sichtbar)::before { transform: rotate(0deg); }
.regt mark { transition: background-size 0.7s var(--aus), color 0.25s 0.1s; }
.regt mark:not(.gezeichnet) { background-size: 0 100%; color: inherit; }
@keyframes stempel { from { opacity: 0; transform: scale(1.45) rotate(-5deg); } 55% { opacity: 1; } to { opacity: 1; transform: none; } }
.regt .eintrag .kopfwort:not(.gezeichnet) .artikel { opacity: 0; }
.regt .eintrag .kopfwort.gezeichnet .artikel { animation: stempel 0.42s var(--aus) 0.2s backwards; }
.regt .schicht--da .ansicht--formular .kopfwort .artikel { animation: stempel 0.42s var(--aus) 0.42s backwards; }
.regt .haken .icon { stroke-dasharray: 1 2; stroke-dashoffset: 0; transition: stroke-dashoffset 0.5s var(--aus); transition-delay: calc(var(--n, 0) * 70ms); }
.regt .haken:not(.gezeichnet) .icon { stroke-dashoffset: 1.02; }
.regt .haken li:nth-child(2) { --n: 1; }
.regt .haken li:nth-child(3) { --n: 2; }
.regt .haken li:nth-child(4) { --n: 3; }
.regt .haken li:nth-child(n + 5) { --n: 4; }
@keyframes haken-ziehen { from { stroke-dashoffset: 1.02; } to { stroke-dashoffset: 0; } }
.regt .danke:not([hidden]) .danke__zeichen .icon { stroke-dasharray: 1 2; animation: haken-ziehen 0.6s var(--aus) 0.15s backwards; }
@keyframes kippen { 0%, 100% { transform: rotateY(0deg); } 42% { transform: rotateY(-26deg); } }
.karte--kippt .karte__innen { animation: kippen 1s cubic-bezier(0.45, 0, 0.2, 1); }
@keyframes schritt-vor { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes schritt-zurueck { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
.regt [data-richtung="vor"] .schritt:not([hidden]) { animation: schritt-vor 0.36s var(--aus); }
.regt [data-richtung="zurueck"] .schritt:not([hidden]) { animation: schritt-zurueck 0.36s var(--aus); }

/* ---------- Rechtsseiten ---------- */
.recht { padding-block: clamp(40px, 7vw, 96px); }
.recht h1 { font-family: var(--wort); font-weight: 800; font-stretch: 80%; font-size: clamp(2.4rem, 7vw, 4.5rem); line-height: 0.95; letter-spacing: -0.025em; margin-bottom: 24px; }
.recht h2 { font-family: var(--wort); font-weight: 700; font-size: 1.35rem; margin: 36px 0 8px; }
.recht p { margin-bottom: 12px; max-width: 68ch; }
.recht__hinweis { padding: 14px 16px; background: var(--gelb-hell); border: 2px solid var(--tinte); border-radius: 4px; font-weight: 600; }

/* ---------- Dunkle Ansicht ----------
   Die beiden Farbseiten (Blau, Gelb) und die Papierschilder bleiben, wie sie sind.
   Nur Grund, Schrift und Linien wechseln. */
html[data-thema="dunkel"] {
  color-scheme: dark;
  --tinte: #eef1fb;
  --tinte-2: #b7c0e6;
  --papier: #0a1024;
  --papier-2: #131c3f;
  --flaeche: #161f47;
  --linie: #2a366a;
  --linie-stark: #8590c9;
  --gelb-hell: #2b2817;
  --nacht-flaeche: #172250;
  --knopf: var(--gelb);
  --knopf-text: var(--nacht);
  --knopf-hover: #ffd96b;
  --abend: #c8d1f6;
}
html[data-thema="dunkel"] .fragen summary:hover { color: var(--gelb); }
html[data-thema="dunkel"] .pluspunkte .icon { color: var(--blau-hell); }
html[data-thema="dunkel"] .fehler, html[data-thema="dunkel"] .zustimmung.fehlerhaft { color: #ff9a8b; }
html[data-thema="dunkel"] .fehlerhaft input:not([type="radio"]):not([type="checkbox"]), html[data-thema="dunkel"] .fehlerhaft select, html[data-thema="dunkel"] .fehlerhaft .kachel span { border-color: #ff9a8b; }
html[data-thema="dunkel"] .feld input::placeholder { color: #9aa5d6; }
html[data-thema="dunkel"] .feld select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eef1fb' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
html[data-thema="dunkel"] .formular { box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.7); }
html[data-thema="dunkel"] .abb img { filter: brightness(0.94); }

/* ---------- ab Tablet ---------- */
@media (max-width: 400px) {
  :root { --rand: 12px; }
  .kopf .innen { gap: 6px; }
  .marke__zeichen { width: 40px; height: 40px; }
  .wegwahl a { padding: 0 9px; }
  .sprachen a { min-width: 27px; }
  .thema { width: 34px; }
}
@media (min-width: 480px) {
  .marke__name { display: block; }
  .kacheln--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kacheln--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .felder-2 { grid-template-columns: 1fr 1fr; align-items: start; }
  .kontakt { grid-template-columns: 1fr 1fr; }
  .formular__knoepfe [data-zurueck] span { position: static; width: auto; height: auto; clip-path: none; }
}
@media (min-width: 620px) {
  .wegwahl .lang { display: inline; }
  .wegwahl .kurz { display: none; }
  .wegwahl a { padding: 0 18px; height: 40px; }
  .sprachen a { min-width: 38px; }
  .woche__achse, .woche__zeile { grid-template-columns: 3rem minmax(0, 1fr) 4.2rem; }
  .woche__spur { height: 40px; }
  .woche__kopf { grid-template-columns: 1fr auto; align-items: end; }
}
@media (min-width: 620px) {
  .karten { grid-auto-columns: 30%; }
}
@media (min-width: 760px) {
  :root { --kopf-hoehe: 68px; }
  .seite__sinne a { font-size: 1.2rem; min-height: 44px; }
  .doppelseite[data-wahl] .seite:not(.seite--zu) .seite__sinne { grid-column: 1; }
  .doppelseite[data-wahl] .seite:not(.seite--zu) .abb { grid-row: 2 / 5; }
  .doppelseite[data-wahl] .seite:not(.seite--zu) .seite__sinne { gap: 4px 40px; margin-top: 22px; }
  .oberzeile { display: block; }
  .oberzeile__zeiten { display: none !important; }
  .aufschlag__unter { display: block; }
  .doppelseite { grid-template-columns: 1fr 1fr; transition: grid-template-columns 0.7s var(--aus); }
  .doppelseite[data-wahl="links"] { grid-template-columns: 1.5fr 0.5fr; }
  .doppelseite[data-wahl="rechts"] { grid-template-columns: 0.5fr 1.5fr; }
  .seite { grid-template-columns: minmax(0, 1fr) clamp(170px, 19vw, 290px); column-gap: clamp(16px, 2.4vw, 36px); padding: clamp(24px, 3vw, 48px); min-height: clamp(400px, var(--regler-aufschlag-hoehe), 540px); }
  .seite__wort { margin-bottom: clamp(8px, 1.4vw, 20px); }
  .seite:first-child { padding-left: max(var(--rand), (100vw - var(--max)) / 2); }
  .seite:last-child { padding-right: max(var(--rand), (100vw - var(--max)) / 2); }
  .seite__wort .stichwort { font-size: calc(var(--regler-stichwort) * clamp(2.6rem, 5.6vw, 5.2rem)); }
  .seite__uebersetzung { font-size: 1rem; margin-top: 12px; }
  .seite__definition { font-size: 1.0625rem; margin-top: 14px; }
  .knopf--seite { margin-top: 24px; min-height: 54px; padding-inline: 22px; z-index: 3; gap: 20px; }
  .abb--seite { overflow: visible; z-index: 2; margin-bottom: calc(-1 * clamp(24px, 3vw, 48px) - var(--regler-bild-ueberstand)); box-shadow: 0 24px 40px -22px rgba(16, 27, 59, 0.55); }
  .abb--seite .abb__linien, .abb--seite .abb__schilder { display: block; }
  .aufschlag__fuss { padding-block: calc(var(--regler-bild-ueberstand) + 26px) 8px; font-size: 0.9375rem; gap: 6px 32px; }
  .doppelseite[data-wahl] .seite--zu { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; align-items: start; }
  .doppelseite[data-wahl] .seite--zu .knopf--seite { grid-column: 1; grid-row: 2; justify-self: start; margin-top: 8px; }
  .doppelseite[data-wahl] .seite--zu .seite__wort .stichwort { font-size: clamp(1.3rem, 2.1vw, 2rem); }
  .doppelseite[data-wahl] .seite--zu .knopf--seite span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .doppelseite[data-wahl] .seite--zu .knopf--seite { width: 54px; padding: 0; justify-content: center; }
  .abb--beleg { max-width: none; margin: 0; }
  .beleg { grid-template-columns: auto minmax(0, 1fr) clamp(180px, 22vw, 290px); align-items: center; column-gap: clamp(24px, 4vw, 56px); }
  .beleg .abb { margin-bottom: calc(-1 * var(--abstand) - 56px); z-index: 2; box-shadow: 0 24px 40px -22px rgba(16, 27, 59, 0.55); }
  .eintrag--kosten { padding-top: calc(var(--abstand) + 40px); }
  .zwei-listen { grid-template-columns: 1fr 1fr; align-items: start; }
  .fuss .innen { grid-template-columns: 1.6fr 1fr 1fr auto; }
  .fuss__klein { grid-column: 1 / -1; }
  .fuss { padding-bottom: clamp(40px, 6vw, 72px); }
}
@media (min-width: 900px) {
  .karten { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-columns: auto; gap: 14px; margin-inline: 0; padding: 4px 0 0; overflow: visible; }
  .karte { aspect-ratio: 1 / 1; }
  .karte__zahl { font-size: clamp(1.9rem, 3.1vw, 2.9rem); }
  .oberzeile__zeiten { display: inline-flex !important; }
  .aufschlag h1 { max-width: none; white-space: nowrap; }
  .raster-2 { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: start; }
  .woche__notizen { display: grid; }
  .raster-2--kosten { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .raster-2--kopf { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: end; }
  .raster-2--kopf .kopfwort { margin-bottom: 0; }
  .raster-2--jahr { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
  .raster-2--formular { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .raster-2--fragen { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); }
  .raster-2--fragen .kopfwort { position: sticky; top: calc(var(--kopf-hoehe) + 32px); }
  .raster-2--sicher { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
  .raster-2--agentur { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .raster-2--agentur .abb { margin-top: 10px; }
  .abb--rechts { margin-top: 12px; }
  .abb--jahr { max-width: 360px; margin-top: 36px; }
  .abb--kosten { max-width: 440px; margin-top: 44px; }
  .abb--reise { width: 100%; max-width: 440px; justify-self: end; margin-top: calc(-1 * var(--abstand) - 40px); box-shadow: 0 24px 40px -22px rgba(16, 27, 59, 0.55); }
  .eintrag--weg { margin-top: 40px; }
  .formular__seite { position: sticky; top: calc(var(--kopf-hoehe) + 32px); }
  .route { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; column-gap: clamp(32px, 5vw, 80px); }
  .route .textknopf { grid-column: 1 / -1; justify-self: start; }
  .strecke { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; }
  .strecke::before, .strecke::after { left: 22px; right: 12%; top: 21px; bottom: auto; width: auto; height: 2px; }
  .strecke::after { transform-origin: left; transform: scaleX(var(--fortschritt)); }
  .strecke li { display: block; }
  .strecke__nr { margin-bottom: 20px; }
  .strecke h3 { margin-bottom: 10px; }
}
@media (min-width: 1100px) {
  .wegwahl a { padding: 0 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after, *::backdrop { transition-duration: 0.01ms !important; transition-delay: 0s !important; animation-duration: 0.01ms !important; }
}
@media print {
  .kopf, .oberzeile, .leiste, .schicht, .fuss__sozial { display: none; }
  .weg[hidden] { display: block !important; }
  .regt .eintrag .kopfwort .artikel { opacity: 1 !important; animation: none !important; }
  .regt .haken .icon { stroke-dashoffset: 0 !important; }
  .regt mark { background-size: 100% 100% !important; }
  .regt .abb::before { transform: rotate(-2.4deg) !important; }
}