/* ============================================================
   Göhler's Feinbäckerei — Main Stylesheet
   Clean, responsive, no-framework design system.
   ============================================================ */

/* --- 1. CSS Custom Properties (Design Tokens) ---------------------------- */
:root {

  /* Color Palette */
  --clr-bg:         #F7F0E5;      /* warm parchment          */
  --clr-surface:    #EDE3D2;      /* card & panel bg         */
  --clr-primary:    #C8102E;      /* brand red               */
  --clr-secondary:  #A3D977;      /* green accent            */
  --clr-gold:       #BEA45A;      /* gold / vintage trim     */
  --clr-text:       #3E2410;      /* deep warm brown (body)  */
  --clr-heading:    #5C350D;      /* richer brown (headings) */
  --clr-on-primary: #FFFFFF;

  /* Typography */
  --ff-display: 'Playfair Display', Georgia, serif;
  --ff-body:    'Inter', system-ui, sans-serif;

  /* Spacing Scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem ;
  --space-md: 1rem  ;
  --space-lg: 2rem  ;
  --space-xl: 4rem  ;

  /* Effects */
  --shadow-card:   0 8px 32px rgba(62, 36, 16, .10);
  --shadow-elev:   0 16px 48px rgba(62, 36, 16, .15);
  --glass-bg:      rgba(255, 255, 255, .35);
  --glass-border:  rgba(255, 255, 255, .45);
  --radius-sm:     0.5rem;
  --radius-md:     1rem;
  --radius-lg:     1.5rem;

  /* Transitions */
  --transition:    0.3s ease;

  /* Mobile-Menü-Toggle-Icons (Zero-JS, bg-Swap via :checked — P-10)          */
  /* Brezel = geschlossenes Menü; ✕ in Brand-Rot + Dreher = offenes Menü       */
  --icon-burger-pretzel: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2096%2080%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%236B4423%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20stroke-width%3D%2213%22%20d%3D%22M26%2057%20C9%2050%208%2013%2048%2011%20C88%2013%2087%2050%2070%2057%22%2F%3E%3Cpath%20stroke-width%3D%228%22%20%20d%3D%22M30%2052%20C46%2042%2058%2030%2074%2015%22%2F%3E%3Cpath%20stroke-width%3D%228%22%20%20d%3D%22M66%2052%20C50%2042%2038%2030%2022%2015%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --icon-burger-cross:   url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2040%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23C8102E%22%20stroke-width%3D%227.5%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M9%209%20L39%2031%22%2F%3E%3Cpath%20d%3D%22M39%209%20L9%2031%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");

  /* Header Shrink (Zero-JS, CSS Scroll-Driven Animations — siehe Dateiende) */
  --shrink-lg-h:   134px;    /* Logo-Höhe im Startzustand ≈ +67 % zum Alt-Design (~80 px); Pflicht war ≥ 128 px */
  --shrink-sm-h:   46px;     /* Shrink-Endhöhe (übernommener End-Zustand des Alt-Designs)                    */
  --shrink-end:    200px;    /* Viewport-Scrolltiefe, bei der der Shrink vollständig abgeschlossen ist        */
}


