/* =====================================================================
   Grundgerüst der Branchen-Demos (Bau, Physio, Beauty, Garage).
   Die Farben, Schriften und Eigenheiten je Betrieb stehen am Ende
   dieser Datei im Block «Thema».

   Drei Zustände auf <html>, gesetzt vom Einzeiler im <head>:
     (ohne Klasse)  kein JavaScript: alles steht, nichts bewegt sich
     .bewegt        JavaScript an, Bewegung erwünscht
     .ruhig         prefers-reduced-motion: alles steht, ohne Effekte
   ===================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--grund);color:var(--text);font:400 1.0625rem/1.6 var(--schrift-text);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
main{overflow-x:clip}
img,svg,canvas,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--schrift-titel);font-weight:var(--titel-gewicht,700);line-height:1.02;
  letter-spacing:var(--titel-sperrung,-0.02em);margin:0;text-wrap:balance}
h1{font-size:clamp(2.9rem,9vw,7.6rem)}
h2{font-size:clamp(2.1rem,5.4vw,4.4rem)}
h3{font-size:clamp(1.25rem,2.1vw,1.6rem);line-height:1.15}
p{margin:0}
p+p{margin-top:1em}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--akzent);outline-offset:3px;border-radius:4px}
.nur-lesen{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.mass{width:min(100% - 2.5rem,76rem);margin-inline:auto}
@media (max-width:40rem){.mass{width:calc(100% - 2rem)}}

/* ---------- Hinweis «Fiktiver Beispielbetrieb» ---------------------- */
.muster{position:relative;z-index:60;background:#0e1526;color:#e8edf7;
  font:500 .875rem/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;text-align:center;padding:.55rem 1rem}
.muster a{color:#6ce7fa}
.muster b{color:#fff}

.sprung{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--akzent);color:var(--akzent-text);
  padding:.6rem 1rem;border-radius:.5rem;font-weight:700}
.sprung:focus{top:1rem}

/* ---------- Kopf ---------------------------------------------------- */
.kopf{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--kopf-grund,var(--grund)) 82%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--linie);color:var(--kopf-text,var(--text))}
.kopf{transition:box-shadow .3s}
.kopf.gerollt{box-shadow:0 10px 30px -18px rgba(0,0,0,.45)}
.kopf-in{display:flex;align-items:center;gap:1.25rem;min-height:4.25rem}
.marke{display:flex;flex-direction:column;text-decoration:none;font-family:var(--schrift-titel);
  font-weight:var(--titel-gewicht,700);font-size:1.3rem;line-height:1;letter-spacing:var(--titel-sperrung,-0.02em)}
.marke small{font:500 .72rem/1.3 var(--schrift-text);letter-spacing:.08em;text-transform:uppercase;opacity:.7;margin-top:.3rem}
.menue{display:flex;gap:.25rem;margin-left:auto}
.menue a{text-decoration:none;padding:.6rem .8rem;border-radius:999px;font-weight:500;font-size:.98rem;min-height:2.75rem;
  display:inline-flex;align-items:center}
.menue a:hover{background:var(--flaeche)}
.menue a[aria-current=page]{background:var(--text);color:var(--grund)}
.kopf .knopf{margin-left:.25rem}
@media (max-width:52rem){
  .kopf-in{flex-wrap:wrap;gap:0;padding-top:.6rem}
  .kopf .knopf{display:none}
  .menue{order:3;width:100%;margin:0;overflow-x:auto;scrollbar-width:none;padding:.35rem 0 .5rem;gap:.15rem}
  .menue::-webkit-scrollbar{display:none}
  .menue a{flex:0 0 auto;font-size:.93rem;padding:.45rem .75rem}
}

/* ---------- Knöpfe -------------------------------------------------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3rem;padding:.8rem 1.4rem;
  border-radius:var(--rund-knopf,999px);font:600 1rem/1.2 var(--schrift-text);text-decoration:none;cursor:pointer;
  border:2px solid transparent;transition:transform .25s cubic-bezier(.2,.8,.2,1),background .25s,color .25s}
.knopf:hover{transform:translateY(-2px)}
.knopf-voll{background:var(--akzent);color:var(--akzent-text)}
.knopf-linie{border-color:currentColor;background:transparent}
.knopf .pfeil{transition:transform .3s}
.knopf:hover .pfeil{transform:translateX(4px)}
.tun{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}

/* ---------- Kleine Typo-Bausteine ------------------------------------ */
.merk{display:inline-flex;align-items:center;gap:.6rem;font:600 .8rem/1.2 var(--schrift-text);letter-spacing:.14em;
  text-transform:uppercase;color:var(--akzent-tief,var(--akzent))}
