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