/* =============================================================================
   MY GLANZWUCHT — »Manufaktur«
   Dunkles Editorial-Design: grosse Fotografie, Fraunces-Serife, Champagner-
   Akzent, Haarlinien, viel Raum. Bewegung nur als leises Ein- und Aufziehen.
   ========================================================================== */

@font-face{font-family:Fraunces;src:url(../fonts/fraunces-latin-300-normal.woff2) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:Fraunces;src:url(../fonts/fraunces-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Fraunces;src:url(../fonts/fraunces-latin-400-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Fraunces;src:url(../fonts/fraunces-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Montserrat;src:url(../fonts/montserrat-latin-500-normal.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Montserrat;src:url(../fonts/montserrat-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:swap}

:root{
  --nacht:#0B0B0C;
  --nacht-rgb:11,11,12;   /* fuer Schleier ueber Fotos – kippt im Hellmodus mit */
  --kohle:#111214;
  --rauch:#17181B;
  --linie:rgba(237,234,228,.1);
  --linie-stark:rgba(237,234,228,.2);
  --elfenbein:#EDEAE4;
  --grau:#9A968E;
  --champagner:#C2A878;
  --champagner-tief:#8F7A52;
  --fliess-hell:#D9D5CC;
  --fliess:#CFCBC2;
  --leise:#5E5B55;
  --leiser:#3C3B38;
  --ok-text:#E3D3AF;
  --fehler-text:#E8B0A8;
  --serif:Fraunces,Georgia,serif;
  --sans:Montserrat,system-ui,sans-serif;
  --takt:cubic-bezier(.25,.6,.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{
  background:var(--nacht);color:var(--elfenbein);
  font:500 16.5px/1.7 var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
::selection{background:var(--champagner);color:var(--nacht)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1px solid var(--champagner);outline-offset:4px}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0}

h1,h2,h3{font-family:var(--serif);font-weight:300;letter-spacing:.01em}
h1{font-size:clamp(2.7rem,6.2vw,5.6rem);line-height:1.06}
h2{font-size:clamp(2.1rem,4.6vw,3.9rem);line-height:1.08}
h1 em,h2 em{font-style:italic;font-weight:400;color:var(--champagner)}
h3{font-size:clamp(1.35rem,2.2vw,1.8rem);font-weight:400}

.mitte{width:min(100% - 3rem,1200px);margin-inline:auto}
.schmal{max-width:820px}
.vorspann{
  font:700 .68rem/1 var(--sans);letter-spacing:.34em;text-transform:uppercase;
  color:var(--grau);margin-bottom:1.5rem;
}
.begleit{color:var(--grau);max-width:52ch;margin-top:1.2rem;font-size:1.02rem}
.fussnote{margin-top:1.4rem;font-size:.78rem;color:var(--grau)}

/* ------------------------------------------------------------------ Kopf */
.kopf{
  position:fixed;inset:0 0 auto;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.3rem clamp(1.5rem,4vw,3.5rem);
  transition:background .4s,box-shadow .4s,padding .4s;
}
.kopf.fest{background:rgba(var(--nacht-rgb),.86);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--linie);padding-block:.95rem}
/* Logo oben, Schriftzug darunter. Das Logo traegt den Namen selbst, deshalb
   steht hier kein Wortzug mehr daneben. */
.kopf__marke{display:grid;justify-items:start;gap:.34rem;line-height:1.25;z-index:2}
.kopf__logo{width:auto;height:46px}

/* Das Logo ist silbern: auf dunklem Grund bleibt es in Originalfarbe, auf
   hellem Grund wuerde es untergehen – dort wird es dunkel gerechnet. */
.marke-bild{filter:none}
[data-thema="hell"] .marke-bild{filter:invert(1) brightness(.82)}
.kopf__wort{font:600 1.04rem var(--serif);letter-spacing:.04em}
.kopf__unter{font:700 .56rem var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--grau)}
.kopf__nav{display:flex;gap:2.1rem;align-items:center}
.kopf__nav a{font:700 .74rem var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--grau);transition:color .3s}
.kopf__nav a:hover{color:var(--elfenbein)}
.kopf__termin{
  color:var(--nacht)!important;background:var(--elfenbein);
  padding:.7rem 1.35rem;border-radius:2px;
  transition:background .3s,color .3s!important;
}
.kopf__termin:hover{background:var(--champagner)}
/* Umschalter Dunkel/Hell – zeigt immer das Ziel, nicht den Zustand:
   nachts die Sonne, tagsueber den Mond. */
.kopf__thema{
  display:grid;place-items:center;width:38px;height:38px;padding:0;margin-left:1.4rem;
  background:none;border:1px solid var(--linie-stark);border-radius:50%;
  color:var(--elfenbein);cursor:pointer;z-index:2;
  transition:border-color .35s var(--takt),color .35s var(--takt);
}
.kopf__thema:hover{border-color:var(--champagner);color:var(--champagner)}
.kopf__thema svg{width:17px;height:17px}
.kopf__thema .thema__mond{display:none}
:root[data-thema="hell"] .kopf__thema .thema__mond{display:block}
:root[data-thema="hell"] .kopf__thema .thema__sonne{display:none}

.burger{display:none;background:none;border:0;padding:.6rem;cursor:pointer;z-index:2}
.burger span{display:block;width:26px;height:1px;background:var(--elfenbein);margin:7px 0;transition:.35s var(--takt)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* ------------------------------------------------------------------ Hero */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;isolation:isolate;overflow:hidden}
.hero__bild{position:absolute;inset:0;z-index:-1}
.hero__bild img{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.hero__bild::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(var(--nacht-rgb),.55) 0%,rgba(var(--nacht-rgb),.15) 40%,rgba(var(--nacht-rgb),.82) 82%,var(--nacht) 100%),
    linear-gradient(90deg,rgba(var(--nacht-rgb),.5),transparent 55%);
}
.hero__inhalt{padding:0 clamp(1.5rem,4vw,3.5rem) clamp(5.5rem,10vh,8rem);max-width:880px}
.hero__satz{color:var(--fliess);max-width:50ch;margin-top:1.6rem;font-size:1.05rem}
.hero__zeile{display:flex;gap:1.8rem;align-items:center;flex-wrap:wrap;margin-top:2.6rem}
.hero__fuss{
  position:absolute;right:clamp(1.5rem,4vw,3.5rem);bottom:clamp(5.5rem,10vh,8rem);
  display:flex;flex-direction:column;align-items:center;gap:.9rem;
}
.hero__fuss .linie{width:1px;height:72px;background:linear-gradient(180deg,transparent,var(--champagner))}
.hero__hinweis{
  writing-mode:vertical-rl;font:700 .6rem var(--sans);letter-spacing:.3em;
  text-transform:uppercase;color:var(--grau);
}

/* ---------------------------------------------------------------- Tasten */
.taste{
  display:inline-flex;align-items:center;justify-content:center;
  padding:1.02rem 2.1rem;border-radius:2px;cursor:pointer;
  font:700 .78rem var(--sans);letter-spacing:.2em;text-transform:uppercase;
  background:var(--elfenbein);color:var(--nacht);border:1px solid var(--elfenbein);
  transition:background .35s,border-color .35s,color .35s;
}
.taste:hover{background:var(--champagner);border-color:var(--champagner)}
.taste--voll{width:100%}
.leise{
  display:inline-flex;align-items:center;gap:.7rem;
  font:700 .78rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--elfenbein);
}
.leise i{
  width:2.4rem;height:1px;background:var(--champagner);position:relative;
  transition:width .35s var(--takt);
}
.leise i::after{
  content:"";position:absolute;right:0;top:50%;width:7px;height:7px;
  border-top:1px solid var(--champagner);border-right:1px solid var(--champagner);
  transform:translateY(-50%) rotate(45deg);
}
.leise:hover i{width:3.4rem}

/* --------------------------------------------------------------- Saetze */
.satzblock{padding:clamp(6rem,12vw,10rem) 1.5rem}
.satzblock__text{
  font:300 clamp(1.55rem,3.4vw,2.5rem)/1.42 var(--serif);
  text-align:center;color:var(--fliess-hell);
}
.satzblock__text em{font-style:italic;color:var(--champagner)}
.goldlinie{
  display:block;width:0;height:1px;margin:3rem auto 0;
  background:linear-gradient(90deg,transparent,var(--champagner),transparent);
  transition:width 1.4s var(--takt);
}
.goldlinie.da{width:min(340px,60%)}

/* ------------------------------------------------------------ Abschnitte */
.abschnitt{padding:clamp(5rem,10vw,8.5rem) 0}
.abschnitt--rand{border-block:1px solid var(--linie);background:var(--kohle)}
.abschnitt__kopf{margin-bottom:clamp(2.8rem,6vw,4.5rem);max-width:760px}

/* ---------------------------------------------------------------- Kapitel */
.kapitel{border-top:1px solid var(--linie)}
.kapitel li{
  display:grid;grid-template-columns:5.5rem 1fr auto;gap:2rem;align-items:baseline;
  padding:2.2rem 0;border-bottom:1px solid var(--linie);
  transition:background .4s,padding-left .4s var(--takt);
}
.kapitel li:hover{background:linear-gradient(90deg,rgba(194,168,120,.05),transparent 60%);padding-left:1rem}
.kapitel__nr{font:300 2rem var(--serif);color:var(--champagner)}
.kapitel__text h3{margin-bottom:.5rem}
.kapitel__text p{color:var(--grau);max-width:58ch;font-size:.97rem}
.kapitel__wert{
  font:700 .64rem var(--sans);letter-spacing:.22em;text-transform:uppercase;
  color:var(--grau);text-align:right;white-space:nowrap;
}
.kapitel__wert b{display:block;font:400 1.5rem var(--serif);letter-spacing:0;color:var(--elfenbein);text-transform:none}

/* --------------------------------------------------------------- Vergleich */
.vergleich{
  position:relative;overflow:hidden;user-select:none;
  aspect-ratio:21/10;border:1px solid var(--linie-stark);
}
.vergleich img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vergleich__seite{position:absolute;inset:0}
.vergleich__seite span{
  position:absolute;bottom:1.4rem;z-index:2;
  font:700 .62rem var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--fliess-hell);
  padding:.55rem 1rem;background:rgba(var(--nacht-rgb),.68);border:1px solid var(--linie-stark);
}
.vergleich__seite--vorher span{left:1.4rem}
.vergleich__seite--nachher span{right:1.4rem}
.vergleich__seite--vorher img{filter:saturate(.25) contrast(.8) brightness(.65) sepia(.2)}
.vergleich__seite--vorher::before{
  content:"";position:absolute;inset:0;mix-blend-mode:screen;opacity:.85;
  background:
    repeating-conic-gradient(from 25deg at 32% 45%,rgba(255,255,255,.05) 0 1.6deg,transparent 1.6deg 7deg),
    repeating-conic-gradient(from 190deg at 70% 58%,rgba(255,255,255,.04) 0 1.3deg,transparent 1.3deg 6deg);
}
.vergleich__seite--nachher{clip-path:inset(0 0 0 50%)}
.vergleich__seite--nachher img{filter:saturate(1.08) contrast(1.08) brightness(1.02)}
.vergleich__griff{position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--champagner);z-index:2}
.vergleich__griff i{
  position:absolute;top:50%;left:50%;translate:-50% -50%;width:52px;height:52px;border-radius:50%;
  background:rgba(var(--nacht-rgb),.82);border:1px solid var(--champagner);
}
.vergleich__griff i::before,.vergleich__griff i::after{
  content:"";position:absolute;top:50%;width:7px;height:7px;
  border-top:1px solid var(--elfenbein);border-right:1px solid var(--elfenbein);
}
.vergleich__griff i::before{left:14px;transform:translateY(-50%) rotate(-135deg)}
.vergleich__griff i::after{right:14px;transform:translateY(-50%) rotate(45deg)}
.vergleich input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;z-index:3}

