/* ============================================================
   BROT-KONGRESS: Main Stylesheet
   Basiert auf dem Prototyp aus 02_Prototyp/index.html.
   Alle Design-Tokens sind zusaetzlich in theme.json gespiegelt,
   damit der Gutenberg-Editor sie kennt.
   ============================================================ */

:root {
  --bg: #F7F2EA;
  --bg-elevated: #FFFFFF;
  --ink: #2A2621;
  --ink-soft: #5A5148;
  --accent: #C74A1E;
  --accent-hover: #A63E19;
  --sage: #5A6B3E;
  --border: #E5DDD1;
  --shadow: 0 2px 8px rgba(42, 38, 33, 0.06);
  --shadow-lg: 0 8px 32px rgba(42, 38, 33, 0.12);
  --radius: 4px;
  --radius-lg: 8px;
  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --max-width: 1240px;
  --gutter: 24px;
}

/* --------- Reset & Basics --------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.5em;
  color: var(--ink);
}
h1 { font-size: clamp(2.5rem, 5vw, 4rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); letter-spacing: -0.01em; }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--accent); }
img { max-width: 100%; height: auto; display: block; }

/* --------- Utilities --------- */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: 80px 0; }
.section-eyebrow { font-family: var(--font-sans); font-weight: 500; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sage); margin-bottom: 8px; display: block; }
.section-title { margin-bottom: 12px; }
.section-sub { color: var(--ink-soft); margin-bottom: 40px; font-size: 1.05rem; max-width: 620px; }
.screen-reader-text {
  position: absolute !important; clip: rect(1px,1px,1px,1px);
  clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden;
  padding: 0; margin: -1px; word-wrap: normal !important;
}
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 999; padding: 12px 20px; background: var(--accent); color: white; clip: auto; clip-path: none; width: auto; height: auto; }

