/* ============================================================================
   SI-COUSIN THEME — Base Design System
   ============================================================================
   A "cousin" theme to the Beschaffung Aktuell (Konradin/Datenkasten) design.
   Same structural DNA (modular, typographic, generous spacing) but with
   an editorial/scientific personality suited to Spektrum-Gruppe publications.

   Adaptable for 4 media titles via CSS custom properties:
   - Spektrum der Wissenschaft
   - DAmals
   - Natur
   - Wissen.de

   Font pairing:
   - Headlines:  Work Sans (bold, editorial humanist sans)
   - Body:       Inter (clean, readable humanist sans)
   - Overline:   IBM Plex Mono (technical mono, cousin to Space Mono)
   ============================================================================ */


/* ============================================================================
   0. FONTS
   ============================================================================
   Google Fonts loaded via <link> in HTML (non-render-blocking).
   Do NOT use @import here — it creates a render-blocking waterfall.
   Each HTML template loads:
   fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Work+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap
   ============================================================================ */


/* ============================================================================
   1. DESIGN TOKENS (CSS Custom Properties)
   ============================================================================
   Override these in theme-specific CSS files for each publication.
   ============================================================================ */

:root {
  /* --- Brand Colors (default: Wissenschaft = deep indigo) --- */
  --color-brand-primary:         #1B2F6B;
  --color-brand-primary-hover:   #2D4A9E;
  --color-brand-primary-dark:    #0F1B42;
  --color-brand-primary-subtle:  #E8ECF5;
  --color-brand-accent:          #3B82F6;

  /* --- Neutral Colors (WCAG AA compliant contrast ratios) --- */
  --color-text-primary:          #1a1a2e;     /* 15.5:1 on white */
  --color-text-secondary:        #4a4a5e;     /* 7.5:1 on white (was #5a, boosted) */
  --color-text-tertiary:         #6a6a7a;     /* 4.7:1 on white (was #8a, boosted) */
  --color-text-inverse:          #ffffff;
  --color-bg-white:              #ffffff;
  --color-bg-light:              #F4F4F6;
  --color-bg-subtle:             #EAEAEE;
  --color-border:                #D0D0D8;
  --color-border-light:          #E8E8EE;
  --color-error:                 #DC2626;
  --color-success:               #16A34A;

  /* --- Typography --- */
  --font-headline:               'Work Sans', 'Segoe UI', Roboto, sans-serif;
  --font-body:                   'Inter', 'Segoe UI', Roboto, sans-serif;
  --font-mono:                   'IBM Plex Mono', 'Courier New', monospace;

  /* Headline sizes (fluid: base / 1280 * 100vw, clamped) */
  --text-h-xxl:                  clamp(2.25rem, 4.375vw, 3.5rem);    /* 36–56px */
  --text-h-xl:                   clamp(2rem, 3.5vw, 2.75rem);        /* 32–44px */
  --text-h-lg:                   clamp(1.75rem, 2.8vw, 2.25rem);     /* 28–36px */
  --text-h-md:                   clamp(1.5rem, 2.35vw, 1.875rem);    /* 24–30px */
  --text-h-sm:                   clamp(1.25rem, 1.875vw, 1.5rem);    /* 20–24px */
  --text-h-xs:                   clamp(1.125rem, 1.5vw, 1.25rem);    /* 18–20px */

  /* Body sizes */
  --text-c-xl:                   1.375rem;   /* 22px — article intro */
  --text-c-lg:                   1.25rem;    /* 20px — article body */
  --text-c-md:                   1.125rem;   /* 18px — standard */
  --text-c-sm:                   1rem;       /* 16px — small body */
  --text-c-xs:                   0.875rem;   /* 14px — captions */

  /* UI sizes */
  --text-ui-md:                  0.875rem;   /* 14px */
  --text-ui-sm:                  0.75rem;    /* 12px */
  --text-overline:               0.8125rem;  /* 13px */

  /* Line heights */
  --lh-headline:                 1.1;
  --lh-body:                     1.6;
  --lh-ui:                       1.4;

  /* Letter spacing */
  --ls-headline-tight:           -0.02em;
  --ls-headline:                 -0.01em;
  --ls-overline:                 0.04em;

  /* --- Spacing (8px base) --- */
  --space-4:   0.25rem;
  --space-8:   0.5rem;
  --space-12:  0.75rem;
  --space-16:  1rem;
  --space-20:  1.25rem;
  --space-24:  1.5rem;
  --space-32:  2rem;
  --space-40:  2.5rem;
  --space-48:  3rem;
  --space-56:  3.5rem;
  --space-64:  4rem;
  --space-80:  5rem;
  --space-96:  6rem;
  --space-120: 7.5rem;

  /* --- Layout --- */
  --container-max:               1200px;
  --container-narrow:            840px;
  --container-article:           720px;
  --gutter:                      1.5rem;     /* 24px */
  --gutter-sm:                   1rem;       /* 16px on mobile */

  /* --- Misc --- */
  --radius-badge:                2px;        /* only badges get slight rounding */
  --radius-none:                 0;          /* everything else: sharp edges */
  --transition-fast:             150ms ease;
  --transition-base:             250ms ease;
  --shadow-sm:                   0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:                   0 4px 12px rgba(0,0,0,0.1);
}


/* ============================================================================
   2. RESET & BASE
   ============================================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-c-sm);
  line-height: var(--lh-body);
  color: var(--color-text-primary);
  background-color: var(--color-bg-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Peter 11.10.2026: horizontales Scrollen auf dem Handy raus. Einzelne
     Komponenten (Konradin-Consent-Overlay, 2-spaltige Kontakt-Grids) sorgen
     für body.scrollWidth > viewport. clip verhindert die Scroll-Spur ohne
     Scrollinteraktion anderer Elemente zu stören (overflow:hidden hätte
     position:sticky kaputt gemacht). */
  overflow-x: clip;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol { list-style: none; }

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input, textarea, select {
  font: inherit;
}

/* Accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-to-content link (visible only on focus) */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  padding: 8px 16px;
  background: #fff;
  color: var(--color-brand-primary);
  z-index: 9999;
  font-weight: 700;
  font-size: var(--text-ui-md);
  text-decoration: underline;
}
.skip-link:focus {
  top: 8px;
}

