/* ROBENS' – Designsystem
   Flaschenglas (dunkel) · Edelstahl (hell) · Bernstein (das Bier) · Hopfen · Kronkorken-Rot */
@font-face{font-family:'Rokkitt';src:url(../assets/fonts/rokkitt.woff2) format('woff2');font-weight:500 900;font-display:swap}
@font-face{font-family:'Karla';src:url(../assets/fonts/karla.woff2) format('woff2');font-weight:400 700;font-display:swap}

:root{
  --glas:#0E1B17; --glas-2:#16291F; --glas-3:#22392E;
  --stahl:#E3E8E4; --stahl-2:#D2D9D4;
  --schaum:#FAF8F1;
  --bernstein:#E8962A; --bernstein-dk:#B86A0E;
  --hopfen:#B5C23A;
  --kork:#C5392A;
  --ink:#0E1B17;
  --muted-on-light:#3F4F47;
  --muted-on-dark:#B9C7BF;

  --font-display:'Rokkitt',Rockwell,'Roboto Slab',Georgia,serif;
  --font-body:'Karla',system-ui,-apple-system,'Segoe UI',sans-serif;

  --step--1:clamp(.9rem,.88rem + .1vw,.98rem);
  --step-0:clamp(1.05rem,1rem + .25vw,1.2rem);
  --step-1:clamp(1.3rem,1.15rem + .7vw,1.7rem);
  --step-2:clamp(1.8rem,1.4rem + 1.8vw,2.8rem);
  --step-3:clamp(2.4rem,1.6rem + 3.6vw,4.6rem);
  --step-4:clamp(3rem,1.2rem + 7vw,7.4rem);

  --gutter:clamp(1.1rem,4vw,2.5rem);
  --section:clamp(4.5rem,9vw,8rem);
  --ease-out:cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--stahl);color:var(--ink);font:400 var(--step-0)/1.6 var(--font-body);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display);font-weight:800;line-height:1.02;margin:0;letter-spacing:-.01em;text-wrap:balance}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1)}
p{margin:0 0 1em;max-width:62ch}
a{color:inherit}
img,svg{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--bernstein);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--bernstein);color:var(--ink);padding:.7rem 1rem;z-index:200;font-weight:700}
.skip:focus{left:0}
.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:var(--gutter)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.7rem 1.5rem;border-radius:999px;border:2px solid var(--bernstein);background:var(--bernstein);color:var(--ink);font:700 1rem/1 var(--font-body);text-decoration:none;cursor:pointer;transition:transform .2s var(--ease-out),background .2s,color .2s,border-color .2s}
.btn:hover{background:var(--schaum);border-color:var(--schaum)}
.btn:active{transform:scale(.97)}
.btn-ghost{background:transparent;color:var(--schaum);border-color:rgba(250,248,241,.5)}
.btn-ghost:hover{background:var(--schaum);color:var(--ink)}
.btn-dark{background:var(--glas);border-color:var(--glas);color:var(--schaum)}
.btn-dark:hover{background:var(--bernstein);border-color:var(--bernstein);color:var(--ink)}
.btn-small{min-height:44px;padding:.55rem 1.1rem}
.actions{display:flex;flex-wrap:wrap;gap:.8rem}

/* Sektionen */
.section{padding-block:var(--section);position:relative;overflow:hidden}
.section.tight{padding-block:calc(var(--section)*.6)}
.light{background:var(--stahl);color:var(--ink)}
.dark{background:var(--glas);color:var(--schaum)}
.amber{background:var(--bernstein);color:var(--ink)}
.section-lead{font-size:var(--step-0);margin-top:1rem;max-width:56ch;color:inherit;opacity:.88}
.split{display:grid;gap:clamp(2rem,5vw,5rem);grid-template-columns:1fr;align-items:start}
@media(min-width:860px){.split{grid-template-columns:1.1fr 1fr}}

