/* LageMagazin — statisches Basis-Styling. Brand-Werte stammen aus brand-tokens.css.
 *
 * Zu den `var(--color-X, #HEX)`-Fallbacks (T9-CR-M2): _doc_head() verlinkt
 * brand-tokens.css IMMER vor styles.css, und brand-tokens.css definiert jede
 * --color-*-Variable im :root-Block. Im Normalbetrieb sind die Variablen am
 * Verwendungsort also stets gesetzt — die inline-#HEX-Werte greifen nur als
 * letztes Sicherheitsnetz, falls brand-tokens.css gar nicht lädt. Sie sind
 * bewusst die Light-Mode-Brand-Werte. Wer Config/Brand.json ändert, muss sie
 * NICHT mit-pflegen (Drift ist folgenlos, solange brand-tokens.css lädt). */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
   font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
      "Helvetica Neue", Arial, sans-serif;
   background: var(--color-background, #FAFAFA);
   color: var(--color-text, #1A1A1A);
   line-height: 1.55;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}
a { color: var(--color-primary, #2C3E50); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

.container {
   max-width: 880px;
   margin: 0 auto;
   padding: 24px 16px 64px;
}
@media (min-width: 720px) {
   .container { padding: 48px 32px 96px; }
}

.site-header {
   border-bottom: 1px solid color-mix(in oklab, var(--color-text) 12%, transparent);
   padding: 8px 0 28px;
   margin-bottom: 28px;
}
/* Die Wordmark ist das dominante Brand-Element — XXL, wie die SwiftUI-App
   (T9-QA-M-T9-QA-01). Vorher war sie 16px klein und der Episoden-Titel das
   größte Element; App und Web zeigten so invertierte Brand-Hierarchien. */
.wordmark a {
   font-size: 30px;
   font-weight: 800;
   letter-spacing: -0.5px;
   color: var(--color-primary);
}
@media (min-width: 720px) { .wordmark a { font-size: 38px; } }
/* Episoden-Titel: der Wordmark untergeordnet (vgl. App: .headline unter
   .largeTitle). Steht im DOM direkt nach der Wordmark. */
.episode-title {
   margin: 10px 0;
   font-size: 19px;
   font-weight: 600;
   line-height: 1.3;
   letter-spacing: -0.2px;
}
@media (min-width: 720px) { .episode-title { font-size: 22px; } }
.episode-meta {
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 13px;
   color: var(--color-text-secondary, #666666);
}
.episode-number {
   font-weight: 700;
   color: var(--color-accent, #E67E22);
   letter-spacing: 0.3px;
}
.ai-disclaimer {
   margin: 0;
   padding: 12px 16px;
   background: color-mix(in oklab, var(--color-accent) 10%, transparent);
   color: var(--color-accent);
   font-size: 13px;
   border-left: 4px solid var(--color-accent);
   border-radius: 6px;
}

.article-section { margin-bottom: 48px; }
.section-heading {
   font-size: 14px;
   text-transform: uppercase;
   letter-spacing: 0.8px;
   color: var(--color-text-secondary, #666666);
   margin: 0 0 16px;
   font-weight: 700;
}

.article-grid {
   display: grid;
   gap: 18px;
   grid-template-columns: 1fr;
}
@media (min-width: 720px) {
   .article-section.level-primary .article-grid { grid-template-columns: 1fr; }
   .article-section.level-secondary .article-grid { grid-template-columns: 1fr 1fr; }
   /* Ein einzelner Secondary-Artikel spannt die volle Breite, statt einsam
      in der linken Spalte neben einer leeren rechten zu sitzen (L-T9-QA-07). */
   .article-section.level-secondary .article-grid:has(> .article-card:only-child) {
      grid-template-columns: 1fr;
   }
}

.article-card {
   background: var(--color-surface, #FFFFFF);
   border-radius: 14px;
   border: 1px solid color-mix(in oklab, var(--color-text) 8%, transparent);
   overflow: hidden;
   position: relative;
   transition: transform .15s ease, box-shadow .15s ease;
}
.article-card::before {
   content: "";
   position: absolute; left: 0; top: 0; bottom: 0;
   width: 4px; background: var(--cat-color);
}
.article-card:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,0.08); }
.article-card-link { display: block; color: inherit; }
.article-card-link:hover { text-decoration: none; }
.article-card .article-image {
   width: 100%;
   height: 180px;
   object-fit: cover;
   background: color-mix(in oklab, var(--color-text) 6%, transparent);
}
.article-card.level-primary .article-image { height: 280px; }
.article-card-body { padding: 16px 20px 20px 24px; }
.article-card-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.category-pill {
   display: inline-flex; align-items: center;
   padding: 3px 10px;
   border-radius: 999px;
   /* Brand-getintet: Kategorie-Farbe zu 12% über die Surface gemischt —
      entspricht exakt T6 (ArtikelRow.categoryBadge: color.opacity(0.12)). */
   background: color-mix(in srgb, var(--cat-color) 12%, var(--color-surface, #FFFFFF));
   color: var(--cat-color);
   font-size: 12px;
   font-weight: 700;
}
.level-pill {
   display: inline-flex; align-items: center;
   margin-left: auto;
   padding: 3px 10px;
   border-radius: 999px;
   /* Gefülltes Level-Pill — T6 ArtikelRow.levelChip: LevelColors.primary, weiße Schrift. */
   background: var(--color-level-primary, #3498DB);
   color: #FFFFFF;
   font-size: 12px;
   font-weight: 700;
}
.article-card-title {
   margin: 4px 0 8px;
   font-size: 18px;
   font-weight: 700;
   line-height: 1.3;
   letter-spacing: -0.2px;
}
.article-card.level-primary .article-card-title { font-size: 22px; }
.article-card-summary {
   margin: 0 0 12px;
   font-size: 14px;
   color: var(--color-text-secondary, #666666);
}
.article-card-sources {
   font-size: 12px;
   color: var(--color-text-secondary, #666666);
   padding-top: 10px;
   border-top: 1px solid color-mix(in oklab, var(--color-text) 8%, transparent);
}

.short-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.short-item {
   background: var(--color-surface, #FFFFFF);
   border-radius: 10px;
   border: 1px solid color-mix(in oklab, var(--color-text) 8%, transparent);
   padding: 12px 16px;
   position: relative;
}
.short-item::before {
   content: "";
   position: absolute; left: 0; top: 0; bottom: 0;
   width: 3px; background: var(--cat-color);
   border-radius: 10px 0 0 10px;
}
.short-item a { color: inherit; display: block; }
.short-item a:hover { text-decoration: none; }
.short-title { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.short-summary { margin: 0; font-size: 13px; color: var(--color-text-secondary, #666666); }

.breadcrumb {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 8px;
   margin: 16px 0 24px;
   font-size: 14px;
}
.breadcrumb a { color: var(--color-primary); font-weight: 500; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-sep { color: var(--color-text-secondary, #666666); }
.breadcrumb-current { color: var(--color-text-secondary, #666666); }

.article-detail .article {
   background: var(--color-surface, #FFFFFF);
   border-radius: 14px;
   padding: 20px 24px;
   position: relative;
}
.article-detail .article::before {
   content: "";
   position: absolute; left: 0; top: 0; bottom: 0;
   width: 4px; background: var(--cat-color);
   border-radius: 14px 0 0 14px;
}
.article-meta {
   display: flex; align-items: center; gap: 12px;
   margin-bottom: 14px;
   font-size: 13px; color: var(--color-text-secondary, #666666);
}
.original-title { font-style: italic; }
.article-title {
   font-size: 26px;
   line-height: 1.25;
   letter-spacing: -0.4px;
   margin: 4px 0 16px;
}
@media (min-width: 720px) { .article-title { font-size: 32px; } }
.article-image { width: 100%; height: 320px; object-fit: cover; border-radius: 10px; margin-bottom: 18px; }
.article-image-figure { margin: 0 0 18px; }
.article-image-figure .article-image,
.article-image-figure .article-inline-image { margin-bottom: 6px; }
.article-image-credit { font-size: 13px; color: var(--text-secondary, #667); font-style: italic; }
.article-inline-images { display: flex; flex-direction: column; gap: 16px; margin: 8px 0 24px; }
.article-inline-image { width: 100%; height: 280px; object-fit: cover; border-radius: 10px; }
.article-body { font-size: 17px; line-height: 1.7; }
.article-body p { margin: 0 0 1em; }
.article-body h3 {
   margin: 28px 0 12px;
   font-size: 16px;
   text-transform: uppercase;
   letter-spacing: 0.8px;
   color: var(--color-accent);
}
.article-sources { margin-top: 32px; padding-top: 20px; border-top: 1px solid color-mix(in oklab, var(--color-text) 10%, transparent); }
.article-sources h3 {
   font-size: 13px;
   text-transform: uppercase;
   letter-spacing: 0.8px;
   color: var(--color-text-secondary, #666666);
   margin: 0 0 12px;
}
.sources-list {
   list-style: none;
   padding: 0;
   margin: 0;
   display: grid;
   gap: 8px;
}
.sources-list a {
   display: block;
   padding: 10px 14px;
   background: color-mix(in oklab, var(--color-primary) 8%, transparent);
   border-radius: 8px;
   color: var(--color-primary);
   font-size: 14px;
   font-weight: 500;
}
.sources-list a:hover {
   background: color-mix(in oklab, var(--color-primary) 14%, transparent);
   text-decoration: none;
}

.site-footer {
   margin-top: 64px;
   padding: 24px 0;
   border-top: 1px solid color-mix(in oklab, var(--color-text) 10%, transparent);
   font-size: 12px;
   color: var(--color-text-secondary, #666666);
   text-align: center;
}

/* --- Einordnung als Chat-Thread (M-LDN-0012) -------------------------- */
/* Wo der Artikel-Body bisher als langer Fließtext lief, splittet die
   Pipeline jetzt am `**Einordnung**`-Marker und rendert den diskursiven
   Teil als Chat — Ulf links, Philip rechts, beide gemeinsam mittig mit
   Doppel-Avatar, externe Positionen in einem dezenten zentralen Stil.
   Spiegelt das SwiftUI-`EinordnungChatView` der App. */
.article-einordnung {
   margin-top: 32px;
   padding-top: 24px;
   border-top: 1px solid color-mix(in oklab, var(--color-text) 10%, transparent);
}
.article-einordnung-heading {
   font-size: 18px;
   text-transform: uppercase;
   letter-spacing: 0.8px;
   color: var(--color-accent);
   margin: 0 0 18px;
}
.chat-thread {
   display: flex;
   flex-direction: column;
   gap: 14px;
}
.chat-bubble {
   display: flex;
   align-items: flex-start;
   gap: 10px;
}
.chat-bubble[data-side="left"] {
   justify-content: flex-start;
}
.chat-bubble[data-side="right"] {
   justify-content: flex-end;
}
.chat-bubble-avatar {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   object-fit: cover;
   flex-shrink: 0;
   border: 1px solid color-mix(in oklab, var(--color-text) 12%, transparent);
   background: color-mix(in oklab, var(--color-text) 6%, transparent);
}
.chat-bubble-body {
   position: relative;
   max-width: 78%;
   padding: 10px 14px;
   border-radius: 14px;
   font-size: 16px;
   line-height: 1.55;
}
.chat-bubble-body p {
   margin: 0 0 0.6em;
}
.chat-bubble-body p:last-child {
   margin-bottom: 0;
}
/* Sprechblasen-Tail — kleines Dreieck am unteren Rand auf der Avatar-Seite.
   Wird über `::before` als CSS-Border-Triangle gerendert, weil das keine
   zusätzlichen DOM-Knoten oder SVG-Assets braucht. */
.chat-bubble[data-side="left"] .chat-bubble-body::before {
   content: "";
   position: absolute;
   left: -6px;
   bottom: 6px;
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 6px 8px 6px 0;
   border-color: transparent var(--bubble-fill, transparent) transparent transparent;
}
.chat-bubble[data-side="right"] .chat-bubble-body::before {
   content: "";
   position: absolute;
   right: -6px;
   bottom: 6px;
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 6px 0 6px 8px;
   border-color: transparent transparent transparent var(--bubble-fill, transparent);
}
/* Drei Bubble-Farben: Ulf (primary), Philip (accent), Both+Other
   (bubble-neutral). `--bubble-fill` ist die Pseudo-Element-Tail-Farbe und
   bleibt synchron mit dem Body-Background. */
.chat-bubble--ulf .chat-bubble-body {
   --bubble-fill: color-mix(in srgb, var(--color-primary, #2C3E50) 14%, var(--color-surface, #FFFFFF));
   background: var(--bubble-fill);
}
.chat-bubble--ulf[data-side="left"] .chat-bubble-body {
   border-bottom-left-radius: 4px;
}
.chat-bubble--ulf[data-side="right"] .chat-bubble-body {
   border-bottom-right-radius: 4px;
}
.chat-bubble--philip .chat-bubble-body {
   --bubble-fill: color-mix(in srgb, var(--color-accent, #E67E22) 16%, var(--color-surface, #FFFFFF));
   background: var(--bubble-fill);
}
.chat-bubble--philip[data-side="left"] .chat-bubble-body {
   border-bottom-left-radius: 4px;
}
.chat-bubble--philip[data-side="right"] .chat-bubble-body {
   border-bottom-right-radius: 4px;
}
.chat-bubble--both {
   justify-content: center;
   flex-direction: column;
   align-items: center;
   text-align: left;
}
.chat-bubble--both .chat-bubble-avatars {
   display: flex;
   margin-bottom: 6px;
}
.chat-bubble--both .chat-bubble-avatars .chat-bubble-avatar:first-child {
   margin-right: -10px;
   z-index: 1;
}
.chat-bubble--both .chat-bubble-body {
   --bubble-fill: color-mix(in srgb, var(--color-bubble-neutral, #5C8A75) 14%, var(--color-surface, #FFFFFF));
   background: var(--bubble-fill);
   max-width: 100%;
   border: 1px solid color-mix(in oklab, var(--color-bubble-neutral) 22%, transparent);
}
.chat-bubble--both .chat-bubble-body::before {
   /* Beide-Bubble ist zentriert — kein Tail. */
   display: none;
}
.chat-bubble--other {
   flex-direction: column;
   gap: 4px;
}
.chat-bubble--other[data-side="left"] {
   align-items: flex-start;
}
.chat-bubble--other[data-side="right"] {
   align-items: flex-end;
}
.chat-bubble--other .chat-bubble-name {
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.6px;
   color: var(--color-text-secondary, #666666);
   padding: 0 4px;
}
.chat-bubble--other .chat-bubble-body {
   --bubble-fill: color-mix(in srgb, var(--color-bubble-neutral, #5C8A75) 16%, var(--color-surface, #FFFFFF));
   background: var(--bubble-fill);
   max-width: 88%;
}
.chat-bubble--other[data-side="left"] .chat-bubble-body {
   border-bottom-left-radius: 4px;
}
.chat-bubble--other[data-side="right"] .chat-bubble-body {
   border-bottom-right-radius: 4px;
}
.chat-bubble--narrator {
   font-size: 16px;
   line-height: 1.6;
}
.chat-bubble--narrator p { margin: 0 0 0.6em; }