@font-face {
  font-family: 'Manrope';
  src: url('schriften/manrope-latin.woff2') format('woff2-variations'),
       url('schriften/manrope-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  src: url('schriften/manrope-latin-ext.woff2') format('woff2-variations'),
       url('schriften/manrope-latin-ext.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant';
  src: url('schriften/cormorant-italic-latin.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant';
  src: url('schriften/cormorant-italic-latin-ext.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope-Ersatz';
  src: local('Arial'), local('Helvetica'), local('Roboto');

  size-adjust: 103.5%;
  ascent-override: 102.03%;
  descent-override: 28.71%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Cormorant-Ersatz';
  src: local('Georgia Italic'), local('Georgia');
  font-style: italic;
  size-adjust: 80%;
  ascent-override: 116%;
  descent-override: 36%;
  line-gap-override: 0%;
}



:root {
  --versenkt:   #15101F;  
  --grund:      #221B33;  
  --blatt:      #2C2440;  
  --blatt-fuss: #27203A;  
  --gehoben:    #342A55;  
  --chip:       #3A3155;  
  --linie:      #584C74;  

  --haarlinie-leise: color-mix(in srgb, var(--text) 10%, transparent);  
  --haarlinie:       color-mix(in srgb, var(--text) 14%, transparent);  
  --haarlinie-stark: color-mix(in srgb, var(--text) 18%, transparent);  

  --papier:           #FBFAF7;  
  --papier-tinte:     #241B33;  
  --papier-fruchtbar: #AB96E0;  
  --papier-eisprung:  #E3BC63;  

  --rad-punkt:  #382E56;  

  --rad-deko:   #4A3F6B;  

  --zelle-spalt: 4px;

  --auf-lavendel: #2C2440;  
  --auf-rose:     #2C1830;  
  --ziffer-ruhe:  #C7BCE0;  
  --federn:     cubic-bezier(.33, 1, .68, 1);

  --federn-zurueck: cubic-bezier(.34, 1.56, .64, 1);
  --druck:         90ms;   
  --druck-zurueck: 180ms;  

  --trenner: linear-gradient(90deg,
    color-mix(in srgb, var(--haarlinie) 35%, transparent) 0%,
    var(--haarlinie) 12%, var(--haarlinie) 88%,
    color-mix(in srgb, var(--haarlinie) 35%, transparent) 100%);

  --trenner-quer: linear-gradient(180deg,
    color-mix(in srgb, var(--haarlinie) 35%, transparent) 0%,
    var(--haarlinie) 12%, var(--haarlinie) 88%,
    color-mix(in srgb, var(--haarlinie) 35%, transparent) 100%);

  --scrim:      #100B19;  

  --lavendel:   #B9A8E8;  
  --rose:       #E17FA0;  
  --gold:       #E8C77E;  

  --grau:       #A699BB;  

  --text-hero:  #F4EFFF;  
  --text:       #EDE7F6;  
  --text-leise: #B7ACD1;  
  --label:      #A699BB;  
  --text-lila:  #CFC3F2;  

  --spalte:      64rem;   
  --mass:        38rem;   

  
  --polster-boden: 1.5rem;
  --polster:     clamp(var(--polster-boden), var(--polster-vw), 3rem);
  --polster-vw:  5.6vw;

  --seiten-luft: var(--s6);

  --s1:   6px;  --s2:  10px;  --s3: 16px;  --s4:  24px;
  --s5:  36px;  --s6:  56px;  --s7: 84px;  --s8: 120px;

  --r-mini:    3px;  
  --r-xs:      6px;  
  --r-klein:   8px;  

  --r-feld:   12px;  
  --r-mittel: 16px;  
  --radius:   18px;  
  --r-gross:  28px;  

  --fs-marke:   .75rem;    

  --fs-neben:   .9375rem;  
  --fs-text:  1.0625rem;   

  --fs-betont: 1.3125rem;  

  --fs-zitat: clamp(1.375rem, 3.2vw, 1.625rem);  

  --fs-h4: clamp(1.4375rem, 4.6vw, 1.875rem);
  --fs-h3: clamp(1.5625rem, 5.4vw, 2.125rem);
  --fs-h2: clamp(1.8125rem, 8vw,   2.75rem);
  --fs-h1: clamp(2.375rem, 10vw,   3.9rem);

  --lh-glyph:  1;     
  --lh-eng:    1.2;   
  --lh-neben:  1.35;  
  --lh-lese:   1.65;  

  
  --zeile: calc(var(--fs-text) * var(--lh-lese));

  --luft-eng:    calc(var(--zeile) * .25);   
  --luft-kopf:   calc(var(--zeile) * .5);    
  --luft-absatz: calc(var(--zeile) * .75);   
  --luft-titel:  var(--zeile);               
  --luft-block:  calc(var(--zeile) * 1.5);   

  --vor-h4: var(--luft-block);
  --vor-h3: calc(var(--zeile) * 2);
  --vor-h2: calc(var(--zeile) * 3);

  --ls-marke: .12em;  
  --ls-weit:  .22em;  

  --tap: 44px;  

  --sans:  'Manrope', 'Manrope-Ersatz', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Cormorant', 'Cormorant-Ersatz', Georgia, 'Times New Roman', 'Iowan Old Style', serif;

  --ziffern: 'CormorantZiffern', Georgia, 'Times New Roman', serif;

  color-scheme: dark;
}



*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-text);
  line-height: var(--lh-lese);
  -webkit-font-smoothing: antialiased;

  overflow-wrap: break-word;
}


::selection {
  background: var(--chip);
  color: var(--text-hero);
}

:where(button, summary, .laden-knopf, .abschicken,
       .schiene label, .alltag-leiste label, .alltag-schalter, .alltag-kippe,
       .wahl label, .ort-leiste label, .worum-leiste label,
       .blatt-wechsel, .karte-griff, .zurueck,
       .rad-halt-knopf, .rad-feld, .rad-leiste, .leiste ol,
       .nach-oben, .sprungmarke, .ankerlink,
       .index a, .index-schritte a, .weg-sprung a, .weg-tiefer a,
       .kopf nav a, .kopf .ort, .wortmarke, .weg, .fuss-gruppen a) {
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--text-hero);
  line-height: var(--lh-eng);
  margin: 0 0 var(--luft-kopf);

  hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
  overflow-wrap: break-word;
}

h1 { font-size: var(--fs-h1); letter-spacing: -.005em; margin-bottom: var(--luft-titel); }
h2 { font-size: var(--fs-h2); margin-top: var(--vor-h2); }
h3 { font-size: var(--fs-h3); margin-top: var(--vor-h3); }
h4 { font-size: var(--fs-h4); margin-top: var(--vor-h4); }
h2.oben, h3.oben, h4.oben { margin-top: 0; }

.kurzfassung h2,
.weg h2,
.regel > h3,
.alltag-gedanke h3 { font-size: var(--fs-h4); }

p, ul, ol, table, blockquote { margin: 0 0 var(--luft-absatz); }
li { margin-bottom: var(--luft-eng); }
strong, b { color: var(--text-hero); font-weight: 700; }
em { font-style: italic; }

a { color: var(--lavendel); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--text-hero); }

a:focus-visible,
summary:focus-visible,
:focus-visible {
  outline: 3px solid var(--text-hero);   
  outline-offset: 3px;
}

main:focus-visible,
.rueckmeldung-teil:focus-visible,
.tabellenrahmen:focus-visible { outline: none; }

:where(p, li, td, th, dd, .weiterfuehrend) a:focus-visible {
  border-radius: var(--r-mini);
}

hr {
  border: 0;
  border-top: 1px solid var(--haarlinie);
  border-image: var(--trenner) 1;
  margin: 3.5rem 0 2rem;
}

.zierlinie {
  width: 46px;                
  height: 2px;                
  border-radius: 2px;         
  background: linear-gradient(90deg, var(--rose), var(--lavendel), var(--gold));
  margin: var(--s4) 0;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  
  font-size: .9em;
  background: var(--chip);
  border-radius: var(--r-mini);
  padding: .1em .35em;
}

.label {
  font-family: var(--sans);
  font-size: var(--fs-marke);
  letter-spacing: var(--ls-marke);
  text-transform: uppercase;
  color: var(--label);
  font-weight: 600;
  font-style: normal;

  line-height: var(--lh-eng);
  margin-bottom: var(--luft-eng);
}

.kleingedruckt { font-size: var(--fs-neben); color: var(--label); }

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




.huelle { padding-inline: max(var(--polster), calc(50% - var(--spalte) / 2 + var(--polster-boden))); }
main { padding-bottom: 4rem; }

main { padding-top: var(--seiten-luft); }
main:has(> section:first-child) { padding-top: 0; }

main:has(> .glyphen:first-child + section) { padding-top: 0; }

main:has(> section:last-child) { padding-bottom: 0; }

.rechtstext { max-width: var(--mass); }
main.lesespalte > :where(h1, h2, h3, h4, p, ul, ol, dl, figure, details, table, blockquote, nav) {
  max-width: var(--mass);
}

main > section > :where(h1, h2, h3, h4, p, ul, ol, blockquote, details, dl, figure, table) {
  max-width: var(--mass);
}
.rechtstext h2 { margin-top: var(--vor-h2); }
.rechtstext > .label + h2 { margin-top: 0; }



@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

header.kopf { view-transition-name: kopf; }

::view-transition-old(kopf) { animation: none; opacity: 0; }
::view-transition-new(kopf) { animation: none; opacity: 1; }

::view-transition-old(flanke) {
  animation: seite-ab 170ms cubic-bezier(.55, .055, .675, .19) both;
}
::view-transition-new(flanke) {
  animation: seite-auf 260ms var(--federn) 230ms backwards;
}

::view-transition-old(root),
::view-transition-new(root) {
  mix-blend-mode: normal;
}
::view-transition-old(root) {
  animation: seite-ab 170ms cubic-bezier(.55, .055, .675, .19) both;
}
::view-transition-new(root) {
  animation: seite-auf 260ms var(--federn) 230ms backwards;
}
@keyframes seite-ab {
  to { opacity: 0; transform: translateY(10px); }
}
@keyframes seite-auf {
  from { opacity: 0; transform: translateY(20px); }
}

.sprungmarke {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--lavendel);
  color: var(--grund);
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--radius) 0;
  font-weight: 700;
  text-decoration: none;
  z-index: 10;
}

.sprungmarke:focus { left: 4px; color: var(--grund); }

@keyframes nach-oben-ein {
  from { opacity: 0; visibility: hidden; }
  1%   { opacity: 0; visibility: visible; }
  to   { opacity: 1; visibility: visible; }
}

.nach-oben {
  position: fixed;
  right: var(--s4);

  bottom: calc(var(--s4) + env(safe-area-inset-bottom));

  z-index: 8;

  display: none;
  align-items: center;
  justify-content: center;

  width: var(--tap);   
  height: var(--tap);
  border-radius: 50%;

  background: var(--gehoben);
  border: 1px solid var(--linie);
  color: var(--text-hero);
  text-decoration: none;
  font-family: var(--sans);

  font-size: var(--fs-betont);
  line-height: var(--lh-glyph);

  opacity: 0;
  visibility: hidden;
}

@supports (animation-timeline: scroll(root block)) {
  .nach-oben {
    display: inline-flex;
    animation: nach-oben-ein linear forwards;
    animation-timeline: scroll(root block);

    animation-range: 40vh 60vh;
  }
}
.nach-oben:hover { background: var(--chip); }

@media print { .nach-oben { display: none; } }

header.kopf {

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3) var(--s4);
  flex-wrap: wrap;
  background: var(--grund);
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50% - max(0px, var(--polster-boden) - var(--s4)));
  padding-block: var(--s3);
  margin-bottom: 0;

  position: sticky;
  top: 0;
  z-index: 20;

  container-type: inline-size;
  container-name: kopf;
}

body:not(:has(main > section)) header.kopf {
  border-bottom: 1px solid var(--haarlinie-stark);
}

html { container-type: scroll-state; }

@media (prefers-reduced-motion: no-preference) {
  header.kopf { transition: top 220ms var(--federn); }

  @container scroll-state(scrolled: bottom) {
    header.kopf:not(:has(.kapitelband)):not(:focus-within):not(:has(:is(:popover-open))) {
      top: calc(-1 * (var(--tap) + 2 * var(--s3)));
    }
  }
}


html {
  --anker-polster: calc(var(--tap) + 2 * var(--s3) + var(--s4));
}

:target,
:is(a, button, summary, [tabindex]) { scroll-margin-top: var(--anker-polster); }
header.kopf :is(a, button, summary, [tabindex]) { scroll-margin-top: 0; }

label:has(> input:is([type="radio"], [type="checkbox"])) { position: relative; }

label > input:is([type="radio"], [type="checkbox"]) {
  inset: 0;
  width: auto;
  height: auto;
}


html:has(.alltag, .rueckmeldung) { overflow-anchor: none; }

html { scroll-behavior: smooth; }
.wortmarke {
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: var(--ls-weit);
  font-size: min(var(--fs-text), 17px);
  color: var(--text-hero);
  text-decoration: none;
}

html { --kopf-zeile: calc(var(--fs-neben) * var(--lh-lese)); }
html { --kopf-hoehe: calc(max(var(--tap), var(--kopf-zeile)) + 2 * var(--s3)); }

.kopf .ort,
.kopf .sprache {
  font: inherit;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;

  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: var(--tap);
  font-size: var(--fs-neben);
  font-weight: 700;
  color: var(--text-hero);
}

.kopf .ort {
  flex: 1 1 0;
  min-width: 0;
  justify-content: flex-end;
}


.kopf .sprache {
  flex: none;
  border-inline-start: 1px solid var(--haarlinie-stark);
  padding-inline-start: var(--s3);
  column-gap: var(--s1);
}

@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .kopf .sprache::before {
    content: "";
    flex: none;
    width: 1em;
    height: 1em;
    background: currentColor;
    -webkit-mask: url("/bilder/globus.svg") center / contain no-repeat;
            mask: url("/bilder/globus.svg") center / contain no-repeat;
  }
}

.kopf .ort::after {
  content: "";
  flex: none;
  width: .75rem;
  height: .75rem;
  background:
    linear-gradient(var(--lavendel), var(--lavendel)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--lavendel), var(--lavendel)) center / 1.5px 100% no-repeat;
}
header.kopf:has(.wege:popover-open) .ort::after {
  background:
    linear-gradient(var(--lavendel), var(--lavendel)) center / 100% 1.5px no-repeat;
}

.kopf .sprache .sprache-name { white-space: nowrap; }

.kopf .ort .ort-name {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  text-decoration: underline;
  text-decoration-color: var(--lavendel);
  text-decoration-thickness: 2px;
  text-underline-offset: .55em;
  padding-bottom: var(--s3);
  margin-bottom: calc(-1 * var(--s3));
}

.kopf .wege,
.kopf .sprachen {
  position: fixed;
  inset: var(--kopf-hoehe) 0 auto 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  overflow: visible;
  border: 0;

  display: flex;
  flex-direction: column;
  font-size: var(--fs-text);
  color: var(--text);
  background: var(--grund);

  border-bottom: 1px solid var(--haarlinie);
  border-image: var(--trenner) 1;
  padding-inline: max(var(--polster), calc(50% - var(--spalte) / 2));
  padding-block: var(--s3) var(--s4);

  text-align: right;
  align-items: flex-end;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 19;
  background: var(--scrim);
  display: none;
  opacity: 0;
  pointer-events: none;
  transition: display 220ms allow-discrete, pointer-events 220ms allow-discrete;
}

body:is(:has(.wege:popover-open), :has(.sprachen:popover-open), :has(#uebersicht:target))::after {
  display: block;
  opacity: .62;
  pointer-events: auto;
}
@media (prefers-reduced-motion: no-preference) {
  body::after {
    transition:
      opacity 220ms var(--federn),
      display 220ms allow-discrete,
      pointer-events 220ms allow-discrete;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .kopf .wege,
  .kopf .sprachen {
    opacity: 0;
    translate: 0 calc(-1 * var(--s2));
    transition:
      opacity 220ms var(--federn),
      translate 220ms var(--federn),
      overlay 220ms allow-discrete,
      display 220ms allow-discrete;
  }
  .kopf .wege:popover-open,
  .kopf .sprachen:popover-open { opacity: 1; translate: 0 0; }
  @starting-style {
    .kopf .wege:popover-open,
    .kopf .sprachen:popover-open { opacity: 0; translate: 0 calc(-1 * var(--s2)); }
  }
}

.kopf .wege:not(:is(:popover-open)),
.kopf .sprachen:not(:is(:popover-open)) {
  display: none;
  pointer-events: none;
}

.kopf .wege a,
.kopf .sprachen a {
  color: var(--text-leise);
  text-decoration: none;
  padding-block: var(--s3);
}

.kopf .wege:popover-open,
.kopf .sprachen:popover-open {
  align-items: stretch;
  padding-block: 0;
}
.kopf .wege:popover-open a,
.kopf .sprachen:popover-open a {
  justify-content: flex-end;
  padding-block: var(--s2);
  border-top: 1px solid var(--haarlinie);
}
.kopf .wege:popover-open a[aria-current='page'] { display: none; }
.kopf .wege:popover-open a:first-of-type,
.kopf .wege:popover-open a[aria-current='page']:first-of-type + a,
.kopf .sprachen:popover-open a:first-of-type { border-top: 0; }


.kopf .sprachen a[aria-current='true'] {
  color: var(--text-hero);
  font-weight: 700;
}


@container kopf (width < 16em) {
  .kopf .sprache { display: none; }
}

@media (min-width: 40rem) {
 @container kopf (width >= 34em) {
  header.kopf:not(:has(:is(.wege:popover-open))) .ort { display: none; }

  .kopf .wortmarke { margin-inline-end: auto; }

  .kopf .wege:not(:is(:popover-open)) {
    display: flex;
    pointer-events: auto;

    position: static;
    inset: auto;
    flex-direction: row;
    align-items: center;
    column-gap: var(--s4);
    font-size: var(--fs-neben);
    background: none;
    border: 0;
    border-image: none;
    padding: 0;
    text-align: left;
    opacity: 1;
    translate: none;
    transition: none;

    margin-inline: calc(-1 * var(--s1));
  }
  .kopf .wege:not(:is(:popover-open)) a {
    padding-block: 0;
    padding-inline: var(--s1);
    white-space: nowrap;
  }
 }
}

.wortmarke { display: inline-flex; align-items: center; min-height: var(--tap); }

.kopf nav a { display: inline-flex; align-items: center; min-height: var(--tap); }
.kopf nav a:hover { color: var(--text-hero); }
.kopf nav a[aria-current='page'] {
  color: var(--text-hero);
  font-weight: 700;

  text-decoration: underline;
  text-decoration-color: var(--lavendel);
  text-decoration-thickness: 2px;
  text-underline-offset: .55em;
}

footer.fuss {
  padding: 2rem 0 3rem;
  margin-top: 4rem;
}
body:has(main > section:last-of-type:nth-of-type(even)) footer.fuss {
  border-top: 1px solid var(--haarlinie-stark);
}

.fuss nav a { color: var(--label); text-decoration: none; }
.fuss nav a:hover { color: var(--text-hero); text-decoration: underline; }
.fuss p { margin-bottom: var(--luft-eng); }

.fuss-gruppen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4) var(--s4);
}

@media (min-width: 48rem) {
  .fuss-gruppen {
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
  }
}
.fuss-gruppen nav { font-size: var(--fs-neben); }
.fuss-gruppen .label { margin-bottom: var(--luft-eng); }
.fuss-gruppen ul { list-style: none; padding: 0; margin: 0; font-size: var(--fs-neben); }

.fuss-gruppen li { margin: 0; }

.fuss-gruppen a { display: flex; align-items: center; min-height: var(--tap); hyphens: auto; }

.fuss-oben { display: grid; gap: var(--s4); margin-bottom: var(--s5); }
@media (min-width: 60rem) {
  .fuss-oben { grid-template-columns: 15rem 1fr; gap: var(--s7); }
}

footer.fuss { container-type: inline-size; container-name: fuss; }

@container fuss (width < 38em) {
  .fuss-oben { grid-template-columns: 1fr; gap: var(--s4); }
}
@container fuss (width < 34em) {
  .fuss-gruppen { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: normal; }
}
@container fuss (width < 18.3em) {
  .fuss-gruppen { grid-template-columns: minmax(0, 1fr); }
}

.fuss-marke .wortmarke {
  font-size: var(--fs-betont);
  line-height: var(--lh-eng);
  min-height: 0;
  margin: 0;
}
.fuss-zusage {
  margin: var(--luft-eng) 0 0;
  max-width: 18em;
  font-size: var(--fs-neben);
  color: var(--text-leise);
}

.fuss-kolophon {
  border-top: 1px solid var(--haarlinie);
  border-image: var(--trenner) 1;
  padding-top: var(--s3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  font-size: var(--fs-neben);
  color: var(--label);
}
.fuss-kolophon p { margin: 0; }
.fuss-kolophon .rechts { margin-left: auto; }

@media (max-width: 33.99rem) {
  .fuss-kolophon .rechts { margin-left: 0; }
}

@media (pointer: fine) {
  .fuss-gruppen a { min-height: calc(var(--tap) - var(--s2)); }
}

:where(button, summary, .laden-knopf, .abschicken,
       .schiene label, .alltag-leiste label, .alltag-schalter, .alltag-kippe,
       .wahl label, .ort-leiste label, .worum-leiste label,
       .blatt-wechsel, .zurueck,
       .rad-halt-knopf,
       .nach-oben, .sprungmarke, .ankerlink,
       .index a, .index-schritte a, .weg-sprung a, .weg-tiefer a) {
  transition: transform var(--druck-zurueck) var(--federn-zurueck);
}
.kopf nav a,
.wortmarke,
.fuss-gruppen a {
  transition: transform var(--druck-zurueck) var(--federn-zurueck), color 120ms ease-out;
}
@media (prefers-reduced-motion: no-preference) {
  :where(button, summary, .laden-knopf, .abschicken,
         .schiene label, .alltag-leiste label, .alltag-schalter, .alltag-kippe,
         .wahl label, .ort-leiste label, .worum-leiste label,
         .blatt-wechsel, .zurueck,
         .rad-halt-knopf,
         .nach-oben, .sprungmarke, .ankerlink,
         .index a, .index-schritte a, .weg-sprung a, .weg-tiefer a):active,
  .kopf nav a:active,
  .wortmarke:active,
  .fuss-gruppen a:active {
    transform: scale(.96);   
    transition-duration: var(--druck);
    transition-timing-function: ease-out;
  }
}



main > section {
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);

  padding-block: var(--s4);
  margin-bottom: 0;
}

main > section > :last-child,
main > section > :last-child > :last-child,
main > section > :last-child > :last-child > :last-child,
main > section > :last-child > :last-child > :last-child > :last-child { margin-bottom: 0; }

@media (min-width: 48rem) {
  :root { --seiten-luft: var(--s7); }
  main > section { padding-block: var(--s7); }
}

main > section { --sektion-grund: var(--grund); }
main > section:nth-of-type(even) { --sektion-grund: var(--versenkt); background: var(--versenkt); }

main > section h2 { margin-top: var(--vor-h2); margin-bottom: var(--luft-kopf); }
main > section > :is(h2:first-child, .label + h2) { margin-top: 0; }
main > section .merkmale li { padding: var(--s4) 0; }

footer.fuss {
  background: var(--versenkt);
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
  padding-block: var(--s6);
  margin-top: 0;

  position: relative;
  z-index: 6;
}

.hero { margin-bottom: 0; }

