/* ==========================================================================
   default.css — Reusable Foundation for myDraft CMS Themes
   Brand-Agnostic Design Tokens, Layout, Components & Utilities
   Load this FIRST, then layer a theme stylesheet on top.
   Last updated: 2026-07-28
   ========================================================================== */

:root {
  /* ---- Design Tokens (overridable by theme files) ---- */
  --color-primary:       #060a14;
  --color-primary-mid:   #0c1220;
  --color-primary-light: #131b2e;
  --color-surface:       #0f1629;
  --color-surface-hover: #162040;
  --color-surface-card:  #131c33;
  --color-surface-elevated:#1a2545;
  --color-border:        rgba(255, 255, 255, 0.16);
  --color-border-active: rgba(6, 182, 212, 0.5);
  --color-accent:        #f5a623;
  --color-accent-cyan:   #22d3ee;
  --color-accent-hover:  #ffc857;
  --color-accent-dim:    rgba(245,166,35,0.15);
  --color-accent-glow:   rgba(245,166,35,0.35);
  --color-red:           #f87171;
  --color-red-dim:       rgba(239,68,68,0.15);
  --color-green:         #34d399;
  --color-green-dim:     rgba(16,185,129,0.15);
  --color-blue:          #60a5fa;
  --color-blue-dim:      rgba(59,130,246,0.15);
  --color-violet:        #a78bfa;
  --color-violet-dim:    rgba(139,92,246,0.15);
  --color-text:          #f8fafc;
  --color-text-heading:  #ffffff;
  --color-text-body:     #f1f5f9;
  --color-text-muted:    #a1b1c7;
  --color-text-link:     #38bdf8;
  --color-text-link-hover:#7dd3fc;
  /* Semantic aliases — werden von theme_3.css (Navbar/Dropdown/Pagination/Hero)
     und Modulen konsumiert, waren aber zuvor nie definiert, sodass var() ohne
     Fallback den Eltern-Farbwert erbte (unsichtbarer/falscher Text). */
  --color-text-primary:  var(--color-text-heading);
  --color-text-secondary:var(--color-text-body);
  --font-sans:           "Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  /* Fluid Typography via clamp(MIN, PREF, MAX) — skaliert nahtlos 320px–1920px */
  --font-size-xs:        clamp(0.6875rem, 0.65rem + 0.1vw, 0.75rem);
  --font-size-sm:        clamp(0.75rem,   0.7rem  + 0.2vw, 0.8125rem);
  --font-size-base:      clamp(0.875rem,  0.8rem  + 0.3vw, 1rem);
  --font-size-lg:        clamp(0.9375rem, 0.85rem + 0.4vw, 1.125rem);
  --font-size-xl:        clamp(1rem,      0.9rem  + 0.5vw, 1.25rem);
  --font-size-2xl:       clamp(1.15rem,   1rem    + 0.7vw, 1.5rem);
  --font-size-3xl:       clamp(1.4rem,    1.2rem  + 0.9vw, 1.9rem);
  --font-size-4xl:       clamp(1.6rem,    1.35rem + 1.2vw, 2.3rem);
  --font-size-hero:      clamp(1.8rem,    1.4rem  + 2vw,   3rem);
  --line-height-tight:   1.2;
  --line-height-base:    1.65;
  --line-height-relaxed: 1.8;
  --space-1: 0.25rem;--space-2: 0.5rem;--space-3: 0.75rem;--space-4: 1rem;
  --space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;
  --space-12: 3rem;--space-16: 4rem;--space-20: 5rem;
  --radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.25);--shadow-sm: 0 2px 6px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);--shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
  --shadow-accent: 0 4px 20px rgba(245,166,35,0.25);
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --duration-fast: 150ms;--duration-base: 250ms;
  --max-width: 1200px;--nav-height: 60px;

  /* ========================================================================
     PHASE 3 — DESIGN-SYSTEM-ALIAS-SHIM
     ------------------------------------------------------------------------
     Die Module/Templates konsumieren bisher drei verwaiste Variablen-Namespaces
     (--brand-* / --module-* / --stats-*), die in :root nie definiert waren,
     sodass jeder Aufruf auf einen haesslichen Inline-Fallback fiel (Neongruen
     #00ff41, #111811, #00f0ff). Dieser Block mappt alle 54 verwaisten Namen
     semantisch korrekt auf die echten --color-* Tokens.
     Dadurch rendern Newsletter/Stats/Kommentar/Similar/Menue etc. ab sofort im
     aktiven Theme (bzw. im tenant-spezifischen Theme, da Theme-Dateien
     --color-* ueberschreiben und die Wirkung automatisch durchschlagen).
     Minimal & umkehrbar: nur CSS, keine Modul-/PHP-Aenderung.
     ======================================================================== */
  --mono-stack: ui-monospace,"SFMono-Regular","Cascadia Code",Menlo,Consolas,monospace;

  /* --- brand-* (get_rss_module_branding + newsletter/similar/rss_categoryview) --- */
  --brand-primary: var(--color-accent);
  --brand-primary-rgb: 245,166,35;
  --brand-accent: var(--color-accent);
  --brand-accent-blue: var(--color-blue);
  --brand-accent-orange: var(--color-accent);
  --brand-accent-red: var(--color-red);
  --brand-surface: var(--color-surface);
  --brand-bg-surface: var(--color-surface);
  --brand-bg-card: var(--color-surface-card);
  --brand-bg: var(--color-surface);
  --brand-border: var(--color-border);
  --brand-text: var(--color-text);
  --brand-text-primary: var(--color-text-heading);
  --brand-text-secondary: var(--color-text-body);
  --brand-text-muted: var(--color-text-muted);
  --brand-neon: var(--color-accent);
  --brand-cyan: var(--color-accent-cyan);
  --brand-radius: var(--radius-lg);
  --brand-font-heading: var(--font-sans);
  --brand-font-mono: var(--mono-stack);

  /* --- module-* (kommentar/kontakt/menue/texthtml/menu.css/news-navigation) --- */
  --module-accent-primary: var(--color-accent);
  --module-accent-primary-bg: var(--color-accent-dim);
  --module-accent-primary-border: var(--color-border-active);
  --module-accent-secondary: var(--color-accent);
  --module-accent-secondary-bg: var(--color-accent-dim);
  --module-accent-secondary-border: var(--color-border-active);
  --module-accent-blue: var(--color-blue);
  --module-accent-orange: var(--color-accent);
  --module-accent-success: var(--color-green);
  --module-accent-success-bg: var(--color-green-dim);
  --module-accent-warning: var(--color-accent);
  --module-neon: var(--color-accent);
  --module-bg: var(--color-surface);
  --module-bg-surface: var(--color-surface);
  --module-bg-card: var(--color-surface-card);
  --module-border: var(--color-border);
  --module-border-color: var(--color-border);
  --module-text-primary: var(--color-text-heading);
  --module-text-muted: var(--color-text-muted);
  --module-btn-bg: var(--color-accent);
  --module-btn-text: var(--color-text-heading);
  --module-input-bg: var(--color-surface-elevated);
  --module-font-mono: var(--mono-stack);

  /* --- stats-* (stats/mod_stat + dashboard in inc_basic-functions) --- */
  --stats-accent-blue: var(--color-blue);
  --stats-accent-orange: var(--color-accent);
  --stats-accent-red: var(--color-red);
  --stats-neon: var(--color-green);
  --stats-bg-card: var(--color-surface-card);
  --stats-bg-primary: var(--color-primary);
  --stats-bg-surface: var(--color-surface);
  --stats-border: var(--color-border);
  --stats-text-primary: var(--color-text-heading);
  --stats-text-secondary: var(--color-text-body);
  --stats-text-muted: var(--color-text-muted);
  --stats-font-mono: var(--mono-stack);

  /* ========================================================================
     PHASE 4 — RSS-MODULE COLOR-RGB ALIASES
     ------------------------------------------------------------------------
     Die RSS-Module (rss_categoryview, rss_content_view) verwenden
     --color-primary-rgb, --color-fastpass und --color-fastpass-rgb für
     rgba()-Hintergründe und Akzentfarben.
     ======================================================================== */
   --color-primary-rgb: 245, 166, 35;       /* RGB von --color-accent (#f5a623) */
   --color-fastpass: var(--color-accent-cyan, #22d3ee);
   --color-fastpass-rgb: 34, 211, 238;      /* RGB von --color-accent-cyan (#22d3ee) */
}

