@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+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113;
}
@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+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113;
}

@font-face {
  font-family: 'Manrope';
  src: url('schriften/manrope-cyrillic.woff2') format('woff2-variations'),
       url('schriften/manrope-cyrillic.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Cormorant';
  src: url('schriften/cormorant-italic-cyrillic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}


@property --blick { syntax: '<integer>'; inherits: false; initial-value: 0; }

@property --bogen { syntax: '<angle>'; inherits: false; initial-value: 360deg; }

@property --boden { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --fg { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --fg-2 { syntax: '<color>'; inherits: true; initial-value: transparent; }

:root {
  
  --nacht:      #17122A;  
  --himmel:     #1D1730;  
  --grund:      #221B33;  
  --tief:       #15101F;  
  --blatt:      #2C2440;  
  --gehoben:    #342A55;  
  --chip:       #3A3155;  
  --linie:      #584C74;  

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

  
  --lavendel:      #B9A8E8;  
  --lavendel-hell: #CFC3F2;  
  --auf-lavendel:  #2C2440;  
  --gold:       #E8C77E;  
  --tinte:      #241B33;  
  
  --tafel-pille:       #E6DFF5;  
  --tafel-lebenslinie: #FCD682;  
  --tafel-einfach:     #9F8FB9;  
  --tafel-praxis:      #E9C46F;  
  --tafel-umzug:       #66558F;  
  
  --fg: var(--text-hero);  --fg-2: var(--text);
  
  --abschnitt: clamp(4.5rem, 11vw, 8.5rem);
  --fs-kopf:   clamp(2rem, 7.4vw, 3.75rem);
  --fs-absatz: clamp(1.125rem, 1.5vw, 1.3125rem);
  --gb: min(70vw, 19rem);
  
  --metall:      color-mix(in srgb, var(--linie) 42%, var(--tief));
  --metall-hell: color-mix(in srgb, var(--text-leise) 50%, var(--linie));

  --haarlinie:       color-mix(in srgb, var(--text) 8%, transparent);   
  --haarlinie-stark: color-mix(in srgb, var(--text) 16%, transparent);
  --schatten:        color-mix(in srgb, var(--tief) 72%, transparent);

  
  --s1: 6px;  --s2: 10px;  --s3: 16px;  --s4: 24px;
  --s5: 36px; --s6: 56px;  --s7: 84px;  --s8: 120px;
  --r-mini: 3px;  --r-klein: 8px;  --radius: 18px;  --r-gross: 28px;
  --spalte: 72rem;
  --rand: clamp(1.5rem, 5.6vw, 4rem);

  
  --fs-marke:  .75rem;
  --fs-neben:  .9375rem;
  --fs-text:   1.1875rem;
  --lh-glyph: 1;  --lh-kopf: 1.06;  --lh-eng: 1.2;  --lh-lese: 1.65;
  --ls-marke: .12em;
  --ls-weit:  .22em;

  
  --federn:      cubic-bezier(.33, 1, .68, 1);  
  --t-ankommen:  1400ms;  
  --t-auftritt:  900ms;   
  --t-claim:     700ms;   
  --t-tab:       220ms;   
  --t-wechsel:   180ms;   
  --t-blatt-auf: 340ms;   
  --t-blatt-zu:  240ms;   
  --takt:        1400ms;  
  --t-tipp:      450ms;   

  --sans:  'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Cormorant', Georgia, 'Times New Roman', serif;
  color-scheme: dark;
}



*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--s6); }
body {
  margin: 0;
  background: var(--nacht);
  color: var(--text);
  font: 400 var(--fs-text)/var(--lh-lese) var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, h3, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--lavendel); outline-offset: 3px; border-radius: var(--r-mini); }
::selection { background: var(--lavendel); color: var(--auf-lavendel); }

.sprungmarke {
  position: absolute; left: var(--s3); top: var(--s3); z-index: 20;
  transform: translateY(-400%);
  padding: var(--s2) var(--s3); border-radius: var(--r-klein);
  background: var(--lavendel-hell); color: var(--auf-lavendel);
  font-weight: 600; text-decoration: none;
}
.sprungmarke:focus { transform: none; }
.huelle { position: relative; }



.n-marke, .n-marken li { font: 600 var(--fs-marke)/var(--lh-eng) var(--sans); letter-spacing: var(--ls-marke); text-transform: uppercase; color: var(--label); }

.n-kopf { font: 600 var(--fs-kopf)/var(--lh-kopf) var(--sans); letter-spacing: -.03em; color: var(--fg); text-wrap: balance; }
.n-kopf em {
  font: italic 500 1.15em/var(--lh-glyph) var(--serif); letter-spacing: 0;
  text-decoration: underline; text-decoration-thickness: .035em; text-underline-offset: .13em;
  text-decoration-color: var(--strich, var(--lavendel));
}

.n-kopf--stimme { font: italic 500 calc(var(--fs-kopf) * 1.12)/1.04 var(--serif); letter-spacing: 0; }

.n-text, .n-klein, .n-weiter { font-size: var(--fs-absatz); line-height: 1.5; }
.n-text { color: var(--fg-2); max-width: 34rem; text-wrap: pretty; }
.n-weiter { font-weight: 600; color: var(--fg); text-decoration: underline; text-decoration-color: var(--strich, var(--lavendel)); text-underline-offset: .3em; }




.kopf {
  position: absolute; inset: 0 0 auto 0; z-index: 10;
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s4) max(var(--rand), calc((100% - var(--spalte)) / 2));
}
.wortmarke {
  font: 700 var(--fs-neben)/var(--lh-glyph) var(--sans);
  letter-spacing: var(--ls-weit);
  color: var(--text-hero); text-decoration: none;
}
.kopf .ort, .kopf .sprache {
  min-height: 44px; padding-inline: var(--s3);
  font: 600 var(--fs-marke)/var(--lh-glyph) var(--sans);
  letter-spacing: var(--ls-marke); text-transform: uppercase;
  color: var(--text-leise);
  border: 1px solid var(--haarlinie-stark); border-radius: var(--r-klein);
}
.kopf .ort { margin-left: auto; }
.kopf .ort:hover, .kopf .sprache:hover { color: var(--text-hero); }
.wege, .sprachen {
  margin: 0; padding: var(--s2); border: 1px solid var(--haarlinie-stark); border-radius: var(--radius);
  background: var(--blatt); color: var(--text);
  box-shadow: 0 var(--s4) var(--s6) var(--schatten);
}
.wege:popover-open, .sprachen:popover-open {
  display: grid; position: fixed; inset: var(--s7) var(--rand) auto auto; min-width: 14rem;
}
.wege::backdrop, .sprachen::backdrop { background: color-mix(in srgb, var(--tief) 55%, transparent); }
.wege a, .sprachen a {
  display: block; padding: var(--s2) var(--s3); border-radius: var(--r-klein);
  font-size: var(--fs-neben); font-weight: 500; text-decoration: none; color: var(--text-leise);
}
.wege a:hover, .sprachen a:hover { color: var(--text-hero); }
.wege a[aria-current], .sprachen a[aria-current] { color: var(--text-hero); background: var(--chip); }




.n-akt {
  position: relative; overflow: clip; text-align: center;
  padding: var(--abschnitt) var(--rand); background-color: var(--boden, transparent);
}
.n-akt--angeschnitten { padding-bottom: 0; }
.n-wort { position: relative; z-index: 2; max-width: 44rem; margin-inline: auto; display: grid; gap: var(--s4); justify-items: center; }

.n-buehne { position: relative; display: grid; justify-items: center; align-items: start; margin-top: var(--s6); height: calc(var(--gb) * 1.36); }


.n-tafel {
  --fg: var(--tinte); --fg-2: color-mix(in srgb, var(--tinte) 86%, transparent); --strich: var(--tinte);
  background-image: radial-gradient(90% 55% at 50% 100%, color-mix(in srgb, white var(--studio, 34%), transparent), transparent 72%);
}

.n-tafel--einfach { --boden: var(--tafel-einfach); --fg-2: var(--tinte); }
.n-tafel--lebenslinie { --boden: var(--tafel-lebenslinie); }
.n-tafel--praxis { --boden: var(--tafel-praxis); }

.n-tafel--umzug { --boden: var(--tafel-umzug); --fg: var(--text-hero); --fg-2: var(--text); --strich: var(--gold); --studio: 14%; }


.n-geraet {
  position: relative; flex: none; width: var(--gb);
  padding: calc(var(--gb) * .034); border-radius: calc(var(--gb) * .18);
  background: linear-gradient(150deg, var(--metall-hell), var(--metall) 16%, var(--tief) 44%, var(--metall) 82%, var(--metall-hell));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, white 26%, transparent),
    inset 0 0 0 calc(var(--gb) * .013) var(--tief),
    0 calc(var(--gb) * .03) calc(var(--gb) * .06) color-mix(in srgb, var(--tief) 55%, transparent),
    0 calc(var(--gb) * .16) calc(var(--gb) * .24) calc(var(--gb) * -.05) color-mix(in srgb, var(--tief) 80%, transparent);
}
.n-geraet img { width: 100%; aspect-ratio: 1080 / 2258; object-fit: cover; object-position: top; border-radius: calc(var(--gb) * .148); }
.n-geraet::before {
  content: ""; position: absolute; z-index: 2; left: 50%; top: calc(var(--gb) * .056); translate: -50% 0;
  width: calc(var(--gb) * .03); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--metall), var(--tief) 70%);
  box-shadow: 0 0 0 1px color-mix(in srgb, white 8%, transparent);
}
.n-geraet::after {
  content: ""; position: absolute; inset: calc(var(--gb) * .034); border-radius: calc(var(--gb) * .148); pointer-events: none;
  background: linear-gradient(118deg, color-mix(in srgb, white 14%, transparent), transparent 30%);
}