.hero { padding-block: var(--seiten-luft) var(--s4); }
@media (min-width: 48rem) { .hero { padding-block-end: var(--s6); } }

.hero h1 { max-width: 15em; }

.hero h1 { hyphens: none; text-wrap: balance; }
.hero h1 span { display: block; }

@media (min-width: 76rem) {
  .hero h1 { font-size: 3rem; }  
  .hero h1 span:not(.pointe) { display: inline; }
}

.hero h1 .pointe { color: var(--lavendel); }

.hero p.vorspann {
  color: var(--text);
  max-width: var(--mass);
}

.vorspann,
.kurzfassung li,
.alltag-gedanke .alltag-fall { font-size: var(--fs-text); }
.vorspann { color: var(--text); }
@media (min-width: 48rem) {
  .vorspann,
  .kurzfassung li,
  .alltag-gedanke .alltag-fall { font-size: var(--fs-betont); }
}

.adressat { font-size: var(--fs-text); color: var(--text); max-width: var(--mass); }

.kaufweg { margin-top: 0; }
.hero-text > :last-child { margin-bottom: 0; }

@font-face {
  font-family: 'CormorantZiffern';
  src: url('schriften/cormorant-ziffern.woff2') format('woff2-variations'),
       url('schriften/cormorant-ziffern.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;

  font-display: swap;
  unicode-range: U+0030-0039;
}

.hero-paar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);

  gap: var(--s4);
  align-items: center;
}

.kaufweg { text-align: start; }

.kaufweg .laeden { justify-content: flex-start; margin-top: 0; }

.rad-buehne {
  --ring-max: 30rem;

  
  --ring: min(var(--ring-max), 88vw, 100cqi, 416px);
  --takt:   .82s;
  --umlauf: calc(29 * var(--takt));

  --anlauf: 3.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;

  
  content-visibility: auto;
  contain-intrinsic-size: auto var(--ring);
}

.rad-halt {
  position: absolute;
  inset: auto auto 0 0;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.rad-feld {
  --heute-dot: .08511;
  --heute-fs:  .03723;
  position: relative;
  width: var(--ring);
  height: var(--ring);
  flex: none;
  margin-inline: auto;
}

.rad-scheibe {
  position: absolute; inset: 3.989%; border-radius: 50%;
  background: radial-gradient(circle closest-side at 50% 50%,
    var(--blatt) 0%, var(--blatt) 10%, var(--blatt-fuss) 35%, var(--grund) 100%);
  border: 1px solid color-mix(in srgb, var(--text-hero) 8%, transparent);
  box-shadow: 0 0 calc(var(--ring) * .01862) color-mix(in srgb, var(--text-hero) 4.5%, transparent);
}

.rad-schein {
  position: absolute; inset: 3.989%; border-radius: 50%; pointer-events: none;
  opacity: .48;
}

.rad-schein::after {
  content: "";
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle calc(var(--ring) * .50612) at 50% 50%,
    color-mix(in srgb, var(--lavendel) 36%,  transparent) 0%,
    color-mix(in srgb, var(--lavendel) 27%,  transparent) 25%,
    color-mix(in srgb, var(--lavendel) 19%,  transparent) 45%,
    color-mix(in srgb, var(--lavendel) 9.5%, transparent) 62%,
    color-mix(in srgb, var(--lavendel) 3.6%, transparent) 78%,
    color-mix(in srgb, var(--lavendel) 1.1%, transparent) 90%,
    transparent 100%);
}
.rad-mitte {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  line-height: 1.25;
}

.rad-marke {
  font-size: calc(var(--ring) * .03723);
  font-weight: 800;
  letter-spacing: .0786em;
  text-transform: uppercase;
  color: var(--label);
  line-height: var(--lh-eng);
}

.rad-einheit {
  font-size: calc(var(--ring) * .03191);
  font-weight: 800;
  letter-spacing: .0917em;
  text-transform: uppercase;
  color: var(--text-lila);
  line-height: var(--lh-eng);
  margin-top: calc(var(--ring) * .01596);
}
.rad-zahl {
  font-family: var(--ziffern);
  font-weight: 500;

  font-variant-numeric: lining-nums;
  font-size: calc(var(--ring) * .14894);
  line-height: var(--lh-glyph);
  color: var(--text-hero);
}

.rad-zahl-lauf { display: none; }
.rad-zahl-lauf b {
  grid-area: 1 / 1;
  font-weight: inherit;
  opacity: 0;
}

.rad-zehner { --zw: .402em; }
.rad-zehner, .rad-einer { display: inline-grid; }

.rad-leiste {
  display: flex;

  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  margin-top: var(--s3);
}

.rad-stufe {
  margin: 0;
  font-size: var(--fs-neben);
  line-height: var(--lh-neben);
  color: var(--text-leise);
  display: inline-grid;

  justify-items: start;
}

.rad-stufe-marke { margin-bottom: 0; }

.rad-stufe-wechsel { display: inline-grid; }
.rad-stufe-wort {
  grid-area: 1 / 1;
  justify-self: start;
  position: relative;
  font-weight: 700;
  color: var(--text-hero);
}

.tipp { display: inline-block; }
.rad-stufe-wort.stufe-1,
.rad-stufe-wort.stufe-2 { opacity: 0; }

.tag {
  --dot:    .05851;  
  --dot-fs: .03059;  
  position: absolute; left: var(--x); top: var(--y);
  display: grid; place-items: center; border-radius: 50%;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  width:  calc(var(--ring) * var(--dot));
  height: calc(var(--ring) * var(--dot));
  font-size: calc(var(--ring) * var(--dot-fs));
  font-weight: 800;
  line-height: var(--lh-glyph);
  font-variant-numeric: lining-nums tabular-nums;

  background: var(--blatt);
  border: max(1px, calc(var(--ring) * .003723)) solid var(--rad-punkt);
  color: color-mix(in srgb, var(--ziffer-ruhe) 70%, transparent);
}
.tag.ereignis {
  --dot:    .07181;  
  --dot-fs: .03324;  
  border-width: max(1px, calc(var(--ring) * .004255));
}

.tag.belegt-rose {
  background: var(--rose); border-color: transparent; color: var(--auf-rose);
  box-shadow: 0 0 calc(var(--ring) * .02394) color-mix(in srgb, var(--rose) 60%, transparent);
}
.tag.belegt-gold {
  background: var(--gold); border-color: transparent; color: var(--auf-lavendel);
  box-shadow: 0 0 calc(var(--ring) * .02394) color-mix(in srgb, var(--gold) 60%, transparent);
}

.tag.fenster { border-color: var(--lavendel); color: var(--lavendel); }

.tag.heute {
  width:  calc(var(--ring) * var(--heute-dot));
  height: calc(var(--ring) * var(--heute-dot));
  font-size: calc(var(--ring) * var(--heute-fs));
  border: max(1px, calc(var(--ring) * .003989)) solid color-mix(in srgb, var(--text-hero) 85%, transparent);
  box-shadow: 0 0 calc(var(--ring) * .02128) color-mix(in srgb, var(--text-hero) 45%, transparent);
  color: var(--text-hero);
}

.tag::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width:  calc(var(--ring) * var(--heute-dot));
  height: calc(var(--ring) * var(--heute-dot));
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: max(1px, calc(var(--ring) * .003989)) solid color-mix(in srgb, var(--text-hero) 85%, transparent);
  box-shadow: 0 0 calc(var(--ring) * .02128) color-mix(in srgb, var(--text-hero) 45%, transparent);
  opacity: 0;
  pointer-events: none;
}

.rad-halt-knopf { display: none; }
.rad-halt-knopf .halt-wort {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.rad-halt:focus-visible ~ .rad-leiste .rad-halt-knopf {
  outline: 2px solid var(--lavendel);
  outline-offset: 3px;
}

.rad-begleit {
  margin: var(--s4) auto 0;
  max-width: var(--ring);
  text-align: center;
  text-wrap: balance;
  font-size: var(--fs-neben);
  line-height: var(--lh-neben);
  color: var(--text-leise);
}


.rad-begleit     { margin-top: max(var(--s3), 1em); }
.rad-leiste      { margin-top: max(var(--s2), 1em); }

@media (min-width: 58rem) {
  @container blatt (width >= 50em) {
    .hero-paar  { grid-template-columns: minmax(0, 1fr) auto;
                  grid-template-rows: auto auto 1fr;
                  gap: 0 var(--s6); }
    .hero-text     { grid-area: 1 / 1; }
    .hero-nachsatz { grid-area: 2 / 1; }
    .kaufweg       { grid-area: 3 / 1; align-self: end; margin-top: var(--s4); }
    .rad-buehne    { grid-area: 1 / 2 / 4 / 3; align-self: center; --ring-max: 22rem; }

    .hero-paar .hero-text > :last-child { margin-bottom: var(--luft-absatz); }

    .hero .adressat  { margin-bottom: 0; }

    
    .rad-begleit     { margin-top: max(var(--s4), 1.5em); line-height: var(--lh-lese); }
    .rad-leiste      { margin-top: max(var(--s3), 1em); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .rad-halt { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .rad-mitte   { opacity: 0; animation: rad-auf .7s var(--federn) 1.4s forwards; }

  .rad-feld { --atem-ab: calc(1.4s + .7s + .1s); }
  .rad-schein {
    opacity: 0;
    animation: rad-auf 1.08s ease-in-out var(--atem-ab) forwards;
  }

  .rad-schein::after {
    animation: rad-atem 3.6s ease-in-out var(--atem-ab) infinite alternate backwards;
  }

  .rad-feld .tag { --dt: calc(var(--anlauf) + (var(--i) - 1) * var(--takt)); }

  .rad-feld .tag { --dp: calc(var(--dt) - var(--umlauf) * .008); }

  .rad-zahl-lauf b { --dz: calc(var(--anlauf) + (var(--i) - 1) * var(--takt) - .13s); }

  .rad-feld .tag {
    opacity: 0;
    animation: rad-setzen .44s var(--federn) var(--d, 0s) forwards,
               heute-punkt var(--umlauf) var(--federn) var(--dp) infinite;
  }

  .rad-feld .tag::after {
    animation: heute-ring var(--umlauf) var(--federn) var(--dp) infinite;
  }

  .rad-feld .tag.periode {
    animation: rad-setzen .44s var(--federn) var(--d, 0s) forwards,
               periode-1 var(--umlauf) linear var(--anlauf) infinite,
               heute-punkt var(--umlauf) var(--federn) var(--dp) infinite;
  }

  .rad-feld .tag.periode.t2 { animation-name: rad-setzen, periode-2, heute-punkt; }
  .rad-feld .tag.periode.t3 { animation-name: rad-setzen, periode-3, heute-punkt; }
  .rad-feld .tag.periode.t4 { animation-name: rad-setzen, periode-4, heute-punkt; }
  .rad-feld .tag.periode.t5 { animation-name: rad-setzen, periode-5, heute-punkt; }

  .rad-feld .tag.band {
    animation: rad-setzen .44s var(--federn) var(--d, 0s) forwards,
               band-lauf var(--umlauf) linear var(--anlauf) infinite,
               heute-punkt var(--umlauf) var(--federn) var(--dp) infinite;
  }
  .rad-feld .tag.eisprung {
    animation: rad-setzen .44s var(--federn) var(--d, 0s) forwards,
               eisprung-lauf var(--umlauf) linear var(--anlauf) infinite,
               heute-punkt var(--umlauf) var(--federn) var(--dp) infinite;
  }

  .rad-feld .tag.heute {
    animation: rad-setzen .44s var(--federn) var(--d, 0s) forwards,
               heute-abgabe .35s ease-in calc(var(--anlauf) - .35s) both,
               heute-punkt var(--umlauf) var(--federn) var(--dp) infinite;
  }

  .rad-zahl { display: inline-grid; }
  .rad-zahl-fest {
    grid-area: 1 / 1;
    animation: zahl-weg .35s ease-in calc(var(--anlauf) - .35s) forwards;
  }

  .rad-zahl-lauf { display: inline-flex; justify-content: center; grid-area: 1 / 1; }
  .rad-einer b { animation: ziffer var(--umlauf) var(--federn) var(--dz) infinite; }

  .rad-zehner   { animation: zehner-breite var(--umlauf) var(--federn) var(--anlauf) infinite; }
  .rad-zehner b { animation: zehner-ziffer var(--umlauf) var(--federn) var(--anlauf) infinite; }
  .rad-zehner .z2 { animation-name: zehner-ziffer-2; }

  .rad-stufe .stufe-1 { animation: stufe-1 var(--umlauf) linear var(--anlauf) infinite; }
  .rad-stufe .stufe-2 { animation: stufe-2 var(--umlauf) linear var(--anlauf) infinite; }
  .rad-stufe .stufe-3 { animation: stufe-3 var(--umlauf) linear var(--anlauf) infinite; }

  .rad-stufe-wort::after {
    content: "";
    position: absolute; left: 0; top: .1em; bottom: .1em;
    width: .09em;
    background: var(--lavendel);
    opacity: 0;
  }
  .rad-stufe .stufe-1 .tipp  { animation: tippen-1 var(--umlauf) steps(9) var(--anlauf) infinite; }
  .rad-stufe .stufe-1::after { animation: kursor-1 var(--umlauf) steps(9) var(--anlauf) infinite; }
  .rad-stufe .stufe-2 .tipp  { animation: tippen-2 var(--umlauf) steps(14) var(--anlauf) infinite; }
  .rad-stufe .stufe-2::after { animation: kursor-2 var(--umlauf) steps(14) var(--anlauf) infinite; }
  .rad-stufe .stufe-3 .tipp  { animation: tippen-3 var(--umlauf) steps(17) var(--anlauf) infinite; }
  .rad-stufe .stufe-3::after { animation: kursor-3 var(--umlauf) steps(17) var(--anlauf) infinite; }

  .rad-halt-knopf {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--tap); height: var(--tap);
    flex: none;
    border: 1px solid var(--linie);
    border-radius: 50%;
    cursor: pointer;
  }
  .rad-halt-knopf:hover { border-color: var(--lavendel); }
  .halt-zeichen { position: relative; display: block; width: 12px; height: 13px; }
  .halt-zeichen::before,
  .halt-zeichen::after {
    content: ""; position: absolute; top: 0;
    width: 3.5px; height: 13px;
    background: var(--text-leise);

    
    border-radius: 1px;
  }
  .halt-zeichen::before { left: 0; }
  .halt-zeichen::after  { right: 0; }
  .rad-halt-knopf:hover .halt-zeichen::before,
  .rad-halt-knopf:hover .halt-zeichen::after { background: var(--text-hero); }

  .rad-halt:checked ~ .rad-leiste .rad-halt-knopf .halt-zeichen::before {
    left: 1px; top: 0;
    width: 0; height: 0; border-radius: 0;
    background: transparent;
    border-left: 12px solid var(--text-leise);
    border-top: 6.5px solid transparent;
    border-bottom: 6.5px solid transparent;
  }
  .rad-halt:checked ~ .rad-leiste .rad-halt-knopf:hover .halt-zeichen::before { border-left-color: var(--text-hero); }
  .rad-halt:checked ~ .rad-leiste .rad-halt-knopf .halt-zeichen::after { display: none; }

  .rad-halt-knopf .halt-aus { display: none; }
  .rad-halt:checked ~ .rad-leiste .rad-halt-knopf .halt-an  { display: none; }
  .rad-halt:checked ~ .rad-leiste .rad-halt-knopf .halt-aus { display: block; }

  .rad-halt:checked ~ .rad-feld *,
  .rad-halt:checked ~ .rad-feld *::after,
  .rad-halt:checked ~ .rad-leiste .rad-stufe-wort,
  .rad-halt:checked ~ .rad-leiste .rad-stufe-wort::after,
  .rad-halt:checked ~ .rad-leiste .tipp { animation-play-state: paused; }

  .rad-halt:checked ~ .rad-feld .rad-mitte,
  .rad-halt:checked ~ .rad-feld .rad-schein     { animation-play-state: running; }
  .rad-halt:checked ~ .rad-feld .tag            { animation-play-state: running, paused, paused; }
}
@keyframes rad-setzen {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.35); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes rad-auf { to { opacity: 1; } }
@keyframes zahl-weg { to { opacity: 0; } }

@keyframes rad-atem {
  from { opacity: .38; }
  to   { opacity: .58; }
}

@keyframes heute-ring {
  0%           { opacity: 0; transform: translate(-50%, -50%) scale(.84); }
  0.8%, 3.4%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  4.248%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.12); }
}

@keyframes heute-punkt {
  0% {
    width:  calc(var(--ring) * var(--dot));
    height: calc(var(--ring) * var(--dot));
    font-size: calc(var(--ring) * var(--dot-fs));
  }
  0.8%, 3.4% {
    width:  calc(var(--ring) * var(--heute-dot));
    height: calc(var(--ring) * var(--heute-dot));
    font-size: calc(var(--ring) * var(--heute-fs));
  }
  4.248%, 100% {
    width:  calc(var(--ring) * var(--dot));
    height: calc(var(--ring) * var(--dot));
    font-size: calc(var(--ring) * var(--dot-fs));
  }
}

@keyframes heute-abgabe {
  to {
    width:  calc(var(--ring) * var(--dot));
    height: calc(var(--ring) * var(--dot));
    font-size: calc(var(--ring) * var(--dot-fs));
    border: max(1px, calc(var(--ring) * .003723)) solid var(--rad-punkt);
    box-shadow: none;
    color: color-mix(in srgb, var(--ziffer-ruhe) 70%, transparent);
  }
}

@keyframes periode-1 {
  0%          { background: var(--rose); border-color: transparent; color: var(--auf-rose); box-shadow: 0 0 calc(var(--ring) * .02394) color-mix(in srgb, var(--rose) 60%, transparent); }
  0.86%       { background: var(--blatt); border-color: var(--rose); color: var(--rose); box-shadow: 0 0 0 transparent; }
  1.30%       { background: var(--blatt); border-color: var(--rose); color: var(--rose); box-shadow: 0 0 0 transparent; }
  1.90%       { background: var(--rose); border-color: transparent; color: var(--auf-rose); box-shadow: 0 0 calc(var(--ring) * .048) color-mix(in srgb, var(--rose) 95%, transparent); }
  2.80%, 100% { background: var(--rose); border-color: transparent; color: var(--auf-rose); box-shadow: 0 0 calc(var(--ring) * .02394) color-mix(in srgb, var(--rose) 60%, transparent); }
}
@keyframes periode-2 {
  0%          { background: var(--rose); border-color: transparent; color: var(--auf-rose); box-shadow: 0 0 calc(var(--ring) * .02394) color-mix(in srgb, var(--rose) 60%, transparent); }
  0.86%       { background: var(--blatt); border-color: var(--rose); color: var(--rose); box-shadow: 0 0 0 transparent; }
  3.85%       { background: var(--blatt); border-color: var(--rose); color: var(--rose); box-shadow: 0 0 0 transparent; }
  4.65%       { background: var(--rose); border-color: transparent; color: var(--auf-rose); box-shadow: 0 0 calc(var(--ring) * .048) color-mix(in srgb, var(--rose) 95%, transparent); }
  5.55%, 100% { background: var(--rose); border-color: transparent; color: var(--auf-rose); box-shadow: 0 0 calc(var(--ring) * .02394) color-mix(in srgb, var(--rose) 60%, transparent); }
}
@keyframes periode-3 {
  0%          { background: var(--rose); border-color: transparent; color: var(--auf-rose); box-shadow: 0 0 calc(var(--ring) * .02394) color-mix(in srgb, var(--rose) 60%, transparent); }
  0.86%       { background: var(--blatt); border-color: var(--rose); color: var(--rose); box-shadow: 0 0 0 transparent; }
  7.30%       { background: var(--blatt); border-color: var(--rose); color: var(--rose); box-shadow: 0 0 0 transparent; }
  8.10%       { background: var(--rose); border-color: transparent; color: var(--auf-rose); box-shadow: 0 0 calc(var(--ring) * .048) color-mix(in srgb, var(--rose) 95%, transparent); }
  9.00%, 100% { background: var(--rose); border-color: transparent; color: var(--auf-rose); box-shadow: 0 0 calc(var(--ring) * .02394) color-mix(in srgb, var(--rose) 60%, transparent); }
}
@keyframes periode-4 {
  0%           { background: var(--rose); border-color: transparent; color: var(--auf-rose); box-shadow: 0 0 calc(var(--ring) * .02394) color-mix(in srgb, var(--rose) 60%, transparent); }
  0.86%        { background: var(--blatt); border-color: var(--rose); color: var(--rose); box-shadow: 0 0 0 transparent; }
  10.74%       { background: var(--blatt); border-color: var(--rose); color: var(--rose); box-shadow: 0 0 0 transparent; }
  11.54%       { background: var(--rose); border-color: transparent; color: var(--auf-rose); box-shadow: 0 0 calc(var(--ring) * .048) color-mix(in srgb, var(--rose) 95%, transparent); }
  12.44%, 100% { background: var(--rose); border-color: transparent; color: var(--auf-rose); box-shadow: 0 0 calc(var(--ring) * .02394) color-mix(in srgb, var(--rose) 60%, transparent); }
}
@keyframes periode-5 {
  0%           { background: var(--rose); border-color: transparent; color: var(--auf-rose); box-shadow: 0 0 calc(var(--ring) * .02394) color-mix(in srgb, var(--rose) 60%, transparent); }
  0.86%        { background: var(--blatt); border-color: var(--rose); color: var(--rose); box-shadow: 0 0 0 transparent; }
  14.19%       { background: var(--blatt); border-color: var(--rose); color: var(--rose); box-shadow: 0 0 0 transparent; }
  14.99%       { background: var(--rose); border-color: transparent; color: var(--auf-rose); box-shadow: 0 0 calc(var(--ring) * .048) color-mix(in srgb, var(--rose) 95%, transparent); }
  15.89%, 100% { background: var(--rose); border-color: transparent; color: var(--auf-rose); box-shadow: 0 0 calc(var(--ring) * .02394) color-mix(in srgb, var(--rose) 60%, transparent); }
}

@keyframes band-lauf {
  0%            { border-color: var(--lavendel); color: var(--lavendel); }
  0.86%, 55.17% { border-color: var(--gold);     color: var(--gold); }
  56.5%, 100%   { border-color: var(--lavendel); color: var(--lavendel); }
}

@keyframes eisprung-lauf {
  0% {
    background: var(--gold); border-color: transparent; color: var(--auf-lavendel);
    box-shadow: 0 0 calc(var(--ring) * .02394) color-mix(in srgb, var(--gold) 60%, transparent);
  }
  0.86%, 55.17% {
    background: var(--blatt); border-color: var(--gold); color: var(--gold);
    box-shadow: 0 0 0 transparent;
  }
  56.0%, 57.5% {
    background: var(--gold); border-color: transparent; color: var(--auf-lavendel);
    box-shadow: 0 0 calc(var(--ring) * .062) color-mix(in srgb, var(--gold) 100%, transparent);
  }
  58.8%, 100% {
    background: var(--gold); border-color: transparent; color: var(--auf-lavendel);
    box-shadow: 0 0 calc(var(--ring) * .02394) color-mix(in srgb, var(--gold) 60%, transparent);
  }
}

@keyframes ziffer {
  0%     { opacity: 0; transform: translateY(.16em); }
  0.75%  { opacity: 1; transform: translateY(0); }
  3.448% { opacity: 1; transform: translateY(0); }
  4.2%   { opacity: 0; transform: translateY(-.16em); }
  100%   { opacity: 0; transform: translateY(-.16em); }
}

@keyframes zehner-breite {
  0%              { width: var(--zw); }
  0.75%, 30.28%   { width: 0; }
  31.03%, 100%    { width: var(--zw); }
}
@keyframes zehner-ziffer {   
  0%, 30.28%    { opacity: 0; transform: translateY(.16em); }
  31.03%        { opacity: 1; transform: translateY(0); }
  64.77%        { opacity: 1; transform: translateY(0); }
  65.52%        { opacity: 0; transform: translateY(-.16em); }
  66.3%         { opacity: 0; transform: translateY(-.16em); }
  
  66.4%, 100%   { opacity: 0; transform: translateY(.16em); }
}
@keyframes zehner-ziffer-2 { 
  0%            { opacity: 1; transform: translateY(0); }
  0.75%         { opacity: 0; transform: translateY(-.16em); }
  1.5%          { opacity: 0; transform: translateY(.16em); }
  64.77%        { opacity: 0; transform: translateY(.16em); }
  65.52%, 100%  { opacity: 1; transform: translateY(0); }
}

@keyframes stufe-1 {
  0%            { opacity: 0; }
  0.86%, 55.17% { opacity: 1; }
  56.5%, 100%   { opacity: 0; }
}
@keyframes stufe-2 {
  0%, 55.17%    { opacity: 0; }
  56.5%, 65.52% { opacity: 1; }
  66.9%, 100%   { opacity: 0; }
}
@keyframes stufe-3 {
  0%          { opacity: 1; }
  0.86%       { opacity: 0; }
  65.52%      { opacity: 0; }
  66.9%, 100% { opacity: 1; }
}

@keyframes tippen-1 {
  0%,     0.86%  { clip-path: inset(0 100% 0 0); }
  2.56%,  56.5%  { clip-path: inset(0 0 0 0); }
  57%,    100%   { clip-path: inset(0 100% 0 0); }
}
@keyframes kursor-1 {
  0%,     0.85%  { opacity: 0; left: 0; }
  0.86%          { opacity: 1; left: 0; }
  2.56%          { opacity: 1; left: 100%; }
  2.57%,  100%   { opacity: 0; left: 100%; }
}
@keyframes tippen-2 {
  0%,     55.17% { clip-path: inset(0 100% 0 0); }
  57.82%, 66.9%  { clip-path: inset(0 0 0 0); }
  67.4%,  100%   { clip-path: inset(0 100% 0 0); }
}
@keyframes kursor-2 {
  0%,     55.16% { opacity: 0; left: 0; }
  55.17%         { opacity: 1; left: 0; }
  57.82%         { opacity: 1; left: 100%; }
  57.83%, 100%   { opacity: 0; left: 100%; }
}
@keyframes tippen-3 {
  0%,     0.86%  { clip-path: inset(0 0 0 0); }
  1.4%,   65.52% { clip-path: inset(0 100% 0 0); }
  68.74%, 100%   { clip-path: inset(0 0 0 0); }
}
@keyframes kursor-3 {
  0%,     65.51% { opacity: 0; left: 0; }
  65.52%         { opacity: 1; left: 0; }
  68.74%         { opacity: 1; left: 100%; }
  68.75%, 100%   { opacity: 0; left: 100%; }
}

.t1  { --i:  1; --x: 50%;      --y: 10.638%;  --d: 0.288s; }
.t2  { --i:  2; --x: 58.4617%; --y: 11.5583%; --d: 0.326s; }
.t3  { --i:  3; --x: 66.5277%; --y: 14.276%;  --d: 0.364s; }
.t4  { --i:  4; --x: 73.8209%; --y: 18.6642%; --d: 0.402s; }
.t5  { --i:  5; --x: 80.0002%; --y: 24.5176%; --d: 0.440s; }
.t6  { --i:  6; --x: 84.7768%; --y: 31.5625%; --d: 0.478s; }
.t7  { --i:  7; --x: 87.9273%; --y: 39.4695%; --d: 0.516s; }
.t8  { --i:  8; --x: 89.3043%; --y: 47.869%;  --d: 0.554s; }
.t9  { --i:  9; --x: 88.8435%; --y: 56.3681%; --d: 0.592s; }
.t10 { --i: 10; --x: 86.5664%; --y: 64.5694%; --d: 0.630s; }
.t11 { --i: 11; --x: 82.5795%; --y: 72.0894%; --d: 0.668s; }
.t12 { --i: 12; --x: 77.0692%; --y: 78.5766%; --d: 0.706s; }
.t13 { --i: 13; --x: 70.2932%; --y: 83.7276%; --d: 0.744s; }
.t14 { --i: 14; --x: 62.5683%; --y: 87.3015%; --d: 0.782s; }
.t15 { --i: 15; --x: 54.2558%; --y: 89.1313%; --d: 0.820s; }
.t16 { --i: 16; --x: 45.7442%; --y: 89.1313%; --d: 0.858s; }
.t17 { --i: 17; --x: 37.4317%; --y: 87.3015%; --d: 0.896s; }
.t18 { --i: 18; --x: 29.7068%; --y: 83.7276%; --d: 0.934s; }
.t19 { --i: 19; --x: 22.9308%; --y: 78.5766%; --d: 0.972s; }
.t20 { --i: 20; --x: 17.4205%; --y: 72.0894%; --d: 1.010s; }
.t21 { --i: 21; --x: 13.4336%; --y: 64.5694%; --d: 1.048s; }
.t22 { --i: 22; --x: 11.1565%; --y: 56.3681%; --d: 1.086s; }
.t23 { --i: 23; --x: 10.6957%; --y: 47.869%;  --d: 1.124s; }
.t24 { --i: 24; --x: 12.0727%; --y: 39.4695%; --d: 1.162s; }
.t25 { --i: 25; --x: 15.2232%; --y: 31.5625%; --d: 1.200s; }
.t26 { --i: 26; --x: 19.9998%; --y: 24.5176%; --d: 1.238s; }
.t27 { --i: 27; --x: 26.1791%; --y: 18.6642%; --d: 1.276s; }
.t28 { --i: 28; --x: 33.4723%; --y: 14.276%;  --d: 1.314s; }
.t29 { --i: 29; --x: 41.5383%; --y: 11.5583%; --d: 1.352s; }

.geraet {
  --steg: 9px;   
  --schirm: var(--r-gross);   
  --schirm-bild: calc(var(--schirm) - 1px);
  position: relative;
  display: block;
  padding: var(--steg);
  border-radius: calc(var(--steg) + var(--schirm));

  background:
    linear-gradient(var(--geraet-grund, var(--versenkt)), var(--geraet-grund, var(--versenkt))) content-box,   
    linear-gradient(180deg,
              color-mix(in srgb, var(--lavendel) 13%, transparent),
              color-mix(in srgb, var(--lavendel)  5%, transparent) 55%,
              color-mix(in srgb, var(--lavendel)  2%, transparent)) border-box;
}
.geraet > img { display: block; width: 100%; height: auto; }

.geraet { border: 1px solid var(--linie); border-radius: calc(var(--steg) + var(--schirm)); }
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .geraet { border-color: transparent; }
  .geraet::before,
  .app-faecher-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;                       
    background: linear-gradient(180deg,      
                color-mix(in srgb, var(--lavendel) 55%, transparent),
                color-mix(in srgb, var(--lavendel)  7%, transparent) 62%,
                color-mix(in srgb, var(--lavendel)  3%, transparent));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    pointer-events: none;
  }
}

