/*
Theme Name: digitalpaddynews112025
Author: digitalpaddy
Description: Stabiles Zeitungs-Layout mit Mobile-Swap, Quellen-Box und fixierter Bildbreite (500px).
Version: 1.7.0 (28.09.2026)
Änderung: Neuer Abschnitt "BOOKTRENDS — WOCHENLAGE-INFOBOX" ergänzt (.bt-wl-*-
Klassen für die Wochenlage-Infobox aus template-part-wochenlage-info.php:
Meta-Zeile, Themen-Pills, Themen-Ranking-Tabelle, Befürwortet/Kritisch-Kasten,
Ressourcen-Liste). Reine Ergänzung, nutzt die --bt-*-Tokens aus 1.6.0 weiter.

Vorherige Änderung (1.6.0, 27.09.2026): Abschnitt "BOOKTRENDS — Rubrik-
Komponenten" ergänzt (--bt-*-Design-Tokens + .bt-*-Klassen für Hero,
Kennzahlen-Leiste, Karten/Grid, Diagramm, Meistgelesen/Newsletter,
Pagination). Kein Scope-Remapping wie bei .dw nötig, da category-
booktrends.php/page-booktrends.php eigenes Markup mit eigenen Klassen
verwenden. Fraunces/IBM Plex Sans werden per wp_enqueue_style() in
booktrends.php geladen (nur auf Booktrends-Seiten), nicht per @import hier.
*/

@import url('https://fonts.googleapis.com/css2?family=Vollkorn:ital,wght@0,400;0,700;1,400&display=swap');

/* ── Geomanist (self-hosted, Webfont-Lizenz via Atipo) ──── */
@font-face {
    font-family: 'Geomanist';
    src: url('fonts/geomanist/geomanist-regular-webfont.woff2') format('woff2'),
         url('fonts/geomanist/geomanist-regular-webfont.woff') format('woff'),
         url('fonts/geomanist/geomanist-regular-webfont.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geomanist';
    src: url('fonts/geomanist/geomanist-regular-italic-webfont.woff2') format('woff2'),
         url('fonts/geomanist/geomanist-regular-italic-webfont.woff') format('woff'),
         url('fonts/geomanist/geomanist-regular-italic-webfont.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS — digitalpaddynews112025
   Version 1.5.0 · meiersworld.de × Digitalwerkstatt
   ═══════════════════════════════════════════════════════════════ */

:root {

  /* ── BRAND: meiersworld.de ──────────────────────────────── */

  /* Palette */
  --mw-white:          #FFFFFF;
  --mw-black:          #000000;
  --mw-gray-dark:      #333333;
  --mw-gray-mid:       #666666;
  --mw-gray-bg:        #fafafa;
  --mw-gray-infobox:   #f7f7f5;
  --mw-gray-hover:     #efefec;
  --mw-red:            #CC0000;   /* Status-Rot + Brand-Akzent */
  --mw-red-logo:       #D13030;   /* Aus Logo sampeld — für Logo-nahe Elemente */
  --mw-green:          #008000;
  --mw-green-eng:      #4a7c59;   /* English-Box Akzent */

  /* Semantische Tokens */
  --color-bg:          var(--mw-white);
  --color-text:        var(--mw-black);
  --color-border:      var(--mw-gray-dark);
  --color-link:        var(--mw-gray-mid);
  --color-link-hover:  var(--mw-black);
  --color-meta:        var(--mw-gray-mid);
  --color-nav:         var(--mw-gray-dark);
  --color-accent:      var(--mw-red);
  --color-accent-dark: #AA0000;

  /* Typografie */
  --font-main:         'Vollkorn', serif;
  --font-ui:           Arial, sans-serif;

  /* Typoskala */
  --text-nav:          10px;
  --text-caption:      11px;
  --text-meta:         12px;
  --text-source:       7pt;
  --text-body:         1rem;
  --text-title:        22px;
  --text-infobox:      12px;

  /* Layout */
  --layout-max:        1000px;
  --sidebar-width:     150px;
  --layout-gap:        40px;
  --layout-pad:        20px;
  --single-max:        500px;

  /* Borders */
  --border:            1px solid var(--mw-gray-dark);
  --border-mid:        1px solid var(--mw-gray-mid);
  --border-light:      1px solid #ccc;
  --border-dotted:     1px dotted #ccc;
  --border-double:     1px double var(--mw-gray-dark);
  --border-accent:     3px solid #ccc;
  --border-green:      1px solid var(--mw-green);

  /* Spacing */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  15px;
  --space-lg:  20px;
  --space-xl:  30px;
  --space-2xl: 40px;
  --space-3xl: 50px;

  /* ── BRAND: Digitalwerkstatt ────────────────────────────── */
  --dw-bg:          #FFFFFF;       /* weißer Hintergrund — saubere Basis */
  --dw-navy:        #0E2841;       /* dunkel Navy — Text, Überschriften */
  --dw-navy-mid:    #185786;       /* sekundär dunkel — Borders, Subheads */
  --dw-blue:        #4A90B8;       /* gedämpftes Blau — sparsam als Akzent */
  --dw-blue-light:  #A8C8DE;       /* helles Blau — Hintergründe, Hover */
  --dw-orange:      #E97132;       /* Orange — primärer CTA / Highlight */
  --dw-green:       #196B24;
  --dw-green-light: #4EA72E;
  --dw-purple:      #A02B93;
  --dw-gray-light:  #E8E8E8;
  --dw-gray-mid:    #666666;       /* Fließtext auf Weiß */
  --font-dw:        'Geomanist', Verdana, Geneva, sans-serif;

  /* ── BACKWARD COMPATIBILITY ─────────────────────────────── */
  /* Alte --farbe-* Variablen bleiben funktionsfähig.            */
  /* Bestehende PHP-Templates müssen NICHT geändert werden.      */
  --farbe-hintergrund:  var(--color-bg);
  --farbe-schrift:      var(--color-text);
  --farbe-akzent-dunkel: var(--mw-gray-dark);
  --farbe-akzent-hell:  var(--mw-gray-mid);
  --farbe-status-rot:   var(--mw-red);
  --farbe-status-gruen: var(--mw-green);
  --schriftart-haupt:   var(--font-main);
}

* {
    box-sizing: border-box; /* Verhindert Breiten-Probleme durch Padding */
}

body {
    background-color: var(--farbe-hintergrund);
    color: var(--farbe-schrift);
    font-family: var(--schriftart-haupt);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Zusätzliche Sicherheit gegen horizontales Scrollen */
}

a { color: var(--farbe-akzent-hell); text-decoration: underline; [cite: 4] }
a:hover { color: var(--farbe-schrift); text-decoration: none; [cite: 4] }

/* --- HEADER --- */
.header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
    border-bottom: 1px solid var(--farbe-akzent-dunkel); [cite: 5, 6]
}

.header img, .custom-logo-link img, .site-logo img {
    width: 150px !important;
    max-width: 150px !important;
    height: auto !important;
    display: block;
    border: 1px solid var(--farbe-akzent-dunkel); [cite: 6, 7]
}

.main-navigation { text-align: right; [cite: 7] }
.main-navigation ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 4px; [cite: 8, 9]
}
.main-navigation li a {
    text-transform: uppercase; font-weight: bold; font-size: 10px;
    color: var(--farbe-akzent-dunkel); text-decoration: none !important; [cite: 9, 10]
}

/* --- LAYOUT: ZWEI SPALTEN --- */
.content-wrapper {
    display: flex;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
    gap: 40px; [cite: 10, 11]
}

#secondary, .widget-area {
    flex: 0 0 150px;
    padding: 20px 20px 20px 0;
    text-align: left;
    border-right: 1px solid var(--farbe-akzent-dunkel); [cite: 11, 12]
}