/* --- 2. Reset & Base -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--ff-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--clr-text);
  background: var(--clr-bg);
}

img { max-width: 100%; height: auto; display: block; }

a  { color: var(--clr-primary); text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }


/* --- 3. Utility Classes ------------------------------------------------ */
.container {
  max-width: 960px;      /* preserves old site width for content */
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.section-title {
  font-family: var(--ff-display);
  font-size: clamp(1.8rem, 4vw, 2.5rem);      /* fluid type   */
  color: var(--clr-heading);
  text-align: center;
  margin-bottom: var(--space-lg);
}

.section-title--gold::after {
  content: '';
  display: block;
  width: 6rem;
  height: 3px;
  background: var(--clr-gold);
  margin: var(--space-sm) auto 0;
  border-radius: 2px;
}

.lead {
  font-size: 1.15rem;
  max-width: 68ch;
  margin: 0 auto var(--space-md);
}


/* --- 4. Buttons ------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--ff-body);
  font-weight: 600;
  padding: .75rem 1.75rem;
  border-radius: 2rem;
  background: var(--clr-primary);
  color: var(--clr-on-primary);
  text-decoration-thickness: 0;
  transition: transform var(--transition), box-shadow var(--transition);
}

.btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: var(--shadow-elev);
}

.btn--sm {
  font-size: .85rem;
  padding: .55rem 1.2rem;
}


/* --- 5. Header / Navigation ------------------------------------------- */
.site-header {
  position: relative;        /* Sticky läuft jetzt über .site-headlock */
  z-index: 100;

  /* Glass effect nav bar */
  background: var(--glass-bg);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-bottom: 1px solid var(--glass-border);
}

/* ---- Sticky-Wrapper: hält Navigation + Ticker beim Scrollen fest ----------
   WICHTIG: Keines der Elemente in diesem Subtree darf overflow ≠ visible
   (sonst entstünde ein eigener scroller und scroll() würde sich darauf statt
   auf den Root-Viewport auflösen — die Shrink-Timeline wäre tot).
   Ticker & Header bleiben hier bewusst position:relative (Z-Layering),
   nur der WRAPPER ist sticky ⇒ Z-Break für das Hero-Darken dahinter. */
.site-headlock {
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav__container {
  display: flex;         /* align logo + nav */
  align-items: center;   /* center vertically */
  justify-content: space-between;
  max-width:1000px;
  margin: 0 auto;
  padding: var(--space-xs) var(--space-md);
}

/* ---- Logo Shine Wrapper -------------------------------------------- */
.logo-shine {
  position: relative;
  display: inline-block;
  overflow: hidden;       /* clip the shine sweep */
  border-radius: var(--radius-sm); /* abgerundete Ecken — keine harten Kanten */
}

/* Logo-Grundgröße (Mobile + Fallback): breitengesteuert, natürliches Seitenverhältnis.
   Desktop-Large-State & Scroll-Shrink leben im dedizierten Abschnitt „HEADER SHRINK“ (Dateiende). */
.logo-shine > img {
  width: min(85px, 23vw);
}

/* The sweeping light beam across the logo (edler, langsamer) */
.logo-shine::after {
  content: '';
  position: absolute;
  inset: 0;
  transform-origin: left center;
  background: linear-gradient(
    105deg,
    transparent   33%,
    rgba(255,255,255,.40) 48%,
    rgba(255,255,255,.60) 50%,
    rgba(255,255,255,.40) 52%,
    transparent   67%
  );
  /* Langsamere Dauer (6s statt 4s), genau 3 Wiederholungen */
  animation: shineSweep 6s ease-in-out;
  animation-iteration-count: 3;
}

@keyframes shineSweep {
  0%   { transform: translateX(-120%) skewX(-20deg); opacity: 0; }
  8%   { opacity: 1; }
  35%  { transform: translateX(220%) skewX(-20deg); opacity: 1; }
  55%  { transform: translateX(220%) skewX(-20deg); opacity: 0; }
  100% { opacity: 0; }
}

/* ---- Nav List (desktop) -------------------------------------------- */
.nav__list {
  list-style: none;
  display: flex;
  gap: var(--space-md);
}

.nav__list a {
  font-weight: 600;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--clr-heading);
  text-decoration-thickness: 0;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: border-color var(--transition), color var(--transition);
}

.nav__list a:hover,
.nav__list a:focus-visible {
  color: var(--clr-primary);
  border-bottom-color: var(--clr-gold);
}


/* ---- Mobile burger (CSS-only toggle) — P-10: Brezel statt Burger ---- */
.nav__burger { display: none; cursor: pointer; background: none; border: none; }
/* Balken unsichtbar bleiben (Label trägt das SVG-Icon, siehe <=768 px):  */
.nav__burger span { width: 26px; height: 3px; opacity: 0; }

/* hidden checkbox hack */
.nav__toggle { display: none; }

@media (max-width: 768px) {
  .nav__burger { display: flex; }

  .nav__menu {
    position: absolute;
    top: 100%; left: 0; right: 0;
    /* v1.2-6: fester Hintergrund, Blur reicht nicht für Lesbarkeit über Bildern */
    background: rgba(247, 240, 229, .98);   /* = --clr-bg mit 98 % Opaque */
    backdrop-filter: blur(3px) saturate(200%);
    -webkit-backdrop-filter: blur(3px) saturate(200%);
    border-bottom: 1px solid var(--glass-border);
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease, padding .3s ease;
  }

  .nav__toggle:checked ~ .nav__menu {
    padding: var(--space-md) 0;
    /* Inhaltsgenau gemessen Mobile @375 px: 4 Primär-Links (≈83 px) + Kapsel mit
       3 gestapelten Buttons (padding+Gap ≈ 169 px) + Trenn-/Innenabstände (26 px)
       ⇒ ≈ 300 px. 400 px gibt Luft für längere Linktexte/Zoom, ohne dass die
       260px-Grenze den „Anschlagbrett“-Button abschneidet (P-09). */
    max-height: 400px;
  }

  .nav__list {
    flex-direction: column;
    gap: var(--space-sm);
    align-items: center;
  }

  /* P-10 (16.10.): Brezel ⇄ ✕ — Label trägt das Icon, Klick dreht + tauscht */
  .nav__burger {
    width: 48px; height: 40px;          /* fester Touch-Target (~48 px)      */
    background: var(--icon-burger-pretzel) center/42px auto no-repeat;
    transition: transform 0.3s ease;
  }
  .nav__burger:hover   { transform: scale(1.12); }
  .nav__toggle:checked ~ .nav__burger {
    background-image: var(--icon-burger-cross);
    transform: rotate(-90deg)   /* Kreuz dreht an — Bewegung = "es geht zu" */
  }
  .nav__toggle:checked ~ .nav__burger:hover { transform: rotate(-90deg) scale(1.12); }
}


/* --- 6. Highlight Cards (Glasmorphismus) ----------------------------- */
.highlights {
  padding: var(--space-xl) 0;
}

.cards__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
}

