@layer vorlage, system;
@layer vorlage{

:root{
  --papier:#F6F7F4;
  --kachel:#D7DCD4;
  --text:#1F2629;
  --leise:#5C666A;
  --oliv:#6E7A73;
  --linie:#CFD5D8;
  --akzent:#596A70;
  --akzent-hell:#8FA3AA;
  --akzent-text:#FFFFFF;
  --akzent-knopf:#596A70;
  --akzent-knopf-hover:#4B5C62;
  --dunkel:#2B3437;
  --radius:3px;
  --schrift:'Newsreader',Georgia,serif;
  --schrift-text:'Instrument Sans',system-ui,sans-serif;
  --rand:clamp(22px,4.5vw,76px);
  --inhalt:1440px;
  --kopf-h:72px;
  --pille-platz:88px;
  --leiste-h:70px;
  --fokus:var(--text);
  --fokus-gegen:#fff;
  --dauer:.3s;
  --kurve:cubic-bezier(.16,1,.3,1);
}
html[data-vorschau="aus"],html.ohne-js{--pille-platz:0px}

.dunkel,.stunden,.fuss,.fassung,.fassung__auf,
html.js[data-variante="3"] .hero,
html.js[data-variante="3"] .kopf:not(.is-fest):not(.is-menue){--fokus:#fff;--fokus-gegen:var(--dunkel)}
.kontakt,.flaeche-akzent{--fokus:var(--akzent-text);--fokus-gegen:var(--akzent)}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf-h) + 12px)}
html[data-vorschau="an"]{scroll-padding-bottom:var(--pille-platz)}
body{margin:0;background:var(--papier);color:var(--text);font-family:var(--schrift-text);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
img,video{display:block;max-width:100%;height:auto}
h1,h2,h3,p,dl,dd{margin:0}
h1,h2{font-family:var(--schrift);font-weight:600;line-height:.93;letter-spacing:-.025em;text-transform:uppercase}
h2{font-size:clamp(38px,4.2vw,64px)}
h1 .zart,h2 .zart{color:var(--oliv)}
h3{font-family:var(--schrift-text);font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1.25}

h1,h2,h3{text-wrap:balance}
p,dd,li,figcaption,blockquote{text-wrap:pretty}
p{max-width:62ch}
.nw{white-space:nowrap}
.nur-leser{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

:focus-visible{outline:3px solid var(--fokus);outline-offset:3px;box-shadow:0 0 0 3px var(--fokus-gegen)}
[hidden]{display:none!important}
.springen{position:fixed;top:-100px;left:20px;z-index:200;background:#fff;padding:14px}
.springen:focus{top:calc(var(--kopf-h) + 8px)}
.t-klein{font-size:14px}
.t-mikro{font-size:12px}
.t-nano{font-size:12px}
.t-leise{color:var(--leise)}

.kopf{position:sticky;top:0;z-index:50;height:var(--kopf-h);padding:0 var(--rand);display:flex;align-items:center;justify-content:space-between;gap:30px;color:var(--text);transition:color var(--dauer) var(--kurve)}
.kopf::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--papier);border-bottom:1px solid transparent;transition:opacity var(--dauer) var(--kurve),border-color var(--dauer)}
.kopf.is-fest::before{border-bottom-color:var(--linie)}
.marke{display:flex;align-items:center;gap:18px;min-height:44px}
.marke__zeichen{font-family:var(--schrift);font-weight:700;font-size:44px;line-height:1;letter-spacing:-.05em;display:flex;align-items:flex-end}
.marke__punkt{width:8px;height:8px;background:var(--akzent);margin:0 0 5px 4px}
.marke__name{font-size:12px;font-weight:700;line-height:1.45;letter-spacing:.1em;border-left:1px solid var(--linie);padding-left:17px;text-transform:uppercase}
.nav{display:flex;gap:30px;font-size:14px}
.nav a{padding:14px 0;min-height:44px;display:inline-flex;align-items:center}
.nav a:hover{text-decoration:underline;text-underline-offset:6px}
.kopf__tel{display:flex;align-items:center;justify-content:center;gap:10px;font-size:14px;font-weight:700;min-height:44px;min-width:44px}
.menue{display:none;border:0;background:none;padding:11px;color:inherit;min-height:44px;min-width:44px}
#mobilnav{position:fixed;left:0;right:0;top:var(--kopf-h);z-index:49;display:flex;flex-direction:column;max-height:calc(100svh - var(--kopf-h));overflow:auto;background:var(--papier);border-bottom:1px solid var(--linie);padding:8px var(--rand) 18px}
#mobilnav a{display:flex;align-items:center;min-height:48px;padding:10px 0;border-bottom:1px solid var(--linie);font-size:15px;font-weight:600}
#mobilnav .knopf{margin-top:16px;border-bottom:0;justify-content:center}

html.ohne-js .menue{display:none!important}

html.js[data-variante="3"] .kopf:not(.is-fest):not(.is-menue){color:#F5F5E8}
html.js[data-variante="3"] .kopf:not(.is-fest):not(.is-menue)::before{opacity:0}
html.js[data-variante="3"] .kopf:not(.is-fest):not(.is-menue) .marke__name{border-left-color:rgb(255 255 255/.35)}

.knopf{display:inline-flex;justify-content:center;align-items:center;gap:22px;min-height:54px;padding:15px 23px;background:var(--akzent-knopf);color:var(--akzent-text);font-size:14px;font-weight:700;border:1px solid transparent;border-radius:var(--radius);transition:background var(--dauer),transform var(--dauer)}
.knopf:hover{background:var(--akzent-knopf-hover)}
.knopf svg{width:20px;transition:transform var(--dauer)}
.knopf:hover svg{transform:translateX(4px)}
.knopf--dunkel{background:var(--dunkel);color:#fff}
.knopf--dunkel:hover{background:#333a2d}
.knopf--linie{background:transparent;color:inherit;border-color:var(--leise)}
.knopf--linie:hover{background:rgb(32 34 29/.05)}
.textlink{font-size:13.5px;font-weight:700;display:inline-flex;gap:9px;align-items:center;min-height:44px}
.textlink:hover{text-decoration:underline;text-underline-offset:5px}
.rundpfeil{height:34px;width:34px;border:1px solid var(--linie);border-radius:50%;display:grid;place-items:center;font-size:18px;transition:background var(--dauer),border-color var(--dauer)}

.paar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.paar > .knopf{width:100%;padding-inline:12px;gap:12px;text-align:center}

.hero{min-height:690px;min-height:calc(100svh - var(--kopf-h));max-height:980px;background:var(--papier);position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:46% 54%;padding:clamp(36px,5vh,80px) var(--rand) calc(105px + var(--pille-platz));align-items:center;transition:background var(--dauer) var(--kurve)}
.hero__text{position:relative;z-index:3;max-width:560px}
.hero h1{font-size:clamp(60px,7.1vw,104px);line-height:.92}
.hero__satz{font-size:16px;max-width:380px;margin-top:26px;color:var(--leise)}
.hero__aktion{display:flex;align-items:center;flex-wrap:wrap;gap:20px;margin-top:30px}
.buehne{position:relative;align-self:stretch;display:flex;align-items:center;justify-content:center;min-width:0;contain:size}
.buehne::after{content:"";position:absolute;font-family:var(--schrift);font-weight:700;font-size:clamp(160px,24vw,400px);letter-spacing:-.05em;color:#E8E9E1;line-height:1;top:20%;left:-6%;z-index:-1;user-select:none;pointer-events:none}

.buehne__bild{width:auto;max-width:116%;max-height:calc(100% - 24px);filter:drop-shadow(15px 27px 18px rgb(52 60 37/.13));transform:translateY(-2%)}

.schild{position:absolute;bottom:0;right:0;width:250px;padding:13px 14px;background:var(--papier);border-top:1px solid #A4A798;display:grid;gap:3px;font-size:12px;min-height:44px}
.schild b{font-size:15px}
.schild span{display:flex;justify-content:space-between;color:var(--leise)}
.hero__fuss{position:absolute;bottom:var(--pille-platz);left:var(--rand);right:var(--rand);min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--linie);font-size:13px;z-index:3}
.ort{display:flex;align-items:center;gap:9px;min-height:44px}
.ort svg{width:17px}
.versprechen{color:var(--leise)}
.hinab{width:44px;height:44px;border:1px solid var(--linie);border-radius:50%;display:grid;place-items:center}
.hero__foto{display:none}

.hero__ecke{position:absolute;right:var(--rand);bottom:calc(96px + var(--pille-platz));z-index:3;display:flex;align-items:center;gap:10px;max-width:calc(100% - 2 * var(--rand))}
.ki-hinweis{font-size:12px;line-height:1.4;color:#F5F5E8;background:rgb(16 27 24/.82);padding:4px 8px;border-radius:2px}

html[data-variante="1"] [data-nur]:not([data-nur~="1"]),
html[data-variante="2"] [data-nur]:not([data-nur~="2"]),
html[data-variante="3"] [data-nur]:not([data-nur~="3"]),
html[data-variante="4"] [data-nur]:not([data-nur~="4"]){display:none!important}

html[data-variante="1"] .hero{display:flex;align-items:flex-end;padding-bottom:calc(105px + var(--pille-platz))}
html[data-variante="1"] .hero__foto{display:block;position:absolute;inset:0;z-index:0}
html[data-variante="1"] .hero__foto img{width:100%;height:100%;object-fit:cover;object-position:52% 46%}
html[data-variante="1"] .hero__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgb(246 246 241/.35),rgb(246 246 241/0) 62%)}
html[data-variante="1"] .hero__text{max-width:min(100%,620px);background:var(--papier);padding:clamp(26px,3vw,40px) clamp(26px,3vw,40px) clamp(24px,2.5vw,32px);border-radius:var(--radius);margin-bottom:24px}
html[data-variante="1"] .hero h1{font-size:clamp(52px,5.6vw,86px)}
html[data-variante="1"] .hero__satz{max-width:none}

html[data-variante="1"] .hero__fuss{right:auto;bottom:calc(var(--pille-platz) + 14px);min-height:56px;padding:0 8px 0 20px;gap:28px;background:var(--papier);border-top:0;border-radius:var(--radius)}

html[data-variante="2"] .buehne{display:flex}

html[data-variante="3"] .hero{margin-top:calc(var(--kopf-h) * -1);display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;min-height:100svh;max-height:none;padding-top:calc(var(--kopf-h) + 60px);color:#F5F5E8;background:var(--dunkel)}
html[data-variante="3"] .hero__foto{display:block;position:absolute;inset:0;z-index:0}
html[data-variante="3"] .hero__foto img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}

html[data-variante="3"] .hero__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(16 27 24/.72),rgb(16 27 24/0) calc(var(--kopf-h) + 90px)),linear-gradient(0deg,rgb(16 27 24/.94),rgb(16 27 24/.42) 62%,rgb(16 27 24/.18))}
html[data-variante="3"] .hero__text{max-width:640px}
html[data-variante="3"] .hero h1{font-size:clamp(52px,5.2vw,84px)}
html[data-variante="3"] .hero h1 .zart{color:var(--akzent)}
html[data-variante="3"] .hero__satz{color:rgb(245 245 232/.86)}
html[data-variante="3"] .hero__fuss{border-top-color:rgb(255 255 255/.28)}
html[data-variante="3"] .versprechen{color:rgb(245 245 232/.7)}
html[data-variante="3"] .hinab{border-color:rgb(255 255 255/.35)}
html[data-variante="3"] .hero .textlink{color:#F5F5E8}

.hero__film video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:60% 50%;opacity:0;transition:opacity .9s var(--kurve)}
.hero__film.film-laeuft video{opacity:1}
.hero__film.ohne-film video{display:none}
html.js:not(.still) .hero__film.ohne-film img{transform-origin:60% 55%;animation:kamera 24s ease-in-out infinite alternate}
@keyframes kamera{from{transform:scale(1)}to{transform:scale(1.06)}}
.film-halt{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid rgb(255 255 255/.35);border-radius:50%;background:rgb(16 27 24/.55);color:#F5F5E8}
.film-halt i{display:block;width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.film-halt[aria-pressed="true"] i{width:0;height:0;border:0;border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
html.ohne-js .film-halt,html.still .film-halt{display:none}

.abschnitt{padding:clamp(62px,7.6vw,110px) var(--rand)}
.abschnitt--papier{background:var(--papier)}
.kopfzeile{display:flex;align-items:flex-end;justify-content:space-between;gap:35px;margin-bottom:50px}
.kopfzeile p{max-width:320px;color:var(--leise);font-size:15px}

.raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.produkt{display:block;min-width:0}
.produkt__bild{background:var(--kachel);aspect-ratio:1.15;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--radius)}
.produkt__bild img{width:94%;height:88%;object-fit:contain;mix-blend-mode:multiply;transition:transform .6s var(--kurve)}
.produkt:hover img{transform:scale(1.06)}
.produkt__zeile{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 0;border-bottom:1px solid var(--linie)}
.produkt__zeile p{font-size:12px;color:var(--leise);margin-top:3px}
.produkt:hover .rundpfeil{background:var(--akzent);border-color:var(--akzent)}
.produkt__preis{display:inline-flex;align-items:baseline;gap:.35em;margin-top:8px;font-family:var(--schrift);font-weight:700;font-size:22px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.produkt__preis i{font-style:normal;font-family:var(--schrift-text);font-size:12px;font-weight:700;letter-spacing:.05em;color:var(--leise)}
.weitere{display:flex;align-items:center;flex-wrap:wrap;gap:10px 26px;margin-top:38px;font-size:13px}
.weitere > span{color:var(--leise);margin-right:8px}
.weitere > a{border-bottom:1px solid #B9BCAE;padding:10px 0;min-height:44px;display:inline-flex;align-items:center}
.weitere > a:hover{border-bottom-color:var(--text)}

.stunden{background:var(--dunkel);color:#fff;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,80px)}
.stunden h2 .zart{color:var(--akzent)}
.lineal{display:flex;gap:16px;margin-top:35px;overflow:hidden;max-width:400px}
.lineal i{height:16px;width:1px;background:#7F8976}
.lineal i:nth-child(3n+1){height:32px;background:var(--akzent)}
.stunden__gross{font-family:var(--schrift-text);font-size:clamp(21px,2.2vw,30px);line-height:1.38;letter-spacing:-.015em;max-width:26ch}
.stunden__inhalt > p + p{margin-top:22px;color:#D0D4C9;font-size:14px}
.stunden .knopf{margin-top:30px}
.stundenpreise{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;margin-top:34px;border-top:1px solid rgb(255 255 255/.22)}
.stundenpreise > div{padding:18px 20px 0;border-left:1px solid rgb(255 255 255/.16)}
.stundenpreise > div:first-child{padding-left:0;border-left:0}
.stundenpreise dt{font-family:var(--schrift);font-weight:700;font-size:clamp(26px,2.6vw,38px);line-height:1;color:var(--akzent);font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:.28em}
.stundenpreise dt i{font-style:normal;font-family:var(--schrift-text);font-size:12.5px;font-weight:700;color:#D0D4C9;letter-spacing:.04em}
.stundenpreise dd{margin:.4rem 0 0;font-size:12.5px;color:#D0D4C9;line-height:1.45}

.liefern{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:clamp(36px,5vw,80px)}
.liefern__bild{position:relative;overflow:hidden;aspect-ratio:1/.86;border-radius:var(--radius)}
.liefern__bild img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.liefern__bild > span{position:absolute;bottom:12px;left:15px;color:#fff;background:rgb(23 30 23/.72);padding:5px 9px;font-size:12px;border-radius:2px}
.liefern__text > p{margin:26px 0;color:var(--leise);font-size:15px}
.liefern dl{margin:15px 0 20px}
.liefern dl > div{display:grid;grid-template-columns:120px minmax(0,1fr);border-top:1px solid var(--linie);padding:18px 0;gap:18px;font-size:13px}
.liefern dt{font-weight:700}
.liefern dd{margin:0;color:var(--leise)}

.kontakt{background:var(--akzent);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(36px,5vw,70px);align-items:start}
.kontakt h2{font-size:clamp(52px,6.4vw,92px)}
.kontakt h2 .zart{color:rgb(32 34 29/.5)}
.kontakt p{color:rgb(32 34 29/.78);margin-top:20px;font-size:15px}
.kontakt__tel{display:inline-flex;align-items:center;gap:18px;margin-top:28px;min-height:44px;padding-block:6px;font-family:var(--schrift);font-weight:700;font-size:clamp(34px,4vw,58px);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.kontakt__tel svg{width:26px}
.kontakt__mail{display:flex;align-items:center;margin-top:16px;font-size:15px;font-weight:700;border-bottom:1px solid rgb(32 34 29/.4);padding-bottom:2px;width:fit-content;min-height:44px}
.adresse{border-left:1px solid rgb(32 34 29/.3);padding-left:clamp(24px,3vw,44px)}
.adresse__zeichen{font-family:var(--schrift);font-weight:700;font-size:46px;line-height:1;letter-spacing:-.05em;color:rgb(32 34 29/.42)}
.adresse h3{margin-top:12px}
.adresse p{margin-top:12px;font-size:14px}
.fuss{background:var(--dunkel);color:#D0D4C9;padding:18px var(--rand);display:flex;align-items:center;justify-content:space-between;gap:8px 20px;font-size:13px;flex-wrap:wrap}
.fuss a,.fuss > span{display:inline-flex;align-items:center;min-height:44px}
.fuss a:hover{text-decoration:underline;text-underline-offset:4px}
.fuss > div{display:flex;gap:4px 26px;flex-wrap:wrap}

.fassung{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:60;display:flex;align-items:center;gap:6px;padding:6px 6px 6px 14px;background:var(--dunkel);color:#fff;border-radius:999px;font-size:13px;transition:opacity .35s var(--kurve),transform .35s var(--kurve),visibility 0s}
.fassung__marke{font-weight:700;letter-spacing:.02em;margin-right:6px;white-space:nowrap}
.fassung__marke span{font-weight:400;color:rgb(255 255 255/.72);letter-spacing:.1em;font-size:12px;margin-left:5px}
.fassung [role=group]{display:flex;gap:2px}
.fassung button{background:none;border:0;color:inherit;border-radius:999px;padding:10px 13px;min-height:44px;min-width:44px;font-size:13px;font-weight:600;white-space:nowrap;transition:background var(--dauer),color var(--dauer)}
.fassung button span{font-weight:400;margin-left:5px;color:rgb(255 255 255/.78)}
.fassung button:hover{background:rgb(255 255 255/.12)}
.fassung button[aria-pressed="true"]{background:var(--akzent-knopf);color:var(--akzent-text)}
.fassung button[aria-pressed="true"] span{color:var(--akzent-text)}
.fassung__zu{padding:8px 14px;min-height:44px;min-width:44px;color:rgb(255 255 255/.78)!important}
.fassung__auf{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:60;background:var(--dunkel);color:#fff;border:0;border-radius:999px;padding:13px 18px;min-height:44px;font-size:13px;font-weight:600;transition:opacity .35s var(--kurve),transform .35s var(--kurve),visibility 0s}
.fassung.ist-weg,.fassung__auf.ist-weg{opacity:0;visibility:hidden;transform:translate(-50%,18px);transition:opacity .35s var(--kurve),transform .35s var(--kurve),visibility 0s .35s}
html[data-vorschau="aus"] .fassung,html[data-vorschau="aus"] .fassung__auf,html.ohne-js .fassung,html.ohne-js .fassung__auf{display:none!important}

.leiste{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;gap:10px;padding:10px var(--rand) calc(10px + env(safe-area-inset-bottom));background:var(--papier);border-top:1px solid var(--linie);visibility:hidden;transform:translateY(110%);transition:transform .4s var(--kurve),visibility 0s .4s}
.leiste.is-da{visibility:visible;transform:none;transition:transform .4s var(--kurve),visibility 0s}
.leiste > .knopf{min-height:50px}

.zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 20px}
.zahlen__eintrag{padding:1.5rem 0 .5rem;border-top:1px solid var(--linie)}
.zahlen__eintrag dt{margin:0}
.zahlen__eintrag dd{margin:.65rem 0 0;color:var(--leise);max-width:26ch;font-size:14px;line-height:1.45}

.zahlen--schild{gap:20px}
.zahlen--schild .zahlen__eintrag{position:relative;padding:1.6rem 1.5rem 1.5rem;border-top:0;background:var(--dunkel,#1F2327);color:#F4F6F8;border-radius:var(--radius)}
.zahlen--schild .zahlen__eintrag::before{content:"";position:absolute;left:1.5rem;right:1.5rem;top:0;height:3px;background:var(--akzent)}
.zahlen--schild .t-zahl{color:#fff;margin-top:.4rem}
.zahlen--schild dd{color:rgb(255 255 255/.72)}
@media (max-width:699px){.zahlen--schild{gap:.75rem}.zahlen--schild .zahlen__eintrag{padding:1.25rem 1.1rem 1.2rem}.zahlen--schild .zahlen__eintrag::before{left:1.1rem;right:1.1rem}}
@media (max-width:599px){.zahlen{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

.band{margin:0}
.band__bild{height:clamp(360px,68vh,760px);overflow:hidden}
.band__bild img{width:100%;height:100%;object-fit:cover}
.band figcaption{width:min(100% - 2*var(--rand),var(--inhalt));margin:.9rem auto 0;color:var(--leise);font-size:14px}

.ablauf{counter-reset:schritt;border-top:1px solid var(--linie);margin:0;padding:0;list-style:none}
.ablauf__schritt{counter-increment:schritt;display:grid;grid-template-columns:minmax(72px,1fr) minmax(0,5fr) minmax(0,6fr);column-gap:20px;padding:clamp(1.5rem,3vw,2.5rem) 0;border-bottom:1px solid var(--linie)}
.ablauf__schritt::before{content:counter(schritt,decimal-leading-zero);font-family:var(--schrift);font-weight:700;font-size:clamp(38px,4.2vw,64px);line-height:1;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;color:var(--akzent)}
.ablauf__schritt h3{margin:0}
.ablauf__schritt p{margin:0;color:var(--leise);max-width:48ch}
@media (max-width:699px){
  .ablauf__schritt{grid-template-columns:56px minmax(0,1fr);row-gap:.5rem}
  .ablauf__schritt p{grid-column:2}
}

.daten{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:20px;row-gap:2rem;align-items:start}
.daten__block{grid-column:span 6}
.daten__block h3{margin-bottom:1rem}
.daten__liste{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:2rem;font-variant-numeric:tabular-nums}
.daten__liste dt,.daten__liste dd{margin:0;padding:.7rem 0;border-top:1px solid var(--linie)}
.daten__liste dt{color:var(--leise)}
.daten__tabelle{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.daten__tabelle th,.daten__tabelle td{text-align:left;padding:.75rem 0;border-top:1px solid var(--linie);vertical-align:top}
.daten__tabelle th{font-weight:700}
.daten__tabelle td:last-child,.daten__tabelle th:last-child{text-align:right}
@media (max-width:799px){.daten__block{grid-column:1 / -1}}

.fragen{border-top:1px solid var(--linie);max-width:78ch}
.frage{border-bottom:1px solid var(--linie)}
.frage summary{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.15rem 0;cursor:pointer;list-style:none;font-family:var(--schrift);font-weight:700;font-size:20px;line-height:1.3;min-height:44px}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{content:"+";flex:none;font-weight:300;font-size:1.6rem;line-height:1;color:var(--akzent);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.frage[open] summary::after{transform:rotate(45deg)}
.frage p{margin:0 0 1.35rem;color:var(--leise);max-width:62ch}

.lauf__buehne{position:relative}
html.js:not(.still) .lauf{height:var(--lauf,250svh)}
html.js:not(.still) .lauf__buehne{position:sticky;top:var(--kopf-h);height:calc(100svh - var(--kopf-h));overflow:hidden}

html.js [data-mehr-liste]:not(.ist-offen) [data-mehr-rest]{display:none}
html.ohne-js [data-mehr]{display:none!important}

.regler{-webkit-appearance:none;appearance:none;width:100%;height:44px;margin:0;background:transparent;cursor:pointer}
.regler::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--linie)}
.regler::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-12px;border-radius:50%;background:var(--akzent);border:2px solid var(--text)}
.regler::-moz-range-track{height:4px;border-radius:2px;background:var(--linie)}
.regler::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--akzent);border:2px solid var(--text)}

.demo{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:clamp(12px,4vw,40px);background:rgb(20 24 18/.55)}
.demo__karte{position:relative;width:min(100%,640px);max-height:min(92vh,860px);overflow:auto;overscroll-behavior:contain;background:var(--papier);color:var(--text);border-radius:var(--radius);padding:clamp(22px,3vw,38px)}
.demo__kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;margin-bottom:16px}
.demo__marke{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--leise)}
.demo__marke::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--akzent)}
.demo__zu{border:1px solid var(--linie);background:none;border-radius:50%;width:44px;height:44px;display:grid;place-items:center;flex:none}
.demo__zu:hover{background:var(--kachel)}
.demo__balken{height:3px;background:var(--linie);border-radius:2px;overflow:hidden;margin-bottom:26px}
.demo__balken i{display:block;height:100%;background:var(--akzent);transform-origin:0 50%;transform:scaleX(var(--teil,.2));transition:transform .35s var(--kurve)}
.demo__titel{font-family:var(--schrift);font-weight:600;font-size:clamp(28px,3.4vw,44px);line-height:.95;letter-spacing:-.025em;text-transform:uppercase;margin:0 0 8px}
.demo__titel:focus,.demo__titel:focus-visible{outline:0;box-shadow:none}
.demo__frage{font-size:15px;color:var(--leise);margin-bottom:22px;max-width:none}
.demo__wahl{display:grid;gap:10px}
.demo__knopf{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;text-align:left;padding:14px 18px;min-height:56px;background:var(--kachel);border:1px solid transparent;border-radius:var(--radius);font-size:15px;font-weight:600;transition:border-color .2s,background .2s}
.demo__knopf:hover{border-color:var(--text)}
.demo__knopf[aria-pressed="true"]{background:var(--akzent);border-color:var(--akzent);color:var(--akzent-text)}
.demo__knopf small{display:block;font-weight:400;font-size:13px;color:var(--leise);margin-top:2px}
.demo__knopf[aria-pressed="true"] small{color:var(--akzent-text)}
.demo__felder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin:4px 0 18px}
.demo__felder--eins{grid-template-columns:minmax(0,1fr)}
.demo__feld{display:grid;gap:6px;font-size:13px;font-weight:700}
.demo__feld span i{font-style:normal;font-weight:400;color:var(--leise);margin-left:6px}

.demo__feld input{width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--leise);border-radius:var(--radius);background:#fff;font:inherit;font-size:16px;font-weight:400;color:var(--text)}
.demo__feld input::placeholder{color:var(--leise);opacity:1}
.demo__weiter{display:flex;justify-content:flex-end;margin-top:4px}

.demo__monat{font-family:var(--schrift);font-weight:600;font-size:22px;letter-spacing:-.01em;margin:0 0 12px}
.demo__gitter{display:grid;grid-template-columns:repeat(var(--spalten,5),minmax(44px,1fr));gap:6px}
.demo__tagkopf{text-align:center;font-size:12px;color:var(--leise);padding:4px 0}
.demo__tag{display:grid;align-content:center;justify-items:center;gap:1px;min-height:52px;min-width:44px;padding:4px 2px;border:1px solid transparent;border-radius:var(--radius);background:var(--kachel);font-size:15px;line-height:1.1;font-variant-numeric:tabular-nums}
.demo__tag b{font-weight:600}
.demo__tag small{font-size:12px;color:var(--leise)}
.demo__tag:not(:disabled):hover{border-color:var(--text)}
.demo__tag:disabled{background:none;color:var(--leise);cursor:default}
.demo__tag:disabled b{text-decoration:line-through}
.demo__tag--leer{background:none}
.demo__tag[aria-pressed="true"]{background:var(--akzent);border-color:var(--akzent);color:var(--akzent-text)}
.demo__tag[aria-pressed="true"] small{color:var(--akzent-text)}
.demo__zeiten{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.demo__zeitkopf{flex:1 0 100%;font-size:13px;font-weight:700;margin:0}
.demo__zeit{min-height:44px;min-width:72px;padding:10px 14px;border:1px solid var(--leise);border-radius:var(--radius);background:#fff;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.demo__zeit:not(:disabled):hover{border-color:var(--text)}
.demo__zeit:disabled{border-color:var(--linie);background:none;color:var(--leise);text-decoration:line-through;cursor:default}
.demo__zeit[aria-pressed="true"]{background:var(--akzent);border-color:var(--akzent);color:var(--akzent-text)}
.demo__klein{flex:1 0 100%;font-size:13px;color:var(--leise);margin-top:12px;max-width:none}

.demo__ergebnis dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 20px;margin:0 0 20px;padding:20px;background:var(--kachel);border-radius:var(--radius);font-size:14px}
.demo__ergebnis dt{font-weight:700}
.demo__ergebnis dd{margin:0;color:var(--leise);overflow-wrap:anywhere}
.demo__wege{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;align-items:center}
.demo__wege.paar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.demo__haken{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--akzent);color:var(--akzent-text);margin-bottom:16px}
.demo__haken svg{width:26px;height:26px;stroke-width:2.2}
.demo__fuss{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:26px;padding-top:14px;border-top:1px solid var(--linie)}
.demo__zurueck{background:none;border:0;color:var(--text);font-size:14px;font-weight:600;min-height:44px;min-width:44px;padding:0 6px}
.demo__zurueck:hover{text-decoration:underline;text-underline-offset:4px}
.demo__hinweis{flex:1;font-size:12px;color:var(--leise);text-align:center}

.demo-offen .demo__karte{width:100%;max-height:none;overflow:visible;background:var(--kachel);padding:clamp(22px,3vw,40px)}
.demo-offen .demo__knopf,.demo-offen .demo__tag:not(:disabled):not([aria-pressed="true"]):not(.demo__tag--leer),.demo-offen .demo__ergebnis dl{background:var(--papier)}
.demo-offen__ohne{padding:clamp(22px,3vw,40px);background:var(--kachel);border-radius:var(--radius)}
@media(max-width:560px){
  .demo{padding:0;align-items:flex-end}
  .demo__karte{width:100%;max-height:92svh;border-radius:12px 12px 0 0;padding:20px 20px calc(20px + env(safe-area-inset-bottom))}
  .demo-offen .demo__karte{border-radius:var(--radius);padding:20px 16px}
  .demo__titel{font-size:30px}
  .demo__felder{grid-template-columns:minmax(0,1fr)}
  .demo__gitter{gap:4px}
}

.standort{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,4vw,56px);align-items:start}
.standort__daten dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 22px;margin:24px 0 0;font-size:14px}
.standort__daten dt{font-weight:700;white-space:nowrap}
.standort__daten dd{margin:0;color:var(--leise)}
.standort__aktion{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.karte{position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--kachel);border:1px solid var(--linie)}

.karte iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.karte__pin{position:absolute;left:50%;top:50%;z-index:2;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--akzent);box-shadow:0 0 0 4px rgb(255 255 255/.9),0 0 0 5px var(--text);pointer-events:none}
.karte.ist-bewegt .karte__pin,.karte:not(.ist-geladen) .karte__pin{display:none}
.karte iframe:focus,.karte.ist-fokus iframe{outline:3px solid var(--fokus);outline-offset:-3px}
.karte__platte{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;text-align:center;padding:24px;background:var(--kachel)}
.karte__platte p{font-size:13px;color:var(--leise);max-width:34ch}
@media(max-width:900px){
  .standort{grid-template-columns:minmax(0,1fr)}
  .karte{aspect-ratio:16/11}
}

html.js .buehne__bild{animation:maschine-auf 1.1s var(--kurve)}
@keyframes maschine-auf{from{opacity:0;transform:translateY(4%) scale(1.03)}to{opacity:1;transform:translateY(-2%) scale(1)}}
html.js .auf{opacity:0;transform:translateY(14px);transition:opacity .7s var(--kurve),transform .7s var(--kurve)}
html.js .auf.is-da{opacity:1;transform:none}
.ist-pausiert,.ist-pausiert *,.ist-angehalten,.ist-angehalten *{animation-play-state:paused!important}
html.still{scroll-behavior:auto}
html.still *,html.still *::before,html.still *::after{animation:none!important;transition:none!important}
html.still .auf{opacity:1!important;transform:none!important}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}html.js .auf{opacity:1;transform:none}}

@media(max-width:1100px){
  .marke__name{display:none}
  .hero{grid-template-columns:48% 52%;min-height:640px;min-height:calc(100svh - var(--kopf-h))}
  .hero h1{font-size:72px}
  .raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px}
  .stunden,.liefern,.kontakt{grid-template-columns:minmax(0,1fr);gap:40px}
  .adresse{border-left:0;border-top:1px solid rgb(32 34 29/.3);padding-left:0;padding-top:28px}
  .versprechen{display:none}
}
@media(max-width:1180px),(max-height:700px){
  .hero__ecke{top:calc(var(--kopf-h) + 18px);bottom:auto}
  html[data-variante="3"] .hero{padding-top:calc(var(--kopf-h) + 80px)}
}

@media(min-width:761px) and (max-height:520px){
  :root{--pille-platz:0px}
  .fassung{flex-direction:column;left:auto;right:10px;top:calc(var(--kopf-h) + 70px);bottom:auto;transform:none;padding:5px;border-radius:26px}
  .fassung [role=group]{flex-direction:column}
  .fassung__auf{left:auto;right:10px;top:calc(var(--kopf-h) + 70px);bottom:auto;transform:none}
  .fassung.ist-weg,.fassung__auf.ist-weg{transform:translateX(18px)}
  .fassung__marke,.fassung button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .fassung button{padding:0}
}
@media(max-width:760px){
  :root{--rand:24px;--kopf-h:64px;--pille-platz:76px}
  html{scroll-padding-bottom:calc(var(--leiste-h) + 20px + env(safe-area-inset-bottom))}
  .marke__zeichen{font-size:36px}
  .marke__name{display:block;font-size:12px;padding-left:12px;letter-spacing:.06em}
  .marke{gap:12px}
  .nav{display:none}
  .kopf__tel span{display:none}
  .kopf__tel{margin-left:auto}
  .menue{display:block}

  .hero{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;min-height:calc(100svh - var(--kopf-h));max-height:none;padding:24px var(--rand) calc(16px + var(--pille-platz))}
  .hero__text{order:1}
  .hero__fuss{position:static;order:2;margin-top:22px}
  .buehne,html[data-variante="1"] .hero__foto{order:3}
  .hero__text{max-width:none}
  .hero h1{font-size:clamp(46px,12.4vw,80px);line-height:.94}
  .hero__satz{font-size:14px;max-width:330px;margin-top:18px}
  .hero__aktion{gap:12px;margin-top:22px}
  .knopf{min-height:50px;padding:13px 18px;gap:18px;font-size:13px}
  .buehne{flex:1 1 240px;min-height:160px;max-height:340px;margin:22px 0 8px}
  .buehne__bild{width:100%;max-width:430px;height:100%;object-fit:contain}
  .buehne::after{font-size:200px;top:2%;left:2%}
  .schild{width:190px;bottom:0;font-size:12px}
  .schild b{font-size:13px}
  .hero__fuss{min-height:58px;font-size:12px}
  .hinab{width:44px;height:44px}
  .hinab svg{width:17px}
  .hero__ecke{top:calc(var(--kopf-h) + 12px)}
  html[data-variante="1"] .hero{padding-bottom:var(--pille-platz);align-items:stretch}
  html[data-variante="1"] .hero__foto{position:relative;inset:auto;flex:1 1 240px;min-height:160px;max-height:360px;margin:22px calc(var(--rand) * -1) 0}
  html[data-variante="1"] .hero__foto::after{display:none}
  html[data-variante="1"] .hero__text{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0;margin-bottom:0}
  html[data-variante="1"] .hero__fuss{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0;border-top:1px solid var(--linie);border-radius:0}
  html[data-variante="1"] .hero h1{font-size:clamp(46px,11.4vw,72px)}
  html[data-variante="3"] .hero{min-height:100svh;padding-top:calc(var(--kopf-h) + 72px);padding-bottom:calc(20px + var(--pille-platz));justify-content:flex-end;align-items:stretch}
  html[data-variante="3"] .hero h1{font-size:clamp(40px,11vw,64px)}
  html[data-variante="3"] .hero__fuss{margin-top:18px}
  .abschnitt{padding:62px var(--rand)}
  .kopfzeile{display:block;margin-bottom:30px}
  .kopfzeile p{margin-top:18px;max-width:none}
  h2{font-size:clamp(34px,9vw,46px)}
  .produkt__bild{aspect-ratio:1.03}
  .produkt__zeile{padding:14px 0}
  h3{font-size:17px}
  .stundenpreise > div{padding:14px 14px 0}
  .stundenpreise > div:nth-child(3){padding-left:0;border-left:0}
  .liefern dl > div{grid-template-columns:96px minmax(0,1fr);font-size:12px}
  .kontakt__tel{font-size:32px;gap:14px}
  .standort__aktion{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .standort__aktion > *{justify-content:center}
  .leiste{display:flex}
  .leiste > *{flex:1 1 0;min-width:0}
  .fuss{padding-bottom:calc(var(--leiste-h) + 26px);flex-direction:column;align-items:flex-start;gap:2px}

  .fassung{bottom:12px;max-width:calc(100% - 24px);gap:2px;padding:5px 5px 5px 12px}
  .fassung__marke span{display:none}
  .fassung button{padding:9px 8px;font-size:13px;min-width:44px;min-height:44px}
  .fassung button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .fassung__auf{bottom:12px}
}

:root{
  --maske-hell:var(--papier);
  --maske-leise:color-mix(in srgb,var(--papier) 70%,var(--dunkel));
  --maske-satz:color-mix(in srgb,var(--papier) 82%,var(--dunkel));
  --maske-linie:color-mix(in srgb,var(--papier) 16%,transparent);
  --maske-linie-2:color-mix(in srgb,var(--papier) 32%,transparent);
  --maske-grund:color-mix(in srgb,var(--dunkel) 84%,var(--papier));
  --maske-ring:var(--akzent);
  --maske-ring-grund:var(--dunkel);
  --maske-lauf:300svh;
  --maske-fuss:76px;
}
html:not([data-variante="4"]) .maske{display:none}
.maske{--maske-oben:var(--kopf-h,0px);position:relative;background:var(--dunkel);color:var(--maske-hell)}

html[data-variante="4"] .kopf{position:sticky;top:0;z-index:80;background:var(--dunkel);color:var(--maske-hell);--fokus:#fff;--fokus-gegen:var(--dunkel)}

html[data-variante="4"] .kopf::before{background:var(--dunkel);opacity:1}
html[data-variante="4"] .kopf.is-fest::before{border-bottom-color:var(--maske-linie)}
html[data-variante="4"] .kopf .marke__name{border-left-color:var(--maske-linie-2)}
html[data-variante="4"] #mobilnav{position:fixed;left:0;right:0;top:var(--kopf-h);z-index:79}
html[data-variante="4"].maske-flug .kopf :is(.marke,.kopf__marke) > *{transition:opacity .6s var(--kurve)}
html[data-variante="4"].maske-flug.maske-kopf-frei .kopf :is(.marke,.kopf__marke) > *{opacity:0}
html[data-variante="4"].maske-flug.maske-kopf-frei .kopf :is(.marke,.kopf__marke):focus-visible > *{opacity:1}

html.maske-leiste-zu .leiste{visibility:hidden!important;opacity:0!important;pointer-events:none!important}

.maske__buehne{position:relative;height:calc(100svh - var(--maske-oben));min-height:600px;overflow:hidden;isolation:isolate;background:var(--dunkel)}
html.maske-flug .maske__lauf{height:calc(var(--maske-lauf) - var(--maske-oben))}
html.maske-flug .maske__buehne{position:sticky;top:var(--maske-oben)}
html.maske-flug:not(.maske-bereit) .maske__buehne{animation:maske-warte 2.4s steps(1,end) both}
@keyframes maske-warte{from{opacity:0}to{opacity:1}}

.maske__fenster,.maske__ziel{position:absolute;inset:0}
.maske__fenster{z-index:1;display:none;overflow:hidden;background:var(--papier)}
html.maske-flug .maske__fenster{display:block}
.maske__fenster > div{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0}
.maske__fenster img{position:absolute;inset:-6%;width:112%;height:112%;max-width:none;object-fit:cover;display:block}
html.maske-flug.maske-bereit .maske__fenster > div,html.maske-flug.maske-bereit .maske__verlauf{will-change:transform}

.maske__ziel{z-index:2;overflow:hidden;background:var(--maske-grund)}
.maske__ziel > div{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0}
.maske__medium{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block;border:0}
html.ohne-js video.maske__medium{display:none}
html.js:not(.still) .maske__ziel.ist-bild .maske__medium{transform-origin:var(--maske-zx,50%) var(--maske-zy,50%);animation:maske-kamera 24s ease-in-out infinite alternate}
@keyframes maske-kamera{from{transform:scale(1)}to{transform:scale(1.06)}}
html.ohne-js .maske__medium{object-position:0.0% 50.0%;transform:scale(1.100);transform-origin:50.6% 50.0%}
@media (min-width:761px) and (max-width:1180px) and (orientation:portrait){html.ohne-js .maske__medium{object-position:46.4% 50.0%;transform:scale(1.100);transform-origin:55.0% 50.0%}}
@media (max-width:760px){html.ohne-js .maske__medium{object-position:48.0% 50.0%;transform:scale(1.100);transform-origin:55.0% 50.0%}}
html.maske-flug .maske__fenster,html.maske-flug .maske__ziel{transition:opacity 1.2s var(--kurve)}
html.maske-flug:not(.maske-an) .maske__fenster,html.maske-flug:not(.maske-an) .maske__ziel{opacity:0}

.maske__deckel{position:absolute;inset:0;z-index:3;width:100%;height:100%;display:none;pointer-events:none;overflow:visible;fill:none;stroke:none}
html.maske-flug .maske__deckel{display:block}
.maske__platte{fill:var(--dunkel);stroke:none}
.maske__ring-grund{fill:none;stroke:var(--maske-ring-grund);stroke-width:7px;vector-effect:non-scaling-stroke}
.maske__ring{fill:none;stroke:var(--maske-ring);stroke-width:2.5px;vector-effect:non-scaling-stroke}

.maske__verlauf{position:absolute;left:0;right:0;top:0;bottom:0;z-index:4;pointer-events:none;
  background:linear-gradient(90deg,color-mix(in srgb,var(--dunkel) 95%,transparent) 0%,color-mix(in srgb,var(--dunkel) 93%,transparent) var(--maske-tr,44%),color-mix(in srgb,var(--dunkel) 72%,transparent) var(--maske-hr,53%),color-mix(in srgb,var(--dunkel) 28%,transparent) calc(var(--maske-hr,53%) + 8%),transparent calc(var(--maske-hr,53%) + 16%)),linear-gradient(0deg,color-mix(in srgb,var(--dunkel) 92%,transparent) 0%,color-mix(in srgb,var(--dunkel) 74%,transparent) 20%,transparent 40%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 170px);mask-image:linear-gradient(180deg,transparent 0,#000 170px)}

.maske__unten{position:absolute;z-index:5;left:var(--rand);right:var(--rand);bottom:calc(var(--maske-fuss) + clamp(22px,3.2vh,36px) + var(--maske-feld-platz,0px))}
.maske--ohne-fuss .maske__unten{bottom:calc(clamp(34px,5vh,56px) + var(--maske-feld-platz,0px))}
@media (min-width:761px){html[data-vorschau="an"] .maske--ohne-fuss .maske__feld{bottom:100px}html[data-vorschau="an"] .maske--ohne-fuss .maske__unten{bottom:calc(100px + var(--maske-feld-platz,0px))}}

@media (min-width:761px){
  html.js:not(.maske-flug) .maske__fuss{bottom:var(--pille-platz,0px)}
  html.js:not(.maske-flug) .maske:not(.maske--ohne-fuss) .maske__unten{bottom:calc(var(--maske-fuss) + var(--pille-platz,0px) + clamp(22px,3.2vh,36px) + var(--maske-feld-platz,0px))}
  html.js:not(.maske-flug) .maske:not(.maske--ohne-fuss) .maske__feld{bottom:calc(var(--maske-fuss) + var(--pille-platz,0px) + 16px)}
}
.maske__text{max-width:860px}
.maske__etikett{display:flex;align-items:baseline;gap:12px;margin:0 0 22px;max-width:none;font-family:var(--schrift-text);font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1.4;color:var(--maske-leise)}
.maske__etikett::before{content:"";flex:none;width:8px;height:8px;background:var(--akzent);transform:translateY(-1px)}
.maske__h1{margin:0;max-width:none;font-size:clamp(50px,min(7.4vw,12svh),120px);line-height:.95;color:var(--maske-hell);transform-origin:0 100%;text-wrap:balance}
.maske__h1 .zeile{display:block}
.maske__h1 .zart{color:var(--maske-leise)}
.maske__satz{margin:22px 0 0;max-width:31em;font-size:18px;line-height:1.6;color:var(--maske-satz);text-wrap:pretty}
.maske__aktion{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.maske__ikon{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.maske .knopf.maske__tel{background:var(--dunkel);color:var(--maske-hell);border:1px solid var(--maske-linie-2)}
.maske .knopf.maske__tel:hover{background:color-mix(in srgb,var(--dunkel) 88%,var(--papier))}
.maske__nach{display:none}
.maske__leser{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.maske__hinweis{position:absolute;right:0;bottom:0;display:none;align-items:center;gap:12px;height:54px;margin:0;font-family:var(--schrift-text);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--maske-leise)}
html.maske-flug .maske__hinweis{display:flex}
.maske__hinweis i{display:block;width:1px;height:28px;background:var(--maske-linie-2);overflow:hidden;position:relative}
.maske__hinweis i::after{content:"";position:absolute;left:0;top:0;width:1px;height:12px;background:var(--akzent);animation:maske-tropfen 2.2s var(--kurve) infinite}
@keyframes maske-tropfen{from{transform:translateY(-12px)}to{transform:translateY(28px)}}
html.still .maske__hinweis i::after,.maske__hinweis.ist-weg i::after{animation:none}

.maske__schild{position:absolute;z-index:6;top:18px;right:var(--rand);margin:0;max-width:none;padding:3px 8px;background:var(--dunkel);font-family:var(--schrift-text);font-size:12px;letter-spacing:.04em;line-height:1.4;color:var(--maske-leise)}

.maske__belege{margin:0}
.maske__fahne{display:flex;align-items:center;pointer-events:none;--v:.6s}
.maske__fahne + .maske__fahne{--v:.78s}
.maske__fahne dd{margin:0;display:flex;align-items:center}
.maske__fahne-punkt{flex:none;width:10px;height:10px;border-radius:50%;background:var(--akzent);box-shadow:0 0 0 2px var(--dunkel)}
.maske__fahne-linie{flex:none;display:block;width:44px;height:1px;background:var(--maske-leise);transform-origin:0 50%}
.maske__fahne-box{display:block;max-width:236px;padding:9px 13px 10px;background:var(--dunkel);border:1px solid var(--maske-linie-2);font-family:var(--schrift-text);font-size:13.5px;line-height:1.35;color:var(--maske-leise)}
.maske__fahne-box b{display:block;margin-bottom:4px;font-family:var(--schrift);font-weight:600;font-size:24px;line-height:1.05;letter-spacing:-.01em;color:var(--maske-hell);font-variant-numeric:tabular-nums}
.maske__fahne--links,.maske__fahne--links dd{flex-direction:row-reverse}
.maske__fahne--links .maske__fahne-linie{transform-origin:100% 50%}
.maske__fahne--weg{opacity:0!important}
html.js .maske__fahne{position:absolute;left:0;top:0;z-index:5}
.maske__feld{position:absolute;z-index:5;right:var(--rand);bottom:calc(var(--maske-fuss) + 16px);display:grid;grid-template-columns:auto auto;border:1px solid var(--maske-linie-2);background:var(--dunkel);font-family:var(--schrift-text);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--maske-leise)}
.maske--ohne-fuss .maske__feld{bottom:16px}
.maske__feld dd{margin:0;display:contents}
.maske__feld span{display:flex;align-items:baseline;gap:10px;padding:7px 12px;border-right:1px solid var(--maske-linie);border-bottom:1px solid var(--maske-linie);white-space:nowrap}
.maske__feld span:nth-child(2n){border-right:0}
.maske__feld span:nth-last-child(-n+2){border-bottom:0}
.maske__feld b{font-family:var(--schrift);font-weight:600;font-size:18px;letter-spacing:0;color:var(--maske-hell)}
.maske__feld--eins{grid-template-columns:auto}
.maske__feld--eins span{border-right:0}
html.ohne-js .maske__belege{position:absolute;z-index:5;right:var(--rand);top:clamp(64px,14%,140px);display:grid;gap:12px;justify-items:end}
html.ohne-js .maske__fahne-punkt,html.ohne-js .maske__fahne-linie{display:none}
html.ohne-js .maske__feld{position:static}

.maske__schlag{position:absolute;left:0;top:0;z-index:4;width:0;height:0;pointer-events:none;display:none}
html.maske-flug .maske__schlag{display:block}
.maske__schlag > *{position:absolute;left:0;top:0;opacity:0}
.maske__welle{width:220px;height:220px;margin:-110px 0 0 -110px;border:3px solid var(--akzent);border-radius:50%;box-shadow:0 0 0 2px color-mix(in srgb,var(--dunkel) 55%,transparent)}
.maske__welle--2{border-width:2px}
.maske__kern{width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:var(--akzent);box-shadow:0 0 0 3px color-mix(in srgb,var(--dunkel) 55%,transparent)}
.maske__funke{width:0;height:0}
.maske__funke b{position:absolute;left:0;top:-1.5px;width:46px;height:3px;border-radius:2px;background:var(--akzent);transform-origin:0 50%;opacity:0}
.maske__funke:nth-child(3n) b{width:34px}
.maske__funke:nth-child(3n+1) b{width:60px}
.maske__schlag.ist-an .maske__funke{opacity:1}
.maske__schlag.ist-an .maske__welle{animation:maske-welle .8s cubic-bezier(.2,.7,.3,1) .04s both}
.maske__schlag.ist-an .maske__welle--2{animation-delay:.16s}
.maske__schlag.ist-an .maske__kern{animation:maske-kern .62s ease-out .04s both}
.maske__schlag.ist-an .maske__funke b{animation:maske-funke .7s cubic-bezier(.15,.7,.3,1) .06s both}
@keyframes maske-welle{from{opacity:1;transform:scale(.08)}60%{opacity:.9}to{opacity:0;transform:scale(1)}}
@keyframes maske-kern{0%{opacity:1;transform:scale(.4)}30%{opacity:1;transform:scale(1.15)}100%{opacity:0;transform:scale(.6)}}
@keyframes maske-funke{from{opacity:1;transform:translateX(12px) scaleX(.5)}to{opacity:0;transform:translateX(104px) scaleX(1)}}

html.maske-flug .maske.ist-gelandet .maske__ziel > div{transition:opacity .55s ease-out .1s}
html.maske-flug .maske.ist-gelandet [data-maske-etikett]{transition:opacity .6s var(--kurve) .2s,transform .8s var(--kurve) .2s}
html.maske-flug .maske.ist-gelandet [data-maske-h1] .zeile{transition:opacity .7s var(--kurve) .24s,transform .9s var(--kurve) .24s}
html.maske-flug .maske.ist-gelandet [data-maske-h1] .zeile + .zeile{transition-delay:.34s}
html.maske-flug .maske.ist-gelandet [data-maske-satz]{transition:opacity .7s var(--kurve) .5s,transform .9s var(--kurve) .5s}
html.maske-flug .maske:not(.ist-gelandet) .maske__fahne-punkt{opacity:0;transform:scale(.3)}
html.maske-flug .maske:not(.ist-gelandet) .maske__fahne-linie{transform:scaleX(0)}
html.maske-flug .maske:not(.ist-gelandet) .maske__fahne-box{opacity:0;transform:translateX(-10px)}
html.maske-flug .maske:not(.ist-gelandet) .maske__fahne--links .maske__fahne-box{transform:translateX(10px)}
html.maske-flug .maske:not(.ist-gelandet) .maske__feld{opacity:0}
html.maske-flug .maske.ist-gelandet .maske__fahne-punkt{transition:opacity .3s ease-out var(--v),transform .5s var(--kurve) var(--v)}
html.maske-flug .maske.ist-gelandet .maske__fahne-linie{transition:transform .55s var(--kurve) calc(var(--v) + .12s)}
html.maske-flug .maske.ist-gelandet .maske__fahne-box{transition:opacity .5s var(--kurve) calc(var(--v) + .36s),transform .7s var(--kurve) calc(var(--v) + .36s)}
html.maske-flug .maske.ist-gelandet .maske__feld{transition:opacity .6s var(--kurve) 1.1s}

.maske__fuss{position:absolute;z-index:5;left:var(--rand);right:var(--rand);bottom:0;height:var(--maske-fuss);display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid var(--maske-linie);font-family:var(--schrift-text);font-size:14px;color:var(--maske-leise)}
.maske__fuss > span{display:inline-flex;align-items:center;gap:10px;min-height:44px}
.maske__weiter{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--maske-linie-2);color:var(--maske-hell)}
.maske__weiter:hover{background:color-mix(in srgb,var(--papier) 8%,transparent)}

@media (min-width:761px) and (max-width:1180px) and (orientation:portrait){

  .maske{--maske-feld-platz:72px}
  .maske__verlauf{top:40%;background:color-mix(in srgb,var(--dunkel) 93%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 64px);mask-image:linear-gradient(180deg,transparent 0,#000 64px)}
  .maske__satz{max-width:34em}
}
@media (max-width:1180px){.maske__satz{max-width:28em}}

@media (max-width:760px){
  :root{--maske-fuss:0px}
  .maske__buehne{min-height:560px}
  .maske__unten{bottom:calc(82px + env(safe-area-inset-bottom))}
  html[data-vorschau="an"] .maske__unten{bottom:calc(142px + env(safe-area-inset-bottom))}
  .maske__fuss{display:none}
  .maske__etikett{margin-bottom:16px;font-size:12px}
  .maske__h1{font-size:clamp(44px,12.6vw,60px)}
  .maske__unten .maske__satz{display:none}
  .maske__hinweis{right:auto;left:0;bottom:calc(100% + 10px);height:40px}
  .maske__nach{display:block;position:relative;margin-top:-44px;padding:0 var(--rand) 8px}
  html[data-vorschau="an"] .maske__nach{margin-top:-60px}
  html[data-vorschau="an"].js:not(.maske-flug) .maske__nach{margin-top:0}
  .maske__nach .maske__satz{margin-top:0;font-size:16.5px;color:var(--maske-leise)}
  .maske__aktion{margin-top:22px;flex-wrap:nowrap;gap:10px}
  .maske__aktion .knopf:first-child{flex:1 1 auto}
  .maske .knopf.maske__tel{flex:0 0 54px;width:54px;padding:0;gap:0}
  .maske__nummer{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .maske__fahne-linie{width:16px}
  .maske__fahne-box{max-width:150px;padding:6px 9px 7px;font-size:12px;line-height:1.3}
  .maske__fahne-box b{font-size:18px;margin-bottom:2px}
  .maske__feld{display:none}
  html.ohne-js .maske__belege{top:56px;gap:8px}
  .maske__verlauf{top:40%;background:color-mix(in srgb,var(--dunkel) 94%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 60px);mask-image:linear-gradient(180deg,transparent 0,#000 60px)}
  .maske__schild{top:10px;left:var(--rand);right:auto;padding:2px 6px;letter-spacing:0;white-space:nowrap}
}
@media (max-width:760px) and (max-height:780px){
  .maske__h1{font-size:clamp(38px,11vw,48px)}
  .maske__aktion{margin-top:18px}
  .maske__etikett{margin-bottom:12px}
}

html[data-richtungen] main{display:flex;flex-direction:column}
html[data-richtungen] main>:nth-child(1){--i:10}  html[data-richtungen] main>:nth-child(2){--i:20}  html[data-richtungen] main>:nth-child(3){--i:30}
html[data-richtungen] main>:nth-child(4){--i:40}  html[data-richtungen] main>:nth-child(5){--i:50}  html[data-richtungen] main>:nth-child(6){--i:60}
html[data-richtungen] main>:nth-child(7){--i:70}  html[data-richtungen] main>:nth-child(8){--i:80}  html[data-richtungen] main>:nth-child(9){--i:90}
html[data-richtungen] main>:nth-child(10){--i:100} html[data-richtungen] main>:nth-child(11){--i:110} html[data-richtungen] main>:nth-child(12){--i:120}
html[data-richtungen] main>:nth-child(13){--i:130} html[data-richtungen] main>:nth-child(14){--i:140} html[data-richtungen] main>:nth-child(15){--i:150}
html[data-richtungen] main>:nth-child(16){--i:160} html[data-richtungen] main>:nth-child(17){--i:170} html[data-richtungen] main>:nth-child(18){--i:180}
html[data-richtungen] main>:nth-child(n+19){--i:190}
html[data-richtungen][data-variante="1"] main>*{order:var(--o1,var(--i,0))}
html[data-richtungen][data-variante="2"] main>*{order:var(--o2,var(--i,0))}
html[data-richtungen][data-variante="3"] main>*{order:var(--o3,var(--i,0))}
html[data-richtungen][data-variante="4"] main>*{order:var(--o4,var(--i,0))}
}