.n-folge { display: grid; }
.n-folge img { grid-area: 1 / 1; }

.n-streif {
  position: absolute; z-index: 1; left: 3.4%; top: 24.6%; width: 93.2%; height: 25.8%; pointer-events: none; mix-blend-mode: color-dodge;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, white 50%, black), transparent) -150% 0 / 60% 100% no-repeat;
  mask-image: linear-gradient(180deg, transparent, black 18%, black 82%, transparent);
}

.n-tipp {
  --px: calc(var(--gb) * .932 / 440);
  position: absolute; z-index: 2; left: calc(var(--gb) * .034 + var(--x) * var(--px)); top: calc(var(--gb) * .034 + var(--y) * var(--px));
  width: calc(var(--px) * 56); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; opacity: 0;
  background: color-mix(in srgb, white 55%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, white 90%, transparent), 0 2px 12px color-mix(in srgb, black 40%, transparent);
}
.n-tipp::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid color-mix(in srgb, white 85%, transparent); opacity: 0; }
.n-tipp:nth-of-type(2) { --n: 2; }
.n-tipp:nth-of-type(3) { --n: 3; }
.n-tafel--einfach .n-tipp:nth-of-type(1) { --x: 378; --y: 282; }       
.n-tafel--einfach .n-tipp:nth-of-type(2) { --x: 174; --y: 510; }       
.n-tafel--lebenslinie .n-tipp:nth-of-type(1) { --x: 112; --y: 260; }   
.n-tafel--lebenslinie .n-tipp:nth-of-type(2) { --x: 220; --y: 718; }   
.n-tafel--praxis .n-tipp { --x: 51; --y: 378; }                         
.n-tafel--praxis .n-tipp:nth-of-type(2) { --y: 470; }                   
.n-tafel--praxis .n-tipp:nth-of-type(3) { --y: 551; }                   
.n-tafel--praxis:lang(pl) .n-tipp { --y: 357; }                          
.n-tafel--praxis:lang(pl) .n-tipp:nth-of-type(2) { --y: 449; }
.n-tafel--praxis:lang(pl) .n-tipp:nth-of-type(3) { --y: 541; }
.n-wahl-flaeche--pille .n-tipp { --x: 56; --y: 372; }                   