/* Card */
.card {
  /* subtle glass panel */
  background: var(--glass-bg);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elev);
}

.card__image {
  aspect-ratio: 16 / 9;
  background-color: var(--clr-surface);
  background-size: cover;
  background-position: center;
}

.card__body {
  padding: var(--space-md) var(--space-lg) var(--space-lg);
}

.card__body h3 {
  font-family: var(--ff-display);
  font-size: 1.2rem;
  color: var(--clr-heading);
  margin-bottom: var(--space-sm);
}

.card__body p {
  font-size: .95rem;
  margin-bottom: var(--space-md);
  min-height: 3.3em;      /* keep card heights uniform */
}


/* --- 7. History Section ----------------------------------------------- */
.history {
  padding: var(--space-xl) 0;
  text-align: center;
}

.history .container p {
  max-width: 68ch;
  margin: 0 auto;
}


/* --- 8. Contact ------------------------------------------------------- */
.contact {
  padding: var(--space-xl) 0;
  background: linear-gradient(175deg, var(--clr-surface) 60%, transparent);
}

.contact__wrapper {
  display: grid;                 /* two columns on desktop */
  grid-template-columns: 1fr auto;/* flex to fit image     */
  gap: var(--space-lg);
  align-items: start;
}

.contact__info p {
  margin-bottom: var(--space-md);
}

.promo__img {
  max-width: min(300px, 70vw);   /* responsive promo image */
  width: 100%;
  transition: transform var(--transition);
}

.promo__img:hover {
  transform: scale(1.03);
}


/* --- 9. Footer -------------------------------------------------------- */
.site-footer {
  background: var(--clr-heading);
  color: var(--clr-surface);
  text-align: center;
  padding: var(--space-lg) var(--space-md);
}

.site-footer__links a {
  color: var(--clr-gold);
}

/* Copyright & Feedback-Zeile (dezent, unten) */
.site-footer__meta {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(190, 164, 90, .25);
  font-size: .75rem;
  color: rgba(237, 227, 210, .6);
  line-height: 1.8;
}

.site-footer__meta a {
  color: rgba(190, 164, 90, .8);
}


/* --- 10. Responsive breakpoints --------------------------------------- */
@media (max-width: 768px) {

  .contact__wrapper {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .promo__img {
    align-self: center;
  }
}


/* --- 11. Smooth load-in animation -------------------------------------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.cards__grid > * {
  animation: fadeInUp .6s ease forwards;
  animation-delay: calc(var(--card-index, 0) * .15s);
}


/* --- 12. Scrollbar customisation ------------------------------------- */
::-webkit-scrollbar             { width: 8px; }
::-webkit-scrollbar-track       { background: var(--clr-bg); }
::-webkit-scrollbar-thumb       { background: var(--clr-gold); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--clr-heading); }

/* ============================================================
   HEADER SHRINK — Zero-JS · CSS Scroll-Driven Animations (v2, empirisch validiert)
   ------------------------------------------------------------
   BELEGBASIERTE LEKTIONEN (Playwright/Gegenprobe 27.08., Chromium 13x):
     • SDA funktioniert einwandfrei: padding / opacity an .ticker & ::after
       interpolieren über dieselbe scroll()-Timeline zuverlässig.
     • Engine-Quirk: height/width per scroll()-Timeline animiert an einem
       REPLACED (<img>) Element wird ignoriert — die "FINALE" v1 (shrinkLogo @ img)
       war daher TOTS, selbst mit korrekter Spezifität & fill both. Width/Fill-Both
       konnten ausgeschlossen werden; es ist ein Engine-Verhalten für Replace-Elemente.
     • Lösung R3: Height läuft an der GENTISCHEN .logo-shine-Ankerbox (Layout-Box),
       das Logo darin füllt die Box per height:100%; width:auto — Seitenverhältnis
       bleibt verzerrungsfrei erhalten (Messung: 141,5×134 → ~48,6×46px ≈ Skala .343).
   Fortschrittsquelle : animation-timeline: scroll() (Root-Viewport) über die ersten
                        --shrink-end px; fill both hält Endgröße dauerhaft.
   Fallback           : @supports-Garde ⇒ Browser ohne Scroll-Timelines sehen nur den
                        statischen LARGE Startzustand (reguläre Base-State unten).
                        prefers-reduced-motion lässt das Shrink stillstehen.
   ============================================================ */