/* ----------------------------------------------------------------- Arbeiten */
.arbeiten{display:grid;gap:1.4rem;grid-template-columns:repeat(2,1fr)}
.arbeit{position:relative;overflow:hidden;border:1px solid var(--linie)}
.arbeit--gross{grid-column:1/-1}
.arbeit img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform 1.4s var(--takt),filter .8s}
.arbeit--gross img{aspect-ratio:21/9}
.arbeit:hover img{transform:scale(1.035)}
.arbeit figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:2.6rem 1.6rem 1.3rem;
  background:linear-gradient(0deg,rgba(var(--nacht-rgb),.88),transparent);
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;
}
.arbeit__titel{font:400 1.15rem var(--serif)}
.arbeit__detail{font:700 .62rem var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--champagner)}

/* ------------------------------------------------------------------ Tarife */
.tarife{display:grid;gap:0;grid-template-columns:repeat(3,1fr);border:1px solid var(--linie-stark)}
.tarif{
  padding:2.6rem 2.2rem;display:flex;flex-direction:column;gap:1.1rem;
  border-right:1px solid var(--linie);
  background:transparent;transition:background .4s;
}
.tarif:last-child{border-right:0}
.tarif:hover{background:rgba(237,234,228,.025)}
.tarif--mitte{background:var(--rauch)}
.tarif h3{font-size:1.6rem}
.tarif__satz{color:var(--grau);font-size:.92rem;margin-top:.4rem}
.tarif__preis{font:300 2.6rem var(--serif);color:var(--elfenbein)}
.tarif ul{display:grid;gap:.6rem;padding-block:.4rem}
.tarif li{
  position:relative;padding-left:1.5rem;font-size:.93rem;color:var(--fliess);
}
.tarif li::before{
  content:"";position:absolute;left:0;top:.66em;width:.7rem;height:1px;background:var(--champagner);
}
.tarif li em{font-style:italic;font-family:var(--serif)}
.tarif__zeit{font:700 .62rem var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--grau)}
.tarif .taste,.tarif .leise{margin-top:auto}
.tarif .taste{align-self:stretch}

/* -------------------------------------------------------------------- Haus */
.haus{display:grid;gap:clamp(2.5rem,6vw,5rem);grid-template-columns:1.05fr 1fr;align-items:center}
.haus__text p{color:var(--grau);max-width:52ch;margin-top:1.2rem;font-size:1rem}
.haus__text h2{margin-top:0}
.haus__fakten{margin-top:2.4rem;display:grid;gap:1rem;border-top:1px solid var(--linie);padding-top:1.6rem}
.haus__fakten div{display:grid;grid-template-columns:8rem 1fr;gap:1rem;align-items:baseline}
.haus__fakten dt{font:700 .64rem var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--champagner)}
.haus__fakten dd{margin:0;color:var(--fliess);font-size:.95rem}
.haus__bild{border:1px solid var(--linie);overflow:hidden}
.haus__bild img{width:100%;aspect-ratio:4/5;object-fit:cover}

/* ------------------------------------------------------------------ Fragen */
.fragen{display:grid;border-top:1px solid var(--linie)}
.fragen details{border-bottom:1px solid var(--linie)}
.fragen summary{
  list-style:none;cursor:pointer;position:relative;
  padding:1.5rem 3rem 1.5rem 0;
  font:400 1.2rem var(--serif);
  transition:color .3s;
}
.fragen summary:hover{color:var(--champagner)}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{
  content:"";position:absolute;right:.4rem;top:50%;width:9px;height:9px;
  border-right:1px solid var(--grau);border-bottom:1px solid var(--grau);
  transform:translateY(-70%) rotate(45deg);transition:transform .35s var(--takt);
}
.fragen details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.fragen p{padding:0 0 1.6rem;color:var(--grau);max-width:64ch;font-size:.97rem}

/* ----------------------------------------------------------------- Kontakt */
.kontakt{padding:clamp(5rem,10vw,8.5rem) 0;border-top:1px solid var(--linie)}
.kontakt__raster{display:grid;gap:clamp(2.5rem,6vw,5rem);grid-template-columns:1fr 1.1fr;align-items:start}
.kontakt__daten{margin-top:2.4rem;display:grid;gap:1rem;font-style:normal}
.kontakt__daten a{font:400 1.35rem var(--serif);color:var(--elfenbein);transition:color .3s;width:fit-content}
.kontakt__daten a:hover{color:var(--champagner)}
.kontakt__daten span{color:var(--grau);font-size:.95rem}

.form{display:grid;gap:1.15rem;border:1px solid var(--linie-stark);padding:2.4rem;background:var(--kohle)}
.feldpaar{display:grid;gap:1.15rem;grid-template-columns:1fr 1fr}
.form label{
  display:grid;gap:.5rem;
  font:700 .62rem var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--grau);
}
.form input,.form select,.form textarea{
  width:100%;padding:.9rem 1rem;border:1px solid var(--linie);
  background:var(--nacht);color:var(--elfenbein);
  font:500 1rem var(--sans);border-radius:2px;
  transition:border-color .3s;
}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--champagner)}
.form textarea{resize:vertical}
/* Versteckt bleibt versteckt: .check setzt display mit !important, das schlaegt
   sonst das hidden-Attribut – die Spam-Falle im Kontaktformular wurde dadurch
   sichtbar und Besucher konnten sie ausfuellen. */
[hidden]{display:none!important}

.check{display:flex!important;align-items:flex-start;gap:.75rem;text-transform:none!important;letter-spacing:0!important;font:500 .84rem var(--sans)!important;color:var(--grau)}
.check input{width:auto!important;margin-top:.2rem;accent-color:var(--champagner)}
.check a{text-decoration:underline}
.hinweis{padding:.95rem 1.1rem;font-size:.92rem;border:1px solid}
.hinweis--ok{border-color:rgba(194,168,120,.5);background:rgba(194,168,120,.08);color:var(--ok-text)}
.hinweis--fehler{border-color:rgba(214,106,96,.5);background:rgba(214,106,96,.08);color:var(--fehler-text)}