/* ========================================================================
   LIGHT THEME — [data-theme="light"] & prefers-color-scheme: light (High Contrast WCAG 2.1 AA/AAA)
   ------------------------------------------------------------------------ */
[data-theme="light"] {
  --color-primary:       #f8fafc;
  --color-primary-mid:   #ffffff;
  --color-primary-light: #f1f5f9;
  --color-surface:       #ffffff;
  --color-surface-hover: #f1f5f9;
  --color-surface-card:  #ffffff;
  --color-surface-elevated:#f8fafc;
  --color-border:        #cbd5e1;
  --color-border-active: #94a3b8;
  --color-accent:        #d97706;          /* High contrast Amber/Gold (4.8:1) */
  --color-accent-cyan:   #0e7490;          /* High contrast Deep Teal (4.9:1) */
  --color-accent-hover:  #b45309;
  --color-accent-dim:    rgba(217,119,6,0.12);
  --color-accent-glow:   rgba(217,119,6,0.25);
  --color-red:           #b91c1c;          /* High contrast Crimson (6.2:1) */
  --color-red-dim:       rgba(185,28,28,0.10);
  --color-green:         #047857;          /* High contrast Emerald (5.1:1) */
  --color-green-dim:     rgba(4,120,87,0.10);
  --color-blue:          #1d4ed8;          /* High contrast Blue (7.2:1) */
  --color-blue-dim:      rgba(29,78,216,0.10);
  --color-violet:        #6d28d9;
  --color-violet-dim:    rgba(109,40,217,0.10);
  --color-text:          #0f172a;          /* Deep Charcoal (16.8:1) */
  --color-text-heading:  #0f172a;
  --color-text-body:     #1e293b;          /* Slate (13.2:1) */
  --color-text-muted:    #475569;          /* High clarity Gray (5.8:1) */
  --color-text-link:     #1d4ed8;
  --color-text-link-hover:#1e40af;
  --color-text-primary:  var(--color-text-heading);
  --color-text-secondary:var(--color-text-body);
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
  --shadow-accent: 0 4px 20px rgba(217,119,6,0.18);
  --color-primary-rgb: 217, 119, 6;
  --color-fastpass: #0e7490;
  --color-fastpass-rgb: 14, 116, 144;
}