/* --------- Buttons --------- */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; font-family: var(--font-sans); font-weight: 600; font-size: 1rem; border-radius: var(--radius); transition: all 0.2s ease; border: none; cursor: pointer; text-decoration: none; }
.btn-compact { padding: 10px 20px; font-size: 0.9rem; }
.btn-primary { background: var(--accent); color: white; }
.btn-primary:hover { background: var(--accent-hover); color: white; transform: translateY(-1px); }
.btn-secondary { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn-secondary:hover { background: var(--ink); color: white; }
.btn-ghost { background: transparent; color: var(--ink); padding: 12px 0; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
.btn-ghost:hover { color: var(--accent); }
.btn-on-dark { background: var(--accent); color: white; }
.btn-on-dark:hover { background: var(--accent-hover); color: white; }

/* --------- Header --------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247, 242, 234, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { font-family: var(--font-serif); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.01em; color: var(--ink); display: flex; align-items: center; }
/* Logo-Darstellung. Das freigestellte Logo hat ein Verhältnis von etwa 1,2:1,
   bei 60px Höhe wird es also rund 73px breit. Das trägt in der Kopfzeile gut. */
.logo img { max-height: 60px; max-width: 240px; width: auto; height: auto; object-fit: contain; }
@media (max-width: 700px) {
    .logo img { max-height: 46px; max-width: 170px; }
}
.nav { display: flex; }
.nav-menu { list-style: none; display: flex; gap: 28px; margin: 0; padding: 0; }
.nav-menu a { font-weight: 500; font-size: 0.95rem; position: relative; padding: 4px 0; }
.nav-menu a::after { content: ''; position: absolute; bottom: -6px; left: 0; width: 0; height: 2px; background: var(--accent); transition: width 0.2s; }
.nav-menu a:hover::after, .nav-menu .current-menu-item a::after { width: 100%; }
.header-actions { display: flex; align-items: center; gap: 16px; }
.social-mini { display: flex; gap: 12px; }
.social-mini a { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); transition: all 0.2s; }
.social-mini a:hover { background: var(--ink); color: white; border-color: var(--ink); }
.social-mini svg { width: 16px; height: 16px; }

/* --------- Klappmenue (Burger) ---------
   Umschaltpunkt 980px, gemessen am 10. August 2026: Die einreihige Kopfzeile
   braucht 971 Pixel (Logo 72 + Navigation 493 + Aktionen 310 + Luecken 48 +
   Innenabstand 48). Der vorhandene 900er-Haltepunkt waere zu spaet gewesen,
   zwischen 900 und 971 haetten sich die Menuepunkte gedraengt.

   display:contents oberhalb des Haltepunkts sorgt dafuer, dass der Klappbereich
   layouttechnisch nicht existiert. Das Desktop-Layout bleibt unveraendert. */
.nav-toggle { display: none; }
.header-collapse { display: contents; }

.nav-toggle-balken,
.nav-toggle-balken::before,
.nav-toggle-balken::after {
  display: block; width: 20px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.nav-toggle-balken { position: relative; }
.nav-toggle-balken::before,
.nav-toggle-balken::after { content: ''; position: absolute; left: 0; }
.nav-toggle-balken::before { top: -6px; }
.nav-toggle-balken::after  { top: 6px; }

/* Offen: aus den drei Balken wird ein Kreuz. Gesteuert ueber aria-expanded,
   damit Aussehen und Vorlesesoftware nie auseinanderlaufen koennen. */
.nav-toggle[aria-expanded="true"] .nav-toggle-balken { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-balken::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-balken::after  { transform: translateY(-6px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .nav-toggle-balken,
  .nav-toggle-balken::before,
  .nav-toggle-balken::after { transition: none; }
}

@media (max-width: 980px) {
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 44px; padding: 9px 14px;   /* 44px = bequem mit dem Daumen */
    background: none; color: var(--ink);
    border: 1.5px solid var(--border); border-radius: var(--radius);
    font-family: var(--font-sans); font-weight: 600; font-size: 0.9rem;
    cursor: pointer;
    /* Sonst markiert ein Doppeltipp auf dem Handy das Wort "Menü". */
    -webkit-user-select: none; user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-toggle:hover { border-color: var(--ink); }
  .nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* Der Klappbereich haengt unter der Kopfzeile. Bezugspunkt ist .site-header,
     das durch position:sticky bereits positioniert ist. */
  .header-collapse {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    padding: 4px 24px 24px;
    max-height: calc(100vh - 100%);
    overflow-y: auto;
  }
  .header-collapse.offen { display: block; }

  /* .nav ist ein Flex-Container. Ohne die eigene Breitenangabe naehme die
     Liste darin nur Inhaltsbreite an, und die Trennlinien endeten mitten
     im Nichts hinter dem laengsten Wort. */
  .nav { width: 100%; }
  .nav-menu { width: 100%; flex-direction: column; gap: 0; }
  .nav-menu li { border-bottom: 1px solid var(--border); }
  .nav-menu a { display: block; padding: 15px 0; font-size: 1.05rem; }
  .nav-menu a::after { display: none; }   /* Unterstrich ergibt hier keinen Sinn */
  .nav-menu .current-menu-item > a { color: var(--accent); }

  .header-actions { flex-direction: column; align-items: stretch; gap: 18px; padding-top: 22px; }
  .social-mini { justify-content: center; }
  .header-actions .btn { justify-content: center; }
}

/* --------- Hero --------- */
.hero { padding: 80px 0 100px; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; }
.hero-eyebrow { display: inline-block; background: var(--sage); color: white; padding: 6px 14px; border-radius: 20px; font-size: 0.8rem; font-weight: 500; margin-bottom: 24px; }
.hero-sub { font-size: 1.2rem; color: var(--ink-soft); margin-bottom: 36px; max-width: 520px; }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-video-card { background: var(--bg-elevated); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.hero-video-thumb { position: relative; aspect-ratio: 16/9; background: #1a1a1a; overflow: hidden; }
.hero-video-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-video-badge { position: absolute; top: 16px; left: 16px; background: rgba(255,255,255,0.95); color: var(--ink); padding: 8px 14px; border-radius: 4px; font-size: 0.85rem; font-weight: 600; }
.hero-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68px; height: 68px; background: rgba(255,255,255,0.95); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent); }
.hero-video-info { padding: 24px; }
.hero-video-info h3 { margin-bottom: 8px; }
.hero-video-info .expert { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }

/* --------- Sauerteig-Sektion --------- */
.sauerteig { background: var(--ink); color: var(--bg); padding: 100px 0; }
.sauerteig .section-eyebrow { color: #C9D4A8; }
.sauerteig h2 { color: var(--bg); margin-bottom: 20px; }
.sauerteig .section-sub { color: rgba(247, 242, 234, 0.75); }
.sauerteig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.sauerteig-list { list-style: none; margin: 32px 0 40px; padding: 0; }
.sauerteig-list li { padding: 14px 0; border-bottom: 1px solid rgba(247, 242, 234, 0.15); display: flex; align-items: center; gap: 16px; transition: color 0.2s; cursor: pointer; }
.sauerteig-list li:hover { color: var(--accent); }
.sauerteig-list li::before { content: '→'; color: var(--sage); font-size: 1.2rem; }
.sauerteig-visual { position: relative; aspect-ratio: 4/5; background: #2A2621; border-radius: var(--radius-lg); overflow: hidden; }
/* Der Kasten ist hochkant (4:5), das Kopfbild ist quer. Sichtbar sind also
   nur 45% der Bildbreite. Ohne object-position schneidet der Browser mittig,
   und bei unserem Motiv steht dort nur das Tuch. 90% rueckt das Glas mit dem
   Starter in die Mitte. Wird das Bild ausgetauscht, ist dieser Wert zu pruefen. */
.sauerteig-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 90% center; opacity: 0.9; }

/* --------- Video-Grid --------- */
.videos { padding: 100px 0; }
.videos-header { display: flex; justify-content: space-between; align-items: end; margin-bottom: 48px; flex-wrap: wrap; gap: 20px; }
.videos-header > div { max-width: 620px; }
.video-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.video-card { background: var(--bg-elevated); border-radius: var(--radius-lg); overflow: hidden; transition: all 0.3s ease; display: block; color: inherit; }
.video-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: inherit; }
.video-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #1a1a1a; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-thumb::after { content: '▶'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; background: rgba(0,0,0,0.7); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; padding-left: 4px; }
.video-info { padding: 20px; }
.video-info h4 { margin-bottom: 8px; line-height: 1.3; }
.video-meta { color: var(--ink-soft); font-size: 0.85rem; display: flex; gap: 12px; align-items: center; }
.video-meta .expert-name { color: var(--accent); font-weight: 500; }
.video-format-label { display: inline-block; font-size: 0.75rem; color: var(--sage); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; margin-bottom: 6px; }

/* --------- Experten --------- */
.experten { padding: 100px 0; background: var(--bg-elevated); }
/* auto-fill statt auto-fit in den Kartenrastern.
   auto-fit zieht leere Spalten auf Breite 0 zusammen und verteilt den Platz
   auf die vorhandenen Karten. Bei zwei Buechern wurden daraus zwei Kacheln
   von je 608 Pixeln, bei einem einzelnen Rezept eine Karte ueber die volle
   Seitenbreite. auto-fill behaelt die Spalten und laesst rechts Platz.
   Die kleinen Datenraster (rezept-facts, buch-facts, preset-grid,
   rezept-inputs) bleiben bewusst auf auto-fit, dort ist das Dehnen richtig. */
.experten-scroll { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 24px; margin-top: 48px; }
.expert-card { text-align: center; padding: 24px 16px; border-radius: var(--radius-lg); transition: all 0.3s; cursor: pointer; text-decoration: none; color: inherit; display: block; }
.expert-card:hover { background: var(--bg); transform: translateY(-4px); color: inherit; }
.expert-photo { width: 140px; height: 140px; border-radius: 50%; margin: 0 auto 20px; background: linear-gradient(135deg, var(--sage), #4A5A32); overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; }
.expert-card:hover .expert-photo { transform: scale(1.04); box-shadow: 0 6px 20px rgba(42, 38, 33, 0.18); }
.expert-photo img { width: 100%; height: 100%; object-fit: cover; }
.expert-name { font-family: var(--font-serif); font-weight: 600; font-size: 1.15rem; margin-bottom: 4px; color: var(--ink); }
.expert-role { font-size: 0.85rem; color: var(--ink-soft); }

/* --------- Werkstatt-Kalkulator-Preview (Startseite) --------- */
.calculator-preview { background: var(--bg); border-radius: var(--radius); padding: 32px; }
.calc-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
.calc-row:last-child { border-bottom: none; }
.calc-label { color: var(--ink-soft); font-size: 0.9rem; }
.calc-value { font-family: var(--font-serif); font-weight: 600; font-size: 1.2rem; color: var(--accent); }
.calc-input { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; padding: 16px; background: white; border-radius: var(--radius); border: 1px solid var(--border); }
.calc-input input { flex: 1; border: none; font-size: 1rem; outline: none; font-family: var(--font-sans); }

/* Der Rechner-Vorschaukasten hat die Startseite auf dem Handy zerschossen.
   Gemessen am 10. August 2026 bei 375 Pixeln: Das Dokument war 470 Pixel
   breit, die ganze Seite ließ sich seitlich schieben.

   Ursache ist eine Kette aus Vorgabewerten. Ein <input> hat eine eigene
   Mindestbreite von rund 20 Zeichen. Flex- und Raster-Elemente stehen auf
   min-width:auto und schrumpfen deshalb nicht unter den Inhalt. Aus dem
   Eingabefeld wurden so 350 Pixel für .calc-input, plus 2 x 32 Pixel
   Innenabstand von .calculator-preview ergaben 414, und das passte nicht
   mehr in die 375.

   min-width:0 loest die Sperre. Bewusst ohne Medienabfrage: Der Fehler
   haengt am Inhalt, nicht an einer bestimmten Bildschirmbreite, und wuerde
   sonst zwischen zwei Haltepunkten wieder auftauchen. */
.werkstatt-card > * { min-width: 0; }
.calc-input { flex-wrap: wrap; }
.calc-input input { min-width: 0; }

/* --------- Werkstatt --------- */
.werkstatt { padding: 100px 0; background: var(--bg); }
.werkstatt-card { background: white; border-radius: var(--radius-lg); padding: 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; box-shadow: var(--shadow); }
.werkstatt-content h2 { margin-bottom: 16px; }
.werkstatt-content p { color: var(--ink-soft); margin-bottom: 32px; }

/* --------- Sekundär-Konversion --------- */
.secondary { padding: 100px 0; }
.secondary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.secondary-card { background: white; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); transition: all 0.3s; display: block; color: inherit; text-decoration: none; }
.secondary-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: inherit; }
/* Angekuendigt, aber noch nicht verfuegbar: gedaempft und ohne Hebe-Effekt,
   damit die Kachel nicht wie ein defekter Link wirkt. */
.secondary-card-bald { opacity: 0.62; cursor: default; }
.secondary-card-bald:hover { transform: none; box-shadow: var(--shadow); }
.secondary-visual { aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; font-size: 3rem; }
/* Mit hinterlegtem Bild fuellt das Bild die Kachel randlos aus. */
.secondary-visual-bild { overflow: hidden; }
.secondary-visual-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.secondary-content { padding: 28px; }
.secondary-content h3 { margin-bottom: 10px; }
.secondary-content p { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 16px; }

/* --------- Newsletter --------- */
.newsletter { padding: 100px 0; background: var(--sage); color: white; text-align: center; }
.newsletter h2 { color: white; margin-bottom: 12px; }
.newsletter p { color: rgba(255,255,255,0.85); margin-bottom: 32px; max-width: 520px; margin-left: auto; margin-right: auto; }
.newsletter-form { display: flex; gap: 12px; max-width: 480px; margin: 0 auto; }
.newsletter-form input { flex: 1; padding: 16px 20px; border: none; border-radius: var(--radius); font-family: var(--font-sans); font-size: 1rem; }
.newsletter-form button { background: var(--ink); color: white; }
.newsletter-form button:hover { background: black; }

/* --------- Partner-Band (Startseite, vor dem Footer) --------- */
/* --------- Partner-Band --------- */
/* Frueher standen die Logos auf opacity 0.65 und einheitlich 56px Hoehe.
   Das liess Sponsoren blass und klein wirken. Jetzt volle Deckkraft, mehr
   Luft, und zwei Groessen: Ein breiter Schriftzug und ein kompaktes
   Rundlogo wirken bei gleicher Hoehe nicht gleich gross. Welche Form ein
   Logo hat, ermittelt brotkongress_get_partner() aus den Bildmassen. */
.partner-band {
    padding: 96px 0;
    background: var(--bg-elevated);
    border-top: 1px solid var(--border);
    text-align: center;
}
.partner-label {
    display: block;
    font-family: var(--font-serif);
    font-size: 1.35rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    font-weight: 600;
    margin-bottom: 44px;
}
.partner-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 80px;
    flex-wrap: wrap;
}
.partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease;
}
.partner-logo img { width: auto; height: auto; object-fit: contain; }
.partner-logo-breit,   .partner-logo-breit img   { height: 72px;  max-height: 72px;  max-width: 260px; }
.partner-logo-kompakt, .partner-logo-kompakt img { height: 104px; max-height: 104px; max-width: 180px; }
a.partner-logo:hover { transform: translateY(-3px); }

@media (max-width: 700px) {
    .partner-band { padding: 56px 0; }
    .partner-logos { gap: 44px; }
    .partner-logo-breit, .partner-logo-breit img { height: 52px; max-height: 52px; max-width: 180px; }
    .partner-logo-kompakt, .partner-logo-kompakt img { height: 76px; max-height: 76px; max-width: 130px; }
}

/* --------- Footer --------- */
.site-footer { background: var(--ink); color: rgba(247, 242, 234, 0.75); padding: 60px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
.footer-col h4 { color: white; font-family: var(--font-sans); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 20px; font-weight: 600; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: rgba(247, 242, 234, 0.75); }
.footer-col a:hover { color: white; }
.footer-brand p { max-width: 320px; margin-bottom: 20px; }
.footer-brand-name { font-family: var(--font-serif); text-transform: none; font-size: 1.3rem; letter-spacing: 0; margin-bottom: 12px; }
.footer-social { display: flex; gap: 12px; }
.footer-social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.footer-social a:hover { background: white; color: var(--ink); border-color: white; }
.footer-bottom { padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; font-size: 0.85rem; flex-wrap: wrap; gap: 16px; }

/* ============================================================
   DETAIL-SEITEN
   ============================================================ */

/* --- Prose-Container fuer Fliesstext --- */
.prose { max-width: 720px; margin: 0 auto; }
.prose p, .prose ul, .prose ol { margin-bottom: 1.2em; }
.prose h2 { margin-top: 2em; margin-bottom: 0.6em; }
.prose h3 { margin-top: 1.5em; margin-bottom: 0.4em; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }

/* --- Single-Video --- */
.single-video .video-hero { padding: 60px 0 40px; display: grid; grid-template-columns: 1fr 1.5fr; gap: 48px; align-items: center; }
.video-hero-expert { color: var(--ink-soft); font-size: 1.05rem; margin-top: 12px; }
.video-hero-expert a { color: var(--accent); font-weight: 500; }
.video-embed { aspect-ratio: 16/9; background: #1a1a1a; border-radius: var(--radius-lg); overflow: hidden; }
.video-embed iframe { width: 100%; height: 100%; border: 0; }
.video-embed-placeholder { position: relative; }
.video-embed-placeholder img { width: 100%; height: 100%; object-fit: cover; }

/* --------- YouTube Zwei-Klick-Einbettung --------- */
/* Vor dem Klick steht hier nur ein Bild vom eigenen Server. Der Player
   kommt erst per JS dazu, damit ohne Zutun des Besuchers nichts an
   Google geht. Siehe brotkongress_youtube_einbettung() in helpers.php. */
.yt-einbettung { width: 100%; }
.yt-start {
  display: block; position: relative; width: 100%; padding: 0; border: 0;
  aspect-ratio: 16/9; background: #1a1a1a; cursor: pointer;
  border-radius: var(--radius-lg); overflow: hidden;
}
.yt-start img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 76px; height: 76px; border-radius: 50%; padding-left: 5px;
  background: rgba(0, 0, 0, 0.72); color: white;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
.yt-start:hover .yt-play, .yt-start:focus-visible .yt-play {
  background: var(--accent); transform: translate(-50%, -50%) scale(1.07);
}
.yt-start:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.yt-hinweis { font-size: 0.82rem; line-height: 1.5; color: var(--ink-soft); margin-top: 10px; }
.yt-einbettung iframe {
  width: 100%; aspect-ratio: 16/9; border: 0; display: block;
  border-radius: var(--radius-lg);
}
.video-upcoming-overlay { position: absolute; inset: 0; background: rgba(42, 38, 33, 0.7); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; color: white; text-align: center; padding: 24px; }
.single-video .video-content { padding: 40px 0 80px; display: grid; grid-template-columns: 2fr 1fr; gap: 60px; }
.video-rezepte-block { margin-top: 60px; }
.video-rezepte-block h2 { margin-bottom: 24px; }
.video-cta { margin-top: 40px; display: flex; gap: 16px; flex-wrap: wrap; }
.video-zusatz { padding: 20px; background: var(--bg-elevated); border-left: 3px solid var(--sage); border-radius: var(--radius); margin: 32px 0; }
.video-sidebar { position: sticky; top: 100px; align-self: start; }
.expert-mini { background: var(--bg-elevated); border-radius: var(--radius-lg); padding: 24px; text-align: center; box-shadow: var(--shadow); }
.expert-mini img { width: 100%; max-width: 180px; height: auto; border-radius: 50%; margin: 0 auto 16px; aspect-ratio: 1; object-fit: cover; }
.expert-mini h4 { margin-bottom: 4px; }
.expert-mini p { color: var(--ink-soft); font-size: 0.9rem; margin: 0; }

/* --- Single-Rezept: Full-Bleed Hero --- */
.rezept-hero-fullbleed { position: relative; height: clamp(420px, 60vh, 640px); overflow: hidden; }
.rezept-hero-image-wrap { position: absolute; inset: 0; }
.rezept-hero-image-wrap img { width: 100%; height: 100%; object-fit: cover; }
.rezept-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42, 38, 33, 0.15) 0%, rgba(42, 38, 33, 0.55) 60%, rgba(42, 38, 33, 0.85) 100%); }
.rezept-hero-caption { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); padding-bottom: 60px; color: white; width: 100%; max-width: var(--max-width); }
.rezept-hero-caption h1 { color: white; margin: 12px 0 16px; max-width: 820px; }
.hero-eyebrow-dark { display: inline-block; background: rgba(255,255,255,0.15); backdrop-filter: blur(8px); color: white; padding: 6px 14px; border-radius: 20px; font-size: 0.8rem; font-weight: 500; }
.rezept-kurz-dark { font-size: 1.2rem; color: rgba(255,255,255,0.9); max-width: 720px; margin: 0; }
.rezept-hero-text-only { padding: 60px 0 20px; }
.rezept-fakten-bar { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; align-items: center; padding: 40px 24px; margin-top: -60px; position: relative; z-index: 2; background: var(--bg-elevated); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); max-width: calc(var(--max-width) - 48px); }
.rezept-fakten-bar .rezept-actions { justify-self: end; display: flex; gap: 12px; flex-wrap: wrap; }
/* Ohne Kopfbild gibt es nichts zu ueberlappen: der negative Abstand oben
   wuerde die Faktenkarte sonst ueber die Kurzbeschreibung schieben. */