.merk::before{content:"";width:1.6rem;height:2px;background:currentColor}
.lauf{font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--leise);max-width:40rem}
.leise{color:var(--leise)}
.zeile{display:block;overflow:hidden;padding:.14em 0 .08em;margin:-.14em 0 -.08em}
.zeile>span{display:inline-block}
em.zier{font-style:var(--zier-stil,italic);color:var(--akzent-tief,var(--akzent))}

/* ---------- Abschnitte ------------------------------------------------ */
.teil{position:relative;padding-block:clamp(4.5rem,11vw,9rem)}
.teil-kopf{max-width:48rem;margin-bottom:clamp(2rem,5vw,3.5rem)}
.teil-kopf h2{margin-top:1rem}
.teil-kopf p{margin-top:1.25rem}
.dunkel{background:var(--dunkel);color:var(--dunkel-text)}
.dunkel .merk,.held .merk,.seitenkopf .merk,.fahrt .merk{color:var(--held-merk,var(--akzent))}
.dunkel .leise,.dunkel .lauf{color:var(--dunkel-leise)}
.flaeche{background:var(--flaeche)}

/* ---------- Bühne: Scrollytelling-Hero ------------------------------- */
.held{position:relative;background:var(--held-grund,var(--dunkel));color:var(--held-text,var(--dunkel-text));isolation:isolate}
.held-buehne{position:relative;overflow:hidden;padding:clamp(3rem,8vw,6rem) 0 clamp(3rem,6vw,4rem)}
.held-leinwand{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.held-grund{position:absolute;inset:0;z-index:-2;background:var(--held-verlauf,none)}
.held-szene{position:relative;padding-block:2rem}
.held-szene+.held-szene{border-top:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.held-szene h1,.held-szene h2{font-size:clamp(2.9rem,10vw,8.4rem);line-height:.95;max-width:14ch}
.held-szene .lauf{color:var(--held-leise,var(--dunkel-leise));margin-top:1.4rem}
.held-nr{font:600 .78rem/1 var(--schrift-text);letter-spacing:.2em;text-transform:uppercase;opacity:.75;display:block;margin-bottom:1.2rem}
.held-riesig{display:none}
.held-fortschritt,.held-hinweis{display:none}
.held-fakten{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:1rem;margin-top:2rem;max-width:44rem}
.held-fakten div{border-top:1px solid color-mix(in srgb,currentColor 30%,transparent);padding-top:.7rem}
.held-fakten b{display:block;font:var(--titel-gewicht,700) 1.9rem/1 var(--schrift-titel)}
.held-fakten span{font-size:.88rem;opacity:.8}

/* Mit Bewegung: hoher Abschnitt, haftende Bühne, Szenen übereinander */
.bewegt .held{height:420vh}
.bewegt .held-buehne{position:sticky;top:0;height:100vh;height:100svh;padding:0;display:grid;align-items:center}
.bewegt .held-szene{position:absolute;inset:0;display:flex;align-items:center;padding:6rem 0 4rem;border:0}
.held-buehne::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--held-schleier,none)}
.bewegt .held-szene:not([data-szene="1"]){visibility:hidden}
.bewegt .held-riesig{display:block;position:absolute;left:0;bottom:-.12em;z-index:-1;white-space:nowrap;
  font:var(--titel-gewicht,700) clamp(9rem,30vw,26rem)/.8 var(--schrift-titel);letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,currentColor 22%,transparent);pointer-events:none;will-change:transform}
.bewegt .held-fortschritt{display:flex;position:absolute;right:clamp(1rem,3vw,2.5rem);top:50%;transform:translateY(-50%);
  flex-direction:column;gap:.6rem;z-index:3}
.held-fortschritt i{width:3px;height:2.4rem;border-radius:3px;background:color-mix(in srgb,currentColor 25%,transparent);overflow:hidden;position:relative}
.held-fortschritt i::after{content:"";position:absolute;inset:0;background:var(--akzent);transform:scaleY(var(--f,0));transform-origin:top}
.bewegt .held-hinweis{display:flex;align-items:center;gap:.7rem;position:absolute;left:50%;bottom:1.4rem;transform:translateX(-50%);
  font:600 .72rem/1 var(--schrift-text);letter-spacing:.24em;text-transform:uppercase;opacity:.8;z-index:3}
