/* ki-type.css — Typografie-Schicht ki-news.live (Designsprache vom 27.10.2026)
   Titel: Fraunces · Text und Bedienung: Work Sans · Themen-Marke: Fraunces kursiv in --accent
   Leiter (Schritt 1,25 ab 17 px): 13 · 15 · 17 · 21 · 27 · 34 · 43 · 54 px. Nichts unter 13 px.
   Kein Mono, keine Großbuchstaben mit Sperrung.

   Warum ":root:not(#_k):not(#_t)" vor jedem Selektor: Die alten Stile kommen aus mehreren
   <style>-Blöcken und aus ki-layout.js (zur Laufzeit eingefügt, also NACH dieser Datei) und
   nutzen bis zu einer ID ("#pxk-kompakt .x .y"). Die zwei :not(#…) heben die Spezifität
   über jede Ein-ID-Regel, ohne !important. !important nur für Inline-Styles.

   Kill-Switch: <link … ki-type.css> in index.html entfernen. */

:root {
  --ki-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --ki-sans: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ki-fs-meta: 0.8125rem;   /* 13 */
  --ki-fs-klein: 0.9375rem;  /* 15 */
  --ki-fs-text: 1.0625rem;   /* 17 */
  --ki-fs-titel: 1.3125rem;  /* 21 */
  --ki-fs-h3: 1.6875rem;     /* 27 */
  --ki-fs-h2: 2.125rem;      /* 34 */
  --ki-fs-h1: 2.6875rem;     /* 43 */
  --ki-fs-display: clamp(2.25rem, 1.4rem + 2.6vw, 3.375rem); /* bis 54 */
}