/* -------------------------------------------------------------------- Fuss */
.fuss{border-top:1px solid var(--linie);padding:2rem 0}
.fuss__zeile{
  display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:space-between;
  font-size:.78rem;color:var(--grau);
}
.fuss a{margin-right:1.2rem}
.fuss a:hover{color:var(--elfenbein)}
.fuss__mf{color:var(--leise)}

/* --------------------------------------------------------------- Bewegung */
/* Einblenden beim Scrollen. Ohne Angabe kommt der Inhalt von unten; mit
   data-e="links" bzw. "rechts" rutscht er von der Seite an seinen Platz.
   --verzug staffelt Geschwister, damit nichts im Block aufploppt. */
[data-e]{
  opacity:0;transform:translateY(28px);
  transition:opacity .9s var(--takt),transform .9s var(--takt);
  transition-delay:var(--verzug,0s);
  will-change:opacity,transform;
}
[data-e="links"]{transform:translateX(-52px)}
[data-e="rechts"]{transform:translateX(52px)}
[data-e="gross"]{transform:scale(.94)}
[data-e].da{opacity:1;transform:none}

/* Lebendige Schrift: die Wörter einer Überschrift steigen nacheinander auf.
   Das Aufteilen macht premium.js – ohne JavaScript bleibt der Text stehen. */
.wort{display:inline-block;overflow:hidden;vertical-align:top}
.wort > span{
  display:inline-block;
  transform:translateY(105%) rotate(2.5deg);
  opacity:0;
  transition:transform .85s var(--takt),opacity .5s var(--takt);
  transition-delay:calc(var(--wort-nr,0) * 55ms + var(--verzug,0s));
}
.da .wort > span,.wort.da > span{transform:none;opacity:1}

/* Der Champagner-Akzent bekommt beim Erscheinen einen kurzen Schimmer. */
.da .schimmer,.schimmer.da{
  background:linear-gradient(100deg,var(--champagner) 30%,var(--elfenbein) 50%,var(--champagner) 70%);
  background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:schimmern 1.6s var(--takt) .35s 1 both;
}
@keyframes schimmern{from{background-position:130% 0}to{background-position:-30% 0}}
.hero [data-e]{transition-delay:.15s}
.hero [data-e]:nth-child(2){transition-delay:.28s}
.hero [data-e]:nth-child(3){transition-delay:.4s}
.hero [data-e]:nth-child(4){transition-delay:.52s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.001ms!important;animation:none!important}
  [data-e]{opacity:1;transform:none}
  .wort > span{transform:none;opacity:1}
  .schimmer{animation:none;color:var(--champagner);background:none;-webkit-text-fill-color:currentColor}
  .goldlinie{width:min(340px,60%)}
  .hero__bild img{transform:none}
}

/* ------------------------------------------------------------------- Klein */
@media (max-width:1000px){
  .tarife{grid-template-columns:1fr;border:0;gap:1.2rem}
  .tarif{border:1px solid var(--linie-stark)}
  .haus{grid-template-columns:1fr}
  .haus__bild img{aspect-ratio:16/10}
  .kontakt__raster{grid-template-columns:1fr}
}
@media (max-width:860px){
  /* Auf dem Handy muss das Logo neben Themenknopf und Burger passen. */
  .kopf__marke{gap:.28rem}
  .kopf__logo{height:44px}
  .kopf__unter{letter-spacing:.2em}
  .burger{display:block}
  .kopf__nav{
    position:fixed;inset:0 0 auto;padding:6rem 2rem 2.4rem;
    flex-direction:column;align-items:flex-start;gap:1.5rem;
    background:rgba(var(--nacht-rgb),.97);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--linie);
    transform:translateY(-103%);transition:transform .5s var(--takt);
  }
  .kopf__nav.offen{transform:none}
  .kopf__nav a{font-size:1rem}
  .kapitel li{grid-template-columns:3.2rem 1fr}
  .kapitel__wert{grid-column:2;text-align:left;margin-top:.4rem}
  .kapitel__wert b{display:inline;font-size:1.1rem;margin-right:.5rem}
  .arbeiten{grid-template-columns:1fr}
  .arbeit img,.arbeit--gross img{aspect-ratio:16/10}
  .vergleich{aspect-ratio:4/3}
  .feldpaar{grid-template-columns:1fr}
  .form{padding:1.6rem}
}

/* ---------------------------------------------------------------- 3D-Hero */
.hero__3d{
  position:absolute;inset:0;z-index:-1;width:100%;height:100%;
  opacity:0;transition:opacity 1.2s var(--takt);
  touch-action:pan-y;cursor:grab;
}
.hero__3d.bereit{opacity:1}
/* Sobald das Modell steht, tritt das Foto zurueck */
.hero3d-aktiv .hero__bild img{opacity:0;transition:opacity 1.2s var(--takt)}
.hero3d-aktiv .hero__bild::after{
  background:
    linear-gradient(180deg,rgba(var(--nacht-rgb),.35) 0%,transparent 40%,rgba(var(--nacht-rgb),.75) 85%,var(--nacht) 100%);
}
/* ===================================================================== Hell
   Zweite Farbwelt: dieselbe Bauart, nur auf Papier statt bei Nacht. Alles
   laeuft ueber die Variablen von oben – die Schleier ueber den Fotos kippen
   ueber --nacht-rgb automatisch mit. Umgeschaltet wird ueber data-thema am
   <html>-Element; ohne Angabe bleibt es dunkel. */
:root[data-thema="hell"]{
  --nacht:#F6F4F0;
  --nacht-rgb:246,244,240;
  --kohle:#FFFFFF;
  --rauch:#EDE9E2;
  --linie:rgba(24,22,20,.14);
  --linie-stark:rgba(24,22,20,.26);
  --elfenbein:#181614;
  --grau:#5C574F;
  --champagner:#8A7345;
  --champagner-tief:#6B5834;
  --fliess-hell:#2E2A25;
  --fliess:#3A3630;
  --leise:#7A756C;
  --leiser:#A9A49B;
  --ok-text:#6B5A2E;
  --fehler-text:#8C332A;
  color-scheme:light;
}
:root[data-thema="dunkel"]{color-scheme:dark}

/* Im Hellen traegt dunkle Schrift nur ueber einem ruhigen Grund: das Foto
   tritt weit zurueck und liegt wie ein Wasserzeichen hinter dem Text. */
:root[data-thema="hell"] .hero__bild img{opacity:.42}
:root[data-thema="hell"] .hero__bild::after{
  background:
    linear-gradient(180deg,rgba(var(--nacht-rgb),.5) 0%,rgba(var(--nacht-rgb),.32) 38%,rgba(var(--nacht-rgb),.88) 80%,var(--nacht) 100%),
    linear-gradient(90deg,rgba(var(--nacht-rgb),.55),rgba(var(--nacht-rgb),.15) 60%);
}
/* Der Schleier hinter der Ueberschrift wird im Hellen zum hellen Kissen. */
:root[data-thema="hell"] .hero__inhalt::before{
  background:radial-gradient(ellipse 62% 56% at 50% 44%,rgba(var(--nacht-rgb),.92) 0%,rgba(var(--nacht-rgb),.6) 58%,transparent 82%);
}
/* Das Hero-Foto verschwindet im Hellen nicht ganz, wenn das 3D-Modell steht –
   sonst stuende der Wagen vor einer leeren Flaeche. */
:root[data-thema="hell"].hero3d-aktiv .hero__bild img,
:root[data-thema="hell"] .hero3d-aktiv .hero__bild img{opacity:0}

/* Wechselnde Werbezeile im Hero.
   Alle Saetze liegen im selben Rasterfeld uebereinander – so bestimmt der
   laengste die Hoehe und beim Wechsel springt nichts. Ohne JavaScript bleibt
   der erste Satz sichtbar stehen. */
.ruf{display:grid}
.ruf__satz{
  grid-area:1/1;
  opacity:0;transform:translateY(.28em);
  transition:opacity .9s var(--takt),transform .9s var(--takt);
  will-change:opacity,transform;
}
.ruf__satz--da{opacity:1;transform:none}

.hero__3dtipp{
  position:absolute;left:clamp(1.5rem,4vw,3.5rem);bottom:2rem;
  font:700 .6rem var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--grau);
  opacity:0;transition:opacity .8s 1s;
  pointer-events:none;
}
.hero3d-aktiv .hero__3dtipp{opacity:1}

