/* Foodfibel-News-Theme für foodfibel.news. Farben, Schriften und Menü wie im Blog auf foodfibel.de.
   Aufbau: 1 Schriften, 2 Variablen, 3 Basis, 4 Kopf und Menü, 5 Artikelkopf, 6 Layout und Text,
   7 Blöcke, 8 Bausteine aus dem alten Theme, 9 Seitenleiste, 10 Übersicht, 11 Fuß, 12 Plugins, 13 Sonderfälle. */

/* ---------- 1 Schriften (lokal, nur diese vier Schnitte) ---------- */
@font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/roboto-condensed-400.woff2") format("woff2"); }
@font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/roboto-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/open-sans-400.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/open-sans-600.woff2") format("woff2"); }
@font-face { font-family: "Ionicons"; font-style: normal; font-weight: 400; font-display: block; src: url("../fonts/ionicons-subset.woff2") format("woff2"); }

/* ---------- 2 Variablen ---------- */
:root {
  --bg: #fff;
  --surface: #e9f9e1;
  --surface-2: #d3efc4;
  --ink: #453d2d;
  --ink-soft: #282318;
  --heading: #009900;
  --line: #cfe5c2;
  --rule: #b9b198;
  --card: #fff;
  --muted: #6b6b6b;
  --hair: #ece6d6;
  --card-line: rgba(60, 45, 20, .06);
  --card-shadow: 0 1px 2px rgba(40, 30, 10, .06), 0 4px 16px -4px rgba(40, 30, 10, .14);
  --green: #009900;
  --green-solid: #009900; /* bleibt in beiden Modi gleich: Hover-Flächen mit weißem Text */
  --green-deep: #006400;
  --nav-green: #008000;
  --foot-green: #006400;
  --foot-dark: #004200;
  --orange: #ff9900;
  --orange-ink: #ff9900;
  --link-hover: #ff9900;
  --font-display: "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ico-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  --ico-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --radius: 1.25rem;
  --radius-sm: .6rem;
  --shadow: 0 18px 40px -22px rgba(40, 30, 10, .45);

  /* Bildunterschriften in Farbe (Klassen am Bildblock) und Flächen */
  --cap-gruen: #009900;
  --cap-hellgruen: #99c901;
  --cap-darkergruen: #66ad38;
  --cap-dunkelgruen: #1c3c01;
  --cap-dunkelbraun: #331900;
  --cap-mittelblau: #2981d7;
  --cap-mittelrot: #e6392b;
  --cap-mittelgrau: #6b6b6b;
  --cap-gruengrau: #8c9782;
  --tint-gruen: #ebfbe0;
  --tint-blau: #e3f6ff;
  --tint-orange: #ffecc6;
  --box-blau: #2981d7;
  --box-gruen: #009900;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1a160f; --surface: #241e14; --surface-2: #30281a; --ink: #f6eddc; --ink-soft: #c0b399;
    --line: #3d3322; --green: #86c45a; --heading: #f1f6e2; --orange: #e99519; --orange-ink: #e99519; --link-hover: #ff9900;
    --rule: #4a3f2b; --card: #241e14; --muted: #c0b399; --show-moon: none; --show-sun: block; --hair: #3d3322; --card-line: #3d3322; --card-shadow: none;
    --shadow: 0 18px 40px -22px rgba(0, 0, 0, .7);
    --cap-gruen: #1d6b1d; --cap-hellgruen: #4a6300; --cap-darkergruen: #35591f; --cap-dunkelgruen: #14290a;
    --cap-dunkelbraun: #3a2410; --cap-mittelblau: #1b5a9a; --cap-mittelrot: #962a20; --cap-mittelgrau: #3a352b; --cap-gruengrau: #4f5a47;
    --tint-gruen: #2b2a1c; --tint-blau: #1f2a33; --tint-orange: #3a2c12; --box-blau: #1b5a9a; --box-gruen: #1d5a1d;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #1a160f; --surface: #241e14; --surface-2: #30281a; --ink: #f6eddc; --ink-soft: #c0b399;
  --line: #3d3322; --green: #86c45a; --heading: #f1f6e2; --orange: #e99519; --orange-ink: #e99519; --link-hover: #ff9900;
  --rule: #4a3f2b; --card: #241e14; --muted: #c0b399; --show-moon: none; --show-sun: block; --hair: #3d3322; --card-line: #3d3322; --card-shadow: none;
  --shadow: 0 18px 40px -22px rgba(0, 0, 0, .7);
  --cap-gruen: #1d6b1d; --cap-hellgruen: #4a6300; --cap-darkergruen: #35591f; --cap-dunkelgruen: #14290a;
  --cap-dunkelbraun: #3a2410; --cap-mittelblau: #1b5a9a; --cap-mittelrot: #962a20; --cap-mittelgrau: #3a352b; --cap-gruengrau: #4f5a47;
  --tint-gruen: #2b2a1c; --tint-blau: #1f2a33; --tint-orange: #3a2c12; --box-blau: #1b5a9a; --box-gruen: #1d5a1d;
  color-scheme: dark;
}

