/* Zitronenbande Design – generiert aus assets/css/src/ (2026-09-27 10:57). NICHT direkt bearbeiten. */

/* ===== 00-tokens.css ===== */
/* ---------------------------------------------------------------------------
   00 Tokens – Light (Standard) und Dark (html.zb-dark). Alles unter body.zb-v2.
   Astra-Variablen werden gemappt, damit Astra-Komponenten (Kommentare, Inputs,
   Footer, Buttons) automatisch mitgehen. Konvention: Content-Regeln beginnen mit
   `body.zb-v2 #content`, Header mit `body.zb-v2 #masthead`, Footer `body.zb-v2 #colophon`.
   --------------------------------------------------------------------------- */
body.zb-v2 {
  /* Flächen */
  --zb-bg: #F6F7FB;
  --zb-surface: #FFFFFF;
  --zb-card: #E4E9F2;
  --zb-card-2: #EEF2F8;
  --zb-hero: #E9F0FA;
  --zb-border: #D9E0EC;
  --zb-header: #F6F7FB;
  --zb-footer: #FFFFFF;
  --zb-panel: #EEF2F8;        /* Autorenbox, App-Sektion, Kommentar-Karte (Story-Artboard) */
  --zb-panel-inner: #FFFFFF;  /* Notizkarte, App-Bewertung */
  --zb-rule: #1A3A61;         /* Trennlinien der Textsektion – Artboard nutzt Navy in Light UND Dark */
  --zb-band-hero: var(--zb-hero); /* vollflächiges Hero-Band (design.js malt es auf #content) */
  --zb-band-alt: transparent;     /* zweites Hub-Band („Beliebt im …“): Light ohne Fläche (Hero ist schon blau), Dark eine kleine Stufe heller */
  --zb-hero-img: none;           /* Bild-Ebene über dem Hero-Band (design.js setzt Größe/Position) – Dark Story-Hero: Nachthimmel */
  /* Text */
  --zb-ink: #0B294E;
  --zb-body: #3B4A63;
  --zb-meta: #5B6780;      /* Design: #6B7790 – für AA-Kontrast auf hellem Grund leicht abgedunkelt */
  --zb-link: #1F5FA8;
  --zb-link-hover: #0B294E;
  --zb-link-weight: 600;        /* Textlinks „V1 Fett + Farbe“ (Torben 18.09., Artifact „Linkstile ohne Unterstreichung“): Gewicht als zweites Signal neben der Farbe (WCAG 1.4.1) */
  --zb-link-hover-line: underline; /* Hover: Linie zurück */
  /* Akzent + Buttons */
  --zb-accent: #FAB72D;
  --zb-accent-hover: #F2A916;
  --zb-accent-active: #E29B0C;  /* Button gedrückt: eine Stufe dunkler als Hover */
  --zb-on-accent: #1F1F1F;
  --zb-btn2: #0B294E;
  --zb-btn2-hover: #1A3A61;
  --zb-on-btn2: #FFFFFF;
  --zb-btn-sec: #406694;        /* Story-Artboard: „In der App anhören“ (Light + Dark gleich) */
  --zb-btn-sec-hover: #355780;
  --zb-btn-sec-active: #2B4A6E;
  --zb-btn2-active: #061A36;
  --zb-light-active: #D7DFEB;   /* heller Button (Hub „Suche“) gedrückt */
  --zb-chip: #E4E9F2;
  --zb-chip-ink: #0B294E;
  --zb-badge: #0B294E;
  --zb-on-badge: #FFFFFF;
  --zb-focus: #FAB72D;
  /* Raster: EINE Containerbreite für Header, Inhalt (Astra-Container + Spectra-Root-Container) und Footer, damit Logo,
     Text und Footer-Zeile bündig stehen (Torben 16.09.: „Logo weiter links als der erste Text“). 1160 = Artboard-Innenbreite 1120 + 2 × Gutter;
     das Menü braucht seit Torbens Umbau (7 Punkte, „Vorlesedauer“ als Untermenü) bei 1440 px 1047 px. Sidebar-Layouts (Story/Blog/Hub/Subhub)
     bleiben bei 1260 (Sidebar 336 + Lesespalte 680 + Hero-Cover 320) – der Header folgt je Seitentyp der Inhaltsbreite. */
  --zb-container: 1140px; /* FINAL (Torben 16.09. nach Vergleich 1140 vs. 1260: „die schmalere behalten“) = Astra-Standard der Live-Seite; alle Seiten gleich breit, Sidebar 336 (Mediavine 300/336), Spalte daneben 764 ≥ Lesespalte 680, Story-Cover 280 */
  --zb-gutter: 20px;
  /* Form */
  --zb-radius-sm: 12px;
  --zb-radius: 16px;
  --zb-radius-lg: 24px;
  --zb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Systemschrift (Mac/iOS: San Francisco) – Torben 18.09. nach dem Go-Live „live umstellen auf System“; Astra-Stack von vor dem Redesign */
  --zb-font-poppins: "Poppins", "Poppins Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; /* nur noch Testschalter ?zb-font=poppins (@font-face bleibt in 10-base, lädt nur bei Nutzung) */
  --zb-font-hand: "Caveat", "Bradley Hand", "Segoe Script", cursive; /* Autoren-Notiz (lokal, lädt nur wenn eine Notiz gerendert wird) */
  /* Astra-Mapping */
  --ast-global-color-0: var(--zb-link);
  --ast-global-color-1: var(--zb-ink);
  --ast-global-color-2: var(--zb-ink);
  --ast-global-color-3: var(--zb-body);
  --ast-global-color-4: var(--zb-bg);
  --ast-global-color-5: var(--zb-surface);
  --ast-global-color-6: var(--zb-card);
  --ast-global-color-7: var(--zb-meta);
  --ast-global-color-8: var(--zb-on-accent);
  --ast-border-color: var(--zb-border);
  --ast-comment-inputs-background: var(--zb-surface);
  --ast-code-block-background: var(--zb-card);
  background-color: var(--zb-bg);
  color: var(--zb-body);
}


html.zb-dark body.zb-v2 {
  --zb-bg: #072040;
  --zb-surface: #0B294E;
  --zb-card: #234773;           /* Dark-Palette FINAL (Torben 18.09.): „Ein Grund, helle Karten“ Stufe 2 – Grund = Band #0B294E, Karten zwei Stufen heller, Header eine Stufe dunkler */
  --zb-card-2: #2C5687;
  --zb-hero: #072040;
  --zb-border: #1A3A61;
  --zb-header: #072040;         /* eine Stufe dunkler als die Fläche, damit sich die Navigation abhebt */
  --zb-footer: #072040;
  --zb-panel: #234773;
  --zb-panel-inner: #0B294E;
  --zb-rule: #1A3A61;
  --zb-band-hero: var(--zb-surface); /* Band = Grund (unsichtbar), Karten heben sich allein ab */
  --zb-band-alt: #0F3057;
  --zb-ink: #FFFFFF;
  --zb-body: #D4D4E5;
  --zb-meta: #9999B7;
  --zb-link: #FAB72D;
  --zb-link-hover: #FFFFFF;
  --zb-link-weight: 600;        /* Dark: Fettung analog Light (Torben 18.09.); Hover-Linie bleibt aus – Gelb auf Navy ist allein klar erkennbar */
  --zb-link-hover-line: none;
  --zb-accent: #FAB72D;
  --zb-accent-hover: #FFC64A;
  --zb-accent-active: #EBA71E;  /* Dark: gedrückt wieder dunkler als Hover */
  --zb-on-accent: #1F1F1F;
  --zb-btn2: #234773;
  --zb-btn2-hover: #406694;
  --zb-on-btn2: #FFFFFF;
  --zb-btn-sec: #406694;
  --zb-btn-sec-hover: #4F7AAD;
  --zb-btn-sec-active: #5C8BC0;
  --zb-btn2-active: #4F7AAD;
  --zb-light-active: #4F7AAD;
  --zb-chip: #1A3A61;
  --zb-chip-ink: #D4D4E5;
  --zb-badge: #234773;
  --zb-on-badge: #FFFFFF;
  --ast-comment-inputs-background: var(--zb-card);
}
html.zb-dark body.zb-v2.zb-t-story { --zb-band-hero: transparent; } /* Dark: Story-Hero mobil Nachthimmel-Karte; ab 761 px Nachthimmel als volles Band (Torben 17.09.: Breite wie Light) */
/* Nachthimmel (nur Dark): EINE Quelle für alle Bänder (Story, Startseite, Charaktere, App, App-Sektion) – Auflösung nach Breite
   UND Pixeldichte. 800/1170 aus der 1170×2370-Quelle; 2340/4680 per Real-ESRGAN (x4plus-anime, Sandbox-Lauf 17.09.) aus derselben
   Quelle hochgerechnet (Master: Input/night-sky-ki-4680.png) – ein echtes 2× existiert nicht, der Design-Export war nur skaliert.
   Wurzelrelativ, weil Chrome url() in Custom Properties gegen das Dokument auflöst, nicht gegen das Stylesheet. */
html.zb-dark body.zb-v2 { --zb-sky: url("/wp-content/plugins/zitronenbande-design/assets/img/night-sky-800.webp"); }
@media (min-resolution: 1.5dppx) { html.zb-dark body.zb-v2 { --zb-sky: url("/wp-content/plugins/zitronenbande-design/assets/img/night-sky-1170.webp"); } } /* Retina-Handys: 390 × 3 = 1170 */
@media (min-width: 800px) { html.zb-dark body.zb-v2 { --zb-sky: url("/wp-content/plugins/zitronenbande-design/assets/img/night-sky-1170.webp"); } }
@media (min-width: 800px) and (min-resolution: 1.5dppx) { html.zb-dark body.zb-v2 { --zb-sky: url("/wp-content/plugins/zitronenbande-design/assets/img/night-sky-2340.webp"); } } /* Retina-Desktop */
@media (min-width: 1200px) { html.zb-dark body.zb-v2 { --zb-sky: url("/wp-content/plugins/zitronenbande-design/assets/img/night-sky-2340.webp"); } } /* breite 1×-Monitore: das Band wird über die Fensterbreite gezogen */
@media (min-width: 1200px) and (min-resolution: 1.5dppx) { html.zb-dark body.zb-v2 { --zb-sky: url("/wp-content/plugins/zitronenbande-design/assets/img/night-sky-4680.webp"); } } /* Retina ab 1200 px: Band ≥ 2400 Gerätepixel */
@media (min-width: 761px) { html.zb-dark body.zb-v2.zb-t-story { --zb-hero-img: var(--zb-sky); } } /* Story: Nachthimmel als volles Band (design.js legt die Bild-Ebene über das erste Band, Verhältnis 1170×2370) */
html.zb-dark body.zb-v2.zb-t-character { --zb-hero-img: var(--zb-sky); } /* Charakterseiten: Band von der Breadcrumb bis zum Hero-Ende (alle Breiten; 48-character) */
/* Schrift-Test (Torben 18.09.): html.zb-font-poppins (per ?zb-font=poppins, inc/enqueue.php) → Poppins statt Systemschrift, alles läuft über --zb-font */
html.zb-font-poppins body.zb-v2 { --zb-font: var(--zb-font-poppins); }

/* ===== 10-base.css ===== */
/* ---------------------------------------------------------------------------
   10 Basis – Poppins (lokal, kein externer Request), Typo-Skala, Links, Fokus.
   --------------------------------------------------------------------------- */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Fallback mit angepassten Metriken (Arial) – minimiert Layout-Sprung beim Font-Swap.
   size-adjust aus Textbreiten-Messung (Poppins/Arial = 1,113), Overrides = Poppins-Metriken / size-adjust. */
@font-face { font-family: "Poppins Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 111.3%; ascent-override: 94.3%; descent-override: 31.4%; line-gap-override: 9%; }
/* Caveat (Handschrift der Autoren-Notiz im Artboard) – lokal, OFL, variabel 400–700; wird nur geladen, wenn .zb-author__note gerendert wird. */
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/caveat-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/caveat-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

body.zb-v2,
body.zb-v2 .ast-button,
body.zb-v2 .ast-custom-button,
body.zb-v2 .zb-btn,
body.zb-v2 .zb-fs-btn,
body.zb-v2 #content .comment-form input,
body.zb-v2 #content .comment-form textarea,
body.zb-v2 #content .wpcf7 input,
body.zb-v2 #content .wpcf7 textarea,
body.zb-v2 #content .search-form input,
body.zb-v2 #content #searchform input,
body.zb-v2 #content .cvp-live-filter select {
  font-family: var(--zb-font);
}
body.zb-v2 {
  font-size: 18px; /* Torben 18.09.: eine Stufe größer (vorher 17; vor dem Redesign 19) */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.zb-v2 h1, body.zb-v2 h2, body.zb-v2 h3, body.zb-v2 h4, body.zb-v2 h5, body.zb-v2 h6,
body.zb-v2 .entry-content h1, body.zb-v2 .entry-content h2, body.zb-v2 .entry-content h3, body.zb-v2 .entry-content h4 {
  font-family: var(--zb-font);
  font-weight: 600;
  color: var(--zb-ink);
  letter-spacing: -.01em;
  text-wrap: pretty;
}
body.zb-v2 h1, body.zb-v2 .entry-content h1 { font-size: clamp(30px, 4vw, 46px); line-height: 1.12; letter-spacing: -.015em; }
body.zb-v2 h2, body.zb-v2 .entry-content h2 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; }
body.zb-v2 h3, body.zb-v2 .entry-content h3 { font-size: 20px; line-height: 1.3; }
body.zb-v2 h4, body.zb-v2 .entry-content h4 { font-size: 18px; line-height: 1.35; }
body.zb-v2 h5, body.zb-v2 h6 { font-size: 16px; line-height: 1.35; }

body.zb-v2 p { color: inherit; }
/* Links: nur in eigenen/bekannten Bereichen (Header, Footer, Sidebar, Kommentare, Breadcrumb, Textblöcke als
   DIREKTE Kinder des Contents, Spectra-Container, eigene Bausteine). Mediavine fügt Player/Ads als <div> in
   .entry-content ein – die werden von `> p a` etc. nie getroffen. */
body.zb-v2 #masthead a, body.zb-v2 #colophon a, body.zb-v2 #secondary a,
body.zb-v2 #content .comments-area a, body.zb-v2 #content .yoast-breadcrumb a, body.zb-v2 #content .entry-header a,
body.zb-v2 #content .entry-content > p a, body.zb-v2 #content .entry-content > ul a, body.zb-v2 #content .entry-content > ol a,
body.zb-v2 #content .entry-content > h2 a, body.zb-v2 #content .entry-content > h3 a, body.zb-v2 #content .entry-content > figure a,
body.zb-v2 #content .wp-block-uagb-container a, body.zb-v2 #content .zb-lead a, body.zb-v2 #content .zb-author a, body.zb-v2 #content .zb-toc a,
body.zb-v2 #content .nacht-entity-placement a, body.zb-v2 #content .su-note a, body.zb-v2 #content .schema-faq a, body.zb-v2 #content .error-404 a,
body.zb-v2 #content .zba a { color: var(--zb-link); text-decoration: none; text-underline-offset: 3px; transition: color .15s ease; }
body.zb-v2 #masthead a:hover, body.zb-v2 #colophon a:hover, body.zb-v2 #secondary a:hover,
body.zb-v2 #content .comments-area a:hover, body.zb-v2 #content .yoast-breadcrumb a:hover, body.zb-v2 #content .entry-header a:hover,
body.zb-v2 #content .wp-block-uagb-container a:hover, body.zb-v2 #content .zb-author a:hover, body.zb-v2 #content .nacht-entity-placement a:hover,
body.zb-v2 #content .su-note a:hover, body.zb-v2 #content .schema-faq a:hover { color: var(--zb-link-hover); }
/* Inline-Links im Text: wie im Artboard nur farbig, Unterstreichung erst beim Hover (Astra setzt underline) */
body.zb-v2 #content .entry-content > p a:hover, body.zb-v2 #content .entry-content > ul a:hover, body.zb-v2 #content .entry-content > ol a:hover,
body.zb-v2 #content .zb-lead p a:hover, body.zb-v2 #content .wp-block-uagb-container p a:hover { text-decoration: var(--zb-link-hover-line); }
body.zb-v2 #content .entry-content > p strong, body.zb-v2 #content .entry-content > ul strong, body.zb-v2 #content .entry-content > ol strong,
body.zb-v2 #content .wp-block-uagb-container strong, body.zb-v2 #content .zb-lead strong, body.zb-v2 #secondary strong { font-weight: 600; color: var(--zb-ink); }
body.zb-v2 ::selection { background: var(--zb-accent); color: var(--zb-on-accent); }
body.zb-v2 #masthead :focus-visible, body.zb-v2 #colophon :focus-visible, body.zb-v2 #content .entry-content a:focus-visible, body.zb-v2 .zb-btn:focus-visible, body.zb-v2 .zb-fs-btn:focus-visible { outline: 2px solid var(--zb-focus); outline-offset: 2px; }
/* Maus-Fokus ohne Astra-Punktlinie (Astra: a:focus { outline: thin dotted }) – Chrome fokussiert Links beim Klick, Sprung-Buttons (Hub „Alle
   Geschichten“, Story „Vorlesen“) behielten die Linie (Torben 18.09.). Tastatur-Fokus (:focus-visible) behält den gelben Ring. */
body.zb-v2 .zb-btn:focus:not(:focus-visible), body.zb-v2 .zb-fs-btn:focus:not(:focus-visible), body.zb-v2 #content .zb-toc a:focus:not(:focus-visible),
body.zb-v2 #content .zb-filter-pill:focus:not(:focus-visible), body.zb-v2 #content .zb-hero-actions a:focus:not(:focus-visible), body.zb-v2 #content .entry-header a:focus:not(:focus-visible) { outline: none; }

/* Content-Wrapper: Flächen. Kein overflow/transform hier (Mediavine Sticky/Adhesion). */
body.zb-v2 #content { background-color: var(--zb-bg); }
body.zb-v2 #content .ast-container { max-width: var(--zb-container); padding-left: var(--zb-gutter); padding-right: var(--zb-gutter); } /* Astra 1140 → gemeinsame Containerbreite (Header/Footer/Inhalt bündig) */
body.zb-v2.ast-plain-container #content .ast-container { padding-top: 12px; }
body.zb-v2 #content .entry-content > p,
body.zb-v2 #content .entry-content > ul,
body.zb-v2 #content .entry-content > ol { color: var(--zb-body); }
body.zb-v2 #content .entry-content .wp-block-image img,
body.zb-v2 #content .entry-content figure img { border-radius: var(--zb-radius); }
body.zb-v2 #content .entry-content figcaption { color: var(--zb-meta); font-size: 14px; }
body.zb-v2 #content .entry-content .wp-block-spacer { max-height: 32px; }

/* Blaue H2-Balken der Blog-Posts (Customizer-CSS .post.type-post h2{background:#0274be}) neutralisieren. */
body.zb-v2 #content .post h2,
body.zb-v2 #content .post.type-post.status-publish.format-standard h2 { background: transparent; color: var(--zb-ink); padding: 0; border-radius: 0; }

@media print {
  body.zb-v2 #masthead, body.zb-v2 #colophon, body.zb-v2 .zb-fs-tools { display: none; }
}

/* ----- Textlinks „V1 Fett + Farbe“ (Torben 18.09., nach „Unterstreichung entfernen“ + Vergleich im Artifact „Linkstile ohne Unterstreichung“): Light = Linkblau + Gewicht 600, Hover Navy + Linie;
   Dark = Gelb ohne Fett/Linie (Tokens --zb-link-weight / --zb-link-hover-line in 00-tokens). Ersetzt Variante 1 vom 16.09.
   Vorher: 1,5-px-Unterstreichung in Linkfarbe mit 45 % Deckkraft (Dark 55 %),
   3 px unter der Grundlinie; Hover/Fokus volle Linienfarbe + dunklerer Text. Hintergrund: Linkblau #1F5FA8 auf Textgrau #3B4A63 hat nur
   1,4:1 Kontrast – WCAG 1.4.1 verlangt für Links ohne Unterstreichung 3:1 + Hover-Signal. Gilt NUR für Links im Text; Buttons, Pills,
   Kacheln, Menü, Breadcrumb und Pfeil-Links (.zb-home-more, Autorenbox-Buttons) behalten ihre eigene Optik. Nur bekannte Container (Mediavine). ----- */
body.zb-v2 { --zb-link-line: color-mix(in srgb, var(--zb-link) 45%, transparent); }
html.zb-dark body.zb-v2 { --zb-link-line: color-mix(in srgb, var(--zb-link) 55%, transparent); }
body.zb-v2 #content .entry-content > p a, body.zb-v2 #content .entry-content > ul a, body.zb-v2 #content .entry-content > ol a,
body.zb-v2 #content .wp-block-uagb-container p a, body.zb-v2 #content .wp-block-uagb-container li a,
body.zb-v2 #content .zb-lead p a, body.zb-v2 #content .zb-author p a, body.zb-v2 #content .zb-author li a,
body.zb-v2 #content .nacht-entity-placement a, body.zb-v2 #content .su-note a, body.zb-v2 #content .schema-faq a,
body.zb-v2 #content .zba p a, body.zb-v2 #content .zba-faq-item a, body.zb-v2 #content .suche-beispiel a,
body.zb-v2 #content .comments-area .comment-content a, body.zb-v2 #secondary .textwidget a {
  text-decoration: none; font-weight: var(--zb-link-weight);
}
body.zb-v2 #content .entry-content > p a:hover, body.zb-v2 #content .entry-content > ul a:hover, body.zb-v2 #content .entry-content > ol a:hover,
body.zb-v2 #content .wp-block-uagb-container p a:hover, body.zb-v2 #content .wp-block-uagb-container li a:hover,
body.zb-v2 #content .zb-lead p a:hover, body.zb-v2 #content .zb-author p a:hover, body.zb-v2 #content .zb-author li a:hover,
body.zb-v2 #content .nacht-entity-placement a:hover, body.zb-v2 #content .su-note a:hover, body.zb-v2 #content .schema-faq a:hover,
body.zb-v2 #content .zba p a:hover, body.zb-v2 #content .zba-faq-item a:hover, body.zb-v2 #content .suche-beispiel a:hover,
body.zb-v2 #content .comments-area .comment-content a:hover, body.zb-v2 #secondary .textwidget a:hover,
body.zb-v2 #content .entry-content > p a:focus-visible, body.zb-v2 #content .wp-block-uagb-container p a:focus-visible {
  text-decoration: var(--zb-link-hover-line); text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: var(--zb-link); color: var(--zb-link-hover);
}
/* Ausnahmen innerhalb dieser Container: Buttons, Pfeil-Links, reine Bild-Links */
body.zb-v2 #content .entry-content > p a.zb-btn, body.zb-v2 #content .wp-block-uagb-container p a.zb-btn, body.zb-v2 #content .zba p a.zb-btn,
body.zb-v2 #content .entry-content > p a.zb-home-more, body.zb-v2 #content .wp-block-uagb-container a.zb-home-more,
body.zb-v2 #content .entry-content > p a:has(> img:only-child), body.zb-v2 #content .wp-block-uagb-container p a:has(> img:only-child), body.zb-v2 #content .zba p a:has(> img:only-child) { text-decoration: none; }

/* ===== 20-header.css ===== */
/* ---------------------------------------------------------------------------
   20 Header – Astra Header-Builder (Above-Row: Logo + Toggle · Primary-Row: Menü 1)
   wird per display:contents zu EINER Zeile: Logo links · Menü · Toggle rechts.
   Alle 19 Menüpunkte bleiben; App-Punkt als gelber Button. Kein Sticky-Header.
   --------------------------------------------------------------------------- */
body.zb-v2 #masthead { background: var(--zb-header); }
body.zb-v2 #masthead .ast-above-header-bar,
body.zb-v2 #masthead .ast-primary-header-bar { background: transparent; border: 0; }

/* Desktop-Header (nur ab Astras Breakpoint 922px; darunter rendert Astra #ast-mobile-header):
   Wrapper auflösen, Sektionen als Flex-Kinder ordnen → Logo · Menü · Toggle in EINER Zeile */
@media (min-width: 922px) {
  body.zb-v2 #masthead #ast-desktop-header {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap;
    gap: 12px; max-width: var(--zb-container); margin: 0 auto; padding: 16px var(--zb-gutter); /* gleiche Kante wie Inhalt + Footer (Artboard: Header = Content-Container) */
  }
  body.zb-v2 #masthead #ast-desktop-header .ast-above-header-wrap,
  body.zb-v2 #masthead #ast-desktop-header .ast-above-header-bar,
  body.zb-v2 #masthead #ast-desktop-header .site-above-header-wrap,
  body.zb-v2 #masthead #ast-desktop-header .ast-above-header-bar .ast-builder-grid-row,
  body.zb-v2 #masthead #ast-desktop-header .ast-main-header-wrap,
  body.zb-v2 #masthead #ast-desktop-header .ast-primary-header-bar,
  body.zb-v2 #masthead #ast-desktop-header .site-primary-header-wrap,
  body.zb-v2 #masthead #ast-desktop-header .ast-primary-header-bar .ast-builder-grid-row { display: contents; }
  body.zb-v2 #masthead #ast-desktop-header .site-header-section:not(:has(.ast-builder-layout-element)):not(:has(.site-branding)):not(:has(.main-header-menu)):not(:has(.zb-dark-toggle)) { display: none; } /* leere Sektionen enthalten nur einen leeren Wrapper-div (nicht :empty) und wären 0-px-Flex-Kinder + 12 px Gap → Logo stand 12 px zu weit rechts */
  body.zb-v2 #masthead #ast-desktop-header .site-header-above-section-center { order: 1; flex: 0 0 auto; }
  body.zb-v2 #masthead #ast-desktop-header .site-header-primary-section-center { order: 2; flex: 1 1 auto; justify-content: flex-end; min-width: 0; }
  body.zb-v2 #masthead #ast-desktop-header .site-header-above-section-right { order: 3; flex: 0 0 auto; }
  body.zb-v2 #masthead #ast-desktop-header .site-header-section { padding: 0; margin: 0; }
  body.zb-v2 #masthead .ast-builder-menu-1 .main-header-menu { flex-wrap: wrap; justify-content: flex-end; row-gap: 2px; }
}
@media (max-width: 921px) {
  body.zb-v2 #masthead #ast-desktop-header { display: none; }
}

/* Logo */
body.zb-v2 #masthead .site-logo-img .custom-logo-link img,
body.zb-v2 #masthead .custom-logo { height: 44px; width: auto; max-width: none; }
body.zb-v2 #masthead .site-branding { padding: 0; }

/* Menü 1 */
body.zb-v2 #masthead .ast-builder-menu-1 .main-header-menu { gap: 0; align-items: center; }
body.zb-v2 #masthead .ast-builder-menu-1 .main-header-menu .menu-item > .menu-link {
  font-family: var(--zb-font); font-size: 14px; font-weight: 500; color: var(--zb-body);
  padding: 8px 10px; border-radius: 10px; line-height: 1.3; white-space: nowrap; background: transparent;
}
@media (min-width: 922px) and (max-width: 1280px) {
  body.zb-v2 #masthead .ast-builder-menu-1 .main-header-menu .menu-item > .menu-link { font-size: 13px; padding: 7px 6px; }
}
/* Artboard: keine Aktiv-Pille – aktueller Punkt nur in Ink, Hover ebenfalls nur Farbe */
body.zb-v2 #masthead .ast-builder-menu-1 .main-header-menu .menu-item:hover > .menu-link,
body.zb-v2 #masthead .ast-builder-menu-1 .main-header-menu .menu-item:focus-within > .menu-link,
body.zb-v2 #masthead .ast-builder-menu-1 .main-header-menu .current-menu-item > .menu-link,
body.zb-v2 #masthead .ast-builder-menu-1 .main-header-menu .current-menu-ancestor > .menu-link { color: var(--zb-ink); background: transparent; }
body.zb-v2 #masthead .ast-builder-menu-1 .main-header-menu .current-menu-item > .menu-link { font-weight: 600; }
body.zb-v2 #masthead .ast-builder-menu-1 .main-header-menu .menu-item > .menu-link .ast-icon { color: currentColor; }
/* Dropdowns als Karten */
body.zb-v2 #masthead .ast-builder-menu-1 .main-header-menu .sub-menu {
  background: var(--zb-surface); border: 1px solid var(--zb-border); border-radius: var(--zb-radius);
  padding: 8px; margin-top: 8px; box-shadow: none; width: max-content; min-width: 240px; max-width: 340px; /* Astra: feste 240 px – längere Punkte („Gute-Nacht-Geschichten App“) stießen an den Rand (Torben 18.09.); ab 340 px Umbruch */
}
body.zb-v2 #masthead .ast-builder-menu-1 .main-header-menu .sub-menu .menu-item > .menu-link {
  color: var(--zb-body); border: 0; border-radius: 10px; padding: 10px 16px; font-size: 14px; white-space: normal;
}
body.zb-v2 #masthead .ast-builder-menu-1 .main-header-menu .sub-menu .menu-item:hover > .menu-link { background: var(--zb-card); color: var(--zb-ink); }
body.zb-v2 #masthead .ast-builder-menu-1 .main-header-menu.submenu-with-border .sub-menu .menu-item .menu-link { border-bottom: 0; }
/* „Die App“: Desktop = gelber Button RECHTS vom Toggle (.zb-header-app im Header-HTML-Element, inc/menu-app-item.php);
   Menüpunkt .zb-menu-app dient nur der mobilen Navigation (Artboard: „… Über uns · Toggle · Die App“) */
body.zb-v2 #masthead .zb-header-app {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: var(--zb-radius-sm);
  background: var(--zb-accent); color: var(--zb-on-accent); font-family: var(--zb-font); font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none;
}
body.zb-v2 #masthead .zb-header-app:hover, body.zb-v2 #masthead .zb-header-app:focus { background: var(--zb-accent-hover); color: var(--zb-on-accent); }
@media (min-width: 922px) {
  body.zb-v2 #masthead .ast-builder-menu-1 .main-header-menu > .menu-item.zb-menu-app { display: none; }
  body.zb-v2 #masthead #ast-desktop-header .site-header-above-section-right { margin-left: 16px; }
}
body.zb-v2 #masthead #ast-mobile-header .zb-header-app { display: none; }

/* Toggle-Pille (Markup: Snippet 52 / inc/dark-mode.php) – Light: heller Track, dunkler Daumen ☾ · Dark: dunkler Track, gelber Daumen ☀ */
body.zb-v2 .ast-header-html-1 .ast-builder-html-element { display: flex; align-items: center; gap: 16px; margin: 0; }
body.zb-v2 .ast-header-html-1 p { margin: 0; display: flex; align-items: center; gap: 16px; line-height: 0; }
body.zb-v2 .zb-dark-toggle { background: none; border: 0; padding: 6px 4px; margin: 0; cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; min-width: 48px; line-height: 0; box-shadow: none; }
body.zb-v2 .zb-dark-toggle:hover, body.zb-v2 .zb-dark-toggle:focus { background: none; }
body.zb-v2 .zb-toggle-track { position: relative; display: inline-block; box-sizing: border-box; width: 56px; height: 32px; border-radius: 9999px; background: var(--zb-card); border: 0; box-shadow: none; transition: background-color .25s ease; }
body.zb-v2 .zb-toggle-thumb { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--zb-btn2); box-shadow: none; transition: transform .25s ease, background-color .25s ease; }
body.zb-v2 .zb-icon { position: absolute; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; pointer-events: none; }
body.zb-v2 .zb-icon-sun { left: 9px; color: var(--zb-on-accent); opacity: 0; transition: opacity .25s ease; }
body.zb-v2 .zb-icon-moon { left: 9px; z-index: 1; color: #FFFFFF; opacity: 1; transition: opacity .25s ease; } /* Artboard: ☾ weiß IM dunklen Daumen (links) */
body.zb-v2 .zb-dark-toggle:focus-visible { outline: 2px solid var(--zb-focus); outline-offset: 2px; border-radius: 9999px; }
html.zb-dark body.zb-v2 .zb-toggle-track { background: var(--zb-card); }
html.zb-dark body.zb-v2 .zb-toggle-thumb { transform: translateX(24px); background: var(--zb-accent); }
html.zb-dark body.zb-v2 .zb-icon-sun { opacity: 1; z-index: 1; left: 33px; }
html.zb-dark body.zb-v2 .zb-icon-moon { opacity: 0; }
@media (prefers-reduced-motion: reduce) { body.zb-v2 .zb-toggle-track, body.zb-v2 .zb-toggle-thumb, body.zb-v2 .zb-icon { transition: none; } }

/* Mobile-Header (Astra rendert #ast-mobile-header separat; Astra blendet je nach Breakpoint ein/aus) */
body.zb-v2 #masthead #ast-mobile-header .ast-primary-header-bar { background: var(--zb-header); border: 0; }
body.zb-v2 #masthead #ast-mobile-header .site-primary-header-wrap { padding: 16px 20px; } /* Artboard: 16px vertikal; 20px = Astras Inhaltsrand mobil */
body.zb-v2 #masthead #ast-mobile-header .custom-logo { height: 44px; }
body.zb-v2 #masthead #ast-mobile-header .site-header-primary-section-right { gap: 12px; }
body.zb-v2 #masthead #ast-mobile-header .ast-header-html-1 .zb-dark-toggle { padding: 6px 0; min-width: 56px; }
body.zb-v2 #masthead .ast-mobile-menu-trigger-minimal,
body.zb-v2 #masthead .ast-button-wrap .menu-toggle { color: var(--zb-accent); background: transparent; border: 0; padding: 8px; }
body.zb-v2 #masthead .ast-button-wrap .menu-toggle:hover,
body.zb-v2 #masthead .ast-button-wrap .menu-toggle:focus { color: var(--zb-ink); background: transparent; }
body.zb-v2 #masthead .ast-button-wrap .menu-toggle .mobile-menu-toggle-icon .ast-mobile-svg { width: 26px; height: 26px; }
/* Mobile-Dropdown (Content unter dem Header) */
body.zb-v2 #masthead .ast-mobile-header-content,
body.zb-v2 #masthead .ast-mobile-header-content .main-header-bar-navigation,
body.zb-v2 #masthead .ast-builder-menu-mobile .main-header-menu,
body.zb-v2 #masthead .ast-builder-menu-mobile .main-header-menu .sub-menu { background-color: var(--zb-header) !important; background-image: none !important; } /* !i: Snippet-52-Erbe / Astra-Inline */
body.zb-v2 #masthead .ast-mobile-header-content { border-top: 1px solid var(--zb-border); border-bottom: 1px solid var(--zb-border); padding: 8px 8px 16px; }
body.zb-v2 #masthead .ast-builder-menu-mobile .main-header-menu .menu-item { border-color: var(--zb-border); }
body.zb-v2 #masthead .ast-builder-menu-mobile .main-header-menu .menu-item > .menu-link,
body.zb-v2 #masthead .ast-mobile-popup-content .menu-link {
  font-family: var(--zb-font); font-size: 17px; font-weight: 500; color: var(--zb-body); padding: 14px 16px; border-bottom: 1px solid var(--zb-border);
}
body.zb-v2 #masthead .ast-builder-menu-mobile .main-header-menu .sub-menu .menu-item > .menu-link { font-size: 15px; padding-left: 28px; }
body.zb-v2 #masthead .ast-builder-menu-mobile .main-header-menu .menu-item:hover > .menu-link,
body.zb-v2 #masthead .ast-builder-menu-mobile .main-header-menu .current-menu-item > .menu-link { color: var(--zb-ink); background: var(--zb-card); }
body.zb-v2 #masthead .ast-builder-menu-mobile .main-header-menu .menu-item > .menu-link .ast-icon,
body.zb-v2 #masthead .ast-builder-menu-mobile .main-header-menu .ast-menu-toggle { color: var(--zb-meta); }
/* Mobil: kompakter gelber Button wie auf dem Desktop (Torben 18.09.: Vollbreiten-Fläche „extrem groß und auffällig“, Kontur-Pille
   „deutlich zu dezent“) – gefüllt, 40 px, nur so breit wie der Text, linksbündig auf Höhe der Menütexte */