.n-motiv { position: absolute; left: calc(50% - var(--mb) / 2); top: calc(var(--mu) * -1); width: var(--mb); max-width: none; pointer-events: none; }
.n-motiv--blister { --mb: calc(var(--gb) * 1.163); --mu: calc(var(--gb) * .274); }
.n-motiv--brett { --mb: calc(var(--gb) * 1.422); --mu: calc(var(--gb) * .306); }
.n-motiv--schild { --mb: calc(var(--gb) * 1.393); --mu: calc(var(--gb) * .214); }

.n-motiv--wellen { --db: 100vw; left: 0; width: var(--db); top: calc(100% - var(--gb) * .92 - var(--db) * .3); }


.n-herz {
  position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--lavendel) 21%, transparent),
    color-mix(in srgb, var(--lavendel) 14%, transparent) 26%,
    color-mix(in srgb, var(--gehoben) 55%, transparent) 50%, transparent 100%);
}


.laeden { --badge: clamp(2.75rem, 12vw, 3rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s3); }
.laden-knopf { display: inline-block; border-radius: var(--r-klein); }
.laden-knopf .laden-badge { display: block; width: auto; }
.laden-knopf .laden-badge-apple { height: var(--badge); }
.laden-knopf .laden-badge:not(.laden-badge-apple) { height: calc(var(--badge) * 250 / 190); margin-block: calc(var(--badge) * -30 / 190); }

