/* ==========================================================================
   Getränke-Lieferdienst Rosenheim – nur die Startseite (index.html)
   Aus dem Entwurf übernommen. Grundlage, Kopf, Fuß, Knöpfe, Schrift-Bausteine
   und Einblenden stehen in ro.css, hier nur, was die Startseite zusätzlich braucht.
   ========================================================================== */

/* Sprungmarke für Tastatur und Vorleseprogramme */
.sprung{position:fixed;left:var(--rand);top:-100px;z-index:80;background:var(--helles);color:#160E02;padding:.7em 1em;font:600 .9rem/1 var(--text);text-decoration:none}
.sprung:focus{top:calc(env(safe-area-inset-top,0px) + 10px)}

/* Gleitende Flaschen am Rand (vor und hinter dem Inhalt) */
.ebene{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.ebene-hinten{z-index:1}
.ebene-vorn{z-index:3}
.flieger{position:absolute;left:0;top:0;width:auto;max-width:none;will-change:transform;visibility:hidden}
.ebene-hinten .flieger{filter:blur(2px) brightness(.55)}

/* Zeilen, die beim Einblenden von unten hereinrutschen */
.mz{display:block;overflow:hidden;padding:.06em .14em .04em .02em;margin:-.06em -.14em -.04em -.02em}
.mz>span{display:block}
.js .mz>span{transform:translateY(108%) skewY(3deg);transition:transform 1s var(--weich);transition-delay:var(--d,0s)}
.js .da .mz>span,.js .mz.da>span{transform:none}

.btn-gross{font-size:clamp(1.3rem,2.4vw,1.9rem);padding:1.05em 1.9em}

/* ------------------------------------------------------------------ Auftakt */
.hero{position:relative;min-height:calc(min(100vh,1020px) - var(--navh));min-height:calc(min(100svh,1020px) - var(--navh));display:flex;align-items:center;
  padding-top:clamp(18px,3vw,36px);padding-bottom:clamp(24px,4vw,56px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(12px,3vw,48px);align-items:center}
.hero-text{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,2.4vw,30px);justify-items:start}
.hero h1{font:900 italic clamp(3.5rem,10.4vw,10rem)/.84 var(--display);text-transform:uppercase;letter-spacing:-.012em;white-space:nowrap}
.hero h1 .h1-vor{white-space:normal;margin-bottom:clamp(18px,2.4vw,30px)}
.hz{display:block;overflow:hidden;padding:.05em .16em .05em 0;margin:-.05em -.16em -.05em 0}
.hz>span{display:inline-block;animation:hoch 1.1s var(--weich) var(--d,0s) both}
.hz.bier>span{
  background:
    radial-gradient(circle,rgba(255,255,255,.75) 0 1.6px,transparent 2.3px) 0 0/34px 52px,
    radial-gradient(circle,rgba(255,255,255,.5) 0 1.2px,transparent 1.9px) 17px 20px/46px 70px,
    linear-gradient(180deg,#FFF6D2 0%,#FFDC73 13%,var(--helles) 40%,var(--bernstein) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-right:.12em;
  animation:hoch 1.1s var(--weich) var(--d,0s) both,perlen 3.4s linear infinite}
@keyframes hoch{from{transform:translateY(110%) skewY(4deg)}to{transform:none}}
@keyframes perlen{to{background-position:0 -52px,17px -50px,0 0}}
.hero .eyebrow,.hero .lead,.hero-cta,.hero-fakten{animation:auf .9s var(--weich) var(--d,.5s) both}
@keyframes auf{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero-cta{display:flex;flex-wrap:wrap;gap:18px 22px;align-items:center;padding-left:6px}
.hero-fakten{max-width:100%;display:flex;flex-wrap:wrap;gap:8px 26px;font:400 .76rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dunst)}
.hero-fakten li{display:flex;align-items:center;gap:.7em}
.hero-fakten li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--inn);box-shadow:0 0 0 0 rgba(122,220,203,.6);animation:puls 2.4s infinite}
@keyframes puls{70%{box-shadow:0 0 0 9px rgba(122,220,203,0)}100%{box-shadow:0 0 0 0 rgba(122,220,203,0)}}
.hero-termin{font:400 .8rem/1.5 var(--mono);letter-spacing:.04em;color:var(--inn);animation:auf .9s var(--weich) var(--d,.5s) both}
.hero-termin:empty{display:none}

.hero-flaschen{position:relative;z-index:2;pointer-events:none;height:min(74vh,720px);height:min(74svh,720px);display:flex;align-items:flex-end;justify-content:center}
.hero-flaschen::before{content:"";position:absolute;left:50%;top:46%;width:min(118%,900px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(246,176,46,.42),rgba(200,111,20,.16) 52%,transparent 72%);animation:glimmen 5s ease-in-out infinite}
.hero-flaschen::after{content:"";position:absolute;left:4%;right:4%;bottom:-6px;height:30px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(246,176,46,.35),transparent);filter:blur(6px)}
@keyframes glimmen{50%{opacity:.72;transform:translate(-50%,-50%) scale(1.07)}}
.hf{position:relative;display:flex;align-items:flex-end;will-change:transform;transform-origin:50% 100%}
.hf-in{height:100%;display:flex;align-items:flex-end;animation:rein 1.4s var(--weich) var(--d,0s) both,wipp 7s ease-in-out calc(var(--d,0s) + 1.4s) infinite}
.hf img{height:100%;width:auto;max-width:none}
.hf-l{height:80%;margin-right:-5%;z-index:1;transform:rotate(-9deg)}
.hf-m{height:100%;z-index:3}
.hf-r{height:89%;margin-left:-4%;z-index:2;transform:rotate(9deg)}
@keyframes rein{from{transform:translateY(60%) rotate(-10deg);opacity:0}to{transform:none;opacity:1}}
@keyframes wipp{50%{transform:translateY(-2.2%)}}
.stempel{position:absolute;left:-2%;top:3%;width:clamp(104px,11vw,150px);z-index:4;animation:auf 1s var(--weich) 1.2s both}
.stempel svg{display:block;width:100%;height:auto;animation:dreh 22s linear infinite}
.stempel text{font:500 12.5px var(--mono);fill:var(--schaum);letter-spacing:0}
.stempel circle{fill:rgba(8,16,13,.72);stroke:rgba(244,239,226,.25)}
@keyframes dreh{to{transform:rotate(360deg)}}
.stempel .fix{position:absolute;inset:0;display:grid;place-items:center;font:900 italic clamp(1.5rem,2.6vw,2.4rem)/1 var(--display);color:var(--helles)}
.runter{position:absolute;left:var(--rand);bottom:22px;font:400 .7rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dunst);display:flex;align-items:center;gap:12px}
.runter i{display:block;width:1px;height:42px;background:linear-gradient(var(--helles),transparent);animation:tropf 2s var(--weich) infinite;transform-origin:top}
@keyframes tropf{0%{transform:scaleY(0)}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
@media (max-width:860px){
  .hero{align-items:flex-start}
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-flaschen{height:46svh;min-height:300px;margin-top:8px}
  .stempel{left:auto;right:0;top:0}
  .runter{display:none}
}
@media (max-height:880px){.runter{display:none}}
@media (max-width:420px){.hero h1{font-size:clamp(3rem,15.5vw,4.2rem)}.hero-cta .btn{font-size:1rem}}

/* ------------------------------------------------------------------ Laufband */
.lauf{border-block:1px solid rgba(244,239,226,.1);padding-block:clamp(12px,1.8vw,24px);overflow:hidden;display:grid;gap:.08em;background:rgba(14,27,22,.55)}
.lauf-reihe{display:flex;white-space:nowrap;will-change:transform;font:900 italic clamp(2.5rem,6.6vw,5.6rem)/1.02 var(--display);text-transform:uppercase}
.lauf-reihe span{padding-right:.42em}
.lauf-reihe .hohl{color:transparent;-webkit-text-stroke:1.5px rgba(244,239,226,.6)}
.lauf-reihe b{color:var(--helles);font-weight:900;padding-right:.42em}

/* ------------------------------------------------------------------ Flaschenzug */
.zug{position:relative;height:calc(100vh + 9 * 60vh)}
.zug-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.zug-glow{position:absolute;left:50%;top:52%;width:min(120vmin,1100px);aspect-ratio:1;transform:translate(-50%,-50%);color:var(--helles);opacity:.34;
  background:radial-gradient(closest-side,currentColor,transparent 72%);transition:color .7s ease}
.zug-worte{position:absolute;inset:0;display:grid;place-items:center}
.zw{position:absolute;white-space:nowrap;font:900 italic clamp(7rem,27vw,25rem)/1 var(--display);text-transform:uppercase;letter-spacing:-.02em;will-change:transform,opacity;
  color:rgba(244,239,226,.05);-webkit-text-stroke:2px var(--c);opacity:0;padding-right:.1em}
.zug-kopf{position:absolute;inset:calc(env(safe-area-inset-top,0px) + 96px) 0 auto 0;display:grid;gap:14px;z-index:20}
.zug-kopf h2{font:900 italic clamp(1.9rem,4.2vw,3.6rem)/.92 var(--display);text-transform:uppercase;max-width:14em;text-wrap:balance}
.zug-weiter{justify-self:start;position:absolute;left:-9999px}
.zug-weiter:focus{position:static;color:var(--helles);font:500 .8rem/1.3 var(--mono)}
.zug-bahn{position:absolute;inset:0}
.zf{position:absolute;left:50%;bottom:17vh;height:min(64vh,690px);width:0;display:flex;justify-content:center;align-items:flex-end;transform-origin:50% 100%;will-change:transform}
.zf img{width:auto;max-width:none;flex:none}
.zf::after{content:"";position:absolute;bottom:-14px;width:min(30vh,300px);height:30px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.75),transparent);z-index:-1}
.zug-boden{position:absolute;left:0;right:0;bottom:17vh;height:1px;background:linear-gradient(90deg,transparent,rgba(244,239,226,.28) 30%,rgba(244,239,226,.28) 70%,transparent)}
.zug-fuss{position:absolute;inset:auto 0 clamp(18px,3.4vh,40px) 0;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;z-index:20}
.zug-info{display:grid;gap:4px}
.zug-art{font:500 .74rem/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--helles)}
.zug-name{font:900 italic clamp(1.9rem,4vw,3.3rem)/.95 var(--display);text-transform:uppercase}
.zug-detail{font:400 .82rem/1.4 var(--mono);color:var(--dunst);letter-spacing:.06em}
.zug-info.wechsel>*{animation:wechsel .55s var(--weich) both}
.zug-info.wechsel>*:nth-child(2){animation-delay:.05s}
.zug-info.wechsel>*:nth-child(3){animation-delay:.1s}
@keyframes wechsel{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.zug-rechts{display:grid;gap:12px;justify-items:end}
.zug-zaehler{font:400 .8rem/1 var(--mono);letter-spacing:.12em;color:var(--dunst)}
.zug-zaehler b{font:900 italic 2.3rem/1 var(--display);color:var(--schaum);letter-spacing:0;margin-right:.1em}
.zug-ticks{display:flex;gap:5px}
.zug-ticks i{display:block;width:clamp(12px,2vw,26px);height:3px;background:rgba(244,239,226,.18);transition:background .4s,transform .4s;transform-origin:bottom}
.zug-ticks i.an{background:var(--helles);transform:scaleY(2.4)}
@media (max-width:700px){.zf{height:min(50vh,520px);bottom:23vh}.zug-boden{bottom:23vh}.zug-ticks i{width:10px}}

/* ------------------------------------------------------------------ Zahlen */
.zahlen{border-block:1px solid rgba(244,239,226,.1);background:rgba(14,27,22,.55)}
.zahlen ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.zahlen li{padding:clamp(22px,3.4vw,46px) clamp(14px,2vw,30px);border-left:1px solid rgba(244,239,226,.1);display:grid;gap:6px;align-content:start}
.zahlen li:first-child{border-left:0;padding-left:0}
.zahl{font:900 italic clamp(2.8rem,6.4vw,5.6rem)/.9 var(--display);font-variant-numeric:tabular-nums;color:var(--schaum)}
.zahl small{font-size:.42em;color:var(--helles);margin-left:.12em;letter-spacing:.02em}
.zahlen p{font:400 .76rem/1.45 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dunst)}
/* Ohne Katalog (Server nicht erreichbar) fällt die erste Kachel weg */
.zahlen ul.drei{grid-template-columns:repeat(3,minmax(0,1fr))}
.zahlen ul.drei li:nth-child(2){border-left:0;padding-left:0}
@media (max-width:760px){
  .zahlen ul,.zahlen ul.drei{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zahlen li:nth-child(3){border-left:0;padding-left:0}
  .zahlen li:nth-child(n+3){border-top:1px solid rgba(244,239,226,.1)}
  .zahlen ul.drei li:nth-child(3){border-left:1px solid rgba(244,239,226,.1);padding-left:clamp(14px,2vw,30px);border-top:0}
  .zahlen ul.drei li:nth-child(4){border-left:0;padding-left:0}
}

/* ------------------------------------------------------------------ Abschnitte */
.abschnitt{padding-block:clamp(96px,14vw,200px);position:relative}
.kopf{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(16px,2vw,26px);justify-items:start}

/* Ablauf */
.ablauf-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,6vw,110px);align-items:start}
.ablauf-grid .kopf{position:sticky;top:calc(env(safe-area-inset-top,0px) + 130px)}
.schritte{position:relative;display:grid;gap:clamp(44px,6vw,84px);padding-left:clamp(44px,5vw,76px);--p:0}
.spur{position:absolute;left:10px;top:8px;bottom:8px;width:2px;background:var(--glas)}
.spur i{position:absolute;inset:0;background:linear-gradient(var(--helles),var(--bernstein));transform:scaleY(var(--p));transform-origin:top}
.spur svg{position:absolute;left:-13px;top:calc(var(--p) * 100%);width:28px;height:28px;margin-top:-14px;color:var(--helles);filter:drop-shadow(0 0 12px rgba(246,176,46,.8))}
.schritt{display:grid;gap:12px;opacity:.32;transition:opacity .6s ease}
.schritt.an{opacity:1}
.schritt-nr{font:900 italic clamp(4rem,8vw,7rem)/.8 var(--display);color:transparent;-webkit-text-stroke:1.5px rgba(244,239,226,.5);transition:color .6s,-webkit-text-stroke-color .6s}
.schritt.an .schritt-nr{color:var(--helles);-webkit-text-stroke-color:var(--helles)}
.schritt h3{font:900 italic clamp(1.8rem,3.2vw,2.7rem)/.95 var(--display);text-transform:uppercase}
.schritt p{color:var(--dunst);max-width:30em}
.schritt .zeiten{font:400 .82rem/1.5 var(--mono);letter-spacing:.04em;color:var(--schaum)}
.schritt .zeiten:empty{display:none}
.marke{justify-self:start;font:500 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--inn);border:1px solid rgba(122,220,203,.4);padding:.6em .8em;border-radius:3px}
@media (max-width:860px){.ablauf-grid{grid-template-columns:minmax(0,1fr)}.ablauf-grid .kopf{position:static}}