.site-main {
    flex: 1;
    min-width: 0; [cite: 12]
}

.single .site-main {
    max-width: 500px; [cite: 13, 14]
}

/* --- ARTIKEL & CONTENT --- */
.post-article {
    margin-bottom: 30px;
    border-bottom: 1px solid var(--farbe-akzent-dunkel);
    padding-bottom: 20px; [cite: 14, 15]
}

.post-title a, .post-title {
    color: var(--farbe-schrift);
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
    text-decoration: none !important; [cite: 15, 16]
}

img.alignleft {
    float: left;
    margin: 0 20px 20px 0;
    border: 1px solid var(--farbe-akzent-dunkel);
    max-width: 250px;
    height: auto; [cite: 16, 17]
}

.single-post-thumbnail img, 
.single .entry-content img {
    width: 100%;
    max-width: 500px !important;
    height: auto;
    border: 1px solid var(--farbe-akzent-dunkel);
    margin-bottom: 20px;
    display: block; [cite: 18, 19]
}

/* --- METADATEN & LESEZEIT --- */
.entry-meta {
    font-size: 12px;
    color: #666;
    margin-bottom: 15px; [cite: 76]
}

.reading-time {
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-style: italic;
    color: var(--farbe-akzent-hell);
    margin-bottom: 5px;
}

/* --- EMPFEHLUNGEN (RELATED POSTS) --- */
.related-posts {
    margin: 30px 0;
    padding-top: 15px;
    border-top: 1px solid var(--farbe-akzent-dunkel);
}

.related-posts ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 10px 0 0 0;
}

.related-posts li {
    margin-bottom: 8px;
}

.related-posts a {
    color: var(--farbe-schrift);
    text-decoration: underline;
    font-weight: bold;
    font-size: 16px;
    transition: all 0.2s ease-in-out;
}