.held-hinweis i{width:1px;height:2.2rem;background:currentColor;animation:tropf 1.8s ease-in-out infinite;transform-origin:top}
@keyframes tropf{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:40rem){
  .bewegt .held{height:380vh}
  .bewegt .held-szene{padding:8.2rem 0 4.5rem;align-items:flex-start}
  .bewegt .held-fortschritt{right:.6rem}
  .held-szene h1,.held-szene h2{font-size:clamp(2.6rem,13vw,4.4rem)}
}
/* Auftritt der ersten Szene: reines CSS, läuft auch, wenn ein Skript ausfällt */
.schrift-warten .held-szene[data-szene="1"],.schrift-warten .seitenkopf .mass{visibility:hidden}
.bewegt:not(.schrift-warten) .held-szene[data-szene="1"] .zeile>span{animation:steigen 1.1s cubic-bezier(.2,.85,.15,1) both;animation-delay:calc(.15s + var(--i,0)*.09s)}
.bewegt:not(.schrift-warten) .held-szene[data-szene="1"] .auftritt{animation:einblenden .9s ease both;animation-delay:calc(.55s + var(--i,0)*.1s)}
@keyframes steigen{from{transform:translateY(112%) rotate(4deg)}to{transform:none}}
@keyframes einblenden{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- Seitenkopf der Unterseiten -------------------------------- */
.seitenkopf{position:relative;overflow:hidden;background:var(--held-grund,var(--dunkel));color:var(--held-text,var(--dunkel-text));
  padding:clamp(4rem,10vw,8rem) 0 clamp(3.5rem,8vw,6rem);isolation:isolate}
.seitenkopf h1{max-width:16ch;margin-top:1rem}
.seitenkopf .lauf{color:var(--held-leise,var(--dunkel-leise));margin-top:1.4rem}
.seitenkopf .held-leinwand{opacity:.9}
.bewegt:not(.schrift-warten) .seitenkopf .zeile>span{animation:steigen 1s cubic-bezier(.2,.85,.15,1) both;animation-delay:calc(.1s + var(--i,0)*.08s)}
.bewegt:not(.schrift-warten) .seitenkopf .auftritt{animation:einblenden .8s ease both;animation-delay:calc(.45s + var(--i,0)*.1s)}

/* ---------- Zahlenband ------------------------------------------------ */
.zahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,3vw,2.5rem)}
.zahl{border-top:2px solid var(--text);padding-top:1rem}
.zahl b{display:block;font:var(--titel-gewicht,700) clamp(2.6rem,6vw,4.6rem)/1 var(--schrift-titel);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.zahl b small{font-size:.45em;letter-spacing:0}
.zahl>span{display:block;margin-top:.6rem;color:var(--leise);font-size:.95rem}
.zahl .balken{height:4px;background:var(--flaeche);margin-top:1rem;border-radius:4px;overflow:hidden}
.zahl .balken i{display:block;height:100%;background:var(--akzent);width:var(--w,100%);transform-origin:left}
@media (max-width:52rem){.zahlen{grid-template-columns:1fr 1fr}}

/* ---------- Karten ---------------------------------------------------- */
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:clamp(.9rem,2vw,1.4rem);perspective:1400px}
.karte{position:relative;background:var(--karte,var(--flaeche));border:1px solid var(--linie);border-radius:var(--rund,18px);
  padding:clamp(1.4rem,3vw,2rem);display:flex;flex-direction:column;gap:.8rem;transform-style:preserve-3d;overflow:hidden}
.karte .nr{font:600 .8rem/1 var(--schrift-text);letter-spacing:.14em;color:var(--akzent-tief,var(--akzent))}
.karte p{color:var(--leise);font-size:.98rem}
.karte .preis{margin-top:auto;font:var(--titel-gewicht,700) 1.15rem/1.2 var(--schrift-titel);padding-top:.6rem}
.karte svg.symbol{width:2.6rem;height:2.6rem;color:var(--akzent-tief,var(--akzent))}
.dunkel .karte{background:color-mix(in srgb,var(--dunkel-text) 6%,transparent);border-color:color-mix(in srgb,var(--dunkel-text) 14%,transparent)}
.dunkel .karte p{color:var(--dunkel-leise)}

/* ---------- Bilder ---------------------------------------------------- */
.bild{position:relative;margin:0;overflow:hidden;border-radius:var(--rund,18px);background:var(--flaeche)}
.bild img{width:100%;height:100%;object-fit:cover}
.r-4x3{aspect-ratio:4/3}.r-16x9{aspect-ratio:16/9}.r-3x4{aspect-ratio:3/4}.r-1x1{aspect-ratio:1}
.bild figcaption{position:absolute;left:1rem;bottom:1rem;background:var(--grund);color:var(--text);font-size:.82rem;
  padding:.35rem .7rem;border-radius:999px}

/* Grosses Bild mit Zoom-Fahrt */
.fahrt{position:relative;height:clamp(26rem,90vh,52rem);overflow:hidden;color:#fff;display:flex;align-items:flex-end}
.fahrt>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.fahrt>picture{position:absolute;inset:0;z-index:-1;display:block}.fahrt>picture>img{display:block;width:100%;height:100%;object-fit:cover}
.fahrt::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.72))}
.fahrt{isolation:isolate}
.fahrt .mass{position:relative;z-index:1;padding-bottom:clamp(2.5rem,6vw,5rem)}
.fahrt h2{max-width:18ch}
.fahrt p{max-width:38rem;margin-top:1rem;opacity:.9}