.rezept-hero-text-only + .rezept-fakten-bar { margin-top: 24px; }
.rezept-kurz { font-size: 1.2rem; color: var(--ink-soft); margin: 16px 0 24px; }
.rezept-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 24px; margin: 0; padding: 0; background: none; border-radius: 0; }
.rezept-facts .fact { display: flex; flex-direction: column; }
.rezept-facts .fact span { font-size: 0.8rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em; }
.rezept-facts .fact strong { font-family: var(--font-serif); font-size: 1.15rem; margin-top: 4px; }
.rezept-facts .fact a { color: var(--accent); }
.rezept-actions { display: flex; gap: 12px; margin-top: 12px; }
.rezept-content { padding: 60px 0 80px; }
.rezept-content-inner { max-width: 720px; margin: 0 auto; }
.rezept-intro { margin-bottom: 40px; }
.rezept-zutaten, .rezept-schritte { margin-bottom: 48px; }
.rezept-zutaten ul { list-style: none; padding: 0; background: var(--bg-elevated); border-radius: var(--radius-lg); overflow: hidden; }
.rezept-zutaten li { display: flex; padding: 12px 20px; border-bottom: 1px solid var(--border); }
.rezept-zutaten li:last-child { border-bottom: none; }
.rezept-zutaten li.zutat-header { background: var(--ink); color: var(--bg); font-family: var(--font-serif); font-size: 1.05rem; }
.zutat-menge { flex: 0 0 100px; font-family: var(--font-serif); font-weight: 600; color: var(--accent); }
.zutat-name { flex: 1; }
.rezept-schritte ol { list-style: none; counter-reset: schritt; padding: 0; }
.rezept-schritte li { counter-increment: schritt; padding: 20px 0 20px 60px; border-bottom: 1px solid var(--border); position: relative; }
.rezept-schritte li:last-child { border-bottom: none; }
.rezept-schritte li::before { content: counter(schritt); position: absolute; left: 0; top: 20px; width: 40px; height: 40px; background: var(--accent); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-weight: 600; }
.schritt-titel { display: block; margin-bottom: 6px; font-family: var(--font-serif); font-size: 1.1rem; }
.rezept-tipp { padding: 28px; background: #F5E9DC; border-left: 4px solid var(--accent); border-radius: var(--radius-lg); margin: 40px 0; }
.rezept-tipp h3 { margin-top: 0; color: var(--accent); }
.rezept-video-hinweis { margin-top: 60px; }
.rezept-video-hinweis h2 { margin-bottom: 24px; }
.rezept-tag { display: inline-block; background: var(--sage); color: white; padding: 3px 10px; border-radius: 12px; font-size: 0.75rem; margin-bottom: 8px; }

/* --- Single-Experte --- */
.single-experte .experte-hero { padding: 60px 0; display: grid; grid-template-columns: 1fr 2fr; gap: 48px; align-items: start; }
.experte-hero-photo img { border-radius: var(--radius-lg); aspect-ratio: 1; object-fit: cover; }
.experte-rolle { color: var(--ink-soft); font-size: 1.15rem; margin-top: -8px; margin-bottom: 24px; }
.experte-zitat { font-family: var(--font-serif); font-size: 1.4rem; font-style: italic; border-left: 4px solid var(--accent); padding-left: 24px; margin: 24px 0; color: var(--ink-soft); }
.experte-links { display: flex; gap: 20px; margin-top: 32px; }
.experte-links a { padding: 10px 20px; border: 1px solid var(--border); border-radius: var(--radius); font-weight: 500; }
.experte-links a:hover { background: var(--ink); color: white; border-color: var(--ink); }
.experte-videos, .experte-rezepte, .experte-buecher { padding: 60px 0; border-top: 1px solid var(--border); }
.experte-videos h2, .experte-rezepte h2, .experte-buecher h2 { margin-bottom: 32px; }

/* --- Single-Buch --- */
.single-buch .buch-hero { padding: 60px 0; display: grid; grid-template-columns: 1fr 1.5fr; gap: 60px; align-items: center; }
/* Buchcover niemals zuschneiden. Sie sind Hochformat, aber nicht alle gleich:
   die vorhandenen liegen zwischen 0,67 und 0,78. Ein erzwungenes 3:4 mit
   object-fit:cover hat oben und unten etwas abgeschnitten, im Zweifel den
   Titel. Hier steht das Cover allein, also darf es seine echten Masse behalten.
   Ohne feste aspect-ratio umschliesst auch der Schatten wieder das Bild. */
/* Buchcover duerfen freigestellte PNG mit Transparenz sein. Deshalb
   drop-shadow statt box-shadow: box-shadow folgt dem rechteckigen Element,
   drop-shadow folgt der Bildkontur. Bei einem freigestellten Cover laege der
   Schatten sonst um eine unsichtbare Flaeche herum. */
.buch-hero-cover img { display: block; width: 100%; height: auto; border-radius: var(--radius); filter: drop-shadow(0 8px 26px rgba(42, 38, 33, 0.22)); }
.buch-autor-line { font-size: 1.1rem; color: var(--ink-soft); margin: -8px 0 20px; }
.buch-autor-line a { color: var(--accent); }
.buch-empfehlung-lead { font-size: 1.2rem; font-family: var(--font-serif); font-style: italic; margin-bottom: 24px; }
.buch-sterne { color: var(--accent); font-size: 1.2rem; letter-spacing: 2px; margin-bottom: 20px; }
.buch-sterne.big { font-size: 1.5rem; }
.buch-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; padding: 20px; background: var(--bg-elevated); border-radius: var(--radius-lg); margin: 24px 0 32px; }
.buch-facts > div { display: flex; flex-direction: column; }
.buch-facts dt { font-size: 0.8rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em; }
.buch-facts dd { font-family: var(--font-serif); font-size: 1.05rem; margin: 4px 0 0; }
.buch-cta .btn { margin-bottom: 12px; }
.affiliate-hinweis { font-size: 0.8rem; color: var(--ink-soft); margin: 0; }
.buch-content { padding: 40px 0 80px; max-width: 720px; margin: 0 auto; }
.buch-rezension { margin-top: 48px; }
.buch-rezension h2 { margin-bottom: 20px; }