.geraet::after {
  content: "";
  position: absolute;
  top: calc(var(--steg) + 6px);   
  left: 50%;
  transform: translateX(-50%);
  width: 15%;
  height: 3px;

  border-radius: 2px;
  background: var(--versenkt);   
  pointer-events: none;
}

main:has(> .ohne) { container-type: inline-size; container-name: blatt; }

section.ohne > .label,
section.ohne > h2 { text-align: right; max-width: none; }

.ohne-raster {
  list-style: none;
  margin: var(--s6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s4);
  
  max-width: none;
}


@container blatt (width >= 27em) {
  .ohne-raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
  }
}

@container blatt (width >= 42em) {
  .ohne-raster {
    gap: var(--s5);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto;
    grid-auto-flow: row;
  }
}


.ohne-kopf {
  display: flex;
  align-items: center;
  gap: var(--s2);

  margin: 0 0 var(--luft-eng);

  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-zitat);
  line-height: var(--lh-eng);
  color: var(--text-hero);  
}

.ohne-zeichen {
  display: block;
  flex: none;

  width: 1.75rem;
  height: 1.75rem;
  stroke-width: 1.6;
  color: var(--lavendel);  
}


@container blatt (width >= 27em) {
  .ohne-kopf    { display: block; }
  .ohne-zeichen { width: 2.5rem; height: 2.5rem; margin-bottom: .4em; }
}

.ohne-aussparung {
  stroke: var(--grund);  
  stroke-width: 4.5;
}

.ohne-raster li > p:last-child {
  margin: 0;
  font-size: var(--fs-text);
  line-height: var(--lh-lese);
  color: var(--text);  
  max-width: none;
}

.abschluss > .abgrenzung {
  margin: var(--s5) 0 0;
  border-left: 0;
  padding: 0;
}
.abschluss > .abgrenzung p {
  color: var(--text-leise);
}

.kaufpunkt {
  border-left: 3px solid var(--lavendel);  

  padding-left: min(1.25rem, var(--s4));
  margin-top: var(--s5);
  display: grid;
  gap: var(--s4);
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
}
.kaufpunkt-zusage {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;

  font-size: var(--fs-h2);
  line-height: var(--lh-eng);
  color: var(--text-hero);
  margin: 0 0 var(--luft-kopf);

  max-width: 13em;
}
.kaufpunkt-klein {
  font-size: var(--fs-text);
  color: var(--text-leise);
  margin: 0;
  max-width: var(--mass);
}
.kaufpunkt .laeden { margin: 0; justify-content: flex-start; }

.kaufpunkt-tat { justify-self: start; text-align: left; }

@media (min-width: 48rem) {
  .kaufpunkt {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s5);
  }

  .kaufpunkt { margin-top: 0; }

  
  .kaufpunkt-zusage { font-size: clamp(2.375rem, 4.4vw, 3.625rem); max-width: 8em; }
}

.weg-tiefer { margin: var(--s5) 0 0; }
.weg-tiefer a {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  min-height: var(--tap);
  font-weight: 700;
  color: var(--text-lila);
  text-decoration: none;
}
.weg-tiefer a:hover { text-decoration: underline; }
.weg-tiefer svg { width: calc(18px * 17.6 / 22); height: 18px; }

.beweis { margin: var(--s5) 0 0; }
@media (min-width: 48rem) {
  .beweis { margin-top: var(--s6); }
}

.schiene {
  padding: 0;
  margin: var(--s4) 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--linie);
  border-radius: var(--r-klein);   
  
  overflow: clip;
}

.schiene > legend {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.schiene label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: var(--s1) var(--s1);
  font-size: var(--fs-neben);
  color: var(--text-leise);
  background: transparent;
  border: 0;
  border-left: 1px solid var(--linie);
  border-top: 1px solid var(--linie);
  cursor: pointer;
  position: relative;
  transition: border-color .18s var(--federn), background .18s var(--federn), color .18s var(--federn), transform var(--druck-zurueck) var(--federn-zurueck);
}

