/* LageMagazin — statisches Basis-Styling. Brand-Werte stammen aus brand-tokens.css. */
*, *::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;
}
.wordmark a {
   font-size: 16px;
   font-weight: 800;
   letter-spacing: -0.2px;
   color: var(--color-primary);
}
.episode-meta {
   margin-top: 12px;
   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;
}
.episode-title {
   margin: 14px 0 12px;
   font-size: 28px;
   line-height: 1.2;
   letter-spacing: -0.5px;
}
@media (min-width: 720px) { .episode-title { font-size: 36px; } }
.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; }
}

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