/* Explicit Light-Mode via data-theme, data-bs-theme oder class="light" */
:root[data-theme="light"],
:root[data-bs-theme="light"],
html.light,
body.light {
  --color-primary:       #f8fafc;
  --color-primary-mid:   #ffffff;
  --color-primary-light: #f1f5f9;
  --color-surface:       #ffffff;
  --color-surface-hover: #f1f5f9;
  --color-surface-card:  #ffffff;
  --color-surface-elevated:#f8fafc;
  --color-border:        #cbd5e1;
  --color-border-active: #0284c7;
  --color-accent:        #b45309;
  --color-accent-cyan:   #0891b2;
  --color-accent-hover:  #92400e;
  --color-accent-dim:    rgba(180,83,9,0.12);
  --color-accent-glow:   rgba(180,83,9,0.25);
  --color-red:           #b91c1c;
  --color-red-dim:       rgba(185,28,28,0.10);
  --color-green:         #047857;
  --color-green-dim:     rgba(4,120,87,0.10);
  --color-blue:          #1d4ed8;
  --color-blue-dim:      rgba(29,78,216,0.10);
  --color-violet:        #6d28d9;
  --color-violet-dim:    rgba(109,40,217,0.10);
  --color-text:          #090d16;
  --color-text-heading:  #090d16;
  --color-text-body:     #1e293b;
  --color-text-muted:    #334155;
  --color-text-link:     #0284c7;
  --color-text-link-hover:#0369a1;
  --color-text-primary:  var(--color-text-heading);
  --color-text-secondary:var(--color-text-body);
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
  --shadow-accent: 0 4px 20px rgba(180,83,9,0.18);
  --color-primary-rgb: 180, 83, 9;
  --color-fastpass: #0891b2;
  --color-fastpass-rgb: 8, 145, 178;
}