/* ------------------------------------------------------- Vorteile & Ablauf */
.vorteile{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.vorteil{
  padding:1.9rem 1.6rem;border:1px solid var(--linie);
  display:grid;gap:.55rem;align-content:start;
  transition:border-color .4s var(--takt),transform .4s var(--takt),background .4s var(--takt);
}
.vorteil:hover{border-color:var(--champagner);transform:translateY(-4px);background:var(--kohle)}
.vorteil__nr{
  font:700 .68rem var(--sans);letter-spacing:.28em;color:var(--champagner);
}
.vorteil h3{font:400 1.3rem var(--serif);margin:0}
.vorteil p{margin:0;color:var(--fliess);font-size:.95rem}

/* Eigener Name, nicht ".schritte": den belegt weiter unten der Buchungs-
   Fortschrittsbalken, und der stand als spaeteres Regelwerk darueber. */
.schritt-karten{
  list-style:none;margin:0;padding:0;
  display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
}
.schritt-karte{
  position:relative;padding:2.2rem 1.7rem 1.7rem;
  border:1px solid var(--linie);background:var(--kohle);
  display:grid;gap:.6rem;align-content:start;
}
.schritt-karte__nr{
  position:absolute;top:-.9rem;left:1.6rem;
  width:2.4rem;height:2.4rem;display:grid;place-items:center;
  border-radius:50%;background:var(--champagner);color:var(--nacht);
  font:700 1rem var(--sans);
}
.schritt-karte h3{font:400 1.3rem var(--serif);margin:.3rem 0 0}
.schritt-karte p{margin:0;color:var(--fliess);font-size:.95rem}

/* -------------------------------------------------------------- Werbeband */
.werbeband{
  padding:clamp(3rem,7vw,5rem) 0;
  background:
    radial-gradient(60% 120% at 15% 0%,rgba(194,168,120,.16),transparent 60%),
    var(--rauch);
  border-block:1px solid var(--linie);
}
.werbeband__inhalt{
  display:grid;gap:2rem;align-items:center;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
}
.werbeband h2{font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.12}
.werbeband__satz{margin-top:1rem;color:var(--fliess);max-width:52ch}
.werbeband__tasten{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}

/* ---------------------------------------------------------------- Ortsband */
.ortsband{display:grid;gap:2.4rem;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:start}
.ortsband h2{font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.12;margin-bottom:1rem}
.ortsband p{color:var(--fliess);max-width:56ch}
.ortsband__daten{margin:0;display:grid;gap:1rem}
.ortsband__daten div{display:grid;gap:.2rem;padding-bottom:.9rem;border-bottom:1px solid var(--linie)}
.ortsband__daten dt{font:700 .62rem var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--grau)}
.ortsband__daten dd{margin:0;color:var(--elfenbein)}
.ortsband__daten a{color:var(--elfenbein);text-decoration:none;border-bottom:1px solid var(--linie-stark)}
.ortsband__daten a:hover{color:var(--champagner);border-color:var(--champagner)}

@media (max-width:860px){
  .werbeband__inhalt,.ortsband{grid-template-columns:1fr}
  .werbeband__tasten{flex-direction:row;flex-wrap:wrap;align-items:center}
}

/* ================================================================= Buchung */
.buchung{border:1px solid var(--linie-stark);background:var(--kohle);padding:clamp(1.6rem,4vw,2.8rem);display:grid;gap:1.6rem}
.buchung fieldset{border:0;padding:0;margin:0;min-width:0}
.schritt{display:none}
.schritt.aktiv{display:grid;gap:1.15rem}
.schritt__titel{font:400 1.45rem var(--serif);margin-bottom:.6rem;padding:0}
.schritt__zeile{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1.2rem;flex-wrap:wrap}
.schritt__zeile .leise{color:var(--grau)}
.schritt__zeile .leise i{transform:scaleX(-1)}

/* Fortschritt */
.schritte{display:flex;gap:0;border-bottom:1px solid var(--linie);padding-bottom:1.4rem}
.schritte li{
  flex:1;display:flex;align-items:center;gap:.75rem;
  font:700 .66rem var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--leise);
}
.schritte li b{
  width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;
  font:400 .95rem var(--serif);border:1px solid var(--linie-stark);color:var(--grau);
  transition:border-color .3s,color .3s,background .3s;
}
.schritte li.aktiv{color:var(--elfenbein)}
.schritte li.aktiv b{border-color:var(--champagner);color:var(--champagner)}
.schritte li.fertig b{background:var(--champagner);border-color:var(--champagner);color:var(--nacht)}

/* Leistungswahl */
.wahl{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.wahl__karte{position:relative;cursor:pointer}
.wahl__karte input{position:absolute;opacity:0;inset:0}
.wahl__rahmen{
  display:grid;gap:.45rem;height:100%;padding:1.3rem 1.2rem;
  border:1px solid var(--linie);transition:border-color .3s,background .3s;
}
.wahl__karte:hover .wahl__rahmen{border-color:var(--linie-stark)}
.wahl__karte input:checked + .wahl__rahmen{border-color:var(--champagner);background:rgba(194,168,120,.06)}
.wahl__karte input:focus-visible + .wahl__rahmen{outline:1px solid var(--champagner);outline-offset:3px}
.wahl__name{font:400 1.25rem var(--serif)}
.wahl__satz{color:var(--grau);font-size:.86rem;line-height:1.5}
.wahl__fuss{margin-top:auto;padding-top:.5rem;font:700 .62rem var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--grau)}
.wahl__fuss b{color:var(--champagner)}

/* Kalender + Slots */
.termin{display:grid;gap:1.6rem;grid-template-columns:1.15fr 1fr;align-items:start}
.kalender{border:1px solid var(--linie);padding:1.2rem}
.kalender__kopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.kalender__kopf span{font:400 1.15rem var(--serif)}
.kalender__pfeil{
  background:none;border:1px solid var(--linie);color:var(--elfenbein);
  width:2.2rem;height:2.2rem;cursor:pointer;transition:border-color .3s,color .3s;
}
.kalender__pfeil:hover:not(:disabled){border-color:var(--champagner);color:var(--champagner)}
.kalender__pfeil:disabled{opacity:.3;cursor:default}
.kalender__wochentage,.kalender__tage{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.kalender__wochentage span{
  text-align:center;font:700 .58rem var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--leise);padding-bottom:.5rem;
}
.kalender__tage button{
  aspect-ratio:1;background:none;border:1px solid transparent;color:var(--elfenbein);
  font:500 .9rem var(--sans);cursor:pointer;font-variant-numeric:tabular-nums;
  transition:border-color .25s,background .25s,color .25s;
}
.kalender__tage button:hover:not(:disabled){border-color:var(--linie-stark)}
.kalender__tage button:disabled{color:var(--leiser);cursor:default}
.kalender__tage button.heute{border-color:var(--linie)}
.kalender__tage button.gewaehlt{background:var(--champagner);color:var(--nacht);border-color:var(--champagner)}
.kalender__tage button.samstag:not(:disabled){color:var(--champagner-tief)}
.kalender__tage .leer{visibility:hidden}
.kalender__legende{margin-top:.9rem;font-size:.72rem;color:var(--leise)}

.slots__titel{font:400 1.05rem var(--serif);color:var(--grau);margin-bottom:1rem}
.slots__liste{display:grid;gap:.55rem;grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.slots__liste button{
  padding:.75rem .4rem;background:none;border:1px solid var(--linie);color:var(--elfenbein);
  font:500 .92rem var(--sans);cursor:pointer;font-variant-numeric:tabular-nums;
  transition:border-color .25s,background .25s,color .25s;
}
.slots__liste button:hover{border-color:var(--linie-stark)}
.slots__liste button.gewaehlt{background:var(--champagner);border-color:var(--champagner);color:var(--nacht)}
.slots__hinweis{grid-column:1/-1;color:var(--grau);font-size:.85rem}

/* Zusammenfassung */
.zusammenfassung{display:grid;gap:.5rem;border-top:1px solid var(--linie);padding-top:1.2rem}
.zusammenfassung:empty{display:none}
.zusammenfassung div{display:grid;grid-template-columns:9rem 1fr;gap:1rem;font-size:.93rem}
.zusammenfassung dt,.zusammenfassung .z-label{font:700 .62rem/1.9 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--champagner)}
.zusammenfassung .z-wert{color:var(--fliess)}

.kontakt__daten--breit{
  margin-top:2.6rem;display:flex;flex-wrap:wrap;gap:1rem 2.6rem;align-items:baseline;
}
.kontakt__daten--breit a{font-size:1.15rem}

@media (max-width:900px){
  .termin{grid-template-columns:1fr}
  .schritte li{font-size:.58rem;gap:.5rem}
  .zusammenfassung div{grid-template-columns:7rem 1fr}
}

/* ============================================================== Mehrseiter */
.kopf__nav a.aktiv{color:var(--elfenbein);position:relative}
.kopf__nav a.aktiv::after{
  content:"";position:absolute;left:0;right:0;bottom:-8px;height:1px;background:var(--champagner);
}
.seitenkopf{padding:clamp(9rem,16vh,12rem) 0 clamp(2.5rem,5vw,4rem);border-bottom:1px solid var(--linie)}
.seitenkopf h1{font-size:clamp(2.5rem,5.6vw,4.6rem)}
.seitenkopf .begleit{margin-top:1.4rem}
.abschnitt--oben-eng{padding-top:clamp(2.5rem,5vw,4rem)}

