/*
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" (Pflichtenheft §12: Design und Geschäftslogik getrennt).
Version: 1.9.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;
  /* 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:.78rem;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);}
/* Bild sitzt in einem eigenen, gepolsterten Rahmen — der Hover-Zoom bleibt
   dadurch innerhalb dieses Rahmens und läuft nie bis ganz an die Kante der
   Karte (anders als vorher). */
.event-card-media{height:280px;padding:16px;overflow:hidden;box-sizing:border-box;}
.event-card-media img.ph{height:100%;width:100%;border-radius:6px;font-size:.7rem;transition:transform .4s ease;}
.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:.78rem;margin-top:10px !important;color:#e4e9df !important;max-width:52ch !important;}
.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:.95rem;color:var(--ink-soft);margin:10px 0 18px;}
.info-chip{
  display:flex;gap:10px;align-items:flex-start;margin-bottom:14px;font-size:.9rem;
}
.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:200px;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:rgba(246,239,228,.98);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  backdrop-filter:blur(4px);
}
.menu-nav{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  margin:0;
}
.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:hover,.menu-nav a:focus-visible{color:var(--brown);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 Kachel für Biere, Getränke und Essen (.menu-tile). Bei Bieren
   zusätzlich eine feste Kopfzeile (Tap-Nummer links, Kennzeichnung rechts)
   und eine Stil/ABV/IBU-Unterzeile — bei Getränken/Essen einfach weg-
   gelassen (kein CSS-Sonderfall nötig, das Grid rutscht automatisch
   nach). Aufbau sonst überall gleich: links das Foto (halbe Kachelbreite,
   quadratisch 1:1), rechts der Titel, darunter über die volle Breite die
   Beschreibung, danach ggf. Herkunft (Bier) bzw. ganz unten eine Fussnote
   (Essen), zuunterst die Preiszeile(n) — Menge normal, Preis fett. */
.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:grid;
  grid-template-columns:3fr 2fr;column-gap:14px;row-gap:6px;
  background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:14px;font-size:.88rem;text-decoration:none;color:inherit;
  transition:border-color .2s ease;
}
a.menu-tile:hover{border-color:var(--brown);}
.menu-tile.no-image{grid-template-columns:1fr;}
.menu-tile.no-image .menu-tile-badges,
.menu-tile.no-image .menu-tile-info,
.menu-tile.no-image .menu-tile-desc,
.menu-tile.no-image .menu-tile-origin,
.menu-tile.no-image .menu-tile-price,
.menu-tile.no-image .menu-tile-footnote{grid-column:1;}

/* Kopfzeile (nur Biere): bewusst IMMER vorhanden und gleich hoch, auch
   wenn für dieses Bier weder Tap-Nummer noch Kennzeichnung gesetzt ist —
   dadurch beginnen Foto (links) und Titelblock (rechts) bei JEDEM Bier
   exakt gleich weit oben, bündig nebeneinander. Feste Höhe (statt
   min-height) plus box-sizing:border-box und line-height:1 auf den
   Schildchen selbst, damit die Zeile garantiert einzeilig bleibt und nie
   je nach Inhalt/Schriftart unterschiedlich hoch wirkt. Bleedet bis an
   die echte Kachelkante (negative Ränder heben den normalen Innenabstand
   auf), damit beide Schildchen randlos in den Ecken sitzen. */
.menu-tile-badges{
  grid-column:1/3;margin:-14px -14px 0 -14px;
  height:28px;display:flex;align-items:stretch;
}
.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;}
/* Kennzeichnung: Gastbier UND Status können gleichzeitig zutreffen (z. B.
   "Gastbier · Bald leer") — die Farbe sitzt darum auf den inneren Teilen,
   nicht mehr auf dem äusseren Schildchen selbst. */
.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;}

/* Bildspalte ist IMMER 60% der Kachelbreite (grid-template-columns:3fr
   2fr oben), Titel/Info-Spalte die restlichen 40%. align-self:start
   verhindert, dass sich das Bild per Grid-Standard (align-items:stretch)
   auf die Höhe der oft höheren Textspalte dehnt — ohne Hover beginnt es
   exakt auf derselben Oberkante wie der Titel rechts.

   Höhe = echtes Seitenverhältnis des Fotos bei dieser Breite, aber
   gedeckelt auf maximal 1:1 (quadratisch): ein Quer-/Panoramafoto bleibt
   entsprechend flach (kein von vornherein freigehaltener quadratischer
   Platz), ein hochkantiges Foto mit "mehr vertikaler Tiefe" wird nicht
   höher als breit — es wird innerhalb des quadratischen Maximalfelds
   verkleinert dargestellt (object-fit:contain, kein Zuschneiden).
   container-type:inline-size + die cqw-Einheit machen "maximal so hoch
   wie breit" möglich, ganz ohne die Bildhöhe fest zu verdrahten.

   Hover: das Bild hebt sich um etwas mehr als eine halbe Texthöhe nach
   oben an (über die Titel-Oberkante hinaus) — ohne Hover exakt bündig
   mit dem Titel, mit Hover spürbar höher. */
.menu-tile-image{
  grid-column:1;align-self:start;
  border-radius:8px;background:transparent;
  container-type:inline-size;
}
.menu-tile-image img{
  width:100%;height:auto;max-height:100cqw;object-fit:contain;display:block;
  border-radius:8px;transition:transform .25s ease;
}
.menu-tile:hover .menu-tile-image img{transform:translateY(-13px);}

.menu-tile-info{grid-column:2;display:flex;flex-direction:column;gap:2px;min-width:0;}
.menu-tile.no-image .menu-tile-info{grid-column:1;}
.menu-tile-info h3{margin:0;font-size:var(--font-menu-card-title);}
.menu-tile-style,.menu-tile-abv,.menu-tile-ibu{color:var(--ink-soft);font-size:.8rem;}

.menu-tile-desc{grid-column:1/3;margin:6px 0 0;color:var(--ink-soft);font-size:.85rem;}
.menu-tile-desc p{margin:0;}

/* Herkunft (z. B. "Brauerei XYZ") — nur bei Bieren, nur wenn gepflegt
   (vor allem bei Gastbieren relevant), zwischen Beschreibung und Preis. */
.menu-tile-origin{grid-column:1/3;margin:4px 0 0;color:var(--ink-soft);font-size:.8rem;}

.menu-tile-price{grid-column:1/3;margin-top:10px;display:flex;flex-direction:column;gap:2px;}
/* Menge bewusst normal, nur der Preis fett. */
.menu-tile-price-row{font-size:.82rem;display:flex;gap:6px;}
.menu-tile-vol{font-weight:400;color:var(--ink-soft);}
.menu-tile-amount{font-weight:700;}

/* Essen: kleine Fussnote ganz unten für Herkunft/Hersteller-Angabe und
   Allergene, falls gepflegt. */
.menu-tile-footnote{grid-column:1/3;color:var(--ink-soft);font-size:.72rem;margin-top:8px;}

/* 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:.9rem;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{grid-template-columns:minmax(0,42%) minmax(0,58%);column-gap:12px;padding:12px;}
  .menu-tile-badges{margin:-12px -12px 0 -12px;}
  .menu-tile-tap,.menu-tile-flag{padding:0 9px;font-size:.64rem;}
  .menu-section{padding-top:28px;}
}

@media(max-width:380px){
  /* Bei sehr kleinen Geräten mehr Raum für Namen/Preise: Bild etwas schmaler. */
  .menu-tile{grid-template-columns:minmax(0,38%) minmax(0,62%);column-gap:10px;}
}



/* 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 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;
}