/* ==========================================================================
   Getränke-Lieferdienst Rosenheim – gemeinsame Gestaltung aller Seiten
   Farben: Nacht (Grund), Flasche (Fläche), Glas (Linien), Schaum (Text),
   Dunst (Nebentext), Helles (Akzent), Bernstein (Akzent tief), Inn (kühl).
   Schrift: Barlow Condensed kursiv für Schlagzeilen, Hanken Grotesk für Text,
   DM Mono für Angaben (Gebinde, PLZ, Uhrzeiten).
   Seitenspezifisches gehört in die jeweilige Seite, hier nur Gemeinsames.
   Klassen hier nie umbenennen: alle Seiten verlassen sich darauf.
   ========================================================================== */
/* Schriften: assets/fonts/schriften.css bindet jede Seite selbst per <link> ein (kein @import, spart eine Ladestufe) */

*,*::before,*::after{box-sizing:border-box}
:root{
  color-scheme:dark;
  --nacht:#08100D; --flasche:#0E1B16; --flasche2:#13241D; --glas:#1E352B; --schaum:#F4EFE2; --dunst:#9BAFA4;
  --helles:#F6B02E; --bernstein:#C86F14; --inn:#7ADCCB; --rot:#FF6B57;
  --linie:rgba(244,239,226,.12);
  --display:"Barlow Condensed","Arial Narrow","Helvetica Neue",Impact,sans-serif;
  --text:"Hanken Grotesk","Segoe UI",system-ui,sans-serif;
  --mono:"DM Mono",ui-monospace,Consolas,monospace;
  --rand:clamp(16px,4.5vw,64px);
  --navh:70px;
  --weich:cubic-bezier(.16,.84,.24,1);
}
html{background:var(--nacht);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--nacht);color:var(--schaum);font:400 clamp(1rem,.96rem + .18vw,1.125rem)/1.6 var(--text);-webkit-font-smoothing:antialiased}
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,fieldset{margin:0}
ul,ol{padding:0;list-style:none}
fieldset{border:0;padding:0;min-width:0}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--inn);outline-offset:3px}
.wrap{width:min(100%,1320px);margin-inline:auto;padding-inline:var(--rand)}
.seite{position:relative;z-index:2;overflow-x:clip;padding-top:calc(env(safe-area-inset-top,0px) + var(--navh))}
.mono{font-family:var(--mono)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Schrift-Bausteine */
.eyebrow{font:500 .78rem/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--helles);display:flex;align-items:center;gap:.9em}
.eyebrow::before{content:"";width:2.4em;height:1px;background:currentColor}
.gross{font:900 italic clamp(2.6rem,7vw,5.8rem)/.9 var(--display);text-transform:uppercase;letter-spacing:-.005em;text-wrap:balance}
.titel{font:900 italic clamp(2.4rem,6vw,4.6rem)/.9 var(--display);text-transform:uppercase;text-wrap:balance}
.lead{color:var(--dunst);max-width:34em}
.klein{font:400 .72rem/1.45 var(--mono);letter-spacing:.06em;color:var(--dunst)}
.klein.inn{color:var(--inn)}
.fehlt-text{color:var(--rot);font:500 .8rem/1.45 var(--mono)}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:1em 1.5em;background:var(--helles);color:#160E02;
  font:900 italic 1.1rem/1 var(--display);letter-spacing:.07em;text-transform:uppercase;text-decoration:none;border:0;cursor:pointer;
  transform:skewX(-9deg);transition:transform .3s var(--weich),box-shadow .3s,opacity .3s}
.btn::before{content:"";position:absolute;inset:0;background:var(--schaum);transform:translateX(-102%);transition:transform .5s var(--weich)}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn:hover{transform:skewX(-9deg) translateY(-2px);box-shadow:0 16px 36px -12px rgba(246,176,46,.55)}
.btn>span{position:relative;display:inline-flex;align-items:center;gap:.6em;transform:skewX(9deg)}
.btn svg{width:1.05em;height:1.05em;transition:transform .35s var(--weich)}
.btn:hover svg{transform:translateX(4px)}
.btn[disabled]{opacity:.35;pointer-events:none}
.btn-hohl{background:transparent;color:var(--schaum);box-shadow:inset 0 0 0 1.5px rgba(244,239,226,.4)}
.btn-hohl:hover{color:#160E02;box-shadow:none}
.btn-breit{width:calc(100% - 12px);margin-inline:6px}
.link{background:none;border:0;padding:0;cursor:pointer;color:var(--dunst);font:500 .74rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;transition:color .25s}
.link:hover{color:var(--helles)}

/* Kopfleiste */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:var(--navh);
  padding:calc(env(safe-area-inset-top,0px) + 12px) var(--rand) 12px;border-bottom:1px solid transparent;transition:background .4s,border-color .4s}