/* Automatischer Light-Mode via System-Präferenz (nur wenn kein data-theme="dark") */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --color-primary:       #f8fafc;
    --color-primary-mid:   #ffffff;
    --color-primary-light: #f1f5f9;
    --color-surface:       #ffffff;
    --color-surface-hover: #f1f5f9;
    --color-surface-card:  #ffffff;
    --color-surface-elevated:#f8fafc;
    --color-border:        #cbd5e1;
    --color-border-active: #0284c7;
    --color-accent:        #b45309;
    --color-accent-cyan:   #0891b2;
    --color-accent-hover:  #92400e;
    --color-accent-dim:    rgba(180,83,9,0.12);
    --color-accent-glow:   rgba(180,83,9,0.25);
    --color-red:           #b91c1c;
    --color-red-dim:       rgba(185,28,28,0.10);
    --color-green:         #047857;
    --color-green-dim:     rgba(4,120,87,0.10);
    --color-blue:          #1d4ed8;
    --color-blue-dim:      rgba(29,78,216,0.10);
    --color-violet:        #6d28d9;
    --color-violet-dim:    rgba(109,40,217,0.10);
    --color-text:          #090d16;
    --color-text-heading:  #090d16;
    --color-text-body:     #1e293b;
    --color-text-muted:    #334155;
    --color-text-link:     #0284c7;
    --color-text-link-hover:#0369a1;
    --color-text-primary:  var(--color-text-heading);
    --color-text-secondary:var(--color-text-body);
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.06);
    --shadow-sm: 0 2px 6px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
    --shadow-accent: 0 4px 20px rgba(180,83,9,0.18);
    --color-primary-rgb: 180, 83, 9;
    --color-fastpass: #0891b2;
    --color-fastpass-rgb: 8, 145, 178;
  }
}