/* ---------- 3 Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  overflow-wrap: break-word;
}

img, video, iframe { max-width: 100%; }
img { height: auto; }
a { color: inherit; }
figure { margin: 0; }
p { margin: 0 0 1em; }
var { font-style: normal; white-space: nowrap; font-family: inherit; }
u { text-decoration: none; border-bottom: 1px solid; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  margin: 0;
}
h2, h3 { color: var(--heading); }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link {
  position: absolute; left: .75rem; top: -4rem; z-index: 100;
  background: var(--orange); color: #fff; padding: .6rem 1rem; border-radius: 999px; text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: .75rem; }

.wrap { width: 100%; max-width: 70rem; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 48rem) { .wrap { padding-inline: 2rem; } }
.wrap-narrow { max-width: 48rem; }

.eyebrow {
  margin: 0;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--green);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 999px; padding: .8rem 1.5rem;
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; line-height: 1.2;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: transform .15s, background .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn-orange { background: var(--orange); color: #fff; }
.btn-orange:hover { background: color-mix(in srgb, var(--orange) 88%, #000); color: #fff; }
.btn-sm { padding: .5rem 1.1rem; font-size: .95rem; }

svg.i { width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Hell/Dunkel-Knopf zeigt, wohin man schaltet: hell der Mond, dunkel die Sonne. Die Variablen dreht der Dunkelmodus um. */
.icon-btn .i-moon { display: var(--show-moon, block); }
.icon-btn .i-sun { display: var(--show-sun, none); }
.ion { font-family: "Ionicons"; font-style: normal; font-weight: 400; line-height: 1; display: inline-block; -webkit-font-smoothing: antialiased; }

/* ---------- 4 Kopf und Menü ---------- */
.site-header { position: sticky; top: 0; z-index: 50; color: #fff; isolation: isolate; }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
.has-hero .site-header { margin-bottom: -4rem; }

.site-header::before, .site-header::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; transition: opacity .25s;
}
.site-header::before { background: var(--nav-green); opacity: 0; box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .4); }
.site-header::after { background: linear-gradient(180deg, rgba(25, 12, 0, .55), rgba(25, 12, 0, 0)); opacity: 1; }
.site-header.scrolled::before, .site-header.solid::before, .site-header.nav-open::before { opacity: 1; }
.site-header.scrolled::after, .site-header.solid::after, .site-header.nav-open::after { opacity: 0; }
/* Über dem Titelbild kein Schleier am oberen Rand; die Lesbarkeit des Menüs trägt ein leichter Schatten. */
.has-hero .site-header::after { opacity: 0; }
.has-hero .site-header:not(.scrolled):not(.nav-open) .brand,
.has-hero .site-header:not(.scrolled):not(.nav-open) .menu > li > a:not(:hover) { text-shadow: 0 1px 2px rgba(0, 0, 0, .65), 0 0 14px rgba(0, 0, 0, .4); }

.bar { display: flex; align-items: center; gap: .75rem; min-height: 4rem; }

.brand {
  display: flex; align-items: center; gap: .6rem; margin-right: auto;
  text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: #fff;
}
.brand-text { display: grid; gap: .15rem; line-height: 1.05; }
.brand-sub { font-family: var(--font-body); font-weight: 400; font-size: .72rem; letter-spacing: .01em; }
.has-hero .site-header:not(.scrolled):not(.nav-open) .brand-sub { font-weight: 600; text-shadow: 0 0 3px rgba(0, 0, 0, .75), 0 1px 8px rgba(0, 0, 0, .55); }
.brand-logo { width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 2px #fff; display: block; }

.icon-btn {
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .55); background: transparent; color: #fff;
  cursor: pointer; display: grid; place-items: center; padding: 0; flex: none;
}
.icon-btn:hover { background: rgba(255, 255, 255, .16); }
.burger { display: grid; }