.teaser3{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.teaser{
  display:grid;gap:.55rem;padding:1.8rem 1.6rem;border:1px solid var(--linie);
  transition:border-color .3s,background .3s;
}
.teaser:hover{border-color:var(--champagner);background:rgba(194,168,120,.05)}
.teaser__nr{font:300 1.5rem var(--serif);color:var(--champagner)}
.teaser__name{font:400 1.3rem var(--serif)}
.teaser__satz{color:var(--grau);font-size:.9rem}
.weiterzeile{margin-top:2rem}

.arbeit__deck{
  position:absolute;left:0;right:0;bottom:0;padding:2.6rem 1.6rem 1.3rem;
  background:linear-gradient(0deg,rgba(var(--nacht-rgb),.88),transparent);
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;
}
.schluss-cta{
  display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap;
  border:1px solid var(--linie-stark);padding:clamp(2rem,5vw,3.5rem);background:var(--kohle);
}
.schluss-cta h2{font-size:clamp(1.9rem,4vw,3rem)}

.rechtsseite{padding:clamp(9rem,16vh,12rem) 0 clamp(4rem,8vw,6rem)}
.rechtsseite h1{font-size:clamp(2.3rem,5vw,4rem);margin-bottom:1rem}
.rechtsseite h2{font-size:1.3rem;margin:2.2rem 0 .6rem}
.rechtsseite p{color:var(--fliess);font-size:.97rem;max-width:68ch}
.rechtsseite a{text-decoration:underline;text-underline-offset:3px}

/* =============================================================================
   Ergaenzungen fuer die Website (dynamische Seiten, Fuss, Meldungen)
   ========================================================================== */

.nur-vorleser{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nur-vorleser:focus{
  position:fixed;top:1rem;left:1rem;width:auto;height:auto;clip:auto;z-index:100;
  padding:.8rem 1.2rem;background:var(--elfenbein);color:var(--nacht);
  font:700 .72rem var(--sans);letter-spacing:.18em;text-transform:uppercase;
}

/* ------------------------------------------------------------------- Fuss */
.fuss__raster{
  display:grid;gap:2.5rem clamp(2rem,5vw,4rem);
  grid-template-columns:1.4fr repeat(3,1fr);
  padding-bottom:2.5rem;
}
.fuss__marke img{opacity:.85}
.fuss__satz{margin-top:1rem;color:var(--grau);font-size:.9rem;max-width:34ch}
.fuss__spalte{display:grid;gap:.55rem;align-content:start}
.fuss__spalte h2{
  font:700 .62rem var(--sans);letter-spacing:.26em;text-transform:uppercase;
  color:var(--champagner);margin-bottom:.6rem;
}
.fuss__spalte a{color:var(--grau);font-size:.9rem;margin:0;transition:color .3s;width:fit-content}
.fuss__spalte a:hover{color:var(--elfenbein)}
.fuss__spalte address{font-style:normal;color:var(--grau);font-size:.9rem;margin-bottom:.35rem}
.fuss__zeiten{margin-top:.6rem;color:var(--leise);font-size:.8rem;line-height:1.6}
.fuss__zeile{padding-top:1.6rem;border-top:1px solid var(--linie)}

/* ---------------------------------------------------------------- Meldungen */
.flash-stack{position:fixed;left:1.2rem;bottom:1.2rem;z-index:90;display:grid;gap:.6rem;max-width:min(26rem,88vw)}
.flash{
  display:flex;align-items:flex-start;gap:.8rem;
  padding:.9rem 1.1rem;border:1px solid var(--linie-stark);
  background:rgba(17,18,20,.96);backdrop-filter:blur(12px);
  font-size:.9rem;color:var(--fliess-hell);
  animation:flash-rein .4s var(--takt) both;
}
.flash--ok{border-color:rgba(194,168,120,.55);color:var(--ok-text)}
.flash--error{border-color:rgba(214,106,96,.55);color:var(--fehler-text)}
.flash button{background:none;border:0;color:var(--grau);font-size:1.2rem;line-height:1;cursor:pointer}
.flash button:hover{color:var(--elfenbein)}
@keyframes flash-rein{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------- Leistungsuebersicht */
.gruppe{margin-top:clamp(3rem,7vw,5rem)}
.gruppe:first-child{margin-top:0}
.gruppe__kopf{
  display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  padding-bottom:1.1rem;border-bottom:1px solid var(--linie-stark);
}
.gruppe__kopf h2{font-size:clamp(1.7rem,3.2vw,2.4rem)}
.gruppe__zahl{font:700 .62rem var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--grau)}

.liste{display:grid;border-bottom:1px solid var(--linie)}
.liste__zeile{
  display:grid;grid-template-columns:1fr auto;gap:1rem 2rem;align-items:baseline;
  padding:1.7rem 0;border-top:1px solid var(--linie);
  transition:background .4s,padding-left .4s var(--takt);
}
.liste__zeile:hover{background:linear-gradient(90deg,rgba(194,168,120,.05),transparent 60%);padding-left:1rem}
.liste__name{font:400 1.25rem var(--serif)}
.liste__name a:hover{color:var(--champagner)}
.liste__satz{color:var(--grau);font-size:.94rem;max-width:62ch;margin-top:.35rem}
.liste__meta{margin-top:.5rem;font:700 .6rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--leise)}
.liste__preis{text-align:right;white-space:nowrap;font:300 1.6rem var(--serif);color:var(--elfenbein)}
.liste__preis small{display:block;font:700 .58rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--grau)}

/* Preistabelle nach Fahrzeuggroesse */
.groessen{width:100%;border-collapse:collapse;margin-top:1rem}
.groessen th,.groessen td{padding:1rem .8rem;text-align:right;border-bottom:1px solid var(--linie);font-size:.95rem}
.groessen th:first-child,.groessen td:first-child{text-align:left}
.groessen thead th{
  font:700 .6rem var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--champagner);
  border-bottom-color:var(--linie-stark);
}
.groessen tbody th{font:400 1.05rem var(--serif);font-weight:400;color:var(--elfenbein)}
.groessen td{color:var(--fliess);font-variant-numeric:tabular-nums}
.tabellenrolle{overflow-x:auto}

/* ------------------------------------------------------------------ Kennzahlen */
.kennzahlen{
  display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  border:1px solid var(--linie-stark);
}
.kennzahl{padding:2rem 1.8rem;border-right:1px solid var(--linie)}
.kennzahl:last-child{border-right:0}
.kennzahl b{display:block;font:300 2.6rem var(--serif);color:var(--champagner);line-height:1.1}
.kennzahl span{font:700 .6rem var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--grau)}

/* ----------------------------------------------------------------- Textseiten */
.rechtsseite h3{font-size:1.05rem;margin:1.6rem 0 .4rem}
.rechtsseite ul{margin:.6rem 0 0;display:grid;gap:.45rem}
.rechtsseite li{position:relative;padding-left:1.5rem;color:var(--fliess);font-size:.97rem}
.rechtsseite li::before{content:"";position:absolute;left:0;top:.7em;width:.7rem;height:1px;background:var(--champagner)}
.rechtsseite dl{display:grid;gap:.6rem;margin-top:1rem}
.rechtsseite dt{font:700 .62rem var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--champagner)}
.rechtsseite dd{margin:0 0 .6rem;color:var(--fliess);font-size:.97rem}

/* -------------------------------------------------------------- Terminstrecke */
.buchung__kopf{margin-bottom:1.6rem}
.schritte--link li{cursor:default}
.buchung .liste__zeile{grid-template-columns:1fr auto}
.tage{display:grid;gap:1.1rem}
.tag{border:1px solid var(--linie);padding:1.2rem 1.3rem}
.tag__kopf{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-bottom:.9rem;
}
.tag__name{font:400 1.15rem var(--serif)}
.tag__nr{font:700 .6rem var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--grau)}
.tag .slots__liste{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
.tag .slots__liste a{
  display:block;text-align:center;padding:.75rem .4rem;border:1px solid var(--linie);
  font:500 .92rem var(--sans);font-variant-numeric:tabular-nums;color:var(--elfenbein);
  transition:border-color .25s,background .25s,color .25s;
}
.tag .slots__liste a:hover{border-color:var(--champagner);background:rgba(194,168,120,.08);color:var(--champagner)}

@media (max-width:1000px){
  .fuss__raster{grid-template-columns:1fr 1fr}
  .kennzahl{border-right:0;border-bottom:1px solid var(--linie)}
}
@media (max-width:640px){
  .fuss__raster{grid-template-columns:1fr}
  .liste__zeile{grid-template-columns:1fr}
  .liste__preis{text-align:left}
}

/* Kontaktangaben als Label/Wert-Paare */
.kontakt__daten{grid-template-columns:7rem 1fr;align-items:baseline;gap:1.1rem 1.4rem}
.kontakt__was{
  font:700 .6rem var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--champagner);
}
.kontakt__ort{color:var(--fliess);font-size:.95rem;line-height:1.6}
@media (max-width:520px){ .kontakt__daten{grid-template-columns:1fr;gap:.3rem} .kontakt__was{margin-top:.9rem} }

