*{margin:0; padding:0; box-sizing:border-box}
*{touch-action:manipulation}
:root{
  --grund:#0e0e10;
  --moewe:#a9b5bd; --moewe-rgb:169 181 189;
  --tinte:#ece9e2;
  --tinte-dunkel:#12161a;
  --regie:var(--moewe);
  --orange:#e07b2f; --pink:#ef6aa8; --walblau:#04adbf; --violett:#a06ce0;
  --strich-orange:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'><path d='M1.8,6.9 C16,4.2 33,5.7 49,5.0 C65,4.3 82,5.4 98.2,5.9 C99.2,10.1 98.9,14.7 97.5,18.5 C81,20.0 64,18.6 48,19.4 C32,20.1 16,19.0 2.4,18.1 C1.0,14.5 0.9,10.4 1.8,6.9 Z' fill='rgb(224,123,47)' fill-opacity='.45'/></svg>");
  --strich-orange-still:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'><path d='M1.8,6.9 C16,4.2 33,5.7 49,5.0 C65,4.3 82,5.4 98.2,5.9 C99.2,10.1 98.9,14.7 97.5,18.5 C81,20.0 64,18.6 48,19.4 C32,20.1 16,19.0 2.4,18.1 C1.0,14.5 0.9,10.4 1.8,6.9 Z' fill='rgb(224,123,47)' fill-opacity='.17'/></svg>");
  --walblau-rgb:4 173 191;
  --walblau-hell:#37bac7;
  --karton:#1e2126;
  --karton-tief:var(--tinte-dunkel);
  --buehne:var(--grund);
  --text:var(--tinte);
  --graphit:rgb(236 233 226 / .66);
  --blei:rgb(236 233 226 / .44);
  --bahn:rgb(236 233 226 / .28);
  --akzent:var(--moewe);
  --akzent-leise:rgb(var(--moewe-rgb) / .62);
  --akzent-hauch:rgb(var(--moewe-rgb) / .14);
  --walblau-lesbar:var(--regie);
  --kringel-voll:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-5.75 -5.75 11.5 11.5'><path d='M-4.5,-2.7 C-2.7,-6.1 3.5,-5.5 4.9,-1.3 C6.1,2.5 1.3,5.7 -2.5,3.9 C-5.3,2.5 -5.7,-0.3 -4.3,-2.3' fill='black' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --s-lesen:'Hanken Grotesk',system-ui,sans-serif;
  --s-regie:'Barlow Condensed',var(--s-lesen);
  --s-hand:'Caveat',cursive;
  --schrift-lesen:var(--s-lesen);
  --schrift-regie:var(--s-regie);
  --schrift-hand:var(--s-hand);
  --ts:1;
  --hanken:calc(19px * var(--ts));
  --barlow:calc(16px * var(--ts));
  --caveat-titel:calc(42px * var(--ts));
  --caveat-hand:calc(27.5px * var(--ts));
  --zeile:calc(26px * var(--ts));
  --zeile-barlow:calc(21px * var(--ts));
  --t-lesen:var(--hanken);
  --t-bedien:var(--hanken);
  --t-fein:var(--barlow);
  --t-fuss:var(--barlow);
  --blockluft:2.4rem;
  --spalte:34rem;
  --rand:1.25rem;
  --kopf-hoch:3rem;
}
html{scroll-behavior:smooth}
html,body{background:var(--buehne); color:var(--text)}
body{
  font-family:var(--schrift-lesen);
  font-weight:400; line-height:1.7; font-size:var(--t-lesen);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.bahn{width:100%; max-width:var(--spalte); margin:0 auto; padding:0 var(--rand)}
.etikett{
  display:block; margin-bottom:.44rem;
  font-family:var(--schrift-regie); font-weight:500;
  font-size:var(--t-fein); letter-spacing:.14em; text-transform:uppercase;
  color:var(--walblau-lesbar);
}
.zettelfeld[hidden]{display:none}
.lupe[hidden]{display:none}
.flagge[hidden]{display:none}
.mehr-knopf[hidden]{display:none}
.beleg-band[hidden]{display:none}
.anleitung[hidden]{display:none}
.anl-reiter[hidden]{display:none}
.anl-tun[hidden]{display:none}
.kopf{
  display:flex; align-items:center; justify-content:space-between;
  gap:.5rem .9rem; flex-wrap:wrap;
  padding:.85rem var(--rand);
  min-height:var(--kopf-hoch);
}
.menue{display:flex; flex-wrap:wrap; gap:.1rem .95rem; align-items:baseline}
.menue a{
  position:relative;
  display:inline-flex; align-items:center;
  min-height:34px; padding:.15rem .7rem;
  font-family:var(--schrift-regie); font-weight:600;
  font-size:calc(var(--t-fein) + 4px * var(--ts)); line-height:1.3;
  color:var(--tinte); text-decoration:none; border-radius:10.25px;
  transition:color .25s ease, background-color .25s ease;
}
.menue a:hover,.menue a:focus-visible{outline:none; background:rgb(255 255 255 / .06)}
.menue [aria-current="page"]{background:var(--akzent); color:var(--tinte-dunkel)}
.menue [aria-current="page"] .w-rand{opacity:0}
.menue [aria-current="page"]:hover{background:var(--akzent)}
@media (max-width:399.98px){
  .menue{gap:.1rem .6rem}
  .menue a{
    font-size:calc(var(--t-fein) + 2px * var(--ts));
    font-weight:400; padding:.15rem .5rem;
  }
}
.schalter{
  font-family:var(--schrift-regie);
  font-size:var(--t-bedien); letter-spacing:.14em; text-transform:uppercase;
  padding:.4rem .8rem;
  background:transparent; border:1px solid var(--bahn); color:var(--graphit);
  border-radius:999px; cursor:pointer;
  display:inline-flex; align-items:center; gap:.5em;
  transition:color .2s ease, border-color .2s ease;
}
.schalter:hover,.schalter:focus-visible{outline:none; color:var(--tinte); border-color:var(--akzent-leise)}
.flagge{width:17px; height:11px; display:block; border-radius:1.5px}
.ohne-sprachknopf .schalter{display:none}
.unterseite .seite{padding-top:1rem}
.nur-vorlesen{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}
.unterseite .seite .bahn{max-width:calc(38rem + 2 * var(--rand))}
.unterseite .kapitel p + p{margin-top:1.5em}
.adresse{
  margin:3.2rem 0 0; font-family:var(--schrift-regie);
  font-size:var(--t-fein); line-height:1.5;
  letter-spacing:normal; text-transform:none; color:var(--blei);
}
.unterseite .bahn a{color:var(--akzent); text-decoration:none;
  border-bottom:1px solid var(--akzent-leise); padding-bottom:1px}
.unterseite .bahn a:hover{border-color:var(--akzent)}
.unterseite .schreib{color:var(--text)}
.seitentitel{
  font-family:var(--schrift-lesen); font-weight:400;
  font-size:calc(var(--t-lesen) + 6px * var(--ts));
  line-height:var(--zeile); letter-spacing:normal;
  color:var(--tinte); text-align:left;
  margin:0 0 1.4rem;
}
.zeitstrahl{
  position:relative; margin-top:2.6rem;
  --nr:2.1rem;
  --einzug:calc(var(--nr) + .95rem);
  padding-left:var(--einzug);
}
.zeitstrahl::before{
  content:''; position:absolute; z-index:0;
  left:calc(var(--nr) / 2 - 1px); top:0; bottom:0; width:2px;
  background:linear-gradient(180deg,
    rgb(var(--moewe-rgb) / 0) 0%,
    rgb(var(--moewe-rgb) / .26) 5%,
    rgb(var(--moewe-rgb) / .26) 93%,
    rgb(var(--moewe-rgb) / 0) 100%);
}
.station{position:relative; z-index:1; margin-bottom:3.4rem}
.station:last-child{margin-bottom:0}
.st-nr{
  position:absolute; left:calc(0px - var(--einzug)); top:0;
  width:var(--nr); height:var(--nr); border-radius:50%;
  display:grid; place-items:center;
  background:var(--grund); border:2px solid rgb(var(--moewe-rgb) / .3);
  font-family:var(--schrift-regie);
  font-size:calc(var(--t-fein) + 4px * var(--ts));
  line-height:1; color:var(--akzent);
}
.st-bild{
  display:block; width:100%; padding:0; border:0;
  background:#fbf7ee; border-radius:1px;
  box-shadow:0 1px 2px rgba(16,14,10,.26), 0 9px 20px rgba(0,0,0,.38);
  cursor:zoom-in; -webkit-tap-highlight-color:transparent;
}
.st-bild{padding:7px}
.station:nth-child(odd)  .st-bild{rotate:-1.4deg}
.station:nth-child(even) .st-bild{rotate:1.1deg}
.st-bild img{display:block; width:100%; height:auto}
.st-bild:focus-visible{outline:2px solid var(--akzent); outline-offset:4px}
.st-text{margin-top:1rem; font-size:var(--t-lesen); line-height:1.75;
  color:var(--graphit)}
.st-text b{color:var(--tinte); font-weight:400}
@media (min-width:44rem){
  .zeitstrahl{padding-left:0}
  .zeitstrahl::before{left:50%; transform:translateX(-1px)}
  .station{
    display:grid; grid-template-columns:1fr 3.4rem 1fr;
    align-items:center; margin-bottom:4.5rem;
  }
  .st-nr{position:static; justify-self:center; grid-column:2}
  .station .st-bild{grid-row:1; grid-column:1; justify-self:end; max-width:26rem}
  .station .st-text{grid-row:1; grid-column:3; margin-top:0; padding-left:.6rem}
  .station:nth-child(even) .st-bild{grid-column:3; justify-self:start}
  .station:nth-child(even) .st-text{grid-column:1; padding-left:0; padding-right:.6rem;
    text-align:right}
}
.lupe-frei{cursor:zoom-out}
.lupe-frei .lupe-blatt{padding:7px}
.lupe-frei .lupe-blatt img{
  width:auto; height:auto;
  max-width:calc(92vw - 14px);
  max-height:min(calc(92svh - 14px), 600px);
  aspect-ratio:auto;
}
.hero{
  position:relative; min-height:calc(100svh - var(--kopf-hoch));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:2.5rem var(--rand) 4rem;
  overflow:hidden;
}
.demo-oben{
  display:block; font-weight:500;
  font-size:calc(2.25 * var(--t-fein)); letter-spacing:.05em;
  color:var(--akzent); margin-bottom:.9rem;
}
h1{
  font-family:var(--schrift-hand); font-weight:700;
  font-size:clamp(3.4rem,17vw,6rem); line-height:.86; letter-spacing:.01em;
  color:var(--tinte); margin:0 0 .06em;
  background:none; border:none; cursor:pointer;
  transition:color .35s ease;
}
h1:hover,h1:focus-visible{outline:none; color:var(--walblau)}
@media(hover:none){
  h1:hover{color:var(--tinte)}
  h1:active{color:var(--walblau)}
}
.was{
  margin:1.3rem auto 1.9rem; max-width:min(43rem,92vw);
  font-size:var(--t-lesen); line-height:1.65; color:var(--text);
}
.was b{color:var(--tinte); font-weight:600}
.wahlblock{
  display:flex; flex-direction:column; gap:.7rem;
  width:100%; max-width:22rem; margin:0 auto;
  padding:.35rem 0;
}
.tuer{
  position:relative;
  width:100%; max-width:100%; box-sizing:border-box;
  min-height:48px; padding:.3rem 1.1rem;
  display:flex; align-items:center; justify-content:center; gap:.5em;
  text-align:center; text-decoration:none;
  font-family:var(--schrift-lesen); font-weight:400;
  font-size:calc(var(--t-lesen) + 6px * var(--ts)); line-height:var(--zeile); letter-spacing:normal;
  background:var(--walblau); border:none; border-radius:11px;
  color:var(--tinte-dunkel); cursor:pointer;
  transition:opacity .35s ease, transform .35s ease, color .25s ease,
             background-color .25s ease;
}
.tuer::after{
  content:''; position:absolute; left:0; right:0; top:-3px; bottom:-3px;
}
.tuer:hover,.tuer:focus-visible{outline:none; color:var(--tinte-dunkel); background:var(--walblau-hell)}
.w-rand{position:absolute;left:.75px;top:.75px;
  width:calc(100% - 1.5px);height:calc(100% - 1.5px);
  overflow:visible;pointer-events:none;transition:opacity .22s ease}
.w-rand rect{fill:none;stroke:rgb(255 255 255 / .32);stroke-width:1.5;
  stroke-dasharray:4.5 5.5;stroke-linecap:butt}
.tuer.leise{
  width:auto; align-self:center;
  min-height:42px; padding:.25rem 1em;
  font-size:var(--t-bedien); font-weight:400;
  background:none; color:var(--tinte); border-radius:11px;
}
.tuer.leise:hover,.tuer.leise:focus-visible{color:#fff; background:rgb(255 255 255 / .05)}
.tuer.leise:hover .w-rand rect,.tuer.leise:focus-visible .w-rand rect{stroke:rgb(255 255 255 / .5)}
.tuer .flieger{width:15px; height:15px; display:block; flex:0 0 auto; color:rgb(236 233 226 / .6)}
.tuer-geraet{
  margin-top:.45rem; font-size:var(--t-fein); letter-spacing:.02em;
  line-height:1.6; color:var(--graphit);
}
.tuer-geraet span{display:block}
.tuer-geraet b{color:var(--text); font-weight:500}
.anleitung{margin-top:1.2rem}
.anl-reiter{
  display:inline;
  font-family:var(--schrift-regie); font-size:var(--t-fein); letter-spacing:.1em;
  text-transform:uppercase; line-height:1.6;
  background:none; border:none; color:var(--blei); cursor:pointer; padding:.4rem 0;
  transition:color .2s ease;
}
.anl-reiter:hover,.anl-reiter:focus-visible{outline:none; color:var(--akzent)}
.anl-reiter svg{width:11px; height:8px; margin-left:.5em; vertical-align:.02em;
  transition:transform .3s ease}
.anl-reiter[aria-expanded="true"] svg{transform:rotate(180deg)}
.anl-blatt{overflow:hidden; text-align:left; background:var(--karton); border-radius:4px;
  padding:1rem 1.1rem 1.15rem}
.anl-blatt.zu{
  max-height:0; opacity:0; visibility:hidden; padding-top:0; padding-bottom:0;
  transition:max-height .4s ease, opacity .3s ease, padding .4s ease, visibility 0s .4s;
}
.anl-warum{font-size:var(--t-fein); line-height:1.65; color:var(--graphit)}
.anl-warum b{color:var(--text); font-weight:500}
.anl-fall{margin-top:1rem}
.anl-marke{
  display:block; margin-bottom:.34rem;
  font-family:var(--schrift-regie); font-weight:500; font-size:var(--t-fuss);
  letter-spacing:.14em; text-transform:uppercase; color:var(--akzent-leise);
}
.anl-zeile,.anl-nach{font-size:var(--t-fein); line-height:1.7; color:var(--graphit)}
.anl-zeile{display:flex; gap:.55em; align-items:baseline}
.anl-nach{padding-left:1.75em}
.anl-zeile b,.anl-nach b{color:var(--text); font-weight:500}
.anl-glyph{flex:0 0 1.2em; color:var(--text); text-align:center; line-height:1}
.anl-glyph svg{width:.8em; height:1em; display:inline-block; vertical-align:-.14em}
.anl-tun{
  display:inline-block; margin:.15rem 0 .6rem;
  font-family:var(--schrift-regie); font-size:var(--t-fein); letter-spacing:.1em;
  text-transform:uppercase; color:var(--text);
  background:none; border:none; cursor:pointer; padding:.45rem .9rem .45rem 0;
  position:relative;
}
.anl-tun::before{
  content:''; position:absolute; left:0; right:.9rem; bottom:.25rem; height:1px;
  background:var(--blei);
}
.anl-tun:hover,.anl-tun:focus-visible{outline:none; color:var(--akzent)}
.anl-tun:hover::before,.anl-tun:focus-visible::before{background:var(--akzent)}
.klecks{position:relative;display:block;width:var(--kl,48px);height:var(--kl,48px);pointer-events:none}
.klecks::before{
  content:"";position:absolute;inset:0;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-image:var(--kringel-voll);mask-image:var(--kringel-voll);
  background-color:rgb(var(--walblau-rgb));
  transition:transform .2s cubic-bezier(.3,.9,.3,1);
}
.runter{
  position:absolute; left:50%; bottom:1.1rem; transform:translateX(-50%);
  width:92px; height:76px; display:grid; place-items:center;
  text-decoration:none; --kl:40px;
}
.runter .klecks{animation:klecks-wischt 2.9s cubic-bezier(.35,0,.3,1) infinite}
@keyframes klecks-wischt{
  0%{transform:translateY(26px);opacity:0}
  16%{transform:translateY(20px);opacity:.9}
  74%{transform:translateY(-24px);opacity:.9}
  100%{transform:translateY(-40px);opacity:0}}
.runter:hover .klecks::before,
.runter:focus-visible .klecks::before{transform:scale(1.09)}
@media(prefers-reduced-motion:reduce){.runter .klecks{animation:none; opacity:.9}}
@media(max-height:680px) and (min-width:600px){.runter{display:none}}
section{padding:var(--blockluft) 0}
section p + p{margin-top:.85em}
.erwartung p{font-size:var(--t-lesen); line-height:1.75; color:var(--tinte)}
.funkenwort{position:relative; color:var(--orange); cursor:pointer}
.funkenwort::after{
  content:''; position:absolute; left:0; right:0; bottom:-.12em;
  border-bottom:1px dashed currentColor;
  animation:wortAtem 3.6s ease-in-out infinite;
}
@keyframes wortAtem{0%,100%{opacity:.3} 50%{opacity:.85}}
.funkenwort:hover::after,.funkenwort:focus-visible::after{
  border-bottom-style:solid; animation:none; opacity:1;
}
.funkenwort:focus-visible{outline:none}
@media(prefers-reduced-motion:reduce){
  .funkenwort::after{animation:none; opacity:.6}
}
.funkenfeld{position:fixed; inset:0; pointer-events:none; z-index:900; overflow:hidden}
.funke{
  position:absolute; left:-3vw; top:var(--y);
  animation:funkeZieht var(--dauer) linear var(--start) 1 both;
}
.funke i{
  display:block; width:var(--d); height:var(--d); border-radius:50%;
  background:var(--orange);
  filter:drop-shadow(0 0 4px rgba(224,123,47,.75));
  animation:funkePulst var(--puls) ease-in-out infinite;
}
@keyframes funkeZieht{
  0%{transform:translateX(0) translateY(0); opacity:0}
  8%{opacity:1}
  92%{opacity:1}
  100%{transform:translateX(108vw) translateY(-7vh); opacity:0}
}
@keyframes funkePulst{0%,100%{opacity:.55; transform:scale(1)}50%{opacity:1; transform:scale(1.3)}}
@media(prefers-reduced-motion:reduce){.funke{display:none}}
.demo-etikett{
  display:block; margin-bottom:.44rem;
  font-family:var(--schrift-regie); font-weight:500;
  font-size:var(--t-fein); letter-spacing:.14em; text-transform:uppercase;
  color:var(--walblau-lesbar);
}
.demo p b{color:var(--tinte); font-weight:600}
.szene-rahmen{
  align-self:stretch; margin:0 0 1.8rem;
  background:#fbf7ee; padding:8px; border-radius:1px;
  box-shadow:0 1px 2px rgba(16,14,10,.26), 0 9px 20px rgba(0,0,0,.38);
}
.szene-rahmen .szene-wrap{background:var(--grund)}
.szene-wrap{position:relative; width:auto; margin:0}
.szene{display:block; width:100%; height:auto; overflow:visible}
.szene path,.szene circle,.szene ellipse{vector-effect:non-scaling-stroke}
.wal-platz{--wx:0px; transform:translateX(var(--wx)); cursor:pointer;
  transition:opacity .55s ease}
.wal-ziel{fill:transparent; stroke:none}
.szene .wasser{pointer-events:none}
.wal-schwimm{animation:wal-schaukel 9s ease-in-out infinite; transform-box:fill-box; transform-origin:center}
@keyframes wal-schaukel{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(-1.1deg)}}
.wal-platz.schlaegt .w-fluke{animation:flukeSchlag .48s ease-in-out}
@keyframes flukeSchlag{0%,100%{transform:rotate(0)}40%{transform:rotate(-22deg)}}
.w-fluke{transition:transform .35s ease; transform-box:fill-box; transform-origin:center}
.szene:hover .w-fluke{transform:rotate(-8deg)}
.wal-platz.taucht{opacity:0}
.wellen-a{animation:wellen-wog 6s ease-in-out infinite}
.wellen-b{animation:wellen-wog 7.5s ease-in-out infinite -1.2s}
@keyframes wellen-wog{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}
.stern{
  fill:rgba(216,228,242,.94);
  transform-box:fill-box; transform-origin:center;
  filter:drop-shadow(0 0 3px rgba(205,220,240,.55));
  animation:sternFunkeln var(--sdur,5s) ease-in-out var(--sdelay,0s) infinite;
}
@keyframes sternFunkeln{
  0%,100%{transform:scale(1); opacity:.5}
  20%{transform:scale(1.28); opacity:1}
  45%{transform:scale(.9); opacity:.72}
  70%{transform:scale(1.16); opacity:.95}
}
.stern.lockt{animation-name:sternLockt}
@keyframes sternLockt{
  0%,100%{transform:scale(1);   opacity:.45}
  18%    {transform:scale(1.8); opacity:1}
  38%    {transform:scale(.95); opacity:.5}
  58%    {transform:scale(1.55);opacity:1}
  78%    {transform:scale(1.05);opacity:.7}
}
.stern.blitzt{animation:sternBlitz .72s ease-out}
@keyframes sternBlitz{0%{transform:scale(1)}30%{transform:scale(2.1); opacity:1}100%{transform:scale(1)}}
.stern.neu{animation:sternKommt .9s ease-out, sternFunkeln var(--sdur,5s) ease-in-out var(--sdelay,0s) infinite .9s}
@keyframes sternKommt{0%{opacity:0; transform:scale(.2)}100%{opacity:.6; transform:scale(1)}}
.sterne-an .stern{cursor:pointer}
.leuchtfeuer{
  fill:rgba(250,248,240,.95);
  transform-box:fill-box; transform-origin:center;
  filter:drop-shadow(0 0 7px rgba(250,246,225,.75));
  animation:feuerBlink 4.5s ease-in-out infinite;
}
@keyframes feuerBlink{
  0%,42%,100%{opacity:.12; transform:scale(.7)}
  8%{opacity:1; transform:scale(1.25)}
  18%{opacity:.18; transform:scale(.8)}
  26%{opacity:.92; transform:scale(1.12)}
}
@media(prefers-reduced-motion:reduce){
  .stern,.stern.lockt,.stern.blitzt,.stern.neu,
  .leuchtfeuer,.wal-schwimm,.wellen-a,.wellen-b{animation:none}
  .stern{opacity:.85}
}
.schluss{text-align:center; display:flex; flex-direction:column; align-items:center;
  padding-left:var(--rand); padding-right:var(--rand);
  padding-bottom:calc(var(--blockluft) + 1rem)}
.schluss .wahlblock{margin:0 auto}
.technik{
  margin:1.3rem auto 0; max-width:34rem;
  font-size:var(--t-fein); letter-spacing:.02em; line-height:1.7; color:var(--graphit);
}
.technik b{color:var(--text); font-weight:500}
.leiser{color:var(--graphit); font-size:var(--t-lesen); line-height:1.75}
.person .schreib{color:var(--text)}
.mehr-lesen{margin-top:1.1rem; font-size:var(--t-lesen); line-height:1.75}
.person a{color:var(--akzent); text-decoration:none;
  border-bottom:1px solid var(--akzent-leise); padding-bottom:1px}
.person a:hover{border-color:var(--akzent)}
.merkwort{
  position:relative; display:inline; color:var(--moewe); cursor:pointer;
  background:none; border:none; padding:0; font:inherit; line-height:inherit;
}
.merkwort::after{
  content:''; position:absolute; left:0; right:0; bottom:-.12em;
  border-bottom:1px dashed currentColor;
  animation:wortAtem 3.6s ease-in-out infinite;
}
.merkwort:hover::after,.merkwort:focus-visible::after{
  border-bottom-style:solid; animation:none; opacity:1;
}
.merkwort:focus-visible{outline:none}
.kapitel + .quinnbild{margin-top:2.8rem}
.quinnbild + .kapitel{margin-top:2.8rem}
.quinnbild{
  display:block; width:fit-content; margin-inline:auto;
  background:#fbf7ee; padding:7px; border-radius:1px;
  box-shadow:0 1px 2px rgba(16,14,10,.26), 0 9px 20px rgba(0,0,0,.38);
}
.quinnbild:nth-of-type(odd) {rotate:-1.4deg}
.quinnbild:nth-of-type(even){rotate:1.1deg}
.quinnbild .buehne{
  background:var(--grund);
  display:grid; place-items:center;
  padding:1.2rem 1.6rem;
}
.quinnbild img{display:block; height:6.5rem; width:auto}
.gegenlicht{position:relative; display:block}
.gegenlicht > *{position:relative; z-index:2}
.gegenlicht::before{
  content:''; position:absolute; z-index:1; pointer-events:none;
  inset:-30% -45%;
  background:radial-gradient(66% 54% at 50% 48%,
    rgb(200 200 200 / 13.26%) 0%,
    rgb(200 200 200 / 9.18%) 24%,
    rgb(200 200 200 / 4.59%) 50%,
    rgb(200 200 200 / 1.53%) 68%,
    rgb(0 0 0 / 0%) 80%);
}
@media (prefers-reduced-motion:reduce){
  .quinnbild{rotate:0deg}
}
.lupe-foto{cursor:zoom-out}
.lupe-foto .lupe-blatt{
  background:#fbf7ee; border-radius:1px;
  padding:10px 10px 0;
  box-shadow:0 2px 4px rgba(16,14,10,.3), 0 18px 44px rgba(0,0,0,.55);
}
.lupe-foto .lupe-blatt img{
  display:block; width:auto; height:auto;
  max-width:none; max-height:none;
  aspect-ratio:auto;
}
.lupe-foto figcaption{
  font-family:var(--schrift-regie);
  font-size:calc(var(--t-fein) + 2px * var(--ts));
  line-height:1.3; letter-spacing:normal; text-transform:none;
  color:#1f1d1a; text-align:center;
  padding:.7rem 0 1rem;
}
.quinnbild{border:0; cursor:zoom-in; -webkit-tap-highlight-color:transparent}
.quinnbild:focus-visible{outline:2px solid var(--akzent); outline-offset:5px}
.angestrichen{
  display:inline;-webkit-appearance:none;appearance:none;
  background-color:transparent;color:inherit;
  background-image:var(--strich);
  background-repeat:no-repeat;background-size:100% 100%;
  padding:.1em .22em;margin:-.1em -.22em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  text-decoration:none;border:0;font:inherit;cursor:pointer;
}
.angestrichen.gelesen{background-image:var(--strich-still)}
.angestrichen.orange {--strich:var(--strich-orange); --strich-still:var(--strich-orange-still)}
.merkwort.angestrichen{color:inherit}
.merkwort.angestrichen::after{display:none}
.angestrichen:focus-visible{outline:2px solid var(--orange); outline-offset:2px}
@media(prefers-reduced-motion:reduce){.merkwort::after{animation:none; opacity:.6}}
.merkblatt{
  position:absolute; left:50%; bottom:calc(100% + .5rem);
  transform:translateX(-50%) translateY(4px);
  margin-left:var(--schub, 0px);
  width:max-content; max-width:14rem;
  font-family:var(--schrift-regie); font-size:var(--t-fein); line-height:1.35;
  color:var(--tinte); background:var(--karton);
  padding:.45rem .7rem; border-radius:3px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s ease, transform .22s ease, visibility 0s .22s;
  z-index:5;
}
.merkwort[aria-expanded="true"] .merkblatt{
  opacity:1; visibility:visible;
  transform:translateX(-50%) translateY(0);
  transition:opacity .22s ease, transform .22s ease;
  pointer-events:auto;
}
.zettellink{
  display:block; margin-top:.35rem;
  color:var(--akzent); text-decoration:none;
  border-bottom:1px solid var(--akzent-leise); padding-bottom:1px;
  overflow-wrap:anywhere;
}
.zettellink:hover,.zettellink:focus-visible{color:var(--tinte); border-color:var(--tinte)}
.merkblatt.unten{
  bottom:auto; top:calc(100% + .5rem);
  transform:translateX(-50%) translateY(-4px);
}
.merkwort[aria-expanded="true"] .merkblatt.unten{
  transform:translateX(-50%) translateY(0);
}
.p-rest{overflow:hidden}
.p-rest p:first-child{margin-top:.85em}
.p-rest.zu{max-height:0; opacity:0; transition:max-height .4s ease, opacity .3s ease}
.mehr-knopf{
  display:inline-flex; align-items:center; gap:.45em; margin-top:.9rem;
  font-family:var(--schrift-regie); font-size:var(--t-fein); letter-spacing:.14em;
  text-transform:uppercase;
  background:none; border:none; color:var(--blei); cursor:pointer; padding:.4rem 0;
  transition:color .2s ease;
}
.mehr-knopf:hover,.mehr-knopf:focus-visible{outline:none; color:var(--akzent)}
.mehr-knopf svg{width:11px; height:8px; transition:transform .3s ease}
.mehr-knopf[aria-expanded="true"] svg{transform:rotate(180deg)}
.beleg-raster{display:flex; flex-direction:column; gap:.8rem; margin-top:.3rem}
.beleg{background:var(--karton); border-radius:4px; padding:1rem 1.1rem}
.beleg .zahl{display:block; font-size:var(--t-lesen); line-height:1.1; color:var(--tinte);
  font-variant-numeric:tabular-nums}
.beleg .wozu{display:block; font-family:var(--schrift-regie); font-size:var(--t-fuss);
  letter-spacing:.14em; text-transform:uppercase; color:var(--blei); margin-top:.3rem}
.beleg .stimme{font-style:italic; color:var(--text); line-height:1.6}
.beleg .woher{display:block; font-family:var(--schrift-regie); font-size:var(--t-fuss);
  letter-spacing:.14em; text-transform:uppercase; color:var(--blei); margin-bottom:.5rem}
.beleg-punkte{display:flex; gap:.45rem; margin-top:.7rem}
.beleg-punkte button{width:7px; height:7px; border-radius:50%; padding:0;
  border:1px solid var(--blei); background:none; cursor:pointer}
.beleg-punkte button.an{background:var(--akzent); border-color:var(--akzent)}
.zettel-fest{
  position:relative; width:min(23rem, 86%);
  margin:2.8rem auto 0;
  rotate:-1.6deg;
}
.zettel-fest .zettelblatt{position:absolute; inset:0; width:100%; height:100%; fill:#e9e5da}
.zettelsatz{
  position:relative; margin:0;
  padding:1.7rem 1.6rem 2.4rem;
  font-family:var(--schrift-regie);
  font-size:calc(var(--t-fein) + 8px * var(--ts));
  line-height:1.35; letter-spacing:normal; text-transform:none;
  color:#1a1a1a;
}
@media (prefers-reduced-motion:reduce){ .zettel-fest{rotate:0deg} }
.zettelfeld{position:fixed; inset:0; z-index:950; display:grid; place-items:center;
  opacity:0; transition:opacity .45s ease}
.zettelfeld.da{opacity:1}
.zettelschleier{position:absolute; inset:0; background:rgba(0,0,0,.72)}
.zettel{position:relative; width:min(23rem,86vw); padding:0; cursor:pointer;
  transform:rotate(-1.6deg) translateY(10px); transition:transform .45s cubic-bezier(.22,.9,.3,1)}
.zettelfeld.da .zettel{transform:rotate(-1.6deg) translateY(0)}
.zettelblatt{position:absolute; inset:0; width:100%; height:100%; fill:#e9e5da}
.zettelzeile{position:relative; padding:2rem 1.7rem 2.6rem;
  font-family:var(--schrift-hand); font-size:1.45rem; line-height:1.35; color:#1a1a1a}
.bescheid-blatt{
  background:var(--karton); border-radius:4px;
  padding:1.4rem 1.2rem 1.5rem;
}
.bescheid-satz{font-size:var(--t-lesen); line-height:1.75; color:var(--tinte)}
.bescheid .wahlblock{margin-top:1.1rem}
.bescheid .tuer .brief{width:15px; height:12px; display:block; flex:0 0 auto; color:#7a7a7a}
.bescheid-fein{margin-top:.8rem; font-size:var(--t-fein);
  line-height:1.6; color:var(--blei)}
.bescheid-form{
  display:flex; flex-wrap:wrap; gap:.7rem;
  align-items:center; margin-top:1.1rem;
}
.feldrahmen{position:relative; display:block; flex:1 1 14rem; min-width:0}
.feld{
  display:block; width:100%; box-sizing:border-box;
  min-height:42px; padding:.25rem 1em;
  font-family:var(--schrift-lesen); font-weight:400;
  font-size:var(--t-bedien); line-height:var(--zeile);
  background:none; border:none; border-radius:11px;
  color:var(--tinte); -webkit-appearance:none; appearance:none;
}
.feld::placeholder{color:var(--blei); opacity:1}
.feld:focus{outline:none}
.feldrahmen:focus-within .w-rand rect{stroke:rgb(255 255 255 / .62)}
.bescheid-form .tuer.leise{align-self:auto; flex:0 0 auto}
.bescheid-antwort{
  margin-top:.9rem; font-size:var(--t-lesen); line-height:1.75;
  color:var(--tinte);
}
.bescheid-antwort.schief{color:var(--graphit)}
.bescheid-antwort a{color:var(--akzent); text-decoration:none;
  border-bottom:1px solid var(--akzent-leise); padding-bottom:1px}
.bescheid .tuer.leise{background:var(--walblau); color:var(--tinte-dunkel)}
.bescheid .tuer.leise .w-rand{opacity:0}
.bescheid .tuer.leise:hover,.bescheid .tuer.leise:focus-visible{background:var(--walblau-hell); color:#000}
.fuss{
  padding:2.5rem var(--rand) calc(2.5rem + env(safe-area-inset-bottom,0px));
  display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; justify-content:space-between;
  font-family:var(--schrift-regie); font-size:var(--t-fuss);
  letter-spacing:.14em; text-transform:uppercase; color:var(--blei);
}
.fuss b{color:var(--walblau-lesbar); font-weight:500}
.fuss-marke{display:inline-flex; align-items:center; gap:.75rem}
.insta{display:inline-flex; line-height:0}
.insta svg{width:38px; height:38px; display:block}
.fuss a{color:#7d878e; text-decoration:none; transition:color .3s ease}
.fuss a:hover{color:var(--akzent)}
.fuss-links{display:inline-flex; gap:1.4em; flex-wrap:wrap}
@media (min-width:600px){
  :root{
    --blockluft:3rem;
    --rand:2rem;
    --spalte:38rem;
  }
  .bescheid-blatt{padding:1.8rem 1.7rem 1.9rem}
  .beleg-raster{flex-direction:row; align-items:stretch}
  .beleg{flex:1}
  .beleg:last-child{flex:1.7}
}
@media (min-width:900px){
  :root{
    --blockluft:4.2rem;
    --rand:2.4rem;
    --spalte:52.5rem;
  }
  h1{font-size:clamp(6rem,9vw,9.5rem)}
  .hero{padding:4rem var(--rand) 5rem}
  .was{margin:1.8rem auto 2.4rem}
  .wahlblock{max-width:26rem}
  .tuer{min-height:56px}
  .tuer.leise{min-height:46px}
  .szene-rahmen{width:min(66rem,92vw); align-self:center; margin-left:auto; margin-right:auto}
  .szene-wrap{width:auto}
  .fuss{padding-bottom:3rem}
  .zettel{width:26rem}
}
@media (min-width:1300px){
  :root{--blockluft:5rem}
  h1{font-size:10rem}
  .hero{padding:5rem var(--rand) 6rem}
}
body, .was, .erwartung p, .leiser, .bescheid-satz, .technik,
.tuer-geraet, .anl-warum, .anl-zeile, .anl-nach,
.beleg .stimme{line-height:var(--zeile)}
.tuer-geraet, .technik, .anl-warum, .anl-zeile,
.anl-nach{font-size:var(--hanken)}
.etikett, .demo-etikett, .demo-oben, .anl-marke, .anl-reiter, .anl-tun,
.mehr-knopf, .fuss, .bescheid-fein, .beleg .wozu, .beleg .woher{
  line-height:var(--zeile-barlow);
}
.demo-oben{font-family:var(--schrift-regie); letter-spacing:.14em; text-transform:uppercase;
  line-height:calc(2.25 * var(--zeile-barlow))}
.schalter{font-size:var(--barlow); line-height:var(--zeile-barlow)}
.zettelzeile{font-size:var(--caveat-hand); line-height:1.2}
.fuss b{color:var(--walblau)}
.bescheid .tuer .brief{color:var(--tinte-dunkel)}
.tuer-geraet{
  text-align:left;
  width:100%; max-width:var(--spalte); margin-inline:auto;
}
.galerie{
  --gal-breite:max(9rem, min(62vw, 15.5rem, calc(64svh * 390 / 778)));
  --gal-format:390 / 778;
  --gal-rand:7px;
  --gal-fuss:16px;
  padding:var(--blockluft) 0;
}
.gal-buehne{position:relative}
.gal-spur{
  position:relative;
  display:flex; gap:.8rem;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding-inline:calc(50% - var(--gal-breite) / 2);
  padding-block:10px 30px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.gal-spur::-webkit-scrollbar{display:none}
.gal-spur:focus-visible{outline:2px solid var(--akzent); outline-offset:6px}
.gal-bild{flex:0 0 var(--gal-breite); margin:0; scroll-snap-align:center}
.gal-rahmen{
  background:#fbf7ee; border-radius:1px;
  padding:var(--gal-rand) var(--gal-rand) var(--gal-fuss);
  box-shadow:0 1px 2px rgba(16,14,10,.26), 0 9px 20px rgba(0,0,0,.38);
  opacity:.34; transform:scale(.9);
  transition:opacity .34s ease, transform .34s ease, rotate .34s ease;
}
.gal-bild:nth-child(odd)  .gal-rahmen{rotate:-1.4deg}
.gal-bild:nth-child(even) .gal-rahmen{rotate:1.1deg}
.gal-bild.ist-mitte .gal-rahmen{opacity:1; transform:scale(1); rotate:0deg}
.gal-rahmen img{
  display:block; width:100%; height:auto;
  aspect-ratio:var(--gal-format); object-fit:cover;
}
.gal-pfeil{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:2.75rem; height:2.75rem; display:none; place-items:center;
  border:0; border-radius:50%; cursor:pointer;
  background:rgb(var(--moewe-rgb) / .14); color:var(--akzent);
  -webkit-tap-highlight-color:transparent;
  transition:background .2s ease, opacity .2s ease;
}
.gal-pfeil svg{width:1.35rem; height:1.35rem}
.gal-zurueck{left:calc(50% - var(--gal-breite) / 2 - 3.35rem)}
.gal-vor{right:calc(50% - var(--gal-breite) / 2 - 3.35rem)}
.gal-pfeil:hover{background:rgb(var(--moewe-rgb) / .26)}
.gal-pfeil[disabled]{opacity:.2; cursor:default}
@media (pointer:fine){ .gal-pfeil{display:grid} }
.gal-punkte{display:flex; justify-content:center; gap:.1rem; margin-top:1.15rem}
.gal-punkt{
  border:0; background:none; padding:0; cursor:pointer;
  min-width:1.75rem; min-height:2.75rem; display:grid; place-items:center;
  -webkit-tap-highlight-color:transparent;
}
.gal-punkt::before{
  content:''; display:block; width:.5rem; height:.5rem; border-radius:50%;
  background:rgb(var(--moewe-rgb) / .3);
  transition:background .24s ease, transform .24s ease;
}
.gal-punkt.an::before{background:var(--akzent); transform:scale(1.25)}
.gal-punkt:focus-visible{outline:2px solid var(--akzent); outline-offset:2px; border-radius:8px}
.lupe{
  position:fixed; inset:0; z-index:940;
  display:grid; place-items:center;
  background:rgb(14 14 16 / .78);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  opacity:0; transition:opacity .28s ease;
  cursor:zoom-out; -webkit-tap-highlight-color:transparent;
}
.lupe.da{opacity:1}
.lupe-blatt{
  background:#fbf7ee; border-radius:1px;
  padding:var(--gal-rand) var(--gal-rand) var(--gal-fuss);
  box-shadow:0 2px 4px rgba(16,14,10,.3), 0 18px 44px rgba(0,0,0,.55);
  transform:scale(.94);
  transition:transform .28s cubic-bezier(.22,.9,.3,1);
}
.lupe.da .lupe-blatt{transform:scale(1)}
.lupe-blatt img{
  display:block; width:auto;
  height:min(calc(92svh - var(--gal-rand) - var(--gal-fuss)),
             calc((92vw - 2 * var(--gal-rand)) * 778 / 390));
  aspect-ratio:var(--gal-format); object-fit:cover;
}
html.lupe-auf, html.lupe-auf body{overflow:hidden}
.gal-bild.ist-mitte .gal-rahmen{cursor:zoom-in}
@media (prefers-reduced-motion:reduce){
  .gal-rahmen, .gal-punkt::before{transition:none}
  .gal-bild .gal-rahmen{rotate:0deg}
  .lupe, .lupe-blatt{transition:none}
  .lupe-blatt{transform:none}
}
.qk-platz{margin-top:4.1rem}
.qk-sitz{position:relative; display:block}
.qk-knopf{
  --qk-hoch:calc(68px * 4 / 3);
  position:absolute; top:0; right:40px; z-index:2;
  width:calc(var(--qk-hoch) * 105 / 155); height:var(--qk-hoch);
  transform:translateY(calc(-100% + var(--qk-hoch) * 0.066 + 2px));
  padding:0; border:0; background:none; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.qk-knopf .gegenlicht, .qk-knopf img{display:block; width:100%; height:100%}
.qk-knopf{
  --qk-schnitt:72%;
  --qk-drehpunkt:85%;
  --qk-winkel:5.5deg;
}
#quinn-bild{clip-path:inset(0 calc(100% - var(--qk-schnitt)) 0 0)}
.qk-knopf .gegenlicht .qk-schwanz{
  position:absolute; inset:0; z-index:2;
  clip-path:inset(0 0 0 var(--qk-schnitt));
  transform-origin:var(--qk-schnitt) var(--qk-drehpunkt);
  animation:qk-wippe 3.8s ease-in-out infinite;
}
@keyframes qk-wippe{
  0%,100%{rotate:0deg}
  25%    {rotate:3.6deg}
  50%    {rotate:var(--qk-winkel)}
  75%    {rotate:2deg}
}
@media (prefers-reduced-motion:reduce){
  .qk-knopf .gegenlicht .qk-schwanz{animation:none}
}
.qk-knopf img{object-fit:contain}
.qk-knopf:focus-visible{outline:2px solid var(--akzent); outline-offset:4px; border-radius:6px}
.qk-knopf .gegenlicht{position:relative}
.qk-knopf .gegenlicht > *{position:relative; z-index:2}
.qk-knopf .gegenlicht::before{
  content:''; position:absolute; z-index:1; pointer-events:none;
  inset:-30% -45%;
  background:radial-gradient(66% 54% at 50% 48%,
    rgb(200 200 200 / 26.52%) 0%,
    rgb(200 200 200 / 18.36%) 24%,
    rgb(200 200 200 / 9.18%) 50%,
    rgb(200 200 200 / 3.06%) 68%,
    rgb(0 0 0 / 0%) 80%);
}