/* ============================================================================
   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:               1020px;
  --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;
  /* Der Kopfbereich klebt oben (auf dem Telefon 141 px hoch). Ohne diesen
     Abstand landet jedes Sprungziel — Ankerlink, Sprung aus einer Liste,
     wiederhergestellte Scrollposition — darunter und wirkt "verschoben".
     Gemessen am 15.11.2026; mit Reserve fuer die kompakte Fassung. */
  scroll-padding-top: 150px;
}

@media (min-width: 1024px) {
  html {
    scroll-padding-top: 110px;
  }
}

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
   Nadja 30.10.2026: iqd-Fix (21.10.) hat --container-max auf 1020px gezogen,
   damit kollidierte die rechte nav-group (Suche|Warenkorb|Anmelden|Merken|
   Abonnieren = 431px breit) mit dem absolut zentrierten Logo (210px). Die
   Header-Bar bekommt deshalb einen eigenen, breiteren max-width, der Content-
   Container bleibt bei 1020px wie iqd verlangt. */
.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-12) var(--gutter);
  max-width: 1200px;
  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 var(--space-24);
  margin-bottom: var(--space-32);
}
.module-hero.bg-brand { padding: var(--space-56) 0 var(--space-24); }

/* Nadja 30.10.2026: der Container hat 24px Innenabstand links/rechts, dadurch
   war das Startseiten-Hero 972px breit, waehrend der Artikel-Hero die vollen
   1020px nutzt. Beim Klick auf einen Artikel sprang das Bild um 48px nach
   aussen. Hero- und Mosaik-Module heben den Innenabstand jetzt auf, der
   Content-Container (iq-Werbeplatzierungen) bleibt bei 1020px unveraendert.
   Auf <=800px greift der Gutter weiter, damit auf dem Handy keine Elemente
   am Rand kleben. */
.module-hero .container,
.module-mosaic .container {
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 800px) {
  .module-hero .container,
  .module-mosaic .container {
    padding-left: var(--gutter-sm);
    padding-right: var(--gutter-sm);
  }
}

.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 > * {
  /* Nadja 04.11.2026 (UID 740): Bei 320px passten 3 Karten nicht sauber
     in den 1020-Container (3x320 + 2x24 Gap = 1008 + 48 Padding = 1056,
     davon ca. 12px rechts unter overflow: hidden abgeschnitten). 300px
     laesst die 3 Karten vollstaendig sichtbar (3x300 + 2x24 + 48 = 996). */
  flex: 0 0 300px;
  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 .img-wrap img {
  object-position: 50% 25%;
}

/* Portraits auf Startseite nicht am Kopf abschneiden (Peter 29.10.2026:
   damals.de Nelsons letzter Sieg / Kriegswende durch U-Boote).
   .mosaic-img img und .stage-side-cards .card-image img werden sonst mit
   object-fit:cover + object-position:center geschnitten. Haupt-Mosaik-
   Tile + 3er-Teaser-Zeile ziehen den Fokus jetzt in die obere Haelfte. */
.module-mosaic .mosaic-img img,
.stage-side-cards .card-image img {
  object-position: 50% 25%;
}
.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.
   Nadja 04.11.2026 (UID 751): auf Startseite setzt der Entdecken-Slider
   direkt am blauen Footer auf; margin-top: 48 gibt Luft nach oben. */
.footer-top {
  padding: var(--space-24) 0;
  margin-top: var(--space-48);
}
.footer-top .footer-inner {
  display: grid;
  /* Nadja 03.11.2026: Vorher einspaltig mit NL darunter — bei
     container-max 1020px wirkte das als Rubriken oben + grosse Leerflaeche
     + NL mittig = "umgebrochen". Jetzt zweispaltig: Nav links, Newsletter
     rechts.
     Wallpaper-Ads sind position: fixed am Viewport-Rand und nur bei
     >=1400px sichtbar; der 1020-Container sitzt in der Viewport-Mitte,
     also keine Kollision (iq-Note 24.09.2026 bezog sich auf einen
     full-width-NL, der jetzt ohnehin max-width 460px hat). */
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: var(--space-32);
  align-items: start;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.footer-top .footer-newsletter {
  /* iqd Kemmuna 21.10.2026 #12 + #21: zweite Newsletter-Box auf 460 px. */
  max-width: 460px;
  width: 100%;
}
.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-top .footer-newsletter {
    margin-inline: auto;
  }
}

/* Nadja 04.11.2026 (UID 760): Die 6-Spalten-span-Variante war zwar symmetrisch
   ohne Leerzelle, aber INFO und Adresse wirkten dadurch verschoben — sie
   starteten NICHT bündig mit den Zeile-1-Spalten. Jetzt wieder festes
   3-Spalten-Grid: alle Spalten gleich breit, Info sitzt bündig unter
   Leserservice, Kontakt bündig unter Hefte. Die dritte Spalte in Zeile 2
   (unter "Unsere Partner") bleibt frei — das ist weniger stoerend als die
   verschobene Mitte der 2-Spalten-Variante. */
.footer-middle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-32);
}
@media (max-width: 1100px) and (min-width: 801px) {
  .footer-middle-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 800px) {
  .footer-middle-grid { grid-template-columns: 1fr; }
}