/* --- QUELLEN-BOX (7pt) --- */
.article-sources {
    margin: 40px 0 20px 0;
    padding: 15px;
    background-color: #fafafa;
    border-left: 3px solid #ccc;
    font-family: Arial, sans-serif;
    font-size: 7pt;
    line-height: 1.4;
    color: #777;
    text-align: justify;
    hyphens: auto; [cite: 20, 21]
}

/* --- BEITRÄGS-NAVIGATION (SINGLE) --- */
.post-navigation {
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px double var(--farbe-akzent-dunkel);
    font-family: sans-serif;
}

.post-navigation a {
    display: block;
    line-height: 1.4;
    margin-top: 4px;
}

/* --- RESPONSIVE & MOBILE SWAP --- */
@media (max-width: 768px) {
    .header { flex-direction: column; align-items: center; [cite: 22] }
    .main-navigation { margin-top: 15px; text-align: center; [cite: 22] }
    .main-navigation ul { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 15px; [cite: 23] }
    
    .content-wrapper { flex-direction: column; [cite: 24] }

    .site-main { order: 1; width: 100%; [cite: 25] }

    #secondary, .widget-area { 
        order: 2; 
        border-right: none; 
        border-top: 1px solid var(--farbe-akzent-dunkel); 
        width: 100%; 
        padding: 20px 0;
        margin-top: 20px; [cite: 26, 27]
    }
    
    .single .site-main { max-width: 100%; [cite: 28] }

    .post-navigation div[style*="display: flex"] {
        flex-direction: column !important;
        gap: 20px !important;
    }
    .nav-next { text-align: left !important; border-top: 1px dotted var(--farbe-akzent-hell); padding-top: 15px; }

    .footer-navigation ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 15px;
    }
}

/* --- STATUS-FARBEN & PODCAST --- */
.is-available, .is-available a { color: var(--farbe-status-gruen) !important; [cite: 29] }
.not-available { color: var(--farbe-status-rot) !important; [cite: 29] }

.podcast-providers {
    display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 5px 0 10px 0; [cite: 30]
}
.podcast-providers li a {
    font-size: 10px; text-transform: uppercase; font-weight: bold;
    border: 1px solid var(--farbe-status-gruen); padding: 2px 6px;
    text-decoration: none; [cite: 31]
}

/* --- META-ACCORDION: gemeinsamer Stil für Podcast- und Musikplaylist-Info
   im Metadaten-Block (jeweils eigenes <details>, da beide aus mehreren
   Anbieter-Links bestehen). Erbt Rahmen/Hintergrund/Typografie von
   .geo-infobox, nur der Außenabstand ist an die Position im
   Metadaten-Block angepasst. --- */
.meta-accordion.geo-infobox {
    margin: 8px 0;
}
.meta-accordion + .meta-accordion {
    margin-top: 0;
}

/* --- FOOTER --- */
.footer {
    width: 100%; 
    max-width: 1000px; 
    margin: 0 auto;
    display: flex; 
    flex-direction: column;
    align-items: center;
    padding: 20px; 
    border-top: 1px solid var(--farbe-akzent-dunkel); 
    text-align: center;
    box-sizing: border-box; /* Fix für Smartphone-Breite */
    overflow: hidden; [cite: 33]
}
.footer p { font-size: 10px; color: var(--farbe-akzent-hell); margin: 2px 0; [cite: 34] }
.footer-navigation ul { 
    list-style: none; 
    padding: 0; 
    display: flex; 
    gap: 15px; 
    margin-bottom: 10px; [cite: 35]
}

/* --- GEO-INFOBOX: Kurzversion für Eilige und Maschinen --- */
.geo-infobox {
    margin: 28px 0 24px 0;
    border: 1px solid var(--farbe-akzent-dunkel);
    background-color: #f7f7f5;
    font-family: sans-serif;
    font-size: 12px;
    line-height: 1.5;
}

.geo-infobox__summary {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--farbe-akzent-dunkel);
    list-style: none; /* entfernt Standard-Dreieck in Firefox */
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
    border-bottom: 1px solid transparent;
    transition: background-color 0.15s ease;
}

/* Webkit-Dreieck entfernen */
.geo-infobox__summary::-webkit-details-marker { display: none; }

/* Eigenes Aufklapp-Indikator-Symbol */
.geo-infobox__summary::after {
    content: '▸';
    margin-left: auto;
    font-size: 10px;
    color: var(--farbe-akzent-hell);
    transition: transform 0.2s ease;
}

.geo-infobox[open] > .geo-infobox__summary {
    border-bottom: 1px solid var(--farbe-akzent-dunkel);
    background-color: #efefec;
}