/* --- Single-Zubehoer --- */
.single-zubehoer .zubehoer-hero { padding: 60px 0; display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center; }
.zubehoer-hero-image img { border-radius: var(--radius-lg); aspect-ratio: 1; object-fit: cover; }
.zubehoer-partner-line { color: var(--ink-soft); margin: 8px 0 24px; }
.zubehoer-sterne { color: var(--accent); font-size: 1.2rem; letter-spacing: 2px; margin-bottom: 20px; }
.zubehoer-sterne.big { font-size: 1.5rem; }
.zubehoer-content { padding: 40px 0 80px; max-width: 720px; margin: 0 auto; }
.zubehoer-testbericht { margin-top: 48px; }
.zubehoer-alternativen { margin-top: 60px; }
.zubehoer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; margin-top: 24px; }

/* --- Rezept-Cards (fuer Grids in Archiven, Video-Detail etc.) --- */
.rezept-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.rezept-card { background: var(--bg-elevated); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); display: block; color: inherit; transition: all 0.3s; }
.rezept-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: inherit; }
.rezept-thumb { aspect-ratio: 4/3; overflow: hidden; }
.rezept-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Rezeptkarten sind reine Textkarten, ohne Bildflaeche. Damit sie nicht
   gedrungen wirken, mehr Luft und eine feine Linie oben in der Akzentfarbe.
   Die Linie gibt dem Raster einen Rhythmus, den sonst die Bilder erzeugt haetten. */