@keyframes shrinkLogo {          /* Höhe der .logo-shine Ankerbox; img folgt per 100%    */
  from { height: var(--shrink-lg-h); }
  to   { height: var(--shrink-sm-h); }
}

@keyframes shrinkTickerBand {    /* Band verjüngt sich mit dem Logo (nur Padding — der
                                    Text-Raster .ticker__text hat seine eigene font-size) */
  from { padding-block: var(--space-xs); }   /* 4px oben & unten  */
  to   { padding-block: .125rem; }           /* 2px   oben & unten */
}

@keyframes fadeGoldLine {        /* Gold-Akzentlinie markiert den kompakten Zustand             */
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (min-width: 769px) {

  /* --- Statischer LARGE Start-State (ALLEN Browsern, nicht nur Timeline-fähigen) ------ */
  .site-headlock .site-header .logo-shine {
    height: var(--shrink-lg-h);   /* Box = Shrink-Anker; img füllt sie → identisch zu v1-Optik */
  }

  /* Fallback für Browser OHNE Scroll-Timelines (z. B. ältere Safari/iOS): Höhe am IMG selbst,
     weil dort .logo-shine > img noch nicht height:100% kennt — gleiche Optik, gleiches Verhältnis. */
  .site-headlock .site-header .logo-shine > img {
    height: var(--shrink-lg-h);
    width: auto;
  }

  @supports (animation-timeline: scroll()) {

    /* --- LOGO: Höhe der ANKERBOX animiert (generisches Element!) ------------------------
       Empirisch belegt: Chromium ignoriert height/width-Dimension-Animationen einer
       scroll()-Timeline an <img> (Replaced Element) — dieselbe Timeline lässt aber
       padding (.ticker), opacity (::after) und Box-Höhen an gewöhnlichen Divs/Ankern
       laufen. Das Logo füllt die animierte Box per height:100%; width:auto ⇒ verzerrungsfrei. */
    .site-headlock .site-header .logo-shine {
      animation-name: shrinkLogo;
      animation-duration: auto;                          /* von der Timeline, nicht vom Uhrwerk   */
      animation-timing-function: cubic-bezier(.45, 0, .55, 1); /* smoothstep ≈ früherer JS-Easing     */
      animation-iteration-count: 1;
      animation-fill-mode: both;                         /* hält Endgröße nach Range Ende dauerhaft */
      animation-timeline: scroll();                      /* Root Viewport = document-scrolling Elem.  */
      animation-range: 0px var(--shrink-end);            /* erste 200 px — px sind hier STABIL        */
    }

    .site-headlock .site-header .logo-shine > img {
      height: 100%;    /* Logo spickt der animierten Ankerbox an (verdrängt die statische Base-Höhe) */
      width: auto;     /* Seitenverhältnis bleibt erhalten                                             */
    }

    /* --- TICKER-Band: padding-block an .ticker (einziger Eigenwert, kein Gegenpart) ---- */
    .site-headlock > .ticker {
      animation-name: shrinkTickerBand;
      animation-duration: auto;
      animation-timing-function: cubic-bezier(.45, 0, .55, 1);
      animation-iteration-count: 1;
      animation-fill-mode: both;
      animation-timeline: scroll();
      animation-range: 0px var(--shrink-end);
    }

    /* --- Gold-Akzentlinie: fade-in im unteren Bereich derselben Range ------------- */
    .site-headlock .site-header::after {
      content: '';
      position: absolute; left: 0; right: 0; bottom: -1px;
      height: 2px;
      background: var(--clr-gold);
      animation-name: fadeGoldLine;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-iteration-count: 1;
      animation-fill-mode: both;
      animation-timeline: scroll();
      animation-range: calc(var(--shrink-end) * .6) var(--shrink-end);
    }
  }

  /* Barrierefreiheit: bei reduced-motion bleibt das Logo statisch im (Large-)Startzustand */
  @media (prefers-reduced-motion: reduce) {
    .site-headlock .site-header .logo-shine,
    .site-headlock > .ticker { animation-name: none; }
  }
}

/* --- Login-Modal: Pflichtfeld-Hinweis & dezenter Registrieren-Link -------- */
.login-hint {
  margin-top: var(--space-sm);
  font-size: .78rem;
  line-height: 1.5;
  color: rgba(62, 36, 16, .55);
}

.reg-cta {
  padding: var(--space-md) 0 0;
  text-align: center;
  font-size: .85rem;
  color: rgba(62, 36, 16, .7);
}

/* bewusst unterstrichlos & in Gold — bleibt hinter dem Einloggen-Button zurück */
.reg-cta a {
  color: var(--clr-gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), opacity var(--transition);
}

.reg-cta a:hover,
.reg-cta a:focus-visible {
  border-bottom-color: var(--clr-gold);
  opacity: .85;
}


/* ============================================================
   GF Oeffnungszeiten Widget -- B-Leiste + C-Karte  #GF_OEP_CSS_V2
   Zero-JS: checkbox-Hack per Geschwister-Chains. NICHTS mit
   overflow != visible im Subtree der .site-headlock (killt sonst
   scroll()-Shrink-Timeline) — deshalb diese CSS-Variante leicht
   anders als das Mockup (dort nutze ich .overflow:hidden).
   ============================================================ */
.oep-input{position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;opacity:0;pointer-events:none}

/* B — Standaleiste, klebt direkt unter der gold-Topper-Ticker */
.oep-wrap.stripe{background:var(--clr-surface);border-top:2px solid var(--clr-gold)}
.statusbar.oep-bar{display:flex;align-items:center;flex-wrap:wrap;gap:.55rem;padding:.6rem 1rem;border-bottom:1px solid rgba(190,164,90,.38);max-width:none;margin:0 auto}

.sb-punkt{width:.82rem;height:.82rem;border-radius:50%;background:#3FA96B;flex:none;box-shadow:0 0 0 .18rem rgba(63,169,107,.14)}
.sb-punkt.pnt-geschlossen{background:var(--clr-primary);box-shadow:0 0 0 .18rem rgba(200,16,46,.13)}

.sb-text{font-family:'Inter',system-ui,sans-serif;font-size:.92rem;font-weight:500;color:#5C350D;letter-spacing:.01em;line-height:1.3;margin-right:auto;display:block}
.sb-text em{display:block;font-style:normal;font-weight:700;color:#F5EEDC;font-size:1.05rem;margin-top:.12rem}

.open-btn{cursor:pointer;flex:none;display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .85rem;border-radius:999px;background:linear-gradient(160deg,#CEB36A 0%,#BEA45A 62%);color:#FFF;font-weight:700;font-size:.85rem;box-shadow:inset 0 1px rgba(255,255,255,.4), inset 0 -2px rgba(93,68,15,.2);filter:drop-shadow(0 1px .15rem rgba(87,58,12,.2));transition:transform .12s}
.open-btn:hover{transform:translateY(-.1rem)}
.open-btn .chev{font-size:1.05rem;line-height:1;display:inline-block;transform:translateY(-.05rem);transition:transform .25s}


/* C — Plan-Karte (versteckt; entpackt per :checked der Checkbox) */
.overlay.oep-overlay{display:block;padding:.65rem 0 .85rem}
#plan-toggle:not(:checked) ~ .oep-wrap.stripe > .overlay.oep-overlay{display:none}
/* (V-Slide 25.10.: oep-wrap.stripe ist im DOM fort; Ziel = .oep-slide ---- */
#plan-toggle:checked ~ .oep-slide > .statusbar.oep-bar{border-bottom-color:rgba(190,164,90,.75)}
#plan-toggle:checked ~ .oep-slide .open-btn .chev{transform:rotate(-180deg) translateY(-.05rem)}

.card-c{background:#3E2410;border-radius:.75rem;padding:1rem 1.1rem;color:#F1EAD9;box-shadow:var(--shadow-elev);width:min(760px,100%);margin:0 auto}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap;margin-bottom:.35rem}
.modal-head h2{font-family:'Playfair Display',Georgia,serif;color:#F5EEDC;font-size:1.08rem;font-weight:600;margin:0;letter-spacing:.02em}
.ausblenden-lb{cursor:pointer;font-family:'Inter',system-ui,sans-serif;color:#D9B27A;font-size:.82rem;display:inline-flex;align-items:center;gap:.35rem;border-bottom:1px solid transparent;transition:border-color .15s}
.ausblenden-lb:hover{border-bottom-color:#D9B27A}

.plan-body{display:flex;flex-direction:column;gap:.4rem;margin-top:.3rem}
.tabrow{display:flex;align-items:center;gap:.55rem;padding:.34rem .65rem;background:rgba(10,6,3,.28);border-radius:.4rem;font-family:'Inter',system-ui,sans-serif;font-size:.9rem;color:#EFE6D2}
.tabrow span{margin-right:auto}
.tabrow > *:last-child{margin-right:0;margin-left:auto}
.tabrow.aktiv{background:rgba(190,164,90,.3);outline:1px solid rgba(190,164,90,.55);color:#FFF;font-weight:600}
.today-dot{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:var(--clr-secondary);box-shadow:0 0 .3rem rgba(163,217,119,.7);flex:none}

.monat-hinweis{margin-top:1rem;padding:.8rem .95rem;background:rgba(190,164,90,.16);border-left:.28rem solid var(--clr-gold);font-size:.9rem;line-height:1.55;color:#F3EAD6;border-radius:0 .45rem .45rem 0}
.mh-line{display:flex;justify-content:space-between;gap:.7rem;margin-top:.4rem;font-family:'Inter',system-ui,sans-serif;flex-wrap:wrap}
.mh-line span:first-child{opacity:.82}

.naechste{margin-top:1.05rem;padding:.9rem 1rem .65rem;background:rgba(9,6,3,.4);border-radius:.7rem;border:1px solid rgba(190,164,90,.4)}
.nx-label{font-family:'Inter',system-ui,sans-serif;color:#D9B27A;font-size:.68rem;text-transform:uppercase;letter-spacing:.13em;margin:0 0 .25rem}
.nx-wert{color:#FFF;font-weight:700;font-size:1.02rem;margin:0 0 .7rem}
.nx-ziffern{display:flex;gap:.6rem}
.nzc{text-align:center;background:rgba(190,164,90,.18);border-radius:.55rem;padding:.42rem .8rem;min-width:3.6rem}
.nzc b{display:block;font-size:1.3rem;line-height:1;color:#F5EEDC;font-variant-numeric:tabular-nums}
.nzc span{font-size:.62rem;text-transform:uppercase;letter-spacing:.09em;color:#D9B27A}

@media (max-width: 640px){
  .statusbar.oep-bar{gap:.5rem;padding-right:1.35rem}
  .sb-text em{font-size:.98rem}
  .open-btn{font-size:.78rem;padding:.28rem .7rem}
  .card-c{padding:.85rem .9rem}
  .nzc{min-width:3rem;padding:.36rem .55rem}
}


/* ============================================================
   GF Oeffnungszeiten Widget -- V4 Optik (Auftrag: mittig / lesbar / hell + kuerzer) #GF_OEP_CSS_V4
   NUEINE Mechanik-Aenderung: die :checked-Ketten aus V2 bleiben. Alle Regeln hier sind
   reine Ueberarbeitungen des Aussehens, mit gleicher Hohe = gleicher Precedence wie V2, aber spaeter in der Datei.
   ============================================================ */

/* P1 -- B-Leiste (Status + Button) mittig, statt Text links/Button rechts gebuendelt */
.statusbar.oep-bar{justify-content:center}
.sb-text{margin-right:0}

/* P2 -- Countdown-Zeile unter "Jetzt geöffnet/geschlossen": war weiss auf hellgrau.
   Jetzt dunkler warmer Ton gegen die helle Leisten-Fläche (#EDE3D2). */
.sb-text em{color:#7A4210}

/* P3a -- Card: extrem-dunkles Braun #3E2410 -> helles Creme in Hauptseiten-Ton, ~halbe Breite */
.card-c{background:#FBF6EC;border:1px solid rgba(92,53,13,.2);padding:.85rem 1rem;color:#3E2410;width:min(470px,100%);box-shadow:var(--shadow-card)}
.card-c .modal-head h2{color:#3E2410;font-size:1.02rem}
.card-c .ausblenden-lb{color:#8A5A1C}
.card-c .ausblenden-lb:hover{border-bottom-color:#8A5A1C}

/* P3b -- Wochentags-Tabelle hell + Zeilen mittig */
.card-c .tabrow{background:rgba(62,36,16,.07);color:#3E2410;justify-content:center;text-align:center;margin-top:.25rem;font-size:.92rem}
.card-c .tabrow span{margin-right:0}
.card-c .tabrow > *:last-child{margin-left:0}
.card-c .tabrow.aktiv{background:rgba(190,164,90,.38);color:#3E2410;font-weight:700;outline:1px solid rgba(155,124,44,.7)}

/* P3c -- Ausnahmen-Block hell */
.card-c .monat-hinweis{background:rgba(190,164,90,.16);color:#3E2410;margin-top:.8rem;padding:.65rem .8rem}
.card-c .mh-line b{display:inline;color:#8A5A1C;font-weight:700}

/* P3d -- "Naechste Oeffnung"-Ziffern hell, Ziffernbloecke gut kontrastiert */
.card-c .naechste{background:rgba(62,36,16,.07);border-color:rgba(190,164,90,.55);margin-top:.85rem;padding:.75rem .9rem .6rem}
.card-c .nx-label{color:#8A5A1C;margin-bottom:.2rem}
.card-c .nx-wert{color:#3E2410;font-size:1rem;margin-bottom:.55rem}
.card-c .nzc{background:rgba(255,255,255,.7)}
.card-c .nzc b{color:#A66F0E}
.card-c .nzc span{color:#8A5A1C}

/* P3e -- kompakter: kuerzerer Abstand zwischen Teilblckaen */
.card-c .plan-body{margin-top:.2rem}

/* ============================================================
   V4 b: LIVE-Effeekte (15.10., Martin OK): (a) Status-Punkt pocht mit Sonar-Ring,
   (b) Minuten-Ziffern in der Countdown-Card "blinzt" sekündlich sanft.
   Reine Optik + Key-frames, KEINE Zeit-Funktion: die Zahlen sind weiterhin PHP-Stand
   vom Seitenladen; nur die Bewegung lebt. Reduced-motion aus respektiert? Die 2
   Keyframe-Blöcke unten werden im reduce-Media (unten) abgeblasen -> dann statisch. #GF_OEP_CSS_V4B_LIVE
   ============================================================ */

/* --- (a) Status-Punkt: Pochen + Sonar-Welle ------------------------------
   ::after = Ring, der ausgehend vom Punkt groß wird und ausläuft (Sonar).
   Animation-Länge läuft beide auf 2s; Ring startet gleichzeitg zum Poch.        */
.sb-punkt{position:relative}
.sb-punkt::after{
  content:"";position:absolute;left:50%;top:50%;width:1.05rem;height:1.05rem;margin:-.525rem 0 0 -.525rem;
  border-radius:50%;border:.16rem solid #3FA96B;opacity:0;pointer-events:none;
  animation:oep-sonar 2s ease-out infinite;
}
.sb-punkt.pnt-geschlossen::after{border-color:#F87171;} /* geschlossene-Ring sichtbar gegen heller Fläche */
@keyframes oep-sonar{
  0%   {transform:scale(.55);opacity:.90}
  55%  {transform:scale(2.6);opacity:0}
  100% {transform:scale(2.6);opacity:0}
}
.sb-punkt{animation:oep-dotbeat 2s ease-in-out infinite}
@keyframes oep-dotbeat{
  0%,45%,100% {transform:scale(1)}
  18%         {transform:scale(1.38)}
  30%         {transform:scale(.94)}
  36%         {transform:scale(1.08)}
}

/* --- (b) Countdown-Sekunden-Blitzer ---------------------------------------
   Minuten-Wert pultsanft jede Sekunde nach (opacity 1 -> .5 -> 1), Tag/Werte bleiben stabil,
   die Min-Ziffer "atmet" => sekündlich sichtbares Leben ohne JS. Die kleinen Ziffernblöcke in der Card-C
   blinzen mit gleichem Tempo: alle 3 Blöcke zusammen, nicht einzeln (kein Flackern-Chaos). */
.nx-ziffern .nzc:nth-child(3) b{animation:oep-minpulse 1s ease-in-out infinite}
@keyframes oep-minpulse{0%,100%{opacity:1}50%{opacity:.42}}

/* Reduced-Motion: alle drei Animationen ausblenden, Punkt bleibt einfach rund da. */
@media (prefers-reduced-motion: reduce){
  .sb-punkt,.sb-punkt::after,.nx-ziffern .nzc:nth-child(3) b{animation:none}
  .sb-punkt::after{opacity:0}
}


/* ============================================================
   GF Oeffnungszeiten Widget -- V-Slide (25.10., Endform nach genehmigtem
   Mockup Vorschlag_B_C_Slide.html) #GF_OEP_CSS_VSLIDE
   ------------------------------------------------------------
   WESSENTLICHE VERSCHIEBUNG VON V2: .oep-slide sitzt in index.php
   BEHIND .site-headlock. Nur SO duerfen overflow:hidden-Anteile im
   Slide-Grid kranken (P-01: overflow!=visible in headlock tötet die
   scroll()-Timeline). Ergebnis: Plan-Karte SCHWEBT ueber dem Hero,
   slidet per Jalousie-Gleiten ein (OFFNEN lang ~1,05s mit Widerstand +
   Einarst-Sacken; SCHLIESSEN knapp 0,35s); links/rechts bleibt Seiten-
   inhalt sichtbar und gleitet NICHT. Countdown-Kacheln wandern aus der
   Karte in die B-Leiste (wie im genehmigten Mockup).
   ============================================================ */

/* --- Schaene des Wrappes: volle Breite wie der Ticker oberhalb --------- */
.oep-slide{position:relative;background:var(--clr-surface);border-top:2px solid var(--clr-gold)}
.oep-slide .statusbar.oep-bar{position:relative;background:none;border-bottom-color:rgba(190,164,90,.55);display:flex;flex-wrap:wrap;justify-content:center;padding-left:.9rem;padding-right:.9rem}

/* --- Leisten-Inhalt als EIN Block in der Mitte (Fokus-Zentrierung 25.10.,
   Phase F → G): Punkt · Satz · Kacheln · Button nebeneinander, als ein
   zentriegesetztes Bündel — der Legacy-V2-Trick "Satz füllt bis zum
   rechten Button" (margin-right:auto) ist im Slide bewusst tot --------- */
.oep-slide .statusbar.oep-bar > *{position:static}
.oep-slide .sb-text{line-height:1.3;margin-right:0}

/* --- Countdown-Kacheln in der Leiste (kompakt, Ziffern bleiben lesbar) -- */
.oep-bar-tiles{display:flex;gap:.3rem;margin-left:.55rem}
.oep-bar-tiles .nzc{background:#fff;border:1px solid rgba(92,53,13,.25);border-radius:.35rem;padding:.18rem .4rem;min-width:2.7rem;text-align:center;display:flex;flex-direction:column;line-height:1.05}
.oep-bar-tiles .nzc b{font-family:'Playfair Display',Georgia,serif;font-size:1.02rem;color:#5C350D;line-height:1.1}
.oep-bar-tiles .nzc span{font-size:.52rem;text-transform:uppercase;letter-spacing:.08em;color:#8A6D3B}

/* --- Schwebende Klappe (Jalousie) --------------------------------------- */
@supports (grid-template-rows: 1fr){
  .klappe.oep-klappe{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s cubic-bezier(.4,0,.2,1)}
  .oep-klappe>.inner{overflow:hidden;min-height:0}
}
/* OFFNEN = ziehen mit Widerstand (~1,05 s + Anlauf), dann Ausgleiten. */
#plan-toggle:checked~.oep-slide .klappe.oep-klappe{grid-template-rows:1fr;transition:grid-template-rows 1.05s cubic-bezier(.68,.03,.32,1) .12s}

.klappe.oep-klappe{position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:min(470px,calc(100% - 32px));z-index:6;pointer-events:none}
#plan-toggle:checked~.oep-slide .klappe.oep-klappe{pointer-events:auto}

/* --- Karte: Optik-Zwiling der Leiste (V4-Creme) mit tiefem Schatten ------
   Besser ueber dem Hero schwebte, die alte --shadow-card reicht nicht: */
.oep-slide .card-c{background:#FBF6EC;border:1px solid rgba(92,53,13,.28);color:#3E2410;width:min(470px,calc(100% - 24px));margin:0 auto;box-shadow:0 18px 60px rgba(0,0,0,.45)}

/* --- Einarst-Sacken der Karte (aus dem genehmigten Mockup) --------------- */
@keyframes oep-jalousie-einrasten{
  0%   {transform:translateY(-16px);opacity:.45}
  55%  {transform:translateY(3px); opacity:1}
  78%  {transform:translateY(-2px)}
  100% {transform:translateY(0)}
}
#plan-toggle:checked~.oep-slide .card-c{animation:oep-jalousie-einrasten .9s cubic-bezier(.3,.7,.4,1) .5s both}

/* --- "Naechste Oeffnung"-Panel in der Karte: Label + Wert + Hinweis ------ */
.oep-slide .naechste small{font-size:.62rem;color:#8A5A1C;opacity:.85;font-weight:400}
.oep-slide .statusbar.oep-bar{padding-top:.45rem;padding-bottom:.45rem}

/* --- Reduced-Motion: Klappe, Sacken + Chevron-Drehung aus ---------------- */
@media (prefers-reduced-motion: reduce){
  .klappe.oep-klappe,.open-btn .chev{transition:none}
  #plan-toggle:checked~.oep-slide .card-c{animation:none}
}

/* --- Schmales Format (Handy): Tafel wird zum normalen Baustein im Seitenlauf,
   wie im genehmigten Mockup -- position:static, Gleiten bleibt in der Flow-Hoehe */
@media (max-width: 640px){
  .klappe.oep-klappe{position:static;transform:none;width:min(470px,calc(100% - 32px));margin:0 auto}
  .oep-bar-tiles{gap:.25rem}
  /* Kleine Bar (Phase G): Satz+Kacheln oben, Button darunter — KÜRZER als
     volle Breite und ZENTRIERT (weder links hängend noch Full-Bleed),
     großzügige Griffzone -------------------------------------------------- */
  .oep-slide .statusbar.oep-bar{flex-wrap:wrap;justify-content:center;padding-left:.9rem;padding-right:.9rem}
  .oep-slide .statusbar.oep-bar > label.open-btn{position:static;transform:none;display:flex;justify-content:center;align-items:center;width:min(78%,14rem);margin:.45rem auto 0;font-size:.92rem;padding:.45rem 1.1rem}
}