:focus-visible {
  outline: 2px solid var(--color-brand-accent);
  outline-offset: 2px;
}


/* ============================================================================
   3. TYPOGRAPHY
   ============================================================================ */

/* --- Headlines --- */
.t-h-xxl { font-family: var(--font-headline); font-size: var(--text-h-xxl); line-height: var(--lh-headline); letter-spacing: var(--ls-headline-tight); font-weight: 400; }
.t-h-xl  { font-family: var(--font-headline); font-size: var(--text-h-xl);  line-height: var(--lh-headline); letter-spacing: var(--ls-headline-tight); font-weight: 400; }
.t-h-lg  { font-family: var(--font-headline); font-size: var(--text-h-lg);  line-height: var(--lh-headline); letter-spacing: var(--ls-headline); font-weight: 400; }
.t-h-md  { font-family: var(--font-headline); font-size: var(--text-h-md);  line-height: var(--lh-headline); letter-spacing: var(--ls-headline); font-weight: 400; }
.t-h-sm  { font-family: var(--font-headline); font-size: var(--text-h-sm);  line-height: 1.2; font-weight: 400; }
.t-h-xs  { font-family: var(--font-headline); font-size: var(--text-h-xs);  line-height: 1.25; font-weight: 400; }

h1 { font-family: var(--font-headline); font-size: var(--text-h-xxl); line-height: var(--lh-headline); letter-spacing: var(--ls-headline-tight); font-weight: 400; }
h2 { font-family: var(--font-headline); font-size: var(--text-h-lg);  line-height: var(--lh-headline); letter-spacing: var(--ls-headline); font-weight: 400; }
h3 { font-family: var(--font-headline); font-size: var(--text-h-md);  line-height: var(--lh-headline); font-weight: 400; }
h4 { font-family: var(--font-headline); font-size: var(--text-h-sm);  line-height: 1.2; font-weight: 400; }

/* --- Body Text --- */
.t-c-xl  { font-size: var(--text-c-xl);  line-height: var(--lh-body); }
.t-c-lg  { font-size: var(--text-c-lg);  line-height: var(--lh-body); }
.t-c-md  { font-size: var(--text-c-md);  line-height: var(--lh-body); }
.t-c-sm  { font-size: var(--text-c-sm);  line-height: var(--lh-body); }
.t-c-xs  { font-size: var(--text-c-xs);  line-height: var(--lh-body); }

/* --- UI Text --- */
.t-ui-md { font-size: var(--text-ui-md); line-height: var(--lh-ui); font-weight: 600; }
.t-ui-sm { font-size: var(--text-ui-sm); line-height: var(--lh-ui); font-weight: 600; }

/* --- Overline (Mono) --- */
.t-overline {
  font-family: var(--font-mono);
  font-size: var(--text-overline);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* --- Links --- */
.t-link {
  transition: color var(--transition-fast);
}
.t-link--primary { color: var(--color-brand-primary); }
.t-link--primary:hover { color: var(--color-brand-primary-hover); }

/* Inline links in body text */
.t-wysiwyg a {
  color: var(--color-brand-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}
.t-wysiwyg a:hover {
  color: var(--color-brand-primary-hover);
}

/* Text on brand background */
.bg-brand, .bg-brand a, .bg-brand .t-overline { color: var(--color-text-inverse); }
.bg-brand .t-link--primary { color: var(--color-text-inverse); opacity: 0.85; }
.bg-brand .t-link--primary:hover { opacity: 1; }


/* ============================================================================
   4. GRID SYSTEM
   ============================================================================
   12-column grid, responsive via --sm (<=800px) and --xs (<=620px)
   ============================================================================ */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.container--narrow { max-width: var(--container-narrow); }
.container--article { max-width: var(--container-article); }

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--gutter) * -0.5);
  margin-right: calc(var(--gutter) * -0.5);
}

.row--no-wrap { flex-wrap: nowrap; }
.row--center { align-items: center; }

[class*="col-"] {
  padding-left: calc(var(--gutter) * 0.5);
  padding-right: calc(var(--gutter) * 0.5);
}

.col-1  { width: 8.3333%; }
.col-2  { width: 16.6667%; }
.col-3  { width: 25%; }
.col-4  { width: 33.3333%; }
.col-5  { width: 41.6667%; }
.col-6  { width: 50%; }
.col-7  { width: 58.3333%; }
.col-8  { width: 66.6667%; }
.col-9  { width: 75%; }
.col-10 { width: 83.3333%; }
.col-11 { width: 91.6667%; }
.col-12 { width: 100%; }

/* Offsets */
.col-offset-1  { margin-left: 8.3333%; }
.col-offset-2  { margin-left: 16.6667%; }
.col-offset-3  { margin-left: 25%; }

@media (max-width: 800px) {
  .col-sm-6  { width: 50%; }
  .col-sm-12 { width: 100%; }
  .col-offset-sm-0 { margin-left: 0; }
}

@media (max-width: 620px) {
  :root {
    --gutter: var(--gutter-sm);
  }
  .col-xs-12 { width: 100%; }
  .col-offset-xs-0 { margin-left: 0; }
}


/* ============================================================================
   5. UTILITY CLASSES
   ============================================================================ */

/* --- Display --- */
.hidden { display: none; }
.hidden-sm { }
.hidden-xs { }
@media (max-width: 800px) { .hidden-sm { display: none !important; } }
@media (max-width: 620px) { .hidden-xs { display: none !important; } }
@media (min-width: 621px) { .visible-xs-only { display: none !important; } }

/* --- Flex --- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-8  { gap: var(--space-8); }
.gap-12 { gap: var(--space-12); }
.gap-16 { gap: var(--space-16); }
.gap-24 { gap: var(--space-24); }
.gap-32 { gap: var(--space-32); }

/* --- Spacing --- */
.mt-0  { margin-top: 0; }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }
.mt-24 { margin-top: var(--space-24); }
.mt-32 { margin-top: var(--space-32); }
.mt-40 { margin-top: var(--space-40); }
.mt-48 { margin-top: var(--space-48); }
.mt-56 { margin-top: var(--space-56); }
.mt-64 { margin-top: var(--space-64); }
.mt-80 { margin-top: var(--space-80); }