/* Hinweisband + Kopf */
.notice{background:var(--kork);color:#fff;text-align:center;padding:.7rem var(--gutter);font-weight:700;position:relative;z-index:60}
.notice p{margin:0 auto;max-width:80ch}
.top{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem var(--gutter);background:linear-gradient(rgba(14,27,23,.92),rgba(14,27,23,.0));color:var(--schaum);transition:background .3s}
.top.solid{background:rgba(14,27,23,.96);backdrop-filter:blur(8px)}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;font:800 1.5rem/1 var(--font-display)}
.logo-mark{background:var(--schaum);-webkit-mask:url(../assets/logo.png) center/contain no-repeat;mask:url(../assets/logo.png) center/contain no-repeat;aspect-ratio:1}
.logo-sm{width:46px;flex:none}
.logo-md{width:84px;margin:0 auto}
.top nav{display:flex;align-items:center;gap:clamp(.8rem,2vw,1.8rem)}
.top nav a:not(.btn){text-decoration:none;font-weight:700;padding:.5rem .2rem;border-bottom:2px solid transparent}
.top nav a:not(.btn):hover{border-color:var(--bernstein)}
.burger{display:none;min-height:44px;padding:.5rem 1rem;border-radius:999px;border:2px solid rgba(250,248,241,.5);background:transparent;color:inherit;font:700 1rem var(--font-body);cursor:pointer}
@media(max-width:860px){
  .burger{display:block}
  .top nav{position:fixed;inset:0;background:var(--glas);flex-direction:column;justify-content:center;gap:1.6rem;font-size:var(--step-2);font-family:var(--font-display);font-weight:800;transform:translateY(-100%);visibility:hidden;transition:transform .35s var(--ease-out),visibility 0s .35s;z-index:-1}
  .top nav.open{transform:none;visibility:visible;transition:transform .35s var(--ease-out)}
  .top nav .btn{font-size:1.1rem}
  .burger{position:relative;z-index:2}
}

/* HERO – das Glas füllt sich */
.hero{min-height:100svh;background:var(--glas);color:var(--schaum);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;padding-top:6rem}
.hero-liquid{position:absolute;inset:auto 0 0 0;height:calc(4.2rem + 4vh);pointer-events:none;transform:translateY(100%);animation:fill 2.6s .3s var(--ease-out) forwards}
.hero-liquid .liquid-body{position:absolute;inset:30px 0 0;background:var(--bernstein)}
.hero-liquid .wave{max-width:none;position:absolute;top:0;left:0;width:200%;height:42px;fill:var(--bernstein);animation:wave 9s linear infinite}
.bubble{position:absolute;bottom:0;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;background:rgba(250,248,241,.45);opacity:0;animation:rise var(--d) var(--w) linear infinite}
@keyframes fill{to{transform:none}}
@keyframes wave{to{transform:translateX(-50%)}}
@keyframes rise{0%{transform:translateY(0);opacity:0}10%{opacity:.8}90%{opacity:.5}100%{transform:translateY(-12vh);opacity:0}}
.hero-grid{position:relative;display:grid;gap:2rem;align-items:center;flex:1;grid-template-columns:1fr;padding-block:2rem}
@media(min-width:900px){.hero-grid{grid-template-columns:1.8fr 1fr}}
.hero h1{font-size:clamp(3rem,1.2rem + 6.2vw,6.6rem);font-weight:900;line-height:.94;letter-spacing:-.02em}
.hero .lead{font-size:var(--step-1);margin:1.6rem 0 1.8rem;max-width:34ch;color:var(--muted-on-dark);line-height:1.4}
.hero-logo{width:min(54vw,250px);justify-self:center;align-self:center;animation:pop 1.2s .9s var(--ease-out) both;will-change:rotate}
@keyframes stand{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}

.hero-video{position:absolute;left:0;top:-15%;width:100%;height:130%;object-fit:cover;opacity:.9;will-change:translate}
.hero-tint{position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,27,23,.93) 0%,rgba(14,27,23,.78) 48%,rgba(14,27,23,.5) 100%),linear-gradient(180deg,rgba(14,27,23,.6),rgba(14,27,23,0) 25%,rgba(14,27,23,0) 70%,var(--glas))}
.video-toggle{position:absolute;right:var(--gutter);top:5.2rem;z-index:3;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(250,248,241,.3);background:rgba(14,27,23,.35);color:rgba(250,248,241,.8);cursor:pointer;transition:background .2s,color .2s}
.video-toggle:hover{background:rgba(250,248,241,.9);color:var(--ink)}
.video-toggle svg{fill:currentColor}
.video-toggle .ic-play,.video-toggle[aria-pressed=true] .ic-pause{display:none}
.video-toggle[aria-pressed=true] .ic-play{display:block}