.laden-knopf .laden-badge[src*="play-badge-en"] { height: calc(var(--badge) * 250 / 168); margin: calc(var(--badge) * -41 / 168); }



.n-hero { padding-top: calc(var(--s7) + var(--s5)); background: linear-gradient(180deg, var(--nacht), var(--himmel) 60%, var(--grund)); }
.n-claim { font: 700 clamp(2.125rem, 10.6vw, 5.5rem)/1.02 var(--sans); letter-spacing: -.03em; color: var(--text-hero); }
.n-zeile { display: block; white-space: nowrap; }
.n-claim .n-stimme { font: italic 500 1.14em/var(--lh-glyph) var(--serif); letter-spacing: 0; color: var(--text-weich); }
.n-hero .n-text { max-width: 31rem; }
.n-hero .n-buehne { perspective: 1800px; }
.n-hero .n-herz { top: 42%; width: min(60rem, 210%); }
.n-trio > .n-geraet { grid-area: 1 / 1; }
.n-trio > .n-geraet:nth-child(2) { transform: translateX(-66%) translateY(9%) rotateY(32deg) scale(.86); filter: brightness(.78); }
.n-trio > .n-geraet:nth-child(3) { z-index: 2; }
.n-trio > .n-geraet:nth-child(4) { transform: translateX(66%) translateY(9%) rotateY(-32deg) scale(.86); filter: brightness(.78); }