.mb-0  { margin-bottom: 0; }
.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }
.mb-24 { margin-bottom: var(--space-24); }
.mb-32 { margin-bottom: var(--space-32); }
.mb-40 { margin-bottom: var(--space-40); }
.mb-48 { margin-bottom: var(--space-48); }
.mb-56 { margin-bottom: var(--space-56); }
.mb-64 { margin-bottom: var(--space-64); }
.mb-80 { margin-bottom: var(--space-80); }

.pt-0  { padding-top: 0; }
.pt-8  { padding-top: var(--space-8); }
.pt-12 { padding-top: var(--space-12); }
.pt-16 { padding-top: var(--space-16); }
.pt-24 { padding-top: var(--space-24); }
.pt-32 { padding-top: var(--space-32); }
.pt-40 { padding-top: var(--space-40); }
.pt-48 { padding-top: var(--space-48); }
.pt-56 { padding-top: var(--space-56); }
.pt-64 { padding-top: var(--space-64); }

.pb-0  { padding-bottom: 0; }
.pb-8  { padding-bottom: var(--space-8); }
.pb-12 { padding-bottom: var(--space-12); }
.pb-16 { padding-bottom: var(--space-16); }
.pb-24 { padding-bottom: var(--space-24); }
.pb-32 { padding-bottom: var(--space-32); }
.pb-40 { padding-bottom: var(--space-40); }
.pb-48 { padding-bottom: var(--space-48); }
.pb-56 { padding-bottom: var(--space-56); }
.pb-64 { padding-bottom: var(--space-64); }

/* --- Background --- */
.bg-white   { background-color: var(--color-bg-white); }
.bg-light   { background-color: var(--color-bg-light); }
.bg-subtle  { background-color: var(--color-bg-subtle); }
.bg-brand   { background-color: var(--color-brand-primary); color: var(--color-text-inverse); }
.bg-brand-dark { background-color: var(--color-brand-primary-dark); color: var(--color-text-inverse); }
.bg-brand-subtle { background-color: var(--color-brand-primary-subtle); }

/* --- Borders --- */
.bt { border-top: 1px solid var(--color-border); }
.bb { border-bottom: 1px solid var(--color-border); }
.bt-brand { border-top: 3px solid var(--color-brand-primary); }

/* --- Text alignment --- */
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* --- Aspect ratios --- */
.ar-3-2  { aspect-ratio: 3 / 2; object-fit: cover; }
.ar-16-9 { aspect-ratio: 16 / 9; object-fit: cover; }
.ar-21-9 { aspect-ratio: 21 / 9; object-fit: cover; }
.ar-1-1  { aspect-ratio: 1 / 1; object-fit: cover; }
.ar-4-3  { aspect-ratio: 4 / 3; object-fit: cover; }

@media (max-width: 620px) {
  .ar-xs-16-9 { aspect-ratio: 16 / 9; }
  .ar-xs-1-1  { aspect-ratio: 1 / 1; }
}

/* --- Image wrapper with skeleton --- */
.img-wrap {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg-subtle);
}
.img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

/* --- Sticky section intro (like BA) --- */
.sticky-intro {
  position: sticky;
  top: var(--space-32);
}
@media (max-width: 800px) {
  .sticky-intro { position: static; }
}


/* ============================================================================
   6. HEADER
   ============================================================================ */

.header {
  position: relative;
  z-index: 100;
}

/* Top bar: burger + logo + login/subscribe */
.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-12) var(--gutter);
  max-width: var(--container-max);
  margin: 0 auto;
}

.header-bar .logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.header-bar .logo img {
  height: 40px;
  width: auto;
}

