@font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-regular-latin.woff") format("woff"), url("/assets/fonts/manrope-regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-bold-latin.woff") format("woff"), url("/assets/fonts/manrope-bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --wald: #10251F;
  --tanne: #193C31;
  --tinte: #19231E;
  --kalk: #9ACA2B;
  --kalk-hell: #E3F2B8;
  --kalk-flaeche: #EEF3DC;
  --lesegruen: #54730D;
  --papier: #F7F7F0;
  --papier-2: #EEEFE5;
  --weiss: #FFFFFF;
  --schiefer: #4A5550;
  --nebel: #C9D3CD;
  --nebel-2: #8FA197;
  --linie: #D9DBCF;
  --linie-dunkel: #2B4A40;
  --grau-grafik: #7E8C84;
  --flechte: #5E7268;
  --bernstein: #E3A93B;
  --ocker: #9A6408;
  --vorschau: #FFF4D6;
  --vorschau-rand: #B87A0F;
  --planraster: #17332B;

  --a-1: 4px; --a-2: 8px; --a-3: 12px; --a-4: 16px; --a-5: 24px;
  --a-6: 32px; --a-7: 48px; --a-8: 64px; --a-9: 96px; --a-10: 128px;

  --r-knopf: 10px; --r-karte: 12px; --r-formular: 16px; --r-etikett: 6px;
  --schatten-karte: 0 1px 2px rgba(16,37,31,.06), 0 8px 24px rgba(16,37,31,.08);
  --schatten-blatt: 0 12px 32px rgba(16,37,31,.10);

  --schrift: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ein: cubic-bezier(.2, .7, .2, 1);
  --rand: 16px;
  --abschnitt: 64px;
  --kopf-h: 60px;
  --fokus: var(--wald);
  --link: var(--lesegruen);
}
@media (min-width: 600px) { :root { --rand: 24px; } }
@media (min-width: 820px) { :root { --rand: 32px; --abschnitt: 96px; } }
@media (min-width: 1024px) { :root { --kopf-h: 72px; } }
@media (min-width: 1280px) { :root { --rand: 40px; --abschnitt: 128px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.weich { scroll-behavior: smooth; }
[id] { scroll-margin-top: 88px; }
main :is(a, button, input, select, textarea, summary, [tabindex]), .fuss a { scroll-margin-top: 88px; }
@media (max-width: 1023.98px) { main :is(a, button, input, select, textarea, summary, [tabindex]), .fuss a { scroll-margin-bottom: 96px; } }
body {
  margin: 0;
  font-family: var(--schrift);
  font-size: clamp(1.0625rem, 1rem + .25vw, 1.125rem);
  line-height: 1.6;
  color: var(--tinte);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
  font-synthesis-weight: none;
  overflow-x: hidden;
  overflow-x: clip;
}
html.menue-offen { overflow: hidden; }
html.menue-offen body { overflow: visible; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
h1, h2, h3, h4 { text-wrap: balance; hyphens: manual; }
p, li, dd { hyphens: manual; overflow-wrap: break-word; }
p, li, blockquote, figcaption { text-wrap: pretty; }
.satz { display: inline-block; }
.karte-titel { font-weight: 700; text-wrap: balance; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
strong, b { font-weight: 700; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--kalk); color: var(--wald); }

.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; }
.sprungmarke { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--kalk); color: var(--wald); padding: 12px 18px; border-radius: var(--r-knopf); font-weight: 700; text-decoration: none; --fokus: #fff; }
.sprungmarke:focus-visible { top: 12px; }

.behaelter { width: 100%; max-width: calc(1200px + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }

.i { width: 20px; height: 20px; flex: none; fill: none; }
.i--24 { width: 24px; height: 24px; }
.i--32 { width: 32px; height: 32px; }
.i--48 { width: 48px; height: 48px; }

.flaeche-wald { background-color: var(--wald); color: var(--papier); --fokus: var(--kalk-hell); --link: var(--kalk); }
.flaeche-tanne { background-color: var(--tanne); color: var(--papier); --fokus: var(--kalk-hell); --link: var(--kalk); }
.flaeche-tinte { background-color: var(--tinte); color: var(--papier); --fokus: var(--kalk-hell); --link: var(--kalk); }
.flaeche-papier { background-color: var(--papier); }
.flaeche-papier2 { background-color: var(--papier-2); }
.flaeche-weiss { background-color: var(--weiss); }
.planraster {
  background-image: linear-gradient(var(--planraster) 1px, transparent 1px), linear-gradient(90deg, var(--planraster) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
}
.tafelraster {
  background-image: linear-gradient(rgba(217,219,207,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(217,219,207,.5) 1px, transparent 1px);
  background-size: 24px 24px;
}

h1 { font-size: clamp(2rem, 1.2rem + 3.9vw, 4.5rem); line-height: 1.04; letter-spacing: -.02em; font-weight: 700; }
h2 { font-size: clamp(1.75rem, 1.25rem + 2.1vw, 3rem); line-height: 1.1; letter-spacing: -.015em; font-weight: 700; max-width: 26ch; }
h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); line-height: 1.25; font-weight: 700; }
.ueberzeile {
  font-size: clamp(.8125rem, .78rem + .15vw, .875rem); font-weight: 700; line-height: 1.3;
  letter-spacing: .08em; text-transform: uppercase; color: var(--kalk);
  margin-bottom: var(--a-4); hyphens: manual;
}
.ueberzeile--hell { color: var(--lesegruen); }
.einleitung { font-size: clamp(1.0625rem, .98rem + .4vw, 1.25rem); line-height: 1.6; max-width: 64ch; color: var(--schiefer); }
.flaeche-wald .einleitung, .flaeche-tanne .einleitung, .flaeche-tinte .einleitung { color: var(--nebel); }
.klein { font-size: .9375rem; line-height: 1.5; }

.abschnitt { padding-block: var(--abschnitt); }
.abschnitt-kopf { margin-bottom: var(--a-7); }
.abschnitt-kopf h2 { margin-bottom: 20px; }
@media (min-width: 820px) { .abschnitt-kopf { margin-bottom: var(--a-8); } }

.knopf {
  text-wrap: balance;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px;
  border-radius: var(--r-knopf); border: 2px solid transparent;
  font: 700 1.0625rem/1.2 var(--schrift); letter-spacing: .01em;
  text-decoration: none; text-align: center; hyphens: manual;
  transition: transform .12s ease-out, background-color .12s ease-out, border-color .12s ease-out, color .12s ease-out;
}
.knopf:hover { transform: translateY(-1px); }
.knopf .i { width: 20px; height: 20px; }
.knopf--gross { min-height: 56px; padding-inline: 28px; }
.knopf--klein { min-height: 44px; padding: 8px 18px; font-size: 1rem; }
.knopf--breit { width: 100%; }
.knopf--primaer { background: var(--kalk); color: var(--wald); --fokus: #FFFFFF; }
.knopf--primaer:hover { background: #A6D13F; }
.knopf--hell { box-shadow: inset 0 0 0 1px var(--lesegruen); --fokus: var(--wald); }
.knopf--hell:hover { background: #8EBD22; }
.knopf--rahmen-dunkel { border-color: var(--nebel); color: var(--papier); background: transparent; }
.knopf--rahmen-dunkel:hover { background: rgba(247,247,240,.06); border-color: var(--papier); }
.knopf--rahmen-hell { border-color: var(--tinte); color: var(--tinte); background: transparent; }
.knopf--rahmen-hell:hover { background: rgba(16,37,31,.06); }
.knopf[disabled], .knopf[aria-disabled="true"] { opacity: .7; cursor: progress; transform: none; }

.textlink {
  display: inline-block; min-height: 44px; padding: 10px 0; line-height: 1.45;
  color: var(--link); font-weight: 700; text-wrap: balance;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px;
}
.textlink .i { display: inline-block; width: 20px; height: 20px; margin-left: 8px; vertical-align: -.25em; transition: transform .12s ease-out; }
.textlink .i:has(> use[href$="#sym-hoerer"]) { margin: 0 8px 0 0; }
.nb { white-space: nowrap; }
.textlink:hover .i { transform: translateX(3px); }
.textlink--gross { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); }
.textknopf {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 4px;
  background: none; border: 0; font-weight: 700; font-size: 1rem;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; color: inherit;
}
.textknopf .i { width: 20px; height: 20px; }
.textknopf--dunkel { color: var(--papier); }

.kopf { position: sticky; top: 0; z-index: 50; background: var(--wald); color: var(--papier); --fokus: var(--kalk-hell); border-bottom: 1px solid transparent; transition: border-color .2s; }
.kopf.gescrollt { border-bottom-color: var(--linie-dunkel); }
.kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--kopf-h); }
.kopf-logo { display: flex; align-items: center; min-height: 44px; flex: none; border-radius: 4px; }
.kopf-logo img { height: 44px; width: auto; }
.haupt-nav { display: none; }
.haupt-nav ul { display: flex; gap: clamp(20px, 2.4vw, 36px); list-style: none; }
.haupt-nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; color: var(--papier); text-decoration: none; font-weight: 700; font-size: 1rem; white-space: nowrap; }
.haupt-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: var(--kalk); transform: scaleX(0); transform-origin: left; transition: transform .2s var(--ein); }
.haupt-nav a:hover::after { transform: scaleX(1); background: var(--nebel-2); }
.haupt-nav a[aria-current="true"]::after { transform: scaleX(1); background: var(--kalk); }
.kopf-aktionen { display: flex; align-items: center; gap: 8px; }
.kopf-tel { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 44px; min-height: 44px; padding: 0 6px; color: var(--papier); text-decoration: none; font-weight: 700; border-radius: var(--r-knopf); }
.kopf-tel .i { width: 20px; height: 20px; color: var(--kalk); }
.kopf-tel-text { display: none; }
.kopf-cta { display: none; }
.menue-knopf { display: none; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 0 12px; border: 2px solid var(--linie-dunkel); border-radius: var(--r-knopf); background: transparent; color: var(--papier); font-weight: 700; font-size: 1rem; }
.js .menue-knopf { display: inline-flex; }
@media (max-width: 369.98px) {
  .menue-knopf[aria-expanded="true"] .menue-text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.menue-striche { position: relative; width: 18px; height: 12px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.menue-striche::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 2px; background: currentColor; }
.menue-knopf[aria-expanded="true"] .menue-striche { border-color: transparent; }
.menue-knopf[aria-expanded="true"] .menue-striche::before,
.menue-knopf[aria-expanded="true"] .menue-striche::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 2px; background: currentColor; transform: rotate(45deg); }
.menue-knopf[aria-expanded="true"] .menue-striche::before { transform: rotate(-45deg); }
.menue { position: fixed; left: 0; right: 0; top: var(--kopf-h); bottom: 0; z-index: 49; background: var(--wald); color: var(--papier); overflow-y: auto; padding: 16px 0 48px; border-top: 1px solid var(--linie-dunkel); }
.menue-liste { list-style: none; margin-bottom: 28px; }
.menue-liste a { display: flex; align-items: center; min-height: 56px; font-size: 1.375rem; font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--linie-dunkel); }
.menue-tel { margin-top: 20px; color: var(--nebel); }
.menue-tel a { color: var(--papier); font-weight: 700; display: inline-flex; min-height: 44px; align-items: center; }
@media (min-width: 1024px) {
  .kopf-logo img { height: 48px; }
  .haupt-nav { display: block; }
  .kopf-cta { display: inline-flex; }
  .js .menue-knopf { display: none; }
  .menue { display: none !important; }
  .kopf-aktionen { gap: 16px; }
}
@media (min-width: 1280px) { .kopf-tel-text { display: inline; } }
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .kopf-innen { gap: 16px; }
  .haupt-nav ul { gap: 16px; }
  .haupt-nav a { font-size: .9375rem; }
}
.haupt-nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--kalk); }
.menue-liste a[aria-current="page"], .menue-liste a[aria-current="true"] { color: var(--kalk); }