/* ---- Light-Mode High-Contrast Utility Inversions ---- */
html[data-theme="light"] body, body.light {
  background-color: #f8fafc !important;
  color: #090d16 !important;
}
html[data-theme="light"] .bg-dark, body.light .bg-dark {
  background-color: #ffffff !important;
  color: #090d16 !important;
}
html[data-theme="light"] .text-white, body.light .text-white {
  color: #090d16 !important;
}
html[data-theme="light"] .text-light, body.light .text-light {
  color: #1e293b !important;
}
html[data-theme="light"] .text-muted, body.light .text-muted {
  color: #334155 !important;
}
html[data-theme="light"] .btn-dark, body.light .btn-dark {
  background-color: #ffffff !important;
  color: #090d16 !important;
  border-color: #cbd5e1 !important;
}
html[data-theme="light"] .btn-dark:hover, body.light .btn-dark:hover {
  background-color: #f1f5f9 !important;
  color: #0284c7 !important;
  border-color: #0284c7 !important;
}
html[data-theme="light"] .navbar, body.light .navbar {
  background-color: #ffffff !important;
  border-bottom: 1px solid #cbd5e1 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}
html[data-theme="light"] .glass-navbar, body.light .glass-navbar {
  background: rgba(255, 255, 255, 0.94) !important;
  border-bottom: 1px solid #cbd5e1 !important;
}
html[data-theme="light"] .glass-offcanvas, body.light .glass-offcanvas {
  background: #ffffff !important;
  color: #090d16 !important;
  border-right: 1px solid #cbd5e1 !important;
}
html[data-theme="light"] .box, html[data-theme="light"] .card, html[data-theme="light"] .block,
body.light .box, body.light .card, body.light .block {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}

/* ---- Modern CSS Reset (Session S11 — production-grade baseline) ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:100%;scroll-behavior:smooth;-webkit-text-size-adjust:100%;color-scheme:dark light}
body{font-family:var(--font-sans);font-size:var(--font-size-base);line-height:var(--line-height-base);color:var(--color-text);background:var(--color-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;overflow-x:hidden}
h1,h2,h3,h4,h5,h6{color:var(--color-text-heading);line-height:var(--line-height-tight);font-weight:800;letter-spacing:-0.02em;overflow-wrap:break-word}
h1{font-size:var(--font-size-4xl)}h2{font-size:var(--font-size-3xl)}h3{font-size:var(--font-size-2xl)}h4{font-size:var(--font-size-xl)}h5{font-size:var(--font-size-lg)}h6{font-size:var(--font-size-base)}
a{color:var(--color-text-link);text-decoration:none;transition:color var(--duration-fast)}a:hover{color:var(--color-text-link-hover);text-decoration:underline}
p{margin-bottom:var(--space-4);overflow-wrap:break-word}
img,picture,video,canvas,svg{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}
table{border-collapse:collapse;border-spacing:0}
input,button,textarea,select{font:inherit;color:inherit}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
::selection{background:var(--color-accent);color:var(--color-primary)}

/* ---- Layout & Mobile-First Display Utilization ---- */
.page{margin-top:0;width:100%}
.wrapper{margin-top:0;max-width:var(--max-width);margin-left:auto;margin-right:auto;padding:0 var(--space-6);width:100%}
.container-fluid{width:100%;padding-right:var(--space-4);padding-left:var(--space-4);margin-right:auto;margin-left:auto}
.col-main{float:left;width:70%}

@media(max-width:767.98px){
  html, body {
    width: 100% !important;
    overflow-x: hidden !important;
  }
  .col-main{width:100% !important;}
  .wrapper{
    padding-left: 0.35rem !important;
    padding-right: 0.35rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  .page, .main, #main_page_container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .container, .container-fluid, .cms-page-container {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .box, .card, .block, .cms-module-box {
    padding: 0.85rem 0.65rem !important;
    border-radius: 0.75rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0.75rem !important;
    width: 100% !important;
  }
  .editorial-hero-section .lead-content {
    padding: 1.25rem 0.85rem !important;
  }
  .row {
    margin-left: -0.25rem !important;
    margin-right: -0.25rem !important;
  }
  .row > * {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }
}

/* ================================================================
   MOBILE-FIRST LAYOUT OVERRIDE — Bootstrap 5 Grid Integration
   ----------------------------------------------------------------
   Die Legacy-Regel `.col-main{float:left;width:70%}` kollidiert mit
   dem Bootstrap 5 Flexbox-Grid in `buildPageLayoutGrid()`. Innerhalb
   des `.cms-page-container`-Wrappers überlassen wir Spaltenbreite
   und Reihenfolge vollständig Bootstrap (col-12 / col-lg-* / order-*).
   So erscheint auf Smartphones immer die Hauptspalte (col-main) zuerst,
   Sidebars werden darunter gestapelt — egal ob links, rechts oder beide.
   ================================================================ */
.cms-page-container .col-main,
.cms-page-container .col-left,
.cms-page-container .col-right,
.cms-page-container .sidebar{
  float:none;
  width:auto;
  max-width:none;
}
.content{word-wrap:break-word;font-size:var(--font-size-lg);line-height:var(--line-height-relaxed)}
.content h2{font-size:var(--font-size-2xl);font-weight:800;margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:3px solid var(--color-accent)}
.content h3{font-size:var(--font-size-xl);font-weight:700;margin-top:var(--space-8);margin-bottom:var(--space-4)}

/* ---- Component Primitives ---- */
.box,.card{background:var(--color-surface-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);margin-bottom:var(--space-4);transition:border-color var(--duration-base),box-shadow var(--duration-base)}
.box:hover,.card:hover{border-color:var(--color-border-active);box-shadow:var(--shadow-md)}
.card{transition:transform var(--duration-base),border-color var(--duration-base),box-shadow var(--duration-base)}
.card:hover{transform:translateY(-2px)}
.block{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);margin-bottom:var(--space-6)}
.box:hover,.card:hover{border-color:var(--color-border-active);box-shadow:var(--shadow-md)}
.card{transition:transform var(--duration-base),border-color var(--duration-base),box-shadow var(--duration-base)}
.card:hover{transform:translateY(-2px)}
.block{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);margin-bottom:var(--space-6)}
.block-title{word-wrap:break-word;text-align:left;font-size:var(--font-size-lg);margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:2px solid var(--color-border);display:flex;align-items:center;justify-content:space-between}
.block-title h1,.block-title h2,.block-title h3{font-size:var(--font-size-xl);font-weight:700;color:var(--color-text-heading);letter-spacing:0;margin:0}

/* ---- Buttons ---- */
.button,.button_ext,input.button_ext,button.button_ext,span.button_ext,.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);background:linear-gradient(135deg,var(--color-accent),#e6900a);color:var(--color-primary);font-weight:800;padding:var(--space-3) var(--space-8);border-radius:var(--radius-full);font-size:var(--font-size-sm);letter-spacing:0.02em;text-decoration:none!important;cursor:pointer;border:none;box-shadow:var(--shadow-accent);transition:all var(--duration-base) var(--ease-out);line-height:1.5;white-space:nowrap}
.button:hover,.button_ext:hover,input.button_ext:hover,button.button_ext:hover,span.button_ext:hover,.btn-primary:hover{background:linear-gradient(135deg,var(--color-accent-hover),#d4850a);color:#fff;text-decoration:none!important;transform:translateY(-2px);box-shadow:0 6px 24px var(--color-accent-glow)}
.button:active,.button_ext:active,input.button_ext:active,button.button_ext:active,span.button_ext:active{transform:translateY(0)}