/* Liefergebiet */
.gebiet-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(30px,5vw,90px);align-items:center}
.gebiet-links{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,40px);justify-items:start}
.plz{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;width:100%;max-width:440px}
.plz label{font:500 .74rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dunst)}
.plz-zeile{display:flex;gap:0;border:1.5px solid rgba(244,239,226,.35);transition:border-color .3s,box-shadow .3s}
.plz-zeile:focus-within{border-color:var(--helles);box-shadow:0 0 0 4px rgba(246,176,46,.16)}
.plz input{flex:1;min-width:0;width:100%;background:transparent;border:0;color:var(--schaum);font:900 italic 2rem/1 var(--display);letter-spacing:.12em;padding:.42em .6em;outline:0}
.plz input::placeholder{color:rgba(244,239,226,.25)}
.plz button{border:0;background:var(--helles);color:#160E02;font:900 italic 1.05rem/1 var(--display);letter-spacing:.08em;text-transform:uppercase;padding:0 1.3em;cursor:pointer;transition:background .25s}
.plz button:hover,.plz button:focus-visible{background:var(--schaum)}
.plz-antwort{min-height:1.6em;font:500 .86rem/1.5 var(--mono);color:var(--dunst)}
.plz-antwort.ja{color:var(--inn)}
.plz-antwort.nein{color:var(--helles)}
.plz-antwort a{color:inherit}
.orte{display:grid;width:100%;max-width:440px;border-top:1px solid rgba(244,239,226,.12)}
.orte li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:.62em 0;border-bottom:1px solid rgba(244,239,226,.12);cursor:default;transition:padding .35s var(--weich),color .3s}
.orte li span:first-child{font:900 italic 1.5rem/1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.orte li span:last-child{font:400 .76rem/1 var(--mono);letter-spacing:.1em;color:var(--dunst);font-variant-numeric:tabular-nums;text-align:right}
.orte li:hover,.orte li.an{padding-left:14px;color:var(--helles)}
.gebiet-mindest{max-width:440px}
.karte{position:relative}
.karte svg{display:block;width:100%;height:auto;overflow:visible}
.k-fluss{fill:none;stroke:var(--inn);stroke-linecap:round;opacity:.75}
.k-berg{fill:var(--flasche);stroke:var(--glas);stroke-width:1.5}
.k-route{fill:none;stroke:var(--helles);stroke-width:2;stroke-dasharray:3 9;stroke-linecap:round;animation:marsch 1.4s linear infinite;opacity:.85}
@keyframes marsch{to{stroke-dashoffset:-24}}
.k-ort circle.kern{fill:var(--helles)}
.k-ort circle.ring{fill:none;stroke:var(--helles);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:ring 2.8s ease-out infinite;animation-delay:var(--d,0s)}
@keyframes ring{from{transform:scale(1);opacity:.9}to{transform:scale(4.2);opacity:0}}
.k-ort text{font:900 italic 25px var(--display);fill:var(--schaum);text-transform:uppercase;letter-spacing:.02em;transition:fill .3s}
.k-ort.an text,.k-ort.an circle.kern{fill:var(--inn)}
.k-ort.haupt text{font-size:38px}
.k-klein{font:500 11px var(--mono);fill:var(--dunst);letter-spacing:.14em;text-transform:uppercase}
.k-klein.inn{fill:var(--inn)}
@media (max-width:860px){.gebiet-grid{grid-template-columns:minmax(0,1fr)}}

/* Vorteile */
.liste{margin-top:clamp(40px,6vw,80px);border-top:1px solid rgba(244,239,226,.14)}
.zeile{position:relative;display:grid;grid-template-columns:8.5rem minmax(0,1fr) minmax(0,1.05fr);gap:clamp(14px,3vw,48px);align-items:baseline;
  padding:clamp(22px,3vw,40px) clamp(0px,1.4vw,22px);border-bottom:1px solid rgba(244,239,226,.14);isolation:isolate}
.zeile::before{content:"";position:absolute;inset:0;background:var(--helles);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--weich);z-index:-1}
.zeile:hover::before{transform:none}
.zeile>span{font:500 .74rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--helles);transition:color .3s}
.zeile h3{font:900 italic clamp(2rem,4.6vw,4rem)/.92 var(--display);text-transform:uppercase;transition:transform .5s var(--weich),color .3s}
.zeile p{color:var(--dunst);max-width:32em;transition:color .3s}
.zeile p a{color:var(--schaum)}
.zeile:hover h3{transform:translateX(16px);color:#160E02}
.zeile:hover p,.zeile:hover>span,.zeile:hover p a{color:#2A1A04}
@media (max-width:860px){.zeile{grid-template-columns:minmax(0,1fr);gap:10px}}

/* Fragen: immer offen lesbar, keine Aufklapper */
.fragen{margin-top:clamp(40px,6vw,80px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,64px);border-top:1px solid rgba(244,239,226,.14)}
.frage{padding-block:clamp(22px,3vw,34px);border-bottom:1px solid rgba(244,239,226,.14)}
.frage dt{font:900 italic clamp(1.35rem,2.2vw,1.9rem)/1.05 var(--display);text-transform:uppercase;color:var(--schaum)}
.frage dd{margin:.6em 0 0;color:var(--dunst);max-width:34em}
.frage dd a{color:var(--schaum)}
@media (max-width:860px){.fragen{grid-template-columns:minmax(0,1fr)}}

/* Großkunden */
.band{position:relative;background:var(--helles);color:#160E02;padding-block:clamp(120px,17vw,250px);
  clip-path:polygon(0 clamp(40px,6vw,96px),100% 0,100% calc(100% - clamp(40px,6vw,96px)),0 100%)}
.band .eyebrow{color:#160E02}
.band-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(30px,5vw,80px);align-items:end}
.band h2{font:900 italic clamp(2.8rem,6.2vw,6.2rem)/.86 var(--display);text-transform:uppercase;letter-spacing:-.01em}
.band h2 em{font-style:inherit;color:transparent;-webkit-text-stroke:2px #160E02}
.band-links{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(22px,3vw,38px);justify-items:start}
.band-lead{font-size:clamp(1.02rem,1.3vw,1.18rem);line-height:1.6;color:#3A2606;max-width:30em}
.band-lead a{color:#160E02}
.band :focus-visible{outline-color:#160E02}
.anfrage{position:relative;display:grid;gap:16px;background:#160E02;color:var(--schaum);padding:clamp(20px,2.6vw,34px);box-shadow:0 30px 60px -30px rgba(22,14,2,.8)}
.anfrage :focus-visible{outline-color:var(--inn)}
.a-zeile{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.a-feld{display:grid;gap:7px}
.a-feld label{font:500 .68rem/1.2 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--dunst)}
.a-feld input,.a-feld textarea{width:100%;background:rgba(244,239,226,.05);border:1.5px solid rgba(244,239,226,.18);color:var(--schaum);font:inherit;font-size:.95rem;padding:.8em .85em;outline:0;border-radius:0;transition:border-color .3s,box-shadow .3s}
.a-feld textarea{min-height:104px;resize:vertical}
.a-feld input::placeholder,.a-feld textarea::placeholder{color:rgba(244,239,226,.28)}
.a-feld input:focus,.a-feld textarea:focus{border-color:var(--helles);box-shadow:0 0 0 4px rgba(246,176,46,.16)}
.a-feld.fehlt input,.a-feld.fehlt textarea{border-color:var(--rot)}
.a-hinweis{font:400 .72rem/1.45 var(--mono);letter-spacing:.04em;color:var(--dunst)}
.a-hinweis a{color:var(--schaum)}
.anfrage .haken{font-size:.86rem}
.anfrage .haken.fehlt input{border-color:var(--rot)}
.a-falle{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.a-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;padding-top:4px}
.anfrage .btn{background:var(--helles);color:#160E02}
.a-antwort{font:500 .78rem/1.45 var(--mono);color:var(--dunst);flex:1 1 14em}
.a-antwort:empty{display:none}
.a-antwort.ja{color:var(--inn)}.a-antwort.nein{color:var(--rot)}
.a-danke{display:grid;gap:12px;background:#160E02;color:var(--schaum);padding:clamp(24px,3vw,40px);box-shadow:0 30px 60px -30px rgba(22,14,2,.8)}
.a-danke h3{font:900 italic clamp(1.8rem,3vw,2.6rem)/.95 var(--display);text-transform:uppercase;color:var(--inn)}
.a-danke p{color:#D9D4C7}
.a-danke a{color:var(--helles)}
@media (max-width:860px){.band-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.a-zeile{grid-template-columns:minmax(0,1fr)}}

/* Anstoßen */
.prost{position:relative;padding-block:clamp(70px,10vw,140px) clamp(90px,12vw,170px);overflow:clip;text-align:center}
.prost-buehne{--H:min(50vh,500px);position:relative;height:calc(var(--H) * 1.14);margin-bottom:clamp(20px,3vw,40px)}
.prost-buehne::before{content:"";position:absolute;left:50%;top:50%;width:min(110vmin,900px);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(246,176,46,.3),transparent 70%)}
.pf{position:absolute;left:50%;bottom:0;height:var(--H);width:0;display:flex;justify-content:center;align-items:flex-end;transform-origin:50% 100%;will-change:transform}
.pf img{height:100%;width:auto;max-width:none;flex:none}
.funken{position:absolute;left:50%;bottom:calc(var(--H) * .95);width:0;height:0}
.funken i{position:absolute;left:-1.5px;bottom:0;width:3px;height:34px;border-radius:2px;background:linear-gradient(var(--schaum),var(--helles));transform-origin:50% 100%;opacity:0;transform:rotate(var(--a)) translateY(-12px) scaleY(.2)}
.klirr .funken i{animation:funke .8s cubic-bezier(.1,.7,.2,1) both}
@keyframes funke{0%{opacity:1;transform:rotate(var(--a)) translateY(-14px) scaleY(.2)}55%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(-130px) scaleY(1)}}
.prost-text{display:grid;gap:clamp(18px,2.4vw,30px);justify-items:center}
.prost h2{font:900 italic clamp(3.4rem,12vw,11rem)/.84 var(--display);text-transform:uppercase;letter-spacing:-.012em}
.klirr .prost-text h2{animation:pop .7s var(--weich)}
@keyframes pop{30%{transform:scale(1.06) rotate(-1deg)}}
.prost .lead{text-align:center}
.prost .klein a{color:var(--schaum)}

/* Füllstand rechts */
.stand{position:fixed;right:clamp(10px,1.6vw,26px);top:50%;transform:translateY(-50%);z-index:40;width:22px;pointer-events:none;color:rgba(244,239,226,.5)}
.stand svg{display:block;width:100%;height:auto;overflow:visible}
.stand rect{fill:var(--helles);transform-box:fill-box;transform-origin:bottom;transform:scaleY(var(--f,0))}
@media (max-width:900px){.stand{display:none}}

section[id]{scroll-margin-top:var(--navh)}
.zug[id]{scroll-margin-top:0}

@media (prefers-reduced-motion:reduce){
  .js .mz>span{transform:none}
  .ebene{display:none}
}