.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; }
}


/* iqd Kemmuna 21.10.2026 — Punkt 2: Header-Logo ueberlagerte auf iPad
   Mini-Breite die Menu-/Suche-Icons. Zwischen 600px und 1024px das Logo
   kleiner skalieren und mittig im Flow halten statt absolut. */
@media (min-width: 601px) and (max-width: 1024px) {
  .header-bar .logo { position: static; transform: none; }
  .header-bar .logo img { height: 28px; }
}

/* ──────────────────────────────────────────────────────────────────────
   Newsletter als Karte in der Inhaltsspalte

   iq digital (Kemmuna, 13.11.2026): Auf der Startseite darf nichts ueber die
   Inhaltsbreite von 1020 px hinauslaufen — sonst lassen sich die Werbeformen
   mit Aussenwerbeflaechen nicht ausspielen. Die Markenfarbe sitzt deshalb auf
   der Karte, nicht auf der Sektion.

   Nur vorhandene Abstands-Token verwenden: 4, 8, 12, 16, 20, 24, 32, 40, 48,
   56, 64, 80, 96, 120. Ein unbekanntes Token macht die ganze Regel ungueltig —
   genau daran ist die erste Fassung gescheitert (padding wurde 0).
   ────────────────────────────────────────────────────────────────────── */
.module-newsletter {
  padding: var(--space-40) 0;
}

.newsletter-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: var(--space-40);
  align-items: start;
  padding: var(--space-32) var(--space-40);
  border-radius: 10px;
}

.newsletter-card__text h2 { margin: var(--space-12) 0 0; }
.newsletter-card__text p { margin: var(--space-8) 0 0; opacity: 0.85; }
.newsletter-card__form > * { margin-top: 0; }

@media (max-width: 860px) {
  .newsletter-card {
    grid-template-columns: 1fr;
    gap: var(--space-20);
    padding: var(--space-24);
  }
  .module-newsletter { padding: var(--space-24) 0; }
}

/* ──────────────────────────────────────────────────────────────────────
   Newsletter-Hinweis, rechts unten — Knopf der sich auffaltet

   Kein Vollformat ueber der Seite: das waere ein konkurrierendes Werbeformat
   neben den Interstitials von iq digital. Stattdessen ein Knopf im Format des
   Nach-oben-Pfeils (44 px, rund, Markenfarbe), der sich zur Karte auffaltet
   und wieder zurueckfaltet — er verschwindet nie ganz.

   Nur vorhandene Abstands-Token: 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64,
   80, 96, 120. Ein unbekanntes Token macht die ganze Regel ungueltig.
   ────────────────────────────────────────────────────────────────────── */
/* Gemeinsamer Stapel fuer die schwebenden Knoepfe rechts unten.
   Reihenfolge im Layout bestimmt die Reihenfolge im Stapel: Newsletter oben,
   Nach-oben-Pfeil darunter. */
.ecke-knoepfe {
  position: fixed;
  /* Bleibt am Fensterrand und ueberlagert auf breiten Schirmen die rechte
     Aussenwerbung. Bewusst so entschieden (Martin 14.11.2026), obwohl
     Kemmuna am 24./25.09. eine ueberlagernde Newsletter-Box beanstandet
     hatte: ein 44-px-Knopf ist etwas anderes als eine Box, und die Ecke ist
     der Platz, an dem Leser so etwas suchen. Wer das zurueckdreht, braucht
     vorher eine neue Entscheidung — nicht nur eine rote Pruefung. */
  right: var(--space-20);
  bottom: var(--space-20);
  z-index: 95;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-12);
  pointer-events: none;      /* nur die Knoepfe selbst sind anklickbar */
}

.ecke-knoepfe > *,
.ecke-knoepfe button { pointer-events: auto; }

/* Der Hinweis reicht seinen Knopf direkt in den Stapel durch; die Karte
   haengt an der Ecke des Stapels, damit sie beim Auffalten nicht mitschiebt. */
.nl-ecke { display: contents; }

/* ── der Knopf ────────────────────────────────────────────────────────── */
.nl-knopf {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center;
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1), opacity 160ms ease;
}

.nl-knopf:hover { transform: scale(1.06); }

/* aufgefaltet: der Knopf schrumpft in die Karte hinein */
.nl-ecke--offen .nl-knopf {
  transform: scale(0.2);
  opacity: 0;
  pointer-events: none;
}

/* ── die Karte ────────────────────────────────────────────────────────── */
.nl-hinweis {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(360px, calc(100vw - 2 * var(--space-20)));
  padding: var(--space-20) var(--space-24) var(--space-16);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.26);
  transform-origin: bottom right;
  transform: scale(0.82) translateY(12px);
  opacity: 0;
  visibility: hidden;
  transition:
    transform 240ms cubic-bezier(0.2, 0.7, 0.3, 1),
    opacity 180ms ease,
    visibility 0s linear 240ms;
}