.header-bar .nav-group {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.header-bar .link-icon {
  min-width: 48px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
}

/* Header navigation bar (topic links) */
.header-nav {
  border-bottom: 1px solid var(--color-border-light);
  padding: var(--space-8) 0 var(--space-16);
  /* Pod 25.06.2026: rechts abgeschnittene Nav-Items wirkten wie ein Bug.
     Fade-Mask auf den letzten 32px signalisiert visuell, dass weiter
     gescrollt werden kann (zusammen mit overflow-x:auto auf <ul>).
     Pod 29.06.2026: Nur noch <1280px (Tablet/Mobile) — auf Desktop unten
     überschrieben, weil dort alle Items in eine Zeile passen müssen. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
}

.header-nav ul {
  display: flex;
  /* Tuda 02.06 #1: Navigation muss einzeilig bleiben. flex-wrap auf nowrap
     gesetzt; bei Überlauf horizontal scrollbar (ohne sichtbaren Scrollbalken). */
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: var(--space-16) var(--space-24);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  /* Pod 25.06.2026: extra padding-right damit das letzte Nav-Item nicht
     hinter der Fade-Mask verschwindet. */
  padding-right: calc(var(--gutter) + var(--space-24));
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.header-nav ul::-webkit-scrollbar { display: none; }

/* Pod 29.06.2026 — Desktop-Weiche: ab 1280px viewport sollen alle Nav-Items
   einzeilig sichtbar sein, ohne Scroll und ohne Fade. Container wird auf
   1340px erweitert (alle 9 wissenschaft.de-Items + reduziertem 16px-Gap
   passen rein). Auf kleineren Viewports bleibt der scrollbare Fade-Look. */
@media (min-width: 1280px) {
  .header-nav {
    -webkit-mask-image: none;
            mask-image: none;
  }
  .header-nav ul {
    max-width: 1340px;
    gap: var(--space-16);
    padding-right: var(--gutter);
    overflow-x: visible;
  }
}

.header-nav a {
  font-family: var(--font-body);
  font-size: var(--text-c-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  white-space: nowrap;
  padding: var(--space-4) 0;
  border-bottom: 2px solid transparent;
  transition: all var(--transition-fast);
}
.header-nav a:hover,
.header-nav a[aria-current="page"] {
  color: var(--color-brand-primary);
  border-bottom-color: var(--color-brand-primary);
}

/* Special nav item (e.g. "Dossier") */
.header-nav .nav-special a {
  color: var(--color-brand-primary);
  font-weight: 700;
}

@media (max-width: 800px) {
  .header-nav ul {
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: var(--space-16);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 620px) {
  /* Dommel 16.06.2026 07:05: BdW-Logo mobil verzerrt — `width: auto`
     fehlte (`width={logoWidth=280}` HTML-Attribut hat dann gegriffen
     und das Logo auf 280px × 32px = stark gestreckt gerendert). */
  .header-bar .logo img { height: 32px; width: auto; }
  /* Peter Dilger 16.06.2026 15:31: "Mobile ist alles auf der linken Seite."
     Default Mobile-Override (Tuda 2026-05-20) hatte das Logo aus der
     absoluten Zentrierung rausgenommen, dadurch wurde es vom flex-default
     links angeordnet. Mit `margin: 0 auto` bleibt es horizontal zentriert,
     ohne über die rechte nav-group zu überlappen. */
  .header-bar .logo {
    position: static;
    transform: none;
    margin: 0 auto;
  }
  /* Mobile: Logo NICHT mehr absolute-zentriert — die rechte nav-group (User-
     Icon + Merkliste + ABONNIEREN-Button) wurde sonst über das Logo gedrückt
     (Tuda Mobile-Bug 2026-05-20). Logo bleibt zentriert dank flex
     justify-content:space-between + leeren Flex-Items, aber überlappt nicht
     mehr die nav-Buttons. */
  .header-bar .logo {
    position: static;
    transform: none;
    flex-shrink: 1;
    min-width: 0;
  }
  /* ABONNIEREN-Button auf sehr kleinen Screens aus der Topbar raus (steckt
     im Mobile-Menü unter "BDW+ abonnieren"). Spart ~120px = bringt das Logo
     in seine Mitte zurück. */
  .header-bar .nav-group .btn--primary {
    display: none;
  }

  /* User-Bug 25.06.2026: bei iPhone-SE-Größen (320–375 px) lag die Lupe
     der rechten Nav-Group teilweise über dem Logo. Ursache: das Logo-Bild
     hat eine feste Höhe (32 px) und damit eine feste, breite natürliche
     Breite — bei langen Logos (BdW: aspect 6.15:1 ≈ 197 px; DAMALS:
     aspect 5.6:1 ≈ 180 px) drückte es bei wenig Viewport-Platz in den
     Bereich der rechten Nav-Group hinein.
     Lösung: Logo-Container darf max so breit werden, wie nach Burger +
     rechter Nav-Group + Sicherheitsabstand übrig bleibt. Das Bild skaliert
     proportional mit (max-width: 100%, height: auto, aber höhen-gedeckelt). */
  .header-bar .logo {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    max-width: calc(100vw - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .header-bar .logo img {
    max-width: 100%;
    max-height: 32px;
    width: auto;
    height: auto;
    object-fit: contain;
  }
  .header-bar .nav-group:last-child {
    margin-left: 12px;
  }
}


/* ============================================================================
   7. BUTTONS & INTERACTIVE
   ============================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-body);
  font-size: var(--text-ui-md);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--space-12) var(--space-24);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn--primary {
  background-color: var(--color-brand-primary);
  color: var(--color-text-inverse);
}
.btn--primary:hover {
  background-color: var(--color-brand-primary-hover);
}

.btn--outline {
  background: transparent;
  color: var(--color-brand-primary);
  box-shadow: inset 0 0 0 2px var(--color-brand-primary);
}
.btn--outline:hover {
  background-color: var(--color-brand-primary);
  color: var(--color-text-inverse);
}

/* On brand backgrounds */
.bg-brand .btn--primary {
  background-color: var(--color-text-inverse);
  color: var(--color-brand-primary);
}
.bg-brand .btn--primary:hover {
  background-color: rgba(255,255,255,0.9);
}

.btn--large {
  font-size: var(--text-c-sm);
  padding: var(--space-16) var(--space-32);
}

/* Arrow link (like BA's icon--right links) */
.link-arrow {
  font-family: var(--font-body);
  font-size: var(--text-c-md);
  font-weight: 600;
  color: var(--color-brand-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  transition: gap var(--transition-fast), color var(--transition-fast);
}
.link-arrow::after {
  content: '\2192';  /* → */
  font-size: 1.2em;
}
.link-arrow:hover {
  gap: var(--space-12);
  color: var(--color-brand-primary-hover);
}

/* Share/Print icons */
.link-icon {
  font-size: var(--text-ui-md);
  font-weight: 600;
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  transition: color var(--transition-fast);
}
.link-icon:hover { color: var(--color-brand-primary); }


/* ============================================================================
   8. BADGE / TOPLINE SYSTEM
   ============================================================================ */

.topline {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-ui-sm);
  font-weight: 500;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  padding: 2px var(--space-8);
  background-color: var(--color-brand-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-badge);
}

/* Variant badges for different content types */
.badge--plus {
  background: none;
  color: var(--color-text-primary);
  text-transform: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-ui-sm);
  letter-spacing: 0;
}
.badge--plus::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  background-color: var(--color-brand-primary);
  border-radius: 4px;
  flex-shrink: 0;
  /* Plus drawn as two crossing white rectangles via gradients — geometrically centered */
  background-image: linear-gradient(white, white), linear-gradient(white, white);
  background-size: 10px 2px, 2px 10px;
  background-position: 50% 42%, 50% 42%;
  background-repeat: no-repeat;
}
/* On dark/brand backgrounds, badge text should be white */
.bg-brand .badge--plus,
.mosaic-text .badge--plus,
.card-xl .badge--plus,
.hero-overlay .badge--plus { color: var(--color-text-inverse); }

/* Per-title badge colors (for cross-title articles, e.g. natur+ on BDW) */
.badge--plus.badge--wissenschaft::before { background-color: #00339a; }
.badge--plus.badge--natur::before { background-color: #65870f; }
.badge--plus.badge--damals::before { background-color: #820325; }

.badge--live { background-color: var(--color-error); }
.badge--video { background-color: var(--color-text-primary); }

.topline-text {
  font-family: var(--font-mono);
  font-size: var(--text-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* Overline style (no badge, just text) */
.overline {
  font-family: var(--font-mono);
  font-size: var(--text-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
}


/* ============================================================================
   9. ARTICLE CARD COMPONENTS
   ============================================================================
   4 card variants matching BA's system:
   - card-xl:  Hero card (image left 50%, text right on brand bg)
   - card-lg:  Large card (16:9 image top, text below)
   - card-md:  Medium card (thumbnail left, text right — horizontal)
   - card-text: Text-only (topline + title)
   ============================================================================ */

/* --- Shared card elements --- */
.card { position: relative; }
.card a.card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.card .card-title {
  font-family: var(--font-headline);
  font-weight: 400;
  line-height: 1.15;
  color: var(--color-text-primary);
  transition: color var(--transition-fast);
}
.card:hover .card-title {
  color: var(--color-brand-primary);
}
.card .card-excerpt {
  font-size: var(--text-c-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-8);
  line-height: var(--lh-body);
}

/* On brand bg */
.bg-brand .card .card-title,
.bg-brand .card .card-excerpt { color: var(--color-text-inverse); }
.bg-brand .card:hover .card-title { color: rgba(255,255,255,0.8); }

/* --- Card XL: Hero --- */
.card-xl {
  display: flex;
  align-items: center;
}
.card-xl .card-image {
  width: 50%;
  flex-shrink: 0;
}
.card-xl .card-image .img-wrap { aspect-ratio: 3 / 2; }
.card-xl .card-body {
  width: 50%;
  padding: var(--space-32) var(--space-48);
}
.card-xl .card-title { font-size: var(--text-h-lg); }
.card-xl .card-excerpt { font-size: var(--text-c-md); margin-top: var(--space-12); }

@media (max-width: 800px) {
  .card-xl {
    flex-direction: column;
  }
  .card-xl .card-image,
  .card-xl .card-body {
    width: 100%;
  }
  .card-xl .card-body {
    padding: var(--space-24) 0;
  }
}

/* --- Card LG: Large --- */
.card-lg .card-image .img-wrap { aspect-ratio: 16 / 9; }
.card-lg .card-body { padding-top: var(--space-16); }
.card-lg .card-title { font-size: var(--text-h-sm); }

.card-lg:hover .card-image img {
  transform: scale(1.03);
}

/* --- Card MD: Medium (horizontal thumbnail + text) --- */
.card-md {
  display: flex;
  align-items: flex-start;
  gap: var(--space-20);
}
.card-md .card-image {
  width: 240px;
  flex-shrink: 0;
}
.card-md .card-image .img-wrap { aspect-ratio: 3 / 2; }
.card-md .card-body { flex: 1; min-width: 0; }
.card-md .card-title { font-size: var(--text-h-xs); }

.card-md:hover .card-image img {
  transform: scale(1.03);
}

/* Rezensionen (Podbregar 06.07.): Buchcover müssen ganz sichtbar sein,
 * nicht auf 3:2 gecropped. Container behält Breite bei, Cover passt
 * mit contain rein (weißer Rand oben/unten bei hochformat). */
.card-md.card-md--book-cover .card-image .img-wrap { background: var(--color-bg-white); }
.card-md.card-md--book-cover .card-image .img-wrap img { object-fit: contain; }
.card-md.card-md--book-cover:hover .card-image img { transform: none; }

@media (max-width: 620px) {
  .card-md {
    flex-direction: column;
    gap: var(--space-12);
  }
  .card-md .card-image { width: 100%; }
}

/* --- Card Text: No image --- */
.card-text .card-title { font-size: var(--text-h-xs); }
.card-text + .card-text { margin-top: var(--space-32); }


/* ============================================================================
   10. PAGE MODULES
   ============================================================================ */

/* --- Module: spacing wrapper --- */
.module { margin-bottom: var(--space-80); }
.module:last-child { margin-bottom: 0; }

@media (max-width: 620px) {
  .module { margin-bottom: var(--space-48); }
}

/* --- Module: Hero Teaser (homepage) --- */
.module-hero {
  padding: var(--space-56) 0;
}
.module-hero.bg-brand { padding: var(--space-56) 0; }

.module-hero .hero-sub-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  padding-top: var(--space-48);
}

@media (max-width: 800px) {
  .module-hero .hero-sub-cards {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }
}

/* --- Module: Topics (sticky intro + article list) --- */
.module-topics {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-32);
}

.module-topics .section-intro {
  border-top: 3px solid var(--color-brand-primary);
  padding-top: var(--space-32);
}

.module-topics .section-intro .intro-title {
  font-family: var(--font-headline);
  font-size: var(--text-h-md);
  font-weight: 400;
  margin-bottom: var(--space-12);
}

.module-topics .section-intro .intro-desc {
  font-size: var(--text-c-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-16);
}

.module-topics .article-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

@media (max-width: 800px) {
  .module-topics {
    grid-template-columns: 1fr;
    gap: var(--space-24);
  }
}

/* --- Module: Topics Compact (3-col text grid) --- */
.module-topics-compact {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-32);
}
.module-topics-compact .section-intro {
  border-top: 3px solid var(--color-brand-primary);
  padding-top: var(--space-32);
}

@media (max-width: 800px) {
  .module-topics-compact {
    grid-template-columns: 1fr;
    gap: var(--space-24);
  }
}

/* --- Module: Most Read --- */
.module-most-read {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-32);
}
.module-most-read .section-intro {
  border-top: 3px solid var(--color-brand-primary);
  padding-top: var(--space-32);
}
.module-most-read .article-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  padding-top: var(--space-32);
}

@media (max-width: 800px) {
  .module-most-read {
    grid-template-columns: 1fr;
    gap: var(--space-24);
  }
}

/* --- Module: Slider (horizontal scroll cards) --- */
.module-slider {
  overflow: hidden;
}
.module-slider .slider-track {
  display: flex;
  gap: var(--space-24);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-16);
}
.module-slider .slider-track::-webkit-scrollbar { display: none; }
.module-slider .slider-track > * {
  flex: 0 0 320px;
  scroll-snap-align: start;
}

@media (max-width: 620px) {
  .module-slider .slider-track > * { flex: 0 0 85vw; }
}

/* --- Module: Banner (Newsletter, Podcast, Whitepaper) --- */
.module-banner {
  padding: var(--space-64) 0;
  overflow: hidden;
  position: relative;
}
.module-banner .banner-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-48);
  align-items: center;
}

@media (max-width: 800px) {
  .module-banner .banner-inner {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }
  .module-banner { padding: var(--space-40) 0; }
}

/* --- Load More Button --- */
.load-more {
  display: flex;
  justify-content: center;
  padding-top: var(--space-32);
}


/* ============================================================================
   11. ARTICLE SINGLE PAGE
   ============================================================================ */

/* --- Article Hero --- */
.article-hero {
  position: relative;
  overflow: hidden;
}
.article-hero .img-wrap {
  aspect-ratio: 21 / 9;
}
.article-hero .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 60%);
  display: flex;
  align-items: flex-end;
  padding: var(--space-48);
}
.article-hero .hero-overlay .hero-content {
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
  color: var(--color-text-inverse);
}
.article-hero .hero-overlay h1 {
  max-width: 80%;
  color: var(--color-text-inverse);
}
.article-hero figcaption,
.article-hero figcaption span {
  font-size: var(--text-c-xs);
  color: var(--color-text-secondary);
  padding-top: var(--space-8);
  background: transparent;
}
.article-hero figcaption .credit {
  color: var(--color-text-secondary);
}