.schiene input[type="radio"] {
  position: absolute;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.schiene label:nth-of-type(odd) { border-left: 0; }
.schiene label:nth-of-type(-n+2) { border-top: 0; }
.schiene label:hover { color: var(--text); }
.schiene label:has(input:checked) {
  background: var(--chip);   
  color: var(--text-hero);
}
.schiene label:has(input:focus-visible) { outline: 2px solid var(--lavendel); outline-offset: -2px; }

@container blatt (width < 12em) {
  .schiene { grid-template-columns: minmax(0, 1fr); }
  .schiene label:nth-of-type(n) { border-left: 0; border-top: 1px solid var(--linie); }
  .schiene label:first-of-type { border-top: 0; }
}

@container blatt (width >= 40em) {
  .schiene {
    margin-top: var(--s5);
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    max-width: var(--mass);
  }
  .schiene label:nth-of-type(n) { font-size: var(--fs-neben); padding-inline: var(--s4); border-top: 0; border-left: 1px solid var(--linie); }
  .schiene label:first-of-type { border-left: 0; }
}

.beweis-tafel { display: grid; }

.beweis-achsen {
  display: grid;
  grid-auto-flow: row;
  row-gap: var(--s5);
  min-width: 0;
}

:is(.beweis-stand, .beweis-wort) {
  display: grid;

  grid-template-columns: minmax(0, 1fr);
}
:is(.beweis-stand, .beweis-wort) > span {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transition: opacity .28s var(--federn), visibility 0s .28s;
}

.beweis:has(#b1:checked) .lg1,
.beweis:has(#b2:checked) .lg2,
.beweis:has(#b3:checked) .lg3,
.beweis:has(#b4:checked) .lg4 {
  visibility: visible;
  opacity: 1;
  transition: opacity .28s var(--federn), visibility 0s 0s;
}

.beweis:has(#b4:checked) .beweis-stand,
.beweis:has(#b4:checked) .beweis-lavendel .beweis-wort { color: var(--label); }

.beweis-stand {
  margin: var(--s4) 0 0;
  max-width: var(--mass);
  text-align: left;
  font-family: var(--sans);
  font-style: normal;
  font-size: var(--fs-neben);
  font-weight: 400;
  line-height: var(--lh-lese);
  color: var(--text-leise);
}

.beweis-zelle {
  text-align: left;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "marke" "wort" "bild";
  align-items: baseline;
  column-gap: var(--s3);
  row-gap: 0;
}
.beweis-zelle > .beweis-wort { text-align: left; }
.beweis-zelle > .beweis-bild { margin-top: var(--s3); }

@container blatt (width >= 28em) {
  .beweis > .beweis-tafel { --tinte: 100%; }
  
  .beweis-achsen { max-width: var(--mass); row-gap: var(--s6); }
  .schiene { width: 100%; max-width: var(--mass); }
  .schiene label:nth-of-type(n) { padding-inline: var(--s4); }
  .beweis-zelle {
    grid-template-columns: 15rem minmax(0, 1fr);
    grid-template-rows: min-content min-content;
    grid-template-areas: "marke bild" "wort bild";
    column-gap: var(--s5);
    row-gap: 0;
    align-items: center;
    align-content: center;
    justify-content: start;
    text-align: left;
  }
  .beweis-zelle > .beweis-wort { text-align: left; }
  .beweis-zelle > .beweis-bild { width: 100%; margin-top: 0; }
}

@container blatt (width >= 54em) {
  .beweis-tafel {
    grid-template-columns: 18rem minmax(0, 1fr);
    column-gap: var(--s6);
    align-items: start;
  }
  .beweis-stand  { grid-column: 1; grid-row: 2; max-width: none; }
  .beweis-achsen { grid-column: 2; grid-row: 1 / span 2; max-width: none; align-self: start; row-gap: var(--s6); }
  .schiene {
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: none;
    margin: 0;
  }
  .schiene label:nth-of-type(n) {
    justify-content: flex-start;
    border-left: 0;
    border-top: 1px solid var(--linie);
  }
  .schiene label:first-of-type { border-top: 0; }
  .beweis-zelle { grid-template-columns: 13rem minmax(0, 1fr); }
}

.beweis-zellmarke {
  margin: 0;
  grid-area: marke;
  font-size: var(--fs-neben);
  font-weight: 600;
  line-height: var(--lh-eng);
  color: var(--label);   
}



.beweis-bild {
  grid-area: bild;
  width: var(--tinte);
  max-width: 100%;
  margin-block: 0;
  min-height: 34px;   
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.beweis-wort {
  grid-area: wort;
  margin: 0;
  font-size: var(--fs-neben);
  font-weight: 700;
  line-height: var(--lh-eng);
}
.beweis-gold     .beweis-wort { color: var(--gold); }      
.beweis-lavendel .beweis-wort { color: var(--lavendel); }  
.beweis-rose     .beweis-wort { color: var(--rose); }      

.beweis-kette {
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  position: relative;
}
.beweis-kette::before {
  content: "";
  position: absolute;
  top: 50%;   
  translate: 0 -50%;
  left: 16px;
  right: 16px;
  height: 2px;   
  background: var(--linie);   
}

.beweis-glied {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
}

.beweis-tafel { --tinte: min(100%, 17rem); }
.beweis-zelle .beweis-kette,
.beweis-zelle .fenster-streifen { width: var(--tinte); }

@container blatt (width < 28em) {
  .beweis-zelle { justify-items: center; }
  .beweis-zellmarke,
  .beweis-zelle > .beweis-wort { text-align: center; }
}


@container blatt (width >= 18em) and (width < 28em) {
  .beweis > .beweis-tafel { --tinte: 100%; }
  .beweis-zelle {
    grid-template-columns: minmax(0, 1fr) 12rem;
    grid-template-areas: "marke bild" "wort bild";
    column-gap: var(--s3);
    row-gap: 0;
    align-items: center;
    justify-items: start;
  }
  .beweis-zellmarke,
  .beweis-zelle > .beweis-wort { text-align: left; }
  
  .beweis-zellmarke { text-wrap: balance; }
  .beweis-zelle > .beweis-bild { width: 100%; margin-top: 0; }
}

.beweis-zelle { container-type: inline-size; container-name: achse; }

.beweis-marke {
  position: relative;
  z-index: 1;
  transition: background .28s var(--federn), box-shadow .28s var(--federn);
  width: 32px;
  height: 32px;
  border-radius: 999px;   
  background: var(--grund);   
  box-shadow: inset 0 0 0 1.5px var(--linie);
  display: flex;
  align-items: center;
  justify-content: center;
}

.beweis-zeichen {
  fill: var(--label);   
  transition: fill .28s var(--federn);
}

.g-blutung .beweis-marke {
  box-shadow: inset 0 0 0 1.5px var(--gold);   
}
.g-blutung .beweis-zeichen { fill: var(--gold); }

.beweis:has(:is(#b2, #b3, #b4):checked) .g-temp .beweis-marke,
.beweis:has(:is(#b3, #b4):checked) .g-schleim .beweis-marke {
  background: var(--gold);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 22%, transparent);
}
.beweis:has(:is(#b2, #b3, #b4):checked) .g-temp .beweis-zeichen,
.beweis:has(:is(#b3, #b4):checked) .g-schleim .beweis-zeichen {
  fill: var(--grund);   
}

.fenster-streifen {
  position: relative;
  display: grid;
  grid-template-columns: repeat(15, 1fr);   
  column-gap: var(--zelle-spalt);   
  align-content: center;
  width: 100%;
}

.fenster-streifen > i {
  position: relative;
  grid-row: 1;
  height: 22px;
  border-radius: 5px;   
  box-shadow: inset 0 0 0 1px var(--haarlinie-leise);   
  transition: box-shadow .28s var(--federn) var(--tag-verzug, 0ms);
}

.fenster-streifen > i::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: color-mix(in srgb, var(--lavendel) 22%, transparent);   
  opacity: 0;
  scale: .55;
  transition: opacity .28s var(--federn) var(--tag-verzug, 0ms),
              scale .34s var(--federn) var(--tag-verzug, 0ms);
}

.beweis:has(#b1:checked) .fenster-streifen > i::before,
.beweis:has(#b2:checked) .fenster-streifen > i:nth-child(n+3):nth-child(-n+13)::before,
.beweis:has(#b3:checked) .fenster-streifen > i:nth-child(n+4):nth-child(-n+12)::before {
  opacity: 1;
  scale: 1;
}
.beweis:has(#b1:checked) .fenster-streifen > i,
.beweis:has(#b2:checked) .fenster-streifen > i:nth-child(n+3):nth-child(-n+13),
.beweis:has(#b3:checked) .fenster-streifen > i:nth-child(n+4):nth-child(-n+12) {
  box-shadow: none;
}

.beweis:has(#b4:checked) .fenster-streifen > i:is(:nth-child(2), :nth-child(14)) { --tag-verzug: 30ms; }
.beweis:has(#b4:checked) .fenster-streifen > i:is(:nth-child(3), :nth-child(13)) { --tag-verzug: 60ms; }
.beweis:has(#b4:checked) .fenster-streifen > i:is(:nth-child(4), :nth-child(12)) { --tag-verzug: 90ms; }
.beweis:has(#b4:checked) .fenster-streifen > i:is(:nth-child(5), :nth-child(11)) { --tag-verzug: 120ms; }
.beweis:has(#b4:checked) .fenster-streifen > i:is(:nth-child(6), :nth-child(10)) { --tag-verzug: 150ms; }
.beweis:has(#b4:checked) .fenster-streifen > i:is(:nth-child(7), :nth-child(9))  { --tag-verzug: 180ms; }
.beweis:has(#b4:checked) .fenster-streifen > i:nth-child(8) { --tag-verzug: 210ms; }

.fenster-klammer {
  position: absolute;
  top: calc(50% + 17px);   
  height: 7px;   
  opacity: 1;
  transition: left .34s var(--federn), width .34s var(--federn), opacity .28s var(--federn);
}
.beweis:has(#b1:checked) .fenster-klammer {
  left: 0;
  width: 100%;
}
.beweis:has(#b2:checked) .fenster-klammer {
  left: calc(2 * ((100% - 14 * var(--zelle-spalt)) / 15 + var(--zelle-spalt)));
  width: calc(11 * (100% - 14 * var(--zelle-spalt)) / 15 + 10 * var(--zelle-spalt));
}
.beweis:has(#b3:checked) .fenster-klammer {
  left: calc(3 * ((100% - 14 * var(--zelle-spalt)) / 15 + var(--zelle-spalt)));
  width: calc(9 * (100% - 14 * var(--zelle-spalt)) / 15 + 8 * var(--zelle-spalt));
}

.beweis:has(#b4:checked) .fenster-klammer { opacity: 0; }
.fenster-arm {
  position: absolute;
  top: 0;
  bottom: 0;

  width: calc(50% - 7.5px);
  border-bottom: 1.1px solid var(--lavendel);   
}

.fenster-arm:first-child {
  left: 0;
  border-left: 1.1px solid var(--lavendel);
  border-bottom-left-radius: 7.5px 5.9px;
}
.fenster-arm:nth-child(2) {
  right: 0;
  border-right: 1.1px solid var(--lavendel);
  border-bottom-right-radius: 7.5px 5.9px;
}

.fenster-spitze {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  bottom: -3.05px;   
  overflow: visible;
  fill: none;
  stroke: var(--lavendel);
  stroke-width: 1.1;
  stroke-linecap: round;
}

.fenster-haarlinie {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + 17px);   
  height: 7px;
  border-bottom: 1px solid var(--haarlinie);   
  border-image: var(--trenner) 1;
  opacity: 0;
  transition: opacity .28s var(--federn);
}

.beweis:has(#b4:checked) .fenster-haarlinie {
  opacity: 1;
  transition-delay: .3s;
}

.beweis-bild > .muster-zeile {
  display: flex;
  flex-wrap: nowrap;
  align-self: center;
  gap: var(--s2);
  align-items: center;
  width: 100%;
}
.muster-name { white-space: nowrap; }
.beweis-bild > .muster-zeile > .muster-linie { min-width: var(--s2); }

.muster-zeichen {
  flex: none;
  width: calc(17px * 15.247 / 20.513);   
  height: 17px;   
  fill: var(--text-leise);   
}

.muster-name {
  font-size: var(--fs-marke);   
  font-weight: 600;
  line-height: var(--lh-eng);
  color: var(--text);           
}

.muster-linie {
  flex: 1;
  height: 2px;   
  border-radius: 999px;   
  background: var(--haarlinie-stark);
}

.beweis-spur {
  display: flex;
  align-items: center;

  margin-left: auto;
}
.beweis-spur > i {
  width: 0;
  height: 22px;   
  margin-left: 0;
  opacity: 0;
  border-radius: 999px;   
  box-shadow: inset 0 0 0 1px var(--rad-deko);   
  transition: width .34s var(--federn), margin-left .34s var(--federn),
              opacity .28s var(--federn), background .28s var(--federn),
              box-shadow .28s var(--federn);
}
.beweis:has(#b1:checked) .beweis-spur > i:nth-child(-n+1),
.beweis:has(#b2:checked) .beweis-spur > i:nth-child(-n+3),
.beweis:has(:is(#b3, #b4):checked) .beweis-spur > i {
  width: 6px;
  opacity: 1;
}
.beweis:has(#b2:checked) .beweis-spur > i:nth-child(n+2):nth-child(-n+3),
.beweis:has(:is(#b3, #b4):checked) .beweis-spur > i:nth-child(n+2) {
  margin-left: var(--s2);
}

.beweis:has(#b2:checked) .beweis-spur > i:nth-child(1),
.beweis:has(#b2:checked) .beweis-spur > i:nth-child(3),
.beweis:has(:is(#b3, #b4):checked) .beweis-spur > i:not(:nth-child(3)) {
  background: var(--rose);   
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  :is(.beweis-stand, .beweis-wort) > span,
  .beweis-marke,
  .beweis-zeichen,
  .fenster-streifen > i,

  .fenster-streifen > i::before,
  .fenster-klammer,
  .fenster-haarlinie,
  .beweis-spur > i { transition: none; }
}


main > section:has(> .beweis) { padding-bottom: 0; }
.beweis-schwanz {
  display: grid;
  gap: var(--s3);
  justify-items: start;
  text-align: left;
  margin-top: var(--s5);

  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
  padding-block: var(--s5);
  background: var(--blatt-fuss);   
}

@media (min-width: 48rem) {
  .beweis-schwanz {
    grid-template-columns: minmax(0, 1fr) auto;   
    align-items: baseline;
    justify-items: stretch;
  }
}
.beweis-mass {
  margin: 0;
  font-size: var(--fs-text);
  color: var(--text);
  line-height: var(--lh-lese);
  max-width: 46em;
  text-wrap: balance;
}
.beweis-mass b { color: var(--text-hero); font-weight: 700; }

.beweis .weg-tiefer {
  margin-top: 0;
}
@media (min-width: 48rem) {
  .beweis .weg-tiefer { text-align: right; white-space: nowrap; }
}

main > section:has(.blatt-karussell) { overflow-x: clip; }


.zwei-leser {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s4);
  margin-top: var(--s5);
  grid-template-areas: "bild" "leser";
}

.leser-paar {
  grid-area: leser;
  display: flex;
  min-width: 0;
  gap: var(--s4);

  
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  
  scroll-snap-type: x mandatory;

  scroll-padding-inline: var(--polster);
  scrollbar-width: none;
}

.leser-paar:focus-visible { outline-offset: -3px; }

.leser-paar > * { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }

@media (min-width: 48rem) {
  @container blatt (width >= 41em) {
    .zwei-leser {
      gap: var(--s6);
      margin-top: var(--s6);
    }

    
    .zwei-leser > .lauf { display: none; }

    
    .leser-paar {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      column-gap: var(--s6);
      overflow-x: visible;
      scroll-snap-type: none;
    }

  }
}


@media (min-width: 58rem) {
  @container blatt (width >= 50em) {
    main > section:has(.blatt-karussell) {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      grid-template-areas:
        "marke leser"
        "titel leser"
        "vor   leser"
        "bild  leser"
        "knopf leser";
      grid-template-rows: auto auto auto auto 1fr;
      column-gap: var(--s6);
      align-content: start;

      background:
        linear-gradient(90deg,
          var(--versenkt) 0 calc(50% - var(--s6) / 2),    
          var(--blatt) calc(50% - var(--s6) / 2) 100%);   
    }
    main > section:has(.blatt-karussell) > .label    { grid-area: marke; }
    main > section:has(.blatt-karussell) > h2        { grid-area: titel; }
    main > section:has(.blatt-karussell) > .vorspann { grid-area: vor; }

    .zwei-leser { display: contents; }
    .blatt-feld { grid-area: bild; margin-top: var(--s6); }
    .blatt-bedienung { grid-area: knopf; align-self: start; margin-top: var(--s3); }

    .leser-paar {
      grid-area: leser;
      align-self: center;
      grid-template-columns: minmax(0, 1fr);
      row-gap: var(--s6);
      column-gap: 0;

      margin-inline: 0;
      padding-inline: 0;
      padding-block: var(--s6);
    }
  }
}

:is(.zwei-leser-du, .zwei-leser-sie) { display: grid; grid-template-columns: minmax(0, 1fr); }
:is(.zwei-leser-du, .zwei-leser-sie) > .leser { grid-area: 1 / 1; }
.zwei-leser:has(input[value="app"]:checked) .leser-pdf,
.zwei-leser:has(input[value="pdf"]:checked) .leser-app { visibility: hidden; }

@container blatt (width < 12em) {
  .leser-paar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s4);
    overflow-x: visible;
    scroll-snap-type: none;
  }

  .zwei-leser .leser p { hyphens: auto; }
}

.zwei-leser .leser {
  border-top: 1px solid var(--haarlinie); border-image: var(--trenner) 1; padding-top: var(--s3);
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s2);
  align-content: start;
}
.leser-zeichen {
  grid-column: 1; grid-row: 1 / span 2;
  width: 1.9rem; height: 1.9rem;
  color: var(--lavendel);  
}
.zwei-leser .leser > .label { grid-column: 2; }

@container blatt (width < 12em) {
  .zwei-leser .leser { column-gap: var(--s1); align-items: center; }
  .leser-zeichen { grid-row: 1; width: 1.05rem; height: 1.05rem; }
  .zwei-leser .leser p:not(.label) { grid-column: 1 / -1; }
}
.zwei-leser .leser p:not(.label) {
  grid-column: 2;
  margin: 0;
  max-width: var(--mass);
  color: var(--text-leise);
  font-size: var(--fs-text);
  line-height: var(--lh-lese);
}

.bericht-blatt {
  --blatt-b: var(--blatt-mass);
  width: var(--blatt-b);
  height: calc(var(--blatt-b) * 150 / 104);   
  padding: calc(var(--blatt-b) * 7 / 104) calc(var(--blatt-b) * 6 / 104) 0;
  background: var(--papier);
  border-radius: calc(var(--blatt-b) * 4 / 104);
  overflow: hidden;
  position: relative;
}
.bericht-blatt i {
  display: block;
  height: calc(var(--blatt-b) * 2 / 104);
  margin-bottom: calc(var(--blatt-b) * 3 / 104);
  border-radius: calc(var(--blatt-b) * 1 / 104);
  background: color-mix(in srgb, var(--papier-tinte) 22%, transparent);
}

.bericht-blatt .bb-titel {
  height: calc(var(--blatt-b) * 3 / 104);
  background: color-mix(in srgb, var(--papier-tinte) 45%, transparent);
}
.bb-oben  i:nth-child(1) { width: 58%; }
.bb-oben  i:nth-child(3) { width: 86%; }
.bb-oben  i:nth-child(4) { width: 94%; }
.bb-unten i:nth-child(2) { width: 72%; }
.bb-unten i:nth-child(3) { width: 96%; }
.bb-unten i:nth-child(4) { width: 84%; }
.bb-streifen {
  display: flex;
  gap: calc(var(--blatt-b) * 1 / 104);
  margin: calc(var(--blatt-b) * 4 / 104) 0 calc(var(--blatt-b) * 7 / 104);
}

.bb-streifen i {
  flex: 1;
  height: calc(var(--blatt-b) * 7 / 104);
  margin: 0;
  background: color-mix(in srgb, var(--papier-tinte) 10%, transparent);
}
.bb-streifen i:nth-child(1),
.bb-streifen i:nth-child(2) { background: var(--rose); }             
.bb-streifen i:nth-child(4) { background: var(--papier-fruchtbar); }
.bb-streifen i:nth-child(5) { background: var(--papier-eisprung); }

.bb-fuss {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--blatt-b) * 18.5 / 104);
  background: var(--grund);
  border-top: calc(var(--blatt-b) * 1.5 / 104) solid var(--lavendel);
}

.blatt-buehne {
  --kipp-luft: calc(var(--blatt-mass) * 10 / 104);
  grid-area: bild;
  position: relative;
  display: flex;
  justify-content: center;

  justify-self: center;
  width: var(--buehne-b);
  min-height: calc(var(--blatt-mass) * 168 / 104 + var(--kipp-luft));
}


.bb-kpi {
  display: flex;
  gap: calc(var(--blatt-b) * 2 / 104);
  margin: calc(var(--blatt-b) * 2 / 104) 0 calc(var(--blatt-b) * 5 / 104);
}
.bb-kpi span {
  flex: 1;
  height: calc(var(--blatt-b) * 13 / 104);
  border-radius: calc(var(--blatt-b) * 2.5 / 104);
  border: 1px solid color-mix(in srgb, var(--papier-tinte) 14%, transparent);
}

.bb-signatur {
  position: absolute; left: 0; right: 0;
  bottom: calc(var(--blatt-b) * 22 / 104);
  height: calc(var(--blatt-b) * 2 / 104);
  background: linear-gradient(90deg, var(--rose), var(--lavendel), var(--gold));
}

.bb-fuss-hell {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--blatt-b) * 22 / 104);
  padding: calc(var(--blatt-b) * 4 / 104) calc(var(--blatt-b) * 6 / 104) 0;
  display: flex;
  align-items: flex-start;
  gap: calc(var(--blatt-b) * 4 / 104);
}
.bb-fuss-hell div { flex: 1; }
.bb-fuss-hell i:first-child {
  width: 34%;
  background: color-mix(in srgb, var(--lavendel) 90%, var(--papier-tinte));
}
.bb-fuss-hell i:nth-child(2) { width: 88%; }
.bb-fuss-hell i:nth-child(3) { width: 62%; }

.bb-qr {
  width: calc(var(--blatt-b) * 14 / 104);
  height: calc(var(--blatt-b) * 14 / 104);
  flex: none;
  background:
    repeating-conic-gradient(var(--papier-tinte) 0 25%, transparent 0 50%)
    0 0 / calc(var(--blatt-b) * 2.8 / 104) calc(var(--blatt-b) * 2.8 / 104);
}



.blatt-feld {
  --blatt-mass: min(9.5rem, 61cqi);

  --buehne-b: calc(var(--blatt-mass) * 170 / 104);
  grid-area: bild;
  justify-self: stretch;
  display: grid;

  grid-template-areas: "buehne" "anlass";
}
.blatt-feld .blatt-buehne { grid-area: buehne; }

.blatt-bedienung {
  display: grid;
  justify-content: center;
}

.blatt-anlass {
  grid-area: anlass;
  margin: var(--s2) 0 0;
  text-align: center;
  font-size: var(--fs-neben);
  line-height: var(--lh-neben);
  color: var(--text-leise);
  max-width: var(--buehne-b);
  justify-self: center;
}
.zwei-leser:has(input[value="app"]:checked) .blatt-anlass-pdf,
.zwei-leser:has(input[value="pdf"]:checked) .blatt-anlass-app { visibility: hidden; }

@media (min-width: 48rem) {
  @container blatt (width >= 41em) {
    .blatt-feld { justify-self: center; }
    .blatt-anlass { margin-top: var(--s4); }
  }
}

.blatt-wechsel {
  grid-column: 1;
  grid-row: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 var(--s3);
  border: 1px solid var(--linie);
  border-radius: var(--r-klein);
  font-size: var(--fs-neben);
  line-height: var(--lh-neben);
  color: var(--text);

  text-align: center;
  max-width: 100%;
}
.blatt-wechsel input { position: absolute; opacity: 0; pointer-events: none; }

.blatt-wechsel:has(input:checked) { opacity: 0; pointer-events: none; }
.blatt-bedienung:has(input:focus-visible) .blatt-wechsel:not(:has(input:checked)) {
  outline: 2px solid var(--lavendel); outline-offset: 3px;
}


.blatt-karussell { position: relative; --faecher: 1; }

@keyframes karte-auf {
  0%   { transform: var(--lage) scale(.9);  z-index: 0; }
  45%  { transform: var(--lage-weg) scale(.95); z-index: 0; }
  46%  { z-index: 1; }
  100% { transform: var(--lage) scale(1);   z-index: 1; }
}
@keyframes karte-ab {
  0%   { transform: var(--lage) scale(1);   z-index: 1; }
  45%  { transform: var(--lage-weg) scale(.95); z-index: 1; }
  46%  { z-index: 0; }
  100% { transform: var(--lage) scale(.9);  z-index: 0; }
}
.blatt-karussell .bericht-karte {
  position: absolute;
  top: 0;
  left: var(--kipp-luft);
}


@property --faecher {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

.blatt-app {
  
  --vorn-x: calc(var(--blatt-mass) * (16 + 62 * var(--faecher)) / 104);
  --lage: translate(var(--vorn-x), calc(var(--blatt-mass) * 16 / 104 * var(--faecher))) rotate(calc(-6deg * var(--faecher)));
  --lage-weg: translate(calc(var(--vorn-x) + var(--blatt-mass) * 26 / 104), calc(var(--blatt-mass) * 16 / 104)) rotate(-14deg);
}
.blatt-pdf {
  --lage: translate(0, 0) rotate(calc(8deg * var(--faecher)));
  --lage-weg: translate(calc(var(--blatt-mass) * -26 / 104), 0) rotate(17deg);
}

.zwei-leser:has(input[value="app"]:checked) .blatt-app,
.zwei-leser:has(input[value="pdf"]:checked) .blatt-pdf {
  transform: var(--lage) scale(1);
  z-index: 1;
  animation: karte-auf 700ms var(--federn);
}
.zwei-leser:has(input[value="pdf"]:checked) .blatt-app,
.zwei-leser:has(input[value="app"]:checked) .blatt-pdf {
  transform: var(--lage) scale(.9);
  z-index: 0;
  animation: karte-ab 700ms var(--federn);
}

.bericht-karte { position: relative; }

.karte-griff {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  cursor: pointer;
  pointer-events: none;
}
.zwei-leser:has(input[value="app"]:checked) .karte-griff.griff-pdf,
.zwei-leser:has(input[value="pdf"]:checked) .karte-griff.griff-app { pointer-events: auto; }

.bericht-karte::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--grund);
  opacity: 0;
  transition: opacity 300ms ease-out 260ms;
  pointer-events: none;
}
.zwei-leser:has(input[value="pdf"]:checked) .blatt-app::after,
.zwei-leser:has(input[value="app"]:checked) .blatt-pdf::after { opacity: .42; }


.bericht-karte.blatt-pdf { width: var(--blatt-mass); }
.bericht-karte.blatt-app { width: calc(var(--blatt-mass) * 72 / 104); }

.bericht-karte .geraet {
  --steg: 5px;                    
  border-radius: calc(var(--steg) + var(--r-mittel));
}

.bericht-karte .geraet::after { content: none; }

.geraet-schirm {
  position: relative;
  border-radius: var(--r-mittel);
  overflow: hidden;
  height: calc(var(--blatt-mass) * 150 / 104 - 2 * var(--steg));
  container-type: inline-size;
}

.schirm-insel {
  position: absolute;
  z-index: 1;
  top: calc(var(--blatt-mass) * 4 / 104);
  left: 50%;
  transform: translateX(-50%);
  width: 32%;
  height: calc(var(--blatt-mass) * 7 / 104);
  border-radius: 999px;
  background: var(--papier-tinte);
}

.geraet-schirm .bericht-blatt {
  --blatt-b: 100cqw;
  width: 100%;
  height: 100%;
  border-radius: 0;
  padding-top: calc(var(--blatt-b) * 15 / 104);
}

@media (prefers-reduced-motion: reduce) {
  .blatt-karussell .bericht-karte { animation: none !important; }
}


.recap {
  list-style: none;
  margin: var(--s6) 0 0;  
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5) var(--s4);

  max-width: none;
}
@media (min-width: 48rem) {
  .recap { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  @container blatt (width < 41em) {
    .recap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
}


.recap-zelle { max-width: 232px; }

.recap-fenster {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 2;
  border-radius: var(--r-mittel);

  border: 1px solid var(--linie);
  margin-bottom: var(--s3);

  max-height: 116px;
}
.recap-schnitt {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% * var(--bw) / var(--w));
  height: auto;
  transform: translate(calc(-100% * var(--x) / var(--bw)), calc(-100% * var(--y) / var(--bh)));
}

.s-eintrag    { --bw: 748; --bh: 1748; --x:  66; --y:  545; --w: 580; }  
.s-kalender   { --bw: 804; --bh: 1800; --x:   0; --y:  738; --w: 804; }  
.s-widget     { --bw: 744; --bh:  372; --x:   0; --y:    0; --w: 744; }  
.s-blatt      { --bw: 804; --bh:  524; --x:  38; --y:  160; --w: 728; }  
.s-geraet     { --bw: 692; --bh:  346; --x:   0; --y:    0; --w: 692; }  
.s-wechsel    { --bw: 708; --bh:  432; --x:   4; --y:    0; --w: 700; }  

.recap-zelle h3 {
  margin: 0 0 var(--luft-eng);
  font-family: var(--sans);
  font-style: normal;
  font-weight: 600;
  font-size: var(--fs-marke);
  letter-spacing: var(--ls-marke);
  text-transform: uppercase;
  line-height: var(--lh-eng);
  color: var(--text-hero);
}
.recap-zelle p {
  margin: 0;
  font-size: var(--fs-text);
  line-height: var(--lh-lese);
  color: var(--text-leise);
  max-width: none;
  text-wrap: pretty;
}

.index {
  max-width: var(--mass);
  margin: var(--s6) 0 0;
}

.index-schleier { display: none; }
.index-ziel { position: fixed; inset: 0 auto auto 0; width: 0; height: 0; scroll-margin: 0; }
.index .label { margin: 0 0 var(--luft-eng); }

.index-blatt { border-left: 1px solid var(--haarlinie-stark); padding-left: var(--s4); }
.index ol, .index ul { list-style: none; padding: 0; margin: 0; }
.index li { margin: 0; position: relative; }

.index { --index-polster: var(--s2); }
.index a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: var(--index-polster) 0;
  font-size: var(--fs-neben);
  line-height: var(--lh-neben);
  color: var(--text-leise);
  text-decoration: none;
}
.index a:hover { color: var(--text-hero); }

.index-schritte a {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  align-items: center;
  column-gap: var(--s2);
  font-size: var(--fs-neben);
}

.index-schritte .nr {
  font-family: var(--ziffern);
  font-variant-numeric: lining-nums;
  font-size: var(--fs-h4);
  line-height: var(--lh-glyph);
  font-weight: 500;
  color: var(--ton);
}
.index-schritte .tat { color: var(--text-hero); font-weight: 700; }
.index-schritte a:hover .tat { text-decoration: underline; }

.index-schritte li::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--s4) - 1px);
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--ton);
}

.index-weiteres { margin-top: var(--s3); }

.index-vorlauf { margin-top: 0; margin-bottom: var(--s3); }

.index .ton-gold     { --ton: var(--gold); }
.index .ton-rose     { --ton: var(--rose); }
.index .ton-lavendel { --ton: var(--lavendel); }
.index .ton-grau     { --ton: var(--grau); }

@media (min-width: 76rem) {
  .methodikseite main {
    --mass: min(var(--mass-voll), calc(100vw - var(--flanke) - 2 * 1.5rem - var(--s6)));
  }
  .index {
    max-width: none;
    margin: 0;
    position: fixed;

    inset: calc(var(--tap) + var(--s3) + var(--kapitelband-hoehe) + var(--s7)) 0 var(--s4) 0;
    z-index: 5;

    pointer-events: none;
  }

  .index-lage {
    max-width: var(--spalte);
    margin: 0 auto;
    padding: 0 var(--s4);
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
  }

  .index-blatt {
    pointer-events: auto;
    width: var(--flanke);
    view-transition-name: flanke;
  }

  .index { --index-polster: var(--s1); }
  .index a { min-height: 0; }

  .methodikseite .fragen-kopf { view-timeline-name: --z-fragen; }
  @supports (animation-timeline: view()) {
    .index:not(:focus-within) {
      animation: index-weicht linear forwards;
      animation-timeline: --z-fragen;
      animation-range: entry 0% entry 100%;
    }
  }
}

@keyframes index-weicht { to { opacity: 0; visibility: hidden; } }

@media (max-width: 75.99rem) {
  body:has(.wege:popover-open) :is(.index, .index-schleier) { visibility: hidden; }

  .index {
    display: none;
    position: absolute;
    inset: 100% 0 auto 0;

    z-index: 20;
    width: auto;
    height: auto;
    max-width: none;
    max-height: calc(100dvh - var(--kopf-hoehe));
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--haarlinie);
    border-image: var(--trenner) 1;
    background: var(--grund);
    color: var(--text);
    padding-inline: max(var(--polster), calc(50% - var(--spalte) / 2));
    padding-block: var(--s4);
  }
  body:has(#uebersicht:target) .index { display: block; }

  body:has(#uebersicht:target) .index-schleier {
    display: block;
    position: absolute;
    inset: 100% 0 auto 0;
    height: 100dvh;
    z-index: 19;
  }

  @media (prefers-reduced-motion: no-preference) {
    .index {
      opacity: 0;
      translate: 0 calc(-1 * var(--s2));
      transition:
        opacity 220ms var(--federn),
        translate 220ms var(--federn),
        display 220ms allow-discrete;
    }
    body:has(#uebersicht:target) .index { opacity: 1; translate: 0 0; }
    @starting-style {
      body:has(#uebersicht:target) .index { opacity: 0; translate: 0 calc(-1 * var(--s2)); }
    }
  }
}



@property --wach {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --weg {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@keyframes wach-an  { from, to { --wach: 1; } }

@keyframes wach-aus { from, to { --wach: 0; --weg: 1; } }

@keyframes kb-an  { from, to { --wach: 1; } }
@keyframes kb-aus { from, to { --wach: 0; --weg: 1; } }

html {
  timeline-scope:
    --z-titel, --z-fenster, --z-schritt-1, --z-schritt-2, --z-schritt-3,
    --z-schritt-4, --z-arztbericht, --z-lokal, --z-fachteil, --z-quellen,
    --z-was-nicht, --z-faq, --z-fragen;
}

.methodikseite {
  --leseband: var(--ankerlinie);
}

.methodikseite :is(#titel, #fenster, #schritt-1, #schritt-2, #schritt-3,
                   #schritt-4, #arztbericht, #lokal, #fachteil, #quellen,
                   #was-nicht, #faq) {
  view-timeline-inset: var(--leseband) calc(100% - var(--leseband) - 24px);
}
.methodikseite #titel       { view-timeline-name: --z-titel; }
.methodikseite #fenster     { view-timeline-name: --z-fenster; }
.methodikseite #schritt-1   { view-timeline-name: --z-schritt-1; }
.methodikseite #schritt-2   { view-timeline-name: --z-schritt-2; }
.methodikseite #schritt-3   { view-timeline-name: --z-schritt-3; }
.methodikseite #schritt-4   { view-timeline-name: --z-schritt-4; }
.methodikseite #arztbericht { view-timeline-name: --z-arztbericht; }
.methodikseite #lokal       { view-timeline-name: --z-lokal; }
.methodikseite #fachteil    { view-timeline-name: --z-fachteil; }
.methodikseite #quellen     { view-timeline-name: --z-quellen; }
.methodikseite #was-nicht   { view-timeline-name: --z-was-nicht; }
.methodikseite #faq         { view-timeline-name: --z-faq; }

.methodikseite .index li,
.kb-titel {
  --wach: 0;
  animation-timing-function: linear;
  animation-fill-mode: forwards, forwards;
  animation-range: cover, cover;
}
.methodikseite .index li { animation-name: wach-an, wach-aus; }
.kb-titel { --weg: 0; animation-name: kb-an, kb-aus, kb-ziel; }

.kb-titel {
  animation-range: exit, cover, cover 0% exit 0%;
  animation-fill-mode: forwards, forwards, none;
}

.methodikseite .index li:has(a[href="#fenster"]),
.kb-titel[data-fuer="fenster"]     { animation-timeline: --z-fenster, --z-schritt-1; }
.methodikseite .index li:has(a[href="#schritt-1"]),
.kb-titel[data-fuer="schritt-1"]   { animation-timeline: --z-schritt-1, --z-schritt-2; }
.methodikseite .index li:has(a[href="#schritt-2"]),
.kb-titel[data-fuer="schritt-2"]   { animation-timeline: --z-schritt-2, --z-schritt-3; }
.methodikseite .index li:has(a[href="#schritt-3"]),
.kb-titel[data-fuer="schritt-3"]   { animation-timeline: --z-schritt-3, --z-schritt-4; }
.methodikseite .index li:has(a[href="#schritt-4"]),
.kb-titel[data-fuer="schritt-4"]   { animation-timeline: --z-schritt-4, --z-arztbericht; }
.methodikseite .index li:has(a[href="#arztbericht"]),
.kb-titel[data-fuer="arztbericht"] { animation-timeline: --z-arztbericht, --z-lokal; }
.methodikseite .index li:has(a[href="#lokal"]),
.kb-titel[data-fuer="lokal"]       { animation-timeline: --z-lokal, --z-fachteil; }
.methodikseite .index li:has(a[href="#fachteil"]),
.kb-titel[data-fuer="fachteil"]    { animation-timeline: --z-fachteil, --z-quellen; }
.methodikseite .index li:has(a[href="#quellen"]),
.kb-titel[data-fuer="quellen"]     { animation-timeline: --z-quellen, --z-was-nicht; }
.methodikseite .index li:has(a[href="#was-nicht"]),
.kb-titel[data-fuer="was-nicht"]   { animation-timeline: --z-was-nicht, --z-faq; }

.methodikseite .index li:has(a[href="#faq"]),
.kb-titel[data-fuer="faq"] {
  animation-timeline: --z-faq;
}
.methodikseite .index li:has(a[href="#faq"]) { animation-name: wach-an; }
.kb-titel[data-fuer="faq"] {
  animation-name: kb-an, kb-ziel;
  animation-range: exit, cover 0% exit 0%;
  animation-fill-mode: forwards, none;
}

@keyframes kb-ziel { from, to { --wach: 1; } }

.kb-titel[data-fuer="titel"] {
  --wach: 1;
  animation-name: kb-aus;
  animation-timeline: --z-fenster;
  animation-range: cover;
}

.kb-einstieg-weit { display: none; }
@media (max-width: 75.99rem) {
  .kb-titel[data-fuer="titel"] .kb-wort {
    font-size: var(--fs-marke);
    letter-spacing: var(--ls-marke);
    text-transform: uppercase;
    font-weight: 600;
    line-height: var(--lh-eng);
    color: var(--label);
  }
}
@media (min-width: 76rem) {
  .kb-einstieg-eng { display: none; }
  .kb-einstieg-weit { display: inline; }
}

@supports (animation-timeline: view()) {
  .index a {
    
    color: color-mix(in oklab, var(--text-leise), var(--text-hero) calc(var(--wach) * 100%));
  }

  .index-schritte li::before {
    width: calc(3px + 6px * var(--wach));
    left: calc(-1 * var(--s4) - 1px - 3px * var(--wach));
  }

  .index-weiteres li::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--s4) - 4px);
    top: var(--index-polster);
    bottom: var(--index-polster);
    width: 9px;
    background: var(--text-hero);
    opacity: var(--wach);
  }

  .index-weiteres li::before {
    transform: translateY(calc((1 - var(--wach)) * (1 - 2 * var(--weg)) * var(--s1)));
  }
  @media (prefers-reduced-motion: no-preference) {
    .index li::before {
      transition:
        opacity   260ms var(--federn),
        transform 260ms var(--federn),
        width     260ms var(--federn),
        left      260ms var(--federn);
    }

    .index a { transition: color 260ms var(--federn), transform var(--druck-zurueck) var(--federn-zurueck); }
  }
}

.kapitelband {
  display: none;

  flex: 1 0 100%;

  margin-top: calc(-1 * var(--band-fuge, var(--s3)));
  margin-bottom: calc(-1 * var(--s3));

  
  pointer-events: none;
}
.kapitelband-lage { pointer-events: none; }
.kb-index { pointer-events: auto; }

@supports not (animation-timeline: view()) {
  .methodikseite .kapitelband { display: contents; }
  .methodikseite .kapitelband-lage,
  .methodikseite .kb-fortschritt { display: none; }
}

header.kopf:has(.wege:popover-open) .kapitelband { visibility: hidden; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .kapitelband {
    transition:
      opacity 220ms var(--federn),
      visibility 220ms allow-discrete;
  }
}
@supports (animation-timeline: view()) {
  html:has(.methodikseite) {
    --band-fuge: var(--s3);
    --kopf-hoehe: calc(max(var(--tap), var(--kopf-zeile)) + 2 * var(--s3) + var(--kapitelband-hoehe) - 1px - var(--band-fuge));
  }

  @media (max-width: 39.99rem) {
    html:has(.methodikseite) { --band-fuge: var(--s2); }
  }

  .methodikseite .kapitelband {
    display: flex;
    align-items: center;
    gap: var(--s2);
  }
}
@media (max-width: 47.99rem) {
  .kapitelband {
    order: 3;
  }
}

header.kopf:has(.kapitelband) {
  border-bottom: 1px solid var(--haarlinie-stark);
}

@keyframes kb-linie { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    header.kopf:has(.kapitelband) { border-bottom-color: transparent; }
    header.kopf:has(.kapitelband)::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -1px;
      width: 100%;
      height: 1px;
      background: var(--linie);
      transform: scaleX(0);
      transform-origin: 0 50%;
      animation: kb-linie 900ms var(--federn) forwards;
    }
  }
}


.kapitelband-lage {
  flex: 1;
  min-width: 0;
  min-height: calc(var(--kapitelband-hoehe, 41px) - 1px);   
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.kb-stapel {
  display: grid;
  min-width: 0;
  flex: 1;                           
}
.kb-titel {
  grid-area: 1 / 1;
  min-width: 0;
  display: flex;

  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  font-size: var(--fs-neben);
  font-weight: 700;
  color: var(--text-hero);
}

.kb-wort,
.kb-meta { opacity: var(--wach); }

.kb-wort {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.kb-meta {
  flex: none;
  white-space: nowrap;
  font-size: var(--fs-marke);
  letter-spacing: var(--ls-marke);
  text-transform: uppercase;
  font-weight: 600;
  line-height: var(--lh-eng);
  color: var(--label);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 47.99rem) {
  .kb-minuten { display: none; }
}

.kb-meta svg {
  width: 14px;
  height: 14px;
  vertical-align: -.22em;
  margin-right: var(--s1);
}
.kb-minuten svg { margin-left: var(--s3); }

@media (prefers-reduced-motion: no-preference) {
  .kb-wort,
  .kb-meta {
    transform: translateY(calc((1 - var(--wach) - 2 * var(--weg)) * var(--s1)));
    transition: transform 320ms var(--federn), opacity 320ms var(--federn);
  }

  .kb-titel[data-fuer="titel"] :is(.kb-wort, .kb-meta) { transition-duration: 0s; }
}

@media (min-width: 76rem) {
  .kb-titel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--flanke);
    
    align-items: center;
  }
  .kb-meta { padding-left: calc(var(--s4) + 1px); }
}

.kb-titel i {
  font-family: var(--ziffern);
  font-variant-numeric: lining-nums;
  font-style: normal;
  font-weight: 500;

  
  font-size: 1.5em;

  line-height: 0;
  color: var(--ton, var(--label));
  margin-right: .4em;
}
.kb-titel[data-fuer="schritt-1"] { --ton: var(--gold); }
.kb-titel[data-fuer="schritt-2"] { --ton: var(--rose); }
.kb-titel[data-fuer="schritt-3"] { --ton: var(--lavendel); }
.kb-titel[data-fuer="schritt-4"] { --ton: var(--grau); }

.kb-index {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  margin-right: calc(-1 * var(--s2));   
  padding: 0;
  border: 0;
  background: none;
  color: var(--label);
  cursor: pointer;

  text-decoration: none;
}

.kb-index svg { width: 22px; height: 22px; display: block; translate: 4.2px; }
.kb-index:hover { color: var(--text-hero); }

@media (max-width: 75.99rem) {
  .kb-index-zu { display: none; }
  body:has(#uebersicht:target) .kb-index-auf { display: none; }
  body:has(#uebersicht:target) .kb-index-zu {
    display: inline-flex;
    color: var(--text-hero);   
  }
}

@media (min-width: 76rem) {
  .kb-index { display: none; }

  body:has(#uebersicht:target)::after { display: none; }
}

.kb-fortschritt {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--lavendel);
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation: kb-fortschritt linear;
  animation-timeline: scroll(root block);
}
@keyframes kb-fortschritt { to { transform: scaleX(1); } }

html:has(.methodikseite) {
  --kapitelband-hoehe: 45px;   
  --ankerlinie: calc(var(--kopf-hoehe) + 1px + var(--s6));
  --anker-polster: var(--ankerlinie);

  --flanke: 17rem;

  --mass-voll: var(--mass);
}

@media print {
  .methodikseite .kapitelband { display: none; }
  header.kopf:has(.kapitelband) { border-bottom-color: var(--linie); }
  header.kopf:has(.kapitelband)::after { display: none; }
}

.kapitel-schritt { --ton: var(--lavendel); max-width: var(--mass); }
.kapitel-schritt.ton-gold     { --ton: var(--gold); }
.kapitel-schritt.ton-rose     { --ton: var(--rose); }
.kapitel-schritt.ton-lavendel { --ton: var(--lavendel); }
.kapitel-schritt.ton-grau     { --ton: var(--grau); }
.kapitel-schritt .label { color: var(--ton); }
.kapitel-schritt > h2 { color: var(--ton); }

.kapitel-schritt-kopf {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  margin: 0;
}

.kapitel-schritt-kopf .nr {
  font-family: var(--ziffern);
  font-variant-numeric: lining-nums;
  font-size: var(--fs-h2);
  line-height: var(--lh-glyph);
  font-weight: 500;
  color: var(--ton);
}

.kapitel-schritt + .kapitel-schritt { margin-top: var(--s8); }

.regel {
  border-left: 3px solid var(--ton, var(--lavendel));
  padding: 0 0 0 1.25rem;
  margin: var(--s5) 0;
}

.regel > h3 { color: var(--ton, var(--lavendel)); margin-top: 0; }
.regel > :last-child { margin-bottom: 0; }
.regel ul, .regel ol { margin-bottom: var(--luft-absatz); }

.fachteil > p { color: var(--text-leise); }

.methodikseite summary,
.methodikseite summary > h2,
.methodikseite .kapitel-schritt-kopf > .label { overflow-wrap: break-word; }
.methodikseite .kapitel-schritt-kopf > .label { min-width: 0; }

.weiterfuehrend { margin-top: 2rem; }

.merkmale { list-style: none; padding: 0; }
.merkmale li {
  border-top: 1px solid var(--haarlinie);
  border-image: var(--trenner) 1;
  padding: var(--s3) 0;
  margin: 0;
}
.merkmale li:last-child { border-bottom: 1px solid var(--haarlinie); }

.merkmale li > strong:first-child { display: block; }

.merkmale li { max-width: var(--mass); }

.methodikseite .tabellenrahmen { container-type: inline-size; container-name: tafel; }

.methodikseite .tabellenrahmen { --zell: .6rem .75rem; --zell-rand: .75rem; }

@container tafel (width < 24em) {
  .methodikseite .tabellenrahmen table { --zell: .55rem .3rem; --zell-rand: 0px; }
}
.methodikseite .tabellenrahmen :is(th, td) { padding: var(--zell); }
.methodikseite .tabellenrahmen :is(th, td):first-child { padding-left: var(--zell-rand); }
.methodikseite .tabellenrahmen :is(th, td):last-child  { padding-right: var(--zell-rand); }
@container tafel (width < 20em) {
  .methodikseite .tabellenrahmen table,
  .methodikseite .tabellenrahmen tbody,
  .methodikseite .tabellenrahmen tr,
  .methodikseite .tabellenrahmen th,
  .methodikseite .tabellenrahmen td { display: block; }

  .methodikseite .tabellenrahmen thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .methodikseite .tabellenrahmen tr {
    border-top: 1px solid var(--haarlinie);
    border-image: var(--trenner) 1;
    padding: var(--s4) 0;
  }
  .methodikseite .tabellenrahmen tr:last-child { border-bottom: 1px solid var(--haarlinie); }
  
  .methodikseite .tabellenrahmen th[scope="row"] {
    padding: 0 0 var(--s2);
    border: 0;

    font-size: var(--fs-text);
    color: var(--text-hero);
  }
  .methodikseite .tabellenrahmen td {
    padding: 0;
    border: 0;
    display: grid;
    grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr);
    column-gap: var(--s3);
    align-items: baseline;
  }
  .methodikseite .tabellenrahmen td + td { margin-top: var(--s2); }
  .methodikseite .tabellenrahmen td::before {
    content: attr(data-spalte);
    color: var(--label);
    font-weight: 600;
  }

  @container tafel (width < 13em) {
    .methodikseite .tabellenrahmen td {
      grid-template-columns: minmax(0, 1fr);
      row-gap: 0;
    }
  }
}

.abgrenzung {
  list-style: none;
  border-left: 3px solid var(--rose);
  padding: 0 0 0 1.25rem;
  margin: var(--s4) 0;
}
.abgrenzung li { margin-bottom: var(--luft-absatz); }
.abgrenzung li:last-child { margin-bottom: 0; }

main.brief > section {
  margin-inline: 0;
  padding-inline: 0;
  padding-block: 0;
  background: none;
}
main.brief > section + section { margin-top: var(--s7); }

main.brief section h2 { font-size: var(--fs-h4); margin: 0 0 var(--luft-kopf); }
.kapitel-kopf { margin: 0 0 var(--luft-kopf); }
.kapitelbild { margin-top: var(--s4); }
.kapitelbild svg { display: block; width: 100%; max-width: 13rem; height: auto; }
.kapitel-kopf > h2 { margin: 0; }
main.brief section p { margin: 0 0 var(--luft-absatz); }
main.brief section p:last-child { margin-bottom: 0; }
main.brief section .weiterfuehrend { margin-top: var(--luft-absatz); }

main.brief > .vorspann { margin: 0 0 var(--s6); max-width: var(--mass); }

.auftakt { margin: 0 0 var(--s6); }
.auftakt > .vorspann { margin: 0; }
.taktbild { margin-top: var(--s5); }
.taktbild svg { display: block; width: 100%; max-width: 22rem; height: auto; }

@media (min-width: 62rem) {
  .auftakt {
    display: grid;
    grid-template-columns: minmax(0, var(--mass)) minmax(0, 22rem);
    column-gap: var(--s7);
    align-items: center;
  }
  .taktbild { margin-top: 0; }
}

.brief-schluss {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--haarlinie);  
  border-image: var(--trenner) 1;
}
@media (min-width: 62rem) {
  main.brief > section {
    display: grid;
    grid-template-columns: minmax(0, 17rem) minmax(0, var(--mass));
    column-gap: var(--s7);
    align-items: start;
  }
  main.brief > section > .kapitel-kopf { grid-column: 1; grid-row: 1 / span 99; }
  main.brief > section > :not(.kapitel-kopf) { grid-column: 2; }

  
  @container brief (width < 54em) {
    main.brief > section { display: block; }
    main.brief > section > .kapitel-kopf { margin-bottom: var(--luft-kopf); }
  }
}

.glieder { list-style: none; padding: 0; margin: 0; }
.glieder li {
  padding: var(--s5) 0;
  border-top: 1px solid var(--haarlinie);
  border-image: var(--trenner) 1;
}

.glieder + .zierlinie { margin-top: var(--s6); }
.glied-kopf {
  font-weight: 700;
  color: var(--text-hero);
  margin: 0 0 var(--luft-absatz);
  max-width: var(--mass);
}
.brief-ausklang {
  margin: 0;
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: var(--fs-zitat); line-height: var(--lh-eng);
  color: var(--text-hero);  
  max-width: var(--mass);
}
.kurzfassung {
  border-top: 1px solid var(--haarlinie);
  border-bottom: 1px solid var(--haarlinie);
  border-image: var(--trenner) 1;
  padding: var(--s4) 0;
  margin: var(--s4) 0 var(--s5);
}

.kurzfassung h2 { margin-top: 0; }
.kurzfassung ul { list-style: none; padding: 0; margin: 0; }
.kurzfassung li {
  border-top: 1px solid var(--haarlinie);
  border-image: var(--trenner) 1;
  padding: .75rem 0;
  margin: 0;

  color: var(--text-hero);
}
.kurzfassung li:first-child { border-top: 0; padding-top: 0; }
.kurzfassung li:last-child { padding-bottom: 0; }

.kurzfassung > p { margin: var(--luft-absatz) 0 0; }


main.rechtstext { container-type: inline-size; container-name: recht; }

.rechtsindex { margin: 0 0 var(--s5); }
.rechtsindex ul { list-style: none; padding: 0; margin: 0; }
.rechtsindex li { margin: 0; }
.rechtsindex > .label { margin: 0 0 var(--luft-eng); }

.rechtsindex a {
  display: flex;
  gap: var(--s3);
  align-items: baseline;
  padding: var(--s2) 0;
  font-size: var(--fs-neben);
  color: var(--text-leise);
  text-decoration: none;
}
.rechtsindex a:hover { color: var(--text-hero); }
.rechtsindex a:hover .tat { text-decoration: underline; }
.rechtsindex .nr {
  font-family: var(--ziffern);
  font-variant-numeric: lining-nums;
  color: var(--text-lila);
  flex: none;
  min-width: 1.1em;
}
.rechtsindex .tat { min-width: 0; text-wrap: pretty; overflow-wrap: break-word; }

@media (min-width: 62rem) {
  main.rechtstext {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, var(--mass)) minmax(0, 17rem);
    column-gap: var(--s7);
    align-items: start;
  }
  main.rechtstext > :not(.rechtsindex) { grid-column: 1; }
  main.rechtstext > .rechtsindex {
    grid-column: 2;
    grid-row: 1 / span 99;
    margin: 0;
    border-left: 1px solid var(--haarlinie-stark);
    padding-left: var(--s4);
  }

  
  @container recht (width < 54em) {
    main.rechtstext > :not(.rechtsindex) { grid-column: 1 / -1; }
    main.rechtstext > .rechtsindex {
      grid-column: 1 / -1;
      grid-row: auto;
      border-left: 0;
      padding-left: 0;
      margin: 0 0 var(--s5);
      max-width: var(--mass);
    }
  }
}



.laeden { --badge: clamp(2.5rem, 11.5vw, 2.75rem); display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; margin: var(--s4) 0 var(--s3); }
@media (min-width: 48rem) { .laeden { --badge: 3.5rem; } }

.laden-knopf { display: inline-block; padding-block: var(--s1); }
.laden-knopf .laden-badge { display: block; width: auto; }
.laden-knopf .laden-badge-apple { height: var(--badge); margin-block: var(--s1); }  
.laden-knopf .laden-badge:not(.laden-badge-apple) { height: calc(var(--badge) * 250 / 190); }
.laden-knopf .laden-badge[src*="play-badge-en"] {
  height: calc(var(--badge) * 250 / 168);
  margin-inline: calc(var(--badge) * -41 / 168);
}

.app-weiche {
  --tel: clamp(150px, min(42vw, 24svh), 220px);
  min-height: calc(100svh - var(--kopf-hoehe));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: var(--s5);
  position: relative;
  overflow: hidden;
}
.app-weiche::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 40%;
  background: linear-gradient(to top, var(--versenkt), transparent);
}
.app-weiche > h1 { position: relative; z-index: 1; text-wrap: balance; margin-block: calc(var(--tel) * -.7) 0; }
.app-weiche > .laeden { position: relative; z-index: 1; justify-content: center; margin: var(--s4) 0 0; }

.app-weiche .app-faecher {
  order: -1;
  position: relative;
  isolation: isolate;
  display: flex;
  justify-content: center;
  margin: calc(var(--tel) * .75 + var(--s4)) 0 0;
}
.app-weiche .app-faecher::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -2px calc(var(--tel) * -.4);
  background: linear-gradient(transparent 30%, var(--grund) 88%);
}
.app-faecher .geraet { --geraet-grund: var(--grund); width: var(--tel); z-index: 1; transform-origin: bottom center; }
.app-faecher .geraet:first-of-type { --dreh: -7deg; transform: translateX(calc(var(--tel) * .11)) rotate(var(--dreh)); }
.app-faecher .geraet:last-of-type { --dreh: 7deg; transform: translateX(calc(var(--tel) * -.11)) rotate(var(--dreh)); }
.app-faecher .geraet > img { border-radius: var(--schirm-bild); }

.app-faecher-icon {
  position: absolute;
  top: calc(var(--tel) * -.75);
  left: 50%;
  display: block;
  width: var(--tel);
  aspect-ratio: 1;
  margin-left: calc(var(--tel) * -.5);
  overflow: hidden;
  border-radius: calc(var(--tel) * .2237);
  mask-image: linear-gradient(var(--text) 50%, transparent 80%);
}
.app-faecher-icon > img { display: block; width: 100%; height: 100%; }
.app-faecher-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 44%, color-mix(in srgb, var(--text-hero) 38%, transparent) 50%, transparent 56%) 100% 0 / 300% 100% no-repeat;
  mix-blend-mode: screen;
}

@media (prefers-reduced-motion: no-preference) {
  .app-faecher-icon { animation: app-icon-auf 800ms var(--federn) both; }
  .app-faecher-icon::after { animation: app-glanz 1600ms ease-in-out 2000ms both; }
  .app-faecher .geraet { animation: app-tel-hoch 1000ms var(--federn) 200ms both; }
  .app-weiche > h1 { animation: app-ein-hoch 700ms var(--federn) 600ms both; }
  .app-weiche > .laeden { animation: app-ein-hoch 700ms var(--federn) 750ms both; }

  @supports (animation-timeline: scroll(root block)) {
    .app-weiche .app-faecher { animation: app-faecher-bleibt linear both; animation-timeline: scroll(root block); }
    .app-faecher-icon {
      animation: app-icon-auf 800ms var(--federn) both, app-icon-bleibt linear both;
      animation-timeline: auto, scroll(root block);
    }
  }
}
@keyframes app-icon-auf { from { opacity: 0; scale: .85; } }
@keyframes app-glanz { from, to { opacity: 1; } from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes app-tel-hoch { from { opacity: 0; translate: 0 30%; rotate: calc(var(--dreh) * -1); } }
@keyframes app-ein-hoch { from { opacity: 0; translate: 0 var(--s4); } }
@keyframes app-faecher-bleibt { to { translate: 0 calc(var(--tel) * .35); } }
@keyframes app-icon-bleibt { to { translate: 0 calc(var(--tel) * .2); } }




.app-abschluss { text-align: center; }
.app-abschluss > :is(h2, p) { max-width: var(--mass); margin-inline: auto; }
.app-abschluss > p { color: var(--text-leise); }
.app-abschluss-icon { margin-bottom: var(--s4); }
.app-abschluss > .laeden { justify-content: center; margin-top: var(--s5); }
.app-abschluss-icon {
  display: block;
  --icon: 5rem;
  width: var(--icon);
  aspect-ratio: 1;
  margin-inline: auto;
  overflow: hidden;
  border-radius: calc(var(--icon) * .2237);
  border: 1px solid var(--haarlinie);
}
.app-abschluss-icon > img { display: block; width: 100%; height: 100%; }

main:has(> .app-weiche) > section:nth-of-type(3n+1) { --sektion-grund: var(--grund);      background: var(--grund); }
main:has(> .app-weiche) > section:nth-of-type(3n+2) { --sektion-grund: var(--versenkt);   background: var(--versenkt); }
main:has(> .app-weiche) > section:nth-of-type(3n)   { --sektion-grund: var(--blatt);      background: var(--blatt); }   

.app-band-zeile { padding-block: var(--s5); }
.app-band-buehne { display: grid; gap: var(--s4); justify-items: center; text-align: center; }

.app-band-bild { order: 1; width: min(100%, 15rem); }
.app-band-bild:not(.geraet) { width: min(100%, 20rem); }
.app-band-bild > img { display: block; width: 100%; height: auto; }
.app-band-bild:not(.geraet) > img { border-radius: var(--r-mittel); }   

.app-band-satz h2,
.app-abschluss h2,
.app-trio > h2,
.app-laufband-satz h2 {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 600;
  font-size: var(--fs-h4);    
  text-wrap: balance;
  margin-top: 0;
  margin-bottom: var(--s3);
}
.app-band-satz h2 em,
.app-abschluss h2 em,
.app-trio > h2 em { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--lavendel); }
.app-band-satz { width: 100%; max-width: var(--mass); }
.app-band-satz p { color: var(--text-leise); margin: 0; }

@media (min-width: 48rem) {
  .app-band-zeile { padding-block: var(--s6); }
  .app-band-buehne { grid-template-columns: 15rem 1fr; gap: var(--s6); align-items: center; justify-items: start; text-align: left; }
  .app-band-zeile:nth-of-type(even) > .app-band-buehne { grid-template-columns: 1fr 15rem; }
  .app-band-zeile:nth-of-type(even) .app-band-bild { grid-column: 2; grid-row: 1; }
  .app-band-zeile:nth-of-type(even) .app-band-satz { grid-column: 1; grid-row: 1; }
  .app-band-bild { order: 0; width: min(100%, 12rem); justify-self: center; }
  .app-band-bild:not(.geraet) { width: 100%; }
}



.app-band-stapel { display: grid; position: relative; }
.app-band-stapel > img { grid-area: 1 / 1; }
.app-band-satz .app-band-stapel > * { grid-area: 1 / 1; }
.app-band-blatt { opacity: 0; }

.app-band-bild.geraet > img { border-radius: var(--schirm-bild); }
.app-band-bild.geraet::before,
.app-band-bild.geraet::after { z-index: 2; }



.app-paar { display: grid; gap: var(--s5); align-items: center; }
.app-paar-satz { max-width: var(--mass); }
.app-paar-satz p { color: var(--text-leise); margin: 0 0 var(--s3); }
.app-paar-leise { font-size: var(--fs-neben); }
.app-paar-bild { display: flex; align-items: flex-start; justify-content: center; gap: var(--s4); }
.app-paar-bild > .geraet { --schirm: var(--r-feld); --geraet-grund: var(--papier); flex: 1 1 0; min-width: 0; }
.app-paar-bild > .geraet > img { border-radius: var(--schirm-bild); }

@media (min-width: 48rem) {
  .app-paar { grid-template-columns: 1fr 26rem; gap: var(--s7); justify-content: center; }
  .app-band-zeile:nth-of-type(even) .app-paar { grid-template-columns: 26rem 1fr; }
  .app-band-zeile:nth-of-type(even) .app-paar-bild { grid-column: 1; grid-row: 1; }
  .app-band-zeile:nth-of-type(even) .app-paar-satz { grid-column: 2; grid-row: 1; }
}
.app-band-stapel > img { background: var(--sektion-grund); }

.app-kachelschirm > img { justify-self: center; align-self: center; border-radius: var(--r-feld); }   
.app-kachelschirm > .app-kachel-klein { width: 50%; }   



@supports (animation-timeline: view()) {
  @media screen and (prefers-reduced-motion: no-preference) {
    .app-band-folge {
      --takte: 1;
      --w1: calc(46% - (var(--takte) - 1) * 5%);
      --w2: calc(49% - (var(--takte) - 1) * 5%);
      --w3: 56%;
      --w4: 59%;
      --w5: 76%;
      --w6: 79%;
      --wt: var(--w1);
      view-timeline-name: --z-folge;
      view-timeline-axis: block;
      min-height: calc(100svh + (var(--takte) + 1) * 42svh);
      padding-block: 0;
    }
    .app-band-folge:has(.app-band-bild .app-band-blatt + .app-band-blatt) { --takte: 2; }
    .app-band-folge:has(.app-band-bild .app-band-blatt + .app-band-blatt + .app-band-blatt) {
      --takte: 3;
      --wt: var(--w3);
      --w3: 50%; --w4: 53%;
      --w5: 64%; --w6: 67%;
    }
    .app-band-folge > .app-band-buehne {
      position: sticky;
      top: var(--kopf-hoehe);
      min-height: calc(100svh - var(--kopf-hoehe));
      max-height: calc(100svh - var(--kopf-hoehe));
      align-content: center;
    }
    .app-band-folge .app-band-bild { width: min(100%, 15rem); max-width: none; }
    .app-band-folge .app-band-bild:not(.geraet) { width: min(100%, 22rem); }
    .app-band-folge .app-band-bild.geraet {
      height: min(52svh, 31rem);
      overflow: hidden;
      -webkit-mask-image: linear-gradient(#000 58%, transparent 96%);
              mask-image: linear-gradient(#000 58%, transparent 96%);
    }
    .app-band-folge .app-band-stapel > img { width: 100%; height: auto; max-width: none; max-height: none; align-self: start; }
    .app-band-folge .app-kachelschirm > .app-kachel-klein { width: 50%; align-self: center; }

    
    .app-band-bild .app-band-blatt {
      animation: app-bild-kommt linear both;
      animation-timeline: --z-folge;
    }
    .app-band-bild .app-band-blatt:nth-of-type(2) { animation-range: cover var(--w1) cover var(--w2); }
    .app-band-bild .app-band-blatt:nth-of-type(3) { animation-range: cover var(--w3) cover var(--w4); }
    .app-band-bild .app-band-blatt:nth-of-type(4) { animation-range: cover var(--w5) cover var(--w6); }

    
    .app-kachelschirm > img:first-of-type {
      animation: app-text-weg linear both;
      animation-timeline: --z-folge;
      animation-range: cover var(--w1) cover var(--w2);
    }
    .app-kachelschirm > .app-band-blatt:nth-of-type(2) {
      animation: app-bild-kommt linear both, app-text-weg linear both;
      animation-timeline: --z-folge, --z-folge;
      animation-range: cover var(--w1) cover var(--w2), cover var(--w3) cover var(--w4);
    }

    .app-band-satz .app-band-schritt {
      animation: app-text-tippt 1100ms steps(30) both;
    }
    .app-band-satz .app-band-schritt:first-of-type {
      animation: app-text-tippt 1100ms steps(30) both, app-text-weg linear both;
      animation-timeline: auto, --z-folge;
      animation-range: normal, cover calc(var(--wt) - 1%) cover var(--wt);
    }
    .app-band-satz .app-band-blatt {
      animation: app-text-tippt 1100ms steps(30) both, app-text-da linear both;
      animation-timeline: auto, --z-folge;
      animation-range: normal, cover var(--wt) cover calc(var(--wt) + 1%);
    }



    @media (min-width: 48rem) {
      .app-band-folge .app-band-bild.geraet { height: min(64svh, 34rem); }
      .app-band-folge > .app-band-buehne { grid-template-columns: 26rem minmax(0, 28rem); justify-content: center; gap: var(--s7); }
      .app-band-zeile:nth-of-type(even).app-band-folge > .app-band-buehne { grid-template-columns: minmax(0, 28rem) 26rem; }
    }
  }
  @keyframes app-bild-kommt   { from { opacity: 0; } to { opacity: 1; } }
  @keyframes app-text-weg { to { opacity: 0; } }
  @keyframes app-text-da { from { opacity: 0; } to { opacity: 1; } }
  @keyframes app-text-tippt   { from { opacity: 1; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
}



.app-trio { text-align: center; }
.app-trio > h2 { max-width: var(--mass); margin-inline: auto; }

.app-trio-geraete {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--s2);
  width: min(100%, 30rem);
  margin: var(--s6) auto 0;
}
.app-trio-geraete > .geraet {
  --schirm: var(--r-feld);   
  --geraet-grund: var(--grund);
  flex: 1 1 0;
  min-width: 0;
  transform-origin: bottom center;
}
.app-trio-geraete > .geraet:first-child { --dreh: -5deg; transform: translateY(var(--s3)) rotate(var(--dreh)); }
.app-trio-geraete > .geraet:last-child  { --dreh:  5deg; transform: translateY(var(--s3)) rotate(var(--dreh)); }
.app-trio-geraete > .geraet > img { border-radius: var(--schirm-bild); }

@media (max-width: 47.99rem) {
  .app-trio-geraete { gap: 0; width: min(84%, 30rem); }
}



.app-laufband-satz { max-width: var(--mass); margin-inline: auto; text-align: center; }
.app-laufband-satz p { color: var(--text-leise); margin: 0; }

.laufband {
  margin-inline: calc(50% - 50vw);
  margin-top: var(--s5);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.laufband-spur { display: flex; gap: var(--s4); width: max-content; align-items: flex-end; }
.laufband-geraet {
  --schirm: var(--r-feld);   
  --geraet-grund: var(--grund);
  flex: none;
  height: 15rem;
}
.laufband-geraet > img { height: 100%; width: auto; border-radius: var(--schirm-bild); }

@media (prefers-reduced-motion: no-preference) {
  .laufband-spur { animation: laufband 72s linear infinite; }
}

@keyframes laufband { to { transform: translateX(calc(-50% - var(--s4) / 2)); } }

@media (min-width: 48rem) {
  .laufband-geraet { height: 19rem; }
}

a:active { opacity: .7; }



.tabellenrahmen { overflow-x: auto; margin-bottom: var(--luft-absatz); }

table { border-collapse: collapse; width: 100%; font-size: var(--fs-neben); }
th, td {
  text-align: left;
  vertical-align: top;
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--haarlinie);
}
th { color: var(--text-hero); font-weight: 700; }

@media (max-width: 47.99rem) {
  th, td { padding: .55rem .3rem; }
  th:first-child, td:first-child { padding-left: 0; }
  th:last-child,  td:last-child  { padding-right: 0; }
}

.tabellenrahmen:not(:has(tr > :nth-child(3))) {
  container-type: inline-size;
  container-name: tabelle;
}

@container tabelle (width < 22em) {
  .tabellenrahmen table,
  .tabellenrahmen tbody,
  .tabellenrahmen tr { display: block; }

  .tabellenrahmen thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .tabellenrahmen tbody tr {
    padding: var(--s3) 0;
    border-top: 1px solid var(--haarlinie);
  }
  .tabellenrahmen tbody tr:first-child { border-top: 0; padding-top: 0; }
  .tabellenrahmen tbody tr:last-child { padding-bottom: 0; }

  .tabellenrahmen tbody :is(th, td) {
    display: block;
    padding: 0;
    border-bottom: 0;
  }

  .tabellenrahmen tbody tr > :first-child {
    color: var(--text-hero);
    font-weight: 700;
    margin-bottom: var(--s1);
  }
}

details {
  border-bottom: 1px solid var(--haarlinie);
  border-image: var(--trenner) 1;
  padding: .25rem 0;

  margin-block: var(--s4);
}

:where(.fragen-liste, .fachteil-klapper) > details { margin-block: 0; }
summary {
  cursor: pointer;
  padding: .85rem 0;
  color: var(--text-hero);
  font-weight: 600;
  list-style: none;                      
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
}
summary::-webkit-details-marker { display: none; }   

summary::after {
  content: "";
  flex: none;
  margin-left: auto;
  margin-top: .4em;                      
  width: .75rem;
  height: .75rem;
  background:
    linear-gradient(var(--lavendel), var(--lavendel)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--lavendel), var(--lavendel)) center / 1.5px 100% no-repeat;
}

details[open] > summary::after {
  background:
    linear-gradient(var(--lavendel), var(--lavendel)) center / 100% 1.5px no-repeat;
}
details[open] > summary { color: var(--lavendel); }

details.quellen { border-bottom: 0; padding: 0; }
details.quellen > summary { padding: 0; align-items: baseline; color: inherit; }
details.quellen > summary > h2 { margin-bottom: 0; }
details.quellen[open] > summary { color: inherit; }
details.quellen[open] > summary > h2 { margin-bottom: var(--luft-kopf); }
details.quellen > summary::after { margin-top: 0; align-self: center; }

.methodikseite details.quellen > summary { min-height: var(--tap); }

details.quellen > summary > h2.oben { margin-top: 0; }

details.quellen { margin-block: 0 var(--s4); }

details.quellen:not(:first-child) { margin-top: var(--s7); }
details.quellen > ul { margin-top: 0; }

details.fachteil-klapper { border-bottom: 0; padding: 0; margin: 0; }
details.fachteil-klapper > summary { padding: 0; align-items: baseline; color: inherit; }
details.fachteil-klapper > summary > h2 { margin: 0; }
details.fachteil-klapper[open] > summary > h2 { margin-bottom: var(--luft-kopf); }
details.fachteil-klapper > summary::after { margin-top: 0; align-self: center; }

.fragen-zwei {
  display: grid;
  row-gap: var(--s5);
}

.fragen-zwei > * { max-width: var(--mass); }
.fragen-zwei > .fragen-kopf > h2 { margin-top: 0; }
main > section > .fragen-zwei:not(:first-child) { margin-top: var(--s7); }

@media (min-width: 62rem) {
  .fragen-zwei {
    grid-template-columns: minmax(0, 17rem) minmax(0, var(--mass));

    grid-template-rows: min-content 1fr;
    column-gap: var(--s7);
    row-gap: 0;
    align-items: start;
  }
  .fragen-zwei > .fragen-kopf  { grid-column: 1; grid-row: 1; }
  .fragen-zwei > .fragen-liste { grid-column: 2; grid-row: 1 / span 2; }
  .fragen-zwei > .weiterfuehrend { grid-column: 1; grid-row: 2; }
}

@media (min-width: 76rem) {
  @supports not (animation-timeline: view()) {
    .methodikseite .fragen-zwei { display: block; }
    .methodikseite .fragen-zwei > .fragen-kopf { margin-bottom: var(--s4); }
  }
}

main > section:has(> .fragen-zwei) { container-type: inline-size; container-name: blatt; }

@media (min-width: 62rem) {
@container blatt (width < 54em) {
  .fragen-zwei {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    column-gap: 0;
    row-gap: var(--s5);
  }
  .fragen-zwei > .fragen-kopf,
  .fragen-zwei > .fragen-liste,
  .fragen-zwei > .weiterfuehrend { grid-column: auto; grid-row: auto; }
}
}

@media print {
  .fragen-zwei { display: block; }
  .fragen-zwei > .fragen-kopf { margin-bottom: var(--s4); }
}

.ankerlink {
  display: inline-block;
  width: 0;
  overflow: visible;
  text-indent: .3em;
  font-size: .5em;              
  font-family: var(--sans);
  font-style: normal;           
  font-weight: 400;
  vertical-align: .35em;
  color: var(--linie);
  text-decoration: none;
  opacity: 0;
}
:is(h2, h3):hover > .ankerlink { opacity: 1; }
.ankerlink:hover { color: var(--lavendel); }

@media (hover: none) {
  .ankerlink { opacity: .5; }
}
@media print { .ankerlink { display: none; } }



.glyphen { position: absolute; width: 0; height: 0; }


.gesendet { display: none; }

.rueckmeldung-teil#gesendet:target .gesendet { display: block; }
.rueckmeldung-teil#gesendet:target .vorspann,
.rueckmeldung-teil#gesendet:target .stufe,
.rueckmeldung-teil#gesendet:target .leiste-weg { display: none; }

.rueckmeldung-teil#gesendet:target .kopf-nutzen { display: none; }

.rueckmeldung-teil#gesendet:target .leiste-punkt {
  border-color: var(--lavendel);    

  background: none;
  color: var(--text-leise);         
}
.rueckmeldung-teil#gesendet:target .leiste-wort {
  color: var(--text-leise);         
  font-weight: 400;
}

.rueckmeldung-teil#gesendet:target .leiste-ziel span {
  background: var(--lavendel);      
  border-color: var(--lavendel);    
  color: var(--grund);              
  animation: ziel-fuellen 380ms var(--federn-zurueck) both;
}
.ziel-haken { display: none; }
.rueckmeldung-teil#gesendet:target .ziel-flieger { display: none; }


.rueckmeldung-teil#gesendet:target .ziel-haken {
  display: block;

  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: haken-zeichnen 420ms var(--federn) 240ms backwards;
}
@keyframes ziel-fuellen {
  from {
    background: none;
    border-color: var(--linie);     
    color: var(--text-leise);       
    transform: scale(.82);
  }
}
@keyframes haken-zeichnen { from { stroke-dashoffset: 1; } }

.gesendet-marke span {
  display: inline-block;
  clip-path: inset(-.25em -.3em -.25em -.05em);
}
.rueckmeldung-teil#gesendet:target .gesendet-marke span {
  animation: marke-tippen 900ms steps(11) 620ms backwards;
}
@keyframes marke-tippen { from { clip-path: inset(-.25em 100% -.25em -.05em); } }

.rueckmeldung-teil#gesendet:target .gesendet p + p {
  animation: satz-nach 420ms var(--federn) 1.4s backwards;
}
@keyframes satz-nach { from { opacity: 0; transform: translateY(6px); } }

.gesendet-marke {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-zitat);
  line-height: var(--lh-eng);
  color: var(--text-hero);
  margin-bottom: var(--s4);
}

.rueckmeldung {
  max-width: var(--mass);
  margin: 2.5rem 0;
}

.gesendet { margin: 0; }

.rueckmeldung-kopf { max-width: var(--mass); }

.stufe { margin: 0; }

@media (min-width: 62rem) {
@container blatt (width >= 46em) {
  .rueckmeldung {
    max-width: none;
    display: grid;

    grid-template-columns: 19rem minmax(0, 1fr);

    grid-template-rows: repeat(6, auto);
    column-gap: 3rem;
    row-gap: 0;
    
  }

  .rueckmeldung-kopf {
    grid-column: 1;
    grid-row: 1 / -1;
    display: block;
    max-width: none;
    border-right: 1px solid var(--haarlinie);   
    border-image: var(--trenner-quer) 1;
    padding-right: 3rem;
  }

  .rueckmeldung-kopf > .kopf-nutzen { display: block; margin-top: var(--s5); }

  .rueckmeldung .stufe,
  .rueckmeldung .gesendet,
  .rueckmeldung .leiste-marke,
  .rueckmeldung .leiste { grid-column: 2; }

  .rueckmeldung .leiste-marke,
  .rueckmeldung .leiste { margin-top: 0; }

  .rueckmeldung .leiste-wort { display: inline; }

  .rueckmeldung .leiste li + li::before { width: var(--s5); }

  .rueckmeldung .stufe-marke:is(.schritt-frage, .frei) {
    margin-bottom: var(--s3);
  }

  .rueckmeldung .wahl-feld { grid-template-columns: 1fr 1fr; }

  .rueckmeldung .ort-leiste { grid-template-columns: repeat(4, 1fr); }

  .rueckmeldung .ort-leiste label:last-child { grid-column: span 2; }

  .rueckmeldung .stufe-drei .wort textarea { min-height: 7rem; }

  .rueckmeldung .absenden {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--s4);
  }

  .rueckmeldung .abschicken { width: auto; margin-top: 0; }
  .rueckmeldung .absenden .zusage { margin: 0; }
}
}

.stufe-marke {
  font-size: var(--fs-marke);
  letter-spacing: var(--ls-marke);
  text-transform: uppercase;
  font-weight: 600;

  line-height: 1.6;
  color: var(--text-lila);         
  padding: 0;
  margin: 0 0 var(--luft-eng);
}



.leiste-marke { margin-top: var(--s6); }
.leiste-marke + .leiste { margin-top: 0; }

@media (max-width: 61.99rem) {
  .rueckmeldung { display: flex; flex-direction: column; }
  .rueckmeldung > .rueckmeldung-kopf { order: 9; margin-top: var(--s6); }
  .rueckmeldung > .leiste-marke { margin-top: 0; }
}

.leiste {
  display: flex;
  align-items: center;

  gap: var(--s2);
  flex-wrap: wrap;

  margin-top: var(--s6);

  margin-bottom: var(--s3);
}
.leiste ol {
  display: flex;
  align-items: center;
  line-height: var(--lh-glyph);
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.leiste li + li::before {
  content: "";
  display: inline-block;

  width: var(--s3);
  height: 1px;
  margin-right: var(--s2);
  vertical-align: middle;
  background: var(--linie);         
}

.leiste li { display: inline-flex; align-items: center; gap: var(--s2); margin-bottom: 0; }
.leiste-punkt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  border: 1px solid var(--linie);   
  border-radius: 50%;
  font-size: var(--fs-neben);
  font-weight: 700;
  line-height: var(--lh-glyph);
  font-variant-numeric: tabular-nums;
  color: var(--text-leise);         

  transition: border-color .18s var(--federn), background .18s var(--federn), color .18s var(--federn);
}

.leiste-wort {
  display: none;
  font-size: var(--fs-neben);
  line-height: var(--lh-glyph);
  color: var(--text-leise);         
  white-space: nowrap;
}

.leiste-ziel span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;                  
  height: 1.625rem;
  border: 1px solid var(--linie);   
  border-radius: 50%;
  color: var(--text-leise);         
}

.leiste-ziel svg { width: 17px; height: 17px; }

.leiste-stand span { display: none; }



.rueckmeldung:has(input[name="art"]:checked:not([value=""]))   .leiste li:nth-child(1) .leiste-punkt,
.rueckmeldung:has(input[name="wo"]:checked:not([value=""]))    .leiste li:nth-child(2) .leiste-punkt,
.rueckmeldung:has(input[name="worum"]:checked:not([value=""])) .leiste li:nth-child(3) .leiste-punkt {
  border-color: var(--lavendel);    
}


.stufe-eins, .stufe-zwei, .stufe-drei { display: none; }
.rueckmeldung:not(:has(input[name="art"]:checked:not([value=""]))) .stufe-eins,
.rueckmeldung:has(input[name="art"]:checked:not([value=""])):not(:has(input[name="wo"]:checked:not([value=""]))) .stufe-zwei,
.rueckmeldung:has(input[name="art"]:checked:not([value=""])):has(input[name="wo"]:checked:not([value=""])) .stufe-drei {
  display: block;
}

.rueckmeldung:not(:has(input[name="art"]:checked:not([value=""]))) .leiste li:nth-child(1) .leiste-punkt,
.rueckmeldung:has(input[name="art"]:checked:not([value=""])):not(:has(input[name="wo"]:checked:not([value=""]))) .leiste li:nth-child(2) .leiste-punkt,
.rueckmeldung:has(input[name="art"]:checked:not([value=""])):has(input[name="wo"]:checked:not([value=""])) .leiste li:nth-child(3) .leiste-punkt {
  background: var(--lavendel);      
  border-color: var(--lavendel);
  color: var(--auf-lavendel);       
}

.rueckmeldung:not(:has(input[name="art"]:checked:not([value=""]))) .leiste li:nth-child(1) .leiste-wort,
.rueckmeldung:has(input[name="art"]:checked:not([value=""])):not(:has(input[name="wo"]:checked:not([value=""]))) .leiste li:nth-child(2) .leiste-wort,
.rueckmeldung:has(input[name="art"]:checked:not([value=""])):has(input[name="wo"]:checked:not([value=""])) .leiste li:nth-child(3) .leiste-wort {
  color: var(--text);               
  font-weight: 600;
}


.rueckmeldung:not(:has(input[name="art"]:checked:not([value=""]))) .stand-1,
.rueckmeldung:has(input[name="art"]:checked:not([value=""])):not(:has(input[name="wo"]:checked:not([value=""]))) .stand-2,
.rueckmeldung:has(input[name="art"]:checked:not([value=""])):has(input[name="wo"]:checked:not([value=""])) .stand-3 {
  display: inline;
}

@container blatt (width < 12em) {
  .leiste li + li::before { width: var(--s2); }
  .leiste-punkt {
    width: auto;
    height: auto;
    min-width: 1em;
    border: 0;
    border-radius: 0;
  }

  .leiste-ziel span { width: auto; height: auto; border: 0; }
  
  .rueckmeldung:not(:has(input[name="art"]:checked:not([value=""]))) .leiste li:nth-child(1) .leiste-punkt,
  .rueckmeldung:has(input[name="art"]:checked:not([value=""])):not(:has(input[name="wo"]:checked:not([value=""]))) .leiste li:nth-child(2) .leiste-punkt,
  .rueckmeldung:has(input[name="art"]:checked:not([value=""])):has(input[name="wo"]:checked:not([value=""]))    .leiste li:nth-child(3) .leiste-punkt {
    background: transparent;
    color: var(--lavendel);         
  }

  .rueckmeldung:has(input[name="art"]:checked:not([value=""]))   .leiste li:nth-child(1) .leiste-punkt,
  .rueckmeldung:has(input[name="wo"]:checked:not([value=""]))    .leiste li:nth-child(2) .leiste-punkt,
  .rueckmeldung:has(input[name="worum"]:checked:not([value=""])) .leiste li:nth-child(3) .leiste-punkt {
    color: var(--text-hero);        
  }

  .rueckmeldung-teil#gesendet:target .leiste-ziel span {
    background: none;
    color: var(--lavendel);         
  }
}



.leiste-weg {
  display: grid;
  margin: 0;
}
@container blatt (width >= 27em) {
  .leiste-weg { margin-left: var(--s5); }
}
.leiste-weg > * { grid-area: 1 / 1; visibility: hidden; }
.rueckmeldung:has(input[name="art"]:checked:not([value=""])):not(:has(input[name="wo"]:checked:not([value=""]))) .zurueck-eins,
.rueckmeldung:has(input[name="art"]:checked:not([value=""])):has(input[name="wo"]:checked:not([value=""])) .zurueck-zwei {
  visibility: visible;
}


.zurueck {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: var(--tap);
  font-size: var(--fs-text);
  font-weight: 500;
  color: var(--lavendel);           
  text-decoration: none;
  cursor: pointer;
}
.zurueck input { position: absolute; opacity: 0; pointer-events: none; }
.zurueck:hover { color: var(--text-hero); }
.zurueck:has(input:focus-visible) { outline: 2px solid var(--lavendel); outline-offset: 2px; }
.zurueck svg { flex: none; width: calc(20px * 17.6 / 22); height: 20px; }

.zurueck svg { transform: scaleX(-1); }

.stufe-marke:is(.schritt-frage, .frei) {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-text);
  line-height: 1.4;
  color: var(--text);              
}

