/* KONTUR – Beispielseite eines fiktiven Friseurs (AV Website Solutions).
 * Art Direction: Schwarzweiß-Fotografie auf Papier und Tinte, genau ein Akzent (Kobalt) als Linie, Plakatschrift in Versalien.
 * Kobalt ist die „Kontur“: Kanten, Zahlen, Regler, Schaltflächen und ein einziger voller Farbblock (Termin). Kein Verlauf, keine Rundkarten.
 * Gemeinsam für alle drei Fassungen (index, starter, exklusiv); Fassungsspezifisches steht in starter.css / exklusiv.css. */
@font-face{font-family:"Big Shoulders Display";src:url("../../assets/fonts/big-shoulders-display-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("../../assets/fonts/figtree-latin-wght-normal.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:swap}

:root{
  --papier:#ecebe6;--papier-2:#e1dfd8;--tinte:#0c0d10;--tinte-2:#15171d;--tinte-3:#1f222a;
  --grau:#5a5953;--grau-hell:#a7a69f;--kobalt:#2a44ff;--kobalt-hell:#8294ff;--kobalt-tief:#1a2fd1;
  --linie:rgba(12,13,16,.18);--linie-hell:rgba(236,235,230,.2);
  --anz:"Big Shoulders Display","Arial Narrow","Franklin Gothic Medium Cond",Impact,sans-serif;
  --fl:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,"Liberation Mono",monospace;
  --ease:cubic-bezier(.2,.75,.1,1);
  --seite:clamp(1.1rem,4.2vw,3.2rem);--kopf-h:72px;--max:1480px;
}
/* Seit 05.10.2026 stehen STARTER und PREMIUM auf dunkler Tinte (Betreiberregel: kein heller Grund); EXKLUSIV war schon dunkel und behält die Grundwerte.
   Skala umgekehrt (tinte = helle Schrift, papier = dunkler Grund); die ohnehin dunklen Flächen sind ausdrücklich gesetzt. */
.kt:not(.kt-ex){--papier:#101216;--papier-2:#171a20;--tinte:#ecebe6;--grau:#a7a69f;--linie:rgba(236,235,230,.2)}
html:has(body.kt:not(.kt-ex)){background:#101216;color:#ecebe6}
.kt:not(.kt-ex) .prinzip,.kt:not(.kt-ex) .looks,.kt:not(.kt-ex) .fuss{background:#08090b;color:#ecebe6}
.kt:not(.kt-ex) .scan-rahmen,.kt:not(.kt-ex) .leist-bild,.kt:not(.kt-ex) .salon-bild img,.kt:not(.kt-ex) .lz-bild{background:#08090b}
.kt:not(.kt-ex) .fuss a,.kt:not(.kt-ex) .look-an{color:#ecebe6}
.kt:not(.kt-ex) .looks{--strich:#ecebe6}
.kt:not(.kt-ex) .held-lead,.kt:not(.kt-ex) .adresse,.kt:not(.kt-ex) .s-lead{color:#c7c6c0}
.kt:not(.kt-ex) .td-wurzel{--td-text:#ecebe6;--td-text2:#b3b2ab;--td-grund:#14161b;--td-flaeche:#1b1e25;--td-linie:rgba(236,235,230,.22);--td-linie-stark:#ecebe6;--td-fehler:#ff9a8a;--td-ok:#7fd9a2}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf-h) + 8px);scroll-padding-bottom:5rem;background:var(--papier);color:var(--tinte)}
body{margin:0;font:400 1.0625rem/1.6 var(--fl);color:var(--tinte);background:var(--papier);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,figure,address,dl{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprung{position:absolute;left:12px;top:-90px;z-index:200;background:var(--tinte);color:var(--papier);padding:.8em 1.2em;font-weight:700;text-decoration:none}
.sprung:focus{top:12px}
:focus-visible{outline:3px solid var(--kobalt);outline-offset:3px}
.termin :focus-visible,.looks :focus-visible,.prinzip :focus-visible,.fuss :focus-visible,.kopf.dunkel :focus-visible{outline-color:var(--kobalt-hell)}
.termin-karte :focus-visible{outline-color:var(--kobalt)}
.mono{font:500 .72rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--seite)}
.punkt{display:inline-block;width:.55rem;height:.55rem;background:var(--kobalt);margin-right:.7rem;vertical-align:.04em}

/* ---------- Kopf ---------- */
.kopf{position:fixed;inset:0 0 auto 0;z-index:60;transition:background .3s,border-color .3s,transform .5s var(--ease);border-bottom:1px solid transparent}
.kopf-fest{background:var(--papier);border-bottom-color:var(--linie)}
.kopf-in{display:flex;align-items:center;gap:1.6rem;height:var(--kopf-h);max-width:var(--max);margin-inline:auto;padding-inline:var(--seite)}
.marke{display:flex;align-items:baseline;gap:.7rem;min-height:44px;padding-block:6px;text-decoration:none;color:var(--tinte)}
.marke b{font:800 2rem/1 var(--anz);letter-spacing:.07em}
.marke small{font:500 .66rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--grau)}
.nav{margin-left:auto}
.nav ul{display:flex;gap:.2rem}
.nav li a{display:inline-flex;align-items:center;min-height:44px;padding:0 .9rem;text-decoration:none;font:600 .74rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;border-bottom:2px solid transparent}
.nav li a:hover{color:var(--kobalt)}
.nav li a[aria-current]{border-bottom-color:var(--kobalt)}
.nav-fuss,.nav-toggle{display:none}
.kopf-cta{margin-left:.2rem}

/* ---------- Schaltflächen ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;min-height:54px;padding:.9rem 1.7rem;background:var(--kobalt);color:#fff;border:0;text-decoration:none;font:700 1rem/1 var(--anz);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background .25s,transform .25s var(--ease)}
.knopf:hover{background:var(--kobalt-tief)}
.knopf-klein{min-height:46px;padding:.7rem 1.2rem;font-size:.92rem}
.lnk{display:inline-flex;align-items:center;gap:.6rem;min-height:48px;text-decoration:none;font:700 .98rem/1 var(--anz);letter-spacing:.1em;text-transform:uppercase;border-bottom:2px solid var(--tinte)}
.lnk::after{content:"→";transition:transform .25s var(--ease)}
.lnk:hover{color:var(--kobalt);border-color:var(--kobalt)}
.lnk:hover::after{transform:translateX(4px)}
.aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 2rem}

/* ---------- Held ---------- */
.held{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(1.5rem,4vw,4.5rem);align-items:center;max-width:var(--max);margin-inline:auto;min-height:100svh;padding:calc(var(--kopf-h) + clamp(1rem,3vh,2.4rem)) var(--seite) clamp(1.5rem,4vh,3rem)}
.held-text{position:relative;z-index:2;display:grid;gap:1.15rem;justify-items:start}
.held-k{color:var(--grau)}
.held h1{font:800 clamp(5.6rem,15.4vw,16.5rem)/.78 var(--anz);letter-spacing:-.005em;text-transform:uppercase;margin:.25rem 0 .1rem -.04em;white-space:nowrap}
.w-ko{color:var(--tinte)}
.w-tur{color:transparent;-webkit-text-stroke:max(2px,.012em) var(--tinte)}
.held-zeile{font:700 clamp(1.8rem,3.1vw,3rem)/1.02 var(--anz);letter-spacing:.015em;text-transform:uppercase;max-width:16em}
.held-zeile em{font-style:normal;color:var(--kobalt)}
.held-lead{max-width:34rem;color:#34332f;font-size:clamp(1.02rem,1.25vw,1.18rem)}
.held-offen{display:flex;align-items:center;gap:.8rem;margin-top:.4rem;font:500 .74rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grau)}
.lampe{width:.65rem;height:.65rem;border-radius:50%;background:var(--grau-hell);flex:none}
.held-offen[data-offen="ja"] .lampe{background:#18a050;box-shadow:0 0 0 4px rgba(24,160,80,.2)}

/* Konturansicht */
.scan{position:relative;margin:0;justify-self:end;width:100%;max-width:560px}
.scan-rahmen{position:relative;width:100%;aspect-ratio:2/3;max-height:calc(100svh - 13.4rem);background:var(--tinte);overflow:hidden;touch-action:pan-y;cursor:ew-resize;margin-inline:auto;-webkit-user-select:none;user-select:none}
.scan-rahmen img,.scan-linie{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 24%}
.scan-linie{opacity:0;clip-path:inset(0 0 0 calc(var(--s,1) * 100%));transition:opacity .4s}
.scan-bereit .scan-linie{opacity:1}
.scan-kante{position:absolute;top:0;bottom:0;left:calc(var(--s,1) * 100%);width:0;pointer-events:none;opacity:0;transition:opacity .4s}
.scan-bereit .scan-kante{opacity:1}
.scan-kante::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:var(--kobalt-hell);box-shadow:0 0 0 1px rgba(12,13,16,.35)}
.scan-kante i{position:absolute;top:50%;left:-23px;width:46px;height:46px;margin-top:-23px;border-radius:50%;background:var(--kobalt);border:2px solid #fff;display:grid;place-items:center}
.scan-kante i::before{content:"◂ ▸";color:#fff;font:700 .8rem/1 var(--fl);letter-spacing:.04em;white-space:nowrap}
.scan-etikett{position:absolute;bottom:.9rem;padding:.4rem .6rem;background:var(--tinte);color:var(--papier);font-size:.64rem;pointer-events:none;transition:opacity .3s}
.scan-e-foto{left:.9rem}
.scan-e-linie{right:.9rem;background:var(--kobalt)}
.scan-regler-f{display:block;margin-top:.8rem}
.scan-regler{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;background:transparent;cursor:pointer}
.scan-regler::-webkit-slider-runnable-track{height:2px;background:var(--tinte)}
.scan-regler::-moz-range-track{height:2px;background:var(--tinte)}
.scan-regler::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-10px;background:var(--kobalt);border:2px solid var(--papier);border-radius:0;box-shadow:0 0 0 1px var(--tinte)}
.scan-regler::-moz-range-thumb{width:18px;height:18px;background:var(--kobalt);border:2px solid var(--papier);border-radius:0;box-shadow:0 0 0 1px var(--tinte)}
.scan-regler:focus-visible{outline:3px solid var(--kobalt);outline-offset:2px}
.scan figcaption{margin-top:.2rem;color:var(--grau);font-size:.66rem}
.scan-ohne .scan-regler-f,.scan-ohne .scan-kante,.scan-ohne .scan-etikett{display:none}
.scan-ohne .scan-rahmen{cursor:default}

/* ---------- Prinzip ---------- */
.prinzip{background:var(--tinte);color:var(--papier)}
.prinzip-liste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:var(--max);margin-inline:auto}
.prinzip-liste li{display:grid;gap:.7rem;align-content:start;padding:clamp(1.8rem,4vw,3.2rem) var(--seite) clamp(2rem,4vw,3.4rem);border-left:1px solid var(--linie-hell)}
.prinzip-liste li:first-child{border-left:0}
.prinzip-liste .mono{color:var(--kobalt-hell)}
.prinzip-liste h2{font:800 clamp(2rem,3.4vw,3.4rem)/.95 var(--anz);letter-spacing:.015em;text-transform:uppercase}
.prinzip-liste p{color:var(--grau-hell);max-width:24rem}

/* ---------- Sektionen ---------- */
.leist,.looks,.salon{padding:clamp(4.5rem,10vw,9rem) 0}
.sek-kopf{display:grid;gap:.9rem;margin-bottom:clamp(2rem,5vw,4.2rem);justify-items:start}
.sek-kopf .mono{color:var(--kobalt)}
.sek-kopf h2,.termin-kopf h2,.salon-text h2{font:800 clamp(3.4rem,8.4vw,8.4rem)/.84 var(--anz);letter-spacing:-.005em;text-transform:uppercase}
.sek-kopf h2 em{font-style:normal;color:transparent;-webkit-text-stroke:max(2px,.014em) var(--strich,var(--tinte))}
.looks{--strich:var(--papier)}
.sek-kopf .hinweis{color:var(--grau)}
.sek-text{max-width:30rem;color:var(--grau)}

/* ---------- Leistungen ---------- */
.leist-raster{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(2rem,5vw,6rem);align-items:start}
.leist-liste{border-top:2px solid var(--tinte)}
.lz{border-bottom:1px solid var(--linie)}
.lz-a{position:relative;display:grid;grid-template-columns:2.4rem minmax(0,1fr) auto 1.6rem;gap:1rem;align-items:center;min-height:84px;padding:1.15rem 0;text-decoration:none;color:inherit;transition:padding-left .35s var(--ease)}
.lz-nr{color:var(--grau);transition:color .3s}
.lz-t{display:grid;gap:.25rem}
.lz-t b{font:800 clamp(1.6rem,2.7vw,2.5rem)/.98 var(--anz);letter-spacing:.015em;text-transform:uppercase}
.lz-t small{font-size:.94rem;color:var(--grau);line-height:1.35}
.lz-m{display:grid;justify-items:end;gap:.1rem;font-size:.82rem;color:var(--grau);white-space:nowrap}
.lz-m b{font:800 1.5rem/1 var(--anz);color:var(--tinte);letter-spacing:.02em}
.lz-pfeil{width:1.4rem;height:1.4rem;position:relative}
.lz-pfeil::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--tinte);transform:scaleX(.5);transform-origin:left;transition:transform .35s var(--ease),background .3s}
.lz-pfeil::after{content:"";position:absolute;right:1px;top:50%;width:.55rem;height:.55rem;border-top:2px solid var(--tinte);border-right:2px solid var(--tinte);transform:translateY(-50%) rotate(45deg);opacity:.0;transition:opacity .3s,border-color .3s}
.lz.an .lz-a,.lz-a:hover,.lz-a:focus-visible{padding-left:.7rem}
.lz.an .lz-nr{color:var(--kobalt)}
.lz.an .lz-pfeil::before{transform:scaleX(1);background:var(--kobalt)}
.lz.an .lz-pfeil::after{opacity:1;border-color:var(--kobalt)}
.lz-bild{display:none}
.leist-bild{position:sticky;top:calc(var(--kopf-h) + 1.6rem);aspect-ratio:4/5;max-height:calc(100svh - var(--kopf-h) - 3.4rem);margin:0;background:var(--tinte);overflow:hidden}
.leist-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);transition:opacity .55s var(--ease),transform 1.4s var(--ease)}
.leist-bild img.an{opacity:1;transform:none}
.leist-ecke{position:absolute;left:.9rem;bottom:.9rem;padding:.4rem .6rem;background:var(--tinte);color:var(--papier);font-size:.62rem}

/* ---------- Looks ---------- */
.looks{background:var(--tinte);color:var(--papier);position:relative}
.looks .sek-kopf .mono{color:var(--kobalt-hell)}
.looks .sek-text{color:var(--grau-hell)}
.sek-kopf-quer{grid-template-columns:minmax(0,1fr) minmax(0,26rem);align-items:end;column-gap:3rem}
.sek-kopf-quer .mono,.sek-kopf-quer h2{grid-column:1}
.sek-kopf-quer .sek-text{grid-column:2;grid-row:2}
.looks-raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1.2rem,2.4vw,2.4rem) clamp(.8rem,2vw,2rem);align-items:start}
.lk1{grid-column:1/6}.lk2{grid-column:6/9;margin-top:clamp(2rem,8vw,8rem)}.lk3{grid-column:9/13;margin-top:clamp(.5rem,2vw,2rem)}
.lk4{grid-column:1/7;margin-top:clamp(.5rem,2vw,2rem)}.lk5{grid-column:7/10;margin-top:clamp(2rem,6vw,6rem)}.lk6{grid-column:10/13;margin-top:clamp(.5rem,1vw,1rem)}
.look figure{position:relative;margin:0;overflow:hidden;background:#000}
.lk1 figure{aspect-ratio:4/5}.lk2 figure{aspect-ratio:2/3}.lk3 figure{aspect-ratio:2/3}.lk4 figure{aspect-ratio:3/2}.lk5 figure{aspect-ratio:3/4}.lk6 figure{aspect-ratio:2/3}
.look img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;transition:transform 1.2s var(--ease),filter .6s}
.lk3 img{object-position:50% 18%}.lk4 img{object-position:50% 40%}
.look:hover img{transform:scale(1.04)}
.look-t{display:grid;gap:.2rem;padding-top:.9rem;grid-template-columns:auto minmax(0,1fr);align-items:baseline;column-gap:.9rem}
.look-t .mono{color:var(--kobalt-hell);grid-row:1}
.look-t h3{font:800 clamp(1.7rem,2.6vw,2.6rem)/.95 var(--anz);letter-spacing:.015em;text-transform:uppercase;grid-column:2}
.look-t p:not(.mono){grid-column:2;color:var(--grau-hell);font-size:.95rem}
.look-an{grid-column:2;justify-self:start;display:inline-flex;align-items:center;gap:.5rem;min-height:44px;margin-top:.1rem;text-decoration:none;font:700 .86rem/1 var(--anz);letter-spacing:.12em;text-transform:uppercase;color:var(--papier);border-bottom:2px solid var(--kobalt-hell)}
.look-an::after{content:"→";transition:transform .25s var(--ease)}
.look-an:hover{color:var(--kobalt-hell)}
.look-an:hover::after{transform:translateX(4px)}

/* ---------- Termin (voller Farbblock) ---------- */
.termin{background:var(--kobalt);color:#fff;padding:clamp(4.5rem,10vw,9rem) 0;position:relative}
.termin-raster{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(2rem,5vw,6rem);align-items:start}
.termin-kopf{position:sticky;top:calc(var(--kopf-h) + 1.6rem);display:grid;gap:1.1rem;justify-items:start}
.termin-kopf .mono{color:#eef0ff}
.termin-kopf .sek-text{color:#e7eaff}
.termin-fakten{display:grid;gap:.4rem;padding:1rem 0 0;border-top:1px solid rgba(255,255,255,.4);width:100%;color:#fff}
.termin-fakten li::before{content:"+ ";color:#eef0ff}
.termin-demo{color:#eef0ff;font-size:.66rem;max-width:30rem}
.termin-karte{position:relative;background:var(--papier);color:var(--tinte);padding:clamp(1.3rem,3.2vw,2.8rem);box-shadow:0 30px 80px rgba(8,16,90,.35)}
.termin-karte::before,.termin-karte::after{content:"";position:absolute;width:22px;height:22px;border:2px solid var(--kobalt);pointer-events:none}
.termin-karte::before{top:8px;left:8px;border-right:0;border-bottom:0}
.termin-karte::after{right:8px;bottom:8px;border-left:0;border-top:0}
.td-wurzel{--td-text:var(--tinte);--td-text2:#555450;--td-grund:#fff;--td-flaeche:var(--papier-2);--td-linie:rgba(12,13,16,.22);--td-linie-stark:var(--tinte);--td-akzent:var(--kobalt);--td-akzent-text:#fff;--td-display:var(--anz);--td-fliess:var(--fl);--td-fehler:#b00020;--td-ok:#12683a}
.td-wurzel .td-f legend{font:800 1.5rem/1 var(--anz)}
.td-wurzel .td-l-n{font:800 1.28rem/1.05 var(--anz);letter-spacing:.02em;text-transform:uppercase}
.td-wurzel .td-tag b{font:800 1.55rem/1.05 var(--anz)}
.termin-karte .td-l-t{display:none}
.termin-karte .td-l{min-height:50px;padding-block:.6rem}
.termin-karte .td-l-m{grid-auto-flow:column;align-items:baseline;gap:.9rem}
.td-wurzel .td-senden{font:800 1.12rem/1 var(--anz)}

/* ---------- Salon ---------- */
.salon-raster{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,6rem);align-items:center}
.salon-bild{margin:0}
.salon-bild img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--tinte)}
.salon-bild figcaption{margin-top:.6rem;color:var(--grau);font-size:.64rem}
.salon-text{display:grid;gap:1.4rem;justify-items:start}
.salon-text .mono{color:var(--kobalt)}
.adresse{font-style:normal;line-height:1.55;color:#34332f}
.adresse span{color:var(--grau);font-size:.9rem}
.zeiten-tab{width:100%;max-width:26rem;border-collapse:collapse;font-size:.98rem}
.zeiten-tab th,.zeiten-tab td{padding:.6rem 0;border-bottom:1px solid var(--linie);text-align:left;font-weight:500}
.zeiten-tab td{text-align:right;font-variant-numeric:tabular-nums}
.zeiten-tab tr.heute th,.zeiten-tab tr.heute td{font-weight:800;color:var(--kobalt)}

/* ---------- Fuß ---------- */
.fuss{background:var(--tinte);color:var(--papier);padding:clamp(2rem,4vw,3.4rem) var(--seite) 6.6rem;overflow:hidden}
.fuss-wort{font:800 clamp(7rem,27.5vw,31rem)/.78 var(--anz);letter-spacing:-.005em;text-transform:uppercase;color:transparent;-webkit-text-stroke:max(2px,.008em) rgba(236,235,230,.34);text-align:center;margin:0 0 clamp(1.8rem,4vw,3rem);white-space:nowrap;user-select:none}
.fuss-in{display:grid;gap:.8rem;max-width:var(--max);margin-inline:auto}
.fuss-marke{font:700 1.1rem/1 var(--anz);letter-spacing:.14em;text-transform:uppercase}
.fuss-marke b{font-weight:800}
.fuss .mono{color:var(--grau-hell);font-size:.64rem;max-width:62rem;text-transform:none;letter-spacing:.06em;line-height:1.6}
.fuss a{color:var(--papier);text-underline-offset:3px}
.fuss-links{display:flex;flex-wrap:wrap;gap:0 1.4rem}
.fuss-links a{display:inline-flex;align-items:center;min-height:44px}
.fuss a:hover{color:var(--kobalt-hell)}

/* ---------- Einblenden ---------- */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.da{opacity:1;transform:none}

/* ---------- Mittlere Breiten ---------- */
@media (max-width:1180px){
  .held h1{font-size:clamp(5.2rem,14.4vw,12rem)}
}
@media (max-width:980px){
  .held{grid-template-columns:minmax(0,1fr);min-height:0;gap:1.6rem;padding-top:calc(var(--kopf-h) + .8rem)}
  .held-text{display:contents}
  .held-k{order:1}
  .held h1{order:2;margin-bottom:0}
  .held-zeile{order:3}
  .scan{order:4;justify-self:stretch;max-width:none}
  .scan-rahmen{aspect-ratio:4/5;max-height:none}
  .held-lead{order:5}
  .aktionen{order:6}
  .held-offen{order:7}
  .prinzip-liste{grid-template-columns:minmax(0,1fr)}
  .prinzip-liste li{border-left:0;border-top:1px solid var(--linie-hell);padding-block:1.6rem}
  .prinzip-liste li:first-child{border-top:0}
  .leist-raster,.termin-raster,.salon-raster{grid-template-columns:minmax(0,1fr)}
  .leist-bild{display:none}
  .lz-a{grid-template-columns:2.2rem minmax(0,1fr) auto}
  .lz-pfeil{display:none}
  .lz-bild{display:block;grid-column:1/-1;order:-1;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 35%;background:var(--tinte)}
  .lz.an .lz-a,.lz-a:hover{padding-left:0}
  .termin-kopf{position:static}
  .sek-kopf-quer{grid-template-columns:minmax(0,1fr)}
  .sek-kopf-quer .sek-text{grid-column:1;grid-row:auto}
  .looks-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lk1,.lk4{grid-column:1/-1;margin-top:0}
  .lk2,.lk3,.lk5,.lk6{grid-column:auto;margin-top:0}
  .lk3,.lk6{margin-top:1.6rem}
  .look-t{grid-template-columns:minmax(0,1fr);row-gap:.15rem}
  .look-t h3,.look-t p:not(.mono),.look-an{grid-column:1}
  .look-t .mono{grid-row:auto}
  .salon-bild{order:2}
}
@media (max-width:860px){
  :root{--kopf-h:62px}
  .nav-toggle{display:inline-flex;align-items:center;gap:.6rem;min-height:46px;padding:0 0 0 .9rem;background:none;border:0;border-left:1px solid var(--linie);cursor:pointer;font:700 .72rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;margin-left:auto;color:var(--tinte)}
  .nav-toggle::after{content:"";width:20px;height:9px;border-top:2px solid var(--tinte);border-bottom:2px solid var(--tinte);transition:transform .4s var(--ease)}
  .nav-offen .nav-toggle::after{transform:scaleY(.2)}
  .kopf-cta{display:none}
  .nav{position:fixed;inset:var(--kopf-h) 0 0 0;margin:0;background:var(--papier);display:flex;flex-direction:column;justify-content:space-between;padding:1.6rem var(--seite) calc(2rem + env(safe-area-inset-bottom));opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .35s,transform .35s var(--ease),visibility 0s linear .35s;overflow-y:auto}
  body.nav-offen{overflow:hidden}
  .nav-offen .nav{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .nav-offen .kopf{background:var(--papier);border-bottom-color:var(--linie)}
  .nav ul{flex-direction:column;gap:0}
  .nav li a{font:800 clamp(2.6rem,13vw,4rem)/1 var(--anz);letter-spacing:.015em;min-height:84px;padding:0;border-top:1px solid var(--linie);border-bottom:0}
  .nav li a[aria-current]{color:var(--kobalt)}
  .nav-fuss{display:block;color:var(--grau);font-size:.62rem}
  .held h1{font-size:clamp(5rem,28vw,10rem)}
}
@media (max-width:520px){
  .marke b{font-size:1.7rem}
  .marke small{display:none}
  .held{gap:1.3rem}
  .scan-rahmen{aspect-ratio:1/1.12}
  .lz-a{grid-template-columns:1.9rem minmax(0,1fr);row-gap:.5rem}
  .lz-m{grid-column:2;grid-auto-flow:column;justify-content:start;justify-items:start;gap:.9rem;align-items:baseline}
  .lz-m b{font-size:1.25rem}
  .zeiten-tab{max-width:none}
}
@media (max-width:370px){.marke b{font-size:1.45rem}}

@media (prefers-reduced-motion:reduce){
  html:not(.bewegung-an){scroll-behavior:auto}
  html:not(.bewegung-an) *, html:not(.bewegung-an) *::before, html:not(.bewegung-an) *::after{animation:none!important;transition:none!important}
  html.js:not(.bewegung-an) .rv{opacity:1;transform:none}
  html:not(.bewegung-an) .leist-bild img{transform:none}
}
.eingebettet .stufen,.eingebettet .demo-leiste{display:none!important}
.eingebettet .fuss{padding-bottom:2.6rem}
html.in-stufen .kopf{transform:translateY(-110%)}
@media print{.kopf,.demo-leiste,.stufen{display:none}}