/* ---------- Wortweise aufleuchtende Aussage -------------------------- */
.aussage{font:var(--titel-gewicht,700) clamp(1.9rem,4.6vw,3.9rem)/1.12 var(--schrift-titel);letter-spacing:var(--titel-sperrung,-0.02em);max-width:22ch}
.aussage .w{opacity:var(--o,1);transition:opacity .1s linear}

/* ---------- Querfahrt (waagrechte Galerie) --------------------------- */
.quer{overflow-x:clip}
.quer.quer-an{padding:0}
.quer-an>.mass{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:5.5rem 0 1.5rem}
@media (max-width:52rem){.quer-an>.mass{padding-top:7.5rem}.quer-an .quer-kopf{margin-bottom:1rem}.quer-an .quer-kopf h2{font-size:clamp(1.8rem,8vw,2.6rem)}}
.quer-kopf{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:flex-end;justify-content:space-between;margin-bottom:2rem}
.filter{display:flex;flex-wrap:wrap;gap:.4rem}
.filter button{font:600 .92rem/1 var(--schrift-text);padding:.75rem 1.1rem;min-height:2.75rem;border-radius:999px;cursor:pointer;
  border:1.5px solid currentColor;background:transparent;color:inherit}
.filter button[aria-pressed=true]{background:var(--akzent);border-color:var(--akzent);color:var(--akzent-text)}
.quer-spur{display:flex;gap:clamp(1rem,2vw,1.5rem);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem;scrollbar-width:thin}
.bewegt .quer-spur.gefahren{overflow:visible;scroll-snap-type:none}
.quer-spur>*{flex:0 0 min(82vw,28rem);scroll-snap-align:start}
.projekt{position:relative;border-radius:var(--rund,18px);overflow:hidden;background:var(--flaeche);color:var(--text)}
.projekt .bild{border-radius:0;aspect-ratio:4/3}
.projekt-text{padding:1.2rem 1.3rem 1.4rem}
.projekt-text h3{font-size:1.3rem}
.projekt-text p{color:var(--leise);font-size:.93rem;margin-top:.4rem}
.projekt dl{display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1rem;margin:1rem 0 0;font-size:.85rem}
.projekt dt{color:var(--leise)}
.projekt dd{margin:0;font-weight:700}
.projekt .etikett{position:absolute;top:1rem;left:1rem;z-index:2;background:var(--akzent);color:var(--akzent-text);
  font:700 .72rem/1 var(--schrift-text);letter-spacing:.1em;text-transform:uppercase;padding:.45rem .7rem;border-radius:999px}
.projekt[hidden]{display:none}
.quer-zaehler{font:600 .9rem/1 var(--schrift-text);letter-spacing:.1em;font-variant-numeric:tabular-nums}

/* ---------- Stapel (haftende Karten) ---------------------------------- */
.stapel{display:grid;gap:1.5rem}
.bewegt .stapel{gap:0}
.stapel-karte{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.2rem,4vw,3rem);align-items:center;
  background:var(--karte,var(--flaeche));border:1px solid var(--linie);border-radius:calc(var(--rund,18px) + 6px);
  padding:clamp(1.4rem,4vw,3rem);transform-origin:50% 0;min-height:min(70vh,34rem)}
.bewegt .stapel-karte{position:sticky;top:calc(6rem + var(--n,0)*1.1rem);margin-bottom:12vh;box-shadow:0 -18px 50px -30px rgba(0,0,0,.35)}
.bewegt .stapel-karte:last-child{margin-bottom:0}
.stapel-karte h3{font-size:clamp(1.8rem,4vw,3rem)}
.stapel-karte p{color:var(--leise);margin-top:1rem}
.stapel-karte ul{margin-top:1.2rem;display:grid;gap:.5rem}
.stapel-karte li{display:flex;gap:.7rem;align-items:baseline}
.stapel-karte li::before{content:"";flex:0 0 .55rem;height:.55rem;border-radius:50%;background:var(--akzent);transform:translateY(-.1rem)}
.stapel-karte .bild{height:100%;min-height:15rem}
@media (max-width:52rem){
  .stapel-karte{grid-template-columns:1fr;min-height:0}
  .bewegt .stapel-karte{top:calc(7.5rem + var(--n,0)*.8rem);margin-bottom:8vh}
  .stapel-karte .bild{min-height:11rem;aspect-ratio:16/9}
}