.einstieg { padding-block: 40px 48px; }
.einstieg-raster { display: grid; gap: 40px; align-items: center; }
.einstieg h1 { margin-bottom: 20px; }
.einstieg h1 { font-size: clamp(2rem, max(1.2rem + 3.9vw, min(10vw, 2.75rem)), 4.5rem); }
.h1-zweite { display: block; color: var(--kalk); }
.einstieg-unterzeile { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height: 1.5; color: var(--nebel); max-width: 28em; margin-bottom: 28px; }
.einstieg-unterzeile strong { color: var(--papier); }
.einstieg-aktionen { display: flex; flex-direction: column; gap: 12px; }
.einstieg-aktionen .knopf { width: 100%; }
.knopf-tel { width: 100%; justify-content: flex-start; gap: 14px; padding-block: 10px; }
.knopf-tel .i { color: var(--kalk); }
.tel-zeilen { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; text-align: left; }
.tel-z2 { font-weight: 400; }
@media (max-width: 399.98px) { .knopf-pfeil { display: none; } }
@media (min-width: 600px) {
  .einstieg-aktionen { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
  .einstieg-aktionen .knopf, .knopf-tel { width: auto; }
  .knopf-tel { justify-content: center; }
  .tel-zeilen { flex-direction: row; gap: .3em; }
  .tel-z2 { font-weight: 700; }
}
.einstieg-leise { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; margin-top: 18px; font-size: .9375rem; line-height: 1.4; color: var(--nebel); }
.vertrauen { list-style: none; display: flex; flex-wrap: wrap; gap: 0 20px; }
.einstieg-leise .vertrauen { flex-basis: 100%; }
.vertrauen li { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; }
.vertrauen .i { width: 16px; height: 16px; color: var(--kalk); }
.vertrauen a { color: var(--nebel); text-decoration-thickness: 1px; text-underline-offset: 4px; display: inline-block; padding-block: 10px; margin-block: -10px; }
.vertrauen a:hover, .film-link:hover, .foerder-link:hover { color: var(--papier); }
.film-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--nebel); text-decoration: none; }
.film-link .i { width: 18px; height: 18px; color: var(--kalk); }
.film-link > span:first-of-type { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.film-link-dauer { color: var(--nebel-2); }
.foerder-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--nebel); text-decoration: none; }
.foerder-link .i { width: 16px; height: 16px; color: var(--kalk); }
.foerder-link > span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.foerder-link .stern { color: var(--kalk); }

.einstieg-grafik { position: relative; width: 100%; max-width: 360px; margin: 0 auto; padding: 18px; border: 1px solid rgba(247,247,240,.10); border-radius: var(--r-formular); background: rgba(25,60,49,.38); }
.einstieg-grafik::before, .einstieg-grafik::after { content: ""; position: absolute; width: 22px; height: 22px; border: 0 solid var(--kalk); pointer-events: none; }
.einstieg-grafik::before { left: -1px; top: -1px; border-left-width: 3px; border-top-width: 3px; border-top-left-radius: var(--r-formular); }
.einstieg-grafik::after { right: -1px; bottom: -1px; border-right-width: 3px; border-bottom-width: 3px; border-bottom-right-radius: var(--r-formular); }
.kette { width: 100%; height: auto; overflow: visible; }
.kette--quer { display: none; }
@media (max-width: 359.98px) { .einstieg-grafik { padding-inline: 8px; } }
.kette-steuerung { position: absolute; top: 8px; right: 8px; z-index: 1; }
html:not(.bewegung) .kette-steuerung { display: none; }
.kette-knopf { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1.5px solid var(--linie-dunkel); border-radius: 50%; background: rgba(16,37,31,.72); color: var(--nebel); cursor: pointer; transition: border-color .15s, color .15s, background-color .15s; }
.kette-knopf:hover { border-color: var(--kalk); color: var(--kalk); }
.kette-knopf .i { width: 16px; height: 16px; }

@media (min-width: 820px) and (max-width: 1023.98px) {
  .einstieg-grafik { max-width: 720px; margin-inline: 0; }
  .kette--quer { display: block; }
  .kette--hoch { display: none; }
}
@media (min-width: 820px) and (max-width: 1023.98px), (min-width: 1280px) { .einstieg-grafik { padding: 14px 18px 12px; } }
@media (min-width: 1024px) {
  .einstieg { padding-block: 56px; }
  .einstieg-raster { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .einstieg-text { grid-column: 1 / 8; }
  .einstieg-grafik { grid-column: 8 / 13; max-width: 340px; justify-self: end; }
  .einstieg-aktionen { display: grid; grid-template-columns: max-content; }
  .einstieg-aktionen .knopf, .einstieg-aktionen .knopf-tel { width: 100%; }
}
@media (min-width: 1280px) {
  .einstieg { padding-block: 64px 72px; }
  .einstieg-text { grid-column: 1 / 7; padding-right: 24px; }
  .einstieg h1 { font-size: clamp(2rem, .6rem + 3.6vw, 3.625rem); }
  .einstieg-grafik { grid-column: 7 / 13; max-width: 600px; }
  .kette--quer { display: block; }
  .kette--hoch { display: none; }
}

.k-punkt { fill: var(--papier); fill-opacity: .07; }
.kette text { font-family: var(--schrift); font-weight: 700; fill: var(--papier); }
.kette .k-name { font-size: 18px; text-anchor: middle; }
.kette--hoch .k-name { text-anchor: start; }
.k-seg { stroke: var(--flechte); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.k-durch { stroke: var(--kalk); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.k-licht { fill: var(--kalk-hell); opacity: 0; }
.k-st, .k-puls { transform-box: fill-box; transform-origin: center; }
.k-kreis { fill: var(--tanne); stroke: var(--papier); stroke-width: 3; }
.k-kreis.k-gruen { stroke: var(--kalk); }
.k-leer { stroke: none; }
.k-ring-offen { fill: none; stroke: var(--bernstein); stroke-width: 3; stroke-dasharray: 6 4; stroke-linecap: round; opacity: 0; }
.k-ring-zu { fill: none; stroke: var(--kalk); stroke-width: 3; }
.k-sym { color: var(--papier); }
.k-fuell { fill: var(--kalk); transform-box: fill-box; transform-origin: bottom; }
.k-konto-rand { fill: none; stroke: var(--kalk); stroke-width: 4; }
.k-konto-sym { color: var(--wald); }
.k-winkel { opacity: .4; }
.k-winkel path { fill: none; stroke: var(--kalk); stroke-width: 4; stroke-linecap: square; stroke-dasharray: 1; stroke-dashoffset: 0; }
.k-halte { stroke: var(--kalk); stroke-opacity: .7; stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 0; }
.k-pille { stroke-width: 1.5; }
.k-et-offen { opacity: 0; }
.k-et-offen .k-pille { fill: rgba(227,169,59,.12); stroke: var(--bernstein); }
.k-et-offen text { fill: var(--bernstein); font-size: 17px; }
.k-et-offen circle { fill: var(--bernstein); }
.k-et-zu { opacity: .85; }
.k-et-zu .k-pille { fill: rgba(154,202,43,.12); stroke: var(--kalk); }
.k-et-zu text { fill: var(--kalk); font-size: 17px; }
.k-et-zu use { color: var(--kalk); }
.kette--hoch .k-et-offen text, .kette--hoch .k-et-zu text { font-size: 16px; }
.js.bewegung .kette:not(.bereit) { opacity: 0; animation: k-notfall 0s 3s forwards; }
@keyframes k-notfall { to { opacity: 1; } }

.filmband { padding-block: var(--abschnitt); }
.filmband-raster { display: grid; gap: 40px; align-items: center; }
.filmband-text h2 { margin-bottom: 20px; }
.filmband-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px; }
.film-rahmen { min-width: 0; }
.film-buehne { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-formular); overflow: hidden; background-color: var(--wald); color: var(--papier); box-shadow: 0 24px 48px rgba(16,37,31,.18); --fokus: var(--kalk-hell); }
.film-flaeche { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 24px); padding: clamp(18px, 4vw, 36px); text-align: center; }
.film-flaeche-titel { font-size: clamp(1.375rem, 1rem + 2vw, 2.5rem); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
.film-hinweis { margin-top: 14px; font-size: .9375rem; line-height: 1.5; color: var(--schiefer); }
.film-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film-poster { display: none; }
.js .film-buehne .film-poster { display: block; z-index: 1; }
.film-start { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: flex-start; width: 100%; padding: clamp(12px, 3vw, 24px); background: transparent; border: 0; color: var(--papier); text-align: left; }
.film-start-kapsel { display: inline-flex; align-items: center; gap: 14px; padding: 8px 20px 8px 8px; border-radius: 999px; background: var(--wald); box-shadow: 0 8px 24px rgba(16,37,31,.28); }
.film-start-kreis { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--kalk); color: var(--wald); transition: transform .12s ease-out; }
.film-start:hover .film-start-kreis { transform: scale(1.06); }
.film-start-kreis .i { width: 24px; height: 24px; margin-left: 3px; }
.film-start-text { display: flex; flex-direction: column; font-weight: 700; font-size: 1.0625rem; line-height: 1.3; }
.film-start-dauer { font-weight: 400; font-size: .875rem; color: var(--nebel); }
.film-start:focus-visible { outline: none; }
.film-start:focus-visible .film-start-kapsel { outline: 3px solid var(--kalk-hell); outline-offset: 3px; }
@media (max-width: 479.98px) {
  .film-start-dauer { display: none; }
  .film-start-kapsel { gap: 10px; padding: 5px 16px 5px 5px; }
  .film-start-kreis { width: 40px; height: 40px; }
  .film-start-kreis .i { width: 20px; height: 20px; }
  .film-start-text { font-size: 1rem; }
}
.film-buehne video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.js #film[data-film="bereit"]:not(.spielt) .film-buehne video { visibility: hidden; }
#film.spielt .film-buehne video { z-index: 3; }
#film video:focus-visible { outline-offset: -3px; }
#film[data-film="ausstehend"] .film-buehne { aspect-ratio: auto; min-height: 0; box-shadow: none; background-color: var(--weiss); color: var(--tinte); border: 1px solid var(--linie); background-image: linear-gradient(var(--linie) 1px, transparent 1px), linear-gradient(90deg, var(--linie) 1px, transparent 1px); background-size: 24px 24px; background-position: -1px -1px; }
#film[data-film="ausstehend"] .film-flaeche { position: static; align-items: flex-start; text-align: left; padding: clamp(20px, 4vw, 36px); }
#film[data-film="ausstehend"] .film-flaeche-titel { font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem); background: var(--weiss); box-shadow: 0 0 0 6px var(--weiss); }
html:not(.js) #film[data-film="bereit"] .film-flaeche { display: none; }
@media (min-width: 1024px) {
  .filmband-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; }
}