/* Rechtstexte: Angabenliste und Betreiberhinweis */
.rechtsseite .fakten{display:grid;gap:.2rem;margin-top:1rem}
.rechtsseite .fakten div{display:grid;grid-template-columns:12rem 1fr;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--linie)}
.rechtsseite .fakten dt{font:700 .62rem var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--champagner);padding-top:.25rem}
.rechtsseite .fakten dd{margin:0;color:var(--fliess);font-size:.97rem}
.rechtsseite .merkzettel{
  margin-top:2.5rem;padding:1.2rem 1.4rem;border:1px solid var(--linie-stark);background:var(--kohle);
  color:var(--grau);font-size:.88rem;
}
.rechtsseite .merkzettel strong{color:var(--champagner);font-weight:700}
.rechtsseite p + p{margin-top:.9rem}
@media (max-width:640px){ .rechtsseite .fakten div{grid-template-columns:1fr;gap:.2rem} }

/* ============================================================ Terminstrecke */
.seitenkopf--strecke{padding-bottom:clamp(1.5rem,3vw,2.5rem)}
.verweis{text-decoration:underline;text-underline-offset:3px;color:var(--elfenbein)}
.verweis:hover{color:var(--champagner)}

/* Fortschritt: Schritte auch als Link */
.schritte li a{display:flex;align-items:center;gap:.75rem;color:inherit}
.schritte li.fertig a:hover{color:var(--champagner)}

/* Merkzeile mit der bisherigen Auswahl */
.merker{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  margin-top:1.8rem;padding:1.3rem 1.5rem;border:1px solid var(--linie-stark);background:var(--kohle);
}
.merker__label{
  display:block;font:700 .6rem var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--champagner);
}
.merker b{display:block;font:400 1.2rem var(--serif);margin-top:.35rem}
.merker__zusatz{font-size:.85rem;color:var(--grau)}

/* Naechster freier Termin */
.naechster{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  margin-top:1.4rem;padding:1.5rem;border:1px solid var(--champagner);
  background:linear-gradient(90deg,rgba(194,168,120,.08),transparent 70%);
  transition:background .4s;
}
.naechster:hover{background:linear-gradient(90deg,rgba(194,168,120,.16),transparent 70%)}
.naechster b{display:block;font:400 1.25rem var(--serif);margin-top:.35rem}

.tag--voll{opacity:.45}
.slot--belegt{
  display:block;text-align:center;padding:.75rem .4rem;border:1px dashed var(--linie);
  color:#4B4945;font:500 .92rem var(--sans);font-variant-numeric:tabular-nums;
}

/* Optionale Felder */
.mehr{border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);padding:.2rem 0}
.mehr summary{
  list-style:none;cursor:pointer;padding:.9rem 0;position:relative;
  font:700 .62rem var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--grau);
}
.mehr summary::-webkit-details-marker{display:none}
.mehr summary::after{
  content:"";position:absolute;right:.3rem;top:50%;width:8px;height:8px;
  border-right:1px solid var(--grau);border-bottom:1px solid var(--grau);
  transform:translateY(-70%) rotate(45deg);transition:transform .35s var(--takt);
}
.mehr[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.mehr summary:hover{color:var(--champagner)}
.mehr__inhalt{display:grid;gap:1.15rem;padding:.4rem 0 1.2rem}

/* Festgeklebte Leiste am unteren Rand */
.leiste{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  padding:.9rem clamp(1.2rem,4vw,3.5rem);
  background:rgba(var(--nacht-rgb),.92);backdrop-filter:blur(14px);
  border-top:1px solid var(--linie-stark);
}
.leiste__label{
  display:block;font:700 .58rem var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--champagner);
}
.leiste__stand b{display:block;font:400 1.05rem var(--serif);margin-top:.2rem}
.leiste__aktion{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.leiste__aktion .taste{padding:.85rem 1.6rem}
.leiste__neben{background:none;border:0;cursor:pointer}
body:has(.leiste) main{padding-bottom:6.5rem}
body:has(.leiste) .flash-stack{bottom:6rem}

@media (max-width:720px){
  .leiste{padding:.7rem 1.1rem;gap:.7rem}
  .leiste__stand b{font-size:.95rem}
  .leiste__zusatz{display:none}
  .leiste__aktion{width:100%;justify-content:space-between}
  .leiste__aktion .taste{flex:1;text-align:center}
}

/* Weiter-Knopf steht im DOM zuerst (Eingabetaste), angezeigt rechts */
.leiste__neben{order:-1}

/* --------------------------------------------------- Feinschliff fuer klein */
@media (max-width:860px){
  /* Auf dem Handy steht der Wagen mittig hinter der Schrift – dafuer legt
     sich ein kraeftigerer Schleier darueber, damit der Text vorn bleibt. */
  .hero3d-aktiv .hero__bild::after{
    background:
      linear-gradient(180deg,rgba(var(--nacht-rgb),.55) 0%,rgba(var(--nacht-rgb),.25) 30%,rgba(var(--nacht-rgb),.88) 78%,var(--nacht) 100%);
  }
}
@media (max-width:640px){
  /* Fortschritt: nur die Ziffern, der Titel nennt den Schritt ohnehin */
  .schritte{gap:.6rem;justify-content:flex-start}
  .schritte li{flex:0 0 auto;font-size:0;gap:0}
  .schritte li b{font-size:.95rem}
  body:has(.leiste) main{padding-bottom:10rem}
  body:has(.leiste) .flash-stack{bottom:10rem}
}

/* Auf schmalen Fenstern legt sich ein Schleier ueber das 3D-Modell, damit
   die Schrift vorn bleibt – die Leinwand liegt sonst ueber dem Foto-Verlauf. */
.hero__inhalt{position:relative;z-index:1}
.hero__fuss,.hero__3dtipp{z-index:1}
@media (max-width:860px){
  .hero3d-aktiv .hero::after{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(var(--nacht-rgb),.35) 0%,rgba(var(--nacht-rgb),.12) 32%,rgba(var(--nacht-rgb),.72) 78%,var(--nacht) 100%);
  }
}

/* ============================================ Hero: Wagen mittig, Titel drauf
   Der Wagen steht in der Mitte, die Schrift liegt darueber. Damit sie lesbar
   bleibt, wenn sich eine helle Felge darunter dreht, liegt ein weicher
   Schleier hinter dem Textblock. */
.hero{align-items:center}
.hero__inhalt{
  margin-inline:auto;text-align:center;max-width:940px;
  padding:clamp(6rem,12vh,9rem) clamp(1.5rem,4vw,3.5rem) clamp(4rem,8vh,6rem);
}
.hero__satz{margin-inline:auto}
.hero__zeile{justify-content:center}
.hero__inhalt::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:clamp(2rem,6vh,4.5rem) -8% clamp(1rem,4vh,3rem);
  background:radial-gradient(ellipse 58% 52% at 50% 44%,rgba(var(--nacht-rgb),.6) 0%,rgba(var(--nacht-rgb),.28) 58%,transparent 80%);
}
@media (max-width:860px){
  .hero__inhalt{padding-top:clamp(7rem,14vh,9rem)}
  .hero__inhalt::before{inset:1.5rem -12% 1rem}
}

/* ============================================================= Kundenkonto */
.portal-nav{
  display:flex;gap:2rem;flex-wrap:wrap;
  border-bottom:1px solid var(--linie);
  padding:0 clamp(1.5rem,4vw,3.5rem);
  width:min(100% - 3rem,1200px);margin-inline:auto;padding-inline:0;
}
.portal-nav a{
  padding:1rem 0;font:700 .68rem var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--grau);border-bottom:1px solid transparent;margin-bottom:-1px;transition:color .3s,border-color .3s;
}
.portal-nav a:hover{color:var(--elfenbein)}
.portal-nav a.aktiv{color:var(--elfenbein);border-bottom-color:var(--champagner)}

/* Karten mit Kennzahl */
.kachel{
  display:grid;gap:.5rem;align-content:start;
  padding:1.8rem 1.6rem;border:1px solid var(--linie);transition:border-color .3s,background .3s;
}
.kachel:hover{border-color:var(--linie-stark);background:rgba(237,234,228,.02)}
.kachel__zahl{font:300 2.8rem var(--serif);color:var(--champagner);line-height:1}
.kachel h2,.kachel h3{font:400 1.2rem var(--serif)}
.kachel p{color:var(--grau);font-size:.9rem}
.kachel a{
  margin-top:.6rem;font:700 .62rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--champagner);
}
.kachel a:hover{color:var(--elfenbein)}
.kachel__kennzeichen{
  align-self:start;padding:.35rem .7rem;border:1px solid var(--linie-stark);
  font:700 .78rem var(--sans);letter-spacing:.14em;text-transform:uppercase;width:fit-content;
}