.rezept-card { border-top: 3px solid var(--sage); }
.rezept-info { padding: 24px 22px 22px; }
.rezept-info h4 { margin-bottom: 10px; }
.rezept-excerpt { color: var(--ink-soft); font-size: 0.9rem; margin: 8px 0 12px; }
.rezept-meta { color: var(--ink-soft); font-size: 0.85rem; }
.rezept-meta .expert-name { color: var(--accent); font-weight: 500; }

/* --- Buch-Cards --- */
.buch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; }
.buch-card { background: var(--bg-elevated); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); display: block; color: inherit; transition: all 0.3s; }
.buch-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: inherit; }
/* Im Raster muessen die Karten gleich hoch sein, hier bleibt der feste Kasten.
   Aber mit "contain" statt "cover": Das Cover wird vollstaendig gezeigt und
   nur eingepasst. Die schmalen Raender links und rechts uebernimmt der
   Farbverlauf, das wirkt wie ein Regalbrett und nicht wie ein Fehler. */
.buch-cover { aspect-ratio: 3/4; overflow: hidden; background: linear-gradient(135deg, #E5DDD1, #C9BFB0); padding: 14px; }
.buch-cover img { width: 100%; height: 100%; object-fit: contain; display: block;
  filter: drop-shadow(0 6px 14px rgba(42, 38, 33, 0.22)); }
.buch-info { padding: 20px; }
.buch-autor { color: var(--accent); font-size: 0.9rem; margin: 4px 0 12px; font-weight: 500; }
.buch-empfehlung { color: var(--ink-soft); font-size: 0.9rem; margin: 0 0 12px; font-style: italic; }

/* --- Zubehoer-Cards --- */
.zubehoer-card { background: var(--bg-elevated); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); display: block; color: inherit; transition: all 0.3s; }
.zubehoer-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: inherit; }
.zubehoer-visual { aspect-ratio: 4/3; overflow: hidden; background: linear-gradient(135deg, #E8DFCE, #D4C6B0); }
.zubehoer-visual img { width: 100%; height: 100%; object-fit: cover; }
.zubehoer-info { padding: 20px; }
.zubehoer-partner { color: var(--accent); font-size: 0.9rem; margin: 4px 0 12px; font-weight: 500; }

/* ============================================================
   ARCHIVE-SEITEN (Videos, Rezepte, Experten, Zubehoer)
   ============================================================ */
.archive-hero { padding: 80px 0 40px; text-align: center; }
.archive-hero h1 { margin: 12px 0 16px; }
.archive-hero .section-sub { margin: 0 auto; max-width: 720px; }

.archive-content { padding: 40px 0 80px; }
.archive-filter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.filter-label { font-size: 0.85rem; color: var(--ink-soft); font-weight: 500; margin-right: 8px; }
.filter-btn { padding: 8px 16px; border-radius: 20px; background: white; border: 1px solid var(--border); font-size: 0.9rem; font-weight: 500; transition: all 0.2s; }
.filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.filter-btn.active { background: var(--ink); color: white; border-color: var(--ink); }
.filter-btn-sm { padding: 6px 12px; font-size: 0.85rem; }

.archive-pagination { margin-top: 60px; display: flex; justify-content: center; }
.archive-pagination .nav-links { display: flex; gap: 8px; align-items: center; }
.archive-pagination a, .archive-pagination span { padding: 10px 16px; border-radius: var(--radius); background: white; border: 1px solid var(--border); transition: all 0.2s; }
.archive-pagination a:hover { background: var(--ink); color: white; border-color: var(--ink); }
.archive-pagination .current { background: var(--accent); color: white; border-color: var(--accent); }

.archive-leer { text-align: center; padding: 80px 0; color: var(--ink-soft); }

.experten-grid-large { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.experten-grid-large .expert-photo { width: 180px; height: 180px; }

.affiliate-hinweis-block { margin-top: 60px; padding: 24px; background: var(--bg-elevated); border-left: 3px solid var(--sage); border-radius: var(--radius); font-size: 0.9rem; color: var(--ink-soft); }

/* ============================================================
   404-SEITE
   ============================================================ */
.page-404 { padding: 80px 0; }
.page-404-text { text-align: center; max-width: 720px; margin: 0 auto 80px; }
.page-404-text h1 { margin: 12px 0 20px; }
.page-404-sub { font-size: 1.15rem; color: var(--ink-soft); margin-bottom: 40px; }
.page-404-search { display: flex; gap: 12px; max-width: 480px; margin: 0 auto 48px; }
.page-404-search input { flex: 1; padding: 14px 20px; border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--font-sans); font-size: 1rem; }
.page-404-links h3 { margin-bottom: 16px; }
.page-404-links ul { list-style: none; padding: 0; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.page-404-links li a { padding: 8px 16px; background: var(--bg-elevated); border-radius: var(--radius); font-weight: 500; }
.page-404-links li a:hover { background: var(--ink); color: white; }
.page-404-teaser-title { text-align: center; margin: 60px 0 32px; }

/* ============================================================
   SEARCH-RESULTS
   ============================================================ */
.search-form-inline { display: flex; gap: 12px; max-width: 480px; margin: 24px auto 0; }
.search-form-inline input { flex: 1; padding: 14px 20px; border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--font-sans); font-size: 1rem; }
.search-results { padding: 40px 0 80px; }
.search-group { margin-bottom: 60px; }
.search-group-title { margin-bottom: 24px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); display: inline-block; padding-right: 40px; }
.search-count { color: var(--ink-soft); font-size: 0.9rem; font-weight: 400; font-family: var(--font-sans); }
.search-no-results { text-align: center; padding: 60px 0; }
.search-no-results ul { list-style: none; padding: 0; margin-top: 20px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.search-no-results li a { padding: 8px 16px; background: var(--bg-elevated); border-radius: var(--radius); font-weight: 500; }
.search-no-results li a:hover { background: var(--ink); color: white; }

/* ============================================================
   BUECHER-ARCHIVE (Docfleck-Style)
   ============================================================ */
.buecher-archive-hero { padding: 80px 0 40px; text-align: center; }
.buecher-archive-hero h1 { margin: 12px 0 16px; }
.buecher-archive-hero .section-sub { margin: 0 auto; }

.buecher-liste { padding: 40px 0 80px; }
.buch-listing {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 48px;
    padding: 48px 0;
    border-bottom: 1px solid var(--border);
    align-items: start;
}
.buch-listing:first-of-type { padding-top: 0; }
.buch-listing:last-of-type { border-bottom: none; }

/* Wie beim Hero: echtes Seitenverhaeltnis, kein Zuschnitt. Die Cover sind in
   der Liste dann unterschiedlich hoch. Das ist richtig so, Buecher haben nun
   einmal verschiedene Formate. */
.buch-listing-cover img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    filter: drop-shadow(0 8px 26px rgba(42, 38, 33, 0.22));
}
.buch-listing-title { font-size: clamp(1.6rem, 2.5vw, 2rem); margin-bottom: 8px; }
.buch-listing-title a { color: var(--ink); text-decoration: none; }
.buch-listing-title a:hover { color: var(--accent); }
.buch-listing-subtitle {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 1.15rem;
    color: var(--ink-soft);
    line-height: 1.4;
    margin-bottom: 20px;
    font-style: italic;
}
.buch-listing-autor {
    color: var(--accent);
    font-weight: 500;
    margin-bottom: 16px;
}
.buch-listing-autor a { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }

.buch-listing-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 14px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
    font-size: 0.9rem;
    color: var(--ink-soft);
}
.buch-listing-meta .buch-listing-preis {
    color: var(--ink);
    font-weight: 600;
    font-family: var(--font-serif);
}