/* HANDWERK */
.statement{font-size:var(--step-3);font-weight:900;max-width:14ch}
.prose p{font-size:var(--step-0);line-height:1.7;color:var(--muted-on-light)}
.prose h3{margin:2rem 0 .8rem}
.gebinde{margin:0;display:grid;gap:0}
.gebinde div{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 0;border-top:2px solid var(--ink)}
.gebinde div:last-child{border-bottom:2px solid var(--ink)}
.gebinde dt{font:800 var(--step-1)/1 var(--font-display)}
.gebinde dd{margin:0;font-weight:700;color:var(--muted-on-light)}

/* BIERE – Gläser */
.beers{--tint:#E8962A}
.beers-glow{position:absolute;inset:0;background:radial-gradient(60% 55% at 50% 38%,var(--tint),transparent 70%);opacity:.32;transition:opacity .6s;pointer-events:none}
.beers .wrap{position:relative}
.glasses{display:flex;gap:clamp(.6rem,2vw,1.6rem);justify-content:center;align-items:flex-end;margin:clamp(2.5rem,5vw,4rem) 0 2rem;overflow-x:auto;padding:1.4rem .5rem .8rem;scroll-snap-type:x proximity}
@media(max-width:900px){.glasses{justify-content:flex-start}}
.glass{flex:0 0 auto;width:clamp(84px,11vw,124px);background:none;border:0;padding:0;color:inherit;cursor:pointer;font:inherit;text-align:center;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;gap:.7rem;transition:transform .45s var(--ease-out)}
.glass-svg{width:100%;aspect-ratio:100/142;height:auto;overflow:visible;filter:drop-shadow(0 10px 14px rgba(0,0,0,.35))}
.glass[aria-selected=true] .glass-liq,.glass[aria-selected=true] .dome{animation:refill .8s var(--ease-out)}
@keyframes refill{from{transform:translateY(7px)}to{transform:none}}
.bub{transform-box:fill-box;transform-origin:center;fill:rgba(255,255,255,.7);opacity:0;animation:perl var(--d) var(--w) ease-in infinite}
.glass:not([aria-selected=true]) .bub{animation-duration:calc(var(--d) * 1.5);filter:opacity(.55)}
@keyframes perl{0%{transform:translate(0,0) scale(.5);opacity:0}8%{opacity:.9}55%{transform:translate(calc(var(--dx) * .5),-40px) scale(1)}90%{opacity:.75}100%{transform:translate(var(--dx),-66px) scale(1.2);opacity:0}}
.foam-bob{animation:bob 3.4s ease-in-out infinite alternate}
@keyframes bob{from{transform:translateY(-.5px)}to{transform:translateY(.8px)}}
.glass-name{font:800 .98rem/1.15 var(--font-display);max-width:9ch;min-height:2.3em;opacity:.78;transition:opacity .2s}
.glass:hover .glass-name,.glass[aria-selected=true] .glass-name{opacity:1}
.glass:hover{transform:translateY(-6px)}
.glass[aria-selected=true]{transform:translateY(-14px)}
.glass[aria-selected=true] .glass-name{color:var(--bernstein)}

.beer-detail{display:grid;gap:1rem 3rem;grid-template-columns:1fr;max-width:980px;margin-inline:auto;padding-top:1rem}
@media(min-width:820px){.beer-detail{grid-template-columns:1.2fr 1fr;align-items:end}}
.beer-detail h3{font-size:var(--step-3);font-weight:900}
.beer-detail .stil{font-size:var(--step-1);font-family:var(--font-display);font-weight:600;color:var(--muted-on-dark);margin:.4rem 0 0}
.beer-detail p.text{font-size:var(--step-0);line-height:1.7;margin:0;color:var(--schaum)}
.beer-facts{display:flex;align-items:baseline;gap:1.4rem;flex-wrap:wrap;margin-top:1.1rem}
.abv{font:900 var(--step-3)/1 var(--font-display);font-variant-numeric:tabular-nums}
.abv small{font-size:.45em;margin-left:.15em}
.badge{display:inline-block;padding:.3rem .9rem;border-radius:999px;font-weight:700;font-size:var(--step--1);background:var(--glas-3);color:var(--schaum);border:2px solid var(--hopfen)}
.badge.bald{border-color:var(--bernstein)}
.badge.ausverkauft{border-color:var(--kork)}
.beer-detail.swap{animation:swap .5s var(--ease-out)}
@keyframes swap{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* TERMINE */
.events{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;gap:1.2rem}
.event{display:grid;grid-template-columns:auto 1fr;gap:1.2rem 2rem;background:var(--schaum);padding:clamp(1.2rem,3vw,2rem);border-radius:18px;border-left:10px solid var(--stahl-2)}
.event.hl{border-left-color:var(--bernstein)}
.date{text-align:center;min-width:4.6rem;font-family:var(--font-display);font-weight:900;line-height:.9}
.date b{display:block;font-size:clamp(3.2rem,8vw,5rem)}
.date span{display:block;font-size:1.3rem;font-weight:700;margin-top:.2rem}
.event h3{font-size:var(--step-2)}
.event .meta{margin:.5rem 0 .8rem;font-weight:700;color:var(--muted-on-light)}
.event p{margin-bottom:1rem;color:var(--muted-on-light)}
.event .actions{margin-top:.4rem}
.btn-line{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--schaum);border-color:var(--ink)}
@media(max-width:560px){.event{grid-template-columns:1fr}.date{text-align:left;display:flex;align-items:baseline;gap:.6rem}}
.empty{margin-top:2rem;font-size:var(--step-1);font-family:var(--font-display);font-weight:600}

/* VERKAUF */
.verkauf{display:grid;gap:clamp(2rem,5vw,5rem);grid-template-columns:1fr;align-items:end}
@media(min-width:860px){.verkauf{grid-template-columns:1.2fr 1fr}}
.open-status{display:inline-flex;align-items:center;gap:.6rem;margin:1.2rem 0 1.5rem;padding:.45rem 1.1rem;border-radius:999px;background:var(--glas);color:var(--schaum);font-weight:700}
.open-status::before{content:'';width:12px;height:12px;border-radius:50%;background:var(--kork)}
.open-status.on::before{background:var(--hopfen);box-shadow:0 0 0 0 rgba(181,194,58,.7);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(181,194,58,0)}100%{box-shadow:0 0 0 0 rgba(181,194,58,0)}}
.hours{border-collapse:collapse;width:100%;max-width:520px}
.hours th,.hours td{padding:.8rem 0;border-top:2px solid var(--ink);text-align:left;font-family:var(--font-display);font-size:var(--step-2);font-weight:800;line-height:1}
.hours td{text-align:right;white-space:nowrap;font-size:var(--step-1)}
.hours tr:last-child th,.hours tr:last-child td{border-bottom:2px solid var(--ink)}
.hours tr:last-child{font-size:var(--step-0)}
.hours tr:last-child th,.hours tr:last-child td{font-size:var(--step-1);font-weight:600}
.hours tr.today th,.hours tr.today td{background:var(--glas);color:var(--schaum);padding-inline:.7rem}
address{font-style:normal}
.addr{font:800 var(--step-2)/1.1 var(--font-display);margin-bottom:1.2rem}
.contact{list-style:none;margin:0;padding:0;display:grid;gap:.2rem}
.contact a{display:inline-block;padding:.5rem 0;font-weight:700;font-size:var(--step-0);text-underline-offset:4px}