.rueckmeldung .zusage {
  margin: 1.25rem 0 0;
  font-size: var(--fs-neben);
  color: var(--text-leise);        
  line-height: var(--lh-lese);
}

.zusagen { list-style: none; padding: 0; margin: 0; }
.zusagen li {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);                  
  margin-bottom: var(--luft-eng);
  font-size: var(--fs-text);
  line-height: var(--lh-lese);
}

.zusagen svg { flex: none; width: 18px; height: 18px; margin-top: .15em; color: var(--lavendel); }


.kopf-nutzen { display: none; }
.nutzen { list-style: none; padding: 0; margin: 0; }
.nutzen li {
  margin-bottom: var(--luft-eng);
  font-size: var(--fs-neben);

  line-height: var(--lh-lese);
  color: var(--text-leise);        
}

.wahl { border: 0; padding: 0; margin: 0; }

.wahl-feld {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .5rem;
}

@media (min-width: 32rem) and (max-width: 61.99rem) {
  @container blatt (width >= 27em) {
    .wahl-feld { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  }
}

.wahl label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: var(--tap);          
  padding: var(--s1) .875rem;
  border: 1px solid var(--linie);  
  border-radius: var(--r-klein);   
  cursor: pointer;
  transition: border-color .18s var(--federn), background .18s var(--federn), color .18s var(--federn), transform var(--druck-zurueck) var(--federn-zurueck);
}
.wahl label:hover { border-color: var(--text-leise); color: var(--text); }
.wahl input { position: absolute; opacity: 0; pointer-events: none; }
.wahl svg { flex: none; width: 20px; height: 20px; color: var(--text-leise); }
.wahl input:checked ~ svg { color: var(--lavendel); }