.buch-listing-sterne { color: var(--accent); font-size: 1.2rem; letter-spacing: 3px; margin-bottom: 20px; }

.buch-listing-text {
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1.7;
    max-height: 6em;
    overflow: hidden;
    position: relative;
    transition: max-height 0.4s ease;
    margin-bottom: 12px;
}
.buch-listing-text.open { max-height: none; }
.buch-listing-text:not(.open)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3em;
    background: linear-gradient(180deg, rgba(247, 242, 234, 0) 0%, var(--bg) 100%);
    pointer-events: none;
}
.buch-listing-text p:last-child { margin-bottom: 0; }

.buch-mehr-lesen {
    background: none;
    border: none;
    color: var(--accent);
    font-family: var(--font-sans);
    font-weight: 500;
    cursor: pointer;
    padding: 4px 0;
    margin-bottom: 24px;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.buch-mehr-lesen:hover { color: var(--accent-hover); }

.buch-listing-cta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.buecher-leer {
    text-align: center;
    padding: 80px 0;
    color: var(--ink-soft);
}

@media (max-width: 800px) {
    .buch-listing { grid-template-columns: 1fr; gap: 24px; }
    .buch-listing-cover { max-width: 220px; }
}

/* ============================================================
   SAUERTEIG-LANDING
   ============================================================ */
.sauerteig-landing-hero { position: relative; height: clamp(420px, 60vh, 640px); overflow: hidden; }
.sauerteig-landing-image-wrap { position: absolute; inset: 0; background: #2A2621; }
.sauerteig-landing-image-wrap img { width: 100%; height: 100%; object-fit: cover; }
.sauerteig-landing-image-fallback { width: 100%; height: 100%; background: linear-gradient(135deg, #4A3020, #2A2621); }
.sauerteig-landing-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42, 38, 33, 0.35) 0%, rgba(42, 38, 33, 0.75) 60%, rgba(42, 38, 33, 0.9) 100%); }
.sauerteig-landing-caption { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); padding-bottom: 80px; color: white; width: 100%; max-width: var(--max-width); }
.sauerteig-landing-caption h1 { color: white; margin: 12px 0 16px; }
/* Drei Textbloecke stehen hier direkt untereinander. Bei 80px oben und 40px
   unten ergab das 120px Luft zwischen zwei Bloecken, dazu kamen nochmal 2em
   Abstand ueber der Ueberschrift aus .prose h2. Das wirkte wie ein Bruch
   zwischen den Abschnitten statt wie ein zusammenhaengender Text.
   Jetzt 60px zwischen den Bloecken, und die erste Ueberschrift eines Blocks
   bekommt keinen zusaetzlichen Abstand mehr. */
