/*
Theme Name: Braufabrik Baden
Theme URI: https://braufabrik.ch
Author: Braufabrik Baden
Description: Schlankes, eigenes Theme für die Braufabrik Baden. Enthält bewusst keine Business-Logik (Events/Öffnungszeiten/Biere) — die kommt vollständig aus dem separaten Plugin "Braufabrik Events & Bier" (Design und Geschäftslogik bleiben bewusst getrennt).
Version: 3.1.0
Text Domain: braufabrik-theme
*/

:root{
  --ink:#2a1c12;
  --ink-soft:#5c4a37;
  --cream:#f6efe4;
  --cream-2:#efe1c8;
  --brown:#88693d;
  --brown-dark:#4b3a22;
  --near-black:#17130f;
  --moss:#4b5c3f;
  --amber:#a5631c;
  --line:#ddccae;
  --ph-1:#d8c9ab;
  --ph-2:#c4ac82;
  --radius:6px;
  /* Typography defaults. The corresponding values can be changed under
     Design → Customizer → Schriftgrössen; these CSS variables are the
     single bridge between WordPress settings and the front-end. */
  --font-base:16px;
  --font-nav:15px;
  --font-section-heading:24px;
  --font-menu-card-title:17px;
  --font-menu-card-body:16px;
  --font-menu-card-price:18px;
  --font-hero-eyebrow:16px;
  --font-newsletter-note:14px;
  --font-location-body:16px;
  --font-rental-body:16px;
  /* main.js keeps this synced with the real sticky header height. The
     fallback prevents the menu jump bar from ever sitting under the header
     before JavaScript has measured it. */
  --header-height:124px;
  font-size:16px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.5;
  font-size:var(--font-base);
}
h1,h2,h3{
  font-family:"Arial Narrow","Liberation Sans Narrow","Nimbus Sans Narrow",Arial,sans-serif;
  font-weight:600;
  text-transform:uppercase;
  margin:0 0 .4em;
  letter-spacing:.4px;
}
a{color:var(--brown);}
img{max-width:100%;}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;}

/* Placeholder pattern — shown whenever a section has no photo yet (e.g. an
   event without a Beitragsbild). Never a broken image, always a clear,
   intentional-looking placeholder. */
.ph{
  background:repeating-linear-gradient(135deg,var(--ph-1),var(--ph-1) 10px,var(--ph-2) 10px,var(--ph-2) 20px);
  border:1px dashed #8a7658;
  color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  font-size:.85rem;
  padding:12px;
  border-radius:var(--radius);
}
.ph span{background:rgba(246,239,228,.88);padding:6px 10px;border-radius:4px;font-weight:600;max-width:80%;}
/* Any real <img class="ph"> fills its box by percentage, never by its own
   pixel dimensions — this is what prevents photos from blowing up grid/flex
   tracks (see the CSS Grid "blowout" bug found during the mockup phase).
   object-fit:contain (not cover) on purpose — real content photos (Events,
   Galerie, Über uns) are never cropped, they're scaled to fit instead. Any
   letterbox gap simply shows the surrounding element's own background
   (white card, cream page, or the carousel's placeholder tan below), so
   whoever uploads a photo doesn't need to pre-crop it to an exact ratio. */
img.ph{
  width:100%;height:100%;min-width:0;min-height:0;
  object-fit:contain;display:block;background:none;border:none;
}
/* Ausnahme: Hero- und Newsletter-Hintergrundbild sind feste, fürs
   Vollbild-Wirkung bewusst zugeschnittene Stimmungsbilder (keine im
   Backend hochgeladenen Inhalte) — die bleiben Cover, nicht Teil der
   "nicht beschneiden"-Regel oben. */
.tile.frame img.ph.parallax,
.newsletter-bg img.ph{
  object-fit:cover;
}

/* Header — solid near-black over the hero, switches to solid light/cream once
   scrolled past it. Never transparent, always readable. */