.wahl label:has(input:checked) {
  background: var(--chip);         
  border-color: var(--lavendel);   
  color: var(--text-hero);
}

.wahl label:has(input:focus-visible) { outline: 2px solid var(--lavendel); outline-offset: 2px; }

.ort { border: 0; padding: 0; margin: 0; }

.ort-leiste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(7.5rem, 100%), 1fr));
  grid-auto-rows: 1fr;
  gap: .5rem;
}

.ort-leiste label,
.worum-leiste label {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);           
  padding: var(--s1) .875rem;
  font-size: var(--fs-text);
  color: var(--text);               
  background: transparent;
  border: 1px solid var(--linie);   
  border-radius: var(--r-klein);    
  cursor: pointer;
  transition: border-color .18s var(--federn), background .18s var(--federn), color .18s var(--federn), transform var(--druck-zurueck) var(--federn-zurueck);
}

.ort-leiste input,
.worum-leiste input { position: absolute; opacity: 0; pointer-events: none; }
.ort-leiste label:hover,
.worum-leiste label:hover { border-color: var(--text-leise); color: var(--text); }
.ort-leiste label:has(input:checked),
.worum-leiste label:has(input:checked) {
  background: var(--chip);   
  border-color: var(--lavendel);
  color: var(--text-hero);
}
.ort-leiste label:has(input:focus-visible),
.worum-leiste label:has(input:focus-visible) { outline: 2px solid var(--lavendel); outline-offset: 2px; }