/* Karte fuer Termin/Auftrag */
.beleg{border:1px solid var(--linie-stark);background:var(--kohle);padding:1.6rem 1.7rem;display:grid;gap:1rem}
.beleg + .beleg{margin-top:1rem}
.beleg--still{opacity:.5}
.beleg__kopf{display:flex;justify-content:space-between;align-items:baseline;gap:1.2rem;flex-wrap:wrap}
.beleg__kopf h3{font:400 1.3rem var(--serif)}
.beleg__wann{font:400 1.3rem var(--serif);color:var(--champagner);white-space:nowrap}
.beleg__satz{color:var(--grau);font-size:.9rem}
.beleg__aktion{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap}

/* Zustandsmarke */
.marke{
  display:inline-block;padding:.4rem .85rem;border:1px solid var(--linie-stark);
  font:700 .58rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--grau);white-space:nowrap;
}
.marke--gut{border-color:rgba(194,168,120,.6);color:var(--champagner)}
.marke--offen{border-color:var(--linie-stark);color:var(--grau)}
.marke--aus{border-color:rgba(214,106,96,.5);color:var(--fehler-text)}

/* Auftragsfluss */
.fluss{display:flex;gap:0;flex-wrap:wrap;border-top:1px solid var(--linie);padding-top:1rem}
.fluss li{
  flex:1;min-width:7rem;position:relative;padding-left:1.4rem;
  font:700 .6rem var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--leise);
}
.fluss li::before{
  content:"";position:absolute;left:0;top:.35em;width:8px;height:8px;border-radius:50%;
  border:1px solid var(--linie-stark);
}
.fluss li.fertig::before{background:var(--champagner);border-color:var(--champagner)}
.fluss li.jetzt{color:var(--elfenbein)}
.fluss li.jetzt::before{border-color:var(--champagner)}

.posten{display:grid;gap:.4rem;border-top:1px solid var(--linie);padding-top:1rem}
.posten li{position:relative;padding-left:1.5rem;font-size:.93rem;color:var(--fliess)}
.posten li::before{content:"";position:absolute;left:0;top:.66em;width:.7rem;height:1px;background:var(--champagner)}
.posten li.erledigt{color:var(--grau);text-decoration:line-through;text-decoration-color:var(--champagner-tief)}

/* Hinweiskarte */
.merkkarte{
  border:1px solid var(--linie-stark);background:var(--kohle);padding:1.8rem;
  display:grid;gap:1.1rem;justify-items:start;
}
.merkkarte p{color:var(--fliess)}

/* Tabelle im Konto */
.tabelle{width:100%;border-collapse:collapse}
.tabelle th,.tabelle td{padding:1rem .8rem;text-align:left;border-bottom:1px solid var(--linie);font-size:.94rem}
.tabelle thead th{
  font:700 .58rem var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--champagner);
  border-bottom-color:var(--linie-stark);
}
.tabelle td{color:var(--fliess)}
.tabelle .zahl{text-align:right;font-variant-numeric:tabular-nums}
.tabelle .rechts{text-align:right}
.tabelle b{color:var(--elfenbein);font-weight:400;font-family:var(--serif);font-size:1.05rem}
.tabelle small{display:block;color:var(--leise);font-size:.72rem;letter-spacing:.1em}

.kacheln{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.konto__kopf{
  display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;flex-wrap:wrap;
  margin-bottom:1.8rem;
}
@media (max-width:640px){
  .portal-nav{gap:1.2rem}
  .portal-nav a{font-size:.6rem}
}

/* ======================================== Leistungen: Wegweiser und Karten */
.hero--kurz{min-height:78svh}
.hero--kurz .hero__inhalt{padding-top:clamp(7rem,14vh,10rem)}
.hero--kurz h1{font-size:clamp(2.4rem,5.4vw,4.6rem)}

.taste--klein{padding:.7rem 1.3rem;font-size:.68rem}
.leise--klein{font-size:.68rem}
.leise--klein i{width:1.8rem}

/* Wegweiser: drei grosse Einstiege in Klartext */
.wegweiser{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.weg{
  display:grid;gap:.6rem;align-content:start;
  padding:2rem 1.8rem;border:1px solid var(--linie);
  transition:border-color .35s,background .35s,transform .35s var(--takt);
}
.weg:hover{border-color:var(--champagner);background:rgba(194,168,120,.05);transform:translateY(-3px)}
.weg__bereich{font:700 .6rem var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--champagner)}
.weg__name{font:400 1.5rem var(--serif);line-height:1.2}
.weg__satz{color:var(--grau);font-size:.93rem;line-height:1.6}
.weg__fuss{
  margin-top:.8rem;display:flex;align-items:center;gap:.7rem;
  font:700 .6rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--grau);
}
.weg__fuss i{
  width:1.8rem;height:1px;background:var(--champagner);position:relative;transition:width .35s var(--takt);
}
.weg__fuss i::after{
  content:"";position:absolute;right:0;top:50%;width:6px;height:6px;
  border-top:1px solid var(--champagner);border-right:1px solid var(--champagner);
  transform:translateY(-50%) rotate(45deg);
}
.weg:hover .weg__fuss i{width:2.6rem}

/* Leistungskarten – scannbar statt Fliesstext */
.lkarten{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.lkarte{
  display:flex;flex-direction:column;gap:.7rem;
  padding:1.8rem 1.7rem;border:1px solid var(--linie);background:rgba(17,18,20,.5);
  transition:border-color .35s,background .35s;
}
.lkarte:hover{border-color:var(--linie-stark);background:var(--kohle)}
.lkarte__name{font:400 1.35rem var(--serif);line-height:1.25}
.lkarte__name a:hover{color:var(--champagner)}
.lkarte__satz{color:var(--grau);font-size:.93rem;line-height:1.6}
.lkarte__zahlen{
  display:flex;gap:2.2rem;flex-wrap:wrap;margin-top:auto;padding-top:1.1rem;
  border-top:1px solid var(--linie);
}
.lkarte__zahlen dt{font:700 .58rem var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--grau)}
.lkarte__zahlen dd{margin:.3rem 0 0;font:400 1.15rem var(--serif);color:var(--elfenbein)}
.lkarte__fuss{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;padding-top:1.1rem}

@media (max-width:640px){
  .lkarte__zahlen{gap:1.6rem}
  .hero--kurz{min-height:70svh}
}

/* --------------------------------------------------------- App-Installation */
.app-schritte{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:2rem}
.app-schritt{padding:1.8rem 1.6rem;border:1px solid var(--linie);background:var(--kohle)}
.app-schritt h2{font:400 1.5rem var(--serif);margin:0 0 .9rem}
.app-schritt ol{margin:0;padding-left:1.2rem;display:grid;gap:.6rem;color:var(--fliess)}
.app-schritt .taste{margin-top:1.2rem}
.app-hinweis{margin-top:2.4rem;padding:1.8rem 1.6rem;border-left:2px solid var(--champagner)}
.app-hinweis h2{font:400 1.4rem var(--serif);margin:0 0 .6rem}
.app-hinweis p{color:var(--fliess);margin:0}
.app-lade{
  display:grid;gap:1.6rem;align-items:center;margin-top:2rem;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  padding:2rem 1.8rem;border:1px solid var(--champagner);
  background:radial-gradient(70% 130% at 10% 0%,rgba(194,168,120,.14),transparent 60%),var(--kohle);
}
.app-lade__titel{font:400 1.8rem var(--serif);margin:.3rem 0 .6rem}
.app-lade__satz{color:var(--fliess);margin:0}
.app-lade__tasten{display:grid;gap:.6rem;justify-items:start}
.app-lade__klein{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grau)}
.app-hinweis--warnung{border-left-color:var(--champagner-tief)}
@media (max-width:760px){.app-lade{grid-template-columns:1fr}}

/* Wer die Seite gebaut hat – dezent im Fuß, aber anklickbar. */
.fuss__bauer{
  display:inline-flex;align-items:center;gap:.55rem;
  color:var(--grau);text-decoration:none;font-size:.78rem;
  transition:color .3s var(--takt);
}
.fuss__bauer img{width:26px;height:26px;flex:0 0 26px;opacity:.85;transition:opacity .3s}
.fuss__bauer:hover{color:var(--elfenbein)}
.fuss__bauer:hover img{opacity:1}
.fuss__bauer strong{font-weight:600;color:inherit}
.widerruf-muster{
  background:var(--kohle);border:1px solid var(--linie);padding:1.4rem;
  font:400 .82rem/1.7 var(--sans);white-space:pre-wrap;color:var(--fliess);
  overflow-x:auto;margin:1rem 0 2rem;
}