header{
  position:sticky;top:0;z-index:20;
  background:var(--near-black);
  border-bottom:1px solid var(--near-black);
  transition:background .3s ease, border-color .3s ease;
}
header.scrolled{
  background:rgba(246,239,228,.96);
  backdrop-filter:blur(4px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:12px 24px;
}
.brand-text{
  font-family:"Arial Narrow","Liberation Sans Narrow","Nimbus Sans Narrow",Arial,sans-serif;font-weight:700;font-size:1.85rem;
  text-transform:uppercase;letter-spacing:.5px;
  color:#fff;transition:color .3s ease;
  text-decoration:none;display:inline-block;
}
header.scrolled .brand-text{color:var(--ink);}
/* Brand mark, centred between the wordmark and the nav links. Two logo
   variants are stacked and cross-fade with the header's own dark/light
   toggle: the light (white-on-transparent) mark for the dark header, the
   dark mark for the scrolled, cream header. */
.brand-mark{flex:none;position:relative;height:100px;width:100px;}
.brand-mark img{
  position:absolute;top:0;left:0;height:100px;width:100px;
  object-fit:contain;transition:opacity .3s ease;
}
.brand-mark .logo-on-light{opacity:0;}
header.scrolled .brand-mark .logo-on-dark{opacity:0;}
header.scrolled .brand-mark .logo-on-light{opacity:1;}
.site-nav ul{list-style:none;display:flex;gap:26px;margin:0;padding:0;font-size:var(--font-nav);}
.site-nav ul a{text-decoration:none;color:#fff;font-weight:600;transition:color .3s ease;}
header.scrolled .site-nav ul a{color:var(--ink);}
.site-nav ul a:hover{color:#d9b98c;}
header.scrolled .site-nav ul a:hover{color:var(--brown);}
/* Hamburger is a mobile-only control. It is a real button (rather than a
   decorative icon), so keyboard/screen-reader users get the same menu. */
.menu-toggle{
  display:none;width:44px;height:44px;padding:10px;border:1px solid rgba(255,255,255,.45);
  border-radius:8px;background:transparent;color:#fff;cursor:pointer;
}
header.scrolled .menu-toggle{border-color:var(--line);color:var(--ink);}
.menu-toggle-lines{display:flex;flex-direction:column;justify-content:center;gap:5px;height:100%;}
.menu-toggle-lines span{display:block;width:100%;height:2px;background:currentColor;border-radius:2px;transition:transform .2s ease,opacity .2s ease;}
.menu-toggle[aria-expanded="true"] .menu-toggle-lines span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] .menu-toggle-lines span:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] .menu-toggle-lines span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
/* Dynamic "next opening" indicator — always visible in the header, pulls from
   whatever the next entered event actually is (never hardcoded). */
.nav-next{
  display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;
  background:#fff;color:var(--brown-dark);
  padding:7px 16px;border-radius:14px;text-decoration:none;white-space:nowrap;
  transition:background .3s ease,color .3s ease;
}
header.scrolled .nav-next{background:var(--near-black);color:#fff;}
.nav-next-label{font-size:.6rem;text-transform:uppercase;letter-spacing:.6px;font-weight:700;opacity:.7;}
.nav-next-date{font-size:.86rem;font-weight:700;}

/* Tablet/Handy: die Desktop-Navigation wird durch ein echtes Dropdown-Menü
   ersetzt. Die Kopfzeile behält bewusst Innenabstand; nichts klebt am
   Bildschirmrand. Die Öffnungszeit bleibt sichtbar, weil sie für den Brewpub
   wichtiger ist als ein möglichst niedriger Header. */
@media(max-width:880px){
  .nav{
    display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;
    column-gap:12px;row-gap:8px;padding:10px 20px;
  }
  .brand-text{grid-column:1;grid-row:1;font-size:1.45rem;}
  .brand-mark{grid-column:2;grid-row:1;height:54px;width:54px;}
  .brand-mark img{height:54px;width:54px;}
  .nav-next{grid-column:3;grid-row:1;justify-self:end;padding:6px 12px;}
  .menu-toggle{grid-column:4;grid-row:1;justify-self:end;}
  .js .menu-toggle{display:block;}
  .site-nav{grid-column:1/-1;grid-row:2;width:100%;}
  .js .site-nav{display:none;}
  .js .site-nav.is-open{display:block;}
  .site-nav ul{
    display:flex;flex-direction:column;gap:0;width:100%;font-size:var(--font-nav);
    border-top:1px solid rgba(255,255,255,.18);padding-top:6px;
  }
  header.scrolled .site-nav ul{border-top-color:var(--line);}
  .site-nav li{width:100%;}
  .site-nav ul a{display:block;width:100%;padding:11px 4px;}
}

/* Auf sehr schmalen Handys erhält die Öffnungszeit eine eigene zweite Zeile.
   Dadurch bleiben Brand und Hamburger in einer ruhigen, gut bedienbaren
   ersten Zeile statt horizontal gequetscht zu werden. */
@media(max-width:560px){
  .nav{grid-template-columns:auto 1fr auto;padding:9px 16px;}
  .brand-text{font-size:1.3rem;}
  .brand-mark{height:46px;width:46px;}
  .brand-mark img{height:46px;width:46px;}
  .menu-toggle{grid-column:3;grid-row:1;}
  .nav-next{grid-column:1/4;grid-row:2;justify-self:stretch;align-items:center;text-align:center;}
  .site-nav{grid-row:3;}
}

/* Reusable photo tile: clips its image, optionally does parallax + hover-zoom */
.tile{position:relative;overflow:hidden;border-radius:10px;}
.tile img.ph{transition:transform .4s ease;}
.tile:hover img.ph:not(.parallax){transform:scale(1.08);}
.tile.frame img.ph.parallax{
  position:absolute;left:0;top:-50%;width:100%;height:200%;
  transform:translateY(var(--ty,0px)) scale(var(--zoom,1));
  transition:transform .2s ease-out;
  will-change:transform;
}
.tile.frame:hover img.ph.parallax{--zoom:1.05;}

/* Hero */
.hero{position:relative;height:78vh;min-height:460px;overflow:hidden;}
.hero .tile{position:absolute;inset:0;border-radius:0;}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,14,8,.15) 0%,rgba(20,14,8,.72) 100%);
  display:flex;align-items:flex-end;
}
.hero-content{
  padding:48px 24px 56px;max-width:800px;margin:0 auto;width:100%;color:#fff;
  text-align:center;display:flex;flex-direction:column;align-items:center;
}
.hero-content .eyebrow{
  text-transform:uppercase;letter-spacing:1.5px;font-size:var(--font-hero-eyebrow);font-weight:700;color:#d9b98c;
}
.hero-content h1{margin:.3em 0 .35em;}
.hero-content h1 .title-main{
  display:block;color:#fff;font-size:clamp(2.3rem,6vw,4rem);line-height:1.05;
}
.hero-content h1 .title-sub{
  display:block;color:#f1e8d8;font-weight:500;text-transform:uppercase;
  font-size:clamp(1rem,2.2vw,1.4rem);letter-spacing:1px;margin-top:.3em;
}
.hero-content p{font-size:1.05rem;max-width:52ch;color:#f1e8d8;margin:0 0 1.2em;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
.btn{
  display:inline-block;padding:12px 22px;border-radius:999px;font-weight:700;
  text-decoration:none;font-size:.92rem;border:none;cursor:pointer;font-family:inherit;
}
.btn-primary{background:var(--brown);color:#fff;}
.btn-ghost{border:1.5px solid #fff;color:#fff;background:transparent;}

/* BIG next-opening block — the main "wann" signal. The whole band is a link
   (see the plugin's [bf_next_opening] markup), so it needs its own hover
   feedback since it's not a div with a button inside. */
.next-open{
  display:block;text-decoration:none;
  background:var(--brown-dark);color:var(--cream);
  padding:40px 0 46px;
  border-bottom:4px solid var(--brown);
  transition:background .25s ease;
}
.next-open:hover{background:#3d2f1c;}
.next-open .inner{
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
}
.next-open .label{
  font-size:.8rem;text-transform:uppercase;letter-spacing:1.6px;color:#d9b98c;font-weight:700;margin-bottom:6px;
}
.next-open .big-date{
  font-family:"Arial Narrow","Liberation Sans Narrow","Nimbus Sans Narrow",Arial,sans-serif;text-transform:uppercase;font-weight:700;
  font-size:clamp(2rem,5.5vw,3.6rem);line-height:1.02;letter-spacing:.5px;
}
.next-open .time{color:#e7d7bd;font-size:1rem;margin-top:8px;}
.next-open .side{display:flex;align-items:center;}
.details-cta{
  display:inline-flex;align-items:center;gap:8px;
  color:#fff;font-weight:700;font-size:1rem;
}
.details-cta .chev{transition:transform .2s ease;}
.next-open:hover .details-cta .chev{transform:translateX(4px);}

section{padding:64px 0;}
section.tight{padding:44px 0;}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:28px;flex-wrap:wrap;}
.section-head h2,.menu-section h2,.location h2{font-size:var(--font-section-heading);}
.section-head p{margin:.3em 0 0;color:var(--ink-soft);max-width:48ch;}
.link-more{font-weight:700;font-size:.9rem;white-space:nowrap;text-decoration:none;color:var(--brown);}

/* Events */
/* auto-fit, not a fixed 4 columns — the homepage only ever shows upcoming
   events, so the count varies naturally from month to month. */
.events-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;}
/* Ganze Karte ist ein Link (nicht nur "Details →" unten) — Bild und Titel
   sind der naheliegendste Klickbereich. */
.event-card{
  display:block;background:#fff;border:1px solid var(--line);border-radius:10px;
  overflow:hidden;text-decoration:none;color:inherit;transition:border-color .2s ease;
}
.event-card:hover{border-color:var(--brown);}
.event-card .when .event-date,.event-card .when .event-time{display:block;}
.event-card .when .event-date{font-weight:700;}
.event-card .when .event-time{font-weight:400;}
/* Eventbild ohne künstlich hohe Bildbox: Die Höhe folgt dem Seitenverhältnis
   des hochgeladenen Bildes. So bekommen breite Banner keine grossen weissen
   Flächen oben/unten. Der Innenabstand ist auf allen vier Seiten identisch. */
.event-card-media{height:auto;padding:16px;overflow:hidden;box-sizing:border-box;}
.event-card-media img.ph{height:auto;width:100%;max-width:100%;border-radius:6px;font-size:.7rem;transition:transform .4s ease;}
.event-card:hover .event-card-media img.ph{transform:scale(1.045);}
.event-card:hover .event-card-media img.ph{transform:scale(1.05);}
.event-body{padding:16px;}
.event-type{
  font-size:.68rem;text-transform:uppercase;letter-spacing:.6px;font-weight:700;
  color:var(--brown);margin-bottom:6px;
}
.event-body h3{font-size:1rem;margin-bottom:4px;}
.event-body .when{font-size:.85rem;color:var(--ink-soft);}
.days-badge{
  display:inline-block;margin-top:8px;padding:3px 10px;border-radius:999px;
  background:var(--cream-2);color:var(--brown-dark);font-size:.72rem;font-weight:700;
}
.days-badge:empty{display:none;}
/* Every card links to that event's own detail page (bf_event single template)
   — this is where seasonal content like a winter menu lives. */
.event-body .link-more{display:block;margin-top:10px;font-size:.82rem;}
.event-card.is-past{opacity:.6;}
.event-card.is-past .ph{filter:grayscale(60%);}

/* Karussell (Stimmung & Atmosphäre) — beliebig viele Bilder, kein festes
   Layout: die Bilder kommen aus der "Galerie" im Plugin-Backend, das
   Karussell zeigt automatisch genau so viele wie dort gepflegt sind.
   Quadratisches Format (statt einem breiten Kino-Streifen) — Instagram-
   Bilder sind oft hoch oder quadratisch, ein sehr breites Seitenverhältnis
   hätte solche Quellbilder stark beschnitten bzw. sehr klein wirken lassen.
   Mit object-fit:contain (siehe oben) passt sich sowohl Hoch- als auch
   Querformat sauber ein, ohne beschnitten zu werden. */
.carousel-outer{max-width:760px;margin:0 auto;}
.carousel-row{display:flex;align-items:center;gap:16px;}
.carousel{
  position:relative;border-radius:10px;overflow:hidden;background:var(--ph-1);
  flex:1;min-width:0;aspect-ratio:1/1;
}
.carousel-track{display:flex;height:100%;transition:transform .5s ease;will-change:transform;}
.carousel-slide{flex:0 0 100%;height:100%;}
.carousel-slide img.ph{width:100%;height:100%;border-radius:0;}
/* Vor/Zurück-Buttons sitzen bewusst NEBEN dem Foto, nicht darüber — dadurch
   verdecken sie das Bild nie und dürfen auch grösser sein. */
.carousel-btn{
  flex:none;width:52px;height:52px;border-radius:50%;border:none;
  background:var(--brown-dark);color:#fff;font-size:1.6rem;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s ease;
}
.carousel-btn:hover{background:var(--ink);}
.carousel-dots{margin-top:14px;display:flex;justify-content:center;gap:8px;}
.carousel-dot{
  width:9px;height:9px;border-radius:50%;border:none;background:var(--line);
  cursor:pointer;padding:0;
}
.carousel-dot.is-active{background:var(--brown);}

/* Intro + "Über uns" split (Bild + Text nebeneinander) */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;}
.split .tile{height:320px;}
.split h1,.split h2{font-size:1.6rem;}
.split p{color:var(--ink-soft);}
.tag-list{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 20px;}
.tag-list span{
  background:var(--cream-2);border:1px solid var(--line);padding:5px 12px;border-radius:999px;font-size:.8rem;
}

/* Unsere Biere — nutzt jetzt dieselbe Kachel (.menu-tile, siehe weiter
   unten) wie die Angebotsseite, darum kein eigenes schmales Textspalten-
   Layout mehr. */
.beer-panel{max-width:none;}
.beer-panel p{color:var(--ink-soft);}

/* Newsletter — historic Oederlin photo as backdrop, moss/ink gradient for
   legibility. Box is taller and the gradient is concentrated behind the text
   (left) so the photo itself reads clearly toward the centre/right. */
.newsletter{
  position:relative;overflow:hidden;color:#fff;border-radius:16px;
  min-height:340px;
  padding:56px 44px;display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;
}
.newsletter-bg{position:absolute;inset:0;z-index:0;}
.newsletter-bg .ph{width:100%;height:100%;border-radius:0;}
.newsletter-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg, rgba(20,14,8,.82) 0%, rgba(20,14,8,.5) 32%, rgba(20,14,8,.15) 62%, rgba(20,14,8,.04) 100%);
}
.newsletter-text, .newsletter-form-wrap{position:relative;z-index:2;}
.newsletter .eyebrow{
  display:block;text-transform:uppercase;letter-spacing:1.5px;font-size:.78rem;font-weight:700;
  color:#d9b98c;margin-bottom:4px;
}
.newsletter h3{color:#fff;font-size:1.5rem;margin-bottom:6px;text-transform:uppercase;}
.newsletter p{margin:0;color:#e4e9df;max-width:42ch;}
.newsletter-form{display:flex;gap:10px;flex-wrap:wrap;}
.newsletter input{
  padding:12px 14px;border-radius:999px;border:none;min-width:220px;font-size:.9rem;
}
.newsletter button{
  background:var(--ink);color:#fff;border:none;padding:12px 22px;border-radius:999px;font-weight:700;cursor:pointer;
}
.newsletter-form-wrap{max-width:440px;}
.newsletter-note{
  font-size:var(--font-newsletter-note);margin-top:10px !important;color:#fff !important;max-width:52ch !important;
  background:rgba(20,14,8,.72);padding:9px 12px;border-radius:7px;
}
.newsletter-note a{color:#fff;text-decoration:underline;text-underline-offset:2px;}
.newsletter-honeypot{position:absolute !important;left:-10000px !important;width:1px !important;height:1px !important;overflow:hidden !important;}

/* Location */
.location{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start;}
.location .ph{height:340px;border-radius:12px;}
/* Datenschutzfreundlicher Standortblock: keine eingebettete Google-Maps-
   Karte. Erst der bewusste Klick auf den Link öffnet Google Maps. */
.map-link-card{
  min-height:340px;border-radius:12px;border:1px solid var(--line);
  background:var(--cream-2);display:flex;align-items:center;justify-content:center;
  padding:32px;text-align:center;
}
.map-link-card-inner{max-width:340px;}
.map-link-card .map-pin{font-size:2.4rem;line-height:1;margin-bottom:14px;}
.map-link-card h3{margin:0 0 8px;}
.map-link-card p{margin:0 0 18px;color:var(--ink-soft);}
.addr{font-size:var(--font-location-body);color:var(--ink-soft);margin:10px 0 18px;}
.info-chip{
  display:flex;gap:10px;align-items:flex-start;margin-bottom:14px;font-size:var(--font-location-body);
}
.info-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--brown);margin-top:6px;flex:none;}

footer{
  background:var(--ink);color:#d8c9ab;padding:48px 0 28px;font-size:.85rem;
}
.footer-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:32px;}
footer h4{color:#fff;font-size:.85rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;}
footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;}
footer a{color:#d8c9ab;text-decoration:none;}
footer a:hover{color:#fff;}
.footer-bottom{
  max-width:1120px;margin:32px auto 0;padding:20px 24px 0;border-top:1px solid #3a2c1e;
  display:flex;justify-content:space-between;color:#a8977a;font-size:.78rem;flex-wrap:wrap;gap:10px;
}

/* Generic page/post content (page.php, index.php) — basic, on-brand, but not
   individually art-directed like the homepage sections. */
.entry-content{max-width:760px;margin:0 auto;padding:48px 24px;}
.entry-content h1{font-size:2rem;}
.entry-content img{border-radius:10px;}

/* Kein Kontaktformular-CSS mehr: Seit V0.7.0 wird Contact Form 7 bewusst
   nicht verwendet. Kontaktangaben gehören ins Impressum. */

@media(max-width:880px){
  .events-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .event-card-media{height:auto;padding:10px;}
  .split{grid-template-columns:minmax(0,1fr);}
  .split .tile{height:220px;}
  .location{grid-template-columns:minmax(0,1fr);}
  .footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .newsletter{flex-direction:column;align-items:flex-start;}
  .newsletter-form-wrap{width:100%;max-width:none;}
  .newsletter-form{width:100%;}
  .newsletter-form input[type="email"]{flex:1 1 220px;min-width:0;}
  .next-open .inner{flex-direction:column;align-items:flex-start;}
}

@media(max-width:520px){
  .carousel-btn{width:40px;height:40px;font-size:1.3rem;}
  .carousel-row{gap:10px;}
}

@media (prefers-reduced-motion: reduce){
  .tile img.ph.parallax{transform:none !important;}
}

/* ---------------------------------------------------------------------
   Menü-Seite (page-menu.php) — eine durchscrollbare Seite mit Biere/
   Getränke/Essen/Events. Die sticky Sprungnavigation umfasst bewusst nur
   Biere/Getränke/Essen; Events sind ein Reminder am Seitenende.
--------------------------------------------------------------------- */



.menu-hero{padding-bottom:18px;}
.menu-hero h1{margin-bottom:0;}
/* Sticky Schnellnavigation der digitalen Speisekarte. Sie sitzt in einem
   eigenen, vollbreiten Container ausserhalb des Hero-Abschnitts und bleibt
   dadurch über die gesamte Angebotsseite erreichbar. main.js schreibt die
   echte Headerhöhe nach --header-height; kein gerätespezifischer Pixelwert. */
.menu-nav-shell{
  position:sticky;top:var(--header-height);z-index:15;background:var(--cream);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.menu-nav{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  margin:0;background:rgba(246,239,228,.98);backdrop-filter:blur(4px);
}
.menu-nav a{
  display:flex;align-items:center;justify-content:center;min-height:48px;
  font-weight:700;font-size:.92rem;color:var(--brown-dark);text-decoration:none;
  padding:10px 12px;border-right:1px solid var(--line);text-align:center;
}
.menu-nav a:last-child{border-right:0;}
.menu-nav a:focus-visible{color:var(--brown-dark);outline:2px solid currentColor;outline-offset:-3px;}
.menu-nav a.is-active{color:var(--brown-dark);background:var(--cream-2);}
/* Touch-Browser können :hover nach einem Tap festhalten. Hover deshalb nur
   dort aktivieren, wo ein echtes Hover-Eingabegerät vorhanden ist. */
@media(hover:hover) and (pointer:fine){
  .menu-nav a:hover{color:var(--brown-dark);background:var(--cream-2);}
}
.menu-section{scroll-margin-top:calc(var(--header-height) + 58px);padding-top:36px;padding-bottom:8px;}
.menu-note{color:var(--ink-soft);font-size:.9rem;}

/* Volle Breite, bewusst nicht auf section-head's Fliesstext-Spalte begrenzt. */
.menu-intro-banner{margin:6px 0 22px;max-width:none;}
.menu-intro-banner p{margin:0 0 6px;color:var(--ink-soft);}
.menu-intro-lead{font-weight:700;font-size:1.1rem;color:var(--brown-dark);margin-bottom:4px !important;}
.menu-intro-second{margin-top:16px !important;}
.menu-subsection{margin-top:34px;padding-top:8px;border-top:1px solid var(--line);}

/* Gemeinsame Angebots-Kachel V21.
   Reihenfolge bewusst vertikal: Titel -> Bild -> Produktinfos/Beschreibung ->
   Preis -> kleine Fussnote. Das Bild ist ca. 70% der Kachelbreite; das
   entspricht auf den bisherigen Desktop-Kacheln ungefähr dem gewünschten
   Faktor 1.5 gegenüber der alten Bildbreite. */
.menu-tile-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin:12px 0 20px;}
.menu-tile{
  position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:stretch;
  background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:14px;font-size:var(--font-menu-card-body);text-decoration:none;color:inherit;
  transition:border-color .2s ease;
}
a.menu-tile:hover{border-color:var(--brown);}

/* Bier-Badges bleiben an der Oberkante. Danach folgt wie bei allen anderen
   Produkten zuerst der linksbündige Titel. */
.menu-tile-badges{
  margin:-14px -14px 10px -14px;height:28px;display:flex;align-items:stretch;flex:0 0 auto;
}
.menu-tile-tap,.menu-tile-flag{
  display:flex;align-items:center;background:#000;box-sizing:border-box;height:100%;
  line-height:1;white-space:nowrap;font-size:.68rem;font-weight:700;
  letter-spacing:.02em;text-transform:uppercase;padding:0 12px;
}
.menu-tile-tap{color:#fff;border-radius:10px 0 8px 0;}
.menu-tile-flag{border-radius:0 10px 0 8px;margin-left:auto;gap:6px;}
.menu-tile-flag .flag-sep{color:rgba(255,255,255,.4);}
.menu-tile-flag .flag-guest{color:#74c0fc;}
.menu-tile-flag .flag-coming-soon{color:#ffb066;}
.menu-tile-flag .flag-new{color:#7bdc8a;}
.menu-tile-flag .flag-low{color:#ff8787;}

.menu-tile-info{order:1;display:flex;flex-direction:column;gap:3px;min-width:0;}
.menu-tile-info h3{margin:0 0 8px;font-size:var(--font-menu-card-title);}

/* Bild unter dem Titel, deutlich grösser als in V20, aber nicht zwangsweise
   über die ganze Karte. Hochformat wird nicht beschnitten. */
.menu-tile-image{
  order:2;width:91%;max-width:364px;align-self:center;margin:4px auto 12px;
  border-radius:8px;background:transparent;
}
.menu-tile-image img{
  width:100%;height:auto;max-height:280px;object-fit:contain;display:block;
  border-radius:8px;transition:transform .35s ease;
}
.menu-tile:hover .menu-tile-image img{transform:scale(1.045);}

/* Stil/ABV/IBU sollen beim Bier unter dem Bild stehen. Der Renderer setzt
   sie in denselben Info-Block wie den Titel; mit display:contents werden die
   Einzelteile über order sauber um das Bild herum angeordnet. */
.menu-tile-info{display:contents;}
.menu-tile-info h3{order:1;}
.menu-tile-style,.menu-tile-abv,.menu-tile-ibu{
  order:3;color:var(--ink-soft);font-size:var(--font-menu-card-body);
}
.menu-tile-style{margin-top:0;font-weight:700;color:var(--ink);}

.menu-tile-desc{order:4;margin:10px 0 0;color:var(--ink-soft);font-size:var(--font-menu-card-body);}
.menu-tile-desc p{margin:0;}
.menu-tile-origin{order:5;margin:6px 0 0;color:var(--ink-soft);font-size:calc(var(--font-menu-card-body) - 1px);}

.menu-tile-price{order:6;margin-top:auto;padding-top:14px;display:flex;flex-direction:column;gap:3px;}
.menu-tile-price-row{font-size:var(--font-menu-card-price);display:flex;gap:6px;}
.menu-tile-vol{font-weight:400;color:var(--ink-soft);}
.menu-tile-amount{font-weight:700;}

/* Essen: Fussnote bleibt absichtlich klein. Eine Mindesthöhe wird auch bei
   leerer Fussnote reserviert; dadurch stehen die Preise innerhalb einer
   Kartenreihe auf gleicher Höhe, ohne dass Popcorn nach oben springt. */
.menu-tile-footnote{
  order:7;color:var(--ink-soft);font-size:.72rem;margin-top:10px;min-height:2.8em;
}




/* Archivseite "Verpasste Bierkreationen" — gedämpft dargestellt, wie
   vergangene Events. */
.menu-tile.is-gone{opacity:.55;filter:grayscale(.5);}

.price-row{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px dashed var(--line);}
.price-row:last-child{border-bottom:none;}
.price-row-title{font-weight:600;}
.price-row-note{font-weight:400;color:var(--ink-soft);font-size:.85rem;}
.price-row-price{font-weight:700;white-space:nowrap;}

.menu-events-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;}
.menu-events-list a{
  display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:10px 14px;font-size:.9rem;transition:border-color .2s ease;
}
.menu-events-list a:hover{border-color:var(--brown);}
.menu-events-list .event-type-suffix{font-weight:400;color:var(--ink-soft);}

/* Kasten-Look für Hinweistexte in voller Breite (z. B. "Location Mieten"
   auf der Startseite, "Helferaufruf" auf der Angebotsseite) — Titel als
   fette Überschrift direkt im Kasten statt als separate section-head-
   Zeile davor. */
.callout-box{
  background:var(--cream-2);border:1px dashed var(--line);border-radius:10px;
  padding:20px 24px;font-size:var(--font-rental-body);color:var(--ink-soft);
}
.callout-box-title{font-weight:700;color:var(--ink);margin:0 0 .5em;font-size:1.1rem;}
.callout-box p{margin:0 0 .6em;}
.callout-box p:last-child{margin-bottom:0;}

@media(max-width:600px){
  .menu-nav a{min-height:50px;padding:10px 6px;font-size:.9rem;}
  .menu-tile-list{grid-template-columns:minmax(0,1fr);gap:12px;}
  .menu-tile{padding:12px;}
  .menu-tile-badges{margin:-12px -12px 10px -12px;}
  .menu-tile-tap,.menu-tile-flag{padding:0 9px;font-size:.64rem;}
  .menu-section{padding-top:28px;}
}

@media(max-width:380px){
  .menu-tile-image{width:91%;}
}



/* V10: Standortkarte als rein lokales Foto. Die ganze Fläche ist ein Link
   zu Google Maps; beim normalen Seitenaufruf wird weiterhin nichts von
   Google geladen. Das lokale Foto füllt die zuvor sehr leere Kartenfläche. */
.map-link-card-photo{position:relative;display:block;min-height:300px;overflow:hidden;padding:0;text-decoration:none;color:#fff;background:var(--near-black);}
.map-link-card-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s ease;}
.map-link-card-photo:hover>img{transform:scale(1.025);}
.map-link-card-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:22px;background:linear-gradient(180deg,rgba(23,19,15,.05) 25%,rgba(23,19,15,.82) 100%);}
.map-link-card-overlay strong{font-size:1.2rem;}
.map-link-card-cta{display:inline-block;margin-top:8px;font-weight:700;}

/* V10: Ein volles Eventjahr ist als Kachelwand schwer scanbar. Die Events-
   Seite verwendet deshalb dieselbe kompakte Listenoptik wie früher der
   Event-Reminder im Online-Menü. Vergangene Termine bleiben auffindbar,
   werden aber optisch zurückgenommen. */
.event-archive .menu-events-list{margin-top:0;}
.event-archive-past-title{font-size:1.2rem;margin-top:48px;}
.event-archive-list-past{opacity:.62;}

/* === V13: eigenständiges A4-Druckmenü /menu-print/ ===================== */
.braufabrik-print-menu{background:#ece7df;color:#211a14;font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.35;margin:0}
.print-toolbar{max-width:210mm;margin:18px auto 8px;text-align:right}
.print-toolbar button{border:0;border-radius:4px;background:#4b3a22;color:#fff;font:inherit;font-weight:700;padding:9px 18px;cursor:pointer}
.print-sheet{box-sizing:border-box;width:210mm;min-height:297mm;margin:0 auto 30px;background:#fff;padding:13mm 15mm 15mm;box-shadow:0 2px 18px rgba(0,0,0,.12)}
.print-logo{text-align:center;margin:0 0 8mm}.print-logo img{display:block;max-width:72mm;max-height:27mm;width:auto;height:auto;margin:0 auto}.print-logo h1{margin:0;font-size:30px}
.print-free-text{margin:0 0 7mm;padding:0;border:0}.print-free-text p,.print-section-intro p{margin:0 0 2mm}.print-free-text p:last-child,.print-section-intro p:last-child{margin-bottom:0}
.braufabrik-print-menu section.print-section{padding:0;margin:0 0 3.5mm}.print-section>h2{font-family:"Arial Narrow","Liberation Sans Narrow",Arial,sans-serif;font-size:23px;line-height:1;margin:0 0 3mm;padding-bottom:1.5mm;border-bottom:3px solid #4b3a22;text-transform:uppercase;letter-spacing:.03em;break-after:avoid-page}
.print-section-intro{margin:0 0 4mm;color:#4c4137;break-after:avoid-page}
.print-product{position:relative;margin:0;padding:2.4mm 0 2.6mm;border-bottom:1.5px solid #4b3a22;break-inside:avoid-page;page-break-inside:avoid}
.print-product-head{display:flex;align-items:flex-start;justify-content:space-between;gap:5mm}.print-product h3{font-size:15px;line-height:1.15;margin:0;font-weight:800}.print-meta{margin-top:.7mm;font-size:12.5px;font-weight:600;color:#51473e}.print-desc{margin:1.2mm 0 0}.print-desc p{margin:0}.print-origin,.print-footnote{margin:1mm 0 0;font-size:11px;color:#655b51}.print-prices{display:flex;flex-wrap:wrap;gap:2mm 6mm;margin-top:1.2mm;font-size:13px}.print-prices strong,.print-single-price strong{font-size:14px}.print-badges{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:1.2mm;max-width:58mm}.print-badge{display:inline-block;border:1px solid #7d6b58;border-radius:2px;padding:.5mm 1.8mm;font-size:10px;font-weight:800;line-height:1.2;text-transform:uppercase;white-space:nowrap}.print-tap{background:#211a14;color:#fff;border-color:#211a14}.print-single-price{white-space:nowrap}.print-events{break-inside:avoid-page;page-break-inside:avoid}
.print-events ul{list-style:none;margin:0;padding:0}.print-events li{padding:1.3mm 0;border-bottom:1.5px solid #4b3a22;break-inside:avoid-page}.print-outro{margin-top:8mm}
@media(max-width:850px){.print-toolbar{margin:10px 12px}.print-sheet{width:auto;min-height:0;margin:0 8px 20px;padding:22px 20px}.print-product-head{gap:12px}}
@page{size:A4 portrait;margin:13mm 15mm 15mm}
@media print{
	html,body.braufabrik-print-menu{background:#fff!important;margin:0!important;padding:0!important;font-size:var(--print-font-base);-webkit-print-color-adjust:exact;print-color-adjust:exact}
	.print-toolbar{display:none!important}
	.print-sheet{width:auto;min-height:0;margin:0;padding:0;box-shadow:none}
	.print-logo{margin-bottom:6mm}.print-logo img{max-height:23mm}
	.braufabrik-print-menu section.print-section{padding:0;margin-bottom:2.5mm}.print-section>h2{font-size:var(--print-font-heading);margin-bottom:2.5mm}.print-section-intro{margin-bottom:3mm}
	.print-product{padding:2mm 0 2.2mm}.print-product h3{font-size:var(--print-font-product)}.print-meta{font-size:var(--print-font-small)}.print-desc{margin-top:.8mm}.print-origin,.print-footnote{font-size:var(--print-font-small)}.print-prices{font-size:var(--print-font-small)}.print-prices strong,.print-single-price strong{font-size:var(--print-font-base)}.print-badge{font-size:max(7pt, calc(var(--print-font-small) - 2pt))}
	a{color:inherit;text-decoration:none}
}

/* V14: Die versteckte Druckseite soll auch für eingeloggte Redaktoren wie Papier aussehen.
   WordPress' Admin-Bar wäre sonst als schwarzer Balken über dem Logo sichtbar. */
body.braufabrik-print-menu #wpadminbar{display:none!important}
html:has(body.braufabrik-print-menu){margin-top:0!important}
.print-free-text img{max-width:100%;height:auto}

/* V15: Printseite vollständig von normalen Seiten-/Admin-Abständen isolieren. */
body.braufabrik-print-menu{padding-top:0!important}
body.braufabrik-print-menu #wpadminbar{display:none!important;visibility:hidden!important;height:0!important}
html:has(body.braufabrik-print-menu){margin-top:0!important;padding-top:0!important}

/* === V16: Print-Header und Hauptabstaende ==============================
   .print-logo ist semantisch ein <header>. Der normale Website-Header ist
   global sticky und dunkel; diese Eigenschaften duerfen auf der separaten
   Druckroute nicht vererbt werden. Hauptsektionen erhalten bewusst einen
   festen A4-Abstand in mm, damit die Papiergestaltung reproduzierbar bleibt. */
body.braufabrik-print-menu header.print-logo{
  position:static!important;
  top:auto!important;
  z-index:auto!important;
  background:transparent!important;
  border:0!important;
  backdrop-filter:none!important;
  transition:none!important;
}
body.braufabrik-print-menu .print-section + .print-section{margin-top:25mm}
@media print{
  body.braufabrik-print-menu .print-section + .print-section{margin-top:25mm}
}


/* === V17: Print-Logo ohne Website-Header ================================
   Der Logo-Block ist absichtlich kein <header>-Element mehr. Damit kann die
   globale sticky Website-Header-Regel auf /menu-print/ technisch nicht mehr
   greifen. Das Logo liegt als normales Bild im Dokumentfluss. */
body.braufabrik-print-menu .print-logo{
  position:static!important;
  inset:auto!important;
  z-index:auto!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}




/* V25 – gezielte Ausrichtung statt einzelner Textzeilen.
   Nur die Schnittlinien zwischen Karten werden synchronisiert.
   Die Textgruppen selbst bleiben kompakt und behalten ihre natürlichen Abstände. */
@supports (grid-template-rows:subgrid){
  .events-grid{grid-auto-flow:row;}
  .event-card{
    display:grid;
    grid-row:span 2;
    grid-template-rows:subgrid;
  }
  .event-card-media{grid-row:1;}
  .event-card .event-body{
    grid-row:2;
    display:block;
    padding-top:0;
  }
}

/* Menge/Preis bewusst überall linksbündig – Desktop und Mobile. */
.menu-tile-price,.menu-tile-price-row{
  text-align:left;
  justify-content:flex-start;
}

/* Einspaltig keine Synchronisierung zwischen Karten. */
@media(max-width:700px){
  @supports (grid-template-rows:subgrid){
    .event-card{
      display:flex;
      flex-direction:column;
      grid-row:auto;
    }
    .event-card .event-body{display:block;padding-top:0;}
  }
}

/* V27 – Events-Archiv: vier visuelle nächste Termine, danach kompakte,
   nach Monaten gegliederte Langzeitliste. */
.event-archive-next-title,
.event-archive-upcoming-title,
.event-archive-past-title{
  margin:30px 0 14px;
  font-size:1.25rem;
}
.event-archive-next-title{margin-top:0;}
.event-month-group{margin:26px 0 0;}
.event-month-title{
  margin:0 0 9px;
  padding-bottom:7px;
  border-bottom:2px solid var(--line);
  font-size:1rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.event-month-group .menu-events-list{margin-top:0;}

/* V28 – Hero ist für Bild ODER Video vorbereitet. Das statische Hauptbild
   bleibt Poster/Fallback; bei reduzierter Bewegung wird das Video versteckt. */
.hero-media .hero-poster,
.hero-media .hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.hero-media .hero-poster{z-index:0;}
.hero-media .hero-video{z-index:1;}
.hero-text-panel{
  width:min(100%,800px);
  padding:22px 28px 18px;
  border-radius:12px;
  background:rgba(0,0,0,var(--hero-text-bg,.50));
}
.hero-text-panel .eyebrow,
.hero-text-panel h1,
.hero-text-panel p{position:relative;z-index:1;}
.brand-mark{text-decoration:none;}

@media(max-width:700px){
  .hero-text-panel{padding:18px 16px 15px;border-radius:10px;}
}
@media(prefers-reduced-motion:reduce){
  .hero-has-video .hero-video{display:none;}
  .hero-has-video .hero-poster{z-index:1;}
}