.worum { border: 0; padding: 0; margin: 0; }

.worum-leiste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  grid-auto-rows: 1fr;
  gap: var(--s2);
}

.worum-leiste label:last-child { grid-column: 1 / -1; }

.worum-leiste label { gap: var(--s2); }
.worum-leiste svg { flex: none; width: 20px; height: 20px; color: var(--text-leise); }
.worum-leiste input:checked ~ svg { color: var(--lavendel); }   

.wort { margin: 1.25rem 0; }

.wort label {
  display: block;
  margin-bottom: var(--luft-eng);
}
.wort textarea {
  width: 100%;
  min-height: 4.5rem;
  padding: .75rem;
  font: inherit;
  font-size: var(--fs-text);
  color: var(--text);
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: var(--r-klein);
  resize: vertical;
}
.wort textarea:focus-visible { outline: 2px solid var(--lavendel); outline-offset: 1px; border-color: var(--lavendel); }

.abschicken {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  width: 100%;

  margin-top: var(--s3);

  min-height: 50px;
  padding: .75rem 1.75rem;
  font: inherit;
  font-size: var(--fs-text);
  font-weight: 800;                
  color: var(--auf-lavendel);      
  background: var(--lavendel);     
  border: 0;
  border-radius: var(--r-mittel);  
  cursor: pointer;
}
.abschicken svg { flex: none; width: 20px; height: 20px; }


.abschicken:focus-visible {
  outline: 2px solid var(--text-hero);
  outline-offset: 2px;
}

.rueckmeldung:not(:has(input[name="worum"]:checked)) .abschicken {
  opacity: .45;
  pointer-events: none;
}

@container blatt (width < 12em) {
  .wahl label,
  .ort-leiste label,
  .worum-leiste label {
    min-width: 0;
    flex-wrap: wrap;
    row-gap: var(--s1);
    font-size: var(--fs-neben);
    padding-inline: var(--s2);
    overflow-wrap: break-word;
  }
  .abschicken {
    flex-wrap: wrap;
    font-size: var(--fs-neben);

    gap: var(--s1) var(--s2);
    padding-inline: var(--s3);
    overflow-wrap: break-word;
  }
}

.honigtopf {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}



main.kontaktseite { container-type: inline-size; container-name: blatt; }



.weiche {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s4) var(--s6);
  margin: var(--s6) 0 var(--s4);
}

@media (min-width: 48rem) {
  @container blatt (width >= 42em) {
    .weiche { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  }
}

.weg {
  display: flex;
  flex-direction: column;
  position: relative;
  border-top: 1px solid var(--haarlinie);
  border-image: var(--trenner) 1;
  padding: var(--s4) 0 0 2.9rem;
}
.weg-marke {
  display: flex; align-items: center; gap: .5rem;
  font-size: var(--fs-marke); font-weight: 600;
  letter-spacing: var(--ls-marke); text-transform: uppercase;
  line-height: var(--lh-eng);
  color: var(--text-lila);
  margin: 0 0 var(--luft-eng);
}

.weg-marke svg {
  position: absolute; left: 0; top: var(--s4);
  width: 26px; height: 26px; color: var(--lavendel); flex: none;
}

@container blatt (width < 12em) {
  .weg { padding-left: 0; }
  .weg-marke { flex-wrap: wrap; row-gap: var(--s1); }
  .weg-marke svg { position: static; }
}
.weg h2 { margin: 0 0 var(--luft-kopf); }

.weg-adresse { margin: 0 0 var(--luft-absatz); font-size: var(--fs-betont); font-weight: 700; overflow-wrap: break-word; }

.weg-adresse a { padding-block: var(--s2); }
.weg-satz { margin: 0; color: var(--text-leise); }

.weg-sprung { margin: var(--s3) 0 0; }
.weg-satz + .weg-sprung { margin-top: auto; padding-top: var(--s3); }

@media (min-width: 48rem) {
  @container blatt (width >= 42em) {
    .weg { border-bottom: 1px solid var(--haarlinie); padding-bottom: var(--s4); }
    .weg > :last-child { margin-top: auto; padding-top: var(--s3); }
  }
}

.weg-sprung a {
  display: inline-flex; align-items: center; gap: var(--s1);
  flex-wrap: wrap;
  overflow-wrap: break-word;
  min-height: var(--tap);
  font-weight: 700; color: var(--text-lila); text-decoration: none;
}
.weg-sprung a:hover { text-decoration: underline; }
.weg-sprung svg { width: calc(18px * 17.6 / 22); height: 18px; }



.paar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s6);
}
@media (min-width: 48rem) {
  @container blatt (width >= 42em) {
    .paar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  }
}

.paar > section {
  position: relative;
  padding: 0 0 0 var(--s5);
}
.paar > section > :where(h2, p) { max-width: var(--mass); }
.paar > section > h2 { margin-top: 0; }


.paar-marke {
  position: relative;
  font-family: var(--sans);
  font-size: var(--fs-marke);
  font-weight: 600;
  font-style: normal;
  letter-spacing: var(--ls-marke);
  line-height: var(--lh-eng);
  text-transform: uppercase;
  color: var(--text-lila);
  margin: 0 0 var(--luft-eng);
}
.paar-marke svg {
  position: absolute; left: calc(-1 * var(--s5)); top: 0;
  width: 22px; height: 22px; color: var(--lavendel);
}

.paar > section > p { font-size: var(--fs-text); line-height: var(--lh-lese); margin: var(--luft-absatz) 0 0; }
.paar > section > p:first-of-type { margin-top: 0; }



.kontaktseite .teil > h2.oben { margin-top: 0; }

.kontaktseite .hinweis { color: var(--text-leise); }
.kontaktseite .hinweis strong { color: var(--text); }
.kontaktseite .abgrenzung.hinweis {
  border-left: 0;
  padding-left: 0;
  max-width: var(--mass);
  margin: var(--s5) 0 var(--luft-absatz);
}

@media (max-width: 47.99rem) {
  .weiche { margin: var(--s4) 0 var(--s3); row-gap: var(--s3); }

  .weg { padding-top: var(--s3); }
  .weg-marke svg { top: var(--s3); }

  .weg-marke { margin-bottom: var(--luft-eng); }
  .weg h2 { margin-bottom: var(--luft-kopf); }
  .weg-adresse { margin-bottom: var(--luft-absatz); }

  .weg-satz + .weg-sprung { padding-top: 0; }

  .kontaktseite .abgrenzung.hinweis { margin: var(--s3) 0 var(--luft-absatz); }
}



figure { margin: 2rem 0; }
figure svg, figure img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
figcaption { font-size: var(--fs-neben); color: var(--label); margin-top: .75rem; }



@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .rueckmeldung-teil :is(.leiste-ziel span, .ziel-haken, .gesendet-marke span),
  .rueckmeldung-teil .gesendet p + p { animation-delay: .01ms !important; }
}






.alltag { margin-top: var(--s4); }

.alltag input[type="radio"],
.alltag input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.alltag-vorspann {
  max-width: 34rem;
  margin: 0 0 var(--s5);
  color: var(--text-leise);
}

.alltag-leiste {
  position: sticky;
  top: calc(var(--tap) + 2 * var(--s3));
  z-index: 5;

  --leisten-grund: var(--versenkt);   
  background: var(--leisten-grund);
  border: 0;

  padding: var(--s2) 0 0;
  margin: 0 0 var(--s5);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   
  gap: var(--s1);
  border-bottom: 1px solid var(--haarlinie);
  border-image: var(--trenner) 1;
}

.alltag-leiste::after {
  content: "";
  position: absolute;
  left: 0; right: 0;

  top: calc(100% + 1px);
  height: var(--s2);

  background: linear-gradient(to bottom, var(--leisten-grund), transparent);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .alltag-leiste { transition: top 220ms var(--federn); }

  @container scroll-state(scrolled: bottom) {
    html:not(:has(header.kopf:focus-within)):not(:has(:is(.wege:popover-open))) .alltag-leiste { top: 0; }
  }
}

@keyframes alltag-leiste-loest-sich {
  from { opacity: 1; visibility: visible; }
  to   { opacity: 0; visibility: hidden; }
}
.alltag { timeline-scope: --alltag-regler; }

.alltag-flanke-rechts { view-timeline: --alltag-regler block; view-timeline-inset: 0; }
.alltag-leiste {
  animation: alltag-leiste-loest-sich linear both;
  animation-timeline: --alltag-regler;

  animation-range: exit calc(-1 * (var(--tap) + var(--s2) + var(--s4))) exit 0%;
}

.alltag-leiste label {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-height: var(--tap);
  padding: 0;
  font-size: var(--fs-neben);
  font-weight: 600;
  color: var(--text-leise);
  cursor: pointer;
  position: relative;
  border-radius: var(--r-klein) var(--r-klein) 0 0;
}
.alltag-leiste label::after {
  content: "";
  position: absolute;
  left: var(--s3); right: var(--s3); bottom: -1px;
  height: 2px;
  background: transparent;
}
.alltag-leiste label:hover { color: var(--text); }

.alltag-leiste .alltag-zeichen,
.schiene-zeichen {
  width: 20px;
  height: 20px;
  flex: none;
  margin-right: .5em;
  fill: currentColor;
}

.alltag-leiste label:has(input:checked) {
  background: var(--chip);   
}
.alltag-leiste label:has(input:checked)::after { background: var(--lavendel); }
.alltag-leiste label:has(input:checked) .alltag-zeichen { fill: var(--lavendel); }
.alltag-leiste label:has(input:checked) { color: var(--text-hero); }
.alltag-leiste label:has(input:focus-visible) {
  outline: 2px solid var(--lavendel);
  outline-offset: 2px;
}

@media (min-width: 32rem) {
  .alltag-leiste label { flex: 0 1 auto; padding: 0 var(--s3); }
}