.n-wahl { --fg: var(--text-hero); --fg-2: var(--text); --strich: var(--gold); transition: --boden 400ms var(--federn), --fg 400ms var(--federn), --fg-2 400ms var(--federn); }
.n-wahl:has(#lage-pille:checked) { --boden: var(--tafel-pille); --fg: var(--tinte); --fg-2: color-mix(in srgb, var(--tinte) 86%, transparent); --strich: var(--tinte); }
.n-wahl:has(#lage-wechsel:checked) { --boden: var(--nacht); }
.n-wahl:has(#lage-zyklus:checked) { --boden: var(--tafel-umzug); }

.n-griff { border: 0; min-width: 0; margin: var(--s5) auto 0; padding: var(--s1); display: flex; width: 100%; max-width: 24rem; border-radius: var(--r-gross); background: color-mix(in srgb, var(--fg) 9%, transparent); }
.n-griff label { position: relative; flex: 1 1 auto; display: grid; place-items: center; min-height: 44px; padding-inline: 0; white-space: nowrap; border-radius: var(--r-gross); font: 600 clamp(.75rem, 3.6vw, .875rem)/var(--lh-glyph) var(--sans); color: var(--fg); cursor: pointer; }
.n-griff input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.n-griff label:has(:checked) { background: var(--fg); color: var(--boden); }
.n-griff label:has(:focus-visible) { outline: 2px solid var(--fg); outline-offset: 3px; }
:where(.n-griff label) { user-select: none; }

.n-wahl-flaechen { display: grid; grid-template-rows: auto auto; margin-top: var(--s5); }
.n-wahl-flaeche { --wahl: 0; grid-area: 1 / 1 / 3 / 2; display: grid; grid-template-rows: subgrid; align-items: start; opacity: 0; visibility: hidden; translate: 0 var(--s2); }
.n-wahl:has(#lage-pille:checked) .n-wahl-flaeche--pille,
.n-wahl:has(#lage-wechsel:checked) .n-wahl-flaeche--wechsel,
.n-wahl:has(#lage-zyklus:checked) .n-wahl-flaeche--zyklus { --wahl: 1; opacity: 1; visibility: visible; translate: none; transition: opacity var(--t-tab) var(--federn), translate var(--t-tab) var(--federn); }
.n-wahl-flaeche .n-kopf { font-size: calc(var(--fs-kopf) * .8); }

.n-wahl-flaeche .n-buehne { margin-top: calc(var(--s6) + var(--s4)); }

.n-wahl-flaeche--pille .n-wort { padding-bottom: var(--s4); }

.n-szene {
  position: absolute; left: 50%; bottom: calc(100% + var(--s1)); width: calc(var(--gb) * 1.43); max-width: none; transform: translate(-50%, 29%);
  mask-image: linear-gradient(180deg, transparent 50%, black 58%, black 85%, transparent), linear-gradient(90deg, transparent, black 6%, black 94%, transparent); mask-composite: intersect;
}



.n-paar > .n-geraet { grid-area: 1 / 1; }
.n-paar > .n-geraet:first-of-type { transform: translateX(-28.6%) rotate(-3deg); }
.n-paar > .n-geraet:last-of-type { transform: translate(28.6%, 8.9%) rotate(3deg); }
.n-tafel--praxis .n-buehne { margin-top: calc(var(--gb) * .306 + var(--s5)); }



.n-privat { background: linear-gradient(180deg, var(--grund), var(--tief) 30%, var(--tief) 60%, var(--nacht)); }
.n-privat .n-herz { top: 72%; width: min(56rem, 190%); }
.n-privat .n-buehne { margin-top: calc(var(--gb) * .214 + var(--s5)); }

.n-marken { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) clamp(.875rem, 4.6vw, 1.5rem); }
.n-marken li { display: flex; align-items: center; gap: var(--s1); text-align: left; color: var(--fg); }
.n-marken img { flex: none; width: clamp(1.25rem, 6.1vw, 1.75rem); }



.n-schluss .n-wort { min-height: 70svh; align-content: center; }
.n-schluss .n-herz { z-index: -1; top: 30%; width: min(52rem, 190%); }
.n-schluss .n-kopf { font-size: calc(var(--fs-kopf) * 1.25); }
.n-klein { color: var(--text-lila); max-width: 32rem; }

.n-icon { width: 6rem; border-radius: 22.37%; box-shadow: 0 0 0 1px var(--haarlinie-stark), 0 var(--s4) var(--s6) var(--schatten); }

.n-abgrenzung { max-width: 40rem; margin: var(--abschnitt) auto 0; padding-top: var(--s6); border-top: 1px solid var(--haarlinie-stark); display: grid; gap: var(--s3); text-align: left; }
.n-abgrenzung h2 { font: 600 var(--fs-text)/var(--lh-eng) var(--sans); color: var(--text-hero); }
.n-abgrenzung p { font-size: var(--fs-neben); color: var(--text-leise); }
.n-abgrenzung strong { color: var(--text); font-weight: 600; }





.n-kapitel { background: var(--grund); }
.n-kapitel--konto { background: var(--tafel-umzug); }
.n-kapitel--mitteilungen { background: var(--chip); }
.n-kapitel--widget { background: var(--blatt); }
.n-kapitel--sperre { background: var(--grund); }
.n-kapitel--wissen { background: color-mix(in srgb, var(--grund) 50%, var(--tief)); }
.n-kapitel--speicher { background: var(--tief); }
.n-kapitel--schluss { background: var(--nacht); }

.n-kapitel--konto { --text-leise: var(--text); --label: var(--text); }
.n-kapitel.n-kapitel--konto .n-marke { color: var(--text-hero); }
.n-kapitel--start { padding-top: calc(var(--s7) + var(--s5)); background: var(--nacht); }
.n-lage { font: italic 500 calc(var(--fs-kopf) * .8)/var(--lh-kopf) var(--serif); color: var(--fg); text-wrap: balance; }
.n-kapitel .n-marke { color: var(--lavendel); }
.n-grenze { display: grid; gap: var(--s1); max-width: 34rem; font-size: var(--fs-neben); color: var(--text-leise); text-wrap: pretty; }
.n-grenze .n-marke { color: var(--label); }
.n-kapitel--start .n-buehne { margin-top: calc(var(--gb) * .214 + var(--s5)); }

.n-buehne--frei { height: auto; align-content: center; gap: var(--s5); }

.n-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 9rem)); gap: var(--s3); justify-content: center; width: 100%; }
.n-kacheln figure { margin: 0; display: grid; grid-row: span 2; grid-template-rows: subgrid; gap: var(--s2); justify-items: center; }
.n-kacheln img { width: 100%; filter: drop-shadow(0 var(--s2) var(--s4) var(--schatten)); }
.n-kacheln figcaption { font: 600 var(--fs-marke)/var(--lh-eng) var(--sans); letter-spacing: var(--ls-marke); text-transform: uppercase; color: var(--label); text-align: center; }


.n-bildchart { width: min(100%, 24rem); }

.n-schluss-kopf, .n-schluss-fuss { display: grid; gap: var(--s4); justify-items: center; text-align: center; }
.n-schluss-kopf .n-lage { max-width: 40rem; }
.n-schluss-fuss { margin-top: var(--s6); }

.n-schichten { display: grid; }
.n-schichten img { grid-area: 1 / 1; width: 100%; }


.n-sperrschirm {
  aspect-ratio: 1080 / 2258; border-radius: calc(var(--gb) * .148); overflow: hidden;
  display: grid; align-content: start; justify-items: center; padding: calc(var(--gb) * .15) calc(var(--gb) * .05) 0;
  background: radial-gradient(130% 55% at 50% 100%, color-mix(in srgb, var(--lavendel) 26%, transparent), transparent 70%), linear-gradient(180deg, var(--himmel), var(--nacht));
}
.n-sperrschirm-datum { font: 600 calc(var(--gb) * .05)/1 var(--sans); color: var(--text); }
.n-sperrschirm-zeit { margin-top: calc(var(--gb) * .02); font: 600 calc(var(--gb) * .24)/1 var(--sans); letter-spacing: -.02em; color: var(--text-hero); }

.n-sperr-widget { margin-top: calc(var(--gb) * .04); display: flex; align-items: center; gap: calc(var(--gb) * .03); text-align: left; }
.n-sperr-widget svg { width: calc(var(--gb) * .16); flex: none; mask: conic-gradient(var(--text-hero) var(--bogen), transparent 0); }
.n-sperr-widget p { max-width: calc(var(--gb) * .34); text-wrap: balance; font: 500 calc(var(--gb) * .045)/1.25 var(--sans); color: var(--text-hero); }
.n-kranz-voll { fill: var(--text-hero); }
.n-kranz-leer { fill: color-mix(in srgb, var(--text-hero) 30%, transparent); }
.n-kranz-zahl { font: 600 32px var(--sans); fill: var(--text-hero); text-anchor: middle; dominant-baseline: central; }
.n-mitteilung {
  margin-top: calc(var(--gb) * .06); width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(var(--gb) * .035); align-items: start;
  padding: calc(var(--gb) * .04); border-radius: calc(var(--gb) * .07); background: color-mix(in srgb, var(--text) 13%, transparent); text-align: left;
}
.n-geraet .n-mitteilung img { width: calc(var(--gb) * .1); aspect-ratio: 1; border-radius: 24%; }
.n-mitteilung p { display: grid; font: 400 calc(var(--gb) * .045)/1.3 var(--sans); color: var(--text); }
.n-mitteilung span { font: 600 calc(var(--gb) * .033)/1.4 var(--sans); letter-spacing: var(--ls-marke); text-transform: uppercase; color: var(--label); }
.n-mitteilung strong { font-weight: 600; color: var(--text-hero); }



.fuss { padding: var(--s7) max(var(--rand), calc((100% - var(--spalte)) / 2)) var(--s7); border-top: 1px solid var(--haarlinie); }
.fuss-oben { display: grid; gap: var(--s6); }
.fuss-zusage { margin-top: var(--s3); max-width: 24rem; font-size: var(--fs-neben); color: var(--text-leise); }
.fuss-gruppen { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.fuss-gruppen ul { margin-top: var(--s3); display: grid; gap: var(--s2); }
.fuss-gruppen a { font-size: var(--fs-neben); color: var(--text-lila); text-decoration: none; }
.fuss-gruppen a:hover { color: var(--text-hero); }
.fuss-kolophon { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s4); margin-top: var(--s6); font-size: var(--fs-neben); color: var(--label); }



@keyframes n-auf { from { opacity: 0; translate: 0 var(--hub, var(--s4)); } }
@keyframes n-licht { from { opacity: 0; scale: .9; } }
@keyframes n-ankommen { from { opacity: 0; translate: 0 var(--s7); } }
@keyframes n-links { from { opacity: 0; transform: translateX(-20%) translateY(16%) rotateY(10deg) scale(.86); } }
@keyframes n-rechts { from { opacity: 0; transform: translateX(20%) translateY(16%) rotateY(-10deg) scale(.86); } }
@keyframes n-heben { from { translate: 0 var(--weg, calc(var(--s7) * 2)); } }
@keyframes n-blick { from, to { --blick: 1; } }
@keyframes n-wischen { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes n-kranz { from { --bogen: 0deg; } }
@keyframes n-schliessen { from { transform: translateY(-2.2%) rotate(-14deg); } 55% { transform: translateY(-2.2%); } }
@keyframes n-wechsel { from { opacity: var(--von, 0); clip-path: var(--schnitt, inset(0)); } to { clip-path: inset(0); } }
@keyframes n-streif { to { background-position: 250% 0; } }
@keyframes n-tipp { from { opacity: 0; scale: .6; } 20%, 45% { opacity: 1; scale: 1; } to { opacity: 0; scale: 1.1; } }
@keyframes n-welle { from { opacity: .9; scale: 1; } to { opacity: 0; scale: 2.2; } }



@media (max-width: 47.99rem) {
  .n-hero, .n-tafel--praxis, .n-privat { --gb: 56vw; }
  .n-trio > .n-geraet:nth-child(2) { transform: translateX(-62%) translateY(7%) rotateY(28deg) scale(.88); }
  .n-trio > .n-geraet:nth-child(4) { transform: translateX(62%) translateY(7%) rotateY(-28deg) scale(.88); }
}

@media (min-width: 48rem) {
  .laeden { --badge: 3.5rem; }
  .fuss-oben { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}



@media (min-width: 62rem) {
  :root { --gb: min(24rem, 44svh); }
  .kopf .ort { display: none; }
  .wege, .wege:popover-open {
    display: flex; position: static; inset: auto; gap: var(--s1); min-width: 0;
    margin-left: auto; padding: 0; border: 0; background: none; box-shadow: none; overflow: visible;
  }
  .wege a[aria-current] { background: none; }
  .n-hero { padding-top: calc(var(--s7) + var(--s3)); }
  .n-claim { font-size: min(4.75rem, 9.4svh); }

  
  .n-tafel, .n-wahl-flaeche, .n-privat, .n-kapitel {
    --fs-kopf: clamp(2.5rem, 4.2vw, 3.75rem);
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto;
    column-gap: var(--s7); align-items: center; text-align: left;
  }
  .n-tafel, .n-privat, .n-wahl, .n-kapitel:not(.n-kapitel--start) { padding-top: var(--s8); }
  .n-tafel, .n-privat, .n-kapitel { padding-inline: max(var(--rand), calc((100% - var(--spalte)) / 2)); }
  .n-tafel .n-wort, .n-wahl-flaeche .n-wort, .n-privat .n-wort, .n-kapitel .n-wort { justify-items: start; justify-self: end; max-width: 34rem; margin: 0; padding-bottom: var(--s8); }
  
  .n-kapitel:nth-of-type(even) .n-wort { order: 2; justify-self: start; }
  .n-kapitel .n-buehne { margin-top: 0; height: calc(var(--gb) * 1.62); }
  .n-kapitel--start .n-buehne { margin-top: calc(var(--gb) * .214); }
  .n-kapitel .n-buehne--frei { height: auto; padding-bottom: var(--s8); }
  .n-kacheln { grid-template-columns: repeat(3, minmax(0, 11rem)); }
  
  .n-kapitel.n-kapitel--schluss { display: block; text-align: center; }
  .n-bildchart { width: 26rem; }
  
  .n-tafel--einfach .n-wort, .n-tafel--praxis .n-wort, .n-tafel--umzug .n-wort { order: 2; justify-self: start; }
  .n-tafel .n-buehne, .n-wahl-flaeche .n-buehne { margin-top: 0; }
  .n-tafel .n-buehne, .n-privat .n-buehne { height: calc(var(--gb) * 1.62); }
  .n-privat .n-buehne { margin-top: calc(var(--gb) * .214); }
  .n-marken { justify-content: start; }

  
  .n-wahl-flaechen { grid-template-rows: auto; max-width: var(--spalte); margin: var(--s8) auto 0; }
  .n-wahl-flaeche { grid-area: 1 / 1; }
  .n-wahl-flaeche .n-buehne { height: calc(var(--gb) * 1.45); }
  
  .n-wahl-flaeche--pille .n-buehne { margin-top: var(--s3); height: calc(var(--gb) * 1.45 - var(--s3)); }
  
  .n-wahl-flaeche--wechsel .n-buehne { padding-top: var(--s5); }
  .n-szene {
    width: calc(var(--gb) * 2.3); bottom: calc(100% + var(--s1) - var(--s5));
    mask-image: linear-gradient(90deg, transparent, black 22%, black 92%, transparent), linear-gradient(180deg, transparent 12%, black 28%, black 85%, transparent);
  }
  
  .n-griff { position: relative; z-index: 3; }

  
  .n-motiv--wellen { --db: 52vw; left: auto; right: 0; top: calc(var(--s8) + var(--gb) * .44 - var(--db) * .3); mask-image: linear-gradient(90deg, transparent, black 18%); }
  
  .n-tafel--praxis { --gb: min(24rem, 44svh, 30vw); }
  .n-tafel--praxis .n-buehne { margin-top: var(--s6); height: calc(var(--gb) * 1.62 - var(--s6)); }
}



@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  
  .n-claim { --hub: var(--s2); animation: n-auf var(--t-claim) var(--federn) both; }
  .n-hero .n-text, .n-hero .laeden { animation: n-auf var(--t-auftritt) var(--federn) 380ms both; }
  .n-hero .n-herz { animation: n-licht var(--t-ankommen) var(--federn) both; }
  .n-trio > .n-geraet:nth-child(3) { animation: n-ankommen var(--t-ankommen) var(--federn) 150ms both; }
  .n-trio > .n-geraet:nth-child(2) { animation: n-links var(--t-ankommen) var(--federn) 380ms both; }
  .n-trio > .n-geraet:nth-child(4) { animation: n-rechts var(--t-ankommen) var(--federn) 380ms both; }

  
  @supports (animation-timeline: view()) {
    .n-akt { timeline-scope: --buehne; }
    .n-buehne { view-timeline: --buehne; }
    .n-akt:not(.n-hero) :is(.n-motiv, .n-szene, .n-geraet) { animation: n-heben linear both; animation-timeline: --buehne; animation-range: entry 0% cover 30%; }
    :is(.n-motiv, .n-szene) { --weg: calc(var(--s4) + var(--s3)); }
    .n-paar > .n-geraet:first-of-type { --weg: calc(var(--s8) - var(--s2)); }
    
    .n-akt:not(.n-hero) .n-folge { animation: n-heben linear both, n-blick linear; animation-timeline: --buehne, view(); animation-range: entry 0% cover 30%, entry 50% exit 30%; }
    .n-blatt-auf { --von: 1; --schnitt: inset(100% 0 0 0); }
    .n-blatt-zu { --von: 1; --schnitt: inset(0 0 100% 0); }
    
    .n-kapitel--sperre .n-folge img:nth-of-type(2) { animation: n-wechsel linear both; animation-timeline: --buehne; animation-range: entry 70% entry 90%; }
    
    .n-schichten img, .n-kacheln figure, .n-sperr-widget svg, .n-mitteilung { animation-timeline: --buehne; animation-fill-mode: both; animation-timing-function: linear; }
    .n-raster { animation-name: n-wischen; animation-range: entry 20% cover 50%; }
    .n-wolke { animation-name: n-auf; --hub: calc(var(--s6) * -1); animation-range: entry 0% cover 40%; }
    .n-schloss { animation-name: n-auf; --hub: calc(var(--s6) * -1); animation-range: cover 40% cover 55%; }
    
    .n-buegel { transform-origin: 44.4% 54.1%; animation-name: n-auf, n-schliessen; animation-range: cover 40% cover 55%, cover 55% cover 68%; }
    .n-sperr-widget svg { animation-name: n-kranz; animation-range: entry 60% cover 45%; }
    .n-mitteilung { animation-name: n-auf; --hub: calc(var(--s4) * -1); animation-range: cover 40% cover 55%; }
    .n-kacheln figure { animation-name: n-auf; --hub: var(--s6); }
    .n-kacheln figure:nth-child(1) { animation-range: entry 10% cover 35%; }
    .n-kacheln figure:nth-child(2) { animation-range: entry 30% cover 45%; }
    .n-kacheln figure:nth-child(3) { animation-range: entry 50% cover 55%; }
    @container style(--blick: 1) and (not style(--wahl: 0)) {
      .n-folge img:nth-of-type(n+2) { animation: n-wechsel var(--t-wechsel) var(--federn) var(--takt) both; }
      .n-folge img:nth-of-type(3) { animation-delay: calc(var(--takt) * 2); }
      .n-folge img:nth-of-type(4) { animation-delay: calc(var(--takt) * 3); }
      .n-folge img.n-blatt-auf { animation-duration: var(--t-blatt-auf); }
      .n-folge img.n-blatt-zu { animation-duration: var(--t-blatt-zu); }
      .n-streif { animation: n-streif 1200ms ease-in-out 150ms both; }
      .n-tipp { animation: n-tipp var(--t-tipp) var(--federn) calc(var(--takt) * var(--n, 1) - var(--t-tipp) * .4); }
      .n-tipp::after { animation: n-welle var(--t-tipp) ease-out calc(var(--takt) * var(--n, 1) - var(--t-tipp) * .3); }
    }
  }
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print { .n-herz, .kopf .ort, .kopf .sprache { display: none; } }