body.zb-v2 #masthead .ast-builder-menu-mobile .main-header-menu > .menu-item.zb-menu-app > .menu-link {
  display: inline-flex; align-items: center; margin: 12px 16px 4px; padding: 0 18px; min-height: 40px; background: var(--zb-accent); color: var(--zb-on-accent);
  font-size: 15px; font-weight: 600; border: 0; border-bottom: 0; border-radius: var(--zb-radius-sm); text-align: left; justify-content: flex-start;
  width: max-content; height: auto; line-height: 1.2; align-self: flex-start; /* Astra: li ist Flex-Spalte (align-items stretch), .menu-link height 100 % + line-height 45 px → sonst volle Breite/47 px Höhe */
}
body.zb-v2 #masthead .ast-builder-menu-mobile .main-header-menu > .menu-item.zb-menu-app:hover > .menu-link,
body.zb-v2 #masthead .ast-builder-menu-mobile .main-header-menu > .menu-item.zb-menu-app > .menu-link:focus-visible { background: var(--zb-accent-hover); color: var(--zb-on-accent); }
body.zb-v2 #masthead .ast-builder-menu-mobile .main-header-menu > .menu-item.zb-menu-app { border-bottom: 0; }
/* Mobile-Popup-Drawer (falls Astra-Layout auf Off-Canvas umgestellt wird) */
body.zb-v2 .ast-mobile-popup-drawer.active .ast-mobile-popup-inner { background-color: var(--zb-header); }
body.zb-v2 .ast-mobile-popup-drawer.active .menu-toggle-close { color: var(--zb-ink); }

/* ===== 21-footer.css ===== */
/* ---------------------------------------------------------------------------
   21 Footer – Astra Footer-Builder (Above-Row mit Copyright-Editor: Fakten | Datenschutz | Impressum,
   © Zitronenbande | Powered by Astra, Urheberrechtshinweis). Inhalt bleibt, Optik nach Design.
   --------------------------------------------------------------------------- */
body.zb-v2 #colophon { background: var(--zb-footer); border-top: 1px solid var(--zb-border); }
body.zb-v2 #colophon .site-above-footer-wrap[data-section="section-above-footer-builder"],
body.zb-v2 #colophon .site-primary-footer-wrap,
body.zb-v2 #colophon .site-below-footer-wrap { background-color: var(--zb-footer); background-image: none; min-height: 0; }
body.zb-v2 #colophon .ast-builder-grid-row-container-inner { max-width: var(--zb-container); margin: 0 auto; padding: 28px var(--zb-gutter); }
body.zb-v2 #colophon .ast-builder-grid-row-container-inner { width: 100%; } /* Astra: Flex-Kind schrumpft sonst auf Inhaltsbreite (817 px) → Zeile stand nicht an der Container-Kante */
body.zb-v2 #colophon .ast-builder-footer-grid-columns { max-width: none; width: 100%; } /* Astra-Option 1100 px */
body.zb-v2 #colophon .ast-footer-copyright { text-align: left; font-family: var(--zb-font); font-size: 13px; line-height: 1.7; color: var(--zb-meta); }
body.zb-v2 #colophon .ast-footer-copyright p,
body.zb-v2 #colophon .ast-footer-copyright span { font-size: 13px !important; color: var(--zb-meta); margin: 0; } /* !i: Inline-Style im Editor-Text */
body.zb-v2 #colophon .ast-footer-copyright a { color: var(--zb-meta); text-decoration: none; }
body.zb-v2 #colophon .ast-footer-copyright a:hover { color: var(--zb-ink); }
body.zb-v2 #colophon .site-footer-section { justify-content: flex-start; }
/* Artboard: eine Zeile – „© 2026 Zitronenbande · Unsere Inhalte …“ links, Links rechts. Astra-Grid (2 Spalten, Spalte 1 leer) → 1 Spalte;
   der Copyright-Editor liefert 3 Absätze (Links · © + Powered by · Urheberrecht), per Flex umsortiert. */
body.zb-v2 #colophon .site-above-footer-wrap .ast-builder-grid-row { grid-template-columns: minmax(0, 1fr); }
body.zb-v2 #colophon .site-footer-section:not(:has(*)) { display: none; }
body.zb-v2 #colophon .ast-builder-layout-element.ast-footer-copyright { width: 100%; }
body.zb-v2 #colophon .ast-footer-copyright:has(> p) { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "copy links" "rights links"; column-gap: 32px; row-gap: 4px; align-items: center; }
body.zb-v2 #colophon .ast-footer-copyright > p:first-child { grid-area: links; justify-self: end; }
body.zb-v2 #colophon .ast-footer-copyright > p:nth-child(2) { grid-area: copy; }
body.zb-v2 #colophon .ast-footer-copyright > p:nth-child(3) { grid-area: rights; }
@media (max-width: 760px) {
  body.zb-v2 #colophon .ast-footer-copyright:has(> p) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "rights" "links"; row-gap: 6px; }
  body.zb-v2 #colophon .ast-footer-copyright > p:first-child { justify-self: start; }
}
body.zb-v2 #colophon .footer-widget-area .widget-title { color: var(--zb-ink); }
body.zb-v2 #colophon .ast-footer-html-1, body.zb-v2 #colophon .ast-footer-html-2 { color: var(--zb-meta); }

/* ===== 30-components.css ===== */
/* ---------------------------------------------------------------------------
   30 Komponenten – Buttons, Kacheln (Content Views), Chips, Formulare (Kommentare: 50-comments.css),
   Shariff, su-note, TablePress, Yoast-FAQ, Breadcrumb, Sidebar, App-Box (.zbcta),
   Sticky-App-Leiste (.zbbar), eigene Bausteine (.zb-btn, .zb-author, .zb-toc, .zb-hero-*).
   Spezifität: body.zb-v2 #content … ; !important nur wo die Quelle es nutzt (Kommentar "!i").
   --------------------------------------------------------------------------- */

/* ----- Buttons -----
   NUR klassen-/typqualifizierte Elemente: nie nackte <button>/<img>/<iframe> stylen – Mediavine rendert
   Videoplayer- und Ad-Bedienelemente als <button> im Content (Befund 16.09.: gelbe Player-Knöpfe). */
body.zb-v2 #content .ast-button,
body.zb-v2 #content .wp-block-button .wp-block-button__link,
body.zb-v2 #content input[type="submit"].wpcf7-submit,
body.zb-v2 #content input[type="submit"]#searchsubmit,
body.zb-v2 #content input[type="submit"].search-submit,
body.zb-v2 #content .zb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border: 0; border-radius: var(--zb-radius);
  background: var(--zb-accent); color: var(--zb-on-accent);
  font-family: var(--zb-font); font-size: 16px; font-weight: 600; line-height: 1;
  text-decoration: none; box-shadow: none; cursor: pointer; transition: background-color .15s ease, color .15s ease, transform .1s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
}
body.zb-v2 #content .ast-button:hover, body.zb-v2 #content .ast-button:focus,
body.zb-v2 #content .wp-block-button .wp-block-button__link:hover, body.zb-v2 #content .wp-block-button .wp-block-button__link:focus,
body.zb-v2 #content input[type="submit"].wpcf7-submit:hover,
body.zb-v2 #content input[type="submit"]#searchsubmit:hover, body.zb-v2 #content input[type="submit"].search-submit:hover { background: var(--zb-accent-hover); color: var(--zb-on-accent); }
/* Varianten als Doppelklasse (.zb-btn.zb-btn--…): schlägt die Link-Farbregeln der Container (.entry-header a, .wp-block-uagb-container a),
   die sonst die Button-Schrift blau färbten (Befund 16.09.). Sekundär = #406694 wie im Story-Artboard. */
body.zb-v2 #content .zb-btn.zb-btn--primary { background: var(--zb-accent); color: var(--zb-on-accent); }
body.zb-v2 #content .zb-btn.zb-btn--secondary { background: var(--zb-btn-sec); color: var(--zb-on-btn2); }
body.zb-v2 #content .zb-btn--sm { min-height: 44px; padding: 0 20px; font-size: 15px; border-radius: var(--zb-radius-sm); }
body.zb-v2 #content .zb-btn.zb-btn--light { background: var(--zb-surface); color: var(--zb-ink); } /* Artboard Hub „Suche“: weiß (Dark #234773) */
html.zb-dark body.zb-v2 #content .zb-btn.zb-btn--light { background: var(--zb-card-2); color: var(--zb-on-btn2); }
/* Zustände (Torben 18.09.: Hub-„Suche“ hatte keinen sichtbaren Klick-Zustand). Hover nur mit Maus (hover:hover), Fokus nur per
   Tastatur (:focus-visible-Ring aus 10-base) – mit :focus blieb ein geklickter Sprung-Button (Chrome fokussiert Links beim Klick) im
   Hover-Ton hängen. Gedrückt (:active) = eine Stufe dunkler, 1 px tiefer, leichter Innenschatten; iOS-Tap-Grau abgeschaltet. */
@media (hover: hover) {
  body.zb-v2 #content .zb-btn.zb-btn--primary:hover { background: var(--zb-accent-hover); color: var(--zb-on-accent); }
  body.zb-v2 #content .zb-btn.zb-btn--secondary:hover { background: var(--zb-btn-sec-hover); color: var(--zb-on-btn2); }
  body.zb-v2 #content .zb-btn.zb-btn--light:hover { background: var(--zb-card); color: var(--zb-ink); }
  html.zb-dark body.zb-v2 #content .zb-btn.zb-btn--light:hover { background: var(--zb-btn2-hover); color: var(--zb-on-btn2); }
}
body.zb-v2 #content .zb-btn:active { transform: translateY(1px); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .14); }
body.zb-v2 #content .zb-btn.zb-btn--primary:active { background: var(--zb-accent-active); color: var(--zb-on-accent); }
body.zb-v2 #content .zb-btn.zb-btn--secondary:active { background: var(--zb-btn-sec-active); color: var(--zb-on-btn2); }
body.zb-v2 #content .zb-btn.zb-btn--light:active { background: var(--zb-light-active); color: var(--zb-ink); }
html.zb-dark body.zb-v2 #content .zb-btn.zb-btn--light:active { background: var(--zb-light-active); color: var(--zb-on-btn2); }
@media (prefers-reduced-motion: reduce) { body.zb-v2 #content .zb-btn:active { transform: none; } }
/* Button-Icons (Artboard: Buch bei „Vorlesen“, Note beim App-Button) – Inline-SVG als Maske in currentColor, kein Bild-Request, Dark automatisch */
body.zb-v2 #content .zb-btn--read::before, body.zb-v2 #content .zb-btn--app::before {
  content: ""; flex: none; width: 18px; height: 18px; background-color: currentColor;
  -webkit-mask: var(--zb-icon) center / contain no-repeat; mask: var(--zb-icon) center / contain no-repeat;
}
body.zb-v2 #content .zb-btn--read::before { --zb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E"); }
body.zb-v2 #content .zb-btn--app::before { --zb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E"); }
/* Spectra-Button-Blöcke: Textfarbe sitzt zusätzlich auf dem inneren div.uagb-button__link je Block (Startseite „Alle Fabeln anzeigen“ = #000)
   → immer vom gestylten <a> erben */
body.zb-v2 #content .wp-block-uagb-buttons .uagb-buttons-repeater .uagb-button__link { color: inherit !important; } /* !i: Spectra-Block-CSS */
/* Content-Views „Mehr laden“ + Pagination */
body.zb-v2 #content .pt-cv-pagination-wrapper { text-align: center !important; margin-top: 32px; } /* !i: CV .text-left */
body.zb-v2 #content .pt-cv-pagination-wrapper .btn,
body.zb-v2 #content .pt-cv-pagination-wrapper .pt-cv-more,
body.zb-v2 #content .pt-cv-pagination-wrapper .pt-cv-pagination a {
  display: inline-flex !important; align-items: center; min-height: 52px; padding: 0 28px !important; border: 0 !important; border-radius: var(--zb-radius) !important;
  background: var(--zb-btn2) !important; background-color: var(--zb-btn2) !important; color: var(--zb-on-btn2) !important; font-family: var(--zb-font); font-size: 16px !important; font-weight: 600 !important; line-height: 1 !important; box-shadow: none !important; text-decoration: none !important;
} /* !i: CV-Inline (#00aeef, 20px) + Bootstrap .btn-primary */
body.zb-v2 #content .pt-cv-pagination-wrapper .btn:hover, body.zb-v2 #content .pt-cv-pagination-wrapper .pt-cv-more:hover { background: var(--zb-btn2-hover) !important; background-color: var(--zb-btn2-hover) !important; color: var(--zb-on-btn2) !important; }
body.zb-v2 #content .pt-cv-pagination-wrapper .pt-cv-more .caret { display: none; }

/* ----- Content-Views-Kacheln (Grid-Views) ----- */
body.zb-v2 #content .pt-cv-view.pt-cv-colsys { margin-left: 0; margin-right: 0; } /* CV: .pt-cv-colsys{margin:0 -15px} – Raster ragte über Band-/Widget-Rand (Torben 16.09.) */
body.zb-v2 #content .pt-cv-view.pt-cv-grid .pt-cv-page { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 28px 20px; }
body.zb-v2 #content .pt-cv-view.pt-cv-grid .pt-cv-page::before,
body.zb-v2 #content .pt-cv-view.pt-cv-grid .pt-cv-page::after { display: none; }
body.zb-v2 #content .pt-cv-view.pt-cv-grid .pt-cv-page + .pt-cv-page { margin-top: 28px; }
body.zb-v2 #content .pt-cv-view.pt-cv-grid .pt-cv-content-item { float: none; width: auto; padding: 0 !important; margin: 0; min-height: 0; } /* !i: CV-Inline padding-bottom */
body.zb-v2 #content .pt-cv-view .pt-cv-content-item,
body.zb-v2 #content .pt-cv-view .pt-cv-ifield { background-color: transparent !important; border: 0 !important; padding: 0 !important; } /* !i: CV-Inline */
body.zb-v2 #content .pt-cv-view .pt-cv-href-thumbnail { display: block !important; margin: 0 !important; border-radius: var(--zb-radius); background: var(--zb-card); } /* !i: CV-Inline */
body.zb-v2 #content .pt-cv-view .pt-cv-thumbnail { display: block; width: 100%; height: auto; margin: 0; border-radius: var(--zb-radius); object-fit: cover; }
body.zb-v2 #content .pt-cv-view .pt-cv-title,
body.zb-v2 #content .pt-cv-view h4.pt-cv-title,
body.zb-v2 #content .pt-cv-view p.pt-cv-title { margin: 10px 0 0 !important; padding: 0 !important; font-size: 17px !important; line-height: 1.3 !important; } /* !i: CV-Inline + Customizer; 17 statt 15 (Torben 18.09.: 16 → 17 → 18 probiert, „lieber zurück auf 17“) */
body.zb-v2 #content .pt-cv-view .pt-cv-title a,
body.zb-v2 #content .pt-cv-view .panel-title {
  display: block !important; margin: 0 !important; padding: 0 !important; list-style: none !important;
  font-family: var(--zb-font); font-size: 17px !important; font-weight: 600 !important; line-height: 1.3 !important; color: var(--zb-ink); text-wrap: pretty;
} /* !i: CV-Inline; 17 statt 15 (Torben 18.09., FINAL) */
body.zb-v2 #content .pt-cv-view .pt-cv-title a:hover { color: var(--zb-link); }
body.zb-v2 #content .pt-cv-view .pt-cv-ctf-list { margin-top: 6px; }
body.zb-v2 #content .pt-cv-view .pt-cv-ctf-column { padding: 0; }
body.zb-v2 #content .pt-cv-view .pt-cv-custom-fields { color: var(--zb-meta); font-size: 13px; }
body.zb-v2 #content .pt-cv-view .pt-cv-meta-fields,
body.zb-v2 #content .pt-cv-view .pt-cv-meta-fields .terms a { color: var(--zb-meta) !important; font-size: 12px; } /* !i: Snippet-52-Erbe */
body.zb-v2 #content .pt-cv-view .pt-cv-content { color: var(--zb-body); font-size: 14px; }
/* Listen-Views (einspaltige Items col-md-12: Sidebar-Listen, „Weitere Artikel“): volle Breite + Trenner statt gestrichelter #333-Linien */
body.zb-v2 #content .pt-cv-view.pt-cv-grid .pt-cv-content-item.col-md-12 { grid-column: 1 / -1; }
body.zb-v2 #content .pt-cv-view.pt-cv-grid .pt-cv-page:has(> .pt-cv-content-item.col-md-12) { gap: 0; }
body.zb-v2 #content .pt-cv-view .pt-cv-content-item.col-md-12 .pt-cv-ifield { border-bottom: 1px solid var(--zb-border) !important; padding: 12px 0 !important; } /* !i: CV-Inline dashed */
body.zb-v2 #content .pt-cv-view .pt-cv-content-item.col-md-12:last-child .pt-cv-ifield { border-bottom: 0 !important; }
body.zb-v2 #content .pt-cv-view .pt-cv-content-item.col-md-12 .pt-cv-title a { font-weight: 500 !important; }
/* Listen mit linkem 75-px-Thumbnail (CV „pt-cv-thumb-left“, z. B. „Weitere interessante Artikel“): kompakte Zeile Bild + Titel
   (die generische Kachelregel „Thumbnail 100 %“ machte daraus seitenbreite Bilder – Befund 16.09.) */
body.zb-v2 #content .pt-cv-view .pt-cv-content-item.col-md-12:has(.pt-cv-thumb-left) .pt-cv-ifield { display: flex; align-items: center; gap: 14px; padding: 10px 0 !important; } /* !i: CV-Inline */
body.zb-v2 #content .pt-cv-view .pt-cv-content-item.col-md-12 .pt-cv-thumb-left { flex: 0 0 64px; width: 64px; }
body.zb-v2 #content .pt-cv-view .pt-cv-content-item.col-md-12 .pt-cv-thumb-left .pt-cv-thumbnail { width: 64px; height: 64px; aspect-ratio: 1; object-fit: cover; border-radius: 12px; float: none; margin: 0; }
body.zb-v2 #content .pt-cv-view .pt-cv-content-item.col-md-12:has(.pt-cv-thumb-left) .pt-cv-title { flex: 1 1 auto; min-width: 0; margin: 0 !important; } /* !i: CV-Inline */
/* CV-Pro „same height“ setzt Inline-Höhen per JS – im Grid nicht nötig */
body.zb-v2 #content .pt-cv-view.pt-cv-grid.pt-cv-same-height .pt-cv-ifield,
body.zb-v2 #content .pt-cv-view.pt-cv-grid.pt-cv-same-height .pt-cv-content-item { height: auto !important; min-height: 0 !important; } /* !i: Inline-Style */
/* Charakter-Grids (3-spaltige Avatare, z. B. Startseite): rund, zentriert */
body.zb-v2 #content .pt-cv-view.pt-cv-grid .pt-cv-content-item.col-md-4.col-xs-4 .pt-cv-thumbnail { border-radius: 9999px; aspect-ratio: 1; }
body.zb-v2 #content .pt-cv-view.pt-cv-grid .pt-cv-content-item.col-md-4.col-xs-4 .pt-cv-href-thumbnail { border-radius: 9999px; }
body.zb-v2 #content .pt-cv-view.pt-cv-grid .pt-cv-content-item.col-md-4.col-xs-4 .pt-cv-title a { text-align: center !important; font-size: 14px !important; font-weight: 500 !important; color: var(--zb-body); } /* !i: CV-Inline */
/* Vorlesedauer-Chip (Snippet 21 [formatted_reading_time]) */
body.zb-v2 #content .label-time { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0; height: auto; background: transparent; color: var(--zb-meta); font-size: 14px; font-weight: 400; border-radius: 0; } /* 14 statt 13 (Torben 18.09.: Vorlesedauer „ruhig noch etwas größer“) */
body.zb-v2 #content .label-time img { width: 15px; height: 15px; margin: 0; opacity: .7; }
html.zb-dark body.zb-v2 #content .label-time img { filter: invert(1); }
/* Charaktere-Scroller (pt-cv-scrollable): runde Avatare */
body.zb-v2 #content .pt-cv-view.pt-cv-scrollable .pt-cv-thumbnail { border-radius: 9999px; aspect-ratio: 1; }
body.zb-v2 #content .pt-cv-view.pt-cv-scrollable .pt-cv-title a { text-align: center !important; font-size: 14px !important; font-weight: 500 !important; color: var(--zb-body); } /* !i: CV-Inline */
/* NEU-/Premium-Labels (Snippets 23/27) */
body.zb-v2 #content .new-label, body.zb-v2 #content .plus-badge { border-radius: 9999px; background: var(--zb-accent); color: var(--zb-on-accent); font-size: 11px; font-weight: 600; letter-spacing: .04em; }

/* ----- Spectra-/UAGB-Container (Startseite, Hub-Kurz-Box, Suche, Charakterseiten): eigene helle
   Block-Hintergründe (#a9d5e2/#ebf5fa/#fff8e9/#d5eff9 per Block-CSS) → Design-Flächen, abwechselnd ----- */
body.zb-v2 #content .wp-block-uagb-container.uagb-is-root-container { background-color: var(--zb-surface); background-image: none; border-radius: 0; }
/* Root-Container (alignfull): Gutter + Innenbreite wie Astra-Container/Header (Spectra: --inner-content-custom-width = 1140, Padding 10) */
body.zb-v2 #content .entry-content > .wp-block-uagb-container.uagb-is-root-container.alignfull { padding-left: var(--zb-gutter); padding-right: var(--zb-gutter); }
body.zb-v2 #content .entry-content > .wp-block-uagb-container.uagb-is-root-container.alignfull > .uagb-container-inner-blocks-wrap { max-width: calc(var(--zb-container) - 2 * var(--zb-gutter)); }
body.zb-v2 #content .wp-block-uagb-container.uagb-is-root-container:nth-of-type(even) { background-color: var(--zb-bg); }
body.zb-v2 #content .wp-block-uagb-container .uagb-heading-text,
body.zb-v2 #content .wp-block-uagb-container h1, body.zb-v2 #content .wp-block-uagb-container h2, body.zb-v2 #content .wp-block-uagb-container h3 { color: var(--zb-ink); }
body.zb-v2 #content .wp-block-uagb-container p,
body.zb-v2 #content .wp-block-uagb-container .uagb-desc-text { color: var(--zb-body); }

/* ----- Chips / Meta ----- */
body.zb-v2 #content .zb-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 9999px; background: var(--zb-chip); color: var(--zb-chip-ink); font-size: 13px; font-weight: 600; }
body.zb-v2 #content .entry-meta,
body.zb-v2 #content .entry-meta .mod-datum-art { color: var(--zb-meta) !important; font-size: 13px !important; } /* !i: Customizer-CSS */
/* Autor-Zeile im Hero (Markup Snippet 30: .posted-by > .author-avatar · .meta-infos „von“ · a.url > .author-name; Rolle aus story-hero.php).
   Artboard: Avatar 44 px links, rechts zwei Zeilen „von Name“ (15/600, Name als Link) + Rolle (13 px). .posted-by wird per
   display:contents aufgelöst, damit Avatar (2 Zeilen hoch), „von“ + Name (Zeile 1) und Rolle (Zeile 2) im Grid liegen –
   als inline-flex ging das Leerzeichen zwischen „von“ und dem Namen verloren (Befund 16.09.). */
body.zb-v2 #content .ast-article-single .entry-header > .entry-meta { display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 0; row-gap: 2px; align-items: center; line-height: 1.4; }
body.zb-v2 #content .ast-article-single .entry-header > .entry-meta .posted-by { display: contents; }
body.zb-v2 #content .ast-article-single .entry-header > .entry-meta .author-avatar { grid-column: 1; grid-row: 1 / span 2; display: flex; align-items: center; margin-right: 12px; }
body.zb-v2 #content .ast-article-single .entry-header > .entry-meta .author-avatar img { width: 44px !important; height: 44px !important; margin: 0 !important; border-radius: 9999px; object-fit: cover; background: var(--zb-card); } /* !i: Inline-Style Snippet 30 */
body.zb-v2 #content .ast-article-single .entry-header > .entry-meta .meta-infos { grid-column: 2; grid-row: 1; margin-right: .3em; font-size: 15px !important; font-weight: 600; color: var(--zb-ink) !important; } /* !i: s. o. */
body.zb-v2 #content .ast-article-single .entry-header > .entry-meta a.url { grid-column: 3; grid-row: 1; justify-self: start; font-size: 15px; font-weight: 600; color: var(--zb-link); }
body.zb-v2 #content .ast-article-single .entry-header > .entry-meta a.url:hover { color: var(--zb-link-hover); }
body.zb-v2 #content .ast-article-single .entry-header > .entry-meta .author-name { font-size: 15px; font-weight: 600; color: inherit; }
body.zb-v2 #content .ast-article-single .entry-header > .entry-meta br { display: none; }
body.zb-v2 #content .ast-article-single .entry-header > .entry-meta .zb-author-role { grid-column: 2 / span 2; grid-row: 2; margin: 0; font-size: 13px; color: var(--zb-meta); }
body.zb-v2 #content .ast-article-single .entry-header > .entry-meta .mod-datum-art { grid-column: 2 / span 2; grid-row: 3; margin: 0; }
body.zb-v2 #content .ast-article-single .entry-header > .entry-meta .mod-datum-art:empty { display: none; }

/* ----- Breadcrumb (Yoast) ----- */
body.zb-v2 #content .yoast-breadcrumb { font-size: 13px; color: var(--zb-meta); margin: 0 0 16px; line-height: 1.5; }
body.zb-v2 #content .yoast-breadcrumb a { color: var(--zb-meta); }
body.zb-v2 #content .yoast-breadcrumb a:hover { color: var(--zb-ink); }
body.zb-v2 #content .yoast-breadcrumb .breadcrumb_last { color: var(--zb-meta); }
body.zb-v2 #content .yoast-breadcrumb .breadcrumb_last strong { font-weight: 400; color: inherit; } /* Yoast „letzte Seite fett“ – Artboard: normal */
body.zb-v2 #content .yoast-breadcrumb .zb-breadcrumb__sep { margin: 0 2px; color: var(--zb-meta); }
body.zb-v2 #content .ast-article-single > .yoast-breadcrumb { margin-top: 32px; } /* Seiten (bei Beiträgen sitzt der Breadcrumb im Hero) – 24 px #primary + 32 = 56 px wie im Story-Hero */

/* ----- Formulare (nur bekannte Formulare: Kommentare, Kontakt, Suche, CV-Filter – keine nackten input/select/textarea) ----- */
body.zb-v2 #content .comment-form input:not([type="submit"]):not([type="checkbox"]), body.zb-v2 #content .comment-form textarea,
body.zb-v2 #content .wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), body.zb-v2 #content .wpcf7 textarea, body.zb-v2 #content .wpcf7 select,
body.zb-v2 #content .search-form .search-field, body.zb-v2 #content #searchform input[type="text"], body.zb-v2 #content #searchform input[type="search"],
body.zb-v2 #content .cvp-live-filter select {
  background: var(--zb-card); color: var(--zb-ink); border: 0; border-radius: var(--zb-radius-sm); padding: 12px 16px; font-family: var(--zb-font); font-size: 16px; box-shadow: none;
}
body.zb-v2 #content .comment-form input:focus, body.zb-v2 #content .comment-form textarea:focus,
body.zb-v2 #content .wpcf7 input:focus, body.zb-v2 #content .wpcf7 textarea:focus,
body.zb-v2 #content .search-form .search-field:focus, body.zb-v2 #content #searchform input:focus,
body.zb-v2 #content .cvp-live-filter select:focus { outline: 1.5px solid var(--zb-focus); outline-offset: 0; border-color: transparent; }
body.zb-v2 #content .comment-form ::placeholder, body.zb-v2 #content .wpcf7 ::placeholder, body.zb-v2 #content #searchform ::placeholder, body.zb-v2 #content .search-form ::placeholder { color: var(--zb-meta); opacity: 1; }
body.zb-v2 #content .cvp-live-filter select, body.zb-v2 #content .wpcf7 select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6780' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; }
body.zb-v2 #content .wp-block-search .wp-block-search__inside-wrapper { background: var(--zb-card); border: 0; border-radius: 9999px; padding: 4px; }
body.zb-v2 #content .wp-block-search .wp-block-search__input { background: transparent; border: 0; color: var(--zb-ink); }
body.zb-v2 #content .wp-block-search .wp-block-search__button { border-radius: 9999px; }
body.zb-v2 #content .searchwp-search-form, body.zb-v2 #content #searchform { display: flex; gap: 10px; max-width: 560px; }
body.zb-v2 #content #searchform input[type="search"], body.zb-v2 #content #searchform input[type="text"] { flex: 1; min-width: 0; height: 52px; border-radius: 9999px; padding: 0 20px; }
body.zb-v2 #content #searchform input[type="submit"] { flex: none; height: 52px; border-radius: 9999px; }
body.zb-v2 #content .wpcf7 label { color: var(--zb-body); font-size: 14px; }
body.zb-v2 #content .wpcf7-form-control-wrap { display: block; margin-top: 6px; }
body.zb-v2 #content .wpcf7 input:not([type="submit"]), body.zb-v2 #content .wpcf7 textarea { width: 100%; }

/* ----- Shariff (Teilen) als Pills ----- */
body.zb-v2 #content .shariff { margin: 28px 0 0; }
body.zb-v2 #content .shariff .shariff-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
body.zb-v2 #content .shariff .shariff-button { margin: 0 !important; padding: 0 !important; min-width: 0 !important; width: auto !important; flex: none; background: transparent !important; border-radius: 9999px; } /* !i: Shariff-CSS + Inline-Netzwerkfarbe am li */
body.zb-v2 #content .shariff .shariff-button a,
body.zb-v2 #content .shariff .shariff-button a.shariff-link {
  display: inline-flex !important; align-items: center; gap: 6px; height: 36px !important; width: auto !important; min-width: 0 !important; padding: 0 14px !important; border-radius: 9999px !important;
  background: var(--zb-card) !important; color: var(--zb-body) !important; font-family: var(--zb-font); font-size: 13px; font-weight: 500; box-shadow: none !important; border: 0 !important; text-decoration: none !important;
} /* !i: Shariff-Farb-CSS */
body.zb-v2 #content .shariff .shariff-button a:hover { background: var(--zb-btn2) !important; color: var(--zb-on-btn2) !important; }
body.zb-v2 #content .shariff .shariff-button .shariff-icon { display: none; } /* Artboard: reine Text-Pills */
body.zb-v2 #content .shariff .shariff-button .shariff-text { display: inline; }
body.zb-v2 #content .shariff .shariff-button.whatsapp { order: 1; }
body.zb-v2 #content .shariff .shariff-button.facebook { order: 2; }
body.zb-v2 #content .shariff .shariff-button.pinterest { order: 3; }
body.zb-v2 #content .shariff .shariff-button.mailto { order: 4; }
body.zb-v2 #content .shariff .shariff-button.reddit { display: none; } /* nicht im Artboard – sauber entfernen: Shariff-Einstellungen → Dienste */
body.zb-v2 #content .shariff .shariff-button a::after { font-size: 13px; font-weight: 500; line-height: 1; }
body.zb-v2 #content .shariff .shariff-button.facebook a::after { content: "Facebook"; }
body.zb-v2 #content .shariff .shariff-button.whatsapp a::after { content: "WhatsApp"; }
body.zb-v2 #content .shariff .shariff-button.pinterest a::after { content: "Pinterest"; }
body.zb-v2 #content .shariff .shariff-button.reddit a::after { content: "Reddit"; }
body.zb-v2 #content .shariff .shariff-button.mailto a::after { content: "E-Mail"; }
body.zb-v2 #content .shariff .shariff-button.twitter a::after { content: "X"; }
body.zb-v2 #content .shariff .shariff-button.threema a::after { content: "Threema"; }
body.zb-v2 #content .shariff .shariff-button.telegram a::after { content: "Telegram"; }
body.zb-v2 #content .shariff .shariff-button.linkedin a::after { content: "LinkedIn"; }
body.zb-v2 #content .shariff .shariff-button.info a::after { content: "Info"; }