.trenner { display: flex; justify-content: center; padding-block: 4px; }
.trenner span { display: block; width: 120px; height: 9px; border-left: 1px solid var(--grau-grafik); border-right: 1px solid var(--grau-grafik); background: linear-gradient(var(--grau-grafik), var(--grau-grafik)) center / 100% 1px no-repeat; }
.flaeche-weiss-zu-papier2 { background: linear-gradient(var(--weiss) 50%, var(--papier-2) 50%); }
.flaeche-weiss-zu-papier { background: linear-gradient(var(--weiss) 50%, var(--papier) 50%); }
.flaeche-papier2-zu-papier { background: linear-gradient(var(--papier-2) 50%, var(--papier) 50%); }

.triptychon { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.tript-feld { position: relative; aspect-ratio: 880 / 740; border: 1px solid var(--linie); border-radius: var(--r-karte); background: #EEF0E6; container-type: inline-size; }
.tript-bild { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: inset(0 round 11px); }
.stempel { display: inline-block; padding: .3em .7em; border-radius: 6px; background: var(--kalk); color: var(--wald); outline: 2px solid var(--kalk); outline-offset: 3px; font-weight: 700; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.tript-feld .stempel { position: absolute; left: 50%; top: 44%; font-size: clamp(.5625rem, 10.8cqi - 3.2px, 1.125rem); transform: translate(-50%, -50%) rotate(-7deg); }
@container (max-width: 130px) {
  .tript-feld .stempel { font-size: clamp(.5625rem, 11.7cqi - 3.1px, 1.125rem); letter-spacing: .03em; padding: .25em .5em; outline-offset: 2px; }
}
@keyframes stempeln { from { opacity: 0; transform: translate(-50%, -50%) rotate(-7deg) scale(1.25); } 60% { opacity: 1; } to { opacity: 1; transform: translate(-50%, -50%) rotate(-7deg) scale(1); } }
.bewegung .triptychon.an .stempel { animation: stempeln .22s var(--ein) .3s both; }
.bewegung .triptychon.an .tript-feld:nth-child(2) .stempel { animation-delay: .45s; }
.bewegung .triptychon.an .tript-feld:nth-child(3) .stempel { animation-delay: .6s; }
@media (max-width: 399.98px) { .triptychon { gap: 8px; } }
@media (max-width: 359.98px) {
  .triptychon { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tript-feld:nth-child(3) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 4px); }
}
@media (min-width: 820px) { .triptychon { gap: 20px; } }
@media (min-width: 1024px) {
  .alltag-kopf { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: center; }
  .alltag-kopf .abschnitt-kopf { margin-bottom: 0; }
}

.gewerke { display: flex; gap: 10px; align-items: baseline; margin-top: 18px; font-size: .9375rem; line-height: 1.5; color: var(--schiefer); }
.gewerke-fuer { color: var(--tinte); font-weight: 700; flex: none; }
.gewerke-liste { list-style: none; display: flex; flex-wrap: wrap; row-gap: 4px; margin-left: -29px; clip-path: inset(0 0 0 29px); }
.gewerke-liste li { position: relative; padding-left: 29px; }
.gewerke-liste li::before { content: ""; position: absolute; left: 12px; top: calc(.75em - 2.5px); width: 5px; height: 5px; border-radius: 50%; background: var(--lesegruen); }
@media (max-width: 599.98px) {
  .gewerke { position: relative; display: block; font-size: .8125rem; }
  .gewerke-fuer { position: absolute; left: 0; top: 0; }
  .gewerke-liste { margin-left: -18px; clip-path: inset(0 0 0 18px); }
  .gewerke-liste li { padding-left: 18px; }
  .gewerke-liste li:first-child { padding-left: calc(18px + 2.1em); }
  .gewerke-liste li::before { left: 6.5px; }
}

.alltag-satz { border: 0; margin: 40px 0 0; padding: 0; min-width: 0; }
.alltag-satz legend { padding: 0; margin-bottom: 16px; font-size: 1rem; font-weight: 700; color: var(--schiefer); }
.alltag-karten { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.alltag-karte {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  padding: 18px 16px 14px; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-karte);
  box-shadow: var(--schatten-karte); transition: border-color .2s var(--ein), background-color .2s var(--ein);
}
.alltag-karte > .i { color: var(--lesegruen); }
.alltag-karte .karte-titel { font-size: 1.0625rem; line-height: 1.3; }
.alltag-karte.markiert { border: 2px solid var(--lesegruen); background: var(--kalk-flaeche); padding: 17px 15px 13px; }
.kenn-ich {
  margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  padding: 8px 16px 8px 10px; border: 1.5px solid var(--grau-grafik); border-radius: 999px; background: var(--weiss);
  font-weight: 700; font-size: .9375rem; color: var(--tinte); transition: border-color .12s, background-color .12s;
}
.kenn-ich:hover { border-color: var(--tinte); }
.kaestchen { display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--schiefer); border-radius: 6px; background: var(--weiss); }
.kaestchen .i { width: 18px; height: 18px; color: var(--weiss); opacity: 0; }
.kenn-ich[aria-pressed="true"] { border-color: var(--lesegruen); }
.kenn-ich[aria-pressed="true"] .kaestchen { background: var(--lesegruen); border-color: var(--lesegruen); }
.kenn-ich[aria-pressed="true"] .kaestchen .i { opacity: 1; }
.alltag-rueckmeldung { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin-top: 20px; min-height: 44px; }
.alltag-gemerkt { font-weight: 700; }
.js .alltag-rueckmeldung:not(.aktiv) .alltag-sprechen { display: none; }
.js .alltag-rueckmeldung:not(.aktiv) { min-height: 0; margin-top: 0; }
.alltag-rueckmeldung.aktiv { animation: einblenden .2s var(--ein); }
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 599.98px) { .alltag-karte { padding: 16px 14px 14px; } .alltag-karte.markiert { padding: 15px 13px 13px; } .alltag-karte .karte-titel { font-size: 1rem; } }
@media (max-width: 599.98px) {
  .alltag-karten { grid-template-columns: minmax(0, 1fr); }
  .alltag-karte { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 10px; align-items: start; }
  .alltag-karte > .i { width: 40px; height: 40px; }
  .alltag-karte .karte-titel, .alltag-karte .kenn-ich { grid-column: 2; }
  .alltag-karte .kenn-ich { margin-top: 0; justify-self: start; }
}
@media (min-width: 880px) {
  .alltag-karten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .alltag-karte { padding: 22px 20px 18px; }
  .alltag-karte.markiert { padding: 21px 19px 17px; }
  .alltag-karte .karte-titel { font-size: 1.1875rem; }
}

.bewegung .wartet, .bewegung .wartet * { animation-play-state: paused !important; }
.bewegung .still, .bewegung .still * { animation: none !important; }
.bewegung .wartet .ein { opacity: 0; }