@media (max-width: 800px) {
  .article-hero .img-wrap { aspect-ratio: 16 / 9; }
  .article-hero .hero-overlay { padding: var(--space-32) var(--space-24); }
  .article-hero .hero-overlay h1 { max-width: 100%; }
}
@media (max-width: 620px) {
  .article-hero .img-wrap { aspect-ratio: 1 / 1; }
}

/* --- Article Intro (lead + meta) --- */
.article-intro {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: var(--space-40);
  padding: var(--space-48) 0;
  border-bottom: 1px solid var(--color-border);
}
.article-intro .lead {
  font-size: var(--text-c-xl);
  font-weight: 700;
  line-height: 1.45;
}
.article-intro .lead a {
  color: var(--color-brand-primary);
  text-decoration: underline;
}
.article-intro .meta-list {
  font-size: var(--text-c-xs);
  color: var(--color-text-secondary);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.article-intro .meta-list a {
  color: var(--color-brand-primary);
}
.article-intro .share-actions {
  display: flex;
  gap: var(--space-16);
  margin-top: var(--space-32);
}

@media (max-width: 800px) {
  .article-intro {
    grid-template-columns: 1fr;
    gap: var(--space-24);
    padding: var(--space-32) 0;
  }
}

/* --- Article Body --- */
.article-body {
  max-width: var(--container-article);
  margin: 0 auto;
  padding: var(--space-48) var(--gutter);
}
.article-body p {
  font-size: var(--text-c-lg);
  line-height: var(--lh-body);
  margin-bottom: var(--space-24);
}
.article-body h2 {
  margin-top: var(--space-48);
  margin-bottom: var(--space-16);
}
.article-body h3 {
  margin-top: var(--space-32);
  margin-bottom: var(--space-12);
}
.article-body a {
  color: var(--color-brand-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article-body a:hover {
  color: var(--color-brand-primary-hover);
}
.article-body ul, .article-body ol {
  margin-bottom: var(--space-24);
  padding-left: var(--space-24);
}
.article-body li {
  font-size: var(--text-c-lg);
  line-height: var(--lh-body);
  margin-bottom: var(--space-8);
  list-style: disc;
}
.article-body ol li { list-style: decimal; }
.article-body blockquote {
  font-family: var(--font-headline);
  font-size: var(--text-h-md);
  font-style: italic;
  border-left: 3px solid var(--color-brand-primary);
  padding-left: var(--space-24);
  margin: var(--space-48) 0;
  color: var(--color-text-secondary);
}
.article-body figure {
  margin: var(--space-48) 0;
}
.article-body figure img {
  width: 100%;
}
.article-body figcaption {
  font-size: var(--text-c-xs);
  color: var(--color-text-tertiary);
  margin-top: var(--space-8);
}

/* WordPress-importierte Interview-Klassen (Tuda 02.06 #3).
   Das alte WP-CMS markierte Q/A explizit mit class="frage"/class="antwort".
   Diese Styles haben Vorrang vor der JS-Heuristik im Article-Renderer. */
.article-body .frage,
.article-body p.frage {
  font-weight: 700;
  margin-top: var(--space-32);
  margin-bottom: var(--space-8);
}
.article-body .antwort,
.article-body p.antwort {
  margin-bottom: var(--space-24);
}
/* Vorspann (Intro/Lead) aus WP-Import */
.article-body .redline-vorspann {
  font-family: var(--font-headline);
  font-size: var(--text-c-lg);
  line-height: 1.45;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-32);
  padding-bottom: var(--space-24);
  border-bottom: 1px solid var(--color-border-light);
}
/* Dachzeile (Kicker oberhalb der Headline) */
.article-body .dachzeile {
  font-size: var(--text-overline);
  text-transform: uppercase;
  letter-spacing: var(--ls-overline);
  color: var(--color-brand-primary);
  font-weight: 600;
  margin-bottom: var(--space-8);
}
/* mvscontent ist nur ein WP-Wrapper — kein eigenes Styling nötig */

/* 2-column grid für Kategorie-Aufmacher (Tuda 02.06 #10).
   Bisher implizit, jetzt explizit mit Gap. */
.grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-32);
}
@media (max-width: 800px) {
  .grid-2col {
    grid-template-columns: 1fr;
    gap: var(--space-24);
  }
}