.nav.fest,.nav.immer{background:rgba(8,16,13,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:rgba(244,239,226,.09)}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo-ro{display:grid;place-items:center;min-width:2.5em;padding:.18em .42em .12em .7em;border:2px solid var(--schaum);border-radius:7px;font:900 1.5rem/1 var(--display);letter-spacing:.04em;position:relative}
.logo-ro::before{content:"";position:absolute;left:4px;top:4px;bottom:4px;width:5px;border-radius:2px;background:var(--helles)}
.logo-txt{font:500 .68rem/1.25 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dunst)}
.nav-links{display:flex;gap:clamp(16px,2.4vw,34px);font:500 .78rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.nav-links a{text-decoration:none;color:var(--dunst);padding:.6em 0;position:relative;transition:color .25s}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--helles);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--weich)}
.nav-links a:hover,.nav-links a.aktiv{color:var(--schaum)}
.nav-links a:hover::after,.nav-links a.aktiv::after{transform:none}
.nav .btn{font-size:.98rem;padding:.8em 1.2em}
/* Schmal: von den Links bleibt nur "Konto", damit das Kundenkonto auch am Handy erreichbar ist */
@media (max-width:900px){.nav-links a:not([href="konto"]){display:none}.nav{gap:14px}.nav-links{margin-left:auto}}
@media (max-width:760px){
  :root{--navh:54px}
  .nav{padding:calc(env(safe-area-inset-top,0px) + 7px) var(--rand) 7px;gap:10px}
  .logo-ro{font-size:1.15rem;border-width:1.5px;border-radius:5px}
  .logo-txt{font-size:.58rem}
  .nav .btn{font-size:.82rem;padding:.62em .95em}
}

/* Hinweisleiste (ro_hinweis, Start in Kürze) */
.hinweisleiste{position:relative;z-index:3;background:var(--helles);color:#160E02;font:600 .9rem/1.45 var(--text);text-align:center;padding:.7em var(--rand)}
.hinweisleiste b{font-weight:800}

/* Formularfelder */
.feld{display:grid;gap:7px}
.feld label,.beschr{font:500 .7rem/1.2 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--dunst)}
.feld input,.feld textarea,.feld select{width:100%;background:rgba(14,27,22,.7);border:1.5px solid rgba(244,239,226,.2);padding:.85em .9em;outline:0;border-radius:0;transition:border-color .3s,box-shadow .3s,background .3s}
.feld textarea{min-height:96px;resize:vertical}
.feld input::placeholder,.feld textarea::placeholder{color:rgba(244,239,226,.28)}
.feld input:focus,.feld textarea:focus,.feld select:focus{border-color:var(--helles);box-shadow:0 0 0 4px rgba(246,176,46,.14);background:var(--flasche)}
.feld.fehlt input,.feld.fehlt textarea,.feld.fehlt select{border-color:var(--rot);animation:wackel .4s}
@keyframes wackel{25%{transform:translateX(-6px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
.haken{display:flex;gap:12px;align-items:flex-start;cursor:pointer;color:var(--dunst);font-size:.95rem}
.haken input{appearance:none;-webkit-appearance:none;flex:none;width:24px;height:24px;border:1.5px solid rgba(244,239,226,.4);margin:0;display:grid;place-items:center;cursor:pointer;transition:background .2s,border-color .2s}
.haken input::after{content:"";width:12px;height:7px;border:solid #160E02;border-width:0 0 3px 3px;transform:rotate(-45deg) scale(0);margin-top:-3px;transition:transform .25s var(--weich)}
.haken input:checked{background:var(--helles);border-color:var(--helles)}
.haken input:checked::after{transform:rotate(-45deg) scale(1)}
.haken.fehlt input{border-color:var(--rot)}
.haken a{color:var(--schaum)}

/* Rechtstexte und schlichte Inhaltsseiten */
.text-seite{padding-block:clamp(40px,6vw,90px) clamp(80px,10vw,140px)}
.text-seite .inhalt{max-width:46em;display:grid;gap:1.1em}
.text-seite h1{font:900 italic clamp(2.6rem,6vw,4.4rem)/.9 var(--display);text-transform:uppercase;margin-bottom:.3em}
.text-seite h2{font:900 italic clamp(1.5rem,2.6vw,2rem)/1 var(--display);text-transform:uppercase;margin-top:1.2em}
.text-seite h3{font:700 1.05rem/1.3 var(--text);margin-top:.6em}
.text-seite p,.text-seite li{color:#D9D4C7}
.text-seite ul{list-style:disc;padding-left:1.3em;display:grid;gap:.4em}
.text-seite ol{list-style:decimal;padding-left:1.3em;display:grid;gap:.4em}
.text-seite a{color:var(--helles)}

/* Fuß */
.fuss{border-top:1px solid var(--linie);padding-block:clamp(36px,5vw,64px) calc(env(safe-area-inset-bottom,0px) + 40px);position:relative;z-index:2}
.fuss-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:26px 40px;align-items:start}
.fuss-orte{font:900 italic clamp(1.3rem,2.4vw,2rem)/1.1 var(--display);text-transform:uppercase;color:var(--dunst);margin-top:16px;max-width:22em}
.fuss-links{display:flex;flex-wrap:wrap;gap:10px 26px;font:500 .76rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;max-width:36em;justify-content:flex-end}
.fuss-links a{text-decoration:none;color:var(--dunst);transition:color .25s}
.fuss-links a:hover{color:var(--helles)}
.fuss .klein{grid-column:1/-1;border-top:1px solid rgba(244,239,226,.08);padding-top:20px}
@media (max-width:700px){.fuss-grid{grid-template-columns:minmax(0,1fr)}.fuss-links{justify-content:flex-start}}

/* Blasen im Hintergrund (Canvas #blasen, von der Seite gezeichnet) */
#blasen{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* Einblenden beim Scrollen: sichtbar bleibt alles auch ohne Skript */
.js .rv{opacity:0;transform:translateY(38px);transition:opacity .8s ease,transform .9s var(--weich);transition-delay:var(--d,0s)}
.js .rv.da{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .rv{opacity:1;transform:none}
  #blasen{display:none}
}