.illu { display: block; }
.illu :is(path, rect, circle) { vector-effect: non-scaling-stroke; }
.illu .s { fill: none; stroke: var(--tinte); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.illu .s1 { stroke-width: 1; }
.illu .s3 { stroke-width: 3; }
.illu .grau { stroke: var(--grau-grafik); }
.illu .w { fill: #FBFBF6; }
.illu .papier { fill: #FDFCF6; }
.illu .k { fill: var(--kalk); }
.illu .t { fill: var(--tanne); }
.illu .ti { fill: var(--tinte); }
.illu .kf { fill: var(--kalk-flaeche); }
.illu .li { fill: var(--linie); }
.illu .fe { fill: #DCE6D2; }
.illu .him { fill: #EEF0E6; }
.illu .bod { fill: #E6E7DC; }
.illu .sa { fill: #EADFC2; }
.illu .dk { fill: #0A1814; }
.illu .ki { fill: none; stroke: #B9A57A; stroke-width: 3; stroke-linecap: round; }
.illu .gr { fill: none; stroke: var(--lesegruen); stroke-width: 2; stroke-linecap: round; }
.illu .reflex { fill: #E4E9E3; opacity: .9; }
.illu .streifen { fill: #FBFBF6; opacity: .75; }
.illu .fuge { fill: none; stroke: #3A6B5A; stroke-width: 1.5; stroke-linecap: round; }
.illu .boden-kalk { fill: none; stroke: var(--kalk); stroke-width: 3; stroke-linecap: round; }
.illu .balken { fill: var(--nebel); }
.illu .raster { fill: none; stroke: var(--linie); stroke-width: 1; }
.illu .achse { fill: none; stroke: var(--grau-grafik); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.illu .kurve { fill: none; stroke: var(--lesegruen); stroke-width: 4.5; stroke-linecap: round; vector-effect: none; stroke-dasharray: 1; stroke-dashoffset: 0; }
.illu .spitze { stroke: var(--lesegruen); stroke-width: 2; }
.illu .sym-t { color: var(--tanne); }
.illu .sym-w, .illu .sym-wald { color: var(--wald); }
.illu .sym-lese { color: var(--lesegruen); }
.hand-text { font: 700 30px var(--schrift); fill: var(--tinte); }
.bafa-zahl { font: 700 19px var(--schrift); fill: var(--tinte); text-anchor: middle; }
.kz-zahl { font: 700 14px var(--schrift); fill: var(--tinte); text-anchor: middle; }
.kz-gross { font-size: 17px; fill: var(--lesegruen); }
.kz-unter { font: 400 12px var(--schrift); fill: var(--schiefer); text-anchor: middle; }
.illu .kz-alt { fill: var(--nebel-2); }
.illu .kz-basis { fill: none; stroke: var(--tinte); stroke-width: 1.5; }
.illu .kz-alt, .illu .kz-neu, .illu .mw-fuell, .illu .mw-spitze, .illu .mw-haken { transform-box: fill-box; transform-origin: center bottom; }
.illu .mw-spitze, .illu .mw-haken { transform-origin: center; }
@keyframes fuellen { from { transform: scaleY(0); } }
@keyframes aufspringen { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes strich-zeichnen { from { transform: scaleX(0); } }
@keyframes kurve-zeichnen { from { stroke-dashoffset: 1; } }

.stellen-leiste { display: none; }
.glied {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 116px; padding: 22px 10px 18px; border: 2px solid var(--linie); border-radius: 12px; background: var(--weiss);
  color: var(--tinte); font-weight: 700; font-size: 1.0625rem; text-align: center; box-shadow: var(--schatten-karte);
  transition: background-color .25s var(--ein), border-color .25s var(--ein), color .25s var(--ein), box-shadow .25s var(--ein);
}
.glied .i { color: var(--lesegruen); transition: color .25s var(--ein); }
button.glied:hover { background: var(--kalk-flaeche); border-color: var(--lesegruen); }
.glieder { counter-reset: glied; }
button.glied { counter-increment: glied; }
button.glied::after { content: counter(glied); position: absolute; left: 10px; top: 10px; display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid currentColor; border-radius: 50%; font-size: .8125rem; line-height: 1; opacity: .7; }
.glied[aria-selected="true"] .i { color: var(--wald); }
.glied[aria-selected="true"]::after { opacity: 1; }
.glied[aria-selected="true"] { background: var(--kalk); border-color: var(--lesegruen); color: var(--wald); box-shadow: inset 0 0 0 1px var(--lesegruen), 0 10px 24px rgba(84,115,13,.22); }
@keyframes einrasten { from { transform: scale(.92); } to { transform: none; } }
.bewegung .glied[aria-selected="true"] { animation: einrasten .2s var(--ein); }
.glied + .glied::before, .glied--grau::before {
  content: ""; position: absolute; top: 50%; right: calc(100% + 2px); width: 24px; height: 4px; margin-top: -2px;
  background: var(--lesegruen); transition: background-color .25s var(--ein);
}
.glied.nach::before, .glied--grau::before { background: repeating-linear-gradient(90deg, var(--grau-grafik) 0 6px, transparent 6px 11px); }
.glied--grau { border: 2px dashed var(--grau-grafik); color: var(--schiefer); background: transparent; box-shadow: none; }
.glied--grau .i { color: var(--grau-grafik); }
.glied--grau small { font-size: .875rem; font-weight: 400; line-height: 1.35; }
.glieder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 28px; }
.schiene { position: relative; height: 26px; margin-top: 4px; }
.schiene::before { content: ""; position: absolute; left: calc((100% - 84px) / 8); right: calc((100% - 84px) / 8); top: 12px; height: 2px; background: repeating-linear-gradient(90deg, var(--grau-grafik) 0 6px, transparent 6px 11px); }
.schiene-voll { position: absolute; left: calc((100% - 84px) / 8); top: 12px; height: 2px; width: calc(var(--fort, .667) * (100% - (100% - 84px) / 4)); background: var(--lesegruen); transition: width .25s var(--ein); }
.lichtpunkt { position: absolute; top: 7px; left: calc((100% - 84px) / 8 + var(--punkt, .667) * (100% - (100% - 84px) / 4) - 6px); width: 12px; height: 12px; border-radius: 50%; background: var(--kalk); box-shadow: 0 0 0 2px var(--lesegruen); transition: left .25s var(--ein); }
.stellen-inhalte { position: relative; }
.stelle-akk { display: block; }
.stelle { border-top: 1px solid var(--linie); }
.stelle:focus-visible { outline-offset: 6px; }
.stelle.blende { animation: einblenden .2s var(--ein); }
.stelle-akk-knopf {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 24px; column-gap: 14px; align-items: center;
  width: 100%; min-height: 56px; padding: 16px 0; background: none; border: 0; text-align: left; font-weight: 700;
}
.stelle-nr { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--tinte); background: var(--weiss); font-weight: 700; }
.stelle-name { font-size: 1.125rem; line-height: 1.3; }
.stelle-frage-kurz { grid-column: 2; font-size: 1rem; font-weight: 400; line-height: 1.45; color: var(--schiefer); }
.stelle-plus { grid-column: 3; width: 24px; height: 24px; transition: transform .2s var(--ein); }
.stelle-akk-knopf[aria-expanded="true"] .stelle-plus { transform: rotate(45deg); }
html:not(.js) .stelle-plus { display: none; }
.stelle-akk-knopf[aria-expanded="true"] .stelle-nr { background: var(--kalk); border-color: var(--lesegruen); }
.stelle-inhalt { display: grid; gap: 16px; padding: 0 0 26px 54px; }
.stelle-frage { font-size: clamp(1.125rem, 1.05rem + .5vw, 1.5rem); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.chips li { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 7px 14px 7px 10px; border: 1.5px solid var(--linie); border-radius: 999px; background: var(--weiss); font-size: .9375rem; font-weight: 700; line-height: 1.3; }
.chips .i { color: var(--lesegruen); }
.stelle-ergebnis { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-karte); background: var(--kalk-flaeche); line-height: 1.45; }
.stelle-ergebnis .i { color: var(--lesegruen); margin-top: 2px; }
.stelle-ergebnis strong { color: var(--lesegruen); }
.stellen-inhalte::before { content: ""; position: absolute; left: 19px; top: 30px; bottom: 30px; width: 2px; background: var(--linie); }
.stelle-grau { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 18px 0; border-top: 1px solid var(--linie); color: var(--schiefer); }
.stelle-grau .stelle-nr { grid-row: 1 / 3; border: 2px dashed var(--grau-grafik); background: var(--weiss); }
.stelle-grau .stelle-nr .i { width: 20px; height: 20px; }
.stelle-grau .stelle-name { font-weight: 700; }
.handlung { margin-top: 48px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.handlung .klein { color: var(--schiefer); }
.handlung--zeile { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--linie); gap: 16px; }
@media (min-width: 820px) {
  .js .stellen-leiste { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 1fr); column-gap: 28px; margin-bottom: 32px; }
  .glieder-zeile { display: contents; }
  .glieder { grid-column: 1; grid-row: 1; }
  .glied--grau { grid-column: 2; grid-row: 1; }
  .schiene { grid-column: 1; grid-row: 2; }
  .stellen-inhalte::before { display: none; }
  .stelle-akk { display: none; }
  html:not(.js) .stelle-akk { display: block; }
  html:not(.js) .stelle-akk-knopf { padding-top: 0; cursor: default; }
  .stelle { border: 1px solid var(--linie); border-radius: var(--r-formular); background: var(--papier); padding: 32px 36px; }
  .stelle + .stelle { margin-top: 20px; }
  .stellen.reiter .stelle + .stelle { margin-top: 0; }
  .stelle-inhalt { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-areas: "frage frage" "chips ergebnis"; gap: 20px 32px; align-items: start; padding: 0; }
  .stelle-frage { grid-area: frage; }
  .stelle-inhalt .chips { grid-area: chips; }
  .stelle-ergebnis { grid-area: ergebnis; }
  .stelle-grau { display: none; }
}

.beleg { padding-block: 56px; }
.beleg-raster { display: grid; gap: 20px; }
.beleg-zahl { font-size: clamp(3rem, 2rem + 4vw, 5.5rem); line-height: 1; letter-spacing: -.02em; color: var(--kalk); font-variant-numeric: proportional-nums; max-width: none; }
.zahl-euro { white-space: nowrap; }
.winkel-rahmen { position: relative; display: inline-block; padding: 12px 18px 14px; margin-left: 0; }
@media (min-width: 600px) { .winkel-rahmen { margin-left: -12px; } }
@media (min-width: 820px) { .winkel-rahmen { margin-left: -18px; } }
.winkel-rahmen::before, .winkel-rahmen::after { content: ""; position: absolute; width: 22px; height: 22px; opacity: .5; }
.winkel-rahmen::before { left: 0; top: 0; border-left: 4px solid var(--kalk); border-top: 4px solid var(--kalk); }
.winkel-rahmen::after { right: 0; bottom: 0; border-right: 4px solid var(--kalk); border-bottom: 4px solid var(--kalk); }
.beleg-strich { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.beleg-strich-linie { display: block; flex: 0 1 260px; height: 6px; border-radius: 3px; background: var(--kalk); transform-origin: left center; }
.beleg-haken { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--kalk); color: var(--wald); }
.beleg-haken .i { width: 22px; height: 22px; }
.bewegung .beleg-raster.an .beleg-strich-linie { animation: strich-zeichnen .6s var(--ein) .2s both; }
.bewegung .beleg-raster.an .beleg-haken { animation: aufspringen .2s var(--ein) .85s both; }
.beleg-satz { font-size: clamp(1.375rem, 1.15rem + .7vw, 1.625rem); line-height: 1.4; color: var(--papier); max-width: 36ch; }
.beleg-fussnote { margin-top: 16px; font-size: .9375rem; line-height: 1.55; color: var(--nebel); max-width: 64ch; }
.rechner { margin-top: 48px; border-top: 1px solid var(--linie-dunkel); padding-top: 24px; }
.rechner > summary { display: block; padding-block: 10px; min-height: 44px; list-style: none; cursor: pointer; color: var(--kalk); font-weight: 700; font-size: 1.125rem; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.rechner > summary::-webkit-details-marker { display: none; }
.rechner-pfeil { display: inline-block; width: 20px; height: 20px; margin-left: 10px; vertical-align: -.25em; transform: rotate(90deg); transition: transform .2s var(--ein); }
.rechner[open] .rechner-pfeil { transform: rotate(-90deg); }
.rechner-karte { margin-top: 24px; background: var(--papier); color: var(--tinte); border-radius: var(--r-formular); padding: clamp(20px, 4vw, 40px); --fokus: var(--wald); --link: var(--lesegruen); }
.rechner-karte h3 { margin-bottom: 8px; max-width: 30ch; }
.rechner-einleitung { color: var(--schiefer); max-width: 64ch; margin-bottom: 20px; }
.r-formel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 28px; font-weight: 700; font-size: 1rem; line-height: 1.2; }
.r-kasten { padding: 9px 14px; border: 1.5px solid var(--linie); border-radius: var(--r-knopf); background: var(--weiss); }
.r-kasten--ziel { background: var(--kalk); border-color: var(--lesegruen); color: var(--wald); }
.r-op { font-size: 1.375rem; line-height: 1; color: var(--lesegruen); }
.rechner-raster { display: none; }
.js .rechner-raster { display: grid; gap: 28px; }
.rechner-felder { display: grid; gap: 24px; align-content: start; }
.rechner-ausgabe { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 24px; min-height: 120px; }
.rechner-leer { color: var(--schiefer); }
.rechner-ergebnis { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px 16px; align-items: start; }
.r-konto { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 3px solid var(--tinte); overflow: hidden; background: var(--weiss); color: var(--wald); }
.r-konto-fuell { position: absolute; inset: 0; background: var(--kalk); transform-origin: bottom; transform: scaleY(var(--fuell, .5)); transition: transform .4s var(--ein); }
.r-konto .i { position: relative; width: 26px; height: 26px; }
.r-zeile1 { font-size: 1.0625rem; }
.r-zeile2 { margin-top: 8px; font-size: 1.5rem; line-height: 1.3; font-weight: 700; color: var(--tinte); font-variant-numeric: tabular-nums; }
.r-kennzeichnung { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; color: var(--schiefer); }
.r-kennzeichnung .i { width: 20px; height: 20px; margin-top: 2px; }
.r-uebernahme { margin-top: 16px; }
.r-uebernahme-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.r-status { font-weight: 700; color: var(--lesegruen); min-height: 1.5em; margin-top: 6px; }
.r-zweiter-weg { margin-top: 20px; }
@media (min-width: 820px) {
  .beleg-raster { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .beleg-links { grid-column: 1 / 6; }
  .zahl-euro { display: block; }
  .beleg-rechts { grid-column: 6 / 13; }
  .js .rechner-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 419.98px) {
  .rechner-ausgabe { padding: 18px; }
  .rechner-ergebnis { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .r-konto { width: 48px; height: 48px; }
  .r-zeile2 { font-size: 1.375rem; }
}
@media (min-width: 1024px) { .beleg { padding-block: 96px; } }

.feld { display: grid; gap: 8px; }
.feld label { font-weight: 700; font-size: 1rem; }
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: 56px; padding: 12px 14px; font-size: 1.125rem;
  background: var(--weiss); color: var(--tinte); border: 1.5px solid var(--schiefer); border-radius: var(--r-knopf);
}
.feld textarea { min-height: 112px; resize: vertical; line-height: 1.5; }
.feld select { appearance: none; padding-right: 44px; background: var(--weiss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%2319231E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center / 22px no-repeat; }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { outline-offset: 1px; }
.feld [aria-invalid="true"] { border: 2px solid var(--ocker); }
.hilfe { font-size: .9375rem; line-height: 1.5; color: var(--schiefer); }
.fehlertext { display: flex; gap: 8px; align-items: flex-start; font-size: .9375rem; font-weight: 700; line-height: 1.45; color: var(--tinte); }
.fehlertext .i { width: 20px; height: 20px; color: var(--ocker); margin-top: 1px; }
.stepper { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 8px; }
.stepper input { text-align: center; }
.stepper-knopf { display: grid; place-items: center; min-height: 48px; align-self: center; height: 56px; border: 1.5px solid var(--schiefer); border-radius: var(--r-knopf); background: var(--weiss); color: var(--tinte); }
.stepper-knopf:hover { background: var(--kalk-flaeche); }
.stepper-knopf .i { width: 20px; height: 20px; }

.zeitleiste { --tage: 38%; display: grid; grid-template-columns: var(--tage) minmax(0, 1fr); grid-template-areas: "mass mass" "t1 t2" "tage wochen" "m1 m2"; column-gap: 14px; row-gap: 12px; align-items: center; margin: 0 0 56px; }
.zl-mass { grid-area: mass; position: relative; display: block; padding-bottom: 14px; text-align: right; font-size: .9375rem; font-weight: 700; line-height: 1.2; color: var(--schiefer); }
.zl-mass::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat; }
.zl-teil { position: relative; display: block; margin-top: -4px; padding-bottom: 12px; text-align: center; font-size: .875rem; font-weight: 700; line-height: 1.2; color: var(--schiefer); }
.zl-teil::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat; }
.zl-teil--tage { grid-area: t1; }
.zl-teil--wochen { grid-area: t2; }
.zl-tage { grid-area: tage; display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; }
.zl-tage i { display: block; aspect-ratio: 1; border-radius: 4px; background: var(--kalk); box-shadow: inset 0 0 0 1.5px var(--lesegruen); }
.zl-wochen { grid-area: wochen; position: relative; display: flex; justify-content: space-between; align-items: center; height: 14px; }
.zl-wochen::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; background: var(--linie); }
.zl-wochen i { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--lesegruen); }
.zl-marken { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; justify-items: start; }
.zl-marken--tage { grid-area: m1; }
.zl-marken--wochen { grid-area: m2; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.zl-marken--wochen .zl-marke:first-child { grid-column: 2; }
.zl-marken--wochen .zl-marke:last-child { grid-column: 3; justify-self: end; }
.zl-marke { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--tinte); background: var(--weiss); color: var(--tinte); }
.zl-marke .i { width: 20px; height: 20px; }
.zl-marke--kalk { background: var(--kalk); border-color: var(--lesegruen); color: var(--wald); }
@keyframes zl-fuellen { from { background-color: transparent; } }
@keyframes zl-punkt { from { background-color: var(--nebel-2); transform: scale(.6); } }
.bewegung .zeitleiste.an .zl-tage i { animation: zl-fuellen .25s ease-out both; animation-delay: calc(var(--i, 0) * 60ms); }
.bewegung .zeitleiste.an .zl-wochen i { animation: zl-punkt .25s ease-out both; animation-delay: calc(900ms + var(--i, 0) * 40ms); }
@media (max-width: 599.98px) {
  .zeitleiste { --tage: 42%; column-gap: 10px; row-gap: 10px; }
  .zl-tage { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
  .zl-wochen i { width: 8px; height: 8px; }
  .zl-wochen::before { height: 4px; margin-top: -2px; }
  .zl-teil { font-size: .8125rem; }
  .zl-marke { width: 34px; height: 34px; }
  .zl-marke .i { width: 18px; height: 18px; }
}

.phasen { display: grid; gap: 40px; }
.phasen > * { min-width: 0; }
.phase h3 { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.phase-marke { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--tinte); background: var(--weiss); color: var(--tinte); }
.phase-marke .i { width: 22px; height: 22px; }
.phase-marke--kalk { background: var(--kalk); border-color: var(--lesegruen); color: var(--wald); }
.phase > p { max-width: 64ch; }
.fund-kopf { font-weight: 700; margin-bottom: 12px; }
.mini-kette { display: flex; align-items: center; margin-top: 16px; }
.mini-kette > span { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--tanne); color: var(--papier); }
.mini-kette > span + span { margin-left: 16px; }
.mini-kette > span + span::before { content: ""; position: absolute; right: 100%; top: 50%; width: 16px; height: 3px; margin-top: -1.5px; background: var(--lesegruen); }
.mini-kette .i { width: 18px; height: 18px; }
.phasen-reihe { display: grid; gap: 32px; }
.muster { margin-top: 28px; }
.blatt { position: relative; background: var(--weiss); border: 1px solid var(--linie); border-radius: 6px; box-shadow: var(--schatten-blatt); padding: 0 22px 18px; transition: transform .25s var(--ein); overflow: hidden; }
.blatt::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--kalk); }
.blatt-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; font-weight: 700; font-size: 1rem; padding: 20px 0 12px; margin-bottom: 2px; border-bottom: 1px solid var(--tinte); }
.muster-hinweis { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-bottom: 10px; font-size: .8125rem; color: var(--schiefer); text-align: right; }
.muster-hinweis .i { color: var(--schiefer); }
@media (max-width: 599.98px) { .muster-hinweis { justify-content: flex-start; text-align: left; } }
.betrag-balken { display: block; height: 10px; margin-left: auto; border-radius: 5px; background: var(--nebel); }
.b64 { width: 64%; } .b48 { width: 48%; } .b80 { width: 80%; }
.vorgaenge { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.4; font-variant-numeric: tabular-nums; }
@media (min-width: 680px) and (max-width: 1023.98px) { .vorgaenge { font-size: .875rem; } .vorgaenge th { letter-spacing: 0; } }
.vorgaenge th { text-align: left; font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--schiefer); padding: 12px 12px 8px 0; white-space: nowrap; }
.vorgaenge th:nth-child(2) { text-align: right; }
.vorgaenge th:nth-child(2), .vorgaenge td:nth-child(2) { padding-right: 28px; }
.vorgaenge th:last-child, .vorgaenge td:last-child { padding-right: 0; }
.vorgaenge td { padding: 14px 12px 14px 0; border-top: 1px solid var(--linie); vertical-align: middle; }
.vorgaenge tbody tr:first-child td { border-top: 0; }
.vg-art { display: block; font-weight: 700; }
.vg-bv { display: block; font-size: .875rem; color: var(--schiefer); }
.vorgaenge td[data-titel="Wer"] { color: var(--schiefer); }
.vorgaenge th:nth-child(2) { width: 17%; }
.stand { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .875rem; white-space: nowrap; }
.stand .i { width: 18px; height: 18px; color: var(--ocker); }
@media (max-width: 679.98px) {
  .vorgaenge thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .vorgaenge, .vorgaenge tbody, .vorgaenge tr, .vorgaenge td { display: block; width: 100%; }
  .vorgaenge tr { padding: 14px 0; border-top: 1px solid var(--linie); }
  .vorgaenge tbody tr:first-child { border-top: 0; }
  .vorgaenge td { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 10px; align-items: center; border: 0; padding: 4px 0; }
  .vorgaenge td .betrag-balken { margin-left: 0; }
  .vorgaenge td > .stand { justify-self: start; }
  .vorgaenge td::before { content: attr(data-titel); font-size: .8125rem; font-weight: 700; color: var(--schiefer); text-transform: uppercase; letter-spacing: .04em; }
  .vorgaenge td[data-titel="Betrag"] { display: none; }
  .vorgaenge td[data-titel="Vorgang"] { display: block; }
  .vorgaenge td[data-titel="Vorgang"]::before { content: none; }
  .vorgaenge td .vg-bv { margin-top: 0; }
}
@media (max-width: 479.98px) { .vorgaenge td { grid-template-columns: 6.5em minmax(0, 1fr); } }
@media (max-width: 359.98px) {
  .vorgaenge td { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 5px 0; }
  .vorgaenge td .vg-bv { grid-column: 1; margin-top: 0; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .vorgaenge { font-size: .875rem; }
  .vorgaenge th { letter-spacing: 0; padding-right: 8px; }
  .vorgaenge td { padding-right: 8px; }
  .vorgaenge th:nth-child(2) { width: 13%; }
}
.brauchen { background: var(--papier); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 24px 20px; align-self: start; }
.brauchen h3 { margin-bottom: 16px; font-size: 1.1875rem; }
.brauchen-kacheln { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.brauchen-kacheln li { display: flex; flex-direction: column; gap: 8px; padding: 14px 12px; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-knopf); font-size: .9375rem; font-weight: 700; line-height: 1.35; }
.brauchen-kacheln .i { color: var(--lesegruen); }
.brauchen-kacheln li:last-child { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 12px; }
.anspruch { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; padding: clamp(22px, 4vw, 40px); border-radius: var(--r-formular); background: var(--wald); color: var(--papier); }
.anspruch-konto { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--papier); overflow: hidden; background: rgba(247,247,240,.14); color: var(--wald); }
.anspruch-fuell { position: absolute; inset: 0; background: var(--kalk); transform-origin: bottom; }
.anspruch-konto .i { position: relative; width: 30px; height: 30px; }
.anspruch-text { font-size: clamp(1.375rem, 1.1rem + 1.1vw, 2rem); font-weight: 700; line-height: 1.25; max-width: 32ch; }
.anspruch-vor { display: block; margin-bottom: 4px; font-size: .6em; color: var(--kalk); }
.bewegung .anspruch.an .anspruch-fuell { animation: fuellen .8s var(--ein) .3s both; }
.ziel h3 { margin-bottom: 18px; }
.mehrwert { list-style: none; display: grid; gap: 12px; }
.mehrwert-kachel { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 16px; padding: 12px 16px 12px 12px; background: var(--weiss); border: 2px solid var(--kalk); border-radius: var(--r-karte); }
.mehrwert-bild { width: 96px; height: auto; }
.mehrwert-kachel .karte-titel { font-size: 1.1875rem; line-height: 1.25; }
.bewegung .mehrwert.an .mw-fuell { animation: fuellen .8s var(--ein) .2s both; }
.bewegung .mehrwert.an .mw-kurve { animation: kurve-zeichnen .9s var(--ein) .35s both; }
.bewegung .mehrwert.an .mw-flaeche { animation: einblenden .4s ease-out 1.1s both; }
.bewegung .mehrwert.an .mw-spitze { animation: aufspringen .2s var(--ein) 1.2s both; }
.bewegung .mehrwert.an .mw-haken { animation: aufspringen .2s var(--ein) .6s both; }
.bewegung .mehrwert.an .mw-haken-2 { animation-delay: .75s; }
.bewegung .mehrwert.an .mw-haken-3 { animation-delay: .9s; }
@media (min-width: 820px) {
  .phasen-reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mehrwert { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .mehrwert-kachel { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 20px; }
  .mehrwert-bild { width: 100%; max-width: 260px; }
  .mehrwert-kachel .karte-titel { font-size: 1.375rem; }
  .blatt { transform: rotate(-.6deg); }
  .blatt:hover { transform: none; }
}
@media (min-width: 1024px) {
  .phasen { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 56px; }
  .phase-1 { grid-column: 1 / 9; }
  .brauchen { grid-column: 9 / 13; position: sticky; top: 100px; }
  .anspruch, .phasen-reihe, .ziel, .phasen > .handlung { grid-column: 1 / -1; }
}
.phasen > .handlung { margin-top: 0; }

.montag-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px 24px; margin-bottom: 32px; }
.hand { width: auto; height: 120px; }
.bewegung .montag-kopf.an .hand { animation: hand-rein .6s var(--ein) .15s both; }
@keyframes hand-rein { from { opacity: 0; transform: translateY(24px); } }
.zettel { list-style: none; display: grid; gap: 14px; }
.zettel li { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 20px 18px 18px; background: var(--weiss); border: 1px solid var(--linie); border-radius: 8px; box-shadow: 0 1px 2px rgba(16,37,31,.06), 0 6px 16px rgba(16,37,31,.05); font-weight: 700; line-height: 1.45; }
.zettel li::before { content: ""; position: absolute; top: -6px; left: 50%; width: 44px; height: 12px; margin-left: -22px; background: rgba(154,202,43,.45); border-radius: 2px; transform: rotate(-2deg); }
.zettel li:nth-child(2n)::before { transform: rotate(2deg); }
.zettel .i { flex: none; color: var(--lesegruen); }
.montag-link { margin-top: 28px; }
@media (min-width: 600px) { .zettel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; } }
@media (min-width: 820px) { .hand { height: 190px; } .montag-kopf { margin-bottom: 40px; } }
@media (min-width: 1024px) { .zettel { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.vierzehn-kopf h2 { margin-bottom: 20px; }
.kernsatz { font-size: clamp(1.375rem, 1.15rem + .8vw, 1.75rem); line-height: 1.4; max-width: 40ch; color: var(--papier); }
.zeitleiste--garantie { position: relative; grid-template-areas: "mass mass" "start ." "tage wochen" "fahne ." "stempel ."; margin: 44px 0 32px; row-gap: 8px; }
.zeitleiste--garantie .zl-mass { color: var(--nebel); }
.zs-start { grid-area: start; font-size: .875rem; font-weight: 700; line-height: 1.2; color: var(--papier); }
.zs-fahne { grid-area: fahne; justify-self: end; padding: 2px 10px; border: 1.5px solid var(--kalk); border-radius: 999px; font-size: .875rem; font-weight: 700; line-height: 1.3; color: var(--kalk); }
.zeitleiste--garantie .zl-tage { padding: 5px; border: 2px solid var(--kalk); border-radius: 8px; }
.zeitleiste--garantie .zl-tage i { box-shadow: none; border-radius: 3px; }
.zeitleiste--garantie .zl-wochen::before { background: var(--linie-dunkel); }
.zeitleiste--garantie .zl-wochen i { background: var(--flechte); }
.stempel--risiko { grid-area: stempel; justify-self: center; align-self: start; margin-top: 6px; font-size: clamp(.9375rem, .8rem + .5vw, 1.25rem); transform: rotate(-8deg); }
@keyframes stempel-risiko { from { opacity: 0; transform: rotate(-8deg) scale(1.5); } 60% { opacity: 1; } to { opacity: 1; transform: rotate(-8deg) scale(1); } }
.bewegung .zeitleiste--garantie.an .stempel--risiko { animation: stempel-risiko .22s var(--ein) 1.1s both; }
.bewegung .zeitleiste--garantie.an .zl-wochen i { animation-delay: calc(1450ms + var(--i, 0) * 40ms); }
@media (max-width: 599.98px) {
  .stempel--risiko { justify-self: start; margin: 4px 0 0 8px; font-size: .78125rem; letter-spacing: .03em; padding: .25em .5em; outline-offset: 2px; }
}
@media (max-width: 359.98px) { .stempel--risiko { font-size: .6875rem; } }
@media (min-width: 820px) {
  .zeitleiste--garantie { grid-template-areas: "mass mass" "start ." "tage wochen" "fahne ." ; }
  .stempel--risiko { grid-area: fahne; justify-self: start; margin: 16px 0 0 12px; }
}
.garantie-text { display: grid; gap: 14px; max-width: 64ch; }
.zs-ruecktritt { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-left: 4px solid var(--kalk); border-radius: 0 var(--r-karte) var(--r-karte) 0; background: rgba(154,202,43,.14); font-size: 1.0625rem; font-weight: 700; line-height: 1.45; color: var(--papier); }
.zs-ruecktritt .i { flex: none; margin-top: 2px; color: var(--kalk); }
.weitermachen { color: var(--papier); }
.zusatzzeile { font-size: 1rem; color: var(--nebel); }

.wer-karten { list-style: none; display: grid; gap: 16px; }
.wer-karte { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border: 1px solid var(--linie); border-radius: var(--r-karte); background: var(--weiss); }
.wer-karte .i { flex: none; color: var(--lesegruen); }
.wer-karte .karte-titel { font-size: 1.125rem; line-height: 1.3; }
.herkunft { margin-top: 32px; padding: 24px; border-left: 4px solid var(--lesegruen); background: var(--papier-2); border-radius: 0 var(--r-karte) var(--r-karte) 0; }
.fahrzeuge { width: 100%; max-width: 560px; height: auto; margin-bottom: 20px; }
.illu.fahrzeuge .s { stroke: var(--lesegruen); }
.illu.fahrzeuge .rad { transform-box: fill-box; transform-origin: center; }
@keyframes einfahren { from { opacity: 0; transform: translateX(-40px); } }
.bewegung .herkunft.an .fahrzeuge { animation: einfahren 1.2s var(--ein) both; }
.bewegung .herkunft.an .fahrzeuge .rad { animation: drehen 1.2s var(--ein) both; }
.herkunft-raster { display: grid; gap: 20px; align-items: center; }
.herkunft-text { max-width: 64ch; }
.herkunft h3 { font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.375rem); margin-bottom: 8px; }
.herkunft p { line-height: 1.6; }
.herkunft-champions { display: flex; gap: 12px; align-items: center; margin-top: 14px; font-weight: 700; }
.herkunft-champions .i { flex: none; color: var(--kalk); }
.kennzahlen { width: 100%; max-width: 230px; height: auto; }
.bewegung .herkunft.an .kz-neu { animation: fuellen .6s var(--ein) .4s both; }
.wer-handlung { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--linie); }
.wer-handlung .knopf .i { color: var(--lesegruen); }
@media (max-width: 599.98px) { .wer-handlung > .knopf { width: 100%; } .herkunft { padding: 20px 18px 20px 16px; } }
@media (min-width: 820px) { .herkunft-raster { grid-template-columns: minmax(0, 1fr) 230px; gap: 40px; } }
@media (min-width: 1024px) { .wer-karten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }

.bautagebuch { position: relative; max-width: 800px; padding: 22px 24px 24px 48px; background: var(--papier); color: var(--tinte); border-radius: 6px; box-shadow: 0 16px 40px rgba(0,0,0,.28); --fokus: var(--wald); }
.bautagebuch::before { content: ""; position: absolute; top: 0; bottom: 0; left: 24px; width: 2px; background: var(--kalk); }
.tagebuch-liste { list-style: none; }
.tagebuch-liste li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--linie); line-height: 1.5; }
.tb-kaestchen { display: grid; place-items: center; flex: none; width: 26px; height: 26px; margin-top: -1px; border-radius: 6px; background: var(--lesegruen); color: var(--weiss); }
.tb-kaestchen .i { width: 18px; height: 18px; }
.bewegung .tagebuch-liste.an .tb-kaestchen .i { animation: aufspringen .2s var(--ein) .35s both; }
.bewegung .tagebuch-liste.an li:nth-child(2) .tb-kaestchen .i { animation-delay: .5s; }
.bewegung .tagebuch-liste.an li:nth-child(3) .tb-kaestchen .i { animation-delay: .65s; }
.bewegung .tagebuch-liste.an li:nth-child(4) .tb-kaestchen .i { animation-delay: .8s; }
.tagebuch-zusatz { list-style: none; display: grid; gap: 8px; margin-top: 18px; font-weight: 700; }
.tagebuch-zusatz li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.45; }
.tagebuch-zusatz .i { flex: none; margin-top: 2px; color: var(--lesegruen); }
.tagebuch-zusatz li:last-child .i { color: var(--ocker); }
@media (max-width: 399.98px) { .bautagebuch { padding: 18px 16px 20px 32px; } .bautagebuch::before { left: 15px; } .tagebuch-liste li { gap: 10px; } .tb-kaestchen { width: 22px; height: 22px; } }
@media (min-width: 820px) { .bautagebuch { padding: 28px 40px 32px 64px; } .bautagebuch::before { left: 32px; } }

.abschnitt--schmal { padding-block: calc(var(--abschnitt) * .75); }
.foerder-karte { max-width: 920px; margin-inline: auto; border: 1px solid var(--linie); border-radius: var(--r-karte); padding: clamp(24px, 4vw, 44px); }
.foerder-kopf { display: grid; gap: 16px 32px; align-items: center; margin-bottom: 12px; }
.foerder-titel { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.75rem); line-height: 1.25; max-width: none; }
.foerder-zeile { display: block; }
.foerder-zahl { position: relative; display: inline-block; margin-top: 8px; padding-bottom: 14px; font-size: clamp(2.75rem, 2rem + 3vw, 4.5rem); line-height: 1; letter-spacing: -.02em; }
.foerder-zahl .stern { display: inline-block; padding: 0 4px; color: var(--lesegruen); font-size: .6em; line-height: 1; vertical-align: top; text-decoration: none; }
.foerder-strich { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; border-radius: 3px; background: var(--kalk); transform-origin: left center; }
.bewegung .foerder-karte.an .foerder-strich { animation: strich-zeichnen .6s var(--ein) .3s both; }
.bafa-bild { width: 200px; height: auto; }
.foerder-satz { max-width: 64ch; font-weight: 700; color: var(--lesegruen); }
.foerder-auswahl { display: none; }
.js .foerder-auswahl { display: grid; gap: 18px; margin-top: 24px; padding: 24px; background: var(--papier); border-radius: var(--r-karte); }
.foerder-auswahl select { min-height: 48px; }
.foerder-ergebnis { font-weight: 700; font-size: 1.125rem; min-height: 1.5em; }
.foerder-ergebnis:not(:empty) { padding-left: 14px; border-left: 4px solid var(--lesegruen); }
.foerder-ergebnis:empty { min-height: 0; margin-top: -18px; }
.foerder-fussnote { margin-top: 20px; max-width: 74ch; font-size: .9375rem; line-height: 1.55; color: var(--schiefer); }
.foerder-karte > p:last-child { margin-top: 8px; }
@media (min-width: 820px) { .foerder-kopf { grid-template-columns: minmax(0, 1fr) 220px; } .bafa-bild { width: 220px; } }