.sauerteig-intro { padding: 40px 0 20px; background: var(--bg); }
.sauerteig-intro .prose > h2:first-child { margin-top: 0; }
.sauerteig-videos-section, .sauerteig-rezepte-section, .sauerteig-experten-section, .sauerteig-buecher-section { padding: 60px 0; }
.sauerteig-experten-section { background: white; }
.sauerteig-experten-section .experten-scroll { margin-top: 32px; }
/* Sauerteig: YouTube-Playlist */
.sauerteig-playlist-section { padding: 60px 0; background: var(--bg-elevated); }
.playlist-wrap { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; align-items: center; }
.playlist-intro h2 { margin: 12px 0 16px; }
.playlist-intro p { color: var(--ink-soft); margin-bottom: 24px; }
.playlist-embed { aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden; background: #1a1a1a; box-shadow: var(--shadow-lg); }
.playlist-embed iframe { width: 100%; height: 100%; border: 0; }
@media (max-width: 900px) {
  .playlist-wrap { grid-template-columns: 1fr; gap: 28px; }
}

.sauerteig-cta { padding: 100px 0; background: var(--ink); color: white; text-align: center; }
.sauerteig-cta h2 { color: white; }
.sauerteig-cta p { max-width: 580px; margin: 12px auto 32px; color: rgba(255,255,255,0.8); }

/* Sauerteig: Anfaengerfehler */
.sauerteig-fehler-section { padding: 60px 0; background: white; }
.fehler-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 32px; }
.fehler-item { padding: 24px 28px; background: var(--bg); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.fehler-item h3 { font-size: 1.05rem; margin: 0 0 8px; }
.fehler-item p { color: var(--ink-soft); margin: 0; }
@media (max-width: 700px) {
  .fehler-grid { grid-template-columns: 1fr; }
}

/* Sauerteig: FAQ */
.sauerteig-faq-section { padding: 60px 0; background: var(--bg); }
.faq-liste { max-width: 720px; margin: 32px auto 0; }
.faq-item { border-bottom: 1px solid var(--border); padding: 20px 0; }
.faq-item summary { font-family: var(--font-serif); font-size: 1.1rem; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; float: right; font-family: var(--font-sans); color: var(--accent); }
.faq-item[open] summary::after { content: '\2212'; }
.faq-item p { color: var(--ink-soft); margin: 12px 0 0; }

/* ============================================================
   WERKSTATT
   ============================================================ */
.werkstatt-uebersicht { padding: 80px 0; }
.werkstatt-header { text-align: center; max-width: 720px; margin: 0 auto 60px; }
.werkstatt-tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.tool-card { background: white; border-radius: var(--radius-lg); padding: 40px 32px; box-shadow: var(--shadow); text-decoration: none; color: inherit; transition: all 0.3s; display: block; }
.tool-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: inherit; }
.tool-card-coming { opacity: 0.5; cursor: not-allowed; }
.tool-card-coming:hover { transform: none; box-shadow: var(--shadow); }
.tool-card-featured { background: var(--ink); color: var(--bg); position: relative; }
.tool-card-featured h3 { color: var(--bg); }
.tool-card-featured p { color: rgba(247, 242, 234, 0.8); }
.tool-card-featured .tool-cta { color: var(--accent); }
.tool-card-featured .tool-badge { position: absolute; top: 20px; right: 20px; background: var(--accent); color: white; padding: 4px 10px; border-radius: 12px; font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
.tool-card-featured:hover { color: var(--bg); }
.secondary-tag { display: inline-block; background: var(--accent); color: white; padding: 3px 10px; border-radius: 12px; font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.secondary-card-app .secondary-visual { color: white; }
/* .tool-icon entfernt: Die Emoji-Symbole passten nicht zum Thema. */
.tool-card h3 { margin-bottom: 12px; }

/* Zurueck-Knopf und Filter auf der Rezept-Einzelseite */
.rezept-zurueck { padding-top: 28px; }
.rezept-weiterstoebern { margin: 56px auto 0; padding-top: 32px; border-top: 1px solid var(--border); }
.rezept-weiterstoebern h2 { margin-bottom: 20px; }

/* Zurueck-Knopf und Filter auf der Produkt-Einzelseite */
.zubehoer-zurueck { padding-top: 28px; }
.zubehoer-weiterstoebern { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--border); }
.zubehoer-weiterstoebern h2 { margin-bottom: 20px; }
.tool-card p { color: var(--ink-soft); margin-bottom: 20px; }
.tool-cta { color: var(--accent); font-weight: 500; }

/* ============================================================
   GÄRKÖRBCHEN-RECHNER
   ============================================================ */
.rechner-page { padding: 60px 0 80px; max-width: 900px; }
.rechner-header { text-align: center; margin-bottom: 60px; }
.rechner-widget { background: white; border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow); }
.rechner-step { margin-bottom: 48px; padding-bottom: 40px; border-bottom: 1px solid var(--border); }
.rechner-step:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.rechner-step h2 { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.step-num { display: inline-flex; width: 40px; height: 40px; background: var(--accent); color: white; border-radius: 50%; align-items: center; justify-content: center; font-family: var(--font-serif); font-weight: 600; font-size: 1.1rem; }
.step-hint { color: var(--ink-soft); margin-bottom: 20px; }

.rechner-tabs { display: flex; gap: 8px; margin-bottom: 24px; border-bottom: 2px solid var(--border); }
.tab-btn { background: none; border: none; padding: 12px 20px; font-family: var(--font-sans); font-weight: 500; cursor: pointer; color: var(--ink-soft); position: relative; }
.tab-btn.active { color: var(--ink); }
.tab-btn.active::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: var(--accent); }

.tab-content { display: none; }
.tab-content.active { display: block; }

.preset-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.preset-btn { background: var(--bg); border: 2px solid transparent; padding: 20px 16px; border-radius: var(--radius); cursor: pointer; font-family: var(--font-sans); text-align: center; transition: all 0.2s; display: flex; flex-direction: column; gap: 6px; }
.preset-btn:hover { border-color: var(--accent); }
.preset-btn.active { border-color: var(--accent); background: #FEF6F0; }
.preset-btn span { font-size: 0.85rem; color: var(--ink-soft); }
.preset-btn strong { font-family: var(--font-serif); font-size: 1.15rem; color: var(--ink); }

.custom-inputs { max-width: 400px; }
.hint { color: var(--ink-soft); font-size: 0.85rem; margin-top: 12px; }

.rezept-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 24px; }
.input-group label { display: block; font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 6px; font-weight: 500; }
.input-with-unit { display: flex; align-items: center; background: var(--bg); border-radius: var(--radius); overflow: hidden; }
.input-with-unit input { flex: 1; padding: 12px 16px; border: none; background: transparent; font-family: var(--font-sans); font-size: 1rem; outline: none; }
.input-with-unit span { padding: 12px 16px; color: var(--ink-soft); font-family: var(--font-serif); font-weight: 600; }
.input-group input[type="number"] { padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--font-sans); font-size: 1rem; width: 100%; }