/* Pulled article (inline recommendation) */
.article-body .pulled-article {
  display: flex;
  gap: var(--space-24);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-24);
  margin: var(--space-48) 0;
}
.article-body .pulled-article img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  flex-shrink: 0;
}
.article-body .pulled-article .pulled-label {
  font-size: var(--text-c-xs);
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-4);
}
.article-body .pulled-article .pulled-title {
  font-family: var(--font-headline);
  font-size: var(--text-h-xs);
}

/* --- Article Footer (tags, author, related) --- */
.article-footer {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-48);
}
.article-footer .tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-bottom: var(--space-40);
}
.article-footer .tag {
  font-family: var(--font-mono);
  font-size: var(--text-ui-sm);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  padding: var(--space-4) var(--space-12);
  border: 1px solid var(--color-border);
  transition: all var(--transition-fast);
}
.article-footer .tag:hover {
  border-color: var(--color-brand-primary);
  color: var(--color-brand-primary);
}


/* ============================================================================
   12. FORMS
   ============================================================================ */

.field-wrap {
  margin-bottom: var(--space-16);
}
.field-wrap label {
  display: block;
  font-size: var(--text-ui-md);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}
.field-wrap input[type="text"],
.field-wrap input[type="email"],
.field-wrap input[type="password"],
.field-wrap input[type="search"],
.field-wrap textarea {
  width: 100%;
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--color-border);
  background: var(--color-bg-white);
  font-size: var(--text-c-sm);
  line-height: var(--lh-ui);
  height: 44px;
  transition: border-color var(--transition-fast);
}
.field-wrap input:focus,
.field-wrap textarea:focus {
  border-color: var(--color-brand-primary);
  outline: none;
}