.faq { border-top: 1px solid var(--linie); }
.frage { border-bottom: 1px solid var(--linie); }
.frage summary { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 18px 0; cursor: pointer; list-style: none; font-size: 1.125rem; font-weight: 700; line-height: 1.4; }
.frage summary::-webkit-details-marker { display: none; }
.frage-sym { order: -1; width: 24px; height: 24px; flex: none; color: var(--lesegruen); }
.frage-plus { margin-left: auto; width: 24px; height: 24px; flex: none; color: var(--lesegruen); transition: transform .15s var(--ein); }
.frage[open] .frage-plus { transform: rotate(45deg); }
.frage summary:hover { color: var(--lesegruen); }
.frage p { padding: 0 44px 24px 38px; font-size: 1.0625rem; max-width: 64ch; color: var(--schiefer); }
.fragen-fuss { margin-top: 40px; display: grid; gap: 20px; justify-items: start; }
.fragen-fuss p { max-width: 60ch; }
.fragen-fuss p a { color: var(--lesegruen); font-weight: 700; text-underline-offset: 4px; overflow-wrap: anywhere; padding-block: 11px; }
@media (max-width: 599.98px) { .frage p { padding: 0 0 22px 38px; } }
@media (min-width: 1024px) {
  .fragen-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .fragen-kopf { grid-column: 1 / 5; align-self: start; position: sticky; top: 112px; }
  .faq, .fragen-fuss { grid-column: 5 / 13; }
}