/* ----- su-note (TIPP-Boxen, Inline-Styles) ----- */
body.zb-v2 #content .su-note { border: 0 !important; border-radius: var(--zb-radius); overflow: hidden; } /* !i: Inline-Style */
body.zb-v2 #content .su-note .su-note-inner { background-color: var(--zb-card) !important; border: 0 !important; border-radius: var(--zb-radius); color: var(--zb-body) !important; padding: 16px 20px !important; } /* !i: Inline-Style */
body.zb-v2 #content .su-note .su-note-inner a { color: var(--zb-link); }
body.zb-v2 #content .su-label { border-radius: 9999px; background: var(--zb-chip); color: var(--zb-chip-ink); font-family: var(--zb-font); font-weight: 600; }

/* ----- TablePress ----- */
body.zb-v2 #content .tablepress thead th, body.zb-v2 #content .tablepress tfoot th { background: var(--zb-card); color: var(--zb-ink); border-color: var(--zb-border); }
body.zb-v2 #content .tablepress tbody td { border-color: var(--zb-border); color: var(--zb-body); }
body.zb-v2 #content .tablepress tbody tr:nth-child(odd) td { background: var(--zb-surface); }
body.zb-v2 #content .tablepress tbody tr:nth-child(even) td { background: var(--zb-card-2); }

/* ----- Yoast FAQ-Block ----- */
body.zb-v2 #content .schema-faq { border-bottom: 1px solid var(--zb-border); }
body.zb-v2 #content .schema-faq .schema-faq-section { border-top: 1px solid var(--zb-border); padding: 22px 0; margin: 0; }
body.zb-v2 #content .schema-faq .schema-faq-question { display: block; font-weight: 600; font-size: 18px; line-height: 1.4; color: var(--zb-ink); }
body.zb-v2 #content .schema-faq .schema-faq-answer { display: block; margin-top: 8px; font-size: 17px; line-height: 1.6; color: var(--zb-body); }

/* ----- Easy Table of Contents ----- */
body.zb-v2 #content .ez-toc-container { background: var(--zb-card-2); border: 0; border-radius: var(--zb-radius); padding: 16px 20px; }
body.zb-v2 #content .ez-toc-container a { color: var(--zb-link); }
body.zb-v2 #content .toc-self { background: var(--zb-card-2); border: 0; border-radius: var(--zb-radius); color: var(--zb-ink); }

/* ----- Sidebar (#secondary) – bleibt, schmale Spalte im Design-Look ----- */
@media (min-width: 922px) {
  body.zb-v2.ast-right-sidebar #content #secondary { width: 336px !important; padding-left: 0; } /* !i: HFCM 77 */
  body.zb-v2.ast-right-sidebar #content #primary { width: calc(100% - 336px) !important; padding-right: 48px; border-right: 0; margin-right: 0; } /* !i: HFCM 77 · Astra zeichnet hier border-right (Trennlinie zur Sidebar) */
}
body.zb-v2 #content #secondary .sidebar-main { width: 100% !important; } /* !i: HFCM 77 setzt .sidebar-main 305px OHNE Media Query – mobil waren die Widgets schmaler als der Inhalt (Torben 16.09.) */
/* Abstand Header → Inhalt (Astra: #primary/#secondary margin 4em, mobil 1.5em) kompakter */
body.zb-v2.ast-plain-container #content #primary,
body.zb-v2.ast-plain-container #content #secondary { margin-top: 0 !important; padding-top: 24px; } /* !i: Astra-Mobil-Margin (1.5em) */
body.zb-v2.ast-plain-container #content .ast-container { padding-top: 0; }
@media (max-width: 921px) {
  body.zb-v2.ast-plain-container #content #primary { padding-top: 12px; }
  body.zb-v2.ast-plain-container #content #secondary { padding-top: 0; }
  body.zb-v2 #content .ast-article-single > .yoast-breadcrumb { margin-top: 8px; }
}
/* Astra-Trennlinie zwischen Inhalt und Sidebar entfällt (stört auf den vollflächigen Abschnittsbändern): #primary border-right (s. o.) + #secondary border-left */
body.zb-v2.ast-right-sidebar #content #secondary { border-left: 0; margin-left: 0; }
/* Widgets: weiße Karten mit Rand (liegen teils auf den Abschnittsbändern), normale Lesegröße statt Astras 19px/2.0 */
body.zb-v2 #content #secondary { font-size: 15px; line-height: 1.6; }
body.zb-v2 #content #secondary .widget { background: var(--zb-surface); border: 1px solid var(--zb-border); border-radius: var(--zb-radius); padding: 20px; margin-bottom: 20px; }
body.zb-v2 #content #secondary .widget-title, body.zb-v2 #content #secondary .textwidget > h2, body.zb-v2 #content #secondary .textwidget > h3, body.zb-v2 #content #secondary .textwidget > h4, body.zb-v2 #content #secondary .textwidget > p > strong { font-size: 17px !important; font-weight: 600 !important; line-height: 1.3 !important; color: var(--zb-ink); margin: 0 0 12px !important; } /* !i: Inline-Style im Widget-Text */
body.zb-v2 #content #secondary .textwidget p { font-size: 15px; line-height: 1.6; color: var(--zb-body); margin: 0 0 12px; }
body.zb-v2 #content #secondary .textwidget p:last-child { margin-bottom: 0; }
body.zb-v2 #content #secondary .textwidget img.aligncenter { display: block; width: 120px; height: 120px; margin: 4px auto 12px !important; border-radius: 9999px; object-fit: cover; } /* !i: Inline margin-top */
body.zb-v2 #content #secondary .pt-cv-view .pt-cv-content-item.col-md-12 .pt-cv-ifield { border-bottom-color: var(--zb-border) !important; } /* !i */
body.zb-v2 #content #secondary .pt-cv-view .pt-cv-content-item.col-md-12:last-child .pt-cv-ifield { border-bottom: 0 !important; }
body.zb-v2 #content #secondary .pt-cv-view.pt-cv-grid .pt-cv-page { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
body.zb-v2 #content #secondary .pt-cv-view .pt-cv-title a { font-size: 14px !important; } /* !i */
body.zb-v2 #content #secondary .pt-cv-view .pt-cv-href-thumbnail { border-radius: 9999px; background: transparent; } /* Charaktere: runde Figuren-PNGs, kein graues Quadrat dahinter */
body.zb-v2 #content #secondary .pt-cv-view .pt-cv-thumbnail { border-radius: 9999px; aspect-ratio: 1; }
body.zb-v2 #content #secondary .pt-cv-view .pt-cv-content-item.col-md-6 .pt-cv-title a { text-align: center !important; font-weight: 500 !important; color: var(--zb-body); } /* !i: CV-Inline */

/* ----- App-Sektion (.zbcta, Snippet 44 – Inline-Styles mit !important) nach Story-Artboard: Panel-Karte, Desktop zweispaltig
   (Text links · Covers + Bewertung rechts), mobil Covers → Bewertung → Text; Kicker „Nur in der App“, Icons statt Emoji ----- */