/* On brand bg */
.bg-brand .field-wrap input,
.bg-brand .field-wrap textarea {
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.1);
  color: var(--color-text-inverse);
}
.bg-brand .field-wrap input::placeholder { color: rgba(255,255,255,0.5); }
.bg-brand .field-wrap label { color: rgba(255,255,255,0.7); }

/* Checkbox */
.field-checkbox {
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
  font-size: var(--text-c-xs);
}
.field-checkbox input { margin-top: 3px; accent-color: var(--color-brand-primary); }


/* ============================================================================
   13. FOOTER
   ============================================================================ */

/* Peter/User 28.08.2026: Footer schmaler, mehr Platz für Content.
   footer-top 40→24 top+bottom padding, gaps zusammengezogen. */
.footer-top {
  padding: var(--space-24) 0;
}
.footer-top .footer-inner {
  display: grid;
  /* IQD 24.09.2026: Newsletter-Box hing im 2-Spalten-Layout rechts und
     kollidierte mit dem Wallpaper-Ad. Jetzt einspaltig, Nav oben, Newsletter
     zentriert darunter über max-width der newsletter-Box (unten). */
  grid-template-columns: 1fr;
  gap: var(--space-32);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.footer-top .footer-newsletter {
  max-width: 620px;
  width: 100%;
  margin-inline: auto;
}
.footer-top .logo-footer img {
  height: 32px;
  width: auto;
  margin-bottom: var(--space-16);
}
.footer-top .footer-nav {
  display: flex;
  gap: var(--space-32);
}
.footer-top .footer-nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.footer-top .footer-nav a {
  font-size: var(--text-c-sm);
  opacity: 0.85;
  transition: opacity var(--transition-fast);
}
.footer-top .footer-nav a:hover { opacity: 1; }

.footer-top .footer-newsletter .newsletter-title {
  font-family: var(--font-headline);
  font-size: var(--text-h-xs);
  margin-bottom: var(--space-4);
}
.footer-top .footer-newsletter .newsletter-subtitle {
  font-size: var(--text-c-sm);
  opacity: 0.75;
  margin-bottom: var(--space-16);
}

@media (max-width: 800px) {
  .footer-top .footer-inner {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }
}

.footer-bottom {
  padding: var(--space-16) 0;
}
.footer-bottom .footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  font-size: var(--text-ui-sm);
  opacity: 0.7;
}
.footer-bottom .footer-logos {
  display: flex;
  align-items: center;
  gap: var(--space-24);
}
.footer-bottom .footer-logos img { height: 24px; width: auto; }

@media (max-width: 620px) {
  .footer-bottom .footer-inner {
    flex-direction: column;
    gap: var(--space-12);
    text-align: center;
  }
}


/* ============================================================================
   14. RUBRIK / CATEGORY PAGE
   ============================================================================ */

.rubrik-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--space-64);
}
.rubrik-hero .img-wrap { aspect-ratio: 21 / 9; }
.rubrik-hero .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--color-brand-primary) 0%, transparent 70%);
  display: flex;
  align-items: flex-end;
  padding: var(--space-48);
}
.rubrik-hero .hero-overlay .hero-content {
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
  color: var(--color-text-inverse);
}

@media (max-width: 800px) {
  .rubrik-hero .img-wrap { aspect-ratio: 16 / 9; }
  .rubrik-hero .hero-overlay { padding: var(--space-32) var(--space-24); }
  .rubrik-hero { padding-left: var(--gutter-sm); padding-right: var(--gutter-sm); }
}

/* Rubrik page two-column layout */
.rubrik-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-32);
}
@media (max-width: 800px) {
  .rubrik-layout { grid-template-columns: 1fr; }
}


/* ============================================================================
   15. AD SLOTS
   ============================================================================ */

.ad-slot {
  text-align: center;
  padding: var(--space-8) 0;
  font-size: var(--text-ui-sm);
  color: var(--color-text-tertiary);
}
.ad-slot img {
  display: inline-block;
  max-width: 100%;
}
.ad-slot--leaderboard { margin: var(--space-32) 0; }
.ad-slot--billboard { margin: var(--space-48) 0; }
.ad-slot--skyscraper {
  position: sticky;
  top: var(--space-16);
}

/* Hide empty ad containers until AdController fills them */
.iqdcontainer:empty { display: none; }
.ad-sidebar:empty, .ad-sidebar:not(:has(*:not(:empty))) { display: none; }


/* ============================================================================
   16. MEDIA PAGES (Webinar, Whitepaper, Podcast)
   ============================================================================ */

/* Webinar/Whitepaper list cards with date/time */
.card-event .card-meta {
  display: flex;
  gap: var(--space-16);
  font-size: var(--text-c-xs);
  color: var(--color-text-tertiary);
  margin-top: var(--space-8);
}
.card-event .card-meta .meta-date::before {
  content: '\1F4C5 ';  /* calendar emoji as placeholder */
}

/* Podcast player embed area */
.podcast-player {
  background: var(--color-bg-light);
  padding: var(--space-32);
  margin: var(--space-48) 0;
}

/* Podcast episode links */
.podcast-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}
.podcast-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--text-ui-md);
  font-weight: 600;
  padding: var(--space-8) var(--space-16);
  border: 1px solid var(--color-border);
  transition: all var(--transition-fast);
}
.podcast-links a:hover {
  border-color: var(--color-brand-primary);
  color: var(--color-brand-primary);
}