.kontakt-kopf { margin-bottom: 40px; }
.kontakt-raster {
  display: grid; column-gap: 16px; row-gap: 0; align-items: start;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "firma" "ich" "tel" "mail" "form" "weiter";
}
.k-firma { grid-area: firma; padding-left: 16px; border-left: 4px solid var(--kalk); }
.k-firma-name { font-size: 1.375rem; font-weight: 700; line-height: 1.3; }
.k-rolle { color: var(--nebel); font-size: 1rem; }
.k-fakten { margin-top: 6px; color: var(--nebel); font-size: .9375rem; line-height: 1.5; max-width: 36em; }
.k-tel { grid-area: tel; justify-content: flex-start; gap: 12px; min-height: 56px; margin-top: 12px; padding: 8px 16px; width: 100%; }
.k-tel .i { color: var(--kalk); }
.k-tel-zeilen { display: flex; flex-direction: column; align-items: flex-start; text-align: left; line-height: 1.25; }
.k-tel-nr { font-size: 1.25rem; font-weight: 700; }
.k-tel-text { font-size: .875rem; font-weight: 400; color: var(--nebel); }
@media (max-width: 359.98px) { .k-firma-name { font-size: 1.25rem; } }
.k-ich { grid-area: ich; margin-top: 20px; font-size: 1.0625rem; }
.k-mail { grid-area: mail; margin-top: 8px; }
.k-mail a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--papier); font-weight: 700; font-size: .9375rem; text-underline-offset: 4px; }
.k-mail .i { width: 20px; height: 20px; color: var(--kalk); }
.k-weiter { grid-area: weiter; margin-top: 32px; }
html:not(.js) .k-weiter { display: none; }
.k-weiter h3 { font-size: 1.125rem; margin-bottom: 16px; }
.k-schritte { list-style: none; display: grid; }
.k-schritte li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; padding-bottom: 18px; color: var(--nebel); line-height: 1.5; }
.k-schritte li:last-child { padding-bottom: 0; }
.k-schritte li:not(:last-child)::before { content: ""; position: absolute; left: 19px; top: 40px; bottom: 0; width: 2px; background: var(--kalk); opacity: .6; }
.k-schritte li > span:last-child { padding-top: 8px; }
.kw-kreis { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--kalk); color: var(--kalk); }
.kw-kreis .i { width: 20px; height: 20px; }
.kw-kreis--ziel { background: var(--kalk); color: var(--wald); }
.kw-erledigt { display: none; }
.gesendet .k-schritte li:first-child .kw-kreis { background: var(--kalk); color: var(--wald); }
.gesendet .k-schritte li:first-child .kw-sym { display: none; }
.gesendet .k-schritte li:first-child .kw-erledigt { display: block; }
.formular-karte { grid-area: form; margin-top: 28px; background: var(--papier); color: var(--tinte); border-radius: var(--r-formular); padding: clamp(20px, 4vw, 40px); --fokus: var(--wald); --link: var(--lesegruen); box-shadow: 0 24px 48px rgba(0,0,0,.18); min-width: 0; }
@media (min-width: 1024px) {
  .kontakt-raster {
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px;
    grid-template-areas:
      "firma firma firma firma firma form form form form form form form"
      "ich ich ich ich ich form form form form form form form"
      "tel tel tel tel tel form form form form form form form"
      "mail mail mail mail mail form form form form form form form"
      "weiter weiter weiter weiter weiter form form form form form form form";
    grid-template-rows: repeat(4, auto) 1fr;
  }
  .k-firma-name { font-size: 1.625rem; }
  .k-tel { width: auto; margin-top: 20px; }
  .k-ich { margin-top: 20px; }
  .formular-karte { margin-top: 0; margin-left: 24px; }
  .kontakt-raster > :not(.formular-karte) { padding-right: 8px; }
}

