/* ============================================================================
   COUCH & AGORA – DARK MODE MASTER
   ============================================================================
   
   Version:  1.0
   Datum:    Januar 2025
   
   Dieses CSS konsolidiert ALLE Dark Mode Regeln der Website.
   Nach Installation müssen die @media (prefers-color-scheme: dark) Blöcke
   aus allen anderen Snippets ENTFERNT werden.
   
   INSTALLATION:
   -------------
   1. Simple Custom CSS and JS → Add Custom CSS
   2. Titel: "CA Dark Mode (Master)"
   3. Diesen Code einfügen
   4. Einstellungen:
      - Wo auf der Seite: Header
      - Wo anzeigen: Frontend
   5. Speichern & Aktivieren
   
   STRUKTUR:
   ---------
   1. Design-Tokens (CSS-Variablen)
   2. Globale Basis-Styles
   3. Hero-Bereich (Startseite)
   4. Karten & Panels
   5. Kommentar-System
   6. Lese-Komponenten (Readmodes, Appendix, Plenum)
   7. Spezial-Komponenten
   8. Beitrags-spezifisch (Welcome, Hausordnung)
   
   ============================================================================ */

@media (prefers-color-scheme: dark) {

  /* ==========================================================================
     1. DESIGN-TOKENS (CSS-Variablen)
     ==========================================================================
     
     HINWEIS: Diese Variablen werden global gesetzt und von allen Komponenten
     verwendet. Bei Änderungen hier ändert sich das gesamte Dark Mode Design.
     ========================================================================== */
  
  :root {
    /* Akzentfarben */
    --ca-accent: #14b8a6;
    --ca-burgundy: #C27085;
    --ca-burgundy-light: #D48A9C;
    --ca-burgundy-dark: #9A4A5D;
    --ca-gold: #D4A84B;
    --ca-gold-light: #E8C06A;
    
    /* Hintergründe */
    --ca-panel: #2a2620;
    --ca-panel-border: #3a3530;
    --ca-bg-card: #1a1816;
    --ca-bg-subtle: #242220;
    --ca-sand: #3D3A35;
    --ca-cream: #252320;
    --ca-white: #1A1917;
    
    /* Text */
    --ca-text-primary: #e8e6e2;
    --ca-text-secondary: #b8b4ae;
    --ca-ink-dark: #F5F1EB;
    --ca-ink-medium: #D4CFC7;
    --ca-ink-light: #9A958D;
    
    /* Borders */
    --ca-border-light: #3a3530;
    
    /* Schatten (stärker im Dark Mode) */
    --ca-shadow-soft: 0 4px 20px rgba(0,0,0,0.25);
    --ca-shadow-medium: 0 8px 30px rgba(0,0,0,0.35);
    --ca-shadow-strong: 0 15px 50px rgba(0,0,0,0.45);
    
    /* Glass-Effekte */
    --ca-glass-bg: rgba(30,28,26,0.8);
    --ca-glass-border: rgba(255,255,255,0.08);
  }


  /* ==========================================================================
     2. GLOBALE BASIS-STYLES
     ========================================================================== */
  
  /* --- Author-Strip & Über-Teaser --- */
  .ca-author-strip,
  .ca-ueber-teaser {
    background: linear-gradient(180deg, #0d0c0b 0%, #080807 100%);
    border: 1px solid rgba(255,255,255,0.05);
  }
  
  /* --- Section Headers --- */
  .ca-section-header h2,
  .ca-section-header p {
    color: #1a1a1a !important;
  }
  
  /* --- Autorschaft-Hinweis --- */
  .reading-wrap details.autorschaft-hinweis[open] > summary {
    background: #3a3530;
    border-color: #4a4540;
  }


  /* ==========================================================================
     3. HERO-BEREICH
     ==========================================================================
     
     DESIGN-ENTSCHEIDUNG: 
     - Hero-Hintergrund bleibt HELL (#E5DED3) für Kontrast zum dunklen Umfeld
     - Titel-Box hat dunklen Hintergrund → Text ist WEISS
     ========================================================================== */
  
  /* Hero-Container: bewusst hell */
  .ca-hero {
    background: #E5DED3 !important;
    border-color: #CFC7BC !important;
  }
  
  /* Dekorative Gradienten */
  .ca-hero::before {
    background: radial-gradient(ellipse, rgba(194,112,133,0.06) 0%, transparent 70%);
  }
  
  .ca-hero::after {
    background: radial-gradient(ellipse, rgba(212,168,75,0.04) 0%, transparent 70%);
  }
  
  /* Titel-Box: Text weiß */
  .ca-hero .ca-hero-title,
  .ca-hero .ca-hero-title * {
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  }
  
  /* Spalten-Überschriften */
  .ca-hero .wp-block-columns h2,
  .ca-hero .wp-block-columns h3 {
    color: #fff !important;
  }
  
  /* Inline-Styles überschreiben (falls color:#000 gesetzt) */
  .ca-hero [style*="color:#000"] {
    color: #fff !important;
  }
  
  /* Trenner im Titel-Bereich */
  .ca-hero .ca-hero-title .wp-block-separator {
    background: linear-gradient(
      to right,
      transparent,
      rgba(255,255,255,0.35) 20%,
      rgba(255,255,255,0.35) 80%,
      transparent
    );
  }


  /* ==========================================================================
     4. KARTEN & PANELS
     ========================================================================== */
  
  /* --- Artikel-Karten (dunkel) --- */
  .ca-article-card {
    background: #1e1e1e !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
  }
  
  .ca-article-card-content h3,
  .ca-article-card-content p,
  .ca-article-card .ca-article-category {
    color: #ffffff !important;
  }
  
  .ca-article-card .ca-article-meta span {
    color: rgba(255,255,255,0.6) !important;
  }
  
  /* --- Rubrik-Cards (dunkel) --- */
  .ca-rubrik-card {
    background: #1e1e1e !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
  }
  
  .ca-rubrik-card h3,
  .ca-rubrik-card p {
    color: #ffffff !important;
  }
  
  /* Rubrik-Cover Overlay (verstärkter Gradient) */
  .ca-subcat-grid .rubrik-card .rubrik-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0.16) 60%,
      rgba(0,0,0,0.24) 100%
    );
  }
  
  /* --- Featured Cards (hell für Kontrast) --- */
  .ca-featured-card {
    background: rgba(255,255,255,0.95) !important;
  }
  
  .ca-hero-featured .ca-featured-card-content,
  .ca-hero-featured .ca-featured-card-content * {
    color: #1a1a1a !important;
  }
  
  .ca-featured-category {
    color: #0d9488 !important;
  }
  
  .ca-featured-meta span {
    color: #666 !important;
  }
  
  /* --- Einstieg-Cards --- */
  .ca-einstieg-card {
    background: var(--ca-white);
    border-color: var(--ca-glass-border);
  }
  
  .ca-einstieg-card:hover {
    background: var(--ca-cream);
  }
  
  .ca-einstieg-inhalt .ca-einstieg-icon {
    background: linear-gradient(135deg, rgba(194,112,133,0.12) 0%, rgba(194,112,133,0.06) 100%);
  }
  
  .ca-einstieg-projekt .ca-einstieg-icon {
    background: linear-gradient(135deg, rgba(20,184,166,0.12) 0%, rgba(20,184,166,0.06) 100%);
  }
  
  /* --- Link-in-Bio --- */
  .ca-linkbio {
    background: var(--ca-panel, #2a2620);
    border-color: var(--ca-panel-border, #3a3530);
    box-shadow: 0 16px 36px rgba(0,0,0,0.45);
  }
  
  .ca-linkbio .ca-linkbio-title,
  .ca-linkbio .wp-block-button__link {
    color: #fff;
  }
  
  .ca-linkbio .wp-block-button__link {
    background: var(--ca-bg-card, #1a1816);
    border-color: var(--ca-panel-border, #3a3530);
  }
  
  .ca-linkbio .ca-linkbio-tag,
  .ca-linkbio .ca-linkbio-foot {
    color: var(--ca-text-secondary, #b8b4ae);
  }


  /* ==========================================================================
     5. KOMMENTAR-SYSTEM
     ==========================================================================
     
     DESIGN-ENTSCHEIDUNG:
     Kommentar-Karten bleiben HELL für optimale Lesbarkeit beim Schreiben.
     ========================================================================== */
  
  /* --- Resonanz-Box & Kommentare (bewusst hell) --- */
  .resonanz-box,
  .resonanz-box > summary,
  .annot-pop,
  .ca-section-comments,
  .ca-comms-by-section {
    background: #fff !important;
    color: #111 !important;
    border-color: #d9d4cc !important;
    box-shadow: 0 10px 28px rgba(0,0,0,0.45) !important;
  }
  
  /* Inputs & Textareas */
  .resonanz-box .resonanz-mini textarea,
  .annot-txt,
  .pseudo-input,
  .ap-input,
  .ca-comment-textarea {
    background: #fff !important;
    color: #111 !important;
  }
  
  /* Chips */
  .ca-chips button,
  .ca-chips .chip,
  .ca-chip-badge {
    background: #fff !important;
    color: #111 !important;
  }
  
  /* Pseudonym-Bereiche (dunkel als Kontrast) */
  .rz-pseudonym-row,
  .annot-pseudo,
  .pseudo-hint {
    background: #2a2620;
    border-color: #3a3530;
  }
  
  /* Text-Highlighting */
  .fic-highlight {
    background: rgba(20,184,166,0.22);
  }
  
  /* --- FAB Comment Panel (hell) --- */
  .ca-panel {
    background: #fff;
    color: #111;
  }
  
  .ca-panel-header {
    border-bottom-color: #d9d4cc;
  }
  
  .ca-panel-handle {
    background: #d9d4cc;
  }
  
  .ca-section-text {
    color: #111;
  }
  
  .ca-btn-secondary {
    color: #111;
    border-color: #d9d4cc;
  }
  
  .ca-btn-secondary:hover {
    background: #f5f3ef;
  }
  
  /* --- Thread-Cards --- */
  .ca-thread-card {
    background: #fff;
    color: #111;
    border-color: #d9d4cc;
  }
  
  .ca-thread-replies .ca-thread-card {
    background: #f5f3ef;
  }
  
  .ca-thread-header strong {
    color: #111;
  }
  
  .ca-tag-mini {
    background: #e6e3dd;
    color: #3f3b36;
  }


  /* ==========================================================================
     6. LESE-KOMPONENTEN
     ========================================================================== */
  
  /* --- Readmodes UI (hell für Lesbarkeit) --- */
  .rm {
    background: #fff;
    color: #111;
    border-color: #d9d4cc;
    box-shadow: 0 16px 36px rgba(0,0,0,0.45);
  }
  
  .rm-pane {
    background: #fff;
    color: #111;
    border-color: #d9d4cc;
    box-shadow: 0 20px 44px rgba(0,0,0,0.55);
  }
  
  .rm-tab,
  .rm-note {
    background: #fff;
  }
  
  /* --- Appendix Accordion (hell) --- */
  .appendix details.ax,
  .appendix details.ax-sub,
  .ca-appendix details.ax,
  .ca-appendix details.ax-sub {
    background: #fff;
    color: #111;
    border-color: #d9d4cc;
    box-shadow: 0 16px 36px rgba(0,0,0,0.45);
  }
  
  .appendix .ax-body,
  .appendix .ax-subbody,
  .ca-appendix .ax-body,
  .ca-appendix .ax-subbody {
    border-top-color: #d9d4cc;
  }
  
  .appendix .ax-meta,
  .appendix .ax-submeta,
  .ca-appendix .ax-meta,
  .ca-appendix .ax-submeta {
    color: #3f3b36;
  }
  
  /* --- Plenum (hell für Lesbarkeit) --- */
  .plenum .pl-wrap::before,
  .ca-plenum .pl-wrap::before {
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(255,255,255,0.15) 5%,
      rgba(255,255,255,0.15) 95%,
      transparent 100%
    );
  }
  
  .plenum .pl-bubble,
  .ca-plenum .pl-bubble {
    background: #fff !important;
    color: #111 !important;
    border-top-color: #d9d4cc !important;
    border-right-color: #d9d4cc !important;
    border-bottom-color: #d9d4cc !important;
    /* border-left bleibt speaker-color */
    box-shadow: 0 16px 36px rgba(0,0,0,0.45);
  }
  
  .plenum .pl-bubble:hover,
  .ca-plenum .pl-bubble:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.55);
  }
  
  .plenum .pl-topic,
  .ca-plenum .pl-topic {
    background: #fff !important;
    color: #111 !important;
    border-color: #d9d4cc !important;
    box-shadow: 0 16px 36px rgba(0,0,0,0.45);
  }
  
  .plenum .pl-role,
  .ca-plenum .pl-role {
    background: #fff !important;
    color: #5a554f !important;
    border-color: #d9d4cc !important;
  }
  
  .plenum .pl-bubble a,
  .ca-plenum .pl-bubble a {
    color: var(--ca-accent, #0F766E) !important;
    text-decoration-thickness: 1px;
  }


  /* ==========================================================================
     7. SPEZIAL-KOMPONENTEN
     ========================================================================== */
  
  /* --- Lesebereich Panel --- */
  .ca-lb-panel {
    --ca-lb-bg: #1e293b;
    --ca-lb-border: #334155;
    --ca-lb-text: #f1f5f9;
    --ca-lb-muted: #94a3b8;
    --ca-lb-soft: #0f172a;
  }
  
  .ca-lb-article-title a:hover {
    color: var(--ca-lb-teal-light);
  }
  
  .ca-heart-btn,
  .ca-progress-badge {
    background: rgba(30, 41, 59, 0.95);
    color: #fff;
  }
  
  .ca-progress-badge.completed {
    background: rgba(16, 185, 129, 0.2);
  }
  
  .ca-article-heart-btn {
    background: #1e293b;
    color: #f1f5f9;
  }
  
  /* --- Resonanz des Tages (hell) --- */
  .ca-resonanz-des-tages {
    background: #fff;
    color: #111;
    border-color: var(--ca-accent, #14b8a6);
  }
  
  .rdt-quote p,
  .rdt-author {
    color: #111;
  }
  
  /* --- Themen-Pulsar --- */
  .ca-themen-pulsar-wrap {
    background: #1a1816;
    border-color: #3a3530;
  }
  
  .tp-title {
    color: #e8e6e2;
  }
  
  /* --- Diskurs-Level (hell) --- */
  .ca-diskurs-level.style-detailed {
    background: #fff;
    color: #111;
    border-color: #d9d4cc;
  }
  
  .dl-phase,
  .dl-stat strong {
    color: var(--ca-accent, #0F766E);
  }
  
  .dl-minimal {
    background: #f5f3ef;
    border-color: #d9d4cc;
  }
  
  /* --- Heatmap-Legende (hell) --- */
  .ca-heatmap-legend {
    background: #fff;
    color: #111;
    border-color: #d9d4cc;
  }
  
  .ca-heatmap-legend h4 {
    color: var(--ca-accent, #0F766E);
  }
  
  .ca-heatmap-legend p {
    color: #111;
  }
  
  .heat-legend-list li {
    background: rgba(0,0,0,0.05);
  }
  
  .heat-legend-list li:hover {
    background: rgba(0,0,0,0.1);
  }
  
  /* --- Analytics Dashboard --- */
  .ca-analytics-wrap {
    color: #e8e6e2;
  }
  
  .ca-stat-card,
  .ca-analytics-card {
    background: #1a1816;
    border-color: #3a3530;
  }
  
  .ca-analytics-card h2,
  .ca-section-title {
    color: #e8e6e2;
  }
  
  .ca-stat-label,
  .ca-tag-label,
  .ca-post-count,
  .ca-tag-count,
  .ca-timeline-labels {
    color: #b8b4ae;
  }


	
/* ============================================================================
   ERGÄNZUNG FÜR: CA Dark Mode (Master)
   ============================================================================
   
   Diese Regeln unter "7. SPEZIAL-KOMPONENTEN" hinzufügen,
   nach dem bestehenden "Lesebereich Panel" Abschnitt.
   
   ============================================================================ */


  /* --- Lesebereich Intro-Sektion (HELL - wie Mitreden) --- */
  /* Design-Entscheidung: Intro bleibt hell für optimale Lesbarkeit */
  
  .ca-lesebereich-intro .ca-section-header h2,
  .ca-lesebereich-intro .ca-section-header p {
    color: #111 !important;
  }
  
  /* Content-Karte (links) - HELL */
  .ca-lbi-content {
    background: #fff !important;
    border-color: #d9d4cc !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  }
  
  .ca-lbi-content:hover {
    border-color: var(--ca-accent, #0F766E) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  }
  
  .ca-lbi-intro-text {
    color: #111 !important;
  }
  
  .ca-lbi-intro-text em {
    color: var(--ca-accent, #0F766E) !important;
  }
  
  .ca-lbi-feature {
    background: #f5f3ef !important;
    border-color: transparent !important;
  }
  
  .ca-lbi-feature:hover {
    background: #f0fdfa !important;
    border-color: rgba(15, 118, 110, 0.2) !important;
  }
  
  .ca-lbi-feature-icon {
    background: linear-gradient(135deg, #f0fdfa, #ccfbf1) !important;
  }
  
  .ca-lbi-feature-text h4 {
    color: var(--ca-accent, #0F766E) !important;
  }
  
  .ca-lbi-feature-text p {
    color: #5a554f !important;
  }
  
  .ca-lbi-cta .ca-btn-primary {
    background: linear-gradient(135deg, var(--ca-accent, #0F766E), #14b8a6) !important;
    color: #fff !important;
  }
  
  .ca-lbi-cta-hint {
    color: #5a554f !important;
  }
  
  .ca-lbi-social-proof {
    background: #f5f3ef !important;
    color: #5a554f !important;
  }
  
  /* Visual-Karte (rechts) - HELL */
  .ca-lbi-visual {
    background: #fff !important;
    border-color: #d9d4cc !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  }
  
  .ca-lbi-visual:hover {
    border-color: var(--ca-accent, #0F766E) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  }
  
  .ca-lbi-mockup {
    background: #f5f3ef !important;
    border-color: #d9d4cc !important;
  }
  
  .ca-lbi-mockup-header {
    background: #fff !important;
    border-bottom-color: #d9d4cc !important;
    color: #111 !important;
  }
  
  .ca-lbi-mockup-close {
    color: #5a554f !important;
  }
  
  .ca-lbi-mockup-tabs {
    background: #fff !important;
    border-bottom-color: #d9d4cc !important;
  }
  
  .ca-lbi-mockup-tab {
    color: #5a554f !important;
  }
  
  .ca-lbi-mockup-tab.active {
    background: #f5f3ef !important;
    color: var(--ca-accent, #0F766E) !important;
  }
  
  .ca-lbi-mockup-content {
    background: #fff !important;
  }
  
  .ca-lbi-mockup-article {
    background: #f5f3ef !important;
  }
  
  .ca-lbi-mockup-thumb {
    background: linear-gradient(135deg, #d9d4cc, #c4bfb8) !important;
  }
  
  .ca-lbi-mockup-title {
    color: #111 !important;
  }
  
  .ca-lbi-mockup-meta {
    color: #5a554f !important;
  }
  
  .ca-lbi-mockup-stats {
    background: linear-gradient(135deg, #f0fdfa, #ccfbf1) !important;
    border-top-color: #d9d4cc !important;
  }
  
  .ca-lbi-mockup-stat-val {
    color: var(--ca-accent, #0F766E) !important;
  }
  
  .ca-lbi-mockup-stat-label {
    color: #5a554f !important;
  }

	
	
	
/* ============================================================================
   ERGÄNZUNG FÜR: CA Dark Mode (Master)
   ============================================================================
   
   Diese Regeln unter "7. SPEZIAL-KOMPONENTEN" hinzufügen,
   nach dem bestehenden "Analytics Dashboard" Abschnitt.
   
   Benötigt weil: C&A Discourse Timeline v1.0 wurde bereinigt
   
   ============================================================================ */

  /* --- Discourse Timeline --- */
  .ca-discourse-timeline {
    background: #1a1816;
    border-color: #3a3530;
  }
  
  .filter-btn {
    background: #2a2620;
    color: #e8e6e2;
    border-color: #3a3530;
  }
  
  .filter-btn:hover {
    background: #3a3530;
  }
  
  .timeline-canvas-wrap {
    background: #2a2620;
  }
	
	
/* ============================================================================
   ERGÄNZUNG FÜR: CA Dark Mode (Master)
   ============================================================================
   
   Diese Regeln in dein bestehendes "CA Dark Mode (Master)" CSS einfügen,
   unter "7. SPEZIAL-KOMPONENTEN", nach dem bestehenden Lesebereich-Abschnitt.
   
   ============================================================================ */

  /* --- Direkter Lesebereich-Button Dark Mode --- */
  .ca-fab-lesebereich {
    background: #14b8a6;
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
  }
  
  .ca-fab-lesebereich:hover {
    box-shadow: 0 6px 20px rgba(20, 184, 166, 0.4);
  }
  
  .ca-fab-badge {
    background: #f87171;
  }

  /* --- Speed-Dial Dark Mode --- */
  .ca-speed-dial-trigger {
    background: #14b8a6;
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
  }
  
  .ca-speed-dial-trigger:hover {
    box-shadow: 0 6px 20px rgba(20, 184, 166, 0.4);
  }
  
  .ca-speed-dial.open .ca-speed-dial-trigger {
    background: #475569;
  }
  
  .ca-speed-dial-icon {
    background: #1e293b;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  }
  
  .ca-speed-dial-lesebereich .ca-speed-dial-icon {
    background: linear-gradient(135deg, #134e4a 0%, #0f766e 100%);
    border-color: #14b8a6;
  }
  
  .ca-speed-dial-comment .ca-speed-dial-icon {
    background: linear-gradient(135deg, #78350f 0%, #92400e 100%);
    border-color: #f59e0b;
  }
  
  .ca-speed-dial-label {
    background: rgba(15, 23, 42, 0.95);
    color: #f1f5f9;
  }
  
  .ca-speed-dial-badge {
    background: #f87171;
  }
  
  /* --- Herz-Buttons Dark Mode --- */
  .ca-heart-btn {
    background: rgba(30, 41, 59, 0.95);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
  
  .ca-heart-btn.active {
    background: rgba(254, 202, 202, 0.2);
  }
  
  .ca-article-heart-btn {
    background: #1e293b;
    color: #f1f5f9;
    border-color: #334155;
  }
  
  .ca-article-heart-btn:hover {
    background: #334155;
    border-color: #14b8a6;
  }
  
  .ca-article-heart-btn.active {
    background: rgba(254, 202, 202, 0.15);
    border-color: #f87171;
  }
  
  .ca-progress-badge {
    background: rgba(30, 41, 59, 0.95);
    color: #14b8a6;
  }
  
  .ca-progress-badge.completed {
    background: rgba(16, 185, 129, 0.3);
    color: #10b981;
  }
  
  /* --- Header-Link Dark Mode --- */
  .ca-nav-lesebereich {
    color: #e8e6e2 !important;
  }
  
  .ca-nav-lesebereich:hover {
    color: #14b8a6 !important;
  }
  
  /* --- Panel Dark Mode (bereits vorhanden, hier zur Vollständigkeit) --- */
  .ca-lb-panel {
    background: #1e293b;
    color: #f1f5f9;
  }
  
  .ca-lb-header {
    border-bottom-color: #334155;
  }
  
  .ca-lb-header h2 {
    color: #f1f5f9;
  }
  
  .ca-lb-close {
    color: #94a3b8;
  }
  
  .ca-lb-close:hover {
    background: #334155;
  }
  
  .ca-lb-tabs {
    border-bottom-color: #334155;
  }
  
  .ca-lb-tab {
    color: #94a3b8;
  }
  
  .ca-lb-tab:hover,
  .ca-lb-tab.active {
    color: #14b8a6;
  }
  
  .ca-lb-tab-count {
    background: #334155;
    color: #94a3b8;
  }
  
  .ca-lb-tab.active .ca-lb-tab-count {
    background: #14b8a6;
    color: #fff;
  }
  
  .ca-lb-empty {
    color: #94a3b8;
  }
  
  .ca-lb-empty p {
    color: #f1f5f9;
  }
  
  .ca-lb-article-card {
    background: #0f172a;
  }
  
  .ca-lb-article-card.completed {
    background: rgba(16, 185, 129, 0.15);
  }
  
  .ca-lb-article-thumb {
    background: #334155;
  }
  
  .ca-lb-article-title {
    color: #f1f5f9;
  }
  
  .ca-lb-article-title:hover {
    color: #14b8a6;
  }
  
  .ca-lb-article-meta {
    color: #94a3b8;
  }
  
  .ca-lb-article-progress-bar {
    background: #334155;
  }
  
  .ca-lb-article-remove {
    background: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
  }
  
  .ca-lb-article-remove:hover {
    background: rgba(239, 68, 68, 0.3);
    color: #f87171;
  }
  
  .ca-lb-stat-card {
    background: #0f172a;
  }
  
  .ca-lb-stats-detail h3 {
    color: #f1f5f9;
  }
  
  .ca-lb-progress-bar {
    background: #334155;
  }
  
  .ca-lb-progress-text {
    color: #94a3b8;
  }
  
  .ca-lb-category-tag {
    background: #334155;
    color: #f1f5f9;
  }
  
  .ca-lb-no-data {
    color: #94a3b8;
  }
  
  .ca-lb-streak {
    background: linear-gradient(135deg, #422006, #78350f);
  }
  
  .ca-lb-streak-text {
    color: #fef3c7;
  }
  
  .ca-lb-last-visit {
    color: #94a3b8;
  }
  
  /* --- Intro-Sektion Dark Mode (angepasst für Karten-Stil) --- */
  .ca-lesebereich-intro {
    /* Kein eigener Hintergrund im Dark Mode - passt sich an */
  }
  
  .ca-lesebereich-intro .ca-section-header h2 {
    color: #f1f5f9;
  }
  
  .ca-lesebereich-intro .ca-section-header p {
    color: #94a3b8;
  }
  
  /* Content-Karte (links) */
  .ca-lbi-content {
    background: #1e293b;
    border-color: #334155;
  }
  
  .ca-lbi-content:hover {
    border-color: #14b8a6;
    box-shadow: 0 8px 25px rgba(20, 184, 166, 0.15);
  }
  
  .ca-lbi-intro-text {
    color: #cbd5e1;
  }
  
  .ca-lbi-feature {
    background: rgba(15, 23, 42, 0.5);
    border-color: transparent;
  }
  
  .ca-lbi-feature:hover {
    background: rgba(20, 184, 166, 0.1);
    border-color: rgba(20, 184, 166, 0.3);
  }
  
  .ca-lbi-feature-icon {
    background: linear-gradient(135deg, #134e4a, #0f766e);
  }
  
  .ca-lbi-feature-text h4 {
    color: #14b8a6;
  }
  
  .ca-lbi-feature-text p {
    color: #94a3b8;
  }
  
  .ca-lbi-cta .ca-btn-primary {
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
  }
  
  .ca-lbi-cta-hint {
    color: #94a3b8;
  }
  
  .ca-lbi-social-proof {
    background: rgba(15, 23, 42, 0.5);
    color: #94a3b8;
  }
  
  /* Visual-Karte (rechts) */
  .ca-lbi-visual {
    background: #1e293b;
    border-color: #334155;
  }
  
  .ca-lbi-visual:hover {
    border-color: #14b8a6;
    box-shadow: 0 8px 25px rgba(20, 184, 166, 0.15);
  }
  
  .ca-lbi-mockup {
    background: #0f172a;
    border-color: #334155;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  }
  
  .ca-lbi-mockup-header {
    background: #1e293b;
    border-bottom-color: #334155;
    color: #f1f5f9;
  }
  
  .ca-lbi-mockup-close {
    color: #94a3b8;
  }
  
  .ca-lbi-mockup-tabs {
    background: #1e293b;
    border-bottom-color: #334155;
  }
  
  .ca-lbi-mockup-tab {
    color: #94a3b8;
  }
  
  .ca-lbi-mockup-tab.active {
    background: rgba(15, 23, 42, 0.5);
    color: #14b8a6;
  }
  
  .ca-lbi-mockup-content {
    background: #1e293b;
  }
  
  .ca-lbi-mockup-article {
    background: rgba(15, 23, 42, 0.5);
  }
  
  .ca-lbi-mockup-thumb {
    background: linear-gradient(135deg, #334155, #475569);
  }
  
  .ca-lbi-mockup-title {
    color: #f1f5f9;
  }
  
  .ca-lbi-mockup-meta {
    color: #94a3b8;
  }
  
  .ca-lbi-mockup-stats {
    background: linear-gradient(135deg, #134e4a, #0f766e);
    border-top-color: #334155;
  }
  
  .ca-lbi-mockup-stat-val {
    color: #5eead4;
  }
  
  .ca-lbi-mockup-stat-label {
    color: #99f6e4;
  }
  /* ==========================================================================
     8. BEITRAGS-SPEZIFISCH
     ==========================================================================
     
     Diese Styles werden nur auf Einzelbeiträgen (single posts) benötigt.
     ========================================================================== */
  
  /* --- Welcome-Banner --- */
  .ca-welcome-banner {
    background: linear-gradient(135deg, #2a2620 0%, #3a3530 100%);
    border-color: #4a4540;
  }
  
  /* --- Hausordnung --- */
  .ca-hausordnung {
    background: linear-gradient(135deg, #242220 0%, #2a2620 100%);
    border-color: #3a3530;
  }


} /* Ende @media (prefers-color-scheme: dark) */


/* ============================================================================
   OPTIONAL: Manueller Dark Mode Toggle
   ============================================================================
   
   Falls du einen Toggle-Button für Dark Mode implementieren möchtest,
   kannst du diesen Block aktivieren. Er spiegelt die Regeln oben wider,
   reagiert aber auf body.dark-mode statt auf prefers-color-scheme.
   
   Aktivierung: Kommentarzeichen entfernen
   ============================================================================ */

/*
body.dark-mode,
body[data-theme="dark"] {
  
  --ca-accent: #14b8a6;
  --ca-panel: #2a2620;
  --ca-panel-border: #3a3530;
  --ca-bg-card: #1a1816;
  --ca-bg-subtle: #242220;
  --ca-text-primary: #e8e6e2;
  --ca-text-secondary: #b8b4ae;
  --ca-border-light: #3a3530;
  
}
*/