/* ---------- Weg (gezeichnete Linie) ----------------------------------- */
.weg{position:relative;display:grid;gap:clamp(2rem,6vw,4rem);padding-left:clamp(2.6rem,7vw,5rem)}
.weg-linie{position:absolute;left:clamp(.9rem,2.6vw,1.9rem);top:.4rem;bottom:.4rem;width:20px;height:calc(100% - .8rem);overflow:visible}
.weg-linie path{fill:none;stroke:var(--akzent);stroke-width:3;stroke-linecap:round}
.weg-linie .spur{stroke:var(--linie);stroke-width:3}
.weg::after{content:"";position:absolute;left:calc(clamp(.9rem,2.6vw,1.9rem) + 9px);top:0;bottom:0;width:3px;background:var(--linie)}
.weg.gezeichnet::after{display:none}
.etappe{position:relative}
.etappe::before{content:attr(data-nr);position:absolute;left:calc(-1*clamp(2.6rem,7vw,5rem) + clamp(.9rem,2.6vw,1.9rem) - 1.05rem + 10px);top:0;
  width:2.1rem;height:2.1rem;border-radius:50%;display:grid;place-items:center;background:var(--grund);border:2px solid var(--akzent);
  font:700 .8rem/1 var(--schrift-text);color:var(--text)}
.dunkel .etappe::before{background:var(--dunkel)}
.etappe .dauer{font:600 .8rem/1 var(--schrift-text);letter-spacing:.12em;text-transform:uppercase;color:var(--akzent-tief,var(--akzent))}
.etappe h3{margin-top:.5rem;font-size:clamp(1.4rem,3vw,2.1rem)}
.etappe p{margin-top:.6rem;color:var(--leise);max-width:40rem}
.dunkel .etappe p{color:var(--dunkel-leise)}

/* ---------- Zwei Spalten ---------------------------------------------- */
.zweispalt{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
@media (max-width:52rem){.zweispalt{grid-template-columns:1fr}}
.liste-haken{display:grid;gap:.7rem;margin-top:1.5rem}
.liste-haken li{display:flex;gap:.75rem;align-items:flex-start}
.liste-haken li::before{content:"";flex:0 0 1.2rem;height:1.2rem;margin-top:.2rem;border-radius:50%;
  background:var(--akzent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat}

/* ---------- Laufband -------------------------------------------------- */
.band{overflow:hidden;white-space:nowrap;padding-block:clamp(1.2rem,3vw,2rem);border-block:1px solid var(--linie)}
.band-spur{display:inline-flex;gap:2.5rem;align-items:center;font:var(--titel-gewicht,700) clamp(2.2rem,7vw,5.5rem)/1 var(--schrift-titel);
  letter-spacing:-.02em;will-change:transform}
.band-spur i{font-style:normal;color:var(--akzent)}
.band-spur .hohl{color:transparent;-webkit-text-stroke:1.5px currentColor}

/* ---------- Fragen ---------------------------------------------------- */
.fragen{display:grid;gap:.6rem;max-width:52rem}
.fragen details{border:1px solid var(--linie);border-radius:var(--rund,18px);background:var(--karte,var(--flaeche));padding:0 1.3rem}
.fragen summary{cursor:pointer;list-style:none;padding:1.15rem 0;font-weight:700;display:flex;justify-content:space-between;gap:1rem;min-height:2.75rem}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--akzent-tief,var(--akzent));transition:transform .3s}
.fragen details[open] summary::after{transform:rotate(45deg)}
.fragen details p{padding-bottom:1.2rem;color:var(--leise)}

/* ---------- Werkzeuge: Termin, Anfrage, Buchung ----------------------- */
.werk{background:var(--karte,var(--flaeche));border:1px solid var(--linie);border-radius:calc(var(--rund,18px) + 6px);
  padding:clamp(1.2rem,3.5vw,2.4rem);color:var(--text)}
.werk-hinweis{display:flex;gap:.6rem;align-items:flex-start;font-size:.86rem;color:var(--leise);background:var(--grund);
  border:1px dashed var(--linie-stark,var(--linie));border-radius:12px;padding:.7rem .9rem;margin-bottom:1.4rem}
.werk-hinweis b{color:var(--text)}
.werk fieldset{border:0;padding:0;margin:0 0 1.6rem}
.werk legend{font:700 1.05rem/1.3 var(--schrift-text);margin-bottom:.8rem;padding:0}
.werk legend small{font-weight:500;color:var(--leise);margin-left:.4rem}
.wahl{display:flex;flex-wrap:wrap;gap:.5rem}
.wahl label{position:relative;cursor:pointer}
.wahl input{position:absolute;opacity:0;inset:0;cursor:pointer}
.wahl span{display:flex;flex-direction:column;gap:.15rem;min-height:2.9rem;justify-content:center;padding:.6rem 1rem;border-radius:12px;
  border:1.5px solid var(--linie-stark,var(--linie));background:var(--grund);font-weight:600;font-size:.95rem;transition:border-color .2s,background .2s,transform .2s}