.noscript-hinweis { font-size: 1.125rem; }
.noscript-hinweis a { color: var(--lesegruen); font-weight: 700; }
.formular-kopf { font-weight: 700; font-size: 1rem; margin-bottom: 16px; }
.fortschritt { margin-bottom: 24px; }
.fortschritt-text { font-size: .875rem; font-weight: 700; color: var(--schiefer); margin-bottom: 8px; }
.fortschritt-leiste { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.fortschritt-leiste span { height: 6px; border-radius: 3px; background: var(--linie); transition: background-color .2s var(--ein); }
.fortschritt-leiste span.fertig { background: var(--lesegruen); }
.fortschritt-leiste span.aktuell { background: var(--kalk); box-shadow: inset 0 0 0 1px var(--lesegruen); }
.fortschritt-namen { display: none; }
.vorbelegung { background: var(--papier-2); border-radius: var(--r-knopf); padding: 12px 16px; margin-bottom: 20px; font-size: .9375rem; display: grid; gap: 4px; }
.vb-rechner { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; }
.vb-entfernen { min-height: 44px; padding: 8px 4px; font-size: .9375rem; }
.schritt { border: 0; margin: 0; padding: 0; min-width: 0; }
.schritt > legend { padding: 0; margin-bottom: 6px; float: left; width: 100%; }
.schritt > legend + * { clear: both; }
.schritt-frage { font-size: clamp(1.25rem, 1.15rem + .5vw, 1.5rem); }
.schritt-frage:focus-visible { outline-offset: 4px; }
.schritt > .hilfe { margin-bottom: 16px; }
.schritt > .fehlertext { margin: -6px 0 14px; }
.js .anfrage.wechsel .schritt:not([hidden]) { animation: einblenden .2s ease-out; }
.optionen { display: grid; gap: 10px; }
.option {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 12px 16px;
  background: var(--weiss); border: 1.5px solid var(--grau-grafik); border-radius: var(--r-knopf); cursor: pointer; line-height: 1.35;
  transition: border-color .12s, background-color .12s;
}
.option:hover { border-color: var(--tinte); }
.option input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--lesegruen); }
.option > .i { flex: none; margin-left: auto; color: var(--lesegruen); }
.option input:focus-visible { outline: none; }
.option:has(input:focus-visible) { outline: 3px solid var(--wald); outline-offset: 2px; }
.option:has(input:checked) { border-color: var(--lesegruen); background: var(--kalk-flaeche); box-shadow: inset 0 0 0 1px var(--lesegruen); }
.schritt.fehler .option { border-color: var(--ocker); }
.schritt > .feld + .feld, .schritt > .optionen + .feld, .schritt > .feld + details, .schritt > .feld + .feld { margin-top: 20px; }
#feld-anderes { margin-top: 14px; }
.schalter { position: relative; display: flex; align-items: center; gap: 14px; min-height: 48px; margin-top: 18px; cursor: pointer; line-height: 1.4; }
.schalter input { position: absolute; z-index: 1; left: 0; top: 50%; width: 46px; height: 28px; margin: -14px 0 0; opacity: 0; cursor: pointer; }
.schalter-bahn { position: relative; flex: none; width: 46px; height: 28px; border-radius: 14px; background: var(--grau-grafik); transition: background-color .15s; }
.schalter-bahn::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--weiss); transition: transform .15s var(--ein); }
.schalter input:checked + .schalter-bahn { background: var(--lesegruen); }
.schalter input:checked + .schalter-bahn::after { transform: translateX(18px); }
.schalter input:focus-visible + .schalter-bahn { outline: 3px solid var(--wald); outline-offset: 3px; }
.schalter + .hilfe { margin-top: 6px; }
.zaehler { font-size: .875rem; color: var(--schiefer); text-align: right; }
.zusammenfassung { margin-top: 24px; border: 1px solid var(--linie); border-radius: var(--r-karte); background: var(--weiss); }
.zusammenfassung summary { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; font-weight: 700; cursor: pointer; list-style: none; }
.zusammenfassung summary::-webkit-details-marker { display: none; }
.zusammenfassung summary .i { width: 22px; height: 22px; flex: none; color: var(--lesegruen); transition: transform .15s var(--ein); }
.zusammenfassung[open] summary .i { transform: rotate(45deg); }
.zusammenfassung-liste { padding: 0 16px 10px; }
.zusammenfassung-liste > div { padding: 8px 0; border-top: 1px solid var(--linie); }
.zusammenfassung-liste dt { font-size: .875rem; font-weight: 700; color: var(--schiefer); }
.zusammenfassung-liste dd { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 1rem; }
.zusammenfassung-liste .zf-wert { min-width: 0; overflow-wrap: anywhere; }
.zusammenfassung-liste .textknopf { flex: none; font-size: .9375rem; }
.datenschutz { margin-top: 14px; font-size: .875rem; color: var(--schiefer); }
.datenschutz a { color: var(--lesegruen); font-weight: 700; padding-block: 13px; }
.honigtopf { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.formular-meldung:not(:empty) { margin-top: 20px; padding: 14px 16px; border: 2px solid var(--ocker); border-radius: var(--r-knopf); background: var(--weiss); font-weight: 700; }
.formular-meldung p + p { margin-top: 8px; font-weight: 400; }
.formular-meldung .meldung-knoepfe { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; }
.absenden { margin-top: 20px; }
.absenden.laedt .absenden-text::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 10px; vertical-align: -2px; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: drehen .8s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }
.absenden-tel { margin-top: 12px; text-align: center; font-size: .9375rem; }
.absenden-tel a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--lesegruen); }
.formular-knoepfe { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; }
.formular-knoepfe .weiter { margin-left: auto; min-width: 140px; }
.formular-knoepfe .weiter .i { width: 20px; height: 20px; }
.vorschau { margin-bottom: 24px; padding: 18px 20px; background: var(--vorschau); border: 2px solid var(--vorschau-rand); border-radius: var(--r-karte); color: var(--tinte); }
.vorschau-titel { font-weight: 700; font-size: 1.0625rem; margin-bottom: 6px; }
.vorschau-text { margin: 12px 0 0; padding: 14px; background: var(--weiss); border-radius: 8px; white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .875rem; line-height: 1.55; }
.danke-haken { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--lesegruen); color: var(--lesegruen); margin-bottom: 18px; }
.danke-haken .i { width: 32px; height: 32px; }
.js.bewegung .danke:not([hidden]) .danke-haken { animation: haken .4s var(--ein); }
@keyframes haken { from { transform: scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
.danke-titel { margin-bottom: 12px; }
.danke-text { max-width: 60ch; }
.danke-rechner { margin-top: 14px; }
.danke-kasten { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 24px; padding: 16px 18px; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-karte); font-weight: 700; }
.danke .klein { margin-top: 16px; color: var(--schiefer); }
.neu-starten { margin-top: 8px; }
@media (min-width: 600px) {
  .optionen--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .optionen--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .option--breit { grid-column: 1 / -1; }
}
@media (min-width: 820px) {
  .fortschritt-namen { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; list-style: none; margin-top: 8px; font-size: .8125rem; color: var(--schiefer); }
  .fortschritt-namen li.aktuell { color: var(--tinte); font-weight: 700; }
}

.fuss { padding: 64px 0 calc(88px + 32px); color: var(--nebel); font-size: 1rem; --link: var(--papier); }
.fuss a { color: var(--papier); text-decoration-thickness: 1px; text-underline-offset: 4px; overflow-wrap: anywhere; }
.fuss-spalten { display: grid; gap: 36px; }
@media (min-width: 560px) and (max-width: 1023.98px) { .fuss-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 40px; } }
.fuss-logo { height: 48px; width: auto; margin-bottom: 16px; }
.fuss-spalte > p { max-width: 36ch; line-height: 1.55; }
.fuss-kopf { font-weight: 700; color: var(--papier); margin-bottom: 8px; }
.fuss-spalte ul { list-style: none; }
.fuss-spalte li a { display: inline-flex; align-items: center; min-height: 44px; }
.pflichtzeile { list-style: none; display: grid; gap: 4px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--linie-dunkel); font-size: .875rem; }
.fuss-zeile { margin-top: 10px; font-size: .875rem; }
@media (min-width: 1024px) {
  .fuss { padding-bottom: 48px; }
  .fuss-spalten { grid-template-columns: minmax(0, 1.3fr) minmax(max-content, 1fr) auto minmax(max-content, 1fr); gap: 40px; }
  .fuss a { overflow-wrap: normal; }
  .pflichtzeile { display: flex; flex-wrap: wrap; row-gap: 4px; margin-left: -24px; clip-path: inset(0 0 0 24px); }
  .pflichtzeile li { position: relative; padding-left: 24px; }
  .pflichtzeile li::before { content: ""; position: absolute; left: 10px; top: calc(.75em - 2px); width: 4px; height: 4px; border-radius: 50%; background: var(--kalk); }
}