/* Menü: auf dem Handy ein Feld unter der Leiste, ab Tablet in der Leiste */
.nav {
  display: none; position: absolute; left: 0; right: 0; top: 100%;
  padding: .5rem 1rem 1rem; background: var(--nav-green);
  max-height: calc(100vh - 4rem); overflow-y: auto; font-family: var(--font-display);
}
.nav-open .nav { display: block; }
.menu, .menu ul { list-style: none; margin: 0; padding: 0; }
.menu a {
  display: block; padding: .85rem .5rem; text-decoration: none; color: #fff;
  font-weight: 700; font-size: 1.1rem; border-bottom: 1px solid rgba(255, 255, 255, .2);
}
.menu .sub-menu a { padding-left: 1.5rem; font-weight: 400; font-size: 1rem; }
.menu .current-menu-item > a, .menu .current-menu-ancestor > a { color: #ffd199; }
.menu .menu-cta > a { background: var(--orange); border-radius: 999px; border-bottom: 0; margin-top: .75rem; text-align: center; color: #fff; }
.menu .menu-cta.current-menu-item { display: none; }

@media (min-width: 48rem) {
  .burger { display: none; }
  .nav { display: block; position: static; padding: 0; background: none; max-height: none; overflow: visible; }
  .menu { display: flex; align-items: center; gap: .25rem; }
  .menu > li { position: relative; }
  .menu a { border-bottom: 0; padding: .5rem .8rem; border-radius: 999px; font-size: 1.05rem; white-space: nowrap; }
  .menu a:hover, .menu a:focus-visible { background: #fff; color: var(--orange); }
  .menu .menu-cta > a { margin: 0 0 0 .5rem; padding: .5rem 1.1rem; font-size: .95rem; }
  .menu .menu-cta > a:hover { background: #fff; color: var(--orange); }
  .menu .current-menu-item > a, .menu .current-menu-ancestor > a { background: rgba(255, 255, 255, .18); color: #fff; }

  /* Untermenü (falls im Menü angelegt) */
  .menu .sub-menu {
    display: none; position: absolute; left: 0; top: 100%; z-index: 30; min-width: 14rem; margin-top: .5rem; padding: .5rem;
    background: var(--bg); border: 1px solid var(--line); border-radius: 1rem; box-shadow: var(--shadow);
  }
  .menu li:hover > .sub-menu, .menu li:focus-within > .sub-menu { display: block; }
  .menu li:has(> .sub-menu)::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: .75rem; }
  .menu .sub-menu a { color: var(--ink); font-weight: 400; font-size: .97rem; border-radius: var(--radius-sm); padding: .6rem .9rem; white-space: normal; }
  .menu .sub-menu a:hover { background: var(--surface); color: var(--orange-ink); }
}

/* ---------- 5 Artikelkopf ---------- */
.entry-head { position: relative; isolation: isolate; }
.entry-head-body { max-width: 46rem; padding-block: 2.5rem 1.5rem; }
.entry-title { font-size: clamp(2rem, 5vw, 3.2rem); margin: .2rem 0 .7rem; }
.entry-meta { margin: 0; font-size: 1.05rem; color: var(--ink-soft); }

.entry-head.has-image { overflow: hidden; background: #1e1206; color: #fff; min-height: clamp(24rem, 56vh, 36rem); display: flex; align-items: flex-end; }
.entry-head.has-image > .wrap { padding-block: 0; }
.entry-head-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; z-index: -2; }
.entry-head.has-image::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(34, 18, 4, 0) 0%, rgba(34, 18, 4, 0) 40%, rgba(34, 18, 4, .62) 100%);
}
.entry-head.has-image .entry-head-body { padding-block: 8rem 2.5rem; }
.entry-head.has-image .entry-title { color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .4); }
.entry-head.has-image .eyebrow { color: #ffc46e; }
.entry-head.has-image .entry-meta { color: rgba(255, 255, 255, .88); }

.entry-head:not(.has-image) { background: var(--surface); border-bottom: 1px solid var(--line); }
.entry-head:not(.has-image) .entry-title { color: var(--heading); }
/* Schmale Bildschirme: Das Bild steht ganz oben und ist vollständig zu sehen (das Menü liegt transparent darüber), der Titel folgt darunter. */
@media (max-width: 47.99rem) {
  .entry-head.has-image { display: block; min-height: 0; overflow: visible; background: none; color: inherit; }
  .entry-head.has-image::before { display: none; }
  .entry-head-img { position: static; display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: 28rem; }
  .entry-head.has-image .entry-head-body { padding-block: 1.5rem .5rem; }
  .entry-head.has-image .entry-title { color: var(--heading); text-shadow: none; }
  .entry-head.has-image .entry-meta { color: var(--ink-soft); }
}

/* ---------- 6 Layout und Text ---------- */
/* Ein gemeinsames Raster für Kopf, Titel und Text:
   --text    Breite der Textspalte (40rem, etwa 75 Zeichen je Zeile).
   Ab 64rem steht rechts die Seitenleiste (19rem). Ab 90rem (1440px) steht der Text exakt mittig im Fenster und die
   Seitenleiste im rechten Rand daneben (--sg Abstand, 3 bis 5rem; --side Breite, bei knappem Platz unter 19rem).
   Logo und Menü im Kopf laufen auf derselben Kante wie Text und Seitenleiste. */
:root { --text: 40rem; }
.layout { display: grid; gap: 3rem; padding-block: 2.5rem 4rem; }
.entry-content { max-width: var(--text); }
@media (min-width: 64rem) {
  .layout.wrap, .entry-head > .wrap, .site-header > .wrap { max-width: 67rem; } /* Text 40 + Abstand 4 + Seitenleiste 19 + Seitenrand 2 x 2 */
  .layout { grid-template-columns: minmax(0, var(--text)) 19rem; column-gap: 4rem; align-items: start; }
}
@media (min-width: 90rem) {
  :root {
    --sg: clamp(3rem, calc(3rem + (100vw - 90rem) / 7), 5rem);
    --side: min(19rem, calc((100vw - var(--text) - 4rem) / 2 - var(--sg)));
  }
  .layout.wrap, .entry-head > .wrap { max-width: none; }
  .layout { grid-template-columns: minmax(0, 1fr) minmax(0, var(--text)) minmax(0, 1fr); justify-content: normal; column-gap: 0; }
  .layout > .entry-content { grid-column: 2; }
  .layout > .sidebar { grid-column: 3; justify-self: start; width: var(--side); margin-left: var(--sg); }
  .entry-head-body { margin-left: calc((100% - var(--text)) / 2); }
  .site-header > .wrap { max-width: none; padding-inline: 0; width: calc(var(--text) + var(--sg) + var(--side)); margin-inline: calc((100% - var(--text)) / 2) 0; }
}
@media (max-width: 63.99rem) {
  .sidebar { max-width: 32rem; }
}

.entry-page { padding-block: 1.5rem 4rem; }
.page-head .entry-title { color: var(--heading); margin-top: 1rem; }

.entry-content { min-width: 0; }
.entry-content > :first-child { margin-top: 0; }
.entry-content p, .entry-content li { font-size: 1rem; line-height: 1.7; }
@media (min-width: 64rem) {
  .entry-content p, .entry-content li { font-size: 1.0625rem; line-height: 1.75; }
}
.entry-content :where(a:not([class*="wp-block-button"]):not(.linkbtn)) { text-decoration: underline dotted; text-underline-offset: 3px; }
.entry-content :where(a:not([class*="wp-block-button"]):not(.linkbtn)):hover { color: var(--link-hover); }

.entry-content h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin: 2.2em 0 .6em; }
.entry-content h3 { font-size: clamp(1.4rem, 2.6vw, 1.7rem); margin: 1.8em 0 .5em; }
.entry-content h4 { font-size: 1.25rem; margin: 1.5em 0 .4em; color: var(--ink); }
.entry-content h5, .entry-content h6 { font-size: 1.1rem; margin: 1.4em 0 .4em; color: var(--ink); }
.entry-content h4.appheader { margin-top: .4em; }

.entry-content ul, .entry-content ol { margin: 0 0 1.5em 1.3rem; padding: 0; }
.entry-content li { margin: .3em 0; }
.entry-content ul.wp-block-list { clear: both; }
.entry-content blockquote { margin: 1.5em 0; padding: .2em 0 .2em 1.2rem; border-left: 4px solid var(--green); font-style: normal; }
.entry-content table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .95rem; }
.entry-content th, .entry-content td { padding: .6rem .8rem; border-bottom: 1px solid var(--line); text-align: left; }
.entry-content th { font-family: var(--font-display); color: var(--heading); }
.entry-content hr, .wp-block-separator { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

.appheader { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; line-height: 1.3; color: var(--ink-soft); margin: .6rem 0; }
/* Einstiegsabsatz unter dem Titel (Subhead). Mit .entry-content, sonst gewinnt die allgemeine Absatzgröße. */
.entry-content .appheader { font-size: clamp(1.3rem, 2.2vw, 1.5rem); line-height: 1.3; margin: .2rem 0 1.2rem; }
.noshow { display: none; }
.wichtig { font-size: 1.3rem; line-height: 1.3; }
.gruentext { color: var(--green); }
.linkneutral a { color: inherit; border-bottom: 1.2pt dotted; text-decoration: none; }

/* ---------- 7 Blöcke ---------- */
/* Abstandssystem im Artikeltext. Drei Größen, keine Einzelfall-Korrekturen:
   --hang   Boxen mit Hintergrund ragen so weit links und rechts über die Textkante hinaus. Der Text darin steht bündig
            mit dem Fließtext. Der Wert ist gleich dem Seitenrand auf dem Handy, dort laufen Boxen deshalb ohne Sonderregel
            bis an den Bildschirmrand.
   --media  Standardbreite von Bildern (480px).
   --gap    Abstand zwischen Elementen.
   --media-gap  Abstand über und unter Bildern. */
.entry-content { --hang: 1rem; --media: 30rem; --gap: 1.5rem; --media-gap: 5rem; }
.wp-block-spacer { clear: both; }

/* Alle Boxen mit Hintergrund: gleiche Hängung, gleicher Radius, gleiche Abstände */
.entry-content :is(.toner, .colorback, .alternate, .testimonial-block, .blaubox, .gruenbox) {
  margin: var(--gap) calc(-1 * var(--hang));
  padding: .8rem var(--hang);
  border-radius: var(--radius-sm);
}
.entry-content .alternate { padding: 0; list-style-position: inside; }
.entry-content ul.colorback, .entry-content ol.colorback { padding-left: calc(var(--hang) + 1.3rem); }
.entry-content blockquote.toner { border-left: 0; }
.entry-content .toner > :last-child { margin-bottom: 0; }
.colorback, .toner { background: var(--tint-gruen); }
.colorback.blue { background: var(--tint-blau); }
.orange { background: var(--tint-orange) !important; }

/* Bild mit farbiger Unterschrift. Die Farbklasse steht am Div um das Figure (Standardschreibweise des Blocks).
   Bild und Unterschrift bilden eine zentrierte Einheit von höchstens --media Breite. */
.wp-block-image { margin: var(--media-gap) 0; }
.testimonial-block .wp-block-image { margin: 0; }
.entry-content .wp-block-image:not(.is-style-rounded) figure { display: table; margin: 0 auto; }
.entry-content .wp-block-image.is-style-rounded figure { margin: 0; }
.wp-block-image figure.alignleft { float: left; margin-right: 1.5rem; }
.wp-block-image figure.alignright { float: right; margin-left: 1.5rem; }
.wp-block-image figure > img { display: block; max-width: var(--media); height: auto; }
.wp-block-image:not(.is-style-rounded) img { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.wp-block-image:not(:has(figcaption)):not(.is-style-rounded) img { border-radius: var(--radius-sm); }
.wp-block-image.rundvier img { border-radius: var(--radius-sm); }
.wp-block-image.is-style-rounded img { border-radius: 50%; }
.wp-block-image figcaption, .wp-block-embed figcaption {
  display: table-caption; caption-side: bottom;
  margin: 0; padding: 1rem var(--hang) 1.75rem; font-size: 1rem; line-height: 1.6; text-align: left;
  color: #fff; background: var(--cap-mittelgrau); border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.wp-block-image figcaption a { color: inherit; }
.hellgruen figcaption { background: var(--cap-hellgruen); }
.mittelgrau figcaption { background: var(--cap-mittelgrau); }
.gruengrau figcaption { background: var(--cap-gruengrau); }
.gruen figcaption { background: var(--cap-gruen); }
.darkergruen figcaption { background: var(--cap-darkergruen); }
.dunkelgruen figcaption { background: var(--cap-dunkelgruen); }
.dunkelbraun figcaption { background: var(--cap-dunkelbraun); color: #f2f0ea; }
.mittelblau figcaption { background: var(--cap-mittelblau); }
.mittelrot figcaption { background: var(--cap-mittelrot); }
.extrazitat figcaption { font-size: 1.7rem; line-height: 1.35; font-style: italic; }
/* Der kleinere Zusatz steht als eigener Block, sonst bestimmt die große Zitatschrift den Zeilenabstand der Zeile. */
.extrazitat figcaption strong { display: block; margin-top: .5rem; font-size: 1.1rem; line-height: 1.4; font-style: normal; font-weight: 400; }
.wp-block-image:has(+ .blaublock) figcaption { border-radius: 0; }

/* Knöpfe: Pille in Orange, Chevron davor (gezeichnet, damit er mittig zur Schrift sitzt) */
.wp-block-buttons { margin: 1.75rem 0; }
.wp-block-button__link, .linkbtn {
  display: inline-flex; align-items: center; justify-content: flex-start; gap: .55rem;
  width: 100%; max-width: 21.875rem; padding: .75rem 1.5rem .75rem 1.2rem; border: 0; border-radius: 999px;
  background: var(--orange); color: #fff; text-align: left; text-decoration: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.2;
  transition: background .15s, transform .15s;
}
.wp-block-button__link::before, .linkbtn::before {
  content: ""; flex: none; width: .5em; height: .5em; margin-right: .1em;
  border-top: .16em solid currentColor; border-right: .16em solid currentColor; transform: rotate(45deg);
}
.wp-block-button__link:hover, .linkbtn:hover { background: var(--green-solid); color: #fff; transform: translateY(-1px); }
.wp-block-button__width-75 { width: auto !important; }
.ghost .wp-block-button__link, .ghost a { background: transparent; color: var(--orange-ink); border: 2px solid var(--orange); }
.ghost .wp-block-button__link:hover, .ghost a:hover { background: var(--green-solid); border-color: var(--green-solid); color: #fff; }

.wp-block-audio audio, .widget audio { width: 100%; }
.wp-block-video, .wp-block-embed { margin: 2rem 0; }
.wp-block-embed iframe, .entry-content iframe { max-width: 100%; }

/* Listen */
ul.custom-bullets { list-style: none; padding-left: 0; margin-left: 0; }
ul.custom-bullets li { margin-bottom: .6rem; padding-left: 2.2rem; position: relative; }
/* Haken, Pfeil und Kreuz sind gezeichnet (Maske) und so hoch wie die Textzeile: dadurch sitzen sie mittig zur ersten Zeile,
   in jeder Schrift. Manche Beiträge bringen eigene Styles mit (Textzeichen, Verschiebung um -27px, padding mit !important);
   die längeren Selektoren hier setzen sich dagegen durch. */
.entry-content ul.custom-bullets > li { padding-left: 2.2rem !important; margin-bottom: .6rem !important; }
.entry-content ul.custom-bullets > li::before {
  content: ""; position: absolute; left: .4rem; top: 0; font-size: inherit; line-height: inherit; width: 1.1em; height: 1.75em; transform: none !important;
  background: var(--green); border-radius: 0;
  -webkit-mask: var(--ico-check) center / contain no-repeat; mask: var(--ico-check) center / contain no-repeat;
}
.entry-content ul.custom-bullets > li.downred::before { font-size: inherit; line-height: inherit; background: #e32000; -webkit-mask-image: var(--ico-cross); mask-image: var(--ico-cross); }
.entry-content ul.custom-bullets.pfeil > li::before { font-size: inherit; line-height: inherit; background: var(--green); -webkit-mask-image: var(--ico-arrow); mask-image: var(--ico-arrow); width: 1em; }
.entry-content ul.alternate.custom-bullets > li { padding-left: calc(var(--hang) + 1.8rem) !important; margin-bottom: .5rem !important; }
.entry-content ul.alternate.custom-bullets > li::before { left: var(--hang); top: .8rem; }

.alternate > li { margin: 0; padding: .8rem var(--hang); }
.alternate > li:nth-child(odd), .alternate-blue > li:nth-child(odd), .alternate-red > li:nth-child(odd) { border-radius: var(--radius-sm); }
.alternate > li:nth-child(odd) { background: var(--tint-gruen); }
.alternate-blue > li:nth-child(odd) { background: var(--tint-blau); }
.alternate-red > li:nth-child(odd) { background: var(--tint-orange); }

/* Farbige Textboxen */
.blaubox, .gruenbox { color: #fff; }
.entry-content :is(.blaubox, .gruenbox) { margin-top: 150px; }
@media (max-width: 47.99rem) { .entry-content :is(.blaubox, .gruenbox) { margin-top: 90px; } }
.blaubox { background: var(--box-blau); }
.gruenbox { background: var(--box-gruen); }
.blaubox h2, .gruenbox h2, .blaubox h3, .gruenbox h3 { color: #fff; margin-top: 0; }

/* Gruppen mit Rezension und Autor */
.testimonial-block { background: var(--surface); }
.entry-content .testimonial-block { padding-block: 1.25rem; }
.testimonial-block:not(#autor-block) > .wp-block-group__inner-container {
  display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: center;
  grid-template-areas: "pic name" "pic type" "head head" "text text";
}
.testimonial-block .testimonial-bild { grid-area: pic; margin: 0; }
/* Portraits in Rezensionen sind rund. Die Selektorlänge übertrifft die allgemeine Bildregel („Bild ohne Unterschrift“). */
.entry-content .testimonial-block .testimonial-bild.wp-block-image img { width: 4rem !important; height: 4rem !important; border-radius: 50%; object-fit: cover; display: block; }
.testimonial-name { grid-area: name; margin: 0; font-weight: 600; font-size: .95rem; align-self: end; }
.testimonial-type { grid-area: type; margin: 0; font-size: .9rem; color: var(--ink-soft); align-self: start; }
/* Die Teile der Zeile („Rezension Foodfibel |“, „Typ A-Krieger“) brechen nur als Ganzes um (Markup siehe functions.php, ff_testimonial_type). */
.testimonial-type .seg { display: inline-block; }
/* Überschrift der Rezension: gehört zum Text darunter, deshalb knappe Abstände (mit .entry-content, sonst gewinnt die allgemeine h3-Regel). */
.entry-content .testimonial-header { grid-area: head; margin: .9rem 0 .3rem; font-size: 1.45rem; line-height: 1.15; color: var(--heading); }
.testimonial-header::before { content: "★★★★★"; display: block; margin-bottom: .3rem; font-family: var(--font-body); font-size: .95rem; letter-spacing: .1em; color: #ff9900; }
/* Rezensionstext: kann aus mehreren Absätzen bestehen, die untereinander fließen (kein gemeinsamer Rasterbereich, sonst überlagern sie sich). */
.testimonial-text { grid-column: 1 / -1; margin: 0 0 .8em; }
.testimonial-text:last-child { margin-bottom: 0; }
.testimonial-block:not(#autor-block) > .wp-block-group__inner-container > :not(.testimonial-bild):not(.testimonial-name):not(.testimonial-type):not(.testimonial-header):not(.testimonial-text) { grid-column: 1 / -1; }
/* Blaue Box direkt unter einem Bild: gleiche Breite wie das Bild, zentriert, bündig anschließend */
.entry-content .testimonial-block.blaublock { background: var(--box-blau); color: #fff; max-width: var(--media); margin-inline: auto; margin-top: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.entry-content .wp-block-image + .blaublock { margin-top: calc(-1 * var(--media-gap)); }
.blaublock .testimonial-header, .blaublock .testimonial-type, .blaublock .testimonial-name { color: #fff; }

#autor-block { background: #313331; color: #e1e1e1; }
.entry-content #autor-block { padding-block: 1.5rem; }
#autor-block p { color: #e1e1e1; }
#autor-block img { width: 90px !important; }
#autor-block a { color: #fff; }

.produkt, .biohack { grid-template-columns: 60px auto !important; background: var(--card); border: 1px solid var(--card-line); box-shadow: var(--card-shadow); border-radius: var(--radius-sm); padding: 0; margin-bottom: .9rem; }
.produkt { max-width: 22.5rem; }
.biohack { margin-bottom: 1.5rem; }
/* Produktblock: Bildspalte fest (7,5rem), Innenabstand rundherum, kleiner Abstand zwischen Bild und Text.
   Die Blöcke bringen ihre Spaltenbreite inline mit (15% auto), daher !important. */
.wp-block-media-text.biohack { grid-template-columns: 7.5rem 1fr !important; column-gap: 1.25rem; padding: 1.25rem; }
.biohack figure.wp-block-media-text__media { margin: 0 !important; }
.biohack .wp-block-media-text__content { padding: 0 !important; }
.biohack .wp-block-media-text__content > :first-child { margin-top: 0; }
.biohack .wp-block-media-text__content > :last-child, .biohack .wp-block-media-text__content > :last-child.wp-block-buttons { margin-bottom: 0; }
.entry-content .produkt a, .entry-content .biohack a:not([class*="wp-block-button"]) { color: inherit; border: 0; text-decoration: none; }
.entry-content .produkt a:hover { color: var(--link-hover); text-decoration: underline dotted; text-underline-offset: 3px; }
.wp-block-media-text__media img, .wp-block-media-text__media video { border-radius: var(--radius-sm); }

.alpha-menu a { display: inline-block; width: 2.6rem; margin: 1px; padding: .2rem .4rem; text-align: center; text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; border-radius: 4px; background: var(--surface); color: inherit; }
.alpha-menu a:hover, .alpha-menu a:focus { background: var(--green-solid); color: #fff; }

.entry-content .sport-nav ul, .entry-content .rezepte-nav ul { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.entry-content .sport-nav li, .entry-content .rezepte-nav li { margin: 0; }
.sport-nav ul li a, .rezepte-nav ul li a {
  border-bottom: 0; background: var(--green-deep); color: #fff !important; padding: .2rem 1.5rem; border-radius: 999px;
  line-height: 2.1; font-size: .95rem; min-width: 11rem; text-decoration: none; display: inline-block; text-align: left;
}
.sport-nav ul li a:hover, .rezepte-nav ul li a:hover { background: var(--orange); }

/* FAQ-Klappfragen */
.faq-frage { position: relative; cursor: pointer; background: var(--bg); padding: .6rem 1.2rem .6rem 3rem; border: 1px solid var(--line); border-radius: var(--radius-sm); margin: .3rem 0 1rem; font-size: 1.2rem; }
.faq-antwort { background: var(--bg); overflow: hidden; max-height: 0; transition: max-height .5s ease-in-out; }
.faq-frage.active + .faq-antwort { display: block; max-height: 1000px; }

/* Handy: --hang ist gleich dem Seitenrand, Boxen reichen damit bis an den Rand. Es bleiben nur gerade Kanten und volle Bildbreite. */
@media (max-width: 47.99rem) {
  .entry-content .wp-block-image:not(.is-style-rounded) figure { display: block; width: calc(100% + 2 * var(--hang)); margin-inline: calc(-1 * var(--hang)) 0; }
  /* Im Editor skalierte Bilder (is-resized) tragen die Breite direkt am Bild (style="width:600px"); sie überstimmt nur !important. */
  .wp-block-image figure > img { max-width: none; width: 100% !important; height: auto !important; }
  .entry-content .testimonial-block.blaublock { max-width: none; margin-inline: calc(-1 * var(--hang)); }
  .entry-content .wp-block-image figure > figcaption { display: block; width: auto; }
  .wp-block-image:not(.is-style-rounded):not(.testimonial-bild) img, .wp-block-image figcaption,
  .entry-content :is(.toner, .colorback, .testimonial-block, .blaubox, .gruenbox), .alternate > li { border-radius: 0 !important; }
  .wp-block-buttons > .wp-block-button, .wp-block-button__link { width: 100%; }
  .entry-content { --media-gap: 4rem; }
}

/* Handy: Die Produktblöcke der Biohacking-Seite stapeln (Bild oben, darunter Text und Link). Die Blöcke haben das Stapeln im
   Editor abgeschaltet und eine feste Spaltenbreite inline gesetzt, daher hier mit !important. */
@media (max-width: 37.5rem) {
  .wp-block-media-text.biohack { grid-template-columns: 100% !important; column-gap: 0; padding: 0; }
  .biohack .wp-block-media-text__media { grid-column: 1; grid-row: 1; }
  .biohack .wp-block-media-text__content { grid-column: 1; grid-row: 2; padding: 1rem 1.25rem 4.5rem !important; }
  .biohack figure.wp-block-media-text__media { max-width: 12rem; margin: 3rem 1.25rem 0 !important; }
}

/* Sehr schmal: Produktzeilen laufen über die ganze Breite, ohne Rahmen, Schatten und Rundung; eine Linie trennt sie. */
@media (max-width: 25rem) {
  .produkt, .biohack { margin-inline: calc(-1 * var(--hang)); max-width: none; border-width: 0 0 1px; border-color: var(--rule); border-radius: 0; box-shadow: none; margin-bottom: 0; }
  .biohack { border-bottom-width: 2px; }
}

/* ---------- 9 Seitenleiste ---------- */
/* Eine feste Spalte: ohne sie zieht das breiteste Widget (z. B. ein 600px-Bild) die Spalte über die Seitenleiste hinaus. */
.sidebar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-content: start; min-width: 0; }
.widget { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 1.25rem 1.4rem; font-size: .95rem; line-height: 1.55; }
.widget-title { margin: 0 0 .8rem; font-size: 1.15rem; letter-spacing: .02em; color: var(--heading); }
.widget p { font-size: inherit; }
.widget img { border-radius: .75rem; display: block; max-width: 100%; height: auto; }
.widget .wp-caption { max-width: 100%; width: auto !important; }
.widget .wp-caption-text { font-size: .875rem; margin: .6rem 0 0; text-align: left; }
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget a { text-decoration: none; }
.widget a:not(.wp-block-social-link-anchor):hover { color: var(--link-hover); }
/* Linklisten (z. B. „Blog-Artikel“): jede Zeile mit feiner Linie. Der Social-Block (Icons) ist ausgenommen, er bringt sein eigenes Layout mit. */
.widget ul:not(.wp-block-social-links) li a { display: block; padding: .5rem 0; border-top: 1px solid var(--hair); font-size: .93rem; line-height: 1.35; }
.widget ul:not(.wp-block-social-links) li:first-child a { border-top: 0; }
.widget_text .textwidget > a, .widget_custom_html .textwidget > a { display: block; padding: .5rem 0; font-weight: 600; }
.widget iframe { width: 100%; border: 0; border-radius: .6rem; background: #fff; }
.widget .wp-block-social-links { margin: 0; }
.widget .mejs-container { border-radius: 4px; }

/* ---------- 10 Übersicht, Suche, 404 ---------- */
.list-head { background: var(--surface); border-bottom: 1px solid var(--line); padding-block: 3rem 2.5rem; }
.list-head h1 { font-size: clamp(2rem, 5vw, 3rem); color: var(--heading); margin: .5rem 0; }
.list-intro { margin: 0; max-width: 40rem; color: var(--ink-soft); font-size: 1.1rem; }
.list-wrap { padding-block: 2.5rem 4rem; }
.empty { padding: 2rem 0; font-size: 1.1rem; }

.search-form { display: flex; max-width: 28rem; margin-top: 1.5rem; position: relative; }
.search-field {
  flex: 1; min-width: 0; padding: .75rem 3.2rem .75rem 1.2rem; font: inherit; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
}
.search-field:focus { outline: 3px solid var(--orange); outline-offset: 2px; }
.search-submit { position: absolute; right: .3rem; top: .3rem; bottom: .3rem; width: 2.6rem; border: 0; border-radius: 50%; background: var(--green-deep); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.search-submit:hover { background: var(--orange); }

.card-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.card { display: grid; grid-template-rows: auto 1fr; background: var(--card); border: 1px solid var(--card-line); box-shadow: var(--card-shadow); border-radius: var(--radius); overflow: hidden; transition: transform .2s, box-shadow .2s; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card-img img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.card-body { display: grid; gap: .7rem; align-content: start; padding: 1.25rem 1.4rem 1.5rem; }
.card:not(:has(.card-img)) .card-body { padding-top: 1.75rem; }
.card-title { font-size: 1.4rem; line-height: 1.2; }
.card-title a { text-decoration: none; color: var(--heading); }
.card-title a:hover { color: var(--link-hover); }
.card-text { margin: 0; font-size: .95rem; color: var(--ink-soft); line-height: 1.55; }
.card-more { font-family: var(--font-display); font-weight: 700; color: var(--orange-ink); text-decoration: none; width: fit-content; }
.card-more::after { content: " →"; }
.card-more:hover { text-decoration: underline; text-underline-offset: 3px; }

.pagination { margin-top: 3rem; }
.nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.page-numbers { display: inline-block; padding: .5rem 1rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; font-family: var(--font-display); font-weight: 700; }
a.page-numbers:hover { background: var(--surface); color: var(--orange-ink); }
.page-numbers.current { background: var(--green-deep); border-color: var(--green-deep); color: #fff; }
.page-numbers.dots { border: 0; }

/* ---------- 11 Fuß ---------- */
.site-footer { background: var(--foot-green); color: #ddd; font-size: .95rem; }
.foot { display: grid; gap: 2rem; padding-block: 3.5rem 3rem; }
@media (min-width: 52rem) { .foot { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.foot-title { margin: 0 0 .8rem; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.site-footer p, .site-footer address { margin: 0; color: #f1f1f1; font-style: normal; }
.site-footer a { text-decoration: none; color: inherit; }
.site-footer a:hover { color: #fff; }
.site-footer .btn { margin-top: 1.25rem; color: #fff; white-space: normal; text-align: center; }
.fi { display: flex; gap: .6rem; align-items: baseline; margin-bottom: .4rem !important; }
.fi .ion { color: #fff; font-size: 1.1rem; width: 1.1rem; text-align: center; flex: none; }
.social { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.social a { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; color: #fff; }
.social a:hover { color: #ffd199; }
.social .ion { font-size: 1.8rem; }
.social svg { width: 1.45rem; height: 1.45rem; fill: currentColor; }
.foot-bottom { background: var(--foot-dark); color: #c8c8c8; font-size: .875rem; }
.foot-bottom .wrap { display: grid; gap: .5rem; padding-block: 1.25rem; }
.foot-bottom p, .foot-bottom a { color: #c8c8c8; }
.foot-line { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; }
.foot-menu { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; list-style: none; margin: 0; padding: 0; }

.to-top {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40; width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--orange); color: #fff; display: grid; place-items: center;
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5);
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: #fff; color: var(--orange); }

/* ---------- 12 Plugins ---------- */
.mejs-container, .mejs-container * { border-radius: 4px; }
.mejs-controls .mejs-horizontal-volume-slider { border: 0; }
.ti-footer, .ti-rating-text span.nowrap:nth-child(3) { display: none; }
/* Trustindex-Rezensionen sehen aus wie die Rezensionsboxen des Themes (Fläche, Rundung, Schrift, Bildgröße), hell und dunkel.
   Das Plugin setzt eigene Werte mit !important, daher die höhere Spezifität. */
html .ti-widget[data-layout-id][data-set-id] .ti-review-item .ti-inner {
  background-color: var(--surface) !important; border: 0 !important; border-radius: var(--radius-sm) !important;
  box-shadow: none !important; padding: 1.25rem 1rem !important; color: var(--ink) !important;
}
html .ti-widget[data-layout-id][data-set-id] .ti-review-item :is(.ti-name, .ti-review-content, .ti-read-more, .ti-read-more span) { color: var(--ink) !important; }
html .ti-widget[data-layout-id][data-set-id] .ti-review-item .ti-name { font-size: 1rem !important; font-weight: 600 !important; }
html .ti-widget[data-layout-id][data-set-id] .ti-review-item .ti-review-content { font-size: 1rem !important; line-height: 1.7 !important; }
html .ti-widget[data-layout-id][data-set-id] .ti-review-item .ti-date { color: var(--muted) !important; font-size: .875rem !important; }
html .ti-widget[data-layout-id][data-set-id] .ti-review-item .ti-profile-img { width: 4rem !important; height: 4rem !important; flex: none; }
html .ti-widget[data-layout-id][data-set-id] .ti-review-item .ti-profile-img img { width: 100% !important; height: 100% !important; border-radius: 50% !important; object-fit: cover; }
html .ti-widget[data-layout-id][data-set-id] .ti-review-item .ti-read-more { font-size: .9375rem !important; }
html .ti-widget[data-layout-id][data-set-id] .ti-review-item .ti-review-text-container { padding: 0 !important; }
/* Wie die anderen Boxen: um --hang über die Textkante, auf dem Handy bis an den Rand mit geraden Ecken. */
.entry-content > .ti-widget.ti-widget { margin: var(--gap) calc(-1 * var(--hang)); width: calc(100% + 2 * var(--hang)) !important; max-width: none !important; }
@media (max-width: 47.99rem) {
  html .ti-widget[data-layout-id][data-set-id] .ti-review-item .ti-inner { border-radius: 0 !important; }
}
/* Zeile „Google-Bewertungen“ im Seitentext (Farbe steht direkt im Inhalt) */
.googlestars div { color: var(--muted) !important; }
.ti-stars img.ti-star { opacity: 0 !important; }
span.ti-stars::before { content: "★★★★★" !important; color: #ff9000; font-size: 1.2em; display: inline; }

/* ---------- 13 Sonderfälle und Dunkelmodus ---------- */
/* Alte Zeile „Aktualisiert am“, die ein Snippet ans Ende des Textes setzt. Das Datum steht jetzt im Artikelkopf. */
#post-modified-info { display: none; }

/* Infoseite zur App (Funnel): Der Leser soll über den Button zur App weitergehen.
   Kein Menüpunkt und kein Fußknopf, die auf die Seite selbst zeigen; ohne Seitenleiste, sobald sie unter dem Text stünde;
   auf dem Handy auch ohne Fuß, wie bisher. */
.ff-funnel .menu-cta, .ff-funnel .site-footer .btn { display: none; }
@media (max-width: 63.99rem) {
  .ff-funnel .sidebar { display: none; }
}
@media (max-width: 37.5rem) {
  .ff-funnel .site-footer { display: none; }
}

.ff-bare .entry-page { padding-top: 1rem; }

:root[data-theme="dark"] .entry-content img:not(.emoji),
:root[data-theme="dark"] .card-img img,
:root[data-theme="dark"] .widget img { filter: brightness(.88); }
:root[data-theme="dark"] .widget iframe { filter: brightness(.8); }
:root[data-theme="dark"] .produkt, :root[data-theme="dark"] .biohack { background: var(--surface-2); }
:root[data-theme="dark"] .wichtig, :root[data-theme="dark"] .faq-frage { color: var(--ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .entry-content img:not(.emoji),
  :root:not([data-theme="light"]) .card-img img,
  :root:not([data-theme="light"]) .widget img { filter: brightness(.88); }
}

/* ---------- 14 Hinweisleiste am unteren Rand (ersetzt das Cookie-Banner) ---------- */
.ff-hinweis { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--foot-green); color: #fff; box-shadow: 0 -6px 24px -12px rgba(0, 0, 0, .5); }
.ff-hinweis[hidden] { display: none; }
.ff-hinweis .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; padding-block: .9rem; }
.ff-hinweis p { margin: 0; flex: 1 1 18rem; font-size: .93rem; line-height: 1.5; }
.ff-hinweis a { color: inherit; text-decoration: underline; }

/* ---------- 15 Startseite und Newsletter-Anmeldung unter der Übersicht ---------- */
.list-newsletter { max-width: 26rem; margin: 3rem auto 0; }

/* Startseite (front-page.php): linke Spalte mit Seitentext und Ausgaben im selben Raster wie eine Ausgabe,
   rechts die Seitenleiste. Abstandshalter aus dem Seitentext sind begrenzt, die Abstände setzt das Theme. */
.front-main { min-width: 0; max-width: var(--text); }
@media (min-width: 90rem) {
  .layout > .front-main { grid-column: 2; }
}
.front-title { color: var(--heading); margin: 0 0 1rem; }
.front-intro .wp-block-spacer { max-height: 1rem; }
.front-intro h2 { margin-top: 1.4em; }
.front-intro > :last-child, .front-intro .wp-block-group__inner-container > :last-child { margin-bottom: 0; }
.list-title { margin: 2.5rem 0 1.25rem; color: var(--heading); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}