body.zb-v2 #content .zbcta { max-width: none; margin: 20px 0 0; border: 0; border-radius: var(--zb-radius-lg); background: var(--zb-panel); color: var(--zb-body); box-shadow: none; overflow: visible; } /* Abstand 20/24 wie die Kästen-Gruppe (27.09., vorher 48); Breite/Zentrierung 680 in 40-story */
@media (min-width: 761px) { body.zb-v2 #content .zbcta { margin-top: 24px; } }
body.zb-v2 #content .zbcta .zbcta__body { padding: clamp(24px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
body.zb-v2 #content .zbcta .zbcta__excl { order: 1; margin: 0 0 24px; }
body.zb-v2 #content .zbcta .zbcta__review { order: 2; margin: 0 0 32px; }
body.zb-v2 #content .zbcta .zbcta__h { order: 3; }
body.zb-v2 #content .zbcta .zbcta__sub { order: 4; }
body.zb-v2 #content .zbcta .zbcta__list { order: 5; }
body.zb-v2 #content .zbcta .zbcta__btn { order: 6; }
body.zb-v2 #content .zbcta .zbcta__badges { order: 7; }
body.zb-v2 #content .zbcta .zbcta__free { order: 8; }
@media (min-width: 922px) {
  body.zb-v2 #content .zbcta .zbcta__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; grid-auto-flow: row dense; align-items: start; }
  body.zb-v2 #content .zbcta .zbcta__h, body.zb-v2 #content .zbcta .zbcta__sub, body.zb-v2 #content .zbcta .zbcta__list,
  body.zb-v2 #content .zbcta .zbcta__btn, body.zb-v2 #content .zbcta .zbcta__badges, body.zb-v2 #content .zbcta .zbcta__free { grid-column: 1; }
  body.zb-v2 #content .zbcta .zbcta__excl, body.zb-v2 #content .zbcta .zbcta__review { grid-column: 2; grid-row: span 3; }
}
body.zb-v2 #content .zbcta .zbcta__excl-label { color: var(--zb-meta); font-size: 13px; font-weight: 400; margin: 0 0 14px; }
body.zb-v2 #content .zbcta .zbcta__covers { gap: 16px; padding-bottom: 8px; }
body.zb-v2 #content .zbcta .zbcta__cover { text-align: left; }
@media (min-width: 560px) { body.zb-v2 #content .zbcta .zbcta__cover { flex-basis: calc((100% - 32px) / 3); } }
body.zb-v2 #content .zbcta .zbcta__cover img { border-radius: var(--zb-radius); box-shadow: none; background: var(--zb-panel-inner); }
body.zb-v2 #content .zbcta .zbcta__cover span { color: var(--zb-ink) !important; font-size: 13px; font-weight: 500; line-height: 1.35; } /* !i: Snippet 44 */
body.zb-v2 #content .zbcta .zbcta__h { color: var(--zb-ink) !important; font-size: clamp(24px, 2.6vw, 32px) !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: -.01em; margin: 0 0 16px !important; } /* !i: Snippet 44 */
body.zb-v2 #content .zbcta .zbcta__h::before { content: "Nur in der App"; display: block; margin: 0 0 12px; font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: 0; color: var(--zb-meta); }
body.zb-v2 #content .zbcta .zbcta__sub { color: var(--zb-body); font-size: 18px; line-height: 1.6; margin: 0 0 24px; }
body.zb-v2 #content .zbcta .zbcta__list { margin: 0 0 28px; }
body.zb-v2 #content .zbcta .zbcta__row { color: var(--zb-body); font-size: 16px; line-height: 1.5; gap: 12px; margin: 0 0 12px; }
body.zb-v2 #content .zbcta .zbcta__row .ic { font-size: 0; line-height: 0; color: transparent; width: 20px; height: 20px; flex: none; margin-top: 2px; background-color: var(--zb-ink); -webkit-mask: var(--zb-icon) center / contain no-repeat; mask: var(--zb-icon) center / contain no-repeat; }
body.zb-v2 #content .zbcta .zbcta__row:nth-child(1) .ic { --zb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3 5 6.4 5c1.9 0 3.4 1 4.3 2.4h2.6C14.2 6 15.7 5 17.6 5 21 5 23.1 8.4 21.6 11.8 19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E"); background-color: var(--zb-accent); }
body.zb-v2 #content .zbcta .zbcta__row:nth-child(2) .ic { --zb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E"); }
body.zb-v2 #content .zbcta .zbcta__row:nth-child(3) .ic { --zb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E"); }
body.zb-v2 #content .zbcta .zbcta__row:nth-child(4) .ic { --zb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E"); }
body.zb-v2 #content .zbcta .zbcta__review { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 10px; align-items: center; background: var(--zb-panel-inner); border: 0; border-radius: var(--zb-radius); padding: 22px 24px; overflow: visible; }
body.zb-v2 #content .zbcta .zbcta__review::before { content: none; }
body.zb-v2 #content .zbcta .zbcta__rlabel { margin: 0; color: var(--zb-meta); font-size: 12px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; }
body.zb-v2 #content .zbcta .zbcta__stars { margin: 0; color: var(--zb-accent); font-size: 15px; letter-spacing: 2px; }
body.zb-v2 #content .zbcta .zbcta__quote { grid-column: 1 / -1; margin: 0; color: var(--zb-ink); font-style: normal; font-size: 17px; line-height: 1.5; text-wrap: pretty; }
body.zb-v2 #content .zbcta .zbcta__btn { display: flex; width: 100%; max-width: 300px; min-width: 0; margin: 0 0 10px; align-items: center; justify-content: center; min-height: 48px; background: var(--zb-accent) !important; color: var(--zb-on-accent) !important; border-radius: var(--zb-radius); box-shadow: none; font-weight: 600; font-size: 16px; padding: 0 24px; } /* !i: Snippet 44 */
body.zb-v2 #content .zbcta .zbcta__btn:hover { background: var(--zb-accent-hover) !important; }
body.zb-v2 #content .zbcta .zbcta__badges { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 300px; margin: 0 0 14px; justify-content: flex-start; }
body.zb-v2 #content .zbcta .zbcta__badges a { display: flex; }
body.zb-v2 #content .zbcta .zbcta__badges img { width: 100%; height: auto; }
body.zb-v2 #content .zbcta .zbcta__free { margin: 0; text-align: left; color: var(--zb-meta); font-size: 13px; line-height: 1.5; }
body.zb-v2 #content .zbcta .zbcta__covers::-webkit-scrollbar-thumb { background: var(--zb-card-2); }

/* ----- Mobile Sticky-App-Leiste (.zbbar, Snippet 45 – bleibt fix, nur Farben) ----- */
body.zb-v2 .zbbar { background: var(--zb-surface); border-bottom-color: var(--zb-accent); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); font-family: var(--zb-font); }
body.zb-v2 .zbbar .zbbar__brand { color: var(--zb-ink); font-weight: 600; }
body.zb-v2 .zbbar .zbbar__tag { color: var(--zb-body); }
body.zb-v2 .zbbar .zbbar__btn { background: var(--zb-accent) !important; color: var(--zb-on-accent) !important; border-radius: var(--zb-radius-sm); font-weight: 600; } /* !i: Snippet 45 */
body.zb-v2 .zbbar .zbbar__x { color: var(--zb-meta); }

/* ----- Schriftgrößen-Regler (.zb-fs-tools, Snippet 53) + Stufen ----- */
body.zb-v2 #content .zb-fs-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; margin: 0 0 32px; padding-bottom: 24px; border-bottom: 1px solid var(--zb-rule); }
body.zb-v2 #content .zb-fs-tools .zb-fs-label { font-size: 13px; color: var(--zb-meta); margin: 0 4px 0 0; }
body.zb-v2 #content .zb-fs-btn { min-height: 40px; min-width: 40px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 9999px; background: var(--zb-card); color: var(--zb-ink); font-size: 16px; font-weight: 500; line-height: 1; cursor: pointer; box-shadow: none; }
body.zb-v2 #content .zb-fs-btn:hover, body.zb-v2 #content .zb-fs-btn:focus { background: var(--zb-card-2); color: var(--zb-ink); }
body.zb-v2 #content .zb-fs-btn:disabled { opacity: .4; cursor: default; background: var(--zb-card); }
html.zb-fs-1 body.zb-v2 #content .entry-content > p, html.zb-fs-1 body.zb-v2 #content .entry-content > ul, html.zb-fs-1 body.zb-v2 #content .entry-content > ol { font-size: 1.125em; line-height: 1.7; }
html.zb-fs-2 body.zb-v2 #content .entry-content > p, html.zb-fs-2 body.zb-v2 #content .entry-content > ul, html.zb-fs-2 body.zb-v2 #content .entry-content > ol { font-size: 1.28em; line-height: 1.75; }

/* ----- Eigene Bausteine: Sprungmarken-Pills ----- */
body.zb-v2 #content .zb-toc { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 32px; }
body.zb-v2 #content .zb-toc__label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--zb-meta); }
body.zb-v2 #content .zb-toc__list { display: flex; flex-wrap: wrap; gap: 8px; }
/* Pillen hell wie die Vorlesedauer-Filter (Torben 17.09.: neun Navy-Pillen wirkten massiv): Card auf Weiß, im Hero (.zb-lead) Weiß;
   Hover/Fokus = Navy wie die aktive Filter-Pille (Dark: Gelb). */
body.zb-v2 #content .zb-toc a.zb-toc__item { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 15px; border-radius: 9999px; background: var(--zb-card); color: var(--zb-ink); font-size: 14px; font-weight: 500; text-decoration: none; }
body.zb-v2 #content .zb-lead .zb-toc a.zb-toc__item { background: var(--zb-surface); }
body.zb-v2 #content .zb-toc a.zb-toc__item::after { content: "↓"; font-size: 12px; opacity: .6; }
body.zb-v2 #content .zb-toc a.zb-toc__item:hover, body.zb-v2 #content .zb-toc a.zb-toc__item:focus-visible { background: var(--zb-btn2); color: var(--zb-on-btn2); }
html.zb-dark body.zb-v2 #content .zb-lead .zb-toc a.zb-toc__item { background: var(--zb-card-2); } /* Dark: Hero ist Card → Pille eine Stufe heller */
html.zb-dark body.zb-v2 #content .zb-toc a.zb-toc__item:hover, html.zb-dark body.zb-v2 #content .zb-toc a.zb-toc__item:focus-visible { background: var(--zb-accent); color: var(--zb-on-accent); }

/* ----- Inhaltsverzeichnis (Easy Table of Contents, #ez-toc-container; Torben 18.09., z. B. Buchstabensalat) -----
   Plugin-Optik (weiße Box, grauer Rand, blaue Unterstreichungen) → Karte Card-2 (Dark Card), Titel 15/600, nummerierte Links in Ink ohne
   Linie, Hover Linkfarbe, Nummern in Meta, Toggle als schlichtes Icon. Spezifität (2,1,0) schlägt die div#ez-toc-container-Regeln des Plugins;
   Icon-Farbe steht inline am SVG → !important. */
body.zb-v2 #content #ez-toc-container { display: block; width: 100%; margin: 28px 0 32px; padding: 20px 24px 18px; border: 0; border-radius: var(--zb-radius); background: var(--zb-card-2); box-shadow: none; font-family: var(--zb-font); }
html.zb-dark body.zb-v2 #content #ez-toc-container { background: var(--zb-card); }
body.zb-v2 #content #ez-toc-container .ez-toc-title-container { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
body.zb-v2 #content #ez-toc-container p.ez-toc-title { margin: 0; padding: 0; font-family: var(--zb-font); font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--zb-ink); }
body.zb-v2 #content #ez-toc-container .ez-toc-title-toggle { position: static; float: none; }
body.zb-v2 #content #ez-toc-container a.ez-toc-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: 0 0 36px; float: none; margin: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: var(--zb-ink); line-height: 0; } /* festes Quadrat, Icon mittig (Plugin verschob den Icon-Span um 10 px – Torben 18.09.) */
body.zb-v2 #content #ez-toc-container a.ez-toc-toggle:hover { background: var(--zb-card); color: var(--zb-ink); }
html.zb-dark body.zb-v2 #content #ez-toc-container a.ez-toc-toggle:hover { background: var(--zb-card-2); }
body.zb-v2 #content #ez-toc-container a.ez-toc-toggle .ez-toc-js-icon-con, body.zb-v2 #content #ez-toc-container a.ez-toc-toggle .ez-toc-icon-toggle-span { display: inline-flex; align-items: center; gap: 3px; position: static; inset: auto; transform: none; width: auto; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: inherit; } /* Plugin-Rahmen + Versatz sitzen auf den inneren Spans */
body.zb-v2 #content #ez-toc-container a.ez-toc-toggle svg { color: currentColor !important; fill: currentColor !important; }
body.zb-v2 #content #ez-toc-container nav ul.ez-toc-list { margin: 0; padding: 0; list-style: none; }
body.zb-v2 #content #ez-toc-container nav ul.ez-toc-list li { margin: 0; padding: 5px 0; font-size: 15px; line-height: 1.45; color: var(--zb-meta); }
body.zb-v2 #content #ez-toc-container nav ul.ez-toc-list li::before, body.zb-v2 #content #ez-toc-container nav ul.ez-toc-list a.ez-toc-link::before { color: var(--zb-meta); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Links wie die Textlinks (Variante 1, Torben 18.09.: „nicht ersichtlich, dass das Links sind“): Linkfarbe + dezente Linie, Hover voll + Ink */
body.zb-v2 #content #ez-toc-container nav ul.ez-toc-list a.ez-toc-link { color: var(--zb-link); font-weight: var(--zb-link-weight); text-decoration: none; transition: color .15s ease, text-decoration-color .15s ease; }
body.zb-v2 #content #ez-toc-container nav ul.ez-toc-list a.ez-toc-link:hover { color: var(--zb-link-hover); text-decoration: var(--zb-link-hover-line); text-decoration-thickness: 1.5px; text-underline-offset: 3px; } /* V1: Hover-Linie nur Light */
body.zb-v2 #content #ez-toc-container a.ez-toc-toggle:focus:not(:focus-visible) { outline: none; }
body.zb-v2 #content #ez-toc-container a.ez-toc-toggle:focus-visible { outline: 2px solid var(--zb-focus); outline-offset: 2px; }
body.zb-v2 #content #ez-toc-container nav ul.ez-toc-list ul { margin: 4px 0 0 18px; padding: 0; }
body.zb-v2 #content #ez-toc-container nav ul.ez-toc-list ul li { padding: 3px 0; font-size: 14px; }

/* ----- Eigene Bausteine: Autorenbox ----- */
body.zb-v2 #content .zb-author { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 24px; margin: 24px 0 0; padding: 24px; border-radius: var(--zb-radius); background: var(--zb-panel); color: var(--zb-body); min-width: 0; } /* Artboard: #EEF2F8 (Dark #1A3A61); Abstand zum Text 24/32 wie die Feedback-Karte (Torben 27.09.: Kästen-Abstände vereinheitlicht, vorher 56) */
@media (min-width: 922px) { body.zb-v2 #content .zb-author { margin-top: 32px; } }
/* Kästen-Gruppe Feedback → Autorenbox → App-Box: 20 px mobil, 24 px ab 761 px (Torben 27.09.: „uneinheitlich und recht groß“, vorher 56/48) */
body.zb-v2 #content .zb-feedback + .zb-author { margin-top: 20px; }
@media (min-width: 761px) { body.zb-v2 #content .zb-feedback + .zb-author { margin-top: 24px; } }
body.zb-v2 #content .zb-author__main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
body.zb-v2 #content .zb-author__head { display: flex; align-items: center; gap: 16px; }
body.zb-v2 #content .zb-author__avatar { width: 72px; height: 72px; border-radius: 9999px; object-fit: cover; background: var(--zb-surface); outline: 2px solid var(--zb-accent); outline-offset: 2px; margin: 0; flex: none; }
body.zb-v2 #content .zb-author__id { display: flex; flex-direction: column; gap: 2px; }
body.zb-v2 #content .zb-author__name { font-size: 20px; font-weight: 600; color: var(--zb-ink); line-height: 1.2; }
body.zb-v2 #content .zb-author__role { font-size: 14px; color: var(--zb-meta); line-height: 1.4; }
body.zb-v2 #content .zb-author__bio { margin: 0; font-size: 15px; line-height: 1.6; color: var(--zb-body); text-wrap: pretty; }
body.zb-v2 #content .zb-author__dates { margin: 0; font-size: 13px; color: var(--zb-meta); }
body.zb-v2 #content .zb-author__links { display: flex; flex-direction: column; gap: 8px; font-size: 15px; font-weight: 500; }
body.zb-v2 #content .zb-author__links a { color: var(--zb-link); }
body.zb-v2 #content .zb-author__links a:hover { color: var(--zb-link-hover); }
body.zb-v2 #content .zb-author__note { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: var(--zb-radius); background: var(--zb-panel-inner); }
body.zb-v2 #content .zb-author__note-title { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--zb-link); }
body.zb-v2 #content .zb-author__note-text { margin: 0; font-family: var(--zb-font-hand); font-weight: 500; font-size: 23px; line-height: 1.45; color: var(--zb-ink); text-wrap: pretty; } /* Artboard: Caveat 500/23 */
body.zb-v2 #content .zb-author__note-sign { align-self: flex-end; font-family: var(--zb-font-hand); font-weight: 600; font-size: 24px; color: var(--zb-link); }

/* ----- Eigene Bausteine: Hero-Ergänzungen ----- */
body.zb-v2 #content .zb-hero-extra { display: flex; flex-direction: column; gap: 24px; } /* Artboard: Klappentext → Meta 24px */
body.zb-v2 #content .zb-hero-summary { margin: 0; font-size: 18px; line-height: 1.6; color: var(--zb-body); text-wrap: pretty; }
body.zb-v2 #content .zb-hero-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; color: var(--zb-body); }
body.zb-v2 #content .zb-hero-meta__item { display: inline-flex; align-items: center; gap: 8px; }
body.zb-v2 #content .zb-hero-meta__time::before { content: ""; flex: none; width: 16px; height: 16px; opacity: .8; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") center / contain no-repeat; }
body.zb-v2 #content .zb-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px; } /* + 24px Gap = 32px (Artboard) */
body.zb-v2 #content .zb-hero-actions .zb-btn { min-height: 52px; padding: 0 24px; font-size: 16px; }
body.zb-v2 #content .zb-hero-actions .zb-btn--app { padding: 0 22px; }
body.zb-v2 #content .zb-hero-actions.zb-hub-actions { margin: 0; gap: 12px; }
body.zb-v2 #content .zb-hero-actions.zb-hub-actions .zb-btn { min-height: 44px; padding: 0 18px; font-size: 15px; border-radius: var(--zb-radius-sm); }
body.zb-v2 #content .zb-anchor { display: block; height: 0; scroll-margin-top: 24px; }
body.zb-v2 #content .zb-video { margin: 0 0 24px; }
body.zb-v2 #content .zb-video__label { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; margin-bottom: 10px; border-radius: 9999px; background: var(--zb-chip); color: var(--zb-chip-ink); font-size: 13px; font-weight: 600; }

/* ----- App-Sektion „Noch mehr exklusive Geschichten“ (.zb-app-cta, inc/app-cta.php; Artboards Startseite + Suche) -----
   Standard = vollbreites Band auf Hero-Fläche (Dark: Nachthimmel); Modifier --card = Karte innerhalb der Inhaltsspalte (Suche mit Sidebar). */
body.zb-v2 #content .zb-app-cta { background-color: var(--zb-hero); padding: clamp(64px, 8vw, 96px) var(--zb-gutter) clamp(72px, 9vw, 112px); text-align: center; }
body.zb-v2 #content .zb-app-cta__inner { max-width: calc(var(--zb-container) - 2 * var(--zb-gutter)); margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
body.zb-v2 #content .zb-app-cta__icon { width: 72px; height: 72px; border-radius: 18px; background: url("../img/app-icon-144.webp") center / cover no-repeat; }
body.zb-v2 #content .zb-app-cta__title { margin: 24px 0 0; max-width: 520px; font-family: var(--zb-font); font-size: clamp(26px, 3vw, 36px); font-weight: 600; line-height: 1.15; letter-spacing: -.015em; color: var(--zb-ink); text-wrap: pretty; }
body.zb-v2 #content .zb-app-cta__text { margin: 14px 0 0; max-width: 440px; font-size: 18px; line-height: 1.6; color: var(--zb-body); text-wrap: pretty; }
body.zb-v2 #content .zb-app-cta .zb-btn { margin-top: 28px; min-height: 56px; padding: 0 28px; font-size: 18px; border-radius: var(--zb-radius); }
html.zb-dark body.zb-v2 #content .zb-app-cta { background-color: var(--zb-surface); background-image: var(--zb-sky); background-position: center bottom; background-size: cover; background-repeat: no-repeat; }
body.zb-v2 #content .zb-app-cta.zb-app-cta--card { margin: 56px 0 0; padding: clamp(40px, 5vw, 56px) 24px; border-radius: var(--zb-radius-lg); background-color: var(--zb-surface); }
body.zb-v2 #content .zb-app-cta.zb-app-cta--card .zb-app-cta__title { font-size: clamp(24px, 2.6vw, 32px); }
html.zb-dark body.zb-v2 #content .zb-app-cta.zb-app-cta--card { background-color: var(--zb-card); background-image: none; }

/* ----- „Neu“-Label in Kacheln (Snippet 23 `[new_post]` → <span class="su-label-type-neu">Neu</span> im CV-Custom-Field `a-neu`,
   z. B. „Weitere Gute-Nacht-Geschichten“): Torben 16.09. „Badge kaputt“ – das alte Inline-CSS (0,7em in 25-px-Box, eigene Zeile)
   griff noch. Jetzt: Akzent-Pill neben der Vorlesedauer, Custom-Field-Spalten in einer Zeile, leere Felder ohne Lücke. ----- */
body.zb-v2 #content .pt-cv-view .pt-cv-ctf-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; }
body.zb-v2 #content .pt-cv-view .pt-cv-ctf-list .pt-cv-ctf-column { width: auto; float: none; padding: 0; }
body.zb-v2 #content .pt-cv-view .pt-cv-ctf-list .pt-cv-ctf-column:has(.pt-cv-ctf-value:empty) { display: none; }
body.zb-v2 #content .pt-cv-view .pt-cv-custom-fields { margin: 0 !important; } /* !i: CV-Inline margin-top */
body.zb-v2 #content .su-label-type-neu { display: inline-flex; align-items: center; height: 22px; margin: 0; padding: 0 9px; border-radius: 9999px; background: var(--zb-accent); color: var(--zb-on-accent); font-family: var(--zb-font); font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }

/* ----- Float Menu Pro (Lupe „Suche“, vom Plugin fixiert): das Plugin schaltet nach 500 px Scroll nur die Klasse .fm-ready und damit
   `visibility` hart um → sanft per Opacity ein-/ausblenden (Torben 17.09.: „soll sanft ausblenden, verschwindet abrupt“) ----- */
body.zb-v2 .floating-menu { opacity: 0; transition: opacity .45s ease, visibility 0s linear .45s; }
body.zb-v2 .floating-menu.fm-ready { opacity: 1; transition: opacity .45s ease, visibility 0s linear 0s; }
@media (prefers-reduced-motion: reduce) { body.zb-v2 .floating-menu, body.zb-v2 .floating-menu.fm-ready { transition: none; } }

/* Sidebar-Karten im Dark Mode heller als die Fläche (Torben 17.09.: Surface auf Surface setzte sich nicht ab) */
html.zb-dark body.zb-v2 #content #secondary .widget { background: var(--zb-card); border-color: rgba(255, 255, 255, .1); } /* Card-2 #234773: eine Stufe über dem Band (Hub/Sammelseiten-Band = Card #1A3A61) */

/* ===== 31-appbox.css ===== */
/* ---------------------------------------------------------------------------
   31 App-Box Variante 1b „Nachthimmel-Karte“ (Experiment cta/b – assets/js/exp.js baut sie aus dem Exklusiv-Katalog und ersetzt die
   Snippet-44-Box .zbcta an derselben Stelle unter der Autorenbox). Torbens Entwurf 25.09.2026 (Input/Cover-Box-Optimierung und
   In-Story-Elemente/export/1b.png): Kopf mit App-Icon, Slider mit quadratischen Covern (124 px, ≈ 2,3 sichtbar, Punkte), Text, gelber
   Button „App laden“, schwarze Store-Badges, Sterne-Zeile. Kartenstil folgt dem Modus (Torben): Light = helle Karte (--zb-card-2),
   Dark = Nachthimmel (--zb-sky, nur im Dark Mode definiert). Cover als Hintergrundbild (kein <img>), Slots mit festem Verhältnis.
   --------------------------------------------------------------------------- */
body.zb-v2 #content .zb-appbox { position: relative; margin: 20px 0 0; padding: 20px 0; border: 0; border-radius: 20px; background: var(--zb-card-2); font-family: var(--zb-font); color: var(--zb-body); --zb-ab-x: 20px; --zb-ab-ink: var(--zb-ink); --zb-ab-muted: var(--zb-meta); --zb-ab-dot: rgba(26, 43, 78, .2); --zb-ab-slot: var(--zb-card); } /* Abstand 20/24 wie .zbcta (27.09., vorher 48); Breite 680 in 40-story */
@media (min-width: 761px) { body.zb-v2 #content .zb-appbox { margin-top: 24px; } }
html.zb-dark body.zb-v2 #content .zb-appbox { background: #072040 var(--zb-sky) center bottom / cover no-repeat; --zb-ab-ink: #FFFFFF; --zb-ab-muted: #D4D4E5; --zb-ab-dot: rgba(255, 255, 255, .25); --zb-ab-slot: #1A3A61; }
body.zb-v2 #content .zb-appbox .zb-appbox__head { display: flex; align-items: center; gap: 10px; margin: 0 var(--zb-ab-x) 16px; }
body.zb-v2 #content .zb-appbox .zb-appbox__icon { width: 36px; height: 36px; flex: none; border-radius: 9px; background: url("/wp-content/plugins/zitronenbande-design/assets/img/app-icon-144.webp") center / cover no-repeat; }
body.zb-v2 #content .zb-appbox .zb-appbox__ht { flex: 1 1 auto; min-width: 0; }
body.zb-v2 #content .zb-appbox .zb-appbox__title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--zb-ab-ink); max-width: none; }
body.zb-v2 #content .zb-appbox .zb-appbox__sub { margin: 2px 0 0; font-size: 12px; line-height: 1.3; color: var(--zb-ab-muted); max-width: none; }
body.zb-v2 #content .zb-appbox .zb-appbox__slider { display: flex; gap: 12px; padding: 0 0 0 var(--zb-ab-x); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--zb-ab-x); -webkit-overflow-scrolling: touch; scrollbar-width: none; } /* scroll-padding: sonst rastet Safari das erste Cover am Rand ein und frisst den Innenabstand (Torben 25.09.) */
body.zb-v2 #content .zb-appbox .zb-appbox__slider::-webkit-scrollbar { display: none; }
body.zb-v2 #content .zb-appbox .zb-appbox__slider::after { content: ""; flex: 0 0 calc(var(--zb-ab-x) - 12px); } /* rechter Innenabstand am Scroll-Ende (Padding-Right wird in Scroll-Containern nicht überall mitgezählt) */
body.zb-v2 #content .zb-appbox .zb-appbox__item { flex: 0 0 124px; display: flex; flex-direction: column; gap: 6px; scroll-snap-align: start; margin: 0; padding: 0; border: 0; box-shadow: none; text-decoration: none; color: var(--zb-ab-ink); font-weight: 500; -webkit-tap-highlight-color: transparent; }
body.zb-v2 #content .zb-appbox .zb-appbox__img { display: block; aspect-ratio: 1 / 1; border-radius: 12px; background: var(--zb-ab-slot) center / cover no-repeat; }
body.zb-v2 #content .zb-appbox .zb-appbox__t { display: block; font-size: 12px; font-weight: 500; line-height: 1.3; color: var(--zb-ab-ink); min-height: 2.6em; }
body.zb-v2 #content .zb-appbox .zb-appbox__dots { display: flex; gap: 6px; justify-content: center; margin: 12px var(--zb-ab-x) 0; min-height: 6px; }
body.zb-v2 #content .zb-appbox .zb-appbox__dots span { width: 6px; height: 6px; border-radius: 9999px; background: var(--zb-ab-dot); }
body.zb-v2 #content .zb-appbox .zb-appbox__dots span.is-on { background: var(--zb-accent); }
body.zb-v2 #content .zb-appbox .zb-appbox__text { margin: 16px var(--zb-ab-x) 14px; font-size: 13px; line-height: 1.5; color: var(--zb-ab-muted); max-width: none; }
body.zb-v2 #content .zb-appbox .zb-appbox__btn { display: flex; align-items: center; justify-content: center; margin: 0 var(--zb-ab-x); min-height: 52px; padding: 0 20px; border: 0; border-radius: 16px; background: var(--zb-accent); color: var(--zb-on-accent); font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none; box-shadow: none; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease, transform .1s ease; }
@media (hover: hover) { body.zb-v2 #content .zb-appbox .zb-appbox__btn:hover { background: var(--zb-accent-hover); color: var(--zb-on-accent); } }
body.zb-v2 #content .zb-appbox .zb-appbox__btn:active { background: var(--zb-accent-active); transform: translateY(1px); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .14); }
body.zb-v2 #content .zb-appbox .zb-appbox__badges { display: flex; gap: 10px; margin: 12px var(--zb-ab-x) 0; } /* beide Badges zusammen so breit wie der Button (Torben 25.09.) */
body.zb-v2 #content .zb-appbox .zb-appbox__badge { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 10px; border: 1px solid #A6A6A6; border-radius: 8px; background: #000000; color: #FFFFFF; text-decoration: none; box-shadow: none; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body.zb-v2 #content .zb-appbox .zb-appbox__badge svg { width: 18px; height: 20px; flex: none; }
body.zb-v2 #content .zb-appbox .zb-appbox__bt { display: flex; flex-direction: column; line-height: 1; color: #FFFFFF; }
body.zb-v2 #content .zb-appbox .zb-appbox__bt span:first-child { font-size: 9px; }
body.zb-v2 #content .zb-appbox .zb-appbox__bt span:last-child { font-size: 15px; font-weight: 600; }
body.zb-v2 #content .zb-appbox .zb-appbox__foot { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px var(--zb-ab-x) 0; font-size: 12px; line-height: 1.4; color: var(--zb-ab-muted); max-width: none; }
body.zb-v2 #content .zb-appbox .zb-appbox__stars { color: var(--zb-accent); letter-spacing: 1px; }
body.zb-v2 #content .zb-appbox a:focus:not(:focus-visible) { outline: none; }
body.zb-v2 #content .zb-appbox a:focus-visible { outline: 2px solid var(--zb-focus); outline-offset: 2px; }
@media (min-width: 560px) {
  body.zb-v2 #content .zb-appbox { padding: 28px 0; --zb-ab-x: 28px; }
  body.zb-v2 #content .zb-appbox .zb-appbox__title { font-size: 17px; }
  body.zb-v2 #content .zb-appbox .zb-appbox__sub { font-size: 13px; }
  body.zb-v2 #content .zb-appbox .zb-appbox__item { flex-basis: 140px; }
  body.zb-v2 #content .zb-appbox .zb-appbox__t { font-size: 13px; }
  body.zb-v2 #content .zb-appbox .zb-appbox__text { font-size: 15px; }
  body.zb-v2 #content .zb-appbox .zb-appbox__btn { max-width: 320px; margin-left: auto; margin-right: auto; width: 100%; }
  body.zb-v2 #content .zb-appbox .zb-appbox__badges { max-width: 320px; margin-left: auto; margin-right: auto; }
  body.zb-v2 #content .zb-appbox .zb-appbox__foot { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  body.zb-v2 #content .zb-appbox .zb-appbox__btn { transition: none; }
  body.zb-v2 #content .zb-appbox .zb-appbox__btn:active { transform: none; }
}

/* ===== 40-story.css ===== */
/* ---------------------------------------------------------------------------
   40 Story-Seiten (body.zb-t-story) – Hero-Karte aus dem vorhandenen header.entry-header
   (H1, .entry-meta, .post-thumb) + injizierter .zb-hero-extra; Textspalte; Fabeln/Märchen 2:3-Cover.
   Reihenfolge im DOM: Breadcrumb (inc/breadcrumb.php, astra_single_header_top) · H1 · .post-thumb · .entry-meta · .zb-hero-extra
   Abstände nach Artboard: Krume → H1 20 · H1 → Klappentext 20 · Klappentext → Meta 24 · Meta → Buttons 32 · Buttons → Autor 28.
   --------------------------------------------------------------------------- */
/* Textsektion weiß wie im Artboard (Dark: Surface #0B294E); Container breiter (Astra 1140 → 1260), damit neben der
   336-px-Sidebar (bleibt – Mediavine) Platz für Hero-Cover 320 px und die 680-px-Textspalte ist. */
body.zb-v2.zb-t-story #content, body.zb-v2.zb-t-blog #content { background-color: var(--zb-surface); }
/* Containerbreite 1260 kommt global aus 10-base (--zb-container). */
body.zb-v2.zb-t-story #content .ast-article-single { padding: 0; }
body.zb-v2.zb-t-story #content .single-layout-1 > header.entry-header {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 280px); grid-template-areas: "crumb cover" "title cover" "extra cover" "meta cover";
  column-gap: 32px; row-gap: 0; align-items: start; margin: 0 0 40px !important; padding: clamp(24px, 3vw, 32px); border-radius: var(--zb-radius-lg); background: var(--zb-hero);
} /* !i: Customizer .entry-header{margin-bottom:1em!important} */
@media (min-width: 761px) {
  /* Mit JS malt design.js das Hero-Band über die volle Breite (auch hinter der Sidebar) – dann keine Karten-Einrückung */
  html.zb-js body.zb-v2.zb-t-story #content .single-layout-1 > header.entry-header { padding-left: 0; padding-right: 0; border-radius: 0; background: transparent; padding-bottom: 40px; }
  html.zb-dark.zb-js body.zb-v2.zb-t-story #content .single-layout-1 > header.entry-header { background: transparent; border-radius: 0; padding-left: 0; padding-right: 0; } /* Dark: Nachthimmel liegt als Band auf #content (design.js, --zb-hero-img), Karte nur mobil/ohne JS */
}
body.zb-v2.zb-t-story #content .single-layout-1 > header.entry-header > .yoast-breadcrumb { grid-area: crumb; margin: 0 0 20px; }
body.zb-v2.zb-t-story #content .single-layout-1 > header.entry-header > .entry-title { grid-area: title; margin: 0 0 20px; font-size: clamp(28px, 3.6vw, 46px); }
body.zb-v2.zb-t-story #content .single-layout-1 > header.entry-header > .post-thumb { grid-area: cover; margin: 0; align-self: center; } /* Artboard: Cover vertikal mittig zum Textblock */
body.zb-v2.zb-t-story #content .single-layout-1 > header.entry-header > .post-thumb img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 28px; margin: 0; background: var(--zb-card); } /* Artboard: 28px */
body.zb-v2.zb-t-story.zb-cat-fabeln #content .single-layout-1 > header.entry-header > .post-thumb img,
body.zb-v2.zb-t-story.zb-cat-maerchen #content .single-layout-1 > header.entry-header > .post-thumb img { aspect-ratio: 2 / 3; }
body.zb-v2.zb-t-story #content .single-layout-1 > header.entry-header > .zb-hero-extra { grid-area: extra; }
body.zb-v2.zb-t-story #content .single-layout-1 > header.entry-header > .entry-meta { grid-area: meta; margin: 28px 0 0; }
@media (max-width: 760px) {
  /* Mobil randlos und direkt unter dem Header wie im Artboard (Hero-Fläche schließt an den Header an) */
  body.zb-v2.zb-t-story.ast-plain-container #content #primary { padding-top: 0; }
  body.zb-v2.zb-t-story #content .single-layout-1 > header.entry-header { grid-template-columns: minmax(0, 1fr); grid-template-areas: "crumb" "title" "cover" "extra" "meta"; margin: 0 -20px 24px !important; padding: 28px 20px 40px; border-radius: 0; } /* !i */
  body.zb-v2.zb-t-story #content .single-layout-1 > header.entry-header > .entry-title { margin: 0; font-size: clamp(28px, 8vw, 34px); }
  body.zb-v2.zb-t-story #content .single-layout-1 > header.entry-header > .post-thumb { margin: 28px 0 20px; max-width: none; }
}

/* Textspalte: 680 px, ab Desktop mittig in der Inhaltsspalte (Artboard: zentrierte Lesespalte zwischen breiteren Sektionen);
   nur bekannte direkte Kinder – Mediavine-Container (divs) bleiben unberührt. */
body.zb-v2.zb-t-story #content .entry-content { font-size: 19px; line-height: 1.7; } /* Lesetext wie vor dem Redesign (19 px) */
body.zb-v2.zb-t-story #content .entry-content > p { max-width: 680px; margin-bottom: 1.1em; text-wrap: pretty; }
body.zb-v2.zb-t-story #content .entry-content > .zb-fs-tools, body.zb-v2.zb-t-story #content .entry-content > .zb-author, body.zb-v2.zb-t-story #content .entry-content > .zb-feedback, body.zb-v2.zb-t-story #content .entry-content > .zbcta, body.zb-v2.zb-t-story #content .entry-content > .zb-appbox, body.zb-v2.zb-t-story #content .entry-content > .zb-inline, body.zb-v2.zb-t-story #content .entry-content > .shariff { max-width: 680px; } /* .zbcta/.zb-appbox seit 27.09. (Torben: App-Box war breiter als die anderen Kästen) */
@media (min-width: 922px) {
  body.zb-v2.zb-t-story #content .entry-content > p, body.zb-v2.zb-t-story #content .entry-content > ul, body.zb-v2.zb-t-story #content .entry-content > ol,
  body.zb-v2.zb-t-story #content .entry-content > h2, body.zb-v2.zb-t-story #content .entry-content > h3,
  body.zb-v2.zb-t-story #content .entry-content > figure.wp-block-image:not(.alignleft):not(.alignright),
  body.zb-v2.zb-t-story #content .entry-content > .zb-fs-tools, body.zb-v2.zb-t-story #content .entry-content > .zb-video,
  body.zb-v2.zb-t-story #content .entry-content > .zb-author, body.zb-v2.zb-t-story #content .entry-content > .zb-feedback, body.zb-v2.zb-t-story #content .entry-content > .zbcta, body.zb-v2.zb-t-story #content .entry-content > .zb-appbox, body.zb-v2.zb-t-story #content .entry-content > .zb-inline, body.zb-v2.zb-t-story #content .entry-content > .shariff { max-width: 680px; margin-left: auto; margin-right: auto; }
}
body.zb-v2.zb-t-story #content .summary-wrapper { display: none; } /* Vorschau-Phase: Snippet 10 ist auf v2 abgehängt; Fallback falls Cache */

/* Teilen-Zeile: Hinweis wie im Artboard („Hat dir die Geschichte gefallen? Teile sie.“) */
body.zb-v2.zb-t-story #content .shariff { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--zb-rule); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
body.zb-v2.zb-t-story #content .shariff::before { content: "Hat dir die Geschichte gefallen? Teile sie."; font-size: 14px; color: var(--zb-meta); }
body.zb-v2.zb-t-story #content .shariff .shariff-buttons { margin: 0; }

/* „Weitere Geschichten“-Block (Advanced Ads .nacht-weitere-geschichten: Überschrift, Satz mit Hub-Link, Kachel-Grid, danach
   „Weitere interessante Artikel“-Liste) als Band auf Seitenhintergrund wie im Artboard; mobil randlos */
body.zb-v2.zb-t-story #content .nacht-weitere-geschichten { margin: 48px 0 0; padding: 32px 28px 24px; border-top: 0; border-radius: var(--zb-radius-lg); background: var(--zb-bg); }
@media (min-width: 761px) {
  html.zb-js body.zb-v2.zb-t-story #content .nacht-weitere-geschichten { padding-left: 0; padding-right: 0; border-radius: 0; background: transparent; } /* Band per design.js */
}
body.zb-v2.zb-t-story #content .nacht-weitere-geschichten > p { max-width: none; margin: 0 0 8px; }
body.zb-v2.zb-t-story #content .nacht-weitere-geschichten > p > strong { font-size: clamp(22px, 2.4vw, 28px); font-weight: 600; line-height: 1.2; color: var(--zb-ink); display: block; margin: 0 0 8px; }
body.zb-v2.zb-t-story #content .nacht-weitere-geschichten > p:not(:first-of-type) { font-size: 14px; font-weight: 500; color: var(--zb-body); margin: 0 0 24px; }
body.zb-v2.zb-t-story #content .nacht-weitere-geschichten > .pt-cv-wrapper { margin: 0 0 32px; }
body.zb-v2.zb-t-story #content .nacht-weitere-geschichten .pt-cv-meta-fields { display: none; } /* Kategorie-Label unter jeder Kachel – nicht im Artboard */
body.zb-v2.zb-t-story #content .nacht-weitere-geschichten .pt-cv-view.pt-cv-grid .pt-cv-page { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 28px 20px; }
body.zb-v2.zb-t-story #content .nacht-weitere-geschichten .su-spacer { display: none; }
@media (max-width: 760px) {
  body.zb-v2.zb-t-story #content .nacht-weitere-geschichten { margin: 40px -20px 0; padding: 32px 20px 16px; border-radius: 0; }
  body.zb-v2.zb-t-story #content .nacht-weitere-geschichten .pt-cv-view.pt-cv-grid .pt-cv-page { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
body.zb-v2.zb-t-story #content .nacht-kennst-du-schon-witze-2 { margin: 32px 0; padding: 20px 24px; border-radius: var(--zb-radius); background: var(--zb-card-2); }
body.zb-v2.zb-t-story #content .nacht-kennst-du-schon-witze-2 figure.alignright img { border-radius: var(--zb-radius); }

/* ===== 41-blog.css ===== */
/* ---------------------------------------------------------------------------
   41 Blog-Artikel (body.zb-t-blog): Witze, Sprüche, Glückwünsche, Redewendungen, Kinderlieder.
   Hero = header.entry-header (H1 + Autor-Zeile) als Karte; Witze-Seiten (Slug enthält „witz“)
   bekommen durchnummerierte Karten für die ul.wp-block-list-Einträge (rein CSS-Counter).
   --------------------------------------------------------------------------- */
body.zb-v2.zb-t-blog #content .ast-article-single { padding: 0; }
body.zb-v2.zb-t-blog #content .single-layout-1 > header.entry-header {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 260px); grid-template-areas: "crumb crumb" "title cover" "meta cover"; column-gap: 32px; align-items: start;
  margin: 0 0 32px !important; padding: clamp(24px, 3vw, 32px); border-radius: var(--zb-radius-lg); background: var(--zb-hero);
} /* !i: Customizer .entry-header */
body.zb-v2.zb-t-blog #content .single-layout-1 > header.entry-header.ast-no-thumbnail { grid-template-columns: minmax(0, 1fr); grid-template-areas: "crumb" "title" "meta"; }
body.zb-v2.zb-t-blog #content .single-layout-1 > header.entry-header > .yoast-breadcrumb { grid-area: crumb; margin: 0 0 20px; } /* Artboard Kinderwitze: Krume im Hero über dem Titel */
@media (min-width: 761px) {
  html.zb-js body.zb-v2.zb-t-blog #content .single-layout-1 > header.entry-header,
  html.zb-js body.zb-v2.zb-t-blog #content .entry-content > .zb-lead:first-child,
  html.zb-js body.zb-v2.zb-t-blog #content .single-layout-1 > header.entry-header:has(+ .entry-content > .zb-lead:first-child) { padding-left: 0; padding-right: 0; border-radius: 0 !important; background: transparent; } /* !i: eigene Radius-Regel unten; Band per design.js */
}
/* Dark: Hero-Kopf + Intro-Box in der Bandfarbe (Palette 2b: Band = Grund, unsichtbar) – vorher --zb-card: die Intro-Box lag ab 761 px
   als hellere Kiste ohne Rundung/Innenabstand neben dem transparenten Kopf (gleiche Spezifität, spätere Regel; Torben 18.09. Kinderwitze) */
html.zb-dark body.zb-v2.zb-t-blog #content .single-layout-1 > header.entry-header,
html.zb-dark body.zb-v2.zb-t-blog #content .entry-content > .zb-lead:first-child { background: var(--zb-band-hero); }
body.zb-v2.zb-t-blog #content .single-layout-1 > header.entry-header > .entry-title { grid-area: title; margin: 0 0 16px; font-size: clamp(28px, 3.6vw, 42px); }
body.zb-v2.zb-t-blog #content .single-layout-1 > header.entry-header > .post-thumb { grid-area: cover; margin: 0; }
body.zb-v2.zb-t-blog #content .single-layout-1 > header.entry-header > .post-thumb img { width: 100%; height: auto; border-radius: var(--zb-radius-lg); margin: 0; }
body.zb-v2.zb-t-blog #content .single-layout-1 > header.entry-header > .entry-meta { grid-area: meta; margin: 8px 0 0; }
/* Hero-Fortsetzung wie im Artboard: Intro-Absatz + Sprungmarken (inc/toc-pills.php bündelt sie in .zb-lead)
   schließen nahtlos an den Hero an: Header = obere Rundung, .zb-lead = untere Rundung. */
body.zb-v2.zb-t-blog #content .entry-content > .zb-lead:first-child { background: var(--zb-hero); margin: -32px 0 40px; padding: 12px clamp(20px, 3vw, 32px) clamp(20px, 3vw, 32px); border-radius: 0 0 var(--zb-radius-lg) var(--zb-radius-lg); }
body.zb-v2.zb-t-blog #content .zb-toc__item { text-decoration: none; }
body.zb-v2.zb-t-blog #content .entry-content > .zb-lead > p { font-size: 18px; line-height: 1.6; max-width: 640px; margin: 0 0 16px; }
body.zb-v2.zb-t-blog #content .entry-content > .zb-lead > .wp-block-spacer { height: 8px !important; max-height: 8px; } /* !i: Inline-Höhe */
body.zb-v2.zb-t-blog #content .entry-content > .zb-lead > .zb-toc { margin: 8px 0 0; }
body.zb-v2.zb-t-blog #content .single-layout-1 > header.entry-header:has(+ .entry-content > .zb-lead:first-child) { border-radius: var(--zb-radius-lg) var(--zb-radius-lg) 0 0; margin-bottom: 32px !important; padding-bottom: 8px; } /* !i */
@media (max-width: 760px) {
  body.zb-v2.zb-t-blog.ast-plain-container #content #primary { padding-top: 0; }
  body.zb-v2.zb-t-blog #content .single-layout-1 > header.entry-header { grid-template-columns: minmax(0, 1fr); grid-template-areas: "crumb" "title" "cover" "meta"; margin: 0 -20px 24px !important; padding: 28px 20px 20px; border-radius: 0; } /* !i */
  body.zb-v2.zb-t-blog #content .entry-content > .zb-lead:first-child { margin: -24px -20px 32px; padding: 0 20px 24px; border-radius: 0; }
  body.zb-v2.zb-t-blog #content .single-layout-1 > header.entry-header:has(+ .entry-content > .zb-lead:first-child) { margin-bottom: 24px !important; padding-bottom: 4px; border-radius: 0; }
}
body.zb-v2.zb-t-blog #content .entry-content > p { text-wrap: pretty; }
body.zb-v2.zb-t-blog #content .entry-content > h2 { margin-top: 48px; margin-bottom: 16px; }
body.zb-v2.zb-t-blog #content .entry-content > .zb-toc + h2, body.zb-v2.zb-t-blog #content .entry-content > h2:first-child { margin-top: 0; }
body.zb-v2.zb-t-blog #content .entry-content figure.wp-block-image img { border-radius: var(--zb-radius); }

/* Witze-Listen (Slug enthält „witz“: kinderwitze, flachwitze, witze …) – Torben 17.09.: Aufzählungspunkte (Variante 4 der Vergleichsseite):
   Karten wie die Nummern-Version (Card-2, r16), darin kleiner Punkt (6 px, Light graublau, Dark weiß) eng am Text statt der Zahl. */
body.zb-v2.zb-t-blog[class*="zb-slug-"][class*="witz"] #content .entry-content > ul.wp-block-list { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
body.zb-v2.zb-t-blog[class*="zb-slug-"][class*="witz"] #content .entry-content > ul.wp-block-list { margin-left: 0 !important; margin-right: 0 !important; } /* !i: Astra/Customizer-Listenränder (1,5em/1em) – Liste bündig zum Text (Torben 17.09.) */
body.zb-v2.zb-t-blog[class*="zb-slug-"][class*="witz"] #content .entry-content > ul.wp-block-list > li { position: relative; margin: 0; padding: 18px 20px 18px 40px; border-radius: var(--zb-radius); background: var(--zb-card-2); font-size: 17px; line-height: 1.6; color: var(--zb-body); text-wrap: pretty; }
html.zb-dark body.zb-v2.zb-t-blog[class*="zb-slug-"][class*="witz"] #content .entry-content > ul.wp-block-list > li { background: var(--zb-card); }
body.zb-v2.zb-t-blog[class*="zb-slug-"][class*="witz"] #content .entry-content > ul.wp-block-list > li::before { content: ""; position: absolute; left: 21px; top: 29px; width: 6px; height: 6px; border-radius: 9999px; background: var(--zb-body); }
html.zb-dark body.zb-v2.zb-t-blog[class*="zb-slug-"][class*="witz"] #content .entry-content > ul.wp-block-list > li::before { background: var(--zb-ink); }
body.zb-v2.zb-t-blog[class*="zb-slug-"][class*="witz"] #content .entry-content > ul.wp-block-list > li::marker { content: ""; }
/* „Weitere Witze“-Block (Advanced Ads) + Kommentar-Aufforderung */
body.zb-v2.zb-t-blog #content .nacht-entity-placement { margin: 40px 0 0; padding: 24px; border-radius: var(--zb-radius); background: var(--zb-card); }
body.zb-v2.zb-t-blog #content .nacht-entity-placement > p:first-child > strong { font-size: 20px; color: var(--zb-ink); }

/* ===== 42-hub.css ===== */
/* ---------------------------------------------------------------------------
   42 Geschichten-Hub (/gute-nacht-geschichte/, body.zb-t-hub) und Sammelseiten (zb-t-subhub):
   NUR CSS – kein PHP-Filter, kein Content-Eingriff, Breadcrumb bleibt unten wie live (Schutzgarantie).
   Hub-DOM (16.09.): header.entry-header (H1) · .entry-content > p (Intro) · h2 „Die beliebtesten“ · .pt-cv-wrapper ·
   spacer · h2 „Beliebt im …“ · p · wrapper · spacer · h2 „Alle …“ · p · wrapper (Filter + Grid + Mehr-Button) ·
   spacer · h2 „Beliebte Charaktere“ · wrapper (Carousel) · spacer · UAGB-Kurz-Box · Text-H2/p · Yoast-FAQ.
   Artboard: Hero-Band (Kicker, H1, Intro, Beliebteste) · weiße Sektionen · Filter-Pills · Charaktere-Raster · Kurz-Box.
   Nicht möglich ohne DOM-Eingriff: Hero-Buttons „Alle Geschichten/Suche“, Charaktere-Absatz, 2-spaltige Sektionen.
   --------------------------------------------------------------------------- */
body.zb-v2.zb-t-hub #content, body.zb-v2.zb-t-subhub #content { background-color: var(--zb-surface); }
/* Containerbreite 1260 kommt global aus 10-base (--zb-container). */
body.zb-v2.zb-t-hub #content .ast-article-single, body.zb-v2.zb-t-subhub #content .ast-article-single { padding: 0; }

/* Hero = H1-Header (Astra-Seiten: header.entry-header direkt im article, ohne .single-layout-1) + Intro + Buttons (inc/hub-hero.php)
   + „Die beliebtesten Geschichten“ + erstes Grid: Geschwister mit gleicher Fläche ohne Lücken. Ohne JS eine Karte; mit JS (html.zb-js)
   malt design.js das Band über die volle Breite und die Karten-Einrückung entfällt. */
body.zb-v2.zb-t-hub #content header.entry-header,
body.zb-v2.zb-t-hub #content .entry-content > p:first-child,
body.zb-v2.zb-t-hub #content .entry-content > .zb-hub-actions,
body.zb-v2.zb-t-hub #content .entry-content > h2:first-of-type,
body.zb-v2.zb-t-hub #content .entry-content > h2:first-of-type + .pt-cv-wrapper { background: var(--zb-hero); margin: 0 !important; padding-left: clamp(24px, 3vw, 32px); padding-right: clamp(24px, 3vw, 32px); } /* !i: Customizer .entry-header */
body.zb-v2.zb-t-hub #content .entry-content > .zb-hub-actions { padding-top: 24px; }
@media (min-width: 761px) {
  html.zb-js body.zb-v2.zb-t-hub #content header.entry-header,
  html.zb-js body.zb-v2.zb-t-hub #content .entry-content > p:first-child,
  html.zb-js body.zb-v2.zb-t-hub #content .entry-content > .zb-hub-actions,
  html.zb-js body.zb-v2.zb-t-hub #content .entry-content > h2:first-of-type,
  html.zb-js body.zb-v2.zb-t-hub #content .entry-content > h2:first-of-type + .pt-cv-wrapper { padding-left: 0; padding-right: 0; border-radius: 0; background: transparent; }
}
body.zb-v2.zb-t-hub #content header.entry-header { padding-top: clamp(24px, 3vw, 32px); border-radius: var(--zb-radius-lg) var(--zb-radius-lg) 0 0; }
body.zb-v2.zb-t-hub #content header.entry-header::before { content: "Zum Vorlesen · kostenlos · ohne Anmeldung"; display: block; margin: 0 0 16px; font-size: 14px; line-height: 1.4; color: var(--zb-meta); } /* Kicker aus dem Artboard – generierter Inhalt, kein DOM */
body.zb-v2.zb-t-hub #content header.entry-header > .entry-title { margin: 0; font-size: clamp(30px, 3.8vw, 46px); line-height: 1.12; letter-spacing: -.015em; }
body.zb-v2.zb-t-hub #content .entry-content > p:first-child { padding-top: 16px; max-width: none; font-size: 18px; line-height: 1.6; }
body.zb-v2.zb-t-hub #content .entry-content > p:first-child::after { content: ""; display: block; height: 4px; }
body.zb-v2.zb-t-hub #content .entry-content > h2:first-of-type { padding-top: 36px; padding-bottom: 16px; margin-bottom: 0 !important; font-size: 20px !important; } /* !i: allgemeine Hub-H2-Regel; Abstand als Padding, sonst weiße Naht zum Raster */
body.zb-v2.zb-t-hub #content .entry-content > h2:first-of-type + .pt-cv-wrapper { padding-top: 16px; padding-bottom: clamp(24px, 3vw, 32px); border-radius: 0 0 var(--zb-radius-lg) var(--zb-radius-lg); }
html.zb-dark body.zb-v2.zb-t-hub #content header.entry-header,
html.zb-dark body.zb-v2.zb-t-hub #content .entry-content > p:first-child,
html.zb-dark body.zb-v2.zb-t-hub #content .entry-content > .zb-hub-actions,
html.zb-dark body.zb-v2.zb-t-hub #content .entry-content > h2:first-of-type,
html.zb-dark body.zb-v2.zb-t-hub #content .entry-content > h2:first-of-type + .pt-cv-wrapper { background: var(--zb-band-hero); } /* Dark: Karten-Fallback (mobil/ohne JS) in Bandfarbe = Grund (Palette 2b, Torben 18.09.: mobil lag noch eine Karte über dem Grund) */
@media (min-width: 761px) {
  html.zb-dark.zb-js body.zb-v2.zb-t-hub #content header.entry-header,
  html.zb-dark.zb-js body.zb-v2.zb-t-hub #content .entry-content > p:first-child,
  html.zb-dark.zb-js body.zb-v2.zb-t-hub #content .entry-content > .zb-hub-actions,
  html.zb-dark.zb-js body.zb-v2.zb-t-hub #content .entry-content > h2:first-of-type,
  html.zb-dark.zb-js body.zb-v2.zb-t-hub #content .entry-content > h2:first-of-type + .pt-cv-wrapper { background: transparent; }
}
@media (max-width: 760px) {
  body.zb-v2.zb-t-hub.ast-plain-container #content #primary { padding-top: 0; }
  body.zb-v2.zb-t-hub #content header.entry-header,
  body.zb-v2.zb-t-hub #content .entry-content > p:first-child,
  body.zb-v2.zb-t-hub #content .entry-content > .zb-hub-actions,
  body.zb-v2.zb-t-hub #content .entry-content > h2:first-of-type,
  body.zb-v2.zb-t-hub #content .entry-content > h2:first-of-type + .pt-cv-wrapper { margin-left: -20px !important; margin-right: -20px !important; padding-left: 20px; padding-right: 20px; border-radius: 0; } /* randlos wie im Artboard */
  body.zb-v2.zb-t-hub #content header.entry-header { padding-top: 28px; }
  body.zb-v2.zb-t-hub #content .entry-content > h2:first-of-type + .pt-cv-wrapper { padding-bottom: 32px; }
}

/* Sektionen: Überschriften, Abstände */
body.zb-v2.zb-t-hub #content .entry-header, body.zb-v2.zb-t-subhub #content .entry-header { margin-bottom: 16px !important; } /* !i: Customizer */
body.zb-v2.zb-t-hub #content .entry-content > h2, body.zb-v2.zb-t-subhub #content .entry-content > h2 { margin-top: 40px; margin-bottom: 14px; }
body.zb-v2.zb-t-hub #content .entry-content > h2.zwischenueberschrift-neu, body.zb-v2.zb-t-subhub #content .entry-content > h2.zwischenueberschrift-neu { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; }
body.zb-v2.zb-t-hub #content .entry-content > p, body.zb-v2.zb-t-subhub #content .entry-content > p { max-width: 720px; text-wrap: pretty; }
body.zb-v2.zb-t-hub #content .entry-content .wp-block-spacer, body.zb-v2.zb-t-subhub #content .entry-content .wp-block-spacer { max-height: 32px; }
body.zb-v2.zb-t-hub #content .pt-cv-wrapper, body.zb-v2.zb-t-subhub #content .pt-cv-wrapper { margin: 0 0 8px; }
body.zb-v2.zb-t-hub #content .ast-article-single > .yoast-breadcrumb { margin: 40px 0 0; font-size: 13px; } /* bleibt unten (Snippet 40) */

/* Vorlesedauer-Filter (Content Views Pro Live-Filter, <select>): Select-Pille; mit JS (design.js) Pill-Buttons wie im Artboard,
   das <select> bleibt im DOM (steuert den AJAX-Reload) und wird nur ausgeblendet */
body.zb-v2 #content .cvp-live-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 24px; }
body.zb-v2 #content .cvp-live-filter .cvp-label { font-size: 14px; color: var(--zb-meta); margin: 0; font-weight: 400; }
body.zb-v2 #content .cvp-live-filter select { height: 40px; padding: 0 40px 0 16px; border-radius: 9999px; background-color: var(--zb-card); color: var(--zb-ink); font-size: 14px; font-weight: 500; min-width: 140px; }
body.zb-v2 #content .cvp-live-filter.zb-has-pills select { display: none; }
/* Band-Ränder (design.js malt Bänder 48 px vor/nach dem Inhalt): die H2, an denen ein Band beginnt oder das nächste folgt, bekommen 96 px
   Abstand nach oben → 48 px Grund zwischen Band und Nachbar + 48 px Luft im Band. Anker-IDs der Hub-Überschriften sind stabil (Schutzseite);
   „Beliebt im …“ hat keine ID → Spacer + H2 ohne ID. */
body.zb-v2.zb-t-hub #content .entry-content > .wp-block-spacer + h2:not([id]),
body.zb-v2.zb-t-hub #content .entry-content > h2#h-alle-gute-nacht-geschichten,
body.zb-v2.zb-t-hub #content .entry-content > h2#h-beliebte-charaktere,
body.zb-v2.zb-t-hub #content .entry-content > h2#h-wer-schreibt-unsere-geschichten,
body.zb-v2.zb-t-hub #content .entry-content > h2#h-haufige-fragen-zu-unseren-gute-nacht-geschichten { margin-top: 96px !important; } /* !i: Customizer-H2-Abstand */
@media (max-width: 760px) {
  body.zb-v2.zb-t-hub #content .entry-content > .wp-block-spacer + h2:not([id]),
  body.zb-v2.zb-t-hub #content .entry-content > h2#h-alle-gute-nacht-geschichten,
  body.zb-v2.zb-t-hub #content .entry-content > h2#h-beliebte-charaktere,
  body.zb-v2.zb-t-hub #content .entry-content > h2#h-wer-schreibt-unsere-geschichten,
  body.zb-v2.zb-t-hub #content .entry-content > h2#h-haufige-fragen-zu-unseren-gute-nacht-geschichten { margin-top: 56px !important; }
}
/* Kurz-Box (Karte auf dem Grund) zwischen Charaktere-Band und „Du suchst …“: 72 px Luft nach oben zur Bandkante (Charaktere-Band endet
   48 px unter dem Carousel; dazwischen Carousel-Rand 8 + Spacer 32) und 72 px nach unten (Spacer 32 + H2 40) – Torben 18.09. */
body.zb-v2.zb-t-hub #content .entry-content > .wp-block-uagb-container.uagb-block-c93ddd66 { margin-top: 58px !important; } /* !i: Spectra-Inline-Margin; gemessen: 58 → 72 px zur Bandkante */
@media (max-width: 760px) { body.zb-v2.zb-t-hub #content .entry-content > .wp-block-uagb-container.uagb-block-c93ddd66 { margin-top: 32px !important; } } /* mobil kein Band → 72/72 */
body.zb-v2 #content .zb-filter-pills { display: flex; flex-wrap: wrap; gap: 8px; }
body.zb-v2 #content .zb-filter-pill { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border: 0; border-radius: 9999px; background: var(--zb-card); color: var(--zb-ink); font-family: var(--zb-font); font-size: 14px; font-weight: 500; line-height: 1; cursor: pointer; box-shadow: none; }
body.zb-v2 #content .zb-filter-pill:hover { background: var(--zb-card-2); color: var(--zb-ink); }
body.zb-v2 #content .zb-filter-pill[aria-pressed="true"] { background: var(--zb-btn2); color: var(--zb-on-btn2); }
html.zb-dark body.zb-v2 #content .zb-filter-pill[aria-pressed="true"] { background: var(--zb-accent); color: var(--zb-on-accent); } /* Dark: Navy-Aktiv war auf Navy kaum sichtbar (Torben 17.09.) → Gelb wie „Die App“ */
body.zb-v2 #content .zb-filter-pill:focus-visible { outline: 2px solid var(--zb-focus); outline-offset: 2px; }

/* „Alle Gute-Nacht-Geschichten“: Zähler „N Geschichten auf dieser Seite.“ per CSS-Counter (Artboard), vor dem Raster */
body.zb-v2.zb-t-hub #content .pt-cv-view.cvp-lfres { display: flex; flex-direction: column; counter-reset: zb-tiles; }
body.zb-v2.zb-t-hub #content .pt-cv-view.cvp-lfres .pt-cv-content-item { counter-increment: zb-tiles; }
body.zb-v2.zb-t-hub #content .pt-cv-view.cvp-lfres::after { content: counter(zb-tiles) " Geschichten auf dieser Seite."; order: -1; margin: -8px 0 20px; font-size: 13px; color: var(--zb-meta); }
body.zb-v2.zb-t-hub #content .pt-cv-view.cvp-lfres[data-zb-total]::after { content: attr(data-zb-total) " Geschichten"; font-variant-numeric: tabular-nums; } /* echte Gesamtzahl (inc/hub-count.php + design.js), sonst Zähler der geladenen Kacheln */

/* „Beliebte Charaktere“: Content-Views-Carousel (3 pro Slide, Punkte) → alle Figuren als Raster wie im Artboard;
   .item/.row werden per display:contents aufgelöst (Bootstrap: .item{display:none} → alles sichtbar), Indikatoren aus */
body.zb-v2.zb-t-hub #content .pt-cv-scrollable .pt-cv-carousel-indicators { display: none; }
body.zb-v2.zb-t-hub #content .pt-cv-scrollable .carousel-inner { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 24px 16px; overflow: visible; width: auto; }
body.zb-v2.zb-t-hub #content .pt-cv-scrollable .carousel-inner > .item,
body.zb-v2.zb-t-hub #content .pt-cv-scrollable .carousel-inner > .item > .row { display: contents !important; } /* !i: Bootstrap .item{display:none}/.active{display:block} */
body.zb-v2.zb-t-hub #content .pt-cv-scrollable .carousel-inner > .item > .row::before,
body.zb-v2.zb-t-hub #content .pt-cv-scrollable .carousel-inner > .item > .row::after { content: none; display: none; } /* Bootstrap-Clearfix würde sonst leere Grid-Zellen erzeugen */
body.zb-v2.zb-t-hub #content .pt-cv-scrollable .pt-cv-content-item { float: none; width: auto !important; padding: 0 !important; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; } /* !i: CV-Inline */
body.zb-v2.zb-t-hub #content .pt-cv-scrollable .pt-cv-href-thumbnail { display: block !important; width: 96px; margin: 0 !important; border-radius: 9999px; background: transparent; } /* !i: CV-Inline */
body.zb-v2.zb-t-hub #content .pt-cv-scrollable .pt-cv-thumbnail { width: 96px; height: 96px; aspect-ratio: 1; border-radius: 9999px; object-fit: cover; }
body.zb-v2.zb-t-hub #content .pt-cv-scrollable .pt-cv-carousel-caption { position: static; padding: 0; margin: 0; background: transparent; text-shadow: none; }
body.zb-v2.zb-t-hub #content .pt-cv-scrollable .pt-cv-title a { text-align: center !important; font-size: 14px !important; font-weight: 500 !important; color: var(--zb-body); } /* !i: CV-Inline */
@media (max-width: 760px) {
  body.zb-v2.zb-t-hub #content .pt-cv-scrollable .carousel-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.zb-v2.zb-t-hub #content .pt-cv-scrollable .pt-cv-href-thumbnail, body.zb-v2.zb-t-hub #content .pt-cv-scrollable .pt-cv-thumbnail { width: 128px; height: auto; }
}

/* UAGB-Kurz-Box („Kurze Gute-Nacht-Geschichten unter 5 Minuten“, Block c93ddd66: Bild-Container 19ed810f + Text-Container 1ecbc396)
   als Panel-Karte: Navy-Kreis mit Uhr statt Wecker-Foto, Titel aus dem Artboard als generierter Inhalt, Text daneben */
body.zb-v2.zb-t-hub #content .wp-block-uagb-container.uagb-is-root-container,
body.zb-v2.zb-t-subhub #content .wp-block-uagb-container.uagb-is-root-container { background-color: var(--zb-panel); background-image: none; border-radius: var(--zb-radius); padding: 24px; margin: 24px 0; }
body.zb-v2.zb-t-hub #content .wp-block-uagb-container.uagb-is-root-container .wp-block-uagb-container { background: transparent; padding: 0; margin: 0; width: auto; max-width: none; }
body.zb-v2.zb-t-hub #content .entry-content .alignfull { margin-left: 0; margin-right: 0; width: auto; max-width: none; }
body.zb-v2.zb-t-hub #content .uagb-block-c93ddd66 > .uagb-container-inner-blocks-wrap { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 20px; align-items: start; max-width: none; padding: 0; }
body.zb-v2.zb-t-hub #content .uagb-block-c93ddd66 .wp-block-uagb-image { margin: 0; }
body.zb-v2.zb-t-hub #content .uagb-block-c93ddd66 .wp-block-uagb-image__figure { position: relative; width: 72px; height: 72px; margin: 0; border-radius: 9999px; background: var(--zb-btn2); }
html.zb-dark body.zb-v2.zb-t-hub #content .uagb-block-c93ddd66 .wp-block-uagb-image__figure { background: var(--zb-card-2); } /* Dark (Palette 2b): btn2 = Kartenfarbe → Kreis wäre unsichtbar */
body.zb-v2.zb-t-hub #content .uagb-block-c93ddd66 .wp-block-uagb-image__figure::before { content: ""; position: absolute; inset: 20px; background-color: rgba(255, 255, 255, .85); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") center / contain no-repeat; }
body.zb-v2.zb-t-hub #content .uagb-block-c93ddd66 .wp-block-uagb-image__figure img { display: none; } /* Wecker-Foto (dekorativ) → Icon wie im Artboard */
body.zb-v2.zb-t-hub #content .uagb-block-c93ddd66 .uagb-block-1ecbc396::before { content: "Kurze Gute-Nacht-Geschichten unter 5 Minuten"; display: block; margin: 0 0 8px; font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--zb-ink); text-wrap: pretty; } /* Titel aus dem Artboard – generierter Inhalt, kein DOM */
body.zb-v2.zb-t-hub #content .uagb-block-c93ddd66 .uagb-block-1ecbc396 p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--zb-body); }
/* Mobil: alle vier Dauer-Pillen in einer Zeile (Torben 17.09.) – kompakter statt Umbruch; „Vorlesedauer:“ darüber */
@media (max-width: 480px) {
  body.zb-v2 #content .cvp-live-filter { gap: 8px 0; }
  body.zb-v2 #content .cvp-live-filter .cvp-label { flex: 0 0 100%; }
  body.zb-v2 #content .zb-filter-pills { gap: 6px; flex-wrap: nowrap; width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; } /* sehr schmale Geräte (≤ 340) scrollen seitlich statt umzubrechen */
  body.zb-v2 #content .zb-filter-pills::-webkit-scrollbar { display: none; }
  body.zb-v2 #content .zb-filter-pill { height: 38px; padding: 0 10px; font-size: 14px; white-space: nowrap; flex: 0 0 auto; } /* Torben 17.09.: Schrift nicht kleiner als 14 */
}

/* ===== 43-home.css ===== */
/* ---------------------------------------------------------------------------
   43 Startseite (Page 8650, body.zb-t-home) nach dem Artboard „Zitronenbande Startseite“ (Light/Dark).
   Markup (Live-Stand 2026-09-16): 9 Spectra-Root-Container (alignfull) mit festen Block-IDs – die Flächen werden
   darüber explizit zugewiesen (Artboard-Reihenfolge Hero → weiß → Grund → weiß (Fabeln + Märchen) → Grund (Über uns)
   → weiß (Blog) → Grund (Redewendungen) → weiß (Sprachen) → Hero-Fläche (App)). Container = --zb-container minus Gutter (1120 px wie im Artboard), Sektionen 80 px.
     f5db99f2 Hero (644a59d6 Text · 20e650a2 Bild) · 3135ae0d Geschichten · 7b7bfa19 Charaktere · a46b78c8 Fabeln ·
     af344cb6 Märchen · c93ddd66 Über uns (19ed810f Text · 1ecbc396 Bild) · b0f98294 Blog · 29857c20 Redewendungen ·
     ee67370a Sprachen · .zb-app-cta (inc/home-hero.php, angehängt).
   Spectra-Regeln haben Spezifität (0,3,0)–(0,5,0) → alle Regeln hier mit body.zb-v2.zb-t-home #content gewinnen ohne !important
   (Ausnahmen mit „!i“ kommentiert: CV-Inline-CSS, Inline-Styles im Content).
   --------------------------------------------------------------------------- */
body.zb-v2.zb-t-home { --zb-home-card: var(--zb-card-2); }        /* Über-uns-Karte + Sprachen-Pills: #EEF2F8, Dark #1A3A61 */
html.zb-dark body.zb-v2.zb-t-home { --zb-home-card: var(--zb-card); }

body.zb-v2.zb-t-home #content .entry-header { display: none; } /* Startseite hat keinen sichtbaren Titel (Astra rendert leeren Header) */
body.zb-v2.zb-t-home.ast-plain-container #content .ast-container { padding-top: 0; } /* Hero schließt direkt an den Header an */

/* ----- Root-Container = Sektionen: 80 px Abstand, 1120 px innen, keine Spacer, keine Flex-Lücken ----- */
body.zb-v2.zb-t-home #content .entry-content > .wp-block-uagb-container.uagb-is-root-container { padding: clamp(56px, 7vw, 80px) var(--zb-gutter); background-image: none; }
body.zb-v2.zb-t-home #content .entry-content > .wp-block-uagb-container.uagb-is-root-container > .uagb-container-inner-blocks-wrap { max-width: calc(var(--zb-container) - 2 * var(--zb-gutter)); align-items: flex-start; row-gap: 0; column-gap: 0; } /* 1220 – Artboard 1120, aber alle Seiten gleich breit (Torben) */
body.zb-v2.zb-t-home #content .entry-content > .wp-block-uagb-container.uagb-is-root-container > .uagb-container-inner-blocks-wrap > .wp-block-spacer { display: none; }
/* Flächen je Block (Artboard-Reihenfolge, unabhängig von nth-child) */
body.zb-v2.zb-t-home #content .entry-content > .wp-block-uagb-container.uagb-block-3135ae0d,
body.zb-v2.zb-t-home #content .entry-content > .wp-block-uagb-container.uagb-block-a46b78c8,
body.zb-v2.zb-t-home #content .entry-content > .wp-block-uagb-container.uagb-block-af344cb6,
body.zb-v2.zb-t-home #content .entry-content > .wp-block-uagb-container.uagb-block-b0f98294,
body.zb-v2.zb-t-home #content .entry-content > .wp-block-uagb-container.uagb-block-ee67370a { background-color: var(--zb-surface); }
body.zb-v2.zb-t-home #content .entry-content > .wp-block-uagb-container.uagb-block-7b7bfa19,
body.zb-v2.zb-t-home #content .entry-content > .wp-block-uagb-container.uagb-block-c93ddd66,
body.zb-v2.zb-t-home #content .entry-content > .wp-block-uagb-container.uagb-block-29857c20 { background-color: var(--zb-bg); }
/* Fabeln + Märchen sind im Artboard EINE weiße Sektion mit 80 px Abstand dazwischen */
body.zb-v2.zb-t-home #content .entry-content > .wp-block-uagb-container.uagb-block-a46b78c8 { padding-bottom: 40px; }
body.zb-v2.zb-t-home #content .entry-content > .wp-block-uagb-container.uagb-block-af344cb6 { padding-top: 40px; }

/* ----- Hero: 2 gleich breite Spalten (auto-fit), Text max. 600, Bild 420 mittig, Buttons gelb + navy ----- */
body.zb-v2.zb-t-home #content .entry-content > .wp-block-uagb-container.uagb-block-f5db99f2 { background-color: var(--zb-hero); padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(48px, 5vw, 72px); }
body.zb-v2.zb-t-home #content .entry-content > .wp-block-uagb-container.uagb-block-f5db99f2 > .uagb-container-inner-blocks-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 40px; align-items: center; }
body.zb-v2.zb-t-home #content .wp-block-uagb-container.uagb-block-644a59d6 { display: block; width: 100%; max-width: 600px; padding: 0; margin: 0; }
body.zb-v2.zb-t-home #content .wp-block-uagb-container.uagb-block-20e650a2 { display: block; width: 100%; max-width: 420px; padding: 0; margin: 0; justify-self: center; }
body.zb-v2.zb-t-home #content .wp-block-uagb-container.uagb-block-20e650a2 .wp-block-uagb-image,
body.zb-v2.zb-t-home #content .wp-block-uagb-container.uagb-block-20e650a2 .wp-block-uagb-image__figure { margin: 0; width: 100%; }
body.zb-v2.zb-t-home #content .wp-block-uagb-container.uagb-block-20e650a2 .wp-block-uagb-image__figure img { display: block; width: 100%; max-width: 420px; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--zb-radius-lg); margin: 0 auto; }
body.zb-v2.zb-t-home #content .wp-block-uagb-container.uagb-block-644a59d6 h1 { margin: 0; font-size: clamp(30px, 4vw, 48px); line-height: 1.12; letter-spacing: -.015em; text-align: left; }
body.zb-v2.zb-t-home #content .wp-block-uagb-container.uagb-block-644a59d6 p { margin: 12px 0 0; font-size: 18px; line-height: 1.6; text-align: left; }
body.zb-v2.zb-t-home #content .wp-block-uagb-container.uagb-block-644a59d6 h1 + p { margin-top: 18px; }
body.zb-v2.zb-t-home #content .zb-hero-actions.zb-home-actions { margin: 28px 0 0; gap: 10px; }
body.zb-v2.zb-t-home #content .zb-home-actions .zb-btn { min-height: 48px; padding: 0 22px; font-size: 16px; border-radius: var(--zb-radius); }
body.zb-v2.zb-t-home #content .zb-home-actions .zb-btn.zb-btn--secondary { background: var(--zb-btn2); color: var(--zb-on-btn2); } /* Startseiten-Artboard: navy (Story-Artboard: #406694) */
@media (hover: hover) { body.zb-v2.zb-t-home #content .zb-home-actions .zb-btn.zb-btn--secondary:hover { background: var(--zb-btn2-hover); color: var(--zb-on-btn2); } }
body.zb-v2.zb-t-home #content .zb-home-actions .zb-btn.zb-btn--secondary:active { background: var(--zb-btn2-active); color: var(--zb-on-btn2); }
html.zb-dark body.zb-v2.zb-t-home #content .entry-content > .wp-block-uagb-container.uagb-block-f5db99f2 {
  background-color: var(--zb-surface); background-image: var(--zb-sky); background-position: center bottom; background-size: cover; background-repeat: no-repeat;
}

/* ----- Sektionen: H2 + Intro (max. 640) linksbündig, Raster 28 px darunter, Button 28 px darunter ----- */
body.zb-v2.zb-t-home #content .entry-content .wp-block-uagb-container h2 { margin: 0; text-align: left; }
body.zb-v2.zb-t-home #content .entry-content > .wp-block-uagb-container.uagb-is-root-container > .uagb-container-inner-blocks-wrap > p { max-width: 640px; margin: 14px 0 0; text-align: left; font-size: 18px; line-height: 1.6; text-wrap: pretty; }
body.zb-v2.zb-t-home #content .entry-content .wp-block-uagb-container .pt-cv-wrapper { width: 100%; margin: 28px 0 0; }
body.zb-v2.zb-t-home #content .entry-content .wp-block-uagb-container .pt-cv-wrapper .pt-cv-view { margin: 0; }

/* Kacheln: Geschichten 4/Reihe (minmax 220, quadratisch) · Fabeln/Märchen/Blog 6/Reihe (minmax 160, 2:3) · Redewendungen 6/Reihe (quadratisch) */
body.zb-v2.zb-t-home #content .pt-cv-view.pt-cv-grid .pt-cv-page { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 20px 16px; } /* Artboard minmax 220 bei 1120 = 4/Reihe → bei 1220 Innenbreite 240 */
body.zb-v2.zb-t-home #content .wp-block-uagb-container.uagb-block-a46b78c8 .pt-cv-view.pt-cv-grid .pt-cv-page,
body.zb-v2.zb-t-home #content .wp-block-uagb-container.uagb-block-af344cb6 .pt-cv-view.pt-cv-grid .pt-cv-page,
body.zb-v2.zb-t-home #content .wp-block-uagb-container.uagb-block-b0f98294 .pt-cv-view.pt-cv-grid .pt-cv-page,
body.zb-v2.zb-t-home #content .wp-block-uagb-container.uagb-block-29857c20 .pt-cv-view.pt-cv-grid .pt-cv-page { grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); } /* Artboard minmax 160 = 6/Reihe (Innenbreite 1100) */
@media (max-width: 600px) {
  body.zb-v2.zb-t-home #content .wp-block-uagb-container.uagb-block-3135ae0d .pt-cv-view.pt-cv-grid .pt-cv-page { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; } /* Torben 17.09.: Geschichten mobil im 2er-Raster (Artboard hatte 1/Reihe) */
  body.zb-v2.zb-t-home #content .wp-block-uagb-container.uagb-block-a46b78c8 .pt-cv-view.pt-cv-grid .pt-cv-page,
  body.zb-v2.zb-t-home #content .wp-block-uagb-container.uagb-block-af344cb6 .pt-cv-view.pt-cv-grid .pt-cv-page,
  body.zb-v2.zb-t-home #content .wp-block-uagb-container.uagb-block-b0f98294 .pt-cv-view.pt-cv-grid .pt-cv-page,
  body.zb-v2.zb-t-home #content .wp-block-uagb-container.uagb-block-29857c20 .pt-cv-view.pt-cv-grid .pt-cv-page { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* mobil 2/Reihe wie Artboard (minmax 160 bei 342 px) */
}
body.zb-v2.zb-t-home #content .pt-cv-view.pt-cv-grid .pt-cv-thumbnail { aspect-ratio: 1; object-fit: cover; }
body.zb-v2.zb-t-home #content .wp-block-uagb-container.uagb-block-a46b78c8 .pt-cv-view.pt-cv-grid .pt-cv-thumbnail,
body.zb-v2.zb-t-home #content .wp-block-uagb-container.uagb-block-af344cb6 .pt-cv-view.pt-cv-grid .pt-cv-thumbnail,
body.zb-v2.zb-t-home #content .wp-block-uagb-container.uagb-block-b0f98294 .pt-cv-view.pt-cv-grid .pt-cv-thumbnail { aspect-ratio: 2 / 3; }
body.zb-v2.zb-t-home #content .pt-cv-view.pt-cv-grid .pt-cv-title a { font-weight: 500 !important; color: var(--zb-ink); } /* !i: CV-Inline (600) */

/* Buttons „Alle … anzeigen“ (UAGB-Button-Block): linksbündig, navy, 44 px, Pfeil */
body.zb-v2.zb-t-home #content .wp-block-uagb-buttons { width: 100%; margin: 28px 0 0; }
body.zb-v2.zb-t-home #content .wp-block-uagb-buttons .uagb-buttons__wrap { justify-content: flex-start !important; } /* !i: UAGB-Block-CSS */
body.zb-v2.zb-t-home #content .wp-block-uagb-container .uagb-buttons__wrap .wp-block-button__link,
body.zb-v2.zb-t-home #content .wp-block-uagb-container .uagb-buttons-repeater {
  display: inline-flex !important; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px !important;
  background: var(--zb-btn2) !important; color: var(--zb-on-btn2) !important; border: 0 !important; border-radius: var(--zb-radius-sm) !important;
  font-family: var(--zb-font); font-size: 15px !important; font-weight: 600; line-height: 1; box-shadow: none !important;
} /* !i: UAGB-Block-CSS */
body.zb-v2.zb-t-home #content .wp-block-uagb-container .uagb-buttons-repeater::after { content: "→"; font-size: 15px; }
body.zb-v2.zb-t-home #content .wp-block-uagb-container .uagb-buttons-repeater:hover,
body.zb-v2.zb-t-home #content .wp-block-uagb-container .uagb-buttons-repeater:focus { background: var(--zb-accent) !important; color: var(--zb-on-accent) !important; }

/* ----- Beliebte Charaktere: Desktop zweispaltig (Text 1/3 · Avatare 2/3), Avatare 96 px, Name 14/500 ----- */
body.zb-v2.zb-t-home #content .wp-block-uagb-container.uagb-block-7b7bfa19 > .uagb-container-inner-blocks-wrap > p { max-width: 400px; margin-top: 16px; }
@media (min-width: 761px) {
  body.zb-v2.zb-t-home #content .entry-content > .wp-block-uagb-container.uagb-block-7b7bfa19 > .uagb-container-inner-blocks-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-rows: auto 1fr; column-gap: 40px; row-gap: 0; align-items: start; }
  body.zb-v2.zb-t-home #content .wp-block-uagb-container.uagb-block-7b7bfa19 > .uagb-container-inner-blocks-wrap > h2 { grid-column: 1; grid-row: 1; }
  body.zb-v2.zb-t-home #content .wp-block-uagb-container.uagb-block-7b7bfa19 > .uagb-container-inner-blocks-wrap > p { grid-column: 1; grid-row: 2; }
  body.zb-v2.zb-t-home #content .wp-block-uagb-container.uagb-block-7b7bfa19 > .uagb-container-inner-blocks-wrap > .pt-cv-wrapper { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}
body.zb-v2.zb-t-home #content .wp-block-uagb-container.uagb-block-7b7bfa19 .pt-cv-view.pt-cv-grid .pt-cv-page { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 24px 16px; }
body.zb-v2.zb-t-home #content .wp-block-uagb-container.uagb-block-7b7bfa19 .pt-cv-view .pt-cv-href-thumbnail { width: 96px; margin: 0 auto !important; background: transparent; } /* !i: CV-Inline */
body.zb-v2.zb-t-home #content .wp-block-uagb-container.uagb-block-7b7bfa19 .pt-cv-view .pt-cv-thumbnail { width: 96px; height: 96px; aspect-ratio: 1; border-radius: 9999px; }
body.zb-v2.zb-t-home #content .wp-block-uagb-container.uagb-block-7b7bfa19 .pt-cv-view .pt-cv-title a { text-align: center !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.3 !important; color: var(--zb-body); } /* !i: CV-Inline */

/* ----- Über uns: Karte auf Seitengrund, Bild links (320, Radius 16), Text rechts, „Mehr über uns →“ ----- */
body.zb-v2.zb-t-home #content .entry-content > .wp-block-uagb-container.uagb-block-c93ddd66 > .uagb-container-inner-blocks-wrap {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 32px; align-items: center;
  background: var(--zb-home-card); border-radius: var(--zb-radius-lg); padding: clamp(24px, 4vw, 48px);
}
body.zb-v2.zb-t-home #content .wp-block-uagb-container.uagb-block-19ed810f { display: block; order: 2; width: 100%; max-width: none; padding: 0; margin: 0; }
body.zb-v2.zb-t-home #content .wp-block-uagb-container.uagb-block-1ecbc396 { display: block; order: 1; width: 100%; max-width: none; padding: 0; margin: 0; }
body.zb-v2.zb-t-home #content .wp-block-uagb-container.uagb-block-1ecbc396 .wp-block-uagb-image,
body.zb-v2.zb-t-home #content .wp-block-uagb-container.uagb-block-1ecbc396 .wp-block-uagb-image__figure { margin: 0; width: 100%; }
body.zb-v2.zb-t-home #content .wp-block-uagb-container.uagb-block-1ecbc396 .wp-block-uagb-image__figure img { display: block; width: 100%; max-width: 320px; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--zb-radius); margin: 0 auto; }
body.zb-v2.zb-t-home #content .wp-block-uagb-container.uagb-block-19ed810f h2 { margin: 0; }
body.zb-v2.zb-t-home #content .wp-block-uagb-container.uagb-block-19ed810f p { margin: 12px 0 0; font-size: 18px; line-height: 1.6; text-align: left; text-wrap: pretty; }
body.zb-v2.zb-t-home #content .wp-block-uagb-container.uagb-block-19ed810f h2 + p { margin-top: 14px; }
body.zb-v2.zb-t-home #content .zb-home-more { display: inline-block; margin-top: 20px; font-size: 15px; font-weight: 600; color: var(--zb-link); }
body.zb-v2.zb-t-home #content .zb-home-more:hover { color: var(--zb-link-hover); text-decoration: none; }

/* ----- Sprachen: H2 20 px + Pills (Flagge rund 32 px, „Englisch: host“) ----- */
body.zb-v2.zb-t-home #content .entry-content > .wp-block-uagb-container.uagb-block-ee67370a { padding-top: 56px; padding-bottom: 56px; }
body.zb-v2.zb-t-home #content .entry-content > .wp-block-uagb-container.uagb-block-ee67370a > .uagb-container-inner-blocks-wrap { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; }
body.zb-v2.zb-t-home #content .wp-block-uagb-container.uagb-block-ee67370a > .uagb-container-inner-blocks-wrap > h2 { flex: 0 0 100%; width: 100%; margin: 0 0 8px; font-size: 20px; line-height: 1.3; }
body.zb-v2.zb-t-home #content .wp-block-uagb-container.uagb-block-ee67370a > .uagb-container-inner-blocks-wrap > div:not(.wp-block-spacer) {
  display: inline-flex; align-items: center; padding: 10px 16px 10px 10px; border-radius: 9999px;
  background: var(--zb-home-card); color: var(--zb-ink); font-size: 15px; font-weight: 500; line-height: 1.3;
}
body.zb-v2.zb-t-home #content .wp-block-uagb-container.uagb-block-ee67370a > .uagb-container-inner-blocks-wrap > div > img { flex: none; width: 32px; height: 32px; margin: 0 12px 0 0 !important; border-radius: 9999px; object-fit: cover; } /* !i: Inline-Style margin-right:10px */
body.zb-v2.zb-t-home #content .wp-block-uagb-container.uagb-block-ee67370a > .uagb-container-inner-blocks-wrap > div > a { margin-left: .3em; color: var(--zb-link); font-weight: 500; }
body.zb-v2.zb-t-home #content .wp-block-uagb-container.uagb-block-ee67370a > .uagb-container-inner-blocks-wrap > div > a:hover { color: var(--zb-link-hover); }

/* App-Sektion .zb-app-cta (inc/app-cta.php, hier als Band angehängt) ist generisch in 30-components gestylt. */

/* ----- Korrekturen nach Screenshot-Abgleich 16.09. ----- */
/* Spectra: `body .wp-block-uagb-container > .uagb-container-inner-blocks-wrap > *` erzwingt width:100% → Pills wären seitenbreit */
body.zb-v2.zb-t-home #content .wp-block-uagb-container.uagb-block-ee67370a > .uagb-container-inner-blocks-wrap > div:not(.wp-block-spacer) { width: auto; min-width: 0; flex: 0 0 auto; }
/* UAGB-Buttons: nie volle Breite (Spectra streckt sie mobil), zweizeilige Beschriftung bleibt kompakt */
body.zb-v2.zb-t-home #content .wp-block-uagb-buttons .wp-block-uagb-buttons-child { width: auto !important; max-width: 100%; } /* !i: UAGB-Block-CSS */
body.zb-v2.zb-t-home #content .wp-block-uagb-container .uagb-buttons__wrap .wp-block-button__link,
body.zb-v2.zb-t-home #content .wp-block-uagb-container .uagb-buttons-repeater { width: auto !important; max-width: 100%; padding: 10px 20px !important; line-height: 1.2; text-align: left; } /* !i: UAGB-Block-CSS */

/* ===== 44-search.css ===== */
/* ---------------------------------------------------------------------------
   44 Geschichten-Suche (Page 8183, zb-t-search, Sidebar bleibt – Torben 16.09.) nach dem Suche-Artboard + Suchergebnisse (?s=).
   Artboard: Hero-Fläche über der ganzen Suche (H1 46 · Intro 17/1.55 max 640 · H2 „Nach Vorlesedauer“ +48 · Hinweis 16 +10 ·
   Karten-Grid minmax 200 gap 12 max 760 +20 · Karten weiß r16 22/22/20 mit Titel 22/600, Badge 28 px, Balken 6 px, Beschreibung 14 ·
   H2 „Nach Stichwort“ +56 · Formular weiß-Pille 52 + gelbe „Suchen“-Pille +20 · „Beliebte Suchbegriffe“ 14 meta +14).
   Markup: a.simpel > .wrapper > .container > .text > .text-lang / .text-min; Beschreibung .zb-dur-desc + Formulartexte + App-Karte per inc/search.php.
   Die Artboard-Sektionen „Beliebte …“ und „Charaktere …“ sind die Sidebar-Widgets. Dark: Fläche Surface, Karten Card (Artboard).
   --------------------------------------------------------------------------- */
body.zb-v2.zb-t-search.page #content { background-color: var(--zb-hero); }
html.zb-dark body.zb-v2.zb-t-search.page #content { background-color: var(--zb-surface); }
body.zb-v2.zb-t-search #content .entry-header { margin: 0 0 14px !important; } /* !i: Customizer */
body.zb-v2.zb-t-search #content .entry-header .entry-title { font-size: clamp(30px, 4vw, 46px); }
body.zb-v2.zb-t-search #content .intro-suche p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--zb-body); max-width: 640px; text-wrap: pretty; }
body.zb-v2.zb-t-search #content .entry-content > h2 { margin: 36px 0 0; }
body.zb-v2.zb-t-search #content .entry-content > h2#h-nach-vorlesedauer { margin-top: 48px; }
body.zb-v2.zb-t-search #content .entry-content > h2 + .intro-suche p { margin-top: 10px; font-size: 16px; line-height: 1.6; }
body.zb-v2.zb-t-search #content .header { justify-content: flex-start; margin: 10px 0 0; }
body.zb-v2.zb-t-search #content .header .uhr-icon { display: none; } /* Artboard: kein Uhr-Icon */
body.zb-v2.zb-t-search #content .header .header-text { font-size: 16px; line-height: 1.6; font-weight: 400; color: var(--zb-body); }
body.zb-v2.zb-t-search #content .entry-content .wp-block-spacer { height: 20px !important; max-height: 20px; } /* !i: Inline-Höhe – Artboard 20 px */
/* Dauer-Karten (Spectra-Root-Container mit 3 Kind-Containern) als Grid, max. 760 */
body.zb-v2.zb-t-search #content .entry-content > .wp-block-uagb-container.uagb-is-root-container.alignfull { background: transparent; padding: 0; margin: 0; width: auto; max-width: none; }
body.zb-v2.zb-t-search #content .entry-content > .wp-block-uagb-container.uagb-is-root-container.alignfull > .uagb-container-inner-blocks-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; align-items: stretch; justify-items: stretch; max-width: 760px; margin: 0; } /* Spectra align-items:center → kürzere Karte hing mittig in der Zeile */
body.zb-v2.zb-t-search #content .entry-content .uagb-container-inner-blocks-wrap > .wp-block-uagb-container { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; background: transparent; padding: 0; margin: 0; width: auto; max-width: none; } /* Spectra: align-items:center → kürzere Karte hing mittig in der Zelle */
body.zb-v2.zb-t-search #content .entry-content .uagb-container-inner-blocks-wrap > .wp-block-uagb-container > a.simpel { flex: 1 1 auto; }
body.zb-v2.zb-t-search #content a.simpel { display: block; height: 100%; color: var(--zb-ink); }
body.zb-v2.zb-t-search #content a.simpel .wrapper { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 14px; height: 100%; padding: 22px 22px 20px; border-radius: var(--zb-radius); background-color: var(--zb-surface); transition: background-color .15s ease; }
html.zb-dark body.zb-v2.zb-t-search #content a.simpel .wrapper { background-color: var(--zb-card); }
/* Zustände (Torben 18.09., wie die Buttons): Hover nur mit Maus = Ring in der Kartenfarbe (Kurz Blau, Mittel Navy/Hellgrau, Lang Gelb) +
   2 px anheben + weicher Schatten; Gedrückt = wieder unten, Ring bleibt, Fläche Card-2; Tastaturfokus = gelber Ring statt eckiger
   Astra-Outline; Maus-Fokus ohne Punktlinie; iOS-Tap-Grau aus. Ring-Farbe je Karte als --zb-dur-ring. */
body.zb-v2.zb-t-search #content a.simpel { -webkit-tap-highlight-color: transparent; --zb-dur-ring: var(--zb-btn2); }
body.zb-v2.zb-t-search #content a.simpel[href*="kurz"] { --zb-dur-ring: #406694; }
body.zb-v2.zb-t-search #content a.simpel[href*="lange"] { --zb-dur-ring: var(--zb-accent); }
html.zb-dark body.zb-v2.zb-t-search #content a.simpel { --zb-dur-ring: #D4D4E5; }
html.zb-dark body.zb-v2.zb-t-search #content a.simpel[href*="kurz"] { --zb-dur-ring: #6F9BD1; }
html.zb-dark body.zb-v2.zb-t-search #content a.simpel[href*="lange"] { --zb-dur-ring: var(--zb-accent); }
body.zb-v2.zb-t-search #content a.simpel .wrapper { transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease; }
@media (hover: hover) {
  body.zb-v2.zb-t-search #content a.simpel:hover .wrapper { box-shadow: 0 0 0 2px var(--zb-dur-ring), 0 8px 20px rgba(11, 41, 78, .10); transform: translateY(-2px); }
  html.zb-dark body.zb-v2.zb-t-search #content a.simpel:hover .wrapper { box-shadow: 0 0 0 2px var(--zb-dur-ring), 0 8px 20px rgba(0, 0, 0, .35); }
}
body.zb-v2.zb-t-search #content a.simpel:active .wrapper { background-color: var(--zb-card-2); box-shadow: 0 0 0 2px var(--zb-dur-ring); transform: translateY(0); }
html.zb-dark body.zb-v2.zb-t-search #content a.simpel:active .wrapper { background-color: var(--zb-card-2); }
body.zb-v2.zb-t-search #content a.simpel:focus:not(:focus-visible), body.zb-v2.zb-t-search #content a.simpel:focus-visible { outline: none; }
body.zb-v2.zb-t-search #content a.simpel:focus-visible .wrapper { box-shadow: 0 0 0 2px var(--zb-focus); }
@media (prefers-reduced-motion: reduce) { body.zb-v2.zb-t-search #content a.simpel:hover .wrapper, body.zb-v2.zb-t-search #content a.simpel:active .wrapper { transform: none; } }
body.zb-v2.zb-t-search #content a.simpel .container { order: 1; text-align: left; }
body.zb-v2.zb-t-search #content a.simpel .text { display: flex; justify-content: space-between; align-items: center; gap: 12px; line-height: 1.1; }
body.zb-v2.zb-t-search #content a.simpel .text br { display: none; }
body.zb-v2.zb-t-search #content a.simpel .text-lang { font-family: var(--zb-font); font-size: 22px; font-weight: 600; color: var(--zb-ink); white-space: nowrap; }
body.zb-v2.zb-t-search #content a.simpel .text-min { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 9999px; background: var(--zb-btn2); color: var(--zb-on-btn2); font-size: 13px; font-weight: 600; }
body.zb-v2.zb-t-search #content a.simpel[href*="kurz"] .text-min { background: #406694; color: #fff; }
body.zb-v2.zb-t-search #content a.simpel[href*="lange"] .text-min { background: var(--zb-accent); color: var(--zb-on-accent); }
/* Balken-Indikator (1/3, 2/3, 3/3) als Pseudo-Element, Beschreibung (Hook) darunter */
body.zb-v2.zb-t-search #content a.simpel .wrapper::after { content: ""; order: 2; display: block; height: 6px; border-radius: 9999px; background: linear-gradient(90deg, #406694 0 32%, transparent 32% 34%, var(--zb-card-2) 34% 66%, transparent 66% 68%, var(--zb-card-2) 68% 100%); }
body.zb-v2.zb-t-search #content a.simpel[href*="6-10"] .wrapper::after { background: linear-gradient(90deg, var(--zb-btn2) 0 32%, transparent 32% 34%, var(--zb-btn2) 34% 66%, transparent 66% 68%, var(--zb-card-2) 68% 100%); }
body.zb-v2.zb-t-search #content a.simpel[href*="lange"] .wrapper::after { background: linear-gradient(90deg, var(--zb-accent) 0 32%, transparent 32% 34%, var(--zb-accent) 34% 66%, transparent 66% 68%, var(--zb-accent) 68% 100%); }
/* Dark: Kalt-zu-Warm-Skala (Torben 17.09.: zwei Blautöne auf Navy nicht unterscheidbar) – Kurz Blau · Mittel Hellgrau · Lang Gelb, Badges gleich */
html.zb-dark body.zb-v2.zb-t-search #content a.simpel[href*="kurz"] .wrapper::after { background: linear-gradient(90deg, #6F9BD1 0 32%, transparent 32% 34%, var(--zb-surface) 34% 66%, transparent 66% 68%, var(--zb-surface) 68% 100%); }
html.zb-dark body.zb-v2.zb-t-search #content a.simpel[href*="6-10"] .wrapper::after { background: linear-gradient(90deg, #D4D4E5 0 32%, transparent 32% 34%, #D4D4E5 34% 66%, transparent 66% 68%, var(--zb-surface) 68% 100%); }
html.zb-dark body.zb-v2.zb-t-search #content a.simpel[href*="lange"] .wrapper::after { background: linear-gradient(90deg, var(--zb-accent) 0 32%, transparent 32% 34%, var(--zb-accent) 34% 66%, transparent 66% 68%, var(--zb-accent) 68% 100%); }
html.zb-dark body.zb-v2.zb-t-search #content a.simpel[href*="kurz"] .text-min { background: #6F9BD1; color: #0B294E; }
html.zb-dark body.zb-v2.zb-t-search #content a.simpel[href*="6-10"] .text-min { background: #D4D4E5; color: #0B294E; }
body.zb-v2.zb-t-search #content a.simpel .zb-dur-desc { order: 3; display: block; font-size: 14px; line-height: 1.5; color: var(--zb-body); text-wrap: pretty; }
/* Stichwort-Suche (SearchWP-Formular): weiße Pille + gelbe „Suchen“-Pille */
body.zb-v2.zb-t-search #content .searchwp-search-form { display: block; width: 100%; max-width: 560px; margin-top: 20px; } /* Artboard: Formular 560 breit (SearchWP/Theme begrenzten auf 320) */
body.zb-v2.zb-t-search #content #searchform { display: block; width: 100%; max-width: none; }
body.zb-v2.zb-t-search #content #searchform > div { display: flex; gap: 10px; width: 100%; max-width: none; }
body.zb-v2.zb-t-search #content #searchform input#swpquery { flex: 1 1 0%; width: auto; max-width: none; min-width: 0; height: 52px; margin: 0; padding: 0 18px; border: 0; border-radius: 9999px; background: var(--zb-surface); color: var(--zb-ink); font-family: var(--zb-font); font-size: 16px; box-shadow: none; }
body.zb-v2.zb-t-search #content #searchform input#swpquery::placeholder { color: var(--zb-meta); }
body.zb-v2.zb-t-search #content #searchform input#swpquery:focus { outline: 1.5px solid var(--zb-accent); outline-offset: 0; }
html.zb-dark body.zb-v2.zb-t-search #content #searchform input#swpquery { background: var(--zb-card); }
body.zb-v2.zb-t-search #content #searchform input[type="submit"]#searchsubmit { flex: none; min-height: 52px; padding: 0 22px; border-radius: 9999px; font-size: 16px; }
body.zb-v2.zb-t-search #content .suche-beispiel { margin-top: 14px; font-size: 14px; color: var(--zb-meta); }
body.zb-v2.zb-t-search #content .suche-beispiel a { color: var(--zb-link); text-decoration: none; }
body.zb-v2.zb-t-search #content .suche-beispiel a:hover { text-decoration: var(--zb-link-hover-line); }
body.zb-v2.zb-t-search #content .search-results-wrapper { margin-top: 24px; }
body.zb-v2.zb-t-search #content .search-results-wrapper .suchergebnisse { font-size: 14px; color: var(--zb-meta); }

/* Suchergebnisseite (?s=): Astra-Blog-Loop als Karten */
body.zb-v2.search-results #content .ast-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 16px; margin: 0; }
body.zb-v2.search-results #content .ast-row::before, body.zb-v2.search-results #content .ast-row::after { display: none; }
body.zb-v2.search-results #content .ast-row > article { width: auto; float: none; padding: 0; margin: 0; }
body.zb-v2.search-results #content .ast-article-post .ast-article-inner { background: var(--zb-card-2); border-radius: var(--zb-radius); padding: 20px; height: 100%; }
body.zb-v2.search-results #content .ast-article-post .entry-title { font-size: 18px; margin: 0 0 8px; }
body.zb-v2.search-results #content .ast-article-post .entry-title a { color: var(--zb-ink); }
body.zb-v2.search-results #content .ast-article-post .entry-meta { font-size: 13px; color: var(--zb-meta); }
body.zb-v2.search-results #content .ast-article-post .yoast-breadcrumb { display: none; }
body.zb-v2.search-results #content .ast-article-post .post-thumb img { border-radius: var(--zb-radius); }
body.zb-v2.search-results #content .ast-archive-description, body.zb-v2.search-results #content .page-title { margin-bottom: 24px; }
/* SearchWP-Ergebnisse auf der Suchseite (?swpquery=…): .search-results-wrapper > p.suchergebnisse + div.search-result-item (a > img 1024² + h3)
   – vorher ungestylt mit seitenbreiten Covern (Torben 17.09.). Kacheln wie die Sammelseiten, „Weitere beliebte Geschichten“ darunter. */
body.zb-v2.zb-t-search #content .search-results-wrapper { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 28px 20px; margin-top: 32px; }
body.zb-v2.zb-t-search #content .search-results-wrapper:empty, body.zb-v2.zb-t-search #content .search-results-wrapper:not(:has(.search-result-item)) { display: block; margin-top: 24px; }
body.zb-v2.zb-t-search #content .search-results-wrapper .suchergebnisse { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--zb-meta); }
body.zb-v2.zb-t-search #content .search-result-item a { display: flex; flex-direction: column; gap: 10px; color: var(--zb-ink); text-decoration: none; }
body.zb-v2.zb-t-search #content .search-result-item img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--zb-radius); background: var(--zb-card); }
body.zb-v2.zb-t-search #content .search-result-item .search-result-title { margin: 0 !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.35 !important; color: var(--zb-ink) !important; text-wrap: pretty; } /* !i: Inline-CSS der Suchseite (Astra-Blau #0170b9) */
body.zb-v2.zb-t-search #content .search-result-item a:hover .search-result-title { color: var(--zb-link) !important; }
body.zb-v2.zb-t-search #content .no-search-results-found:not(:empty) { margin-top: 24px; font-size: 15px; color: var(--zb-body); }
body.zb-v2.zb-t-search #content .entry-content > .search-results-pagination + div > div[style] { margin: 48px 0 16px !important; font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--zb-ink); } /* !i: Inline-Style „Weitere beliebte Geschichten:“ */
@media (max-width: 600px) { body.zb-v2.zb-t-search #content .search-results-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; } }
/* Ergebnismodus (Torben 17.09.: „warum erst nochmal Dauer + Suchbox statt direkt die Ergebnisse?“): steht ein Suchbegriff im Feld
   (SearchWP rendert value="…" serverseitig), rückt der Stichwort-Block mit Formular und Treffern nach oben, „Nach Vorlesedauer“ folgt
   darunter. Nur Reihenfolge per Flex-order, HTML/Cache unverändert. */
body.zb-v2.zb-t-search #content .entry-content:has(#swpquery:not([value=""])) { display: flex; flex-direction: column; align-items: stretch; }
body.zb-v2.zb-t-search #content .entry-content:has(#swpquery:not([value=""])) > * { order: 20; }
body.zb-v2.zb-t-search #content .entry-content:has(#swpquery:not([value=""])) > .intro-suche:first-child { order: 0; }
body.zb-v2.zb-t-search #content .entry-content:has(#swpquery:not([value=""])) > h2#h-nach-stichwort { order: 1; margin-top: 36px; }
body.zb-v2.zb-t-search #content .entry-content:has(#swpquery:not([value=""])) > h2#h-nach-stichwort + .intro-suche { order: 2; }
body.zb-v2.zb-t-search #content .entry-content:has(#swpquery:not([value=""])) > .searchwp-search-form { order: 3; }
body.zb-v2.zb-t-search #content .entry-content:has(#swpquery:not([value=""])) > .suche-beispiel { order: 4; }
body.zb-v2.zb-t-search #content .entry-content:has(#swpquery:not([value=""])) > .search-results-wrapper { order: 5; }
body.zb-v2.zb-t-search #content .entry-content:has(#swpquery:not([value=""])) > .no-search-results-found { order: 6; }
body.zb-v2.zb-t-search #content .entry-content:has(#swpquery:not([value=""])) > .search-results-pagination { order: 7; }
body.zb-v2.zb-t-search #content .entry-content:has(#swpquery:not([value=""])) > .search-results-pagination + div { order: 13; } /* „Weitere beliebte Geschichten“ – der Block ist nicht geschlossen (<div/>), die App-Karte hängt darin → nach der Dauer */
body.zb-v2.zb-t-search #content .entry-content:has(#swpquery:not([value=""])) > h2#h-nach-vorlesedauer { order: 10; margin-top: 64px; }
body.zb-v2.zb-t-search #content .entry-content:has(#swpquery:not([value=""])) > .zb-app-cta { order: 30; }
body.zb-v2.zb-t-search #content .entry-content:has(#swpquery:not([value=""])) > .wp-block-spacer { order: 11; }
body.zb-v2.zb-t-search #content .entry-content:has(#swpquery:not([value=""])) > .wp-block-uagb-container.uagb-is-root-container.alignfull { order: 12; }
body.zb-v2.zb-t-search #content .entry-content:has(#swpquery:not([value=""])) > .header { order: 11; }
/* Ergebnismodus: Dauer-Block komplett aus (Torben 17.09.) – Überschrift, Hinweis, Spacer, Karten */
body.zb-v2.zb-t-search #content .entry-content:has(#swpquery:not([value=""])) > h2#h-nach-vorlesedauer,
body.zb-v2.zb-t-search #content .entry-content:has(#swpquery:not([value=""])) > .header,
body.zb-v2.zb-t-search #content .entry-content:has(#swpquery:not([value=""])) > .wp-block-spacer,
body.zb-v2.zb-t-search #content .entry-content:has(#swpquery:not([value=""])) > .wp-block-uagb-container.uagb-is-root-container.alignfull { display: none; }
body.zb-v2.zb-t-search #content .entry-content:has(#swpquery:not([value=""])) > .search-results-pagination + div { margin-top: 24px; }

/* ===== 45-app.css ===== */
/* ---------------------------------------------------------------------------
   45 App-Landingpage (Page 10206, zb-t-app) nach dem Artboard „Zitronenbande App Landing“ (Light/Dark).
   Markup = Custom-HTML-Block .zba mit eigenem Inline-CSS (Outfit/Playfair, Teal-Verlauf, Karten mit Schatten) – Texte bleiben,
   Optik komplett neu: jede Top-Level-Sektion wird ein vollbreites Band (negative Ränder wie Astras .alignfull, Innenabstand so, dass der
   Inhalt an der Container-Kante 1120 steht), Bänder wechseln Hero → weiß (Features) → Grund (Bande) → weiß (Schritte) → Grund (Stimmen)
   → weiß (Vorteile) → Grund (Fragen) → Hero („Laden“). Dark: Hero/Laden Nachthimmel, weiß → Surface, Grund → Bg.
   Sektionen live: .zba-sticky-badges (fixiert vom Block) · .zba-hero · .zba-feat ×3 (+ .zba-divider) · .zba-txt-section (Bande, Avatare
   per inc/app-landing.php) · .zba-steps-bg · .zba-reviews-wrap · .zba-benefits-bg · .zba-faq-wrap · .zba-cta.
   Blockspezifität (0,1,0)–(0,3,0) → Regeln hier gewinnen ohne !important.
   --------------------------------------------------------------------------- */
body.zb-v2.zb-t-app #content .entry-header { display: none; }
body.zb-v2.zb-t-app #content .ast-article-single > .yoast-breadcrumb { display: none; } /* zeigt nur „Startseite“ – Artboard ohne Breadcrumb */
body.zb-v2.zb-t-app.ast-plain-container #content .ast-container { padding-top: 0; }
body.zb-v2.zb-t-app #content .zba {
  --teal: var(--zb-btn2); --teal-deep: #0B294E; --teal-dark: #072040; --night: #021938;
  --gold: var(--zb-accent); --gold-soft: var(--zb-card); --cream: var(--zb-card-2);
  --text: var(--zb-ink); --text-soft: var(--zb-body);
  font-family: var(--zb-font); color: var(--zb-body); line-height: 1.6; overflow: visible;
}
body.zb-v2.zb-t-app #content .zba a { color: var(--zb-link); }
body.zb-v2.zb-t-app #content .zba h1, body.zb-v2.zb-t-app #content .zba h2, body.zb-v2.zb-t-app #content .zba h3 { font-family: var(--zb-font); font-weight: 600; letter-spacing: -.01em; color: var(--zb-ink); text-wrap: pretty; }
body.zb-v2.zb-t-app #content .zba .zba-anim { animation: none; }
/* Bänder: volle Breite, Inhalt an der Container-Kante */
body.zb-v2.zb-t-app #content .zba > .zba-hero, body.zb-v2.zb-t-app #content .zba > .zba-feat, body.zb-v2.zb-t-app #content .zba > .zba-txt-section,
body.zb-v2.zb-t-app #content .zba > .zba-steps-bg, body.zb-v2.zb-t-app #content .zba > .zba-reviews-wrap, body.zb-v2.zb-t-app #content .zba > .zba-benefits-bg,
body.zb-v2.zb-t-app #content .zba > .zba-faq-wrap, body.zb-v2.zb-t-app #content .zba > .zba-cta {
  width: auto; max-width: none; margin: 0 calc(50% - 50vw);
  padding-left: max(var(--zb-gutter), calc(50vw - var(--zb-container) / 2 + var(--zb-gutter)));
  padding-right: max(var(--zb-gutter), calc(50vw - var(--zb-container) / 2 + var(--zb-gutter)));
}
body.zb-v2.zb-t-app #content .zba .zba-steps-inner, body.zb-v2.zb-t-app #content .zba .zba-benefits-inner { max-width: none; }
body.zb-v2.zb-t-app #content .zba .zba-divider { display: none; }
/* Flächen */
body.zb-v2.zb-t-app #content .zba > .zba-feat, body.zb-v2.zb-t-app #content .zba > .zba-steps-bg, body.zb-v2.zb-t-app #content .zba > .zba-benefits-bg { background: var(--zb-surface); }
body.zb-v2.zb-t-app #content .zba > .zba-txt-section, body.zb-v2.zb-t-app #content .zba > .zba-reviews-wrap, body.zb-v2.zb-t-app #content .zba > .zba-faq-wrap { background: var(--zb-bg); }
body.zb-v2.zb-t-app #content .zba > .zba-hero, body.zb-v2.zb-t-app #content .zba > .zba-cta { background: var(--zb-hero); }
html.zb-dark body.zb-v2.zb-t-app #content .zba > .zba-hero, html.zb-dark body.zb-v2.zb-t-app #content .zba > .zba-cta {
  background-color: var(--zb-surface); background-image: var(--zb-sky); background-size: cover; background-position: center bottom; background-repeat: no-repeat;
}

/* ----- Hero: Text links unten (Kicker · H1 54 · Text 18 · Badges 48 · Hinweis 13), zwei Handys rechts, angeschnitten ----- */
body.zb-v2.zb-t-app #content .zba .zba-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto; column-gap: 40px; align-items: end; padding-top: 56px; padding-bottom: 0; text-align: left; overflow: hidden; }
body.zb-v2.zb-t-app #content .zba .zba-stars, body.zb-v2.zb-t-app #content .zba .zba-pills, body.zb-v2.zb-t-app #content .zba .zba-phones::before { display: none; }
body.zb-v2.zb-t-app #content .zba .zba-hero h1 { grid-column: 1; grid-row: 2; max-width: 520px; margin: 0; font-size: clamp(34px, 4.6vw, 54px); line-height: 1.12; letter-spacing: -.015em; color: var(--zb-ink); }
body.zb-v2.zb-t-app #content .zba .zba-hero h1 em { font-style: normal; color: inherit; }
body.zb-v2.zb-t-app #content .zba .zba-hero h1::before { content: "Die App der Zitronenbande"; display: block; margin: 0 0 20px; font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: 0; color: var(--zb-meta); } /* Kicker aus dem Artboard – generierter Inhalt */
body.zb-v2.zb-t-app #content .zba .zba-hero-sub { grid-column: 1; grid-row: 3; max-width: 520px; margin: 22px 0 0; font-size: 18px; line-height: 1.55; font-weight: 400; color: var(--zb-body); text-wrap: pretty; }
body.zb-v2.zb-t-app #content .zba .zba-hero .zba-badges { grid-column: 1; grid-row: 4; justify-content: flex-start; gap: 12px; margin: 32px 0 0; padding-bottom: 72px; }
body.zb-v2.zb-t-app #content .zba .zba-badges img { height: 48px; width: auto; }
body.zb-v2.zb-t-app #content .zba .zba-badges img:hover { transform: none; filter: none; }
body.zb-v2.zb-t-app #content .zba .zba-hero .zba-badges::after { content: "Kostenlos laden. Einige Geschichten sind gratis."; flex: 0 0 100%; margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--zb-meta); } /* Hinweis aus dem Artboard – generierter Inhalt */
body.zb-v2.zb-t-app #content .zba .zba-phones { grid-column: 2; grid-row: 1 / span 4; display: flex; justify-content: center; align-items: flex-end; gap: 20px; min-height: 420px; padding: 0; }
body.zb-v2.zb-t-app #content .zba .zba-phone { width: min(240px, 42%); flex: none; animation: none; }
body.zb-v2.zb-t-app #content .zba .zba-phone:first-child { transform: translateY(40px); }
body.zb-v2.zb-t-app #content .zba .zba-phone img { border-radius: 28px 28px 0 0; box-shadow: none; }
@media (max-width: 760px) {
  body.zb-v2.zb-t-app #content .zba .zba-hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding-top: 32px; }
  body.zb-v2.zb-t-app #content .zba .zba-hero h1 { grid-row: auto; font-size: clamp(30px, 8vw, 40px); }
  body.zb-v2.zb-t-app #content .zba .zba-hero-sub { grid-row: auto; }
  body.zb-v2.zb-t-app #content .zba .zba-hero .zba-badges { grid-row: auto; padding-bottom: 40px; }
  body.zb-v2.zb-t-app #content .zba .zba-phones { grid-column: 1; grid-row: auto; min-height: 0; gap: 14px; }
  body.zb-v2.zb-t-app #content .zba .zba-phone { width: min(170px, 44%); }
  body.zb-v2.zb-t-app #content .zba .zba-phone:first-child { transform: translateY(28px); }
  body.zb-v2.zb-t-app #content .zba .zba-phone img { border-radius: 20px 20px 0 0; }
}

/* ----- Features (3 Zeilen, abwechselnd): Text max. 460 + Handy 220 ----- */
body.zb-v2.zb-t-app #content .zba .zba-feat { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 48px; align-items: center; padding-top: 40px; padding-bottom: 40px; }
body.zb-v2.zb-t-app #content .zba .zba-hero + .zba-feat { padding-top: 96px; }
body.zb-v2.zb-t-app #content .zba .zba-feat:has(+ .zba-divider + .zba-txt-section) { padding-bottom: 96px; }
body.zb-v2.zb-t-app #content .zba .zba-feat-txt { max-width: 460px; flex: none; }
body.zb-v2.zb-t-app #content .zba .zba-feat-rev .zba-feat-txt { order: 2; justify-self: end; }
body.zb-v2.zb-t-app #content .zba .zba-feat-rev .zba-feat-visual { order: 1; }
body.zb-v2.zb-t-app #content .zba .zba-feat-txt h2 { margin: 0 0 18px; font-size: clamp(26px, 3vw, 36px); line-height: 1.2; }
body.zb-v2.zb-t-app #content .zba .zba-feat-txt p { margin: 0 0 14px; font-size: 18px; line-height: 1.6; font-weight: 400; color: var(--zb-body); text-wrap: pretty; }
body.zb-v2.zb-t-app #content .zba .zba-feat-visual { flex: none; width: auto; margin: 0; display: flex; justify-content: center; }
body.zb-v2.zb-t-app #content .zba .zba-mockup { background: none; padding: 0; border-radius: 0; box-shadow: none; width: min(220px, 60%); }
body.zb-v2.zb-t-app #content .zba .zba-mockup::after { display: none; }
body.zb-v2.zb-t-app #content .zba .zba-mockup img { border-radius: 24px; }
@media (max-width: 760px) {
  body.zb-v2.zb-t-app #content .zba .zba-feat { gap: 32px; padding-top: 32px; padding-bottom: 32px; }
  body.zb-v2.zb-t-app #content .zba .zba-hero + .zba-feat { padding-top: 64px; }
  body.zb-v2.zb-t-app #content .zba .zba-feat:has(+ .zba-divider + .zba-txt-section) { padding-bottom: 64px; }
  body.zb-v2.zb-t-app #content .zba .zba-feat-rev .zba-feat-txt { order: 0; justify-self: start; }
  body.zb-v2.zb-t-app #content .zba .zba-feat-rev .zba-feat-visual { order: 0; }
}

/* ----- Die Bande (.zba-txt-section): Text max. 420 links, Avatare rechts (inc/app-landing.php) ----- */
body.zb-v2.zb-t-app #content .zba .zba-txt-section { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 40px; align-items: start; padding-top: 96px; padding-bottom: 96px; }
body.zb-v2.zb-t-app #content .zba .zba-txt-section h2 { grid-column: 1; margin: 0 0 18px; max-width: 420px; font-size: clamp(26px, 3vw, 36px); line-height: 1.2; }
body.zb-v2.zb-t-app #content .zba .zba-txt-section p { grid-column: 1; max-width: 420px; margin: 0 0 14px; font-size: 18px; line-height: 1.6; font-weight: 400; color: var(--zb-body); text-wrap: pretty; }
body.zb-v2.zb-t-app #content .zba .zba-txt-section p strong { color: var(--zb-ink); font-weight: 600; }
body.zb-v2.zb-t-app #content .zba .zba-cast { grid-column: 2; grid-row: 1 / span 3; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 24px 16px; }
body.zb-v2.zb-t-app #content .zba .zba-cast__item { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; text-align: center; }
body.zb-v2.zb-t-app #content .zba .zba-cast__item img { width: 96px; height: 96px; border-radius: 9999px; object-fit: cover; background: var(--zb-card); }
body.zb-v2.zb-t-app #content .zba .zba-cast__item figcaption { font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--zb-body); }
@media (max-width: 760px) {
  body.zb-v2.zb-t-app #content .zba .zba-txt-section { padding-top: 64px; padding-bottom: 64px; }
  body.zb-v2.zb-t-app #content .zba .zba-cast { grid-column: 1; grid-row: auto; }
}

/* ----- So funktioniert’s (.zba-steps-bg): H2 links, 4 Karten auf Card-2, Nummer als Navy-Kreis ----- */
body.zb-v2.zb-t-app #content .zba .zba-steps-bg { padding-top: 96px; padding-bottom: 96px; }
body.zb-v2.zb-t-app #content .zba .zba-steps-bg::before { display: none; }
body.zb-v2.zb-t-app #content .zba .zba-steps-inner > h2 { margin: 0 0 32px; text-align: left; font-size: clamp(26px, 3vw, 36px); line-height: 1.2; }
body.zb-v2.zb-t-app #content .zba .zba-steps-grid { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 16px; margin: 0 0 28px; }
body.zb-v2.zb-t-app #content .zba .zba-step-card { background: var(--zb-card-2); border: 0; box-shadow: none; border-radius: var(--zb-radius); padding: 24px 20px 22px; text-align: left; }
body.zb-v2.zb-t-app #content .zba .zba-step-card:hover { transform: none; box-shadow: none; }
body.zb-v2.zb-t-app #content .zba .zba-step-nr { width: 36px; height: 36px; border-radius: 9999px; background: var(--zb-btn2); color: var(--zb-on-btn2); font-size: 15px; font-weight: 600; box-shadow: none; margin: 0 0 14px; }
body.zb-v2.zb-t-app #content .zba .zba-step-card strong { color: var(--zb-ink); font-size: 17px; font-weight: 600; margin: 0 0 6px; }
body.zb-v2.zb-t-app #content .zba .zba-step-card span { color: var(--zb-body); font-size: 15px; line-height: 1.5; font-weight: 400; }
body.zb-v2.zb-t-app #content .zba .zba-steps-note { margin: 0; max-width: 640px; text-align: left; font-size: 16px; line-height: 1.6; font-weight: 400; color: var(--zb-body); }

/* ----- Stimmen (.zba-reviews-wrap): H2 als Kicker, erstes Zitat groß, zwei kleine rechts ----- */
body.zb-v2.zb-t-app #content .zba .zba-reviews-wrap { padding-top: 96px; padding-bottom: 96px; }
body.zb-v2.zb-t-app #content .zba .zba-reviews-wrap > h2 { margin: 0 0 28px; text-align: left; font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: 0; color: var(--zb-meta); } /* Artboard: Kicker „Aus den Bewertungen“ */
body.zb-v2.zb-t-app #content .zba .zba-reviews { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 40px 56px; max-width: none; margin: 0; align-items: start; }
body.zb-v2.zb-t-app #content .zba .zba-review-card { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0; }
body.zb-v2.zb-t-app #content .zba .zba-review-card:hover { transform: none; }
body.zb-v2.zb-t-app #content .zba .zba-review-card::before, body.zb-v2.zb-t-app #content .zba .zba-review-stars { display: none; }
body.zb-v2.zb-t-app #content .zba .zba-review-card p { margin: 0 0 10px; font-style: normal; font-weight: 400; font-size: 17px; line-height: 1.6; color: var(--zb-body); text-wrap: pretty; }
body.zb-v2.zb-t-app #content .zba .zba-review-card:first-child p { font-weight: 500; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.35; letter-spacing: -.01em; color: var(--zb-ink); margin-bottom: 16px; }
body.zb-v2.zb-t-app #content .zba .zba-review-card cite { font-size: 13px; font-style: normal; color: var(--zb-meta); }
@media (min-width: 761px) {
  body.zb-v2.zb-t-app #content .zba .zba-reviews { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  body.zb-v2.zb-t-app #content .zba .zba-review-card:first-child { grid-column: 1; grid-row: 1 / span 2; }
  body.zb-v2.zb-t-app #content .zba .zba-review-card:nth-child(2) { grid-column: 2; grid-row: 1; padding-top: 6px; }
  body.zb-v2.zb-t-app #content .zba .zba-review-card:nth-child(3) { grid-column: 2; grid-row: 2; margin-top: -8px; }
}

/* ----- Vorteile (.zba-benefits-bg): H2 links, 3 Spalten Titel 20 + Text 16, ohne Emoji/Karten ----- */
body.zb-v2.zb-t-app #content .zba .zba-benefits-bg { padding-top: 96px; padding-bottom: 96px; overflow: visible; }
body.zb-v2.zb-t-app #content .zba .zba-benefits-bg::before { display: none; }
body.zb-v2.zb-t-app #content .zba .zba-benefits-inner > h2 { margin: 0 0 32px; text-align: left; font-size: clamp(26px, 3vw, 36px); line-height: 1.2; color: var(--zb-ink); }
body.zb-v2.zb-t-app #content .zba .zba-benefits-grid { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 40px 56px; }
body.zb-v2.zb-t-app #content .zba .zba-benefit { display: block; background: none; border: 0; border-radius: 0; padding: 0; color: var(--zb-body); font-size: 16px; line-height: 1.6; font-weight: 400; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.zb-v2.zb-t-app #content .zba .zba-benefit:hover { background: none; border-color: transparent; }
body.zb-v2.zb-t-app #content .zba .zba-benefit-ico { display: none; }
body.zb-v2.zb-t-app #content .zba .zba-benefit strong { display: block; margin: 0 0 10px; font-size: 20px; line-height: 1.3; font-weight: 600; color: var(--zb-ink); }

/* ----- Häufige Fragen (.zba-faq-wrap): H2 links, Liste rechts mit Trennlinien ----- */
body.zb-v2.zb-t-app #content .zba .zba-faq-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 40px 56px; align-items: start; padding-top: 96px; padding-bottom: 96px; }
body.zb-v2.zb-t-app #content .zba .zba-faq-wrap > h2 { margin: 0; font-size: clamp(26px, 3vw, 36px); line-height: 1.2; }
body.zb-v2.zb-t-app #content .zba .zba-faq { border: 0; border-radius: 0; }
body.zb-v2.zb-t-app #content .zba .zba-faq-item { border-top: 1px solid var(--zb-border); border-bottom: 0; padding: 22px 0; }
body.zb-v2.zb-t-app #content .zba .zba-faq-item:last-child { border-bottom: 1px solid var(--zb-border); }
body.zb-v2.zb-t-app #content .zba .zba-faq-item h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.4; color: var(--zb-ink); }
body.zb-v2.zb-t-app #content .zba .zba-faq-item p { margin: 0; font-size: 16px; line-height: 1.6; font-weight: 400; color: var(--zb-body); text-wrap: pretty; }
body.zb-v2.zb-t-app #content .zba .zba-faq-item a { color: var(--zb-link); font-weight: 500; }

/* ----- Laden (.zba-cta): Icon 88, H2 40, Text, Badges mittig auf Hero-Fläche ----- */
body.zb-v2.zb-t-app #content .zba .zba-cta { padding-top: 112px; padding-bottom: 128px; text-align: center; }
body.zb-v2.zb-t-app #content .zba .zba-cta-box { background: none; padding: 0; border-radius: 0; overflow: visible; display: flex; flex-direction: column; align-items: center; }
body.zb-v2.zb-t-app #content .zba .zba-cta-box::before { content: ""; display: block; position: static; width: 88px; height: 88px; border-radius: 22px; background: url("../img/app-icon-144.webp") center / cover no-repeat; margin: 0 0 28px; }
body.zb-v2.zb-t-app #content .zba .zba-cta-box::after { display: none; }
body.zb-v2.zb-t-app #content .zba .zba-cta-box h2 { margin: 0; max-width: 560px; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; letter-spacing: -.015em; color: var(--zb-ink); }
body.zb-v2.zb-t-app #content .zba .zba-cta-box p { margin: 16px auto 0; max-width: 460px; font-size: 17px; line-height: 1.6; font-weight: 400; color: var(--zb-body); text-wrap: pretty; }
body.zb-v2.zb-t-app #content .zba .zba-cta-box .zba-badges { justify-content: center; gap: 12px; margin: 32px 0 0; }
body.zb-v2.zb-t-app #content .zba .zba-cta-box .zba-badges img { height: 48px; }
@media (max-width: 760px) {
  body.zb-v2.zb-t-app #content .zba .zba-steps-bg, body.zb-v2.zb-t-app #content .zba .zba-reviews-wrap, body.zb-v2.zb-t-app #content .zba .zba-benefits-bg, body.zb-v2.zb-t-app #content .zba .zba-faq-wrap { padding-top: 64px; padding-bottom: 64px; }
  body.zb-v2.zb-t-app #content .zba .zba-cta { padding-top: 72px; padding-bottom: 88px; }
}
/* Sticky-Badge-Leiste (Block fixiert sie selbst, erscheint erst nach dem Hero) – nur farblich */
body.zb-v2.zb-t-app #content .zba .zba-sticky-badges { background: #021938; box-shadow: none; }

/* ===== 46-misc.css ===== */
/* ---------------------------------------------------------------------------
   46 Sonstige Seiten: Charakterseiten (zb-t-character, Spectra-Hero), Textseiten (Über uns, Kontakt,
   Impressum, Datenschutz, Fakten), 404, Archive.
   --------------------------------------------------------------------------- */
/* Textseiten: Titel + Lesespalte */
body.zb-v2.zb-t-misc #content .entry-header { margin-bottom: 20px !important; } /* !i: Customizer */
body.zb-v2.zb-t-misc #content .entry-content > p,
body.zb-v2.zb-t-misc #content .entry-content > ul,
body.zb-v2.zb-t-misc #content .entry-content > ol { max-width: 760px; text-wrap: pretty; }
body.zb-v2.zb-t-misc #content .entry-content > h2 { margin-top: 40px; margin-bottom: 12px; }
body.zb-v2.zb-t-misc #content .entry-content > h3 { margin-top: 28px; margin-bottom: 8px; }
body.zb-v2.zb-t-misc #content .entry-content figure.alignright img { border-radius: var(--zb-radius); }
/* Kontaktformular (CF7) */
body.zb-v2 #content .wpcf7 form { max-width: 640px; display: flex; flex-direction: column; gap: 14px; }
body.zb-v2 #content .wpcf7 form > p { margin: 0; }
body.zb-v2 #content .wpcf7 form label { display: block; font-size: 14px; color: var(--zb-body); }
body.zb-v2 #content .wpcf7 .wpcf7-submit { align-self: flex-start; }
body.zb-v2 #content .wpcf7 .wpcf7-response-output { border: 0; border-radius: var(--zb-radius-sm); background: var(--zb-card-2); color: var(--zb-ink); padding: 12px 16px; margin: 0; }

/* Charakterseiten: siehe 48-character.css */

/* 404 */
body.zb-v2.error404 #content .error-404 { max-width: 760px; margin: 0 auto; padding: 24px 0 40px; }
body.zb-v2.error404 #content .error-404 .page-title { font-size: clamp(26px, 3vw, 36px); margin-bottom: 12px; }
body.zb-v2.error404 #content .error-404 .page-content p { color: var(--zb-body); }
body.zb-v2.error404 #content .error-404 .page-content .ast-404-sub-title { font-size: 20px; font-weight: 500; }
body.zb-v2.error404 #content .error-404 .ast-404-layout-1 { padding: 0; }
/* Astra-Suchformular (404, Widgets): Markup = label[input.search-field + button.ast-search-submit(Icon)] + input.search-submit.
   Icon-Button ausblenden, Text-Submit als Pill neben dem Feld. */
body.zb-v2 #content .search-form { display: flex; gap: 10px; max-width: 480px; margin: 0 auto; position: relative; }
body.zb-v2 #content .search-form label { flex: 1; min-width: 0; margin: 0; position: static; display: block; }
body.zb-v2 #content .search-form .search-field { width: 100%; height: 52px; border-radius: 9999px; padding: 0 20px; }
body.zb-v2 #content .search-form button.ast-search-submit { display: none !important; } /* !i: generischer #content-button-Selektor (:not()-Ketten) ist spezifischer */
body.zb-v2 #content .search-form input.search-submit { display: inline-flex !important; flex: none; height: 52px; min-height: 52px; padding: 0 22px !important; border-radius: 9999px; position: static !important; transform: none; width: auto !important; min-width: 110px; } /* !i: Astra 404-Formular */

/* Archive (Kategorie-/Tag-Listen, falls erreichbar): Karten wie Suchergebnisse */
body.zb-v2.archive #content .ast-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 16px; margin: 0; }
body.zb-v2.archive #content .ast-row::before, body.zb-v2.archive #content .ast-row::after { display: none; }
body.zb-v2.archive #content .ast-row > article { width: auto; float: none; padding: 0; margin: 0; }
body.zb-v2.archive #content .ast-article-post .ast-article-inner { background: var(--zb-card-2); border-radius: var(--zb-radius); padding: 20px; height: 100%; }
body.zb-v2.archive #content .ast-article-post .entry-title { font-size: 18px; }
body.zb-v2.archive #content .ast-article-post .yoast-breadcrumb { display: none; }
body.zb-v2.archive #content .ast-archive-description { margin-bottom: 24px; }
body.zb-v2 #content .ast-pagination .page-numbers { border-radius: 9999px; background: var(--zb-card); color: var(--zb-ink); border: 0; }
body.zb-v2 #content .ast-pagination .page-numbers.current { background: var(--zb-btn2); color: var(--zb-on-btn2); }

/* ----- Über uns (Page 961) und Kontakt (Page 429) nach den Artboards „Ueber uns“ / „Kontakt“ (16.09., Ordner „… erweitert“).
   Sidebar bleibt (Torben) → Inhaltsspalte 884; Hero-Band (Breadcrumb · H1 · Intro [· Bild]) malt design.js (BANDS page-id-961/429),
   darunter weiße Fläche. Live-Markup Über uns: p×3 · H2 · p×2 · H2 · p · figure(team) · H3 · p · H3 · p · p · H2 · p · figure(buch) · p×2 · H2 · p×2 ·
   H2 · p×4. Kontakt: div.wp-block-image>figure.alignright(95 px!) · p · p(leer) · .wpcf7(form: p>label … · p Hinweis · p submit). ----- */
body.zb-v2.page-id-961 #content, body.zb-v2.page-id-429 #content { background-color: var(--zb-surface); }
body.zb-v2.page-id-961 #content .ast-article-single > .yoast-breadcrumb, body.zb-v2.page-id-429 #content .ast-article-single > .yoast-breadcrumb { margin: 24px 0 20px; }
body.zb-v2.page-id-961 #content .entry-header, body.zb-v2.page-id-429 #content .entry-header { margin-bottom: 16px !important; } /* !i: Customizer */
body.zb-v2.page-id-961 #content .entry-content > p, body.zb-v2.page-id-429 #content .entry-content > p { max-width: 720px; margin: 0 0 12px; }
body.zb-v2.page-id-961 #content .entry-content > p:empty, body.zb-v2.page-id-429 #content .entry-content > p:empty { display: none; }
/* Über uns: erste H2 mit Abstand zum Band, H2 56/14 */
body.zb-v2.page-id-961 #content .entry-content > h2 { margin: 56px 0 14px; }
body.zb-v2.page-id-961 #content .entry-content > h2:first-of-type { margin-top: 64px; }
/* Teamfoto: linksbündig, Radius */
body.zb-v2.page-id-961 #content .entry-content > figure.aligncenter { margin: 8px 0 24px; text-align: left; }
body.zb-v2.page-id-961 #content .entry-content > figure.aligncenter img { border-radius: var(--zb-radius); max-width: 100%; height: auto; }
/* Autoren-Karten: H3 (Kopf) + folgender Absatz (Text) als eine Karte auf Card-2, Rolle als generierter Inhalt (Artboard) */
body.zb-v2.page-id-961 #content .entry-content > h3#h-christiane-lochmann, body.zb-v2.page-id-961 #content .entry-content > h3#h-torben-lochmann { max-width: 720px; margin: 16px 0 0; padding: 24px 24px 0; border-radius: var(--zb-radius) var(--zb-radius) 0 0; background: var(--zb-card-2); font-size: 20px; line-height: 1.2; }
body.zb-v2.page-id-961 #content .entry-content > h3#h-christiane-lochmann::after, body.zb-v2.page-id-961 #content .entry-content > h3#h-torben-lochmann::after { display: block; margin-top: 4px; font-size: 14px; font-weight: 400; line-height: 1.4; letter-spacing: 0; color: var(--zb-meta); }
body.zb-v2.page-id-961 #content .entry-content > h3#h-christiane-lochmann::after { content: "Autorin & Illustratorin"; }
body.zb-v2.page-id-961 #content .entry-content > h3#h-torben-lochmann::after { content: "Autor, Redaktion & Technik"; }
body.zb-v2.page-id-961 #content .entry-content > h3#h-christiane-lochmann + p, body.zb-v2.page-id-961 #content .entry-content > h3#h-torben-lochmann + p { margin: 0 0 16px; padding: 12px 24px 24px; border-radius: 0 0 var(--zb-radius) var(--zb-radius); background: var(--zb-card-2); font-size: 15px; line-height: 1.6; }
html.zb-dark body.zb-v2.page-id-961 #content .entry-content > h3#h-christiane-lochmann, html.zb-dark body.zb-v2.page-id-961 #content .entry-content > h3#h-torben-lochmann,
html.zb-dark body.zb-v2.page-id-961 #content .entry-content > h3#h-christiane-lochmann + p, html.zb-dark body.zb-v2.page-id-961 #content .entry-content > h3#h-torben-lochmann + p { background: var(--zb-card); }
body.zb-v2.page-id-961 #content .entry-content > h3#h-torben-lochmann + p + p { margin-top: 24px; }
/* Buchbild rechts neben dem Text („Die Zitronenbande heute“) */
body.zb-v2.page-id-961 #content .entry-content > h2#h-die-zitronenbande-heute ~ figure.aligncenter { float: right; width: min(260px, 40%); margin: 0 0 16px 32px; }
body.zb-v2.page-id-961 #content .entry-content > h2#h-die-zitronenbande-heute ~ figure.aligncenter img { width: 100%; }
body.zb-v2.page-id-961 #content .entry-content > h2#h-qualitat-pflege-und-aktualitat { clear: both; }
@media (max-width: 600px) { body.zb-v2.page-id-961 #content .entry-content > h2#h-die-zitronenbande-heute ~ figure.aligncenter { float: none; width: min(260px, 100%); margin: 8px 0 16px; } }
/* „Kontakt und Transparenz“ als Karte (H2 = Kopf, folgende Absätze = Körper) */
body.zb-v2.page-id-961 #content .entry-content > h2#h-kontakt-und-transparenz { max-width: 720px; margin-top: 56px; margin-bottom: 0; padding: 28px 28px 0; border-radius: var(--zb-radius) var(--zb-radius) 0 0; background: var(--zb-card-2); }
body.zb-v2.page-id-961 #content .entry-content > h2#h-kontakt-und-transparenz ~ p { max-width: 720px; margin: 0; padding: 14px 28px 0; background: var(--zb-card-2); }
body.zb-v2.page-id-961 #content .entry-content > h2#h-kontakt-und-transparenz ~ p:last-of-type { padding-bottom: 28px; border-radius: 0 0 var(--zb-radius) var(--zb-radius); }
html.zb-dark body.zb-v2.page-id-961 #content .entry-content > h2#h-kontakt-und-transparenz, html.zb-dark body.zb-v2.page-id-961 #content .entry-content > h2#h-kontakt-und-transparenz ~ p { background: var(--zb-card); }
/* Kontakt: Bild rechts neben dem Intro (live 95-px-Thumbnail des Originals), Formular als Karte */
body.zb-v2.page-id-429 #content .entry-content > .wp-block-image { float: right; width: min(280px, 40%); margin: 0 0 16px 32px; }
body.zb-v2.page-id-429 #content .entry-content > .wp-block-image figure.alignright { float: none; width: 100%; margin: 0; }
body.zb-v2.page-id-429 #content .entry-content > .wp-block-image img { width: 100%; height: auto; border-radius: var(--zb-radius-lg); }
body.zb-v2.page-id-429 #content .entry-content > .wpcf7 { clear: both; max-width: 720px; margin: 56px 0 0; padding: clamp(20px, 3vw, 32px); border-radius: var(--zb-radius); background: var(--zb-card-2); }
html.zb-dark body.zb-v2.page-id-429 #content .entry-content > .wpcf7 { background: var(--zb-card); }
body.zb-v2.page-id-429 #content .wpcf7 form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: none; }
body.zb-v2.page-id-429 #content .wpcf7 form > * { grid-column: 1 / -1; }
body.zb-v2.page-id-429 #content .wpcf7 form > .hidden-fields-container { display: none; }
body.zb-v2.page-id-429 #content .wpcf7 form > p:has(input[name="your-name"]), body.zb-v2.page-id-429 #content .wpcf7 form > p:has(input[name="your-email"]) { grid-column: auto; }
@media (max-width: 600px) { body.zb-v2.page-id-429 #content .wpcf7 form { grid-template-columns: minmax(0, 1fr); } body.zb-v2.page-id-429 #content .wpcf7 form > p:has(input[name="your-name"]), body.zb-v2.page-id-429 #content .wpcf7 form > p:has(input[name="your-email"]) { grid-column: 1 / -1; } }
body.zb-v2.page-id-429 #content .wpcf7 form > p { margin: 0; max-width: none; }
body.zb-v2.page-id-429 #content .wpcf7 form > p > label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; color: var(--zb-ink); }
body.zb-v2.page-id-429 #content .wpcf7 form > p > label > br { display: none; }
body.zb-v2.page-id-429 #content .wpcf7 form .wpcf7-form-control-wrap { display: block; }
body.zb-v2.page-id-429 #content .wpcf7 form .wpcf7-form-control-wrap > label { display: flex; flex-direction: column; gap: 6px; }
body.zb-v2.page-id-429 #content .wpcf7 form .wpcf7-quiz-label { font-weight: 400; color: var(--zb-meta); }
body.zb-v2.page-id-429 #content .wpcf7 input.wpcf7-text, body.zb-v2.page-id-429 #content .wpcf7 input.wpcf7-quiz, body.zb-v2.page-id-429 #content .wpcf7 textarea.wpcf7-textarea { width: 100%; box-sizing: border-box; margin: 0; padding: 0 16px; height: 48px; border: 0; border-radius: var(--zb-radius-sm); background: var(--zb-surface); color: var(--zb-ink); font-family: var(--zb-font); font-size: 16px; box-shadow: none; }
body.zb-v2.page-id-429 #content .wpcf7 input.wpcf7-quiz { max-width: 280px; }
body.zb-v2.page-id-429 #content .wpcf7 textarea.wpcf7-textarea { height: auto; min-height: 160px; padding: 14px 16px; resize: vertical; }
body.zb-v2.page-id-429 #content .wpcf7 input.wpcf7-text:focus, body.zb-v2.page-id-429 #content .wpcf7 input.wpcf7-quiz:focus, body.zb-v2.page-id-429 #content .wpcf7 textarea.wpcf7-textarea:focus { outline: 1.5px solid var(--zb-accent); outline-offset: 0; }
html.zb-dark body.zb-v2.page-id-429 #content .wpcf7 input.wpcf7-text, html.zb-dark body.zb-v2.page-id-429 #content .wpcf7 input.wpcf7-quiz, html.zb-dark body.zb-v2.page-id-429 #content .wpcf7 textarea.wpcf7-textarea { background: var(--zb-surface); }
body.zb-v2.page-id-429 #content .wpcf7 form > p:has(> a[href*="datenschutz"]) { font-size: 13px; line-height: 1.5; color: var(--zb-meta); }
body.zb-v2.page-id-429 #content .wpcf7 form > p:has(> .wpcf7-submit) { margin-top: 4px; }
body.zb-v2.page-id-429 #content .wpcf7 .wpcf7-not-valid-tip { font-size: 13px; color: #B4540A; margin-top: 4px; }
/* Kontakt-Kopf als Grid (statt Float): Intro links, Bild rechts, Formular darunter mit echtem Abstand zum Band; mobil Text → Bild */
body.zb-v2.page-id-429 #content .entry-content { display: grid; grid-template-columns: minmax(0, 1fr) min(280px, 40%); column-gap: 32px; row-gap: 0; align-items: start; }
body.zb-v2.page-id-429 #content .entry-content > * { grid-column: 1 / -1; }
body.zb-v2.page-id-429 #content .entry-content > .wp-block-image { grid-column: 2; grid-row: 1; float: none; width: 100%; margin: 0; }
body.zb-v2.page-id-429 #content .entry-content > p:first-of-type { grid-column: 1; grid-row: 1; margin: 0; }
body.zb-v2.page-id-429 #content .entry-content > .wpcf7 { clear: none; margin-top: 56px; }
@media (max-width: 600px) {
  body.zb-v2.page-id-429 #content .entry-content { grid-template-columns: minmax(0, 1fr); }
  body.zb-v2.page-id-429 #content .entry-content > p:first-of-type { grid-column: 1; grid-row: 1; }
  body.zb-v2.page-id-429 #content .entry-content > .wp-block-image { grid-column: 1; grid-row: 2; width: min(240px, 100%); margin: 16px 0 0; }
}
/* Felder weiß (allgemeine Formularregel in 30 setzt Card-Grund) */
body.zb-v2.page-id-429 #content .wpcf7 form .wpcf7-form-control-wrap input.wpcf7-form-control, body.zb-v2.page-id-429 #content .wpcf7 form .wpcf7-form-control-wrap textarea.wpcf7-form-control { background: var(--zb-surface); border: 0; box-shadow: none; }
html.zb-dark body.zb-v2.page-id-429 #content .wpcf7 form .wpcf7-form-control-wrap input.wpcf7-form-control, html.zb-dark body.zb-v2.page-id-429 #content .wpcf7 form .wpcf7-form-control-wrap textarea.wpcf7-form-control { background: var(--zb-surface); }

/* ===== 47-subhub.css ===== */
/* ---------------------------------------------------------------------------
   47 Sammelseiten (zb-t-subhub: kurz · 6-10 · lang · Fabeln · Märchen · Kindergeschichten · Erwachsene · Weihnachten · Ostern …)
   nach dem Artboard „Kurze Geschichten“ (16.09., Ordner „… erweitert“). Sidebar bleibt (Torben) – die drei „Weiterlesen“-Spalten des
   Artboards sind die Sidebar-Widgets. Aufbau live: Breadcrumb · H1 · Intro-Absatz · [H2] · CV-Raster · „Übersicht“-Absatz (SU-Button)
   · Textteil (H2/p/ul/figure) · Shariff. Hero-Band (Breadcrumb bis „Übersicht“-Absatz) malt design.js auf #content (BANDS zb-t-subhub),
   ohne JS bleibt die Seite weiß. ⚠️ Kein :first-of-type für den Raster-Wrapper – Advanced Ads fügt mobil Anzeigen-divs davor ein (Torben 17.09.), daher :nth-child(1 of .pt-cv-wrapper). Grundregeln (Container 1260, Sidebar-Karten, Kacheln 15/600, Raster minmax 150) kommen aus 30/42.
   --------------------------------------------------------------------------- */
body.zb-v2.zb-t-subhub #content .ast-article-single > .yoast-breadcrumb { margin: 32px 0 20px; } /* Rhythmus wie Story-Hero (56 px bis zur Breadcrumb) */
@media (max-width: 921px) { body.zb-v2.zb-t-subhub #content .ast-article-single > .yoast-breadcrumb { margin-top: 16px; } } /* mobil wie Story-Hero (28 px) */
body.zb-v2.zb-t-subhub #content .entry-header { margin-bottom: 14px !important; } /* !i: Customizer */
body.zb-v2.zb-t-subhub #content .entry-content > p:first-child { max-width: 640px; }
/* H2 direkt vor dem Raster: 20 px, Zähler rechts daneben (CSS-Counter über die Kacheln, ::after des Wrappers mit order -1) */
body.zb-v2.zb-t-subhub #content .entry-content > h2:has(+ .pt-cv-wrapper) { margin: 40px 0 20px; font-size: 20px; line-height: 1.3; letter-spacing: 0; }
body.zb-v2.zb-t-subhub #content .entry-content > .pt-cv-wrapper:nth-child(1 of .pt-cv-wrapper) { display: flex; flex-direction: column; counter-reset: zbtiles; margin: 0; }
body.zb-v2.zb-t-subhub #content .entry-content > .pt-cv-wrapper:nth-child(1 of .pt-cv-wrapper) .pt-cv-content-item { counter-increment: zbtiles; }
body.zb-v2.zb-t-subhub #content .entry-content > .pt-cv-wrapper:nth-child(1 of .pt-cv-wrapper)::after { content: counter(zbtiles) " Geschichten"; order: -1; align-self: flex-end; margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--zb-meta); font-variant-numeric: tabular-nums; }
body.zb-v2.zb-t-subhub #content .entry-content > .pt-cv-wrapper:nth-child(1 of .pt-cv-wrapper):has(.pt-cv-pagination-wrapper)::after { content: counter(zbtiles) " Geschichten auf dieser Seite"; }
body.zb-v2.zb-t-subhub #content .entry-content > h2 + .pt-cv-wrapper:nth-child(1 of .pt-cv-wrapper)::after { margin: -46px 0 26px; } /* auf die H2-Zeile (26 px Zeile + 20 px Abstand) */
body.zb-v2.zb-t-subhub #content .entry-content > p:first-child + .pt-cv-wrapper:nth-child(1 of .pt-cv-wrapper) { margin-top: 32px; }
/* „Übersicht der Sammlung … Alle Geschichten“: Textzeile mit Link statt gelbem SU-Button (Artboard) */
body.zb-v2.zb-t-subhub #content .entry-content > .pt-cv-wrapper:nth-child(1 of .pt-cv-wrapper) + p, body.zb-v2.zb-t-subhub #content .entry-content > .pt-cv-wrapper:nth-child(1 of .pt-cv-wrapper) + style + p { margin: 40px 0 0; text-align: left; max-width: none; } /* CV setzt ein <style> direkt hinter das Raster (Torben 17.09.: Absatz sah „kaputt“ aus) */
body.zb-v2.zb-t-subhub #content .entry-content > p .su-button { display: inline !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: var(--zb-link) !important; font-size: inherit !important; line-height: inherit !important; text-decoration: none !important; } /* !i: SU-Inline */
body.zb-v2.zb-t-subhub #content .entry-content > p .su-button span { display: inline !important; padding: 0 !important; border: 0 !important; line-height: inherit !important; font-size: inherit !important; color: inherit !important; text-shadow: none !important; } /* !i: SU-Inline */
body.zb-v2.zb-t-subhub #content .entry-content > p .su-button:hover { color: var(--zb-link-hover) !important; text-decoration: var(--zb-link-hover-line) !important; }
/* Textteil unter dem Band: 720-Spalte, Bild rechts mit Radius, Listen */
body.zb-v2.zb-t-subhub #content .entry-content > .pt-cv-wrapper:nth-child(1 of .pt-cv-wrapper) + p + p, body.zb-v2.zb-t-subhub #content .entry-content > .pt-cv-wrapper:nth-child(1 of .pt-cv-wrapper) + style + p + p { margin-top: 56px; }
body.zb-v2.zb-t-subhub #content .entry-content > h2:not(:has(+ .pt-cv-wrapper)) { margin: 48px 0 14px; }
body.zb-v2.zb-t-subhub #content .entry-content > ul, body.zb-v2.zb-t-subhub #content .entry-content > ol { max-width: 720px; padding-left: 22px; }
body.zb-v2.zb-t-subhub #content .entry-content > figure.alignright { margin: 6px 0 16px 32px; max-width: 320px; }
body.zb-v2.zb-t-subhub #content .entry-content > figure.alignright img { border-radius: var(--zb-radius); }
@media (max-width: 600px) { body.zb-v2.zb-t-subhub #content .entry-content > figure.alignright { float: none; margin: 0 0 16px; max-width: 100%; } }
/* Kacheln: Titel 15/600 wie Artboard (Grundregel 30), Vorlesedauer-Chip darunter */
body.zb-v2.zb-t-subhub #content .pt-cv-view.pt-cv-grid .pt-cv-page { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 28px 20px; }
@media (max-width: 600px) { body.zb-v2.zb-t-subhub #content .pt-cv-view.pt-cv-grid .pt-cv-page { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; } }
@media (max-width: 600px) {
  body.zb-v2.zb-t-subhub #content .entry-content > h2:has(+ .pt-cv-wrapper) { margin-bottom: 8px; }
  body.zb-v2.zb-t-subhub #content .entry-content > h2 + .pt-cv-wrapper:nth-child(1 of .pt-cv-wrapper)::after { margin: 0 0 14px; align-self: flex-start; } /* Zähler unter der (umbrechenden) H2 */
}
/* „Eine Übersicht der Sammlung findest Du hier: Alle Geschichten“ stärker (Torben 17.09.): Satz 17 px, Link als Navy-Button mit Pfeil
   auf eigener Zeile (Absatz als Flex-Spalte: Textknoten oben, Button darunter). Überschreibt die Textlink-Variante oben. */
body.zb-v2.zb-t-subhub #content .entry-content > .pt-cv-wrapper:nth-child(1 of .pt-cv-wrapper) + p:has(.su-button),
body.zb-v2.zb-t-subhub #content .entry-content > .pt-cv-wrapper:nth-child(1 of .pt-cv-wrapper) + style + p:has(.su-button) { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 40px; font-size: 17px; font-weight: 500; color: var(--zb-ink); }
body.zb-v2.zb-t-subhub #content .entry-content > p .su-button { display: inline-flex !important; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px !important; border-radius: var(--zb-radius) !important; background: var(--zb-accent) !important; color: var(--zb-on-accent) !important; font-size: 16px !important; font-weight: 600; line-height: 1 !important; text-decoration: none; box-shadow: none !important; transition: background-color .15s ease; } /* !i: SU-Inline */
body.zb-v2.zb-t-subhub #content .entry-content > p .su-button::after { content: "→"; font-size: 15px; }
body.zb-v2.zb-t-subhub #content .entry-content > p .su-button:hover, body.zb-v2.zb-t-subhub #content .entry-content > p .su-button:focus-visible { background: var(--zb-accent-hover) !important; color: var(--zb-on-accent) !important; text-decoration: none; } /* Torben 17.09.: Navy war auf dem Dark-Band zu unauffällig → Primär-Gelb wie der Hero-Button */
body.zb-v2.zb-t-subhub #content .entry-content > p .su-button span { padding: 0 !important; line-height: 1 !important; font-size: inherit !important; color: inherit !important; }

/* ===== 48-character.css ===== */
/* ---------------------------------------------------------------------------
   48 Charakterseiten (zb-t-character: Kater Leo, Kommissar Walter, Panda Li-Puh, Erdmännchen Gunnar, Savannen-Freunde, Zebra Susi,
   Schaf Tilda, Möwe Erwin, Brieftaube Betty …) nach dem Artboard „Kater Leo“ (16.09., Ordner „… erweitert“).
   Live: Breadcrumb (vor .entry-content) · Spectra-Root f5db99f2 (Hero: 644a59d6 Text · 20e650a2 Bild) · Root 3135ae0d (H2 + CV-Raster
   mit Teaser-Feld `a-teaser` + „Lesen“-Button + Absätze). Kein Sidebar. App-Band per inc/app-cta.php (zbd_app_cta_append).
   Artboard: Hero-Band (Breadcrumb, Text max 620 + Bild 420 r24) · weiß: H2 32 + Karten minmax 300 gap 16 (Card-2 r16 p16, Bild r12,
   Titel 18/600, Teaser 15, Button navy 40 „Lesen“ mit Buch) · Grund: Text 720 · App-Band.
   --------------------------------------------------------------------------- */
body.zb-v2.zb-t-character #content { background-color: var(--zb-hero); } /* Breadcrumb liegt vor dem Hero-Container – gleiche Fläche; Hero-Band (Breadcrumb bis Hero-Ende) malt design.js (BANDS zb-t-character), im Dark Mode mit Nachthimmel-Ebene (--zb-hero-img, 00-tokens) – vorher lag das Bild nur auf dem Spectra-Container, die Breadcrumb saß auf dem nackten Grund (Torben 18.09.) */
html.zb-dark body.zb-v2.zb-t-character #content { background-color: var(--zb-surface); }
body.zb-v2.zb-t-character #content .entry-header { display: none; }
body.zb-v2.zb-t-character.ast-plain-container #content .ast-container { padding-top: 0; }
body.zb-v2.zb-t-character #content .ast-article-single > .yoast-breadcrumb { margin: 32px 0 20px; } /* Rhythmus wie Story-Hero: 56 px bis zur Breadcrumb, 96 px bis zur H1 */
/* Hero: zwei Spalten, Text max. 620, Bild 420 mittig */
body.zb-v2.zb-t-character #content .entry-content > .wp-block-uagb-container.uagb-block-f5db99f2 { background-color: var(--zb-hero); padding-top: 0; padding-bottom: clamp(40px, 5vw, 64px); }
body.zb-v2.zb-t-character #content .entry-content > .wp-block-uagb-container.uagb-block-f5db99f2 > .uagb-container-inner-blocks-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 40px; align-items: center; }
body.zb-v2.zb-t-character #content .wp-block-uagb-container.uagb-block-644a59d6 { display: block; width: 100%; max-width: 620px; padding: 0; margin: 0; }
body.zb-v2.zb-t-character #content .wp-block-uagb-container.uagb-block-20e650a2 { display: block; width: 100%; max-width: 420px; padding: 0; margin: 0; justify-self: center; }
body.zb-v2.zb-t-character #content .wp-block-uagb-container.uagb-block-20e650a2 .wp-block-uagb-image, body.zb-v2.zb-t-character #content .wp-block-uagb-container.uagb-block-20e650a2 .wp-block-uagb-image__figure { margin: 0; width: 100%; }
body.zb-v2.zb-t-character #content .wp-block-uagb-container.uagb-block-20e650a2 .wp-block-uagb-image__figure img { display: block; width: 100%; max-width: 420px; height: auto; border-radius: var(--zb-radius-lg); margin: 0 auto; }
body.zb-v2.zb-t-character #content .wp-block-uagb-container.uagb-block-644a59d6 h1 { margin: 0; font-size: clamp(30px, 4vw, 46px); line-height: 1.12; letter-spacing: -.015em; text-align: left; }
body.zb-v2.zb-t-character #content .wp-block-uagb-container.uagb-block-644a59d6 p { margin: 16px 0 0; font-size: 18px; line-height: 1.6; text-align: left; text-wrap: pretty; }
html.zb-dark body.zb-v2.zb-t-character #content .entry-content > .wp-block-uagb-container.uagb-block-f5db99f2 { background-color: var(--zb-surface); background-image: var(--zb-sky); background-position: center bottom; background-size: cover; background-repeat: no-repeat; } /* Fallback ohne JS */
html.zb-dark.zb-js body.zb-v2.zb-t-character #content .entry-content > .wp-block-uagb-container.uagb-block-f5db99f2 { background-color: transparent; background-image: none; } /* mit JS liegt der Nachthimmel als Band auf #content (inkl. Breadcrumb) – Container durchsichtig, sonst deckt seine Grundfarbe das Band ab */
@media (max-width: 921px) { body.zb-v2.zb-t-character #content .ast-article-single > .yoast-breadcrumb { margin-top: 16px; } } /* mobil wie Story-Hero: 12 px #primary + 16 = 28 px */
/* Geschichten-Sektion: weiß, H2 32, Karten, danach Textspalte 720 */
body.zb-v2.zb-t-character #content .entry-content > .wp-block-uagb-container.uagb-is-root-container:not(.uagb-block-f5db99f2) { background-color: var(--zb-surface); padding-top: clamp(56px, 7vw, 80px); padding-bottom: clamp(56px, 7vw, 80px); }
body.zb-v2.zb-t-character #content .entry-content > .wp-block-uagb-container.uagb-is-root-container > .uagb-container-inner-blocks-wrap { align-items: flex-start; row-gap: 0; column-gap: 0; }
body.zb-v2.zb-t-character #content .entry-content > .wp-block-uagb-container.uagb-is-root-container > .uagb-container-inner-blocks-wrap > .wp-block-spacer { display: none; }
body.zb-v2.zb-t-character #content .entry-content .wp-block-uagb-container h2 { margin: 0; text-align: left; }
body.zb-v2.zb-t-character #content .entry-content .wp-block-uagb-container .pt-cv-wrapper { width: 100%; margin: 28px 0 0; }
body.zb-v2.zb-t-character #content .entry-content .wp-block-uagb-container .pt-cv-wrapper ~ p { max-width: 720px; margin: 14px 0 0; font-size: 18px; line-height: 1.6; text-align: left; text-wrap: pretty; }
body.zb-v2.zb-t-character #content .entry-content .wp-block-uagb-container .pt-cv-wrapper + p { margin-top: 64px; }
/* Karten */
body.zb-v2.zb-t-character #content .pt-cv-view.pt-cv-grid .pt-cv-page { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; }
body.zb-v2.zb-t-character #content .pt-cv-view .pt-cv-content-item { height: auto !important; } /* !i: CV same-height Inline */
body.zb-v2.zb-t-character #content .pt-cv-view .pt-cv-ifield { display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 16px !important; border-radius: var(--zb-radius); background-color: var(--zb-card-2) !important; } /* !i: Grundregel 30 (transparent/0) */
html.zb-dark body.zb-v2.zb-t-character #content .pt-cv-view .pt-cv-ifield { background-color: var(--zb-card) !important; }
body.zb-v2.zb-t-character #content .pt-cv-view .pt-cv-href-thumbnail { border-radius: 12px; }
body.zb-v2.zb-t-character #content .pt-cv-view .pt-cv-thumbnail { border-radius: 12px; aspect-ratio: 1; object-fit: cover; }
body.zb-v2.zb-t-character #content .pt-cv-view h4.pt-cv-title, body.zb-v2.zb-t-character #content .pt-cv-view .pt-cv-title { margin: 0 !important; }
body.zb-v2.zb-t-character #content .pt-cv-view .pt-cv-title a { font-size: 18px !important; font-weight: 600 !important; line-height: 1.3 !important; color: var(--zb-ink); } /* !i: CV-Inline + Grundregel */
body.zb-v2.zb-t-character #content .pt-cv-view .pt-cv-ctf-list { margin: 0; gap: 0; flex: 1 1 auto; align-items: flex-start; }
body.zb-v2.zb-t-character #content .pt-cv-view .pt-cv-ctf-a-teaser .pt-cv-ctf-value { font-size: 15px; line-height: 1.55; color: var(--zb-body); text-wrap: pretty; }
body.zb-v2.zb-t-character #content .pt-cv-view .pt-cv-content { margin: 0; padding: 0; font-size: inherit; }
body.zb-v2.zb-t-character #content .pt-cv-view .pt-cv-rmwrap { margin: 0; text-align: left; }
body.zb-v2.zb-t-character #content .pt-cv-view .pt-cv-rmwrap .pt-cv-readmore {
  display: inline-flex !important; align-items: center; gap: 8px; min-height: 40px; padding: 0 18px !important; margin: 0; border: 0 !important; border-radius: var(--zb-radius-sm) !important;
  background: var(--zb-btn2) !important; background-color: var(--zb-btn2) !important; color: var(--zb-on-btn2) !important; font-family: var(--zb-font); font-size: 14px !important; font-weight: 600; line-height: 1 !important; box-shadow: none !important; text-decoration: none !important;
} /* !i: CV-Inline (#00aeef) + Bootstrap .btn-success */
body.zb-v2.zb-t-character #content .pt-cv-view .pt-cv-rmwrap .pt-cv-readmore::before { content: ""; flex: none; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E") center / contain no-repeat; }
body.zb-v2.zb-t-character #content .pt-cv-view .pt-cv-rmwrap .pt-cv-readmore:hover { background: var(--zb-accent) !important; background-color: var(--zb-accent) !important; color: var(--zb-on-accent) !important; }
body.zb-v2.zb-t-character #content .pt-cv-view .pt-cv-title, body.zb-v2.zb-t-character #content .pt-cv-view .pt-cv-title a { text-align: left !important; } /* !i: CV-Inline je View (Kommissar Walter zentriert) */

/* ===== 49-feedback.css ===== */
/* ---------------------------------------------------------------------------
   49 Feedback-Modul „Hat dir die Geschichte gefallen?“ (inc/feedback.php, assets/js/feedback.js) – Story-Seiten, direkt
   unter dem Text, vor der Autorenbox. Seit 0.7.0 (Torben 26.09., Handoff Input/design_handoff_feedback_kompakt/): Schritt 1
   ist eine EINZEILIGE Karte (~64 px mobil / 68 px Desktop): Frage links, Daumen rechts – mobil 44-px-Kreise nur mit Icon,
   ab 761 px Pills mit Label. Kein Kicker, keine Punkte, kein Untertitel (vorher 187/194 px). Fläche --zb-panel wie die
   Autorenbox, Buttons --zb-panel-inner, Systemschrift, Radius 16, kein Rahmen/Schatten. Seit 0.7.1 nur noch zwei Schritte:
   nach dem Tipp folgt direkt Danke + Freitext (data-step="4" am Root = weites Padding); das Modul wächst nur nach dem Tipp
   (holdHeight). Hover nur mit Maus, Fokus nur Tastatur, :active-Tokens wie 30-components. Ohne JS ausgeblendet (html.zb-js).
   --------------------------------------------------------------------------- */
html:not(.zb-js) body.zb-v2 #content .zb-feedback { display: none; }
body.zb-v2 #content .zb-feedback { position: relative; margin: 24px 0 0; padding: 10px 10px 10px 16px; border: 0; border-radius: var(--zb-radius); background: var(--zb-panel); font-family: var(--zb-font); color: var(--zb-body); transition: padding .3s ease-in-out; --zb-fb-vote: var(--zb-panel-inner); --zb-fb-vote-hover: var(--zb-card); --zb-fb-on: var(--zb-btn2); --zb-fb-on-ink: var(--zb-on-btn2); --zb-fb-check: var(--zb-btn2); --zb-fb-check-ink: #FFFFFF; }
html.zb-dark body.zb-v2 #content .zb-feedback { --zb-fb-vote-hover: var(--zb-bg); --zb-fb-on: var(--zb-accent); --zb-fb-on-ink: var(--zb-on-accent); --zb-fb-check: var(--zb-accent); --zb-fb-check-ink: var(--zb-on-accent); }
@media (min-width: 761px) { body.zb-v2 #content .zb-feedback { padding: 12px 12px 12px 20px; } }
@media (min-width: 922px) { body.zb-v2 #content .zb-feedback { margin-top: 32px; } }
/* Danke-Schritt: weites Padding (Textfeld) */
body.zb-v2 #content .zb-feedback[data-step="4"] { padding: 16px; }
@media (min-width: 761px) { body.zb-v2 #content .zb-feedback[data-step="4"] { padding: 20px; } }
body.zb-v2 #content .zb-feedback .zb-fb__step { transition: opacity .2s ease; }
body.zb-v2 #content .zb-feedback .zb-fb__step.is-out { opacity: 0; }

/* Schritt 1: Zeile Frage | Daumen (:not([hidden]) – sonst schlägt display:flex das hidden-Attribut beim Schrittwechsel) */
body.zb-v2 #content .zb-feedback .zb-fb__step--row:not([hidden]) { display: flex; align-items: center; gap: 10px; }
body.zb-v2 #content .zb-feedback .zb-fb__q { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--zb-ink); text-wrap: balance; max-width: none; }
body.zb-v2 #content .zb-feedback .zb-fb__step--row .zb-fb__q { flex: 1 1 auto; min-width: 0; }
body.zb-v2 #content .zb-feedback .zb-fb__row { display: flex; flex: none; gap: 6px; margin: 0; }
body.zb-v2 #content .zb-feedback .zb-fb__vote { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 44px; height: 44px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 999px; background: var(--zb-fb-vote); color: var(--zb-ink); font-family: var(--zb-font); font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none; box-shadow: none; cursor: pointer; transition: background-color .15s ease, color .15s ease, opacity .15s ease, transform .1s ease; -webkit-tap-highlight-color: transparent; }
body.zb-v2 #content .zb-feedback .zb-fb__vote svg { width: 22px; height: 22px; flex: none; }
body.zb-v2 #content .zb-feedback .zb-fb__label { display: none; }
@media (min-width: 761px) {
  body.zb-v2 #content .zb-feedback .zb-fb__step--row:not([hidden]) { gap: 16px; }
  body.zb-v2 #content .zb-feedback .zb-fb__q { font-size: 16px; }
  body.zb-v2 #content .zb-feedback .zb-fb__row { gap: 8px; }
  body.zb-v2 #content .zb-feedback .zb-fb__vote { width: auto; padding: 0 18px; }
  body.zb-v2 #content .zb-feedback .zb-fb__vote svg { width: 20px; height: 20px; }
  body.zb-v2 #content .zb-feedback .zb-fb__label { display: inline; }
}
body.zb-v2 #content .zb-feedback .zb-fb__vote:disabled { cursor: default; }
body.zb-v2 #content .zb-feedback .zb-fb__vote:disabled:not([aria-pressed="true"]) { opacity: .5; }
@media (hover: hover) { body.zb-v2 #content .zb-feedback .zb-fb__vote:not(:disabled):hover { background: var(--zb-fb-vote-hover); color: var(--zb-ink); } }
body.zb-v2 #content .zb-feedback .zb-fb__vote:not(:disabled):active { transform: translateY(1px); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .14); background: var(--zb-light-active); color: var(--zb-ink); }
body.zb-v2 #content .zb-feedback .zb-fb__vote[aria-pressed="true"] { background: var(--zb-fb-on); color: var(--zb-fb-on-ink); }
body.zb-v2 #content .zb-feedback .zb-fb__vote:focus:not(:focus-visible) { outline: none; }
body.zb-v2 #content .zb-feedback .zb-fb__vote:focus-visible, body.zb-v2 #content .zb-feedback .zb-fb__ta:focus-visible { outline: 2px solid var(--zb-focus); outline-offset: 2px; }

/* Danke + Freitext (immer offen) */
body.zb-v2 #content .zb-feedback .zb-fb__thanks { display: flex; align-items: flex-start; gap: 14px; }
body.zb-v2 #content .zb-feedback .zb-fb__thanks-body { flex: 1 1 auto; min-width: 0; }
body.zb-v2 #content .zb-feedback .zb-fb__check { width: 28px; height: 28px; margin-top: 2px; border-radius: 50%; background: var(--zb-fb-check); color: var(--zb-fb-check-ink); display: inline-flex; align-items: center; justify-content: center; flex: none; }
body.zb-v2 #content .zb-feedback .zb-fb__check svg { width: 16px; height: 16px; }
body.zb-v2 #content .zb-feedback .zb-fb__tt { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--zb-ink); text-wrap: pretty; max-width: none; }
body.zb-v2 #content .zb-feedback .zb-fb__ts { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--zb-meta); max-width: none; }
body.zb-v2 #content .zb-feedback .zb-fb__sub { margin: 18px 0 0; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--zb-ink); max-width: none; }
body.zb-v2 #content .zb-feedback .zb-fb__sub span { font-weight: 400; color: var(--zb-meta); }
body.zb-v2 #content .zb-feedback .zb-fb__ta { display: block; width: 100%; min-height: 96px; margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--zb-border); border-radius: var(--zb-radius-sm); background: var(--zb-panel-inner); color: var(--zb-ink); font-family: var(--zb-font); font-size: 16px; line-height: 1.5; box-shadow: none; resize: vertical; }
html.zb-dark body.zb-v2 #content .zb-feedback .zb-fb__ta { border-color: var(--zb-btn2-hover); }
body.zb-v2 #content .zb-feedback .zb-fb__ta::placeholder { color: var(--zb-meta); opacity: 1; }
body.zb-v2 #content .zb-feedback .zb-fb__ta-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
body.zb-v2 #content .zb-feedback .zb-fb__count { font-size: 13px; color: var(--zb-meta); font-variant-numeric: tabular-nums; }
body.zb-v2 #content .zb-feedback .zb-fb__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.zb-v2 #content .zb-feedback .zb-fb__hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  body.zb-v2 #content .zb-feedback, body.zb-v2 #content .zb-feedback .zb-fb__step, body.zb-v2 #content .zb-feedback .zb-fb__vote { transition: none; }
  body.zb-v2 #content .zb-feedback .zb-fb__vote:active { transform: none; }
}
/* Teilen-Zeile: „Hat dir die Geschichte gefallen? Teile sie.“ stünde mit dem Modul doppelt → kürzer, nur wenn das Modul da ist */
body.zb-v2.zb-t-story #content .zb-feedback ~ .shariff::before { content: "Teile die Geschichte."; }

/* ===== 50-comments.css ===== */
/* ---------------------------------------------------------------------------
   50 Kommentare (inc/comments.php, assets/js/comments.js) – Variante A „Gästebuch“ (Torben 26./27.09.2026, Mock-Artefakt
   „Kommentare Gästebuch“). Formular ÜBER der Liste (Astra-Option per Filter), einzeilig eingeklappt: Standard unter html.zb-js,
   :focus-within öffnet ohne Skript, comments.js macht .is-open dauerhaft. Liste einspaltig in der 680-px-Lesespalte, keine Kästen,
   Initialen-Kreis (pre_get_avatar, Farbe aus dem Namen, Buchstabe per content:attr()), Name · Datum, feine Trennlinien, Antworten
   (ol.children) an einer Thread-Linie. Markup = Astra astra_theme_comment (unverändert; Anker/Klassen bleiben). Antispam Bee:
   sichtbare Textarea ist textarea:not([aria-hidden="true"]) – das Honeypot nie stylen. Überschriften-Texte bleiben (SEO). Dark nur
   über Sub-Tokens --zb-cmt-*. Initialen-Option per Body-Klasse zb-cmt-av-color|mono|none (Konstante ZBD_COMMENT_AVATARS).
   --------------------------------------------------------------------------- */
body.zb-v2 #content .comments-area {
  --zb-cmt-panel: var(--zb-panel); --zb-cmt-field: var(--zb-panel-inner); --zb-cmt-field-line: var(--zb-border); --zb-cmt-line: var(--zb-border);
  --zb-cmt-av-0-bg: #DCE7F7; --zb-cmt-av-0-ink: #1F4E8C; --zb-cmt-av-1-bg: #FDEBBE; --zb-cmt-av-1-ink: #7A4E00; --zb-cmt-av-2-bg: #D8EEDD; --zb-cmt-av-2-ink: #1F6B3A;
  --zb-cmt-av-3-bg: #F8DDE4; --zb-cmt-av-3-ink: #963049; --zb-cmt-av-4-bg: #E5DFF6; --zb-cmt-av-4-ink: #563A9E; --zb-cmt-av-5-bg: #D3EDF0; --zb-cmt-av-5-ink: #176A74;
  --zb-cmt-av-mono-bg: var(--zb-btn2); --zb-cmt-av-mono-ink: var(--zb-on-btn2); --zb-cmt-av-site-bg: var(--zb-accent); --zb-cmt-av-site-ink: var(--zb-on-accent);
  margin: 40px 0 0; padding: 0; border: 0; font-family: var(--zb-font); color: var(--zb-body); /* border-top 0: Astras Trennlinie über dem Bereich */
}
html.zb-dark body.zb-v2 #content .comments-area {
  --zb-cmt-field-line: var(--zb-btn2-hover);
  --zb-cmt-av-0-bg: #2F5E96; --zb-cmt-av-0-ink: #DCE7F7; --zb-cmt-av-1-bg: #6B4A0E; --zb-cmt-av-1-ink: #FDEBBE; --zb-cmt-av-2-bg: #245C3A; --zb-cmt-av-2-ink: #D8EEDD;
  --zb-cmt-av-3-bg: #7A2F45; --zb-cmt-av-3-ink: #F8DDE4; --zb-cmt-av-4-bg: #4A3A85; --zb-cmt-av-4-ink: #E5DFF6; --zb-cmt-av-5-bg: #1F5F68; --zb-cmt-av-5-ink: #D3EDF0;
  --zb-cmt-av-mono-bg: var(--zb-accent); --zb-cmt-av-mono-ink: var(--zb-on-accent);
}
/* Story: 680-px-Lesespalte wie .entry-content > p (40-story), #comments liegt außerhalb .entry-content; Blog bleibt volle Spalte */
body.zb-v2.zb-t-story #content .comments-area { max-width: 680px; }
@media (min-width: 922px) { body.zb-v2.zb-t-story #content .comments-area { margin: 48px auto 0; } }
body.zb-v2 #content .comments-area:empty { display: none; }

/* ----- Überschriften (Texte unverändert: „Schreibe einen Kommentar“, „N Kommentare zu „…““) ----- */
body.zb-v2 #content .comment-respond .comment-reply-title { margin: 0 0 12px; padding: 0; font-size: 22px; font-weight: 600; line-height: 1.25; color: var(--zb-ink); text-wrap: balance; }
body.zb-v2 #content .comment-respond .comment-reply-title small { font-size: 13px; font-weight: 500; margin-left: 10px; white-space: nowrap; }
body.zb-v2 #content .comment-respond .comment-reply-title small a { color: var(--zb-link); text-decoration: none; font-weight: 600; }
body.zb-v2 #content .comments-area .comments-title { margin: 0 0 4px; padding: 0; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--zb-ink); }

/* ----- Formular-Panel (--zb-panel wie Autorenbox/Feedback, Felder auf --zb-panel-inner) ----- */
body.zb-v2 #content .comment-respond { background: var(--zb-cmt-panel); border: 0; border-radius: var(--zb-radius); padding: 16px; margin: 0 0 32px; } /* border-bottom 0: Astras Regel für comment-form-position-above */
@media (min-width: 761px) { body.zb-v2 #content .comment-respond { padding: 20px; } }
body.zb-v2 #content .comment-respond .comment-form { display: block; margin: 0; }
body.zb-v2 #content .comment-respond .comment-textarea { margin: 0; }
body.zb-v2 #content .comment-respond .comment-form-comment { margin: 0; padding: 0; border: 0; min-width: 0; }
body.zb-v2 #content .comment-respond .comment-form-legend { display: none; } /* leer (Astra) */
body.zb-v2 #content .comment-respond .comment-form-textarea { padding: 0; }
body.zb-v2 #content .comment-respond textarea:not([aria-hidden="true"]),
body.zb-v2 #content .comment-respond input:not([type="submit"]):not([type="hidden"]) {
  display: block; box-sizing: border-box; width: 100%; margin: 0; border: 1px solid var(--zb-cmt-field-line); border-radius: var(--zb-radius-sm);
  background: var(--zb-cmt-field); color: var(--zb-ink); font-family: var(--zb-font); font-size: 16px; line-height: 1.5; box-shadow: none;
}
body.zb-v2 #content .comment-respond textarea:not([aria-hidden="true"]) { height: 148px; min-height: 0; padding: 12px 14px; resize: vertical; transition: height .2s ease; } /* explizite Höhe: rows="8" setzt sonst die Intrinsic-Höhe */
body.zb-v2 #content .comment-respond input:not([type="submit"]):not([type="hidden"]) { height: 48px; padding: 0 14px; }
body.zb-v2 #content .comment-respond ::placeholder { color: var(--zb-meta); opacity: 1; }
body.zb-v2 #content .comment-respond textarea:focus, body.zb-v2 #content .comment-respond input:focus { outline: 1.5px solid var(--zb-focus); outline-offset: 0; border-color: transparent; }
/* Eingeklappt = Standard mit JS-Marker; :focus-within öffnet auch ohne comments.js; .is-open (comments.js / ?replytocom) hält offen */
html.zb-js body.zb-v2 #content .comment-respond:not(.is-open):not(:focus-within) textarea:not([aria-hidden="true"]) { height: 52px; padding: 14px; resize: none; overflow: hidden; cursor: text; }
html.zb-js body.zb-v2 #content .comment-respond:not(.is-open):not(:focus-within) .ast-comment-formwrap,
html.zb-js body.zb-v2 #content .comment-respond:not(.is-open):not(:focus-within) .form-submit,
html.zb-js body.zb-v2 #content .comment-respond:not(.is-open):not(:focus-within) .logged-in-as { display: none; }
/* Felder Name / E-Mail (Wrapper aus inc/comments.php; Astras ast-width-lg-33-Spalten überschrieben) */
body.zb-v2 #content .comment-respond .ast-comment-formwrap { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 10px 0 0; padding: 0; }
@media (min-width: 560px) { body.zb-v2 #content .comment-respond .ast-comment-formwrap { grid-template-columns: 1fr 1fr; } }
body.zb-v2 #content .comment-respond .ast-comment-formwrap p { margin: 0; padding: 0; width: auto; max-width: none; float: none; }
body.zb-v2 #content .comment-respond .logged-in-as { margin: 0 0 10px; font-size: 13px; color: var(--zb-meta); }
body.zb-v2 #content .comment-respond .logged-in-as a { color: var(--zb-link); }
/* Fußzeile: Hinweis links, Button rechts (Button-Zustände aus .zb-btn, 30-components) */
body.zb-v2 #content .comment-respond .form-submit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 12px 0 0; padding: 0; }
body.zb-v2 #content .comment-respond .zb-cmt-hint { font-size: 13px; color: var(--zb-meta); }
body.zb-v2 #content .comment-respond .comment-awaiting-moderation { font-size: 13px; color: var(--zb-meta); }
/* Antwort-Modus: comment-reply.js hängt #respond HINTER article.ast-comment (li > article + #respond + ol.children) */
body.zb-v2 #content .ast-comment-list li.comment > .comment-respond { margin: 14px 0 4px; }
@media (min-width: 761px) { body.zb-v2 #content .ast-comment-list li.comment > .comment-respond { margin-left: 52px; } }
body.zb-v2.zb-cmt-av-none #content .ast-comment-list li.comment > .comment-respond { margin-left: 0; }

/* ----- Liste: einspaltig, Trennlinien statt Kästen ----- */
body.zb-v2 #content .ast-comment-list { display: block; list-style: none; margin: 0; padding: 0; }
body.zb-v2 #content .ast-comment-list > li.comment { border-top: 1px solid var(--zb-cmt-line); border-bottom: 0; padding: 20px 0; margin: 0; }
body.zb-v2 #content .ast-comment-list > li.comment:last-child { border-bottom: 1px solid var(--zb-cmt-line); }
body.zb-v2 #content .ast-comment { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
body.zb-v2 #content .ast-comment .ast-comment-info { display: contents; }
body.zb-v2 #content .ast-comment .ast-comment-avatar-wrap { grid-column: 1; grid-row: 1 / span 2; margin: 0; padding: 0; width: auto; float: none; line-height: 0; }
body.zb-v2 #content .zb-cmt-avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--zb-cmt-av-bg, var(--zb-card)); color: var(--zb-cmt-av-ink, var(--zb-ink)); font-family: var(--zb-font); font-size: 15px; font-weight: 600; line-height: 1; }
body.zb-v2 #content .zb-cmt-avatar::before { content: attr(data-initial); }
body.zb-v2 #content .zb-cmt-avatar--0 { --zb-cmt-av-bg: var(--zb-cmt-av-0-bg); --zb-cmt-av-ink: var(--zb-cmt-av-0-ink); }
body.zb-v2 #content .zb-cmt-avatar--1 { --zb-cmt-av-bg: var(--zb-cmt-av-1-bg); --zb-cmt-av-ink: var(--zb-cmt-av-1-ink); }
body.zb-v2 #content .zb-cmt-avatar--2 { --zb-cmt-av-bg: var(--zb-cmt-av-2-bg); --zb-cmt-av-ink: var(--zb-cmt-av-2-ink); }
body.zb-v2 #content .zb-cmt-avatar--3 { --zb-cmt-av-bg: var(--zb-cmt-av-3-bg); --zb-cmt-av-ink: var(--zb-cmt-av-3-ink); }
body.zb-v2 #content .zb-cmt-avatar--4 { --zb-cmt-av-bg: var(--zb-cmt-av-4-bg); --zb-cmt-av-ink: var(--zb-cmt-av-4-ink); }
body.zb-v2 #content .zb-cmt-avatar--5 { --zb-cmt-av-bg: var(--zb-cmt-av-5-bg); --zb-cmt-av-ink: var(--zb-cmt-av-5-ink); }
body.zb-v2 #content .zb-cmt-avatar--mono { --zb-cmt-av-bg: var(--zb-cmt-av-mono-bg); --zb-cmt-av-ink: var(--zb-cmt-av-mono-ink); }
body.zb-v2 #content .zb-cmt-avatar--site { --zb-cmt-av-bg: var(--zb-cmt-av-site-bg); --zb-cmt-av-ink: var(--zb-cmt-av-site-ink); }
/* Option „keine Initialen“: leerer Avatar-Platz weg, eine Spalte */
body.zb-v2.zb-cmt-av-none #content .ast-comment .ast-comment-avatar-wrap { display: none; }
body.zb-v2.zb-cmt-av-none #content .ast-comment { grid-template-columns: minmax(0, 1fr); }
body.zb-v2.zb-cmt-av-none #content .ast-comment .ast-comment-meta, body.zb-v2.zb-cmt-av-none #content .ast-comment .ast-comment-content { grid-column: 1; }
/* Kopfzeile: Name · Datum (Versalien von Astras .capitalize aus) */
body.zb-v2 #content .ast-comment .ast-comment-meta { grid-column: 2; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: baseline; gap: 2px 8px; margin: 0; padding: 0; font-size: 13px; line-height: 1.4; color: var(--zb-meta); text-transform: none; letter-spacing: 0; }
body.zb-v2 #content .ast-comment .ast-comment-cite-wrap, body.zb-v2 #content .ast-comment .ast-comment-time { margin: 0; padding: 0; width: auto; max-width: none; float: none; }
body.zb-v2 #content .ast-comment cite { font-style: normal; }
body.zb-v2 #content .ast-comment .fn { font-size: 15px; font-weight: 600; color: var(--zb-ink); text-transform: none; }
body.zb-v2 #content .ast-comment .fn a { color: inherit; text-decoration: none; }
body.zb-v2 #content .ast-comment .ast-comment-time .timendate { margin: 0; }
body.zb-v2 #content .ast-comment .ast-comment-time a { color: var(--zb-meta); text-decoration: none; font-weight: 400; }
body.zb-v2 #content .ast-comment .ast-comment-time::before { content: "·"; margin-right: 8px; }
body.zb-v2 #content .ast-comment .ast-cmt-post-author::before { content: "Zitronenbande"; display: inline-flex; align-items: center; height: 20px; padding: 0 8px; margin-left: 4px; border-radius: 9999px; background: var(--zb-accent); color: var(--zb-on-accent); font-size: 11px; font-weight: 600; line-height: 1; vertical-align: middle; } /* Astras Span ist leer */
/* Text + Antworten-Link (Astra: section.ast-comment-content padding-left 70px → 0) */
body.zb-v2 #content .ast-comment .ast-comment-content { grid-column: 2; margin: 0; padding: 0; font-size: 16px; line-height: 1.55; color: var(--zb-body); }
body.zb-v2 #content .ast-comment .ast-comment-content p { margin: 0 0 8px; max-width: none; color: inherit; }
body.zb-v2 #content .ast-comment .ast-comment-content p:last-of-type { margin-bottom: 0; }
body.zb-v2 #content .ast-comment .ast-comment-edit-reply-wrap { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 14px; margin: 8px 0 0; padding: 0; font-size: 13px; }
body.zb-v2 #content .ast-comment .ast-reply-link, body.zb-v2 #content .ast-comment .ast-edit-link { flex: none; margin: 0; padding: 0; } /* Astra: .ast-edit-link flex:1, Zeile justify-content:flex-end, Meta justify-content:right */
body.zb-v2 #content .ast-comment .comment-reply-link { color: var(--zb-link); font-weight: 600; text-decoration: none; }
body.zb-v2 #content .ast-comment .comment-reply-link:hover { color: var(--zb-link-hover); text-decoration: underline; }
body.zb-v2 #content .ast-comment .ast-edit-link a { color: var(--zb-meta); text-decoration: none; }
body.zb-v2 #content .ast-comment .comment-awaiting-moderation { grid-column: 2; margin: 6px 0 0; font-size: 13px; color: var(--zb-meta); font-style: italic; }
body.zb-v2 #content .comments-area .no-comments { margin: 0; font-size: 14px; color: var(--zb-meta); }
body.zb-v2 #content .comments-area .comment-navigation { margin: 16px 0; font-size: 14px; }
/* Antworten an der Thread-Linie (ab der dritten Ebene keine weitere Einrückung – bei 390 px sonst kein Platz) */
body.zb-v2 #content .ast-comment-list .children { list-style: none; margin: 14px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--zb-cmt-line); }
@media (min-width: 761px) { body.zb-v2 #content .ast-comment-list .children { margin-left: 20px; padding-left: 22px; } }
body.zb-v2 #content .ast-comment-list .children li.comment { border-top: 0; border-bottom: 0; padding: 14px 0 0; margin: 0; }
body.zb-v2 #content .ast-comment-list .children li.comment:first-child { padding-top: 0; }
body.zb-v2 #content .ast-comment-list .children .ast-comment { grid-template-columns: 32px minmax(0, 1fr); column-gap: 10px; }
body.zb-v2 #content .ast-comment-list .children .zb-cmt-avatar { width: 32px; height: 32px; font-size: 13px; }
body.zb-v2 #content .ast-comment-list .children .children { margin-left: 0; padding-left: 0; border-left: 0; }
@media (prefers-reduced-motion: reduce) { body.zb-v2 #content .comment-respond textarea { transition: none; } }

/* ===== 52-inline.css ===== */
/* ---------------------------------------------------------------------------
   52 In-Text-Cover-Element (Experiment inline, inc/story-inline.php + assets/js/exp.js) – schmale Karte im Fließtext nach ⅔ der
   Absätze. Torbens Entwürfe 25.09.2026 (export/1c-2.png, 1e.png): c2 = drei gefächerte Hochformat-Cover + Kicker „Nur in der App“
   + „Über N Geschichten – werbefrei“ + Pfeil; e = ein quadratisches Cover 84 px + Titel + „N Min · vorgelesen“ + gelber Play-Kreis.
   Beide liegen im HTML, sichtbar ist nur die zugewiesene (html.zb-exp-inline-<v>, Klasse vor dem ersten Rendern → kein Layout-Sprung);
   Kontrolle x und ohne JS: nichts. Kartenstil folgt dem Modus: Light helle Karte (--zb-card-2), Dark Nachthimmel. Cover als
   Hintergrundbild (exp.js, nahe Viewport). Ganzes Element = ein Link auf /app-store/.
   --------------------------------------------------------------------------- */
html:not(.zb-js) body.zb-v2 #content .zb-inline { display: none; }
body.zb-v2 #content .zb-inline { display: none; margin: 6px 0 26px; --zb-il-bg: var(--zb-card-2); --zb-il-ink: var(--zb-ink); --zb-il-muted: var(--zb-meta); --zb-il-arrow: var(--zb-ink); --zb-il-slot: var(--zb-card); }
html.zb-dark body.zb-v2 #content .zb-inline { --zb-il-bg: #072040; --zb-il-ink: #FFFFFF; --zb-il-muted: #D4D4E5; --zb-il-arrow: var(--zb-accent); --zb-il-slot: #1A3A61; }
html.zb-exp-inline-c2 body.zb-v2 #content .zb-inline--c2, html.zb-exp-inline-e body.zb-v2 #content .zb-inline--e { display: block; }
body.zb-v2 #content .zb-inline .zb-inline__link { display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 12px; border: 0; border-radius: 16px; background: var(--zb-il-bg); color: var(--zb-il-ink); font-family: var(--zb-font); font-weight: 400; text-decoration: none; box-shadow: none; -webkit-tap-highlight-color: transparent; }
html.zb-dark body.zb-v2 #content .zb-inline .zb-inline__link { background: #072040 var(--zb-sky) center bottom / cover no-repeat; }
body.zb-v2 #content .zb-inline .zb-inline__link:focus:not(:focus-visible) { outline: none; }
body.zb-v2 #content .zb-inline .zb-inline__link:focus-visible { outline: 2px solid var(--zb-focus); outline-offset: 2px; }
body.zb-v2 #content .zb-inline .zb-inline__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
body.zb-v2 #content .zb-inline .zb-inline__kicker { display: block; font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; color: var(--zb-il-muted); }
body.zb-v2 #content .zb-inline .zb-inline__title { display: block; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--zb-il-ink); text-wrap: pretty; }
body.zb-v2 #content .zb-inline .zb-inline__meta { display: block; font-size: 13px; line-height: 1.3; color: var(--zb-il-muted); }
/* c2: Fächer aus drei Hochformat-Covern (Entwurf: 40×54 + 2 px Rand, −9° / −1° / +7°) */
body.zb-v2 #content .zb-inline .zb-inline__fan { position: relative; width: 74px; height: 64px; flex: none; }
body.zb-v2 #content .zb-inline .zb-inline__fan-img { position: absolute; width: 44px; height: 58px; box-sizing: border-box; border: 2px solid var(--zb-il-bg); border-radius: 6px; background: var(--zb-il-slot) center / cover no-repeat; }
body.zb-v2 #content .zb-inline .zb-inline__fan-img[data-slot="0"] { left: 0; top: 6px; transform: rotate(-9deg); }
body.zb-v2 #content .zb-inline .zb-inline__fan-img[data-slot="1"] { left: 15px; top: 3px; transform: rotate(-1deg); }
body.zb-v2 #content .zb-inline .zb-inline__fan-img[data-slot="2"] { left: 30px; top: 0; transform: rotate(7deg); }
body.zb-v2 #content .zb-inline .zb-inline__arrow { flex: none; font-size: 22px; font-weight: 600; line-height: 1; color: var(--zb-il-arrow); }
/* e: ein Cover + Titel/Dauer + Play-Kreis */
body.zb-v2 #content .zb-inline--e .zb-inline__link { padding: 12px; gap: 12px; }
body.zb-v2 #content .zb-inline .zb-inline__cover { width: 84px; height: 84px; flex: none; border-radius: 12px; background: var(--zb-il-slot) center / cover no-repeat; }
body.zb-v2 #content .zb-inline--e .zb-inline__title { font-size: 16px; min-height: 2.6em; }
body.zb-v2 #content .zb-inline .zb-inline__play { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 9999px; background: var(--zb-accent); }
body.zb-v2 #content .zb-inline .zb-inline__play::before { content: ""; width: 0; height: 0; margin-left: 3px; border-left: 12px solid #1F1F1F; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
@media (hover: hover) {
  body.zb-v2 #content .zb-inline .zb-inline__link:hover .zb-inline__play { background: var(--zb-accent-hover); }
  body.zb-v2 #content .zb-inline .zb-inline__link:hover .zb-inline__arrow { color: var(--zb-accent-hover); }
}
@media (min-width: 560px) {
  body.zb-v2 #content .zb-inline .zb-inline__title { font-size: 16px; }
  body.zb-v2 #content .zb-inline--e .zb-inline__title { font-size: 17px; }
  body.zb-v2 #content .zb-inline .zb-inline__meta { font-size: 14px; }
}

/* ===== 90-dark.css ===== */
/* ---------------------------------------------------------------------------
   90 Dark – nur, was Tokens nicht abdecken: Nachthimmel-Hero (WebP lädt NUR im Dark Mode),
   Icon-Varianten, Bilder mit weißem Rand.
   --------------------------------------------------------------------------- */
html.zb-dark body.zb-v2.zb-t-story #content .single-layout-1 > header.entry-header {
  background-color: var(--zb-surface);
  background-image: var(--zb-sky); /* Auflösung: Token in 00-tokens */
  background-position: center bottom; background-size: cover; background-repeat: no-repeat;
}
html.zb-dark body.zb-v2 #content .entry-meta .author-avatar img { outline: 2px solid var(--zb-card); }
html.zb-dark body.zb-v2 #content .reading-time img,
html.zb-dark body.zb-v2 #content .uhr-icon { filter: invert(1); opacity: .85; }
html.zb-dark body.zb-v2 #masthead .custom-logo { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .6)); }
html.zb-dark body.zb-v2 #content .cvp-live-filter select, html.zb-dark body.zb-v2 #content .wpcf7 select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239999B7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); }
html.zb-dark body.zb-v2 #content .zbcta .zbcta__cover img { outline: 0; }