.basis-summe { padding: 16px 20px; background: var(--bg); border-radius: var(--radius); color: var(--ink-soft); }
.basis-summe strong { color: var(--ink); font-family: var(--font-serif); font-size: 1.15rem; }

.rechner-ergebnis { background: #FEF6F0; border-radius: var(--radius-lg); padding: 32px; margin-top: 32px; }
.ergebnis-table { margin: 24px 0; }
.ergebnis-row { display: flex; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--border); }
.ergebnis-row:last-child { border-bottom: none; }
.ergebnis-row.total { padding-top: 20px; border-top: 2px solid var(--ink); border-bottom: none; margin-top: 8px; }
.ergebnis-row strong { font-family: var(--font-serif); font-size: 1.1rem; color: var(--accent); }
.ergebnis-row.total strong { font-size: 1.4rem; color: var(--ink); }

.rechner-hinweis { margin-top: 40px; padding: 24px; background: var(--bg-elevated); border-left: 3px solid var(--sage); border-radius: var(--radius); font-size: 0.95rem; color: var(--ink-soft); }
.rechner-hinweis strong { color: var(--ink); }

@media (max-width: 700px) {
  .rechner-widget { padding: 24px; }
  .preset-grid { grid-template-columns: 1fr 1fr; }
  .rezept-inputs { grid-template-columns: 1fr; }
}

/* --- Video-Badge fuer angekuendigte Videos --- */
.video-badge-upcoming { position: absolute; top: 12px; left: 12px; background: var(--accent); color: white; padding: 6px 12px; border-radius: 4px; font-size: 0.8rem; font-weight: 500; }

/* --- Responsive Detail-Seiten --- */
@media (max-width: 900px) {
  .single-video .video-hero,
  .single-video .video-content,
  .single-experte .experte-hero,
  .single-buch .buch-hero,
  .single-zubehoer .zubehoer-hero { grid-template-columns: 1fr; gap: 32px; }
  .video-sidebar { position: static; }
  .rezept-hero-fullbleed { height: clamp(320px, 50vh, 480px); }
  .rezept-hero-caption { padding-bottom: 40px; }
  .rezept-fakten-bar { grid-template-columns: 1fr; gap: 20px; margin-top: -40px; padding: 28px 20px; }
  .rezept-fakten-bar .rezept-actions { justify-self: start; }
}

/* ============================================================
   PRINT-STYLES (fuer Rezepte)
   ============================================================ */
@media print {
  /* Alles weg, was auf Papier nichts verloren hat. Das Kopfbild ausdruecklich
     mit: Es ist das YouTube-Vorschaubild und kostet nur Toner.
     ACHTUNG: Die Klassen hiessen frueher .rezept-hero und .rezept-hero-image.
     Nach der Umstellung auf das randlose Kopfbild greifen nur noch die
     Namen mit -fullbleed und -image-wrap. */
  .site-header, .site-footer, .back-to-top, .rezept-actions,
  .rezept-video-hinweis, .rezept-hero-image-wrap, .rezept-hero-overlay,
  .newsletter, .yt-einbettung { display: none !important; }

  body { background: white; font-size: 12pt; }

  /* Ohne Bild darf der Kopf nicht mehr bildschirmhoch sein, und die
     Beschriftung stand auf dunklem Grund in Weiss. Auf Papier waere sie
     sonst unsichtbar. */
  .rezept-hero-fullbleed { position: static; height: auto; overflow: visible; }
  .rezept-hero-caption { position: static; transform: none; padding: 0 0 12px; color: #000; max-width: 100%; }
  .rezept-hero-caption h1 { color: #000; margin: 0 0 8px; }
  .rezept-kurz-dark { color: #333; font-size: 12pt; }
  .hero-eyebrow-dark { background: none; color: #555; padding: 0; font-size: 10pt; }

  .rezept-content-inner { max-width: 100%; padding: 0; }
  .rezept-facts { background: none; border: 1px solid #ccc; padding: 12px; }
  .rezept-zutaten ul { background: none; }
  .rezept-zutaten li { border-bottom: 1px solid #ddd; }
  .rezept-schritte li::before { background: #333; color: white; }
  .rezept-tipp { background: #f5f5f5; border-left: 3px solid #333; }
  h1, h2, h3 { page-break-after: avoid; }
  a { color: inherit; text-decoration: none; }
}

/* --------- Back-to-Top-Button (global) --------- */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ink);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all 0.25s ease;
  z-index: 90;
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--accent); }
.back-to-top svg { width: 20px; height: 20px; }
@media (max-width: 600px) {
  .back-to-top { bottom: 16px; right: 16px; width: 44px; height: 44px; }
}

/* --------- Post-Card (Fallback) --------- */
.post-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
.post-card { background: white; border-radius: var(--radius-lg); overflow: hidden; }
.post-card-thumb img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.post-card-body { padding: 20px; }

/* --------- Responsive --------- */
@media (max-width: 900px) {
  .hero-grid, .sauerteig-grid, .werkstatt-card { grid-template-columns: 1fr; gap: 40px; }
  .werkstatt-card { padding: 32px; }
  .video-grid { grid-template-columns: repeat(2, 1fr); }
  .secondary-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  /* Hier stand bis zum 10. August 2026 ".nav { display: none; }".
     Das war die alte Notloesung: Unter 900 Pixeln gab es schlicht keine
     Navigation mehr, auf dem Handy war ueber die Kopfzeile keine einzige
     Seite erreichbar. Seit v45 uebernimmt das Klappmenue diese Aufgabe,
     die Regel muss weg. Sie stand weiter unten in der Datei als der
     Burger-Block und hat dessen Regeln ueberstimmt. */
}
@media (max-width: 600px) {
  .section, .videos, .experten, .werkstatt, .secondary, .sauerteig, .newsletter { padding: 60px 0; }
  .video-grid { grid-template-columns: 1fr 1fr; }
  .newsletter-form { flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* --------- Normale Seiten (page.php) --------- */
/* Impressum, Datenschutz, Kontakt, Ueber uns. Ohne page.php lief das
   ueber index.php und zeigte nur einen gekuerzten Auszug. */
.seite-hero { padding: 80px 0 0; }
.seite-hero h1 { max-width: 820px; }
.seite-hero .section-sub { margin-bottom: 0; }
.seite-inhalt { padding: 32px 0 90px; }
.seite-inhalt .prose h2 { margin-top: 1.6em; }
.seite-blaettern { margin-top: 32px; color: var(--ink-soft); }