.geo-infobox[open] > .geo-infobox__summary::after {
    transform: rotate(90deg);
}

.geo-infobox__body {
    padding: 16px 18px 14px 18px;
}

.geo-infobox__intro {
    font-size: 10px;
    color: var(--farbe-akzent-hell);
    margin: 0 0 14px 0;
    font-style: italic;
}

/* Definition List */
.geo-infobox__list {
    margin: 0;
    padding: 0;
}

.geo-infobox__row {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 4px 12px;
    padding: 7px 0;
    border-bottom: 1px dotted #ccc;
    align-items: baseline;
}

.geo-infobox__row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.geo-infobox__term {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 0.6px;
    color: var(--farbe-akzent-hell);
    padding-top: 1px;
}

.geo-infobox__def {
    color: var(--farbe-schrift);
    margin: 0;
    font-size: 12px;
}

/* Zentrales Argument als Zitat */
.geo-infobox__quote {
    font-style: italic;
    font-family: var(--schriftart-haupt);
    font-size: 13px;
    quotes: "„" """ "‚" "'";
}
.geo-infobox__quote::before { content: open-quote; }
.geo-infobox__quote::after  { content: close-quote; }

/* Tag-Chips für Konzepte & Verweise */
.geo-infobox__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.geo-infobox__tag {
    display: inline-block;
    padding: 2px 7px;
    border: 1px solid var(--farbe-akzent-dunkel);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--farbe-akzent-dunkel);
    background: #fff;
}

/* Mobile: einspaltiges Layout */
@media (max-width: 768px) {
    .geo-infobox__row {
        grid-template-columns: 1fr;
        gap: 2px;
        padding: 8px 0;
    }
    .geo-infobox__term {
        margin-bottom: 2px;
    }
}

/* --- GEO-FAQ: Häufige Fragen zum Artikel (immer offen, nicht versteckt) --- */
.geo-faq {
    margin: 32px 0 24px 0;
    padding-top: 20px;
    border-top: 1px double var(--farbe-akzent-dunkel);
}

.geo-faq__headline {
    font-family: var(--schriftart-haupt);
    font-size: 20px;
    font-weight: bold;
    color: var(--farbe-schrift);
    margin: 0 0 16px 0;
}

.geo-faq__item {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px dotted #ccc;
}

.geo-faq__item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.geo-faq__question {
    font-family: sans-serif;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--farbe-akzent-dunkel);
    margin: 0 0 6px 0;
}

.geo-faq__answer p {
    font-family: var(--schriftart-haupt);
    font-size: 15px;
    line-height: 1.6;
    color: var(--farbe-schrift);
    margin: 0;
}

/* ── ENGLISH BOX ──────────────────────────────────────────────
   Erbt alle .geo-infobox-Stile, überschreibt nur Akzentfarben.
   Grün als Signal für englischsprachige Inhalte.
   ────────────────────────────────────────────────────────────── */

.english-box.geo-infobox {
    background-color: #f5f9f5;
    border-color: var(--mw-green-eng);
}

.english-box .geo-infobox__summary {
    color: var(--mw-green-eng);
}

.english-box .geo-infobox__summary::after {
    color: var(--mw-green-eng);
}

details.english-box[open] > .geo-infobox__summary {
    border-bottom-color: var(--mw-green-eng);
    background-color: #eaf2ea;
}

.english-box .geo-infobox__intro {
    color: var(--mw-green-eng);
}

.english-box__text {
    font-size: 14px;
    line-height: 1.7;
    color: var(--farbe-schrift);
    font-family: var(--schriftart-haupt, Georgia, serif);
}

.english-box__text p {
    margin: 0 0 1em 0;
}

.english-box__text p:last-child {
    margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════
   .mw-* KOMPONENTEN — für Digitalwerkstatt-Rubrik
   Eigene Klassen, parallel zu bestehenden Theme-Klassen.
   Bestehende .header, .content-wrapper etc. bleiben unberührt.
   ═══════════════════════════════════════════════════════════════ */

.mw-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: var(--layout-max);
    margin: 0 auto;
    padding: var(--layout-pad);
    border-bottom: var(--border);
}

.mw-logo img {
    width: 150px;
    height: auto;
    display: block;
    border: var(--border);
}

.mw-nav { text-align: right; }
.mw-nav ul {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mw-nav li a {
    text-transform: uppercase;
    font-weight: bold;
    font-size: var(--text-nav);
    color: var(--color-nav);
    text-decoration: none;
}

.mw-content-wrapper {
    display: flex;
    max-width: var(--layout-max);
    margin: 0 auto;
    padding: var(--layout-pad);
    gap: var(--layout-gap);
}

.mw-sidebar {
    flex: 0 0 var(--sidebar-width);
    padding: 20px 20px 20px 0;
    border-right: var(--border);
}

.mw-main {
    flex: 1;
    min-width: 0;
}

.mw-post {
    margin-bottom: var(--space-xl);
    border-bottom: var(--border);
    padding-bottom: var(--space-lg);
}

.mw-post-title {
    color: var(--color-text);
    font-size: var(--text-title);
    line-height: 1.2;
    font-weight: 700;
    text-decoration: none;
}

.mw-entry-meta {
    font-size: var(--text-meta);
    color: var(--color-meta);
    margin-bottom: 15px;
}

.mw-reading-time {
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-label, 0.5px);
    text-transform: uppercase;
    font-style: italic;
    color: var(--color-meta);
    margin-bottom: 5px;
}

.mw-footer {
    width: 100%;
    max-width: var(--layout-max);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--layout-pad);
    border-top: var(--border);
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
}
.mw-footer p {
    font-size: var(--text-meta);
    color: var(--color-meta);
    margin: 2px 0;
}
.mw-footer-nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
}

.mw-sources {
    margin: 40px 0 20px;
    padding: 15px;
    background: var(--mw-gray-bg);
    border-left: var(--border-accent);
    font-family: var(--font-ui);
    font-size: var(--text-source);
    line-height: 1.4;
    color: #777;
    text-align: justify;
    hyphens: auto;
}

.mw-podcast-providers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
}
.mw-podcast-providers li a {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: bold;
    border: var(--border-green);
    padding: 2px 6px;
    text-decoration: none;
    color: var(--mw-green);
}

/* Responsive .mw-* */
@media (max-width: 768px) {
    .mw-header        { flex-direction: column; align-items: center; }
    .mw-nav           { margin-top: 15px; text-align: center; }
    .mw-nav ul        { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 15px; }
    .mw-content-wrapper { flex-direction: column; }
    .mw-main          { order: 1; width: 100%; }
    .mw-sidebar       { order: 2; border-right: none; border-top: var(--border); width: 100%; padding: 20px 0; margin-top: 20px; }
}


/* ═══════════════════════════════════════════════════════════════
   .dw SCOPE — Digitalwerkstatt-Rubrik
   Auf <body class="category-digitalwerkstatt dw"> oder
   <div class="dw"> anwenden.
   Überschreibt alle semantischen Tokens innerhalb des Scopes.
   ═══════════════════════════════════════════════════════════════ */

.dw {
    /* Farben — weißer Hintergrund, Navy als Text */
    --color-bg:          var(--dw-bg);
    --color-text:        var(--dw-navy);
    --color-border:      var(--dw-navy-mid);
    --color-link:        var(--dw-blue);
    --color-link-hover:  var(--dw-navy);
    --color-meta:        var(--dw-gray-mid);
    --color-nav:         var(--dw-navy);
    --color-accent:      var(--dw-orange);
    --color-accent-dark: #C55A1E;

    /* Typografie */
    --font-main:         var(--font-dw);

    /* Borders */
    --border:            1px solid var(--dw-navy-mid);
    --border-double:     1px double var(--dw-navy-mid);

    /* Backward-Compat auch im .dw Scope */
    --farbe-hintergrund:   var(--dw-bg);
    --farbe-schrift:       var(--dw-navy);
    --farbe-akzent-dunkel: var(--dw-navy-mid);
    --farbe-akzent-hell:   var(--dw-gray-mid);
    --schriftart-haupt:    var(--font-dw);

    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-main);
}

/* Titel und Links im Digitalwerkstatt-Scope */
.dw .mw-post-title,
.dw .post-title,
.dw .post-title a {
    color: var(--dw-navy);
}

.dw a {
    color: var(--dw-blue);
    text-decoration: underline;
}
.dw a:hover {
    color: var(--dw-navy);
    text-decoration: none;
}

/* Kategorie-Badge für Digitalwerkstatt-Artikel im allgemeinen Feed */
.cat-badge-dw {
    display: inline-block;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 2px 6px;
    background: #0E2841;
    color: #FFFFFF;
    border: 1px solid #0E2841;
    font-family: var(--font-dw);
    vertical-align: middle;
    margin-left: 6px;
}

/* ── meiersworld — Trennlinie mit Logosymbol ──────────────── */
.mw-trenner {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 40px 0;
  width: 100%;
}
.mw-trenner img {
  display: block !important;
  height: 32px !important;
  width: auto !important;
  max-width: none !important;
  border: none !important;
  margin-bottom: 0 !important;
  flex: 0 0 auto;
}
.mw-trenner__bar {
  flex: 1 1 auto;
  height: 2.5px;
  background: #1A1A1A;
  margin: 0 18px;
}
/* Markenrot-Modifier */
.mw-trenner--rot .mw-trenner__bar {
  background: #D13030;
}

/* ═══════════════════════════════════════════════════════════════
   BOOKTRENDS — Rubrik-Komponenten
   Version: 1.0 (27.09.2026)
   Eigene .bt-*-Klassen, genutzt in category-booktrends.php und
   page-booktrends.php. Kein Scope auf body.bt nötig, da neues Markup
   direkt gegen --bt-*-Tokens arbeitet (anders als .dw-Scope oben, der
   bestehendes Markup über semantische --color-*-Variablen umfärbt).
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bt-bg: #FAFAF7;
  --bt-surface: #FFFFFF;
  --bt-border: #E4E1D8;
  --bt-image-bg: #EDEAE1;
  --bt-tag-bg: #F1EEE6;
  --bt-text: #1C1B19;
  --bt-text-secondary: #6B6558;
  --bt-text-tertiary: #9A9384;
  --bt-accent: #1F4B43;
  --bt-accent-dark: #123028;
  --bt-accent-contrast: #FFFFFF;
  --bt-up: #2F6F4E;
  --bt-down: #B23A2E;
  --bt-radius: 4px;
  --bt-max-width: 1240px;
  --bt-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --bt-font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.bt-container {
  max-width: var(--bt-max-width);
  margin: 0 auto;
  padding: 0 40px;
}
.bt-section { margin-top: 88px; }
.bt-section:first-of-type { margin-top: 56px; }

/* Kicker / Trend-Badge */
.bt-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bt-accent);
  display: block;
  margin-bottom: 16px;
  font-family: var(--bt-font-body);
}
.bt-trend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--bt-font-body);
}
.bt-trend svg { flex-shrink: 0; }
.bt-trend.is-up { color: var(--bt-up); }
.bt-trend.is-down { color: var(--bt-down); }
.bt-trend-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--bt-tag-bg);
  border-radius: var(--bt-radius);
  padding: 10px 16px;
  width: fit-content;
  margin-top: 16px;
}
.bt-trend-chip .bt-trend-note { font-size: 13px; color: var(--bt-text-secondary); }

/* Kategorie-Badge im allgemeinen Feed (analog .cat-badge-dw) */
.cat-badge-bt {
  display: inline-block;
  font-size: 9px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 2px 6px;
  background: #1F4B43;
  color: #FFFFFF;
  border: 1px solid #1F4B43;
  font-family: var(--bt-font-body);
  vertical-align: middle;
  margin-left: 6px;
}

/* Hero */
.bt-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  font-family: var(--bt-font-body);
  color: var(--bt-text);
}
.bt-hero-title { font-family: var(--bt-font-display); font-size: 42px; margin: 0 0 0.4em; line-height: 1.2; }
.bt-hero-excerpt { font-size: 16px; line-height: 1.6; color: var(--bt-text-secondary); max-width: 52ch; }
.bt-hero-media, .bt-card-media {
  background: var(--bt-image-bg);
  border-radius: var(--bt-radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bt-text-tertiary);
  font-size: 13px;
  text-align: center;
}
.bt-hero-media { height: 340px; padding: 24px; }
.bt-hero-media img, .bt-card-media img { width: 100%; height: 100%; object-fit: cover; }
.bt-meta-row {
  display: flex; align-items: center; gap: 10px; font-size: 13px;
  color: var(--bt-text-secondary); flex-wrap: wrap; font-family: var(--bt-font-body);
}
.bt-meta-row .sep { color: var(--bt-text-tertiary); }

/* Stats bar */
.bt-stats {
  display: flex; background: var(--bt-surface); border: 1px solid var(--bt-border);
  border-radius: var(--bt-radius); padding: 32px 40px; justify-content: space-between;
  align-items: stretch; flex-wrap: wrap; gap: 24px; font-family: var(--bt-font-body);
}
.bt-stat { display: flex; flex-direction: column; gap: 4px; min-width: 120px; }
.bt-stat-number { font-family: var(--bt-font-display); font-size: 30px; font-weight: 600; color: var(--bt-accent); }
.bt-stat-label { font-size: 13px; color: var(--bt-text-secondary); }
.bt-stat-divider { width: 1px; background: var(--bt-border); }

/* Section heads */
.bt-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 28px; gap: 16px; flex-wrap: wrap; font-family: var(--bt-font-body);
}
.bt-section-head h2 { font-family: var(--bt-font-display); font-size: 26px; margin: 0; }
.bt-section-head .bt-more { font-size: 14px; font-weight: 600; white-space: nowrap; color: var(--bt-accent); }

/* Cards / Grid */
.bt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.bt-card {
  background: var(--bt-surface); border: 1px solid var(--bt-border); border-radius: var(--bt-radius);
  overflow: hidden; display: flex; flex-direction: column; font-family: var(--bt-font-body);
}
.bt-card-media { height: 150px; padding: 16px; }
.bt-card-body { padding: 22px; display: flex; flex-direction: column; gap: 12px; flex-grow: 1; }
.bt-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bt-tag {
  background: var(--bt-tag-bg); color: var(--bt-text-secondary); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.bt-card-title { font-family: var(--bt-font-display); font-size: 18px; line-height: 1.3; margin: 0; }
.bt-card-title a { color: var(--bt-text); text-decoration: none; }
.bt-card-excerpt { font-size: 14px; line-height: 1.55; color: var(--bt-text-secondary); flex-grow: 1; }
.bt-card-date { font-size: 12px; color: var(--bt-text-tertiary); }

/* Datenanalyse / Chart */
.bt-data-highlight { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; font-family: var(--bt-font-body); }
.bt-chart-card { background: var(--bt-surface); border: 1px solid var(--bt-border); border-radius: var(--bt-radius); padding: 32px; }
.bt-chart-kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bt-text-secondary); }
.bt-chart-title { font-family: var(--bt-font-display); font-size: 19px; margin: 8px 0 24px; }
.bt-chart-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.bt-chart-row:last-child { margin-bottom: 0; }
.bt-chart-label { width: 150px; font-size: 13px; color: var(--bt-text); flex-shrink: 0; }
.bt-chart-track { flex-grow: 1; background: var(--bt-tag-bg); border-radius: 2px; height: 10px; }
.bt-chart-fill { background: var(--bt-accent); height: 100%; border-radius: 2px; }
.bt-chart-value { width: 44px; text-align: right; font-size: 13px; font-weight: 600; color: var(--bt-accent); flex-shrink: 0; }
.bt-data-copy { display: flex; flex-direction: column; gap: 16px; }
.bt-data-copy h2 { font-family: var(--bt-font-display); font-size: 26px; line-height: 1.25; margin: 0; }
.bt-data-copy p { font-size: 15px; line-height: 1.65; color: var(--bt-text-secondary); margin: 0; }
.bt-data-copy a { font-size: 14px; font-weight: 600; color: var(--bt-accent); }

/* Meistgelesen + Newsletter */
.bt-split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px; font-family: var(--bt-font-body); }
.bt-popular { background: var(--bt-surface); border: 1px solid var(--bt-border); border-radius: var(--bt-radius); padding: 32px; }
.bt-popular h3 { font-family: var(--bt-font-display); font-size: 19px; margin: 0 0 20px; }
.bt-popular ol { list-style: none; display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 0; }
.bt-popular li { display: flex; align-items: center; gap: 18px; }
.bt-rank { font-family: var(--bt-font-display); font-size: 22px; color: #D8D3C6; width: 28px; flex-shrink: 0; }
.bt-popular a { flex-grow: 1; font-size: 14px; color: var(--bt-text); font-weight: 500; text-decoration: none; }
.bt-newsletter { background: var(--bt-accent); border-radius: var(--bt-radius); padding: 36px; display: flex; flex-direction: column; gap: 14px; color: #FFFFFF; }
.bt-newsletter h3 { font-family: var(--bt-font-display); color: #FFFFFF; font-size: 20px; margin: 0; }
.bt-newsletter p { color: #CFE0DA; font-size: 14px; line-height: 1.55; margin: 0; }
.bt-newsletter form { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.bt-newsletter label { font-size: 12px; color: #CFE0DA; }
.bt-newsletter .bt-newsletter-row { display: flex; gap: 8px; flex-wrap: wrap; }
.bt-newsletter input[type="email"] { flex-grow: 1; padding: 11px 14px; border-radius: 3px; border: none; font-size: 14px; min-width: 0; }
.bt-newsletter button {
  background: #FFFFFF; color: var(--bt-accent); border: none; padding: 11px 20px; border-radius: 3px;
  font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.bt-newsletter button:hover { background: var(--bt-tag-bg); }
.bt-newsletter .bt-newsletter-privacy { font-size: 12px; color: #9DBDB2; }

/* Kategorie-Archiv (category-booktrends.php) */
.bt-page-header { margin-bottom: 40px; font-family: var(--bt-font-body); }
.bt-page-title { font-family: var(--bt-font-display); font-size: 32px; margin: 0 0 8px; }
.bt-page-lead { color: var(--bt-text-secondary); font-size: 16px; }
.bt-empty { padding: 60px 0; text-align: center; color: var(--bt-text-secondary); font-family: var(--bt-font-body); }

/* Pagination */
.bt-pagination { display: flex; justify-content: center; gap: 8px; margin: 48px 0 0; font-family: var(--bt-font-body); }
.bt-pagination a, .bt-pagination span.page-numbers {
  display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px;
  padding: 0 6px; border: 1px solid var(--bt-border); border-radius: 3px; font-size: 14px; color: var(--bt-text);
  text-decoration: none;
}
.bt-pagination .current { background: var(--bt-accent); color: #fff; border-color: var(--bt-accent); }
.bt-pagination a:hover { border-color: var(--bt-accent); color: var(--bt-accent); }

/* Responsive */
@media (max-width: 980px) {
  .bt-hero, .bt-data-highlight { grid-template-columns: 1fr; }
  .bt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bt-split { grid-template-columns: 1fr; }
  .bt-hero-media { order: -1; height: 260px; }
}
@media (max-width: 760px) {
  .bt-container { padding: 0 20px; }
  .bt-section { margin-top: 56px; }
  .bt-hero-title { font-size: 30px; }
  .bt-grid { grid-template-columns: 1fr; }
  .bt-stats { flex-direction: column; padding: 24px; }
  .bt-stat-divider { display: none; }
  .bt-newsletter-row { flex-direction: column; }
}


/* ══════════════════════════════════════════════════════════════════════
   BOOKTRENDS — WOCHENLAGE-INFOBOX (v1.7.0, 28.09.2026)
   Styling für template-part-wochenlage-info.php. Lebt innerhalb des
   .bt-Scopes (Booktrends-Kontext), nutzt die --bt-*-Tokens von oben.
   ══════════════════════════════════════════════════════════════════════ */

.bt-wl-infobox {
    background: var(--bt-bg-soft, #f7f5f1);
    border: 1px solid var(--bt-border, #e4e0d8);
    border-radius: 12px;
    padding: 22px 24px;
    margin: 28px 0;
}

.bt-wl-meta {
    font-family: var(--bt-font-sans, 'IBM Plex Sans', sans-serif);
    font-size: 14px;
    color: var(--bt-text-muted, #6b6558);
    margin: 0 0 14px;
}

.bt-wl-subreddit-badge {
    display: inline-block;
    background: var(--bt-accent, #b5502f);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 3px 9px;
    border-radius: 999px;
    margin-right: 8px;
    vertical-align: middle;
}

.bt-wl-themen {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.bt-wl-thema-pill {
    background: #fff;
    border: 1px solid var(--bt-border, #e4e0d8);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 13px;
    color: var(--bt-text, #2b2822);
}

.bt-wl-label {
    font-family: var(--bt-font-display, 'Fraunces', serif);
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 10px;
    color: var(--bt-text, #2b2822);
}

.bt-wl-ranking { margin-bottom: 18px; }

.bt-wl-ranking-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.bt-wl-ranking-table th {
    text-align: left;
    font-weight: 600;
    color: var(--bt-text-muted, #6b6558);
    border-bottom: 2px solid var(--bt-border, #e4e0d8);
    padding: 6px 8px;
}

.bt-wl-ranking-table td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--bt-border, #e4e0d8);
    vertical-align: top;
}

.bt-wl-rang { width: 34px; font-weight: 600; color: var(--bt-accent, #b5502f); }
.bt-wl-treffer, .bt-wl-anteil { width: 70px; white-space: nowrap; }

.bt-wl-beispiele {
    display: block;
    font-size: 11.5px;
    color: var(--bt-text-muted, #6b6558);
    margin-top: 2px;
}

.bt-wl-kontrovers { margin-bottom: 18px; }

.bt-wl-kontrovers-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 10px;
}

.bt-wl-befuerwortet, .bt-wl-kritisch {
    background: #fff;
    border-radius: 8px;
    padding: 12px 14px;
    border-left: 3px solid transparent;
}

.bt-wl-befuerwortet { border-left-color: #4a7c59; }
.bt-wl-kritisch { border-left-color: #b5502f; }

.bt-wl-kontrovers-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 6px;
}

.bt-wl-kontrovers-label--pro { color: #4a7c59; }
.bt-wl-kontrovers-label--contra { color: #b5502f; }

.bt-wl-befuerwortet p, .bt-wl-kritisch p {
    margin: 0;
    font-size: 13.5px;
    color: var(--bt-text, #2b2822);
}

.bt-wl-kontrovers-hinweis {
    font-size: 12px;
    color: var(--bt-text-muted, #6b6558);
    margin: 10px 0 0;
}

.bt-wl-ressourcen ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bt-wl-ressourcen li {
    font-size: 13.5px;
    padding: 6px 0;
    border-bottom: 1px solid var(--bt-border, #e4e0d8);
}

.bt-wl-ressourcen li:last-child { border-bottom: none; }

.bt-wl-ressource-hinweis {
    color: var(--bt-text-muted, #6b6558);
    font-size: 12px;
}

.bt-wl-quelle {
    font-size: 11.5px;
    color: var(--bt-text-muted, #6b6558);
    margin: 14px 0 0;
    font-style: italic;
}

@media (max-width: 640px) {
    .bt-wl-kontrovers-split {
        grid-template-columns: 1fr;
    }
}