.alltag-rubrik {
  min-width: 0;
  display: none;
}
.alltag:has(#a1:checked) .alltag-rubrik-1,
.alltag:has(#a2:checked) .alltag-rubrik-2,
.alltag:has(#a3:checked) .alltag-rubrik-3 { display: block; }



.alltag-buehne { display: grid; gap: var(--s4); }
.alltag-flanke { display: grid; }

.alltag-buehne > .alltag-geraet-spalte { margin-bottom: calc(var(--s3) - var(--s4) - var(--s2)); }



.alltag-buehne { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 48rem) {
  @container blatt (width >= 46em) {
    .alltag-buehne {
      grid-template-columns: minmax(0, 1fr) auto;

      grid-template-areas: "denken geraet" "regeln geraet";
      column-gap: var(--s5);
      row-gap: var(--s5);
      align-items: start;
    }
    .alltag-buehne > .alltag-flanke-links  { grid-area: denken; }
    .alltag-buehne > .alltag-flanke-rechts { grid-area: regeln; }
    .alltag-buehne > .alltag-geraet-spalte { grid-area: geraet; align-self: start; margin-bottom: 0; }

    .alltag-regler { padding-top: var(--s5); }

  }
}

@media (min-width: 60rem) {
 @container blatt (width >= 54em) {
  .alltag-buehne {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);

    grid-template-areas: none;
    align-items: stretch;

    column-gap: var(--s4);

    row-gap: 0;
  }

  .alltag-leiste { position: static; background: none; padding-top: 0; animation: none; }

  .alltag-leiste::after { content: none; }
  .alltag-flanke > .alltag-gedanke,
  .alltag-flanke > .alltag-regler { padding-top: var(--s5); }
  .alltag-buehne > .alltag-flanke-links  { order: 1; grid-area: auto; }
  .alltag-buehne > .alltag-geraet-spalte { order: 2; grid-area: auto; align-self: auto; margin-bottom: 0; }
  .alltag-buehne > .alltag-flanke-rechts { order: 3; grid-area: auto; }
  .alltag-flanke > .alltag-gedanke {
    max-width: 22rem;
    justify-self: end;
    text-align: right;

    padding-right: var(--s4);
  }
  .alltag-flanke > .alltag-gedanke p { max-width: none; }

  .alltag-flanke > .alltag-regler {
    max-width: 22rem;
    justify-self: start;
    border: 0;

    padding: var(--s5) 0 0 var(--s4);
  }

  .alltag-rubrik {
    display: block;
    grid-area: 1 / 1;
    visibility: hidden;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .28s var(--federn), transform .28s var(--federn), visibility 0s .28s;
  }
  .alltag:has(#a1:checked) .alltag-rubrik-1,
  .alltag:has(#a2:checked) .alltag-rubrik-2,
  .alltag:has(#a3:checked) .alltag-rubrik-3 {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .28s var(--federn), transform .28s var(--federn), visibility 0s 0s;
  }

  @media (prefers-reduced-motion: reduce) {
    .alltag-rubrik,
    .alltag:has(#a1:checked) .alltag-rubrik-1,
    .alltag:has(#a2:checked) .alltag-rubrik-2,
    .alltag:has(#a3:checked) .alltag-rubrik-3 { transition: none; transform: none; }
  }
 }
}


.alltag-gedanke h3 {
  margin: 0 0 var(--luft-kopf);
}
.alltag-gedanke p {
  margin: 0 0 var(--luft-absatz);
  max-width: 26rem;
  color: var(--text);
}

.alltag-gedanke .alltag-fall {
  line-height: var(--lh-lese);
  color: var(--text-hero);
  margin-bottom: var(--luft-absatz);
}
.alltag-gedanke p:last-child { margin-bottom: 0; }
.alltag-gedanke .alltag-leise { color: var(--text-leise); font-size: var(--fs-neben); }



.alltag-regler {
  border-top: 1px solid var(--haarlinie);
  border-image: var(--trenner) 1;
  padding: var(--s4) 0 0;
  max-width: 22rem;
}

.alltag-regler legend {
  font-size: var(--fs-marke);
  letter-spacing: var(--ls-marke);
  text-transform: uppercase;
  font-weight: 600;
  line-height: var(--lh-eng);
  color: var(--label);
  padding: 0;
  margin: 0 0 var(--s2);
}

.alltag-regler fieldset { border: 0; padding: 0; margin: 0 0 var(--s4); min-inline-size: 0; }
.alltag-regler fieldset:last-child { margin-bottom: 0; }

.alltag:has(#a3:checked) .alltag-rubrik-3.alltag-regler { display: block; }
.alltag-rubrik-3.alltag-regler > fieldset { margin-bottom: var(--s4); }

@media (min-width: 48rem) {
  @container blatt (width >= 46em) {
    .alltag:has(#a3:checked) .alltag-rubrik-3.alltag-regler { display: block; }
    .alltag-rubrik-3.alltag-regler > fieldset { margin-bottom: var(--s4); }

    .alltag-rubrik-3.alltag-regler > fieldset:last-of-type { margin-bottom: 0; }
  }
}
.alltag-schalter {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: var(--tap);
  cursor: pointer;
  color: var(--text);
  font-size: var(--fs-neben);

  position: relative;
}
.alltag-schalter input { position: absolute; opacity: 0; pointer-events: none; }

.alltag-spur {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.alltag-schalter-wort { overflow-wrap: break-word; }

.alltag-schalter > .alltag-schalter-wort { min-width: 0; }

.alltag-regler legend { overflow-wrap: break-word; }

.alltag-schalter input:checked ~ .alltag-schalter-wort { color: var(--text-hero); }


.alltag-begriff {
  font-family: var(--serif);
  font-size: var(--fs-zitat);
  font-weight: 500;
  line-height: var(--lh-eng);
}


.alltag-ring {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border: 1.5px solid var(--linie);
  border-radius: 50%;
  background: var(--grund);
  position: relative;
}
.alltag-ring::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--lavendel);
  opacity: 0;
}
.alltag-schalter input:checked ~ .alltag-ring { border-color: var(--lavendel); }
.alltag-schalter input:checked ~ .alltag-ring::after { opacity: 1; }
.alltag-schalter input:focus-visible ~ .alltag-ring {
  outline: 2px solid var(--lavendel);
  outline-offset: 2px;
}


.alltag-ring.phase           { border-color: color-mix(in srgb, var(--ph) 55%, transparent); }
.alltag-ring.phase.periode   { --ph: var(--rose); }
.alltag-ring.phase.fruchtbar { --ph: var(--lavendel); }
.alltag-ring.phase.eisprung  { --ph: var(--gold); }
.alltag-schalter input:checked ~ .alltag-ring.phase { border-color: var(--ph); }
.alltag-schalter input:checked ~ .alltag-ring.phase::after { background: var(--ph); }

.alltag-ring:has(.ring-zeichen)::after { content: none; }
.ring-zeichen { position: absolute; inset: 2px; fill: var(--linie); }
.alltag-schalter input:checked ~ .alltag-ring .ring-zeichen { fill: var(--lavendel); }


.alltag-rubrik-1 .alltag-schalter { position: relative; }
.alltag-rubrik-1 .alltag-schalter::before {
  content: "";
  position: absolute;
  left: calc(22px / 2);
  top: 0;
  bottom: calc(-1 * var(--s1));
  width: 1px;
  background: var(--haarlinie);
}
.alltag-rubrik-1 .alltag-schalter:first-child::before { top: 50%; }
.alltag-rubrik-1 .alltag-schalter:last-child::before { bottom: 50%; }


.alltag-kippe {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: var(--tap);
  cursor: pointer;
  color: var(--text);
  font-size: var(--fs-neben);
  position: relative;
}
.alltag-kippe input { position: absolute; opacity: 0; pointer-events: none; }
.alltag-gleis {
  flex: 0 0 auto;
  width: 42px; height: 24px;
  border: 1.5px solid var(--linie);
  border-radius: var(--r-feld);   
  background: var(--grund);
  position: relative;
}
.alltag-gleis::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--text-leise);
}
.alltag-kippe input:checked ~ .alltag-gleis { border-color: var(--lavendel); background: var(--lavendel); }
.alltag-kippe input:checked ~ .alltag-gleis::after { left: 21px; background: var(--auf-lavendel); }
.alltag-kippe input:checked ~ .alltag-schalter-wort { color: var(--text-hero); }
.alltag-kippe input:focus-visible ~ .alltag-gleis {
  outline: 2px solid var(--lavendel);
  outline-offset: 2px;
}

.alltag-spur:has(.alltag-kippe) .alltag-ring { margin-right: calc(var(--s2) * 2); }



.alltag-geraet-spalte { justify-self: center; max-width: 100%; }

.alltag-geraet-spalte .geraet {
  --bedienraum: 474px;

  width: max(200px, min(348px, calc((100dvh - var(--bedienraum)) / 1.33)));
  max-width: 100%;
}

@media (min-width: 48rem) {
  @container blatt (width >= 46em) {
    .alltag-geraet-spalte .geraet { --bedienraum: 145px; }
  }
}

.alltag-geraet-spalte .geraet {
  padding-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;

  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--s5)), transparent);
          mask-image: linear-gradient(180deg, #000 calc(100% - var(--s5)), transparent);
}

.alltag-geraet-spalte .geraet > :is(img, div) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}



.alltag-geraet-spalte .geraet::after { content: none; }

.geraet > img.alltag-bild { display: none; border-radius: var(--schirm-bild); }

.alltag:has(#a1:checked):has(#e1:checked) .b-e1,
.alltag:has(#a1:checked):has(#e2:checked) .b-e2,
.alltag:has(#a1:checked):has(#e3:checked) .b-e3,
.alltag:has(#a1:checked):has(#e4:checked) .b-e4,
.alltag:has(#a2:checked):has(#p1:checked) .b-p1,
.alltag:has(#a2:checked):has(#p2:checked) .b-p2,
.alltag:has(#a2:checked):has(#p3:checked) .b-p3,
.alltag:has(#a2:checked):has(#p4:checked) .b-p4,
.alltag:has(#a2:checked):has(#p5:checked) .b-p5 { display: block; }

.alltag-startbildschirm {
  aspect-ratio: 402 / 560;   
  padding: var(--s3);
  border-radius: var(--schirm);   
  background: var(--versenkt);   
  display: none;
  flex-direction: column;
  gap: var(--s4);
}
.alltag:has(#a3:checked) .alltag-startbildschirm { display: flex; }


.alltag-sperrschirm {
  position: absolute;
  inset: var(--steg);   
  z-index: 1;
  padding: var(--s3);
  border-radius: var(--schirm);
  background: var(--grund);   
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  opacity: 0;
  visibility: hidden;
}
.alltag:has(#a3:checked) .alltag-sperrschirm { display: flex; }
.alltag:has(#a3:checked):has(#sp:checked) .alltag-sperrschirm {
  opacity: 1;
  visibility: visible;
}

.alltag:has(#a3:checked):has(#sp:checked) .alltag-startbildschirm { visibility: hidden; }


@media (prefers-reduced-motion: no-preference) {
  .alltag-sperrschirm {
    translate: 0 -3%;
    transition: opacity var(--druck-zurueck) var(--federn),
                translate var(--druck-zurueck) var(--federn),
                visibility 0s var(--druck-zurueck);
  }
  .alltag:has(#sp:checked) .alltag-sperrschirm {
    translate: none;
    transition: opacity .28s var(--federn),
                translate .28s var(--federn),
                visibility 0s 0s;
  }
  
  .alltag-startbildschirm { transition: visibility 0s 0s; }
  .alltag:has(#sp:checked) .alltag-startbildschirm { transition: visibility 0s .28s; }
  .alltag-sperrschirm > * {
    opacity: 0;
    translate: 0 6px;
    transition: opacity 160ms var(--federn), translate 160ms var(--federn);
  }
  .alltag:has(#sp:checked) .alltag-sperrschirm > * {
    opacity: 1;
    translate: none;
    transition-duration: 260ms;
  }
  .alltag-sperrschirm > .alltag-sperr-scheibe { scale: .86; transition-property: opacity, translate, scale; }
  .alltag:has(#sp:checked) .alltag-sperrschirm > .alltag-sperr-scheibe {
    scale: 1;
    transition-property: opacity, translate, scale;
    transition-timing-function: var(--federn-zurueck);
  }
  .alltag:has(#sp:checked) .alltag-sperrschirm > .alltag-sperr-marke  { transition-delay: 90ms; }
  .alltag:has(#sp:checked) .alltag-sperrschirm > .alltag-sperr-titel  { transition-delay: 140ms; }
  .alltag:has(#sp:checked) .alltag-sperrschirm > .alltag-sperr-knopf  { transition-delay: 190ms; }
}

.alltag-sperr-scheibe {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--lavendel) 14%, transparent);
  display: grid;
  place-items: center;
  color: var(--lavendel);
}
.alltag-sperr-scheibe svg { width: 21px; height: 21px; }
.alltag-sperr-marke {
  font-size: var(--fs-marke);
  font-weight: 700;
  color: var(--text-hero);
  letter-spacing: var(--ls-marke);
}
.alltag-sperr-titel {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-zitat);
  color: var(--text-hero);
  text-align: center;
  margin: 0;
}
.alltag-sperr-knopf {
  margin-top: var(--s2);
  padding: var(--s2) var(--s5);
  border-radius: var(--r-mittel);   
  background: var(--lavendel);
  color: var(--auf-lavendel);
  font-size: var(--fs-neben);
  font-weight: 800;
}

.alltag-kachel-bild { display: none; width: 100%; height: auto; }
.k-k1, .k-k2, .k-k3 { width: 50%; }   
.alltag:not(:has(#w2:checked)):has(#s1:checked) .k-g1,
.alltag:not(:has(#w2:checked)):has(#s2:checked) .k-g2,
.alltag:not(:has(#w2:checked)):has(#s3:checked) .k-g3,
.alltag:has(#w2:checked):has(#s1:checked) .k-k1,
.alltag:has(#w2:checked):has(#s2:checked) .k-k2,
.alltag:has(#w2:checked):has(#s3:checked) .k-k3 { display: block; }

.alltag-icons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s3) var(--s2);
  align-content: start;
}
.alltag-icon {
  display: grid;
  justify-items: center;
  gap: var(--s1);        

  font-size: 9px;
  color: var(--text-leise);
}
.alltag-icon-flaeche {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 26%;    
  background: var(--blatt);
  border: 1px solid var(--linie);
  display: grid;
  place-items: center;
  position: relative;
}

.alltag-icon.alltag-takt .alltag-icon-flaeche { background: var(--grund); }
.alltag-marke-kranz { width: 76%; height: 76%; }
.alltag-marke-kranz .w-p { fill: var(--rad-deko); }
.alltag-marke-kranz .w-r { fill: var(--rose); }
.alltag-marke-kranz .w-f { fill: var(--lavendel); }
.alltag-marke-kranz .w-e { fill: var(--gold); }
.alltag-marke-kranz .w-mitte { fill: var(--text-hero); }

@media (max-width: 24rem) {
  .alltag-geraet-spalte .geraet { --steg: 5px; }

  header.kopf:has(.sprache) { column-gap: var(--s2); }
  header.kopf .sprache { padding-inline-start: var(--s2); }
}



.alltag-leiste > legend {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media print {
  details.quellen::details-content { content-visibility: visible; }
  details.quellen > summary::after { display: none; }
}

@media print {
  .alltag-buehne, .alltag-flanke { display: block; }
  .alltag-rubrik {
    grid-area: auto;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .alltag-geraet-spalte .geraet { width: 348px; }
  .alltag .alltag-rubrik.alltag-gedanke { display: block; }
  .alltag-leiste { display: none; }
  .alltag .alltag-flanke-rechts { display: none; }
  .alltag-rubrik + .alltag-rubrik { margin-top: var(--s6); }
}

@media print {
  .schiene,
  .beweis-bild { display: none; }

  :is(.beweis-stand, .beweis-wort) { display: block; }
  :is(.beweis-stand, .beweis-wort) > span {
    display: block;
    visibility: visible;
    opacity: 1;
    transition: none;
  }

  .beweis-zelle,
  .beweis-stand,
  .beweis-mass,
  .beweis .weg-tiefer { text-align: left; }
  .beweis-zelle { margin-top: var(--s4); }

  .recap { display: block; }

  .ohne-raster { display: block; }
  .ohne-raster > li + li { margin-top: var(--s4); }
  .recap-fenster { display: none; }
  .recap-zelle { max-width: none; }
  .recap-zelle + .recap-zelle { margin-top: var(--s4); }
}

@media print {
  :root {
    --grund: #fff; --blatt: #fff; --chip: #fff; --linie: #999;

    --haarlinie-leise: var(--linie); --haarlinie: var(--linie); --haarlinie-stark: var(--linie);

    --trenner: none; --trenner-quer: none;
    --text-hero: #000; --text: #000; --text-leise: #222; --label: #333;
    --lavendel: #000; --rose: #000; --gold: #000; --grau: #000;
    --versenkt: #fff; --gehoben: #fff; --blatt-fuss: #fff;
  }

  .kopf .ort, .fuss nav, .fuss-gruppen, .sprungmarke, .laeden,
  .index,
  .rad-buehne { display: none; }

  .kopf .wege:not(:is(:popover-open)) { display: none; }

  .blatt-karussell { min-height: 0; }
  .blatt-karussell .bericht-karte { position: static; transform: none; }
  .zwei-leser:has(input[value="pdf"]:checked) .blatt-app,
  .zwei-leser:has(input[value="app"]:checked) .blatt-pdf,
  .blatt-bedienung { display: none; }

  .fuss-oben { display: block; margin-bottom: 1rem; }
  body { background: #fff; color: #000; }
  a { color: #000; }
  .huelle { max-width: none; }

  .regel { border: 1px solid #999; }

  .stufe-eins, .stufe-zwei, .stufe-drei { display: block; }
  .leiste { display: none; }

  .rueckmeldung { display: block; }
  .rueckmeldung-kopf { order: 0; margin-top: 0; }
  .rueckmeldung > .leiste-marke { margin-top: var(--s6); }
  h2, h3 { break-after: avoid; }

  .kaufpunkt {
    grid-template-columns: minmax(0, 1fr);
    border-left: 0;
  }
  .abschluss > .abgrenzung {
    border-top: 1px solid #999;
    padding: var(--s5) 0 0;
    margin-top: var(--s5);
  }

  .kurzfassung { break-inside: avoid; }

  main > section, footer.fuss, header.kopf {
    background: #fff;
    margin-inline: 0;
    padding-inline: 0;
    padding-block: 0;
    margin-bottom: 1.5rem;
  }

  header.kopf { position: static; top: auto; translate: none; }

  main { padding-top: 0; }
}

main.brief { container-type: inline-size; container-name: brief; }



@keyframes eintritt-blende {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes eintritt-glied {
  from { opacity: 0; scale: .84; }
  to   { opacity: 1; scale: 1; }
}

@keyframes eintritt-klammer {
  from { scale: 0 1; }
  to   { scale: 1 1; }
}

@keyframes eintritt-zeile {
  from { opacity: 0; translate: 0 10px; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes eintritt-faechern {
  from { --faecher: .62; animation-timing-function: linear; }
  86%  { --faecher: 1.06; animation-timing-function: var(--federn); }
  to   { --faecher: 1; }
}

@keyframes sektion-eintritt {
  from { opacity: .12; }
  to   { opacity: 1; }
}

@keyframes sektion-rueckzug {
  from { opacity: 1; }
  to   { opacity: .12; }
}

@media (prefers-reduced-motion: no-preference) {
  .alltag-geraet-spalte { view-timeline-name: --geraet; }
  .geraet > img.alltag-bild,
  .alltag-startbildschirm {
    animation: eintritt-blende linear both;
    animation-timeline: --geraet;
    animation-range: entry 15vh entry 50vh;
  }

  main > section:has(.beweis-tafel) { view-timeline-name: --beweis; }
  .beweis-kette .beweis-glied {
    animation: eintritt-glied linear both;
    animation-timeline: --beweis;
  }
  .beweis-kette .g-blutung { animation-range: entry 64% entry 88%; }
  .beweis-kette .g-temp    { animation-range: entry 66% entry 92%; }
  .beweis-kette .g-schleim { animation-range: entry 68% entry 96%; }
  .fenster-klammer {
    animation: eintritt-klammer linear both;
    animation-timeline: --beweis;
    animation-range: entry 70% entry 100%;
  }

  .blatt-karussell {
    animation: eintritt-blende linear both, eintritt-faechern linear both;
    animation-timeline: view(), view();
    animation-range: entry 13vh entry 38vh, entry 18vh entry 48vh;
  }

  .ohne-halbsatz {
    display: inline-block;
    animation: eintritt-blende linear both;
    animation-timeline: view();
  }
  .ohne-halbsatz-1 { animation-range: entry 10vh entry 26vh; }
  .ohne-halbsatz-2 { animation-range: entry 46vh entry 62vh; }

  .zusagen li {
    animation: eintritt-zeile linear both;
    animation-timeline: view();
  }
  .zusagen li:nth-child(1) { animation-range: entry 0    entry 24vh; }
  .zusagen li:nth-child(2) { animation-range: entry 4vh  entry 28vh; }
  .zusagen li:nth-child(3) { animation-range: entry 8vh  entry 32vh; }

  main section :is(.label, h1, h2, .vorspann):not(summary > *, .ohne > h2, .leser > .label) {
    animation: eintritt-zeile linear both;
    animation-timeline: view();
    animation-range: entry 0 entry 30vh;
  }

  main > section:has(.recap) { view-timeline-name: --recap; }
  .recap-zelle {
    animation: eintritt-blende linear both;
    animation-timeline: --recap;
  }
  .recap-zelle:nth-child(1) { animation-range: entry 34% entry 62%; }
  .recap-zelle:nth-child(2) { animation-range: entry 38% entry 66%; }
  .recap-zelle:nth-child(3) { animation-range: entry 42% entry 70%; }
  .recap-zelle:nth-child(4) { animation-range: entry 46% entry 74%; }
  .recap-zelle:nth-child(5) { animation-range: entry 50% entry 78%; }
  .recap-zelle:nth-child(6) { animation-range: entry 54% entry 82%; }

  @supports (animation-timeline: view()) {
    main > section:not(:has(> .kapitel-schritt)),
    main.brief > :is(p.label, h1, p.vorspann, div.brief-schluss),
    main > section > .kapitel-schritt {
      animation: sektion-eintritt var(--federn) both,
                 sektion-rueckzug cubic-bezier(.55, .055, .675, .19) forwards;
      animation-timeline: view(block), view(block);
      animation-range: entry 10vh entry 70vh,
                       exit max(0%, 100% - var(--kopf-hoehe) - 30vh)
                       exit calc(100% - var(--kopf-hoehe));
    }

    @media (max-width: 47.99rem) {
      main > section:not(:has(> .kapitel-schritt)),
      main.brief > :is(p.label, h1, p.vorspann, div.brief-schluss),
      main > section > .kapitel-schritt {
        animation-range: entry 0 entry 40vh,
                         exit max(0%, 100% - var(--kopf-hoehe) - 30vh)
                         exit calc(100% - var(--kopf-hoehe));
      }
    }
  }

}

.kaufpunkt-geraet { display: block; }

.abschluss { display: flex; flex-direction: column; }
.kaufpunkt-geraet { order: -1; margin-bottom: var(--s5); }

.kaufpunkt { margin-top: 0; }

@media (min-width: 62rem) {
 @container blatt (width >= 54em) {
  .abschluss {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--s6);
    align-items: start;
  }
  .kaufpunkt               { grid-column: 1; grid-row: 1; margin-top: 0; }
  .abschluss > .abgrenzung { grid-column: 1; grid-row: 2; }
  .kaufpunkt-geraet        { grid-column: 2; grid-row: 1 / span 2; order: 0; margin-bottom: 0; }
  
  .kaufpunkt-geraet          { align-self: stretch; position: relative; width: 300px; }
  .kaufpunkt-geraet .geraet  { position: absolute; inset: 0; width: auto; }
  .kaufpunkt-geraet .kaufpunkt-schirm { aspect-ratio: auto; height: 100%; grid-template-rows: minmax(0, 1fr); }
  .kaufpunkt-geraet .kaufpunkt-bild {
    align-self: stretch;
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }

  .kaufpunkt { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
 }
}

main:is(:has(> .hero), :has(> .abschluss)) { container-type: inline-size; container-name: blatt; }

@media (min-width: 48rem) {
  @container blatt (width < 41em) {
    .kaufpunkt {
      grid-template-columns: minmax(0, 1fr);
      align-items: normal;
      gap: var(--s4);
      margin-top: var(--s5);
    }
    .kaufpunkt-zusage { font-size: var(--fs-h2); max-width: 13em; }
  }
}



.kaufpunkt-geraet .geraet { width: clamp(200px, 40cqi, 300px); max-width: 100%; margin-inline: auto; }
@media (min-width: 62rem) {
  @container blatt (width >= 54em) {
    .kaufpunkt-geraet .geraet { margin-inline: 0; }
  }
}

.kaufpunkt-geraet .geraet {
  padding-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--s6)), transparent);
          mask-image: linear-gradient(180deg, #000 calc(100% - var(--s6)), transparent);
}

.kaufpunkt-schirm {
  display: grid;
  overflow: hidden;
  aspect-ratio: 20 / 31;
  border-radius: var(--schirm) var(--schirm) 0 0;   
}

.kaufpunkt-bild {
  grid-area: 1 / 1;
  align-self: start;
  width: 100%;
  height: auto;
  border-radius: var(--schirm) var(--schirm) 0 0;   
  opacity: 0;
}
.kaufpunkt-bild:first-child { opacity: 1; }

@keyframes kaufpunkt-heim {
  0%             { opacity: 0; }
  2.25%, 40%     { opacity: 1; }
  42.25%, 100%   { opacity: 0; }
}

@keyframes kaufpunkt-wechsel {
  0%             { opacity: 0; }
  2.25%, 20%     { opacity: 1; }
  22.25%, 100%   { opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .kaufpunkt-bild              { animation: kaufpunkt-wechsel 20s linear infinite; }
  .kaufpunkt-bild:first-child  { animation-name: kaufpunkt-heim; }
  .kaufpunkt-bild:nth-child(2) { animation-delay: 8s; }
  .kaufpunkt-bild:nth-child(3) { animation-delay: 12s; }
  .kaufpunkt-bild:nth-child(4) { animation-delay: 16s; }

  .kaufpunkt-schirm { timeline-trigger: --kaufpunkt-rundgang view() entry 25% cover 100%; }
  .kaufpunkt-bild   { animation-trigger: --kaufpunkt-rundgang play reset; }

  .kaufpunkt-geraet .geraet { view-timeline-name: --kaufpunkt-geraet; }
  .kaufpunkt-schirm {
    animation: eintritt-blende linear both;
    animation-timeline: --kaufpunkt-geraet;
    animation-range: entry 15vh entry 50vh;
  }
}

@media print {
  .kaufpunkt-geraet { display: none; }
}

@media print {
  main > :is(section, p.label, h1, p.vorspann, div.brief-schluss),
  main > section > .kapitel-schritt { animation: none; }
}

.lauf {
  height: 0;
  margin-top: 0;
  opacity: 0;
  
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;

  gap: 8px;
}

.lauf > span {
  flex: none;
  inline-size: 6px;
  block-size: var(--r-xs);
  border-radius: var(--r-xs);
  background: var(--linie);
}
.lauf > span:nth-child(1) { --i: 0; }
.lauf > span:nth-child(2) { --i: 1; }
.lauf > span:nth-child(3) { --i: 2; }
.lauf > span:nth-child(4) { --i: 3; }
.lauf > span:nth-child(5) { --i: 4; }
.lauf > span:nth-child(6) { --i: 5; }

.lauf { --n: 1; }
:is(.beweis-achsen, .leser-paar):has(> :nth-child(2)) + .lauf { --n: 2; }
:is(.beweis-achsen, .leser-paar):has(> :nth-child(3)) + .lauf { --n: 3; }
:is(.beweis-achsen, .leser-paar):has(> :nth-child(4)) + .lauf { --n: 4; }
:is(.beweis-achsen, .leser-paar):has(> :nth-child(5)) + .lauf { --n: 5; }
:is(.beweis-achsen, .leser-paar):has(> :nth-child(6)) + .lauf { --n: 6; }

@container blatt (width >= 28em) {
  .beweis-achsen:has(> :nth-child(3)) + .lauf { --n: 2; }
  .beweis-achsen:has(> :nth-child(3)) + .lauf > span:nth-child(3) { display: none; }
}

:is(.beweis-achsen, .leser-paar):not(:has(> :nth-child(3))) + .lauf > span:nth-child(n + 3),
:is(.beweis-achsen, .leser-paar):not(:has(> :nth-child(4))) + .lauf > span:nth-child(n + 4),
:is(.beweis-achsen, .leser-paar):not(:has(> :nth-child(5))) + .lauf > span:nth-child(n + 5),
:is(.beweis-achsen, .leser-paar):not(:has(> :nth-child(6))) + .lauf > span:nth-child(n + 6) { display: none; }

@keyframes punkt-wach {
  from, to { inline-size: 6px;  background: var(--linie); }
  50%      { inline-size: 16px; background: var(--lavendel); }
}

@keyframes lauf-sichtbar {
  from, to { height: var(--r-xs); margin-top: var(--s3); opacity: 1; }
}

@keyframes lauf-sichtbar-gitter { from, to { height: var(--r-xs); margin-top: calc(var(--s3) - var(--s4)); opacity: 1; } }

@supports (timeline-scope: --lauf) {
  .beweis-achsen, .leser-paar {
    scroll-timeline: --lauf inline;
  }

  :is(.beweis-tafel, .zwei-leser):has(.lauf) { timeline-scope: --lauf; }

  .lauf {
    animation: lauf-sichtbar linear both;
    animation-timeline: --lauf;
  }
  .zwei-leser > .lauf          { animation-name: lauf-sichtbar-gitter; }

  .lauf > span {
    animation: punkt-wach linear both;
    animation-timeline: --lauf;
    animation-range: calc((var(--i) - 1) * 100% / (var(--n) - 1))
                     calc((var(--i) + 1) * 100% / (var(--n) - 1));
  }
}