.wahl span small{font-weight:500;color:var(--leise);font-size:.8rem}
.wahl input:checked+span{border-color:var(--akzent);background:color-mix(in srgb,var(--akzent) 14%,var(--grund));transform:translateY(-1px)}
.wahl input:focus-visible+span{outline:3px solid var(--akzent);outline-offset:2px}
.feld{display:grid;gap:.4rem;margin-bottom:1rem}
.feld label{font-weight:600;font-size:.93rem}
.feld input,.feld select,.feld textarea{font:inherit;font-size:1rem;padding:.75rem .9rem;border-radius:12px;min-height:3rem;
  border:1.5px solid var(--linie-stark,var(--linie));background:var(--grund);color:var(--text);width:100%}
.feld textarea{min-height:7rem;resize:vertical}
.felder{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
@media (max-width:40rem){.felder{grid-template-columns:1fr}}
.regler{width:100%;accent-color:var(--akzent);min-height:2.75rem}
.wochen{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.45rem}
.tag{display:grid;gap:.4rem;align-content:start}
.tag h4{font:700 .82rem/1.2 var(--schrift-text);text-align:center;padding:.5rem .2rem;border-radius:10px;background:var(--grund)}
.tag h4 small{display:block;font-weight:500;color:var(--leise)}
.slot{font:600 .88rem/1 var(--schrift-text);min-height:2.75rem;border-radius:10px;border:1.5px solid var(--linie-stark,var(--linie));
  background:var(--grund);color:var(--text);cursor:pointer;font-variant-numeric:tabular-nums}
.slot:disabled{opacity:.35;cursor:not-allowed;text-decoration:line-through}
.slot[aria-pressed=true]{background:var(--akzent);color:var(--akzent-text);border-color:var(--akzent)}
@media (max-width:40rem){.wochen{grid-template-columns:repeat(5,minmax(3.6rem,1fr));overflow-x:auto;padding-bottom:.4rem}}
.woche-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.8rem}
.woche-nav button{min-width:2.9rem;min-height:2.9rem;border-radius:50%;border:1.5px solid var(--linie-stark,var(--linie));background:var(--grund);color:var(--text);cursor:pointer;font-size:1.1rem}
.zusammen{margin-top:1.4rem;border-radius:16px;background:var(--dunkel);color:var(--dunkel-text);padding:1.2rem 1.3rem;display:grid;gap:.4rem}
.zusammen dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;margin:0;font-size:.95rem}
.zusammen dt{color:var(--dunkel-leise)}
.zusammen dd{margin:0;font-weight:600}
.zusammen .summe{font:var(--titel-gewicht,700) 1.6rem/1.1 var(--schrift-titel);margin-top:.4rem}
.werk-fertig{display:none;margin-top:1rem;padding:1rem 1.2rem;border-radius:14px;background:color-mix(in srgb,var(--akzent) 16%,var(--grund));font-weight:500}
.werk-fertig[data-an]{display:block}

/* ---------- Kontakt-Kacheln ------------------------------------------- */
.adresse{display:grid;gap:1.4rem}
.adresse h3{font-size:1.15rem}
.adresse p{color:var(--leise)}
.zeiten{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1.2rem;margin:.6rem 0 0;font-size:.95rem}
.zeiten dt{color:var(--leise)}
.zeiten dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.plan{border-radius:var(--rund,18px);overflow:hidden;border:1px solid var(--linie);background:var(--flaeche);aspect-ratio:4/3}
.plan canvas,.plan svg{width:100%;height:100%}