.fuss-newsletter { display: grid; gap: 18px 40px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--linie-dunkel); }
.nl-kopf { display: flex; align-items: center; gap: 14px; }
.nl-symbol { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--kalk); color: var(--kalk); }
.nl-symbol .i { width: 28px; height: 28px; }
.nl-titel { font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.375rem); font-weight: 700; line-height: 1.3; color: var(--papier); }
.nl-zeile { display: grid; gap: 12px; }
.nl-feld input { min-height: 56px; }
.nl-knopf { min-height: 56px; }
.nl-knopf.laedt .nl-knopf-text::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 10px; vertical-align: -2px; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: drehen .8s linear infinite; }
.nl-einwilligung { margin-top: 12px; max-width: 68ch; font-size: .875rem; line-height: 1.55; color: var(--schiefer); }
.nl-einwilligung a { color: var(--link); font-weight: 700; text-underline-offset: 4px; padding-block: 12px; }
.nl-meldung:not(:empty) { margin-top: 14px; padding: 12px 14px; border: 2px solid var(--ocker); border-radius: var(--r-knopf); background: var(--weiss); color: var(--tinte); font-weight: 700; line-height: 1.45; }
.nl-meldung:focus-visible { outline-offset: 2px; }
.nl-noscript { font-weight: 700; }
.nl-danke { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 16px; align-items: start; }
.nl-danke-haken { grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--kalk); color: var(--kalk); }
.nl-danke-haken .i { width: 24px; height: 24px; }
.nl-danke-titel { font-size: 1.25rem; font-weight: 700; line-height: 1.3; padding-top: 10px; }
.nl-danke-text { max-width: 60ch; line-height: 1.55; }
.nl-nochmal { grid-column: 2; justify-self: start; }
.js.bewegung .nl-danke:not([hidden]) .nl-danke-haken { animation: haken .4s var(--ein); }
@media (min-width: 600px) {
  .nl-zeile { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .nl-knopf { padding-inline: 28px; }
}
.fuss .nl-feld label { color: var(--papier); }
.fuss .nl-einwilligung { color: var(--nebel); }
.fuss .nl-danke-titel { color: var(--papier); }
.fuss .nl-danke { color: var(--nebel); }
.fuss .nl-nochmal { color: var(--papier); }
.fuss .nl-noscript { color: var(--papier); }
@media (min-width: 1024px) {
  .fuss-newsletter { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; }
  .fuss-newsletter .nl-kopf { padding-top: 30px; }
}

.mobil-leiste { display: none; }
@media (max-width: 1023.98px) {
  .js .mobil-leiste {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px var(--rand) calc(10px + env(safe-area-inset-bottom));
    background: var(--wald); border-top: 1px solid var(--linie-dunkel); --fokus: var(--kalk-hell);
    opacity: 0; visibility: hidden; transition: opacity .2s ease-out, visibility 0s linear .2s;
  }
  .js .mobil-leiste.zeigen { opacity: 1; visibility: visible; transition: opacity .2s ease-out; }
  .mobil-leiste .knopf { min-height: 44px; padding: 8px 12px; font-size: 1rem; }
  .mobil-leiste .knopf .i { width: 20px; height: 20px; color: var(--kalk); }
}
@media (max-width: 359.98px) {
  .js .mobil-leiste { grid-template-columns: minmax(0, 1fr) 56px; }
  .mobil-leiste .ml-text { display: none; }
  .mobil-leiste .knopf { padding-inline: 8px; }
}


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; transition-delay: 0s !important; }
  .absenden.laedt .absenden-text::before { animation: none; border-right-color: currentColor; }
  .blatt { transform: none !important; }
}

@media print {
  .kopf, .mobil-leiste, .film-rahmen, .kette-steuerung { display: none !important; }
}