/* VERLEIH */
.two{display:grid;gap:1.4rem;grid-template-columns:1fr}
@media(min-width:860px){.two{grid-template-columns:1fr 1fr}}
.panel{padding:clamp(1.6rem,4vw,3rem);border-radius:22px;background:var(--schaum);display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}
.panel h2{font-size:var(--step-2);margin-bottom:.6rem}
.panel p{color:var(--muted-on-light);margin-bottom:1.2rem}
.panel-ink{background:var(--glas);color:var(--schaum)}
.panel-ink p{color:var(--muted-on-dark)}

/* STIMMEN */
.quotes{display:grid;gap:2rem;margin-top:2.5rem;grid-template-columns:1fr}
@media(min-width:860px){.quotes{grid-template-columns:1fr 1fr;gap:4rem}}
figure{margin:0}
blockquote{margin:0;padding-left:1.4rem;border-left:6px solid var(--bernstein)}
blockquote p{font:600 var(--step-1)/1.35 var(--font-display);max-width:38ch}
figcaption{margin:.8rem 0 0 1.4rem;font-weight:700;color:var(--muted-on-light)}

/* NEWSLETTER */
.newsletter form{display:grid;gap:.9rem}
.newsletter label{font-weight:700}
.newsletter input[type=email]{width:100%;min-height:54px;padding:.7rem 1.1rem;font:inherit;border-radius:12px;border:2px solid var(--glas-3);background:var(--glas-2);color:var(--schaum)}
.newsletter input[type=email]:focus-visible{border-color:var(--bernstein);outline-offset:2px}
.check{display:grid;grid-template-columns:auto 1fr;gap:.8rem;font-weight:400!important;font-size:var(--step--1);line-height:1.5;color:var(--muted-on-dark)}
.check input{width:24px;height:24px;margin-top:.1rem;accent-color:var(--bernstein)}
.help{font-size:var(--step--1);color:var(--muted-on-dark);margin:0}
.hp{position:absolute;left:-9999px}
.msg{min-height:1.6em;margin:0;font-weight:700}
.msg.ok{color:var(--hopfen)}.msg.err{color:#FF9D8F}
.newsletter .btn{justify-self:start}

/* FOOTER */
.foot{background:var(--glas);color:var(--muted-on-dark);padding-block:3rem;border-top:1px solid var(--glas-3)}
.foot-grid{display:grid;gap:1.6rem;grid-template-columns:1fr}
@media(min-width:860px){.foot-grid{grid-template-columns:1fr 1fr}.foot .small{grid-column:1/-1}}
.foot-brand{font:800 1.6rem/1 var(--font-display);color:var(--schaum)}
.foot nav{display:flex;flex-wrap:wrap;gap:.2rem 1.6rem}
.foot nav a{padding:.5rem 0;font-weight:700;text-underline-offset:4px}
.small{font-size:var(--step--1);max-width:none}

/* ALTERSABFRAGE */
.age{border:0;border-radius:24px;padding:clamp(1.8rem,5vw,3rem);max-width:520px;width:calc(100% - 2rem);background:var(--glas);color:var(--schaum);text-align:center}
.age::backdrop{background:rgba(5,10,8,.92)}
.age h2{font-size:var(--step-3);margin:.8rem 0}
.age p{margin-inline:auto;color:var(--muted-on-dark)}
.age .actions{justify-content:center;margin-top:1.4rem}


@media(prefers-reduced-motion:reduce){
  .hero-video,.video-toggle{display:none}
  .hero{background:var(--glas) url(../assets/video/poster.jpg) center/cover}
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .bubble,.bub{display:none}
}

.hero-facts{list-style:none;margin:0 auto;padding-block:1rem 1.5rem;position:relative;display:flex;flex-wrap:wrap;gap:.5rem 2.2rem;font:800 var(--step-1)/1.1 var(--font-display);color:var(--glas)}
.hero-facts li{position:relative}
.hero-facts li+li::before{content:'';position:absolute;left:-1.2rem;top:50%;width:6px;height:6px;border-radius:50%;background:var(--glas);transform:translateY(-50%)}
@media(max-width:600px){.hero-facts{font-size:1.05rem;gap:.3rem 1.6rem}}
.verkauf-sec{padding-top:clamp(2.5rem,5vw,4rem)}

/* Unterseiten */
.page-head{padding:clamp(7rem,14vw,10rem) 0 clamp(2.5rem,5vw,4rem);background:var(--glas) radial-gradient(60% 120% at 85% 0,rgba(232,150,42,.28),transparent 70%);color:var(--schaum)}
.page-head h1{font-size:var(--step-4);font-weight:900;line-height:.95}
.page-head .lead{font-size:var(--step-1);color:var(--muted-on-dark);margin:1rem 0 0;max-width:44ch}
.more{margin:2.2rem 0 0}
.photo{width:100%;height:auto;border-radius:18px;object-fit:cover;margin-top:2rem;aspect-ratio:4/5}
.on-dark p{color:var(--muted-on-dark)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem 2rem}
.cta-row h2{font-size:var(--step-2);max-width:20ch}
.photos{display:grid;gap:1.2rem}
.photos figure img{width:100%;height:auto;border-radius:18px;object-fit:cover}
.photos figcaption{margin:.5rem 0 0;font-size:var(--step--1)}
.intro-glass{display:grid;gap:2rem;grid-template-columns:1fr;align-items:center;margin-bottom:clamp(3rem,6vw,5rem)}
@media(min-width:760px){.intro-glass{grid-template-columns:minmax(0,320px) 1fr;gap:4rem}}
.intro-glass .photo{margin:0;aspect-ratio:9/14}
.list-h{font-size:var(--step-2);margin-bottom:1.5rem}
.beer-list{list-style:none;margin:0;padding:0;display:grid;gap:1.2rem}
@media(min-width:900px){.beer-list{grid-template-columns:1fr 1fr}}
.beer-card{display:grid;grid-template-columns:104px 1fr;gap:1.4rem;align-items:center;background:var(--schaum);color:var(--ink);padding:1.4rem;border-radius:18px}
.dark .beer-card{background:var(--glas-2);color:var(--schaum)}
.bc-glass{width:104px;padding:.7rem .5rem .4rem;background:var(--glas);border-radius:14px}
.beer-card h3{font-size:var(--step-2)}
.beer-card .stil{font:600 var(--step-0) var(--font-display);margin:.2rem 0 .6rem;color:var(--muted-on-light)}
.dark .beer-card .stil{color:var(--muted-on-dark)}
.beer-card p{margin-bottom:.4rem}
.beer-card .abv{font-size:var(--step-2)}
.beer-card .badge{background:var(--glas);color:var(--schaum)}
.dark .beer-card .badge{background:var(--glas-3)}
.formats{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;gap:1.2rem}
@media(min-width:900px){.formats{grid-template-columns:repeat(3,1fr)}}
.formats li{background:var(--schaum);border-radius:18px;padding:1.4rem;display:flex;flex-direction:column;gap:1rem}
.formats img{height:220px;width:auto;max-width:100%;object-fit:contain;align-self:center}
.formats img.keg{width:100%;height:220px;object-fit:cover;border-radius:12px}
.gastro{height:220px;display:grid;place-items:center;border-radius:12px;background:var(--glas);color:var(--bernstein);font:900 clamp(2.4rem,5vw,3.4rem)/1 var(--font-display)}
.formats h3{margin-bottom:.4rem}
.formats p{color:var(--muted-on-light);margin:0}
.tip{margin:2rem 0 0;padding:1.2rem 1.5rem;border-left:8px solid var(--bernstein);background:var(--schaum);border-radius:0 14px 14px 0;max-width:70ch}
.event.has-img{grid-template-columns:auto 1fr}
.ev-img{grid-column:1/-1;width:100%;max-height:340px;object-fit:cover;border-radius:12px}
@media(min-width:820px){.event.has-img{grid-template-columns:auto 1fr minmax(0,300px)}.ev-img{grid-column:auto;align-self:center;max-height:none}}
.contact-card h2,.prose h2{font-size:var(--step-2);margin-bottom:1rem}
.contact.big{gap:.2rem}
.contact.big li{display:grid;grid-template-columns:8rem 1fr;gap:.2rem 1rem;padding:.8rem 0;border-top:2px solid var(--ink);align-items:baseline}
.contact.big li:last-child{border-bottom:2px solid var(--ink)}
.contact.big span{font:700 var(--step--1) var(--font-body);color:var(--muted-on-light)}
.contact.big a{padding:0}
.small-hours th,.small-hours td{font-size:var(--step-1)}
.open-status{display:inline-flex}
.legal{padding-top:4.5rem}
.legal .prose{max-width:80ch}
.legal h2,.legal h3{margin:2.2rem 0 .8rem;font-size:var(--step-2)}
.legal h3{font-size:var(--step-1)}
.legal p,.legal li{font-size:var(--step-0);line-height:1.7;color:var(--ink);max-width:none}
.legal ul,.legal ol{padding-left:1.4rem}
.legal a{text-underline-offset:3px;overflow-wrap:anywhere}

/* Übergänge: Schaumkante zwischen Sektionen + Parallax */
:root{--wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M0 0H200V9Q175 20 150 9T100 9T50 9T0 9Z'/%3E%3C/svg%3E")}
.section::before{content:'';position:absolute;z-index:2;left:0;right:0;top:-1px;height:clamp(20px,3.2vw,46px);background:var(--prev,transparent);pointer-events:none;
  -webkit-mask:var(--wave) 0 0/clamp(240px,34vw,520px) 100% repeat-x;mask:var(--wave) 0 0/clamp(240px,34vw,520px) 100% repeat-x}
.light + .dark,.light + .amber{--prev:var(--stahl)}
.dark + .light{--prev:var(--glas)}
.amber + .light{--prev:var(--bernstein)}
.dark + .amber{--prev:var(--glas)}
.pframe{overflow:hidden;border-radius:18px;margin-top:2rem}
.pframe .photo{margin:0;border-radius:0;transform:scale(1.2);will-change:translate}
.intro-glass .pframe{margin:0}
.photos .pframe{margin:0}
.photos .pframe img{transform:scale(1.2);border-radius:0}
.beers-glow{will-change:translate}
@media(prefers-reduced-motion:reduce){.pframe .photo,.photos .pframe img{transform:none}}

/* Kontaktformular */
.cform{display:grid;gap:1rem}
.cform label{display:block;font-weight:700;margin:0 0 .35rem}
.cform .opt{font-weight:400;color:var(--muted-on-light)}
.cform input,.cform select,.cform textarea{width:100%;min-height:52px;padding:.7rem 1rem;font:inherit;color:var(--ink);background:#fff;border:2px solid #8A978F;border-radius:12px}
.cform textarea{min-height:150px;resize:vertical}
.cform input:focus-visible,.cform select:focus-visible,.cform textarea:focus-visible{border-color:var(--glas);outline:3px solid var(--bernstein);outline-offset:2px}
.cform [aria-invalid=true]{border-color:var(--kork)}
.cform .row2{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:620px){.cform .row2{grid-template-columns:1fr 1fr}}
.ferr{color:var(--kork);font-weight:700;margin:.3rem 0 0;min-height:0}
.cform .check{display:grid;grid-template-columns:auto 1fr;gap:.8rem;font-weight:400;font-size:var(--step--1);color:var(--muted-on-light)}
.cform .check input{width:24px;height:24px;min-height:0;margin-top:.15rem;accent-color:var(--glas)}
.cform .msg.ok{color:#2F5E1F}.cform .msg.err{color:var(--kork)}
.cform .btn{justify-self:start}
.contact-card .open-status{margin-top:1.6rem}
.intro-glass .pframe .photo{transform:scale(1.06)}
.form-h{font-size:var(--step-2);margin-bottom:.6rem}
.form-lead{color:var(--muted-on-light);margin-bottom:1.4rem}
.vk-h{margin:2.4rem 0 .4rem;font-size:var(--step-1)}
.contact.big li{grid-template-columns:7.5rem 1fr}
.status-note{margin:0 0 1.6rem;padding:1rem 1.3rem;border-radius:14px;background:var(--glas-3);border-left:8px solid var(--hopfen);font-weight:700;max-width:46ch}

/* Gebinde-Bühne: Flasche, Partyfass und Gastrofass erscheinen beim Scrollen */
.handwerk{overflow:clip;padding-block:0}
.scene{height:auto}
.scene-pin{padding-block:var(--section)}
.stage{display:flex;align-items:flex-end;gap:clamp(.8rem,2.2vw,1.8rem);margin-top:2rem;--h50:min(28vh,240px)}
.fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:.7rem;text-align:center;font-size:var(--step--1);line-height:1.25}
.fig figcaption b{font:800 var(--step-0) var(--font-display)}
.fig img,.fig svg{display:block;width:auto;max-width:none}
.fig-bottle img{height:var(--h50);filter:drop-shadow(0 5px 4px rgba(0,0,0,.22))}
.fig-keg5 svg{height:calc(var(--h50) * .82);aspect-ratio:120/128}
.fig-keg50 svg{height:var(--h50);aspect-ratio:200/236}
.fig svg text{font-family:var(--font-display)}
.gebinde div{transition:background .4s,padding .4s,color .4s}
.gebinde div.on{background:var(--glas);color:var(--schaum);padding-inline:.7rem}
.gebinde div.on dd{color:var(--bernstein)}
@media(min-width:900px) and (prefers-reduced-motion:no-preference){
  .scene{height:260vh}
  .scene-pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding-block:5rem 2rem}
  .scene-pin>.wrap{align-items:center}
  .fig{opacity:0;transform:translateY(60px) scale(.88);transition:opacity .7s var(--ease-out),transform .8s var(--ease-out)}
  .fig.on{opacity:1;transform:none}
}
@media(max-width:899px){.stage{justify-content:center;flex-wrap:wrap;--h50:200px}}

/* Etikettenwand */
.labels{position:relative;margin-top:clamp(3rem,7vw,5.5rem)}
.labels-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem 2rem;flex-wrap:wrap;margin-bottom:1.2rem}
.labels-head h3{font-size:var(--step-2);font-weight:900}
.labels-head p{color:var(--muted-on-dark);margin:.6rem 0 0;max-width:52ch}
.labels-toggle{position:static;flex:none}
.label-row{overflow:hidden;padding:1.4rem 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.label-row ul{display:flex;gap:clamp(1rem,2vw,1.6rem);width:max-content;margin:0;padding:0;list-style:none;animation:wall 80s linear infinite}
.row-b ul{animation-direction:reverse;animation-duration:95s;padding-left:6rem}
.label-row:hover ul,.labels.paused ul{animation-play-state:paused}
@keyframes wall{to{transform:translateX(-50%)}}
.tile{position:relative;flex:none;width:clamp(150px,17vw,230px);aspect-ratio:1;transform:rotate(var(--r,0deg));transition:transform .35s var(--ease-out),box-shadow .35s;box-shadow:0 14px 30px rgba(0,0,0,.5);border-radius:10px;overflow:hidden;background:#fff}
.tile:nth-child(odd){--r:-2.2deg}
.tile:nth-child(even){--r:1.8deg;margin-top:1.1rem}
.tile img{display:block;width:100%;height:100%;object-fit:cover}
.tile:hover{transform:scale(1.16) rotate(0deg);z-index:3;box-shadow:0 22px 44px rgba(0,0,0,.6)}
.tile-name{position:absolute;inset:auto 0 0 0;padding:1.6rem .7rem .55rem;background:linear-gradient(transparent,rgba(14,27,23,.92));color:#fff;font:800 1rem/1.1 var(--font-display);opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}
.tile:hover .tile-name{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .label-row{overflow-x:auto}
  .label-row ul{animation:none;padding-left:var(--gutter)}
  .tile[aria-hidden=true],.labels-toggle{display:none}
}

/* Firmenbier-Konfigurator */
.konfig-grid{display:grid;gap:clamp(2rem,5vw,5rem);grid-template-columns:1fr;align-items:center}
@media(min-width:860px){.konfig-grid{grid-template-columns:minmax(0,340px) 1fr}}
.konfig-flasche{justify-self:center;width:min(70vw,320px);filter:drop-shadow(0 24px 30px rgba(0,0,0,.5))}
.konfig-flasche svg{display:block;width:100%;height:auto}
.konfig-flasche svg text{font-family:var(--font-display)}
.kfields{display:grid;gap:1rem;margin:1.6rem 0 1.8rem}
.kfields label{display:block;font-weight:700;margin:0 0 .35rem}
.kfields input:not([type=radio]),.kfields select{width:100%;min-height:54px;padding:.7rem 1.1rem;font:inherit;border-radius:12px;border:2px solid var(--glas-3);background:var(--glas-2);color:var(--schaum)}
.kfields input:focus-visible,.kfields select:focus-visible{border-color:var(--bernstein);outline-offset:2px}
.kfarbe{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.7rem}
.kfarbe legend{font-weight:700;margin-bottom:.5rem;padding:0}
.kfarbe label{display:flex;align-items:center;gap:.6rem;margin:0;padding:.4rem .9rem .4rem .45rem;border:2px solid var(--glas-3);border-radius:999px;font-weight:400;cursor:pointer;min-height:48px}
.kfarbe input{position:absolute;opacity:0;width:1px;height:1px}
.kfarbe span{width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.4)}
.kfarbe label:has(input:checked){border-color:var(--bernstein);font-weight:700}
.kfarbe label:has(input:focus-visible){outline:3px solid var(--bernstein);outline-offset:2px}
.kfoot{margin:1rem 0 0;font-size:var(--step--1);color:var(--muted-on-dark)}

/* Footer-Symbole, Impressum, Gebinde auf der Sortiment-Seite */
.foot nav .soc{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:2px solid var(--glas-3);color:var(--schaum);padding:0;transition:background .2s,color .2s,border-color .2s}
.foot nav .soc:hover{background:var(--bernstein);border-color:var(--bernstein);color:var(--ink)}
.foot nav{align-items:center;gap:.4rem 1.2rem}
.techn a{display:inline-flex;align-items:center;gap:1rem;font:800 var(--step-1) var(--font-display);text-decoration:none}
.techn img{width:56px;height:56px}
.legal h2{font-size:var(--step-2);margin:2.4rem 0 .6rem}
.legal h2:first-child{margin-top:0}
.formats .fmt-svg{height:220px;width:auto;max-width:100%;align-self:center}
.formats svg text{font-family:var(--font-display)}
.formats li:nth-child(2) .fmt-svg{height:182px}

@keyframes pop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}

/* Kundenstimmen mit Foto im Hintergrund */
.stimmen{isolation:isolate}
.stimmen .bg-photo{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;z-index:-2;opacity:.6;filter:saturate(.95) contrast(1.05);will-change:translate}
.stimmen::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(14,27,23,.86) 0%,rgba(14,27,23,.62) 40%,rgba(14,27,23,.9) 100%)}
.dark figcaption{color:var(--muted-on-dark)}