/* Zustimmungen – klar lesbar, nicht kleingedruckt versteckt. */
.zustimmung{display:grid;gap:.9rem;margin:1.6rem 0 1.2rem;padding:1.2rem;border:1px solid var(--linie);background:var(--kohle)}
.zustimmung__zeile{display:flex;gap:.8rem;align-items:flex-start;text-transform:none;letter-spacing:0;font:400 .88rem/1.6 var(--sans);color:var(--fliess)}
.zustimmung__zeile input{width:20px;height:20px;flex:0 0 20px;margin-top:.1rem;accent-color:var(--champagner)}
.zustimmung__zeile a{color:var(--elfenbein);border-bottom:1px solid var(--linie-stark)}
.zustimmung__zeile a:hover{color:var(--champagner);border-color:var(--champagner)}

/* ------------------------------------------------------------- Cookie-Hinweis
   Erscheint nur, wenn wirklich gemessen werden soll – sonst gäbe es nichts
   einzuwilligen. Kein Dunkelmuster: „Nur das Nötige" ist gleichwertig sichtbar. */
.kekse{
  position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%);
  z-index:200;width:min(680px,calc(100vw - 2rem));
  display:grid;gap:1.2rem;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  padding:1.3rem 1.5rem;background:var(--kohle);border:1px solid var(--linie-stark);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.kekse__text strong{display:block;font:400 1.05rem var(--serif);margin-bottom:.35rem}
.kekse__text p{margin:0;font-size:.85rem;color:var(--fliess)}
.kekse__text a{color:var(--elfenbein);border-bottom:1px solid var(--linie-stark)}
.kekse__tasten{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
@media (max-width:700px){
  .kekse{grid-template-columns:1fr;bottom:0;width:100vw;border-left:0;border-right:0;border-bottom:0}
}

/* ------------------------------------------- 3D im Kopf der Terminstrecke
   Derselbe Baustein wie im Hero, aber eingefasst: der Wagen liegt hinter der
   Ueberschrift des ersten Schritts, nicht ueber die ganze Seite. Ab Schritt 2
   wird ausgefuellt – dort laedt bewusst kein Modell mehr. */
.seitenkopf--3d{position:relative;isolation:isolate;overflow:hidden}
.seitenkopf__3d{
  position:absolute;inset:0;z-index:-1;width:100%;height:100%;
  opacity:0;transition:opacity 1.2s var(--takt);
  touch-action:pan-y;cursor:grab;
}
.seitenkopf__3d.bereit{opacity:1}
/* Schleier, damit die Schrift lesbar bleibt, sobald der Wagen steht */
.seitenkopf--3d::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--nacht-rgb),.55) 0%,rgba(var(--nacht-rgb),.25) 45%,var(--nacht) 100%);
  opacity:0;transition:opacity 1.2s var(--takt);
}
.hero3d-aktiv .seitenkopf--3d::after{opacity:1}
/* Etwas mehr Hoehe, sonst wird der Wagen oben und unten beschnitten */
.hero3d-aktiv .seitenkopf--3d{padding-bottom:clamp(4rem,8vw,6rem)}

/* ------------------------------------------------- Terminstrecke, Schritt 1
   Vorher: 18 Leistungen offen untereinander, 7 Bildschirme Scrollweg, und die
   getroffene Auswahl war nur an einem duennen Rahmen zu erkennen. */

/* --- Auswahl deutlich quittieren ---------------------------------------- */
.wahl__rahmen{position:relative;padding-right:3.2rem}
/* Leerer Kreis: zeigt, dass hier ueberhaupt etwas zu waehlen ist */
.wahl__rahmen::before{
  content:"";position:absolute;top:1.1rem;right:1.1rem;
  width:1.55rem;height:1.55rem;border-radius:50%;
  border:1px solid var(--linie-stark);background:transparent;
  transition:background .25s var(--takt),border-color .25s var(--takt);
}
/* Haken, erst bei Auswahl sichtbar */
.wahl__rahmen::after{
  content:"";position:absolute;top:1.62rem;right:1.62rem;
  width:.52rem;height:.28rem;
  border-left:2px solid var(--nacht);border-bottom:2px solid var(--nacht);
  transform:rotate(-45deg) scale(.4);opacity:0;
  transition:opacity .2s var(--takt),transform .25s var(--takt);
}
.wahl__karte input:checked + .wahl__rahmen{
  border-color:var(--champagner);
  background:rgba(194,168,120,.13);
  box-shadow:inset 0 0 0 1px var(--champagner);
}
.wahl__karte input:checked + .wahl__rahmen::before{
  background:var(--champagner);border-color:var(--champagner);
}
.wahl__karte input:checked + .wahl__rahmen::after{opacity:1;transform:rotate(-45deg) scale(1)}
.wahl__karte input:checked + .wahl__rahmen .wahl__name{color:var(--elfenbein)}

/* Der empfohlene Weg fuer alle, die nicht wissen, was sie brauchen */
.wahl__karte--empfohlen .wahl__rahmen{border-color:var(--linie-stark)}
.wahl__karte--empfohlen input:checked + .wahl__rahmen{
  box-shadow:inset 0 0 0 1px var(--champagner),0 10px 30px rgba(0,0,0,.35);
}

/* --- Kategorien zum Aufklappen ------------------------------------------ */
.wahlgruppe{border-top:1px solid var(--linie);margin-top:0}
.wahlgruppe:last-of-type{border-bottom:1px solid var(--linie)}
.wahlgruppe__kopf{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.15rem .2rem;cursor:pointer;list-style:none;
  transition:color .25s var(--takt);
}
.wahlgruppe__kopf::-webkit-details-marker{display:none}
.wahlgruppe__kopf:hover{color:var(--champagner)}
.wahlgruppe__kopf .schritt__titel{margin:0}
.wahlgruppe__anzahl{
  display:flex;align-items:center;gap:.7rem;
  font:700 .62rem var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--grau);
}
/* Pfeil, der sich beim Aufklappen dreht */
.wahlgruppe__anzahl::after{
  content:"";width:.5rem;height:.5rem;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg);transition:transform .3s var(--takt);
}
.wahlgruppe[open] .wahlgruppe__anzahl::after{transform:rotate(-135deg)}
.wahlgruppe > .wahl{padding-bottom:1.4rem}

/* ------------------------------------------------------------- Bewertungen */
.sterne, .stimme__sterne span, .sterne-wahl__sterne{
  color:var(--champagner);letter-spacing:.12em;font-size:1.05rem;
}
.sterne .leer, .stimme__sterne .leer, .sterne-wahl__sterne .leer{color:var(--linie-stark)}

/* Sternewahl im Formular: eine Zeile je Stufe, damit auf dem Handy nichts rutscht */
.sterne-wahl{display:grid;gap:.55rem}
.sterne-wahl__stufe{position:relative;cursor:pointer}
.sterne-wahl__stufe input{position:absolute;opacity:0;inset:0}
.sterne-wahl__rahmen{
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  padding:.85rem 1rem;border:1px solid var(--linie);
  transition:border-color .25s var(--takt),background .25s var(--takt);
}
.sterne-wahl__stufe:hover .sterne-wahl__rahmen{border-color:var(--linie-stark)}
.sterne-wahl__stufe input:checked + .sterne-wahl__rahmen{
  border-color:var(--champagner);background:rgba(194,168,120,.13);
  box-shadow:inset 0 0 0 1px var(--champagner);
}
.sterne-wahl__stufe input:focus-visible + .sterne-wahl__rahmen{outline:1px solid var(--champagner);outline-offset:3px}
.sterne-wahl__wort{font-size:.9rem;color:var(--grau)}
.sterne-wahl__stufe input:checked + .sterne-wahl__rahmen .sterne-wahl__wort{color:var(--elfenbein)}

/* Veroeffentlichte Stimmen */
.stimmen{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.stimme{
  display:grid;gap:.7rem;align-content:start;
  padding:1.7rem 1.6rem;border:1px solid var(--linie);background:var(--kohle);
}
.stimme__sterne{margin:0}
.stimme__text{
  margin:0;border:0;padding:0;font:300 1.06rem/1.65 var(--serif);color:var(--elfenbein);
}
.stimme__text::before{content:"„"}
.stimme__text::after{content:"“"}
.stimme__wer{
  margin:0;font:700 .62rem var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--grau);
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:baseline;
}
.stimme__wer strong{color:var(--champagner)}
.stimme__wann{margin-left:auto;letter-spacing:.1em}
.stimme__antwort{
  margin-top:.4rem;padding-top:.9rem;border-top:1px solid var(--linie);
  color:var(--fliess);font-size:.92rem;
}
.stimme__antwortkopf{
  margin:0 0 .3rem;font:700 .6rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--champagner);
}
.stimme__antwort p{margin:0}

/* Dankeskasten nach dem Absenden */
.danke{padding:1.9rem 1.7rem;border:1px solid var(--champagner);background:rgba(194,168,120,.08)}
.danke h2{margin:0 0 .6rem;font:400 1.5rem var(--serif)}
.danke p{margin:0 0 .9rem;color:var(--fliess)}
.danke .taste{margin-top:.3rem}