/* ---------- Titel: Fraunces ---------- */
:root:not(#_k):not(#_t) .px-hero-main-title,
:root:not(#_k):not(#_t) .px-hero-side-title,
:root:not(#_k):not(#_t) .px-hero-release-title,
:root:not(#_k):not(#_t) .pxk-section-title,
:root:not(#_k):not(#_t) .pxk-dossier-title,
:root:not(#_k):not(#_t) .kl-brand-title {
  font-family: var(--ki-serif);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 40;
  letter-spacing: -0.012em;
  text-transform: none;
  text-wrap: balance;
  /* Keine Silbentrennung in Überschriften (Daniel 27.10.: „in jeder Überschrift ein Wort
     geteilt“, wirkt unprofessionell). Nur ein Wort, das breiter als die Zeile ist, bricht um. */
  hyphens: manual;
  overflow-wrap: break-word;
}
/* Titel der Listen und SSR-Überschriften ebenfalls ohne Trennung */
:root:not(#_k):not(#_t) .pxz-t,
:root:not(#_k):not(#_t) h1,
:root:not(#_k):not(#_t) h2,
:root:not(#_k):not(#_t) h3,
:root:not(#_k):not(#_t) h4 { hyphens: manual; overflow-wrap: break-word; }
/* Aufmacher als Bildfläche (27.10.26, Variante B): Titel auf dem Foto bis 56 px */
:root:not(#_k):not(#_t) .px-hero-main-title { font-size: clamp(2rem, 1.2rem + 2.2vw, 3.5rem); font-weight: 600; line-height: 1.06; letter-spacing: -0.018em; }
:root:not(#_k):not(#_t) .pxk-section-title { font-size: var(--ki-fs-h2); font-weight: 600; line-height: 1.1; }
:root:not(#_k):not(#_t) .px-hero-release-title,
:root:not(#_k):not(#_t) .pxk-dossier-title { font-size: var(--ki-fs-titel); font-weight: 600; line-height: 1.18; }
/* Nebenmeldungen 02/03: Mit 21 px wurde die rechte Spalte 132 px höher als die Top-Story und
   lange Titel wurden gekürzt. 17 px, ohne Silbentrennung bis 6 Zeilen, dafür Teaser kürzer. */
:root:not(#_k):not(#_t) .px-hero-side-title { font-size: var(--ki-fs-text); font-weight: 600; line-height: 1.25; -webkit-line-clamp: 6; line-clamp: 6; }
:root:not(#_k):not(#_t) .px-hero-side-summary { -webkit-line-clamp: 2; line-clamp: 2; }
/* Größere Titel brauchen eine Zeile mehr, sonst schneidet die alte Begrenzung mitten im Satz ab */
:root:not(#_k):not(#_t) .pxk-dossier-title { -webkit-line-clamp: 3; line-clamp: 3; }
/* „Frisch auf dem Markt“: Die Box bekommt ihre Höhe vom Hero-Raster (Zeile ~133–175 px), nicht vom Inhalt.
   Mit den größeren Schriften lief der Text in die Link-Zeile (375 px: 11 px, 768 px: 60 px Überlappung).
   Darum kompakter Titel, kurzer Teaser, und der Body schneidet ab statt zu überlappen. */
:root:not(#_k):not(#_t) .px-hero-release-title { font-size: var(--ki-fs-text); line-height: 1.25; -webkit-line-clamp: 2; line-clamp: 2; }
:root:not(#_k):not(#_t) .px-hero-release-text { -webkit-line-clamp: 2; line-clamp: 2; }
:root:not(#_k):not(#_t) .px-hero-release-body { min-height: 0; overflow: hidden; }
@media (max-width: 1279px) {
  /* Meta-Zeile (Anbieter, Modell, Datum) steht schon als Etikett und Reiter darüber;
     „Video auf X“ stößt bei 13 px an den X-Post-Link, Play-Knopf und Link sagen es schon */
  :root:not(#_k):not(#_t) .px-hero-release-meta,
  :root:not(#_k):not(#_t) .px-hero-video-caption { display: none; }
  :root:not(#_k):not(#_t) .px-hero-release-text { -webkit-line-clamp: 1; line-clamp: 1; }
}
@media (max-width: 540px) {
  /* Am Handy ist die Karte schmal: für 6 Titelzeilen nur eine Zeile Teaser */
  :root:not(#_k):not(#_t) .px-hero-side-summary { -webkit-line-clamp: 1; line-clamp: 1; }
}
@media (max-width: 480px) {
  /* „Beobachtete Entwicklungen“ passte bei 34 px ohne Trennung nicht in die Zeile */
  :root:not(#_k):not(#_t) .pxk-section-title { font-size: var(--ki-fs-h3); }
}
:root:not(#_k):not(#_t) .kl-brand-title { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; }

/* ---------- Themen-Marke: Fraunces kursiv, Akzentfarbe ---------- */
:root:not(#_k):not(#_t) .pxk-section-kicker,
:root:not(#_k):not(#_t) .px-hero-release-kicker,
:root:not(#_k):not(#_t) .px-hero-context-label,
:root:not(#_k):not(#_t) .px-hero-importance,
:root:not(#_k):not(#_t) .ki-morgenlage-label,
:root:not(#_k):not(#_t) .c-linie-kopf > span,
:root:not(#_k):not(#_t) .kl-side-label {
  font-family: var(--ki-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
}

/* ---------- Text klein: Work Sans 15 ---------- */
:root:not(#_k):not(#_t) .px-hero-side-summary,
:root:not(#_k):not(#_t) .px-hero-release-text,
:root:not(#_k):not(#_t) .pxk-section-copy,
:root:not(#_k):not(#_t) .pxk-event-title,
:root:not(#_k):not(#_t) .pxk-event-title a,
:root:not(#_k):not(#_t) .c-linie-titel,
:root:not(#_k):not(#_t) .px-hero-context-title {
  font-family: var(--ki-sans);
  font-size: var(--ki-fs-klein);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: pretty;
  hyphens: auto;
}
:root:not(#_k):not(#_t) .pxk-event-title a,
:root:not(#_k):not(#_t) .px-hero-context-title { font-weight: 500; line-height: 1.4; }
/* Titel der Linien-Glieder sind Überschriften: keine Silbentrennung (siehe oben) */
:root:not(#_k):not(#_t) .c-linie-titel,
:root:not(#_k):not(#_t) .px-hero-context-title { hyphens: manual; }

/* ---------- Meta: Work Sans 13, Ziffern tabellarisch (ersetzt Mono) ---------- */
:root:not(#_k):not(#_t) .px-hero-status,
:root:not(#_k):not(#_t) .px-hero-stand,
:root:not(#_k):not(#_t) .px-hero-counter,
:root:not(#_k):not(#_t) .px-hero-pill,
:root:not(#_k):not(#_t) .px-hero-vplay-text,
:root:not(#_k):not(#_t) .px-hero-dossier,
:root:not(#_k):not(#_t) .px-hero-side-rank,
:root:not(#_k):not(#_t) .px-hero-side-index,
:root:not(#_k):not(#_t) .px-hero-score-label,
:root:not(#_k):not(#_t) .px-hero-release-switch > button,
:root:not(#_k):not(#_t) .px-hero-release-meta > span,
:root:not(#_k):not(#_t) .px-hero-video-caption,
:root:not(#_k):not(#_t) .px-hero-release-link,
:root:not(#_k):not(#_t) .c-linie-dossier,
:root:not(#_k):not(#_t) .c-linie-datum,
:root:not(#_k):not(#_t) .c-linie-kopf > em,
:root:not(#_k):not(#_t) .pxk-count,
:root:not(#_k):not(#_t) .pxk-button-label,
:root:not(#_k):not(#_t) .pxk-tag,
:root:not(#_k):not(#_t) .pxk-dossier-meta,
:root:not(#_k):not(#_t) .pxk-event-meta,
:root:not(#_k):not(#_t) #pxk-dossier-rail summary,
:root:not(#_k):not(#_t) .kl-de-badge,
:root:not(#_k):not(#_t) .kl-side-sub,
:root:not(#_k):not(#_t) .font-mono {
  font-family: var(--ki-sans);
  font-size: var(--ki-fs-meta);
  font-weight: 500;
  font-style: normal;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
/* Pillen werden zu schlichten Etiketten */
:root:not(#_k):not(#_t) .px-hero-pill,
:root:not(#_k):not(#_t) .pxk-tag { border-radius: 3px; box-shadow: none; }

/* ---------- Bedienung: Navigation, Reiter, Knöpfe ---------- */
:root:not(#_k):not(#_t) .sidebar-nav-link,
:root:not(#_k):not(#_t) #kl-toplinks a,
:root:not(#_k):not(#_t) .media-toggle,
:root:not(#_k):not(#_t) #tts-trigger,
:root:not(#_k):not(#_t) .kl-side-name {
  font-family: var(--ki-sans);
  font-size: var(--ki-fs-klein);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
:root:not(#_k):not(#_t) .sidebar-nav-link.kl-active,
:root:not(#_k):not(#_t) #kl-toplinks a.kl-active { font-weight: 600; }

/* ---------- Inline-Styles im SSR-Teil (nur hier !important) ---------- */
:root:not(#_k):not(#_t) [style*="Space Grotesk"] { font-family: var(--ki-sans) !important; }
:root:not(#_k):not(#_t) h2[style*="Space Grotesk"],
:root:not(#_k):not(#_t) h3[style*="Space Grotesk"],
:root:not(#_k):not(#_t) .ki-main[style*="Space Grotesk"] {
  font-family: var(--ki-serif) !important;
  font-weight: 600 !important;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
:root:not(#_k):not(#_t) [style*="monospace"] {
  font-family: var(--ki-sans) !important;
  font-size: max(var(--ki-fs-meta), 1em) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-variant-numeric: tabular-nums;
}