/* ---------- LMMeier-Abschnitt ------------------------------------------ */
.lmm{position:relative;background:#0e1526;color:#e8edf7;overflow:hidden;isolation:isolate;padding-block:clamp(5rem,12vw,9rem)}
.lmm .held-leinwand{opacity:.75}
.lmm .merk{color:#6ce7fa}
.lmm h2{font-family:var(--schrift-titel);max-width:18ch;margin-top:1rem}
.lmm p{max-width:40rem;color:#b8c3d9;margin-top:1.2rem}
.lmm .knopf-voll{background:#6ce7fa;color:#0e1526}
.lmm .knopf-linie{color:#e8edf7}
.lmm-punkte{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.5rem;max-width:52rem}
.lmm-punkte div{border-top:1px solid rgba(232,237,247,.2);padding-top:.8rem;font-size:.93rem;color:#b8c3d9}
.lmm-punkte b{display:block;color:#fff;font-size:1.05rem;margin-bottom:.2rem}
@media (max-width:40rem){.lmm-punkte{grid-template-columns:1fr}}

/* ---------- Fuss ------------------------------------------------------ */
.fuss{background:var(--fuss-grund,var(--dunkel));color:var(--dunkel-text);padding:clamp(3.5rem,8vw,5.5rem) 0 7rem}
.fuss-raster{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
.fuss h4{font:700 .8rem/1 var(--schrift-text);letter-spacing:.14em;text-transform:uppercase;color:var(--dunkel-leise);margin-bottom:1rem}
.fuss ul{display:grid;gap:.2rem}
.fuss a{text-decoration:none;display:inline-flex;align-items:center;min-height:2.75rem}
.fuss a:hover{text-decoration:underline}
.fuss p{color:var(--dunkel-leise);font-size:.95rem}
.fuss .marke{margin-bottom:1rem}
.fuss-schluss{margin-top:3rem;padding-top:1.5rem;border-top:1px solid color-mix(in srgb,var(--dunkel-text) 15%,transparent);font-size:.86rem;color:var(--dunkel-leise)}
@media (max-width:52rem){.fuss-raster{grid-template-columns:1fr}}

.rueckweg{position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);z-index:40;width:min(calc(100% - 2rem),46rem);
  background:#0e1526;color:#e8edf7;border-radius:16px;padding:.7rem .8rem .7rem 1.1rem;display:flex;gap:1rem;align-items:center;
  justify-content:space-between;box-shadow:0 18px 50px -20px rgba(0,0,0,.6);font-size:.9rem}
.rueckweg a{color:#0e1526;background:#6ce7fa;border-radius:10px;padding:.6rem .9rem;font-weight:700;text-decoration:none;white-space:nowrap;min-height:2.75rem;display:inline-flex;align-items:center}
.rueckweg .zu{all:unset;cursor:pointer;color:#b8c3d9;width:2.75rem;height:2.75rem;display:grid;place-items:center;border-radius:10px;flex:0 0 auto}
.rueckweg[hidden]{display:none}

.handleiste{display:none}
@media (max-width:52rem){
  .rueckweg{display:none}
  .handleiste{display:grid;grid-template-columns:1fr 1.4fr;gap:.5rem;position:fixed;left:0;right:0;bottom:0;z-index:45;
    padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--grund) 92%,transparent);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--linie)}
  .handleiste .knopf{min-height:3rem;padding:.6rem .8rem;font-size:.95rem}
  .fuss{padding-bottom:8rem}
}

/* ---------- Ruhig: keine Bewegung, keine versteckten Zustände ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
.ruhig .held-hinweis i{animation:none}

/* ---------- Drucken ------------------------------------------------- */
@media print{.kopf,.handleiste,.rueckweg,.held-leinwand,.held-riesig,.lmm .held-leinwand{display:none!important}
  .bewegt .held{height:auto}.bewegt .held-buehne{position:static;height:auto}.bewegt .held-szene{position:static;visibility:visible!important}}

/* ===== Thema: Firnis ===== */

@font-face{font-family:'Italiana';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/demo-f041.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/fonts/demo-f043.woff2) format('woff2')}
:root{
  --held-merk:#e8c992;
  --grund:#f3e5df;--text:#2a1420;--leise:#6e5662;--akzent:#c3122f;--akzent-text:#fff;--akzent-tief:#a10f27;
  --flaeche:#eedcd5;--karte:#f8eee9;--linie:rgba(42,20,32,.12);--linie-stark:rgba(42,20,32,.28);
  --dunkel:#21101a;--dunkel-text:#fbf4f1;--dunkel-leise:#d4bcc6;--see:rgba(200,160,190,.35);
  --schrift-titel:'Italiana','Didot','Bodoni 72',Georgia,serif;--schrift-text:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  --titel-gewicht:400;--titel-sperrung:-.01em;--rund:28px;
  --held-grund:#21101a;--held-text:#fbf4f1;--held-leise:#e3cfd7;
  --held-schleier:linear-gradient(90deg,rgba(33,16,26,.8) 0%,rgba(33,16,26,.3) 50%,rgba(33,16,26,0) 70%);
}
@media (max-width:40rem){:root{--held-schleier:linear-gradient(180deg,rgba(33,16,26,.9) 0%,rgba(33,16,26,.55) 52%,rgba(33,16,26,0) 80%)}}
body{font-weight:400}
.marke{font-size:1.9rem;letter-spacing:.02em}
h1,h2{font-weight:400}
h3{font-family:var(--schrift-text);font-weight:500;letter-spacing:.01em}
.held-szene em,.seitenkopf em,.teil-kopf em{font-style:normal;color:#e8c992}
.held-szene h1,.held-szene h2{font-size:clamp(3.2rem,10vw,8.8rem);line-height:.95}
.bewegt .held-riesig{-webkit-text-stroke-color:rgba(232,201,146,.22)}
.held .knopf-linie,.seitenkopf .knopf-linie{color:#fbf4f1}
.knopf{letter-spacing:.04em}
.merk{color:var(--akzent-tief)}
.dunkel .merk,.held .merk{color:#e8c992}
.karte .preis{font-family:var(--schrift-text);font-weight:600;color:var(--akzent-tief)}
.band{border:0;background:linear-gradient(90deg,var(--flaeche),var(--grund),var(--flaeche))}
.band-spur i{color:#c9a36a;font-size:.5em}
.zahl{border-top:1px solid var(--text)}
.team .kuerzel{width:4.4rem;height:4.4rem;border-radius:50% 50% 50% 8px;display:grid;place-items:center;background:var(--dunkel);color:#e8c992;font:400 1.6rem/1 var(--schrift-titel)}
.farb-buehne{position:relative;aspect-ratio:4/5;border-radius:var(--rund);overflow:hidden;background:radial-gradient(120% 90% at 50% 80%,#f4e4df,#e9d2cb)}
.farb-buehne canvas{position:absolute;inset:0;width:100%;height:100%}
.farb-name{position:absolute;left:1.2rem;bottom:1.2rem;background:var(--grund);border-radius:999px;padding:.5rem 1rem;font-size:.95rem}
.farb-raster{display:grid;grid-template-columns:repeat(6,1fr);gap:.7rem;max-width:30rem}
.farb-knopf{aspect-ratio:1;border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;border:3px solid var(--grund);background:var(--f);cursor:pointer;
  box-shadow:0 0 0 1px var(--linie-stark),inset -6px -8px 14px rgba(0,0,0,.18),inset 6px 6px 10px rgba(255,255,255,.35);min-width:2.75rem;transition:transform .25s}
.farb-knopf:hover{transform:translateY(-3px) rotate(-6deg)}
.farb-knopf[aria-pressed=true]{box-shadow:0 0 0 3px var(--text),inset -6px -8px 14px rgba(0,0,0,.18),inset 6px 6px 10px rgba(255,255,255,.35)}
@media (max-width:40rem){.farb-raster{grid-template-columns:repeat(4,1fr)}}
.preis-karte{background:var(--karte);border:1px solid var(--linie);border-radius:var(--rund);padding:clamp(1.2rem,3vw,2.2rem)}
.reiter-leiste{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:1.4rem}
.reiter-leiste[hidden]{display:none}
.reiter-leiste button{font:500 .95rem/1 var(--schrift-text);padding:.75rem 1.1rem;min-height:2.75rem;border-radius:999px;border:1.5px solid var(--linie-stark);background:transparent;color:var(--text);cursor:pointer}
.reiter-leiste button[aria-selected=true]{background:var(--dunkel);color:var(--dunkel-text);border-color:var(--dunkel)}
.preisfeld+.preisfeld{margin-top:2rem}
.reiter-leiste:not([hidden])~.preisfeld+.preisfeld{margin-top:0}
.preisfeld-titel{font:400 1.9rem/1.1 var(--schrift-titel);margin-bottom:.8rem}
.reiter-leiste:not([hidden])~.preisfeld .preisfeld-titel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.preisliste{display:grid}
.preisliste li{display:grid;grid-template-columns:auto 1fr auto auto;align-items:baseline;gap:.7rem;padding:.85rem 0;border-bottom:1px solid var(--linie)}
.pl-name{font-weight:500}
.pl-name small{display:block;color:var(--leise);font-weight:400;font-size:.85rem}
.pl-punkte{border-bottom:1.5px dotted var(--linie-stark);transform:translateY(-.3rem)}
.pl-dauer{color:var(--leise);font-size:.88rem;white-space:nowrap}
.pl-preis{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:40rem){.preisliste li{grid-template-columns:1fr auto;gap:.2rem .8rem}.pl-punkte{display:none}.pl-dauer{grid-column:1}.pl-preis{grid-row:1;grid-column:2}}

/* Abnahme: dunkle Grundfarbe unter Foto und Verlauf (Kontrast, Ladezustand), Kartentitel ohne Überlauf, Formulare ohne Überbreite. */
.fahrt{background:#21101a}
.karte h3{font-size:clamp(1.2rem,1.6vw,1.3rem);overflow-wrap:anywhere}
.dunkel .etappe .dauer,.dunkel .karte .nr{color:var(--held-merk,var(--akzent))}
.felder>*,.feld,fieldset{min-width:0}
.feld input,.feld select,.feld textarea{min-width:0;max-width:100%}
.zweispalt>*,.werk{min-width:0}
/* Demo-Schild im Hero: der Betrieb ist erfunden. */
.demo-schild{display:inline-block;margin:1.2rem 0 0;padding:.35rem .65rem;border:1px solid rgb(255 255 255/.4);background:rgb(0 0 0/.6);font-size:.68rem;font-weight:700;letter-spacing:.14em;line-height:1.3;text-transform:uppercase;color:#fff}