.nl-ecke--offen .nl-hinweis {
  transform: scale(1) translateY(0);
  opacity: 1;
  visibility: visible;
  transition:
    transform 260ms cubic-bezier(0.2, 0.7, 0.3, 1),
    opacity 200ms ease,
    visibility 0s;
}

.nl-hinweis h2 { margin: var(--space-8) 0 0; font-size: var(--text-h-sm, 1.15rem); }
.nl-hinweis > p { margin: var(--space-8) 0 var(--space-12); opacity: 0.85; }

.nl-hinweis__schliessen {
  position: absolute;
  top: 6px; right: 8px;
  width: 32px; height: 32px;
  font-size: 22px; line-height: 1;
  color: inherit; background: transparent;
  border: none; border-radius: 50%;
  cursor: pointer; opacity: 0.8;
}
.nl-hinweis__schliessen:hover,
.nl-hinweis__schliessen:focus-visible { opacity: 1; background: rgba(255, 255, 255, 0.18); }

.nl-hinweis__spaeter {
  display: block;
  margin: var(--space-8) 0 0;
  padding: 4px 0;
  font-size: var(--text-c-sm);
  color: inherit; background: none; border: none;
  opacity: 0.75; text-decoration: underline; cursor: pointer;
}
.nl-hinweis__spaeter:hover { opacity: 1; }

@media (max-width: 520px) {
  .ecke-knoepfe { left: var(--space-12); right: var(--space-12); bottom: var(--space-12); }
  .nl-hinweis {
    left: 0;
    width: auto;
    padding: var(--space-16) var(--space-20) var(--space-12);
    /* Auf dem Telefon wuchs der Hinweis auf 387 px — mit dem klebenden Kopf
       (141 px) blieb auf einem 640-px-Schirm fast nichts von der Seite
       uebrig. Gemeldet von Peter am 15.11.2026 fuer die Raetselseiten, wo
       der Kasten die Antwortknoepfe verdeckte. Deshalb gedeckelt und innen
       scrollbar statt die Seite zu verdraengen. */
    max-height: min(48vh, 360px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Wer Bewegung reduziert haben will, bekommt den Wechsel ohne Animation. */
@media (prefers-reduced-motion: reduce) {
  .nl-knopf, .nl-hinweis { transition: none; }
}


/* ────────────────────────────────────────────────────────────────────────────
   Obere Leiste (Martin 14.11.2026)

   Drei bis fuenf kuratierte Themen, ein Trenner, dann die saisonalen
   Shop-Einstiege. Keine Klappen — was in der Leiste steht, ist ein Klick
   weit. Alle Rubriken stehen vollstaendig im Menue hinter "Menü".

   Optik nach dem Vorbild von Beschaffung aktuell: ruhig, gleich gewichtet,
   kein Knopf, keine Farbe. Hervorgehoben wird nur die Seite, auf der man
   gerade ist. Eine fette, grosse oder bunte Leiste nimmt dem Aufmacher
   darunter die Aufmerksamkeit.
   ──────────────────────────────────────────────────────────────────────── */

/* Zentriert unter dem Logo (Martin 14.11.2026). Linksbuendig wie bei
   Beschaffung aktuell wirkte bei nur sieben Punkten angeschnitten. */
.header-nav ul {
  justify-content: center;
  align-items: center;
}
@media (max-width: 800px) {
  /* zentriert und scrollbar vertraegt sich nicht: der linke Teil waere in
     manchen Browsern nicht mehr erreichbar */
  .header-nav ul { justify-content: flex-start; }
}

.header-nav > ul > li > a {
  /* 14px, normal, zurueckgenommene Farbe. Die Leiste ist Wegweiser, nicht
     Aufmacher — bei 16px fett zog sie den Blick vom ersten Beitrag weg. */
  font-size: var(--text-c-xs);
  font-weight: 400;
  color: var(--color-text-secondary);
  line-height: 1.3;
  padding: var(--space-4) 0;
}
.header-nav > ul > li > a:hover {
  color: var(--color-brand-primary);
  border-bottom-color: var(--color-brand-primary);
}
.header-nav > ul > li > a[aria-current="page"] {
  font-weight: 700;
  color: var(--color-brand-primary);
  border-bottom-color: var(--color-brand-primary);
}

/* Shop-Punkte tragen einen Einkaufswagen — sonst liest sich "Geschenke fuer
   Kinder" wie eine Rubrik und niemand ahnt, dass dort Ware liegt. */
.header-nav .nav-aktion > a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}
.nav-aktion__zeichen {
  flex: 0 0 auto;
  opacity: 0.7;
}
.header-nav .nav-aktion > a:hover .nav-aktion__zeichen { opacity: 1; }

/* trennt die Themen von den Shop-Einstiegen */
.nav-trenner {
  width: 1px;
  height: 18px;
  align-self: center;
  background: var(--color-border-light);
}

@media (prefers-reduced-motion: reduce) {
  .header-nav > ul > li > a { transition: none; }
}