/* ============================================================================
   17. RESPONSIVE GRID FIXES
   ============================================================================ */

/* Featured cards 2-col grid on rubrik page */
@media (max-width: 800px) {
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: var(--space-24) !important;
  }
}

/* Improve touch targets on mobile (min 44px) */
@media (max-width: 620px) {
  .header-nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .btn {
    min-height: 44px;
    padding: var(--space-12) var(--space-20);
  }
  .link-icon {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .tag {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }
}

/* Print styles */
@media print {
  .header, .ad-slot, .module-banner, .module-slider, .load-more,
  .share-actions, footer, .btn { display: none !important; }
  .article-body { max-width: 100%; padding: 0; }
  .article-body p { font-size: 12pt; }
  a { color: inherit !important; text-decoration: none !important; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; }
  /* Article hero: flatten overlay, keep image visible
     (Dommel testing report 2026-04-29: Titelbilder fehlten im Druck) */
  .article-hero { position: static !important; margin-bottom: 1rem; page-break-inside: avoid; }
  .article-hero figure { margin: 0; }
  .article-hero .img-wrap { aspect-ratio: auto !important; height: auto !important; position: static !important; overflow: visible !important; }
  .article-hero .img-wrap img { position: static !important; width: 100% !important; height: auto !important; max-height: 50vh; object-fit: contain !important; }
  .article-hero .hero-overlay { position: static !important; background: none !important; padding: 1rem 0 0 !important; color: #000 !important; }
  .article-hero .hero-overlay h1 { color: #000 !important; max-width: 100% !important; font-size: 18pt !important; }
  .article-hero .topline-text { color: #444 !important; }
  .article-hero figcaption { color: #444 !important; font-size: 9pt !important; padding: 4pt 0 0 !important; }
  /* Iframes/embeds (Podigee, YouTube, Vimeo) — show URL fallback in print */
  iframe { display: none !important; }
  iframe[src]::after { content: "Eingebettetes Medium: " attr(src); display: block; padding: 8pt; border: 1px solid #ccc; }
}

/* Header navigation: hide scrollbar/arrows uniformly across browsers
   (Dommel testing report 2026-04-29: Pfeile in Chrome, Firefox different).
   Tuda 02.06 #1: Nav muss einzeilig bleiben — flex-wrap nowrap, bei Überlauf
   horizontal-scrollbar (Scrollbar selbst bleibt unsichtbar). */
.header-nav ul {
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  flex-wrap: nowrap !important;
}
.header-nav ul::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }

/* Social icons hover state (footer) */
.footer-social a:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.6) !important;
}

/* Mobile menüband: kompakteren row-gap bei umgebrochenen Zeilen
   (Podbregar 2026-05-05 #2: Zeilenabstand zu groß bei 3 Zeilen) */
@media (max-width: 800px) {
  .header-nav ul {
    gap: var(--space-8) var(--space-16) !important;
  }
}

/* Article hero overlay: stärkerer Gradient + lesbarer Text auf Mobile
   (Podbregar 2026-05-05 #3: Text im obersten Bild nicht lesbar) */
@media (max-width: 800px) {
  .article-hero .hero-overlay,
  .module-hero .hero-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 50%, transparent 80%) !important;
    padding: var(--space-24) var(--space-16) !important;
  }
  .article-hero .hero-overlay h1,
  .module-hero .hero-overlay h1 {
    line-height: 1.15 !important;
    font-size: clamp(1.5rem, 5.5vw, 2rem) !important;
  }
  /* Mobile sub-cards: Excerpt sichtbar machen (war auf Desktop-Layout zugeschnitten) */
  .module-hero .hero-sub-cards .card-excerpt {
    display: block !important;
    margin-top: var(--space-8);
  }
}

/* Article-Sidebar-Ad bei Tablet-Breite: nicht über Body-Text
   (Podbregar 2026-05-05 #6: Werbung schiebt sich vor den Text)
   Below 1024px wird die Sticky-Sidebar zur Block-Anzeige.  */
@media (max-width: 1024px) {
  .ad-slot--skyscraper,
  .article-sidebar-ad,
  aside.ad-sidebar {
    position: static !important;
    top: auto !important;
    width: 100% !important;
    margin: var(--space-24) auto !important;
    text-align: center;
  }
}

/* Search results page: 1fr+340px Sidebar bricht auf Mobile zur Single-Column
   (Podbregar 2026-05-05 #9: Suchergebnis-Kästen am rechten Rand abgeschnitten) */
@media (max-width: 800px) {
  [style*="grid-template-columns: 1fr 340px"],
  [style*="grid-template-columns:1fr 340px"],
  [style*="gridTemplateColumns: '1fr 340px'"] {
    grid-template-columns: 1fr !important;
    gap: var(--space-24) !important;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .img-wrap img { transition: none; }
}

/* ============================================================================
   Meistgelesen-Modul im n-tv-Style
   ============================================================================
   Peter 07.10.2026 (UID 321): die alte Card-Darstellung sieht öde aus — n-tv
   zeigt eine durchnummerierte Liste mit großer Ziffer links und kompaktem
   Headline-Text rechts. Die Ziffer nimmt die Brand-Farbe, trennt sich klar
   vom Rest der Seite und macht das Modul optisch prominenter.
   ============================================================================ */
.most-read-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.most-read-item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-16);
  align-items: baseline;
  padding: var(--space-12) 0;
  border-bottom: 1px solid var(--color-border-light);
  position: relative;
}
.most-read-item:first-child { padding-top: var(--space-8); }
.most-read-item:last-child { border-bottom: none; }
.most-read-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.most-read-rank {
  font-family: var(--font-headline);
  font-size: var(--text-h-xl);
  font-weight: 800;
  line-height: 0.9;
  color: var(--color-brand-primary);
  min-width: 1.6ch;
  text-align: left;
  letter-spacing: -0.04em;
}
.most-read-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.most-read-content .overline {
  margin: 0;
}
.most-read-title {
  margin: 0;
  line-height: 1.25;
}
@media (max-width: 620px) {
  .most-read-rank { font-size: var(--text-h-lg); }
  .most-read-item { gap: var(--space-12); padding: var(--space-10) 0; }
}