/* ==========================================================================
   EastAutoNews CMS — Öffentliches Stylesheet (public.css)
   --------------------------------------------------------------------------
   Basis: Original-Design "Editorial Dark" (_design/index.html, article.html,
   listing.html), erweitert um alle CMS-Vorlagen (layout_public.php +
   cms/app/templates/*.php).

   KEINE Frameworks — reines Vanilla-CSS.
   Fonts:  Space Grotesk (Display/Titel) · Inter (UI/Fließtext)
           (beide werden im Layout via Google Fonts geladen)
   Breakpoints: 1200px / 900px / 600px
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design-Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Farben (Editorial Dark) */
  --bg: #0a0c10;
  --bg2: #10141b;
  --bg3: #161b24;
  --ink: #f4f6f8;
  --ink-soft: #dfe3e8;
  --dim: #98a1ab;
  --dim2: #6b7480;
  --accent: #4da3ff;
  --accent-deep: #3b82f6;
  --accent-dim: rgba(77, 163, 255, 0.14);
  --accent2: #7cf5c8;
  --accent2-dim: rgba(124, 245, 200, 0.14);
  --hot: #ff5a5a;
  --hot-soft: #ffb3b3;
  --hot-dim: rgba(255, 90, 90, 0.12);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);

  /* Radien */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;   /* Kartenradius (Original: --card-r) */
  --r-xl: 24px;
  --r-pill: 99px;

  /* Spacing-Skala */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 2.5rem;
  --s-8: 3.5rem;
  --s-9: 5.5rem;

  /* Layout */
  --wrap-max: 1200px;
  --nav-h: 64px;

  /* Typografie */
  --font-ui: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Space Grotesk', var(--font-ui);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & Basis
   -------------------------------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; }
[hidden] { display: none !important; }

::selection { background: rgba(77, 163, 255, 0.35); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Filmkorn-Overlay (Original-Design) */
.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Container */
.wrap { max-width: var(--wrap-max); margin: 0 auto; padding-left: var(--s-6); padding-right: var(--s-6); }

/* Trenner-Punkt (span.dot "·") */
.dot { color: var(--dim2); }

/* Dünner Text */
.dim { color: var(--dim); }

main#content { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.6rem;
  border-radius: var(--r-pill);
  font-size: 0.88rem;
  font-weight: 500;
  border: none;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.25s, background 0.25s;
  cursor: pointer;
}

.btn-primary {
  background: linear-gradient(92deg, var(--accent), var(--accent-deep));
  color: #fff;
  box-shadow: 0 8px 32px rgba(77, 163, 255, 0.35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(77, 163, 255, 0.5); }

.btn-ghost {
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { border-color: var(--accent); }

/* --------------------------------------------------------------------------
   4. Breaking-News-Bar (rot, pulsierend)
   -------------------------------------------------------------------------- */
.breaking-bar {
  position: relative;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.55rem var(--s-6);
  background: linear-gradient(90deg, #2a1214, #180d12 60%, #140c11);
  border-bottom: 1px solid rgba(255, 90, 90, 0.35);
  overflow: hidden;
}
.breaking-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 90, 90, 0.12), transparent);
  animation: breakingSweep 3s linear infinite;
  pointer-events: none;
}
@keyframes breakingSweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.breaking-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  color: #fff;
  background: var(--hot);
  padding: 0.25rem 0.7rem;
  border-radius: var(--r-pill);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  animation: breakingPulse 1.6s ease-in-out infinite;
}
@keyframes breakingPulse { 50% { opacity: 0.45; } }

.breaking-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #ffd9d9;
  font-size: 0.82rem;
}

.breaking-arrow { color: var(--hot-soft); flex-shrink: 0; }
.breaking-bar:hover .breaking-text { color: #fff; }
.breaking-bar.gone { display: none; }

/* --------------------------------------------------------------------------
   5. Navigation (Glassmorphism, sticky/fixed, Mobile-Burger)
   -------------------------------------------------------------------------- */
nav#topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: 1rem var(--s-6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(10, 12, 16, 0.6);
  border-bottom: 1px solid var(--line);
  transition: padding 0.3s, background 0.3s;
}
nav#topnav.scrolled {
  padding: 0.6rem var(--s-6);
  background: rgba(10, 12, 16, 0.85);
}

/* Kompensation für die fixe Navigation */
main#content { padding-top: var(--nav-h); }
body:has(.breaking-bar) main#content { padding-top: calc(var(--nav-h) + 40px); }

.logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.18rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  white-space: nowrap;
}
.logo b { color: var(--accent); }

.nav-links { display: flex; gap: 1.5rem; font-size: 0.8rem; color: var(--dim); margin-left: auto; }
.nav-links a { transition: color 0.25s; position: relative; padding: 0.25rem 0; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 2px;
}

.nav-actions { display: flex; align-items: center; gap: var(--s-4); }

/* Sprach-Switcher */
.langs { display: flex; gap: 0.4rem; }
.lang-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  color: var(--dim);
  border-radius: var(--r-pill);
  padding: 0.3rem 0.8rem;
  font-size: 0.72rem;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.lang-btn.on, .lang-btn:hover {
  color: #fff;
  border-color: var(--accent);
  background: var(--accent-dim);
}

/* Such-Button */
.search-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--dim);
  font-size: 1.05rem;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s;
}
.search-btn:hover { color: var(--ink); border-color: var(--accent); }

/* Burger (mobil) */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  padding: 10px;
}
.nav-burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s;
}
nav#topnav.open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav#topnav.open .nav-burger span:nth-child(2) { opacity: 0; }
nav#topnav.open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   6. Ticker (Marquee)
   -------------------------------------------------------------------------- */
.ticker {
  position: relative;
  z-index: 2;
  background: linear-gradient(90deg, #1a2332, #0e1520);
  border-bottom: 1px solid var(--line);
  padding: 0.45rem 0;
  overflow: hidden;
}
.ticker .track {
  display: flex;
  gap: 2.8rem;
  white-space: nowrap;
  width: max-content;
  animation: tickerScroll 40s linear infinite;
  padding-left: 1rem;
}
.ticker:hover .track { animation-play-state: paused; }
.ticker .item { font-size: 0.72rem; color: var(--dim); letter-spacing: 0.04em; }
.ticker .item b { color: var(--hot); margin-right: 0.5rem; font-size: 0.62rem; letter-spacing: 0.12em; }
@keyframes tickerScroll { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   7. Hero (100svh, Zoom-Animation)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: flex-end;
  padding: 0 var(--s-6) 4.5rem;
}
body:has(.breaking-bar) .hero { min-height: calc(100svh - var(--nav-h) - 40px); }

.hero-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  animation: heroZoom 18s ease-out forwards;
  filter: brightness(0.62) saturate(1.1);
}
@keyframes heroZoom { to { transform: scale(1); } }
.hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 12, 16, 0.35) 0%, rgba(10, 12, 16, 0.15) 40%, rgba(10, 12, 16, 0.92) 88%, var(--bg) 100%);
}

.hero-inner { max-width: var(--wrap-max); margin: 0 auto; width: 100%; }

.hero-kicker {
  display: inline-block;
  margin-bottom: 1.2rem;
  border: 1px solid rgba(255, 90, 90, 0.45);
  color: var(--hot-soft);
  background: var(--hot-dim);
  padding: 0.4rem 0.9rem;
  border-radius: var(--r-pill);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 7vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 600;
  max-width: 900px;
}
.hero h1 a { transition: opacity 0.25s; }
.hero h1 a:hover { opacity: 0.85; }

.hero-teaser {
  color: #c7cedb;
  max-width: 640px;
  margin: 1.6rem 0 2rem;
  font-size: 1.05rem;
  line-height: 1.75;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
}

.hero-meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  color: var(--dim);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}
.hero-meta .btn { margin-left: var(--s-2); }

/* --------------------------------------------------------------------------
   8. Sektionen & Überschriften
   -------------------------------------------------------------------------- */
.section { padding-top: var(--s-9); padding-bottom: var(--s-5); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}
.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  letter-spacing: -0.02em;
  font-weight: 600;
}
.section-head .see-all {
  color: var(--dim);
  font-size: 0.8rem;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: color 0.25s, border-color 0.25s;
}
.section-head .see-all:hover { color: var(--ink); border-color: var(--accent); }

.section-more { margin-top: var(--s-6); text-align: center; }

/* Kategorie-Filter-Badges (Sektionen) */
.filters { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.filter-badge {
  display: inline-block;
  border: 1px solid var(--line);
  color: var(--dim);
  background: rgba(255, 255, 255, 0.04);
  padding: 0.35rem 0.9rem;
  border-radius: var(--r-pill);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.filter-badge:hover { color: var(--ink); border-color: var(--accent); }
.filter-badge.on {
  color: #fff;
  border-color: var(--accent);
  background: var(--accent-dim);
}
.filter-badge.clear { color: var(--hot-soft); border-color: rgba(255, 90, 90, 0.4); }

/* --------------------------------------------------------------------------
   9. Feature-Grid (Top-Story + Side-Cards)
   -------------------------------------------------------------------------- */
.feature-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 1.2rem;
  padding-top: var(--s-5);
}

/* Große Top-Story-Karte (Original .f-main) */
.f-main, .side-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg2);
}

.side-card { display: flex; gap: var(--s-4); align-items: stretch; min-height: 150px; }
.side-img { position: relative; flex: 0 0 38%; overflow: hidden; }
.side-img img, .side-card > div img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
  filter: brightness(0.75);
}
.side-card:hover .side-img img { transform: scale(1.06); }

.side-card > div { display: flex; flex-direction: column; justify-content: center; padding: var(--s-4) var(--s-4) var(--s-4) 0; min-width: 0; }
.side-card h3 { font-family: var(--font-display); font-size: 1.02rem; letter-spacing: -0.01em; line-height: 1.3; margin-top: 0.45rem; }
.side-card h3 a { transition: color 0.25s; }
.side-card h3 a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   10. Artikel-Karten & Grid (Listing)
   -------------------------------------------------------------------------- */
.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1.2rem;
}
.grid-cell { min-width: 0; }

.card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg2);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: border-color 0.3s, transform 0.3s var(--ease);
}
.card:hover { border-color: var(--line-strong); transform: translateY(-3px); }

.card-img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
  filter: brightness(0.7) saturate(1.05);
}
.card:hover .card-img img { transform: scale(1.05); }
.card-img::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(16, 20, 27, 0.9));
}

.card-body { display: flex; flex-direction: column; flex: 1; padding: var(--s-5); }

.card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.card-meta .cat { color: var(--accent2); transition: color 0.25s; }
.card-meta .cat:hover { color: var(--ink); }
.card-meta .ago, .card-meta .dot { color: var(--dim2); }

.card h3 { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 0.5rem; }
.card h3 a { transition: color 0.25s; }
.card h3 a:hover { color: var(--accent); }
.card p { color: var(--dim); font-size: 0.8rem; line-height: 1.55; flex: 1; }

/* Tags (Breaking / Sponsored / Artikel-Tags) */
.tag {
  display: inline-block;
  background: var(--accent2-dim);
  color: var(--accent2);
  border: 1px solid rgba(124, 245, 200, 0.35);
  padding: 0.22rem 0.7rem;
  border-radius: var(--r-pill);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tag-hot { background: var(--hot-dim); color: var(--hot-soft); border-color: rgba(255, 90, 90, 0.4); }
.tag-sponsored { background: rgba(255, 200, 87, 0.1); color: #ffc857; border-color: rgba(255, 200, 87, 0.35); }

/* --------------------------------------------------------------------------
   11. Kategorie-Karten (Hub-Grid, Hover-Arrow)
   -------------------------------------------------------------------------- */
.cat-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16 / 10.5;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--bg2);
  display: block;
}
.cat-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease), filter 0.5s;
  filter: brightness(0.55) saturate(1.05);
}
.cat-card:hover img { transform: scale(1.07); filter: brightness(0.7) saturate(1.15); }
.cat-card .shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 12, 16, 0.1) 20%, rgba(5, 7, 10, 0.92));
}
.cat-card .body {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--s-6);
  z-index: 1;
}
.cat-num { font-family: var(--font-display); color: var(--accent); font-size: 0.68rem; letter-spacing: 0.24em; margin-bottom: 0.5rem; }
.cat-card h3 { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -0.01em; margin-bottom: 0.35rem; }
.cat-card p { color: var(--dim); font-size: 0.78rem; line-height: 1.5; }
.cat-card .arrow {
  position: absolute; top: var(--s-5); right: var(--s-5);
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  transition: opacity 0.3s, transform 0.3s var(--ease), background 0.3s, border-color 0.3s;
  opacity: 0;
  transform: translateY(-6px);
}
.cat-card:hover .arrow { opacity: 1; transform: none; background: var(--accent); border-color: var(--accent); }

/* --------------------------------------------------------------------------
   12. Country-Strip, Country-Hubs, Flags
   -------------------------------------------------------------------------- */
.country-strip { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.country-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  padding: 0.5rem 1rem;
  border-radius: var(--r-pill);
  font-size: 0.82rem;
  color: var(--dim);
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.country-chip:hover { color: var(--ink); border-color: var(--accent); background: var(--accent-dim); }

.flag {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 26px; height: 18px;
  padding: 0 4px;
  border-radius: 3px;
  background: var(--bg3);
  border: 1px solid var(--line-strong);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--dim);
}

.country-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.2rem; }
.country-card {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  border: 1px solid var(--line);
  background: var(--bg2);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  transition: border-color 0.3s, transform 0.3s var(--ease), background 0.3s;
}
.country-card:hover { border-color: var(--accent); background: var(--bg3); transform: translateY(-3px); }
.flag-lg {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 38px;
  border-radius: var(--r-sm);
  background: var(--bg3);
  border: 1px solid var(--line-strong);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.country-card h3 { font-family: var(--font-display); font-size: 1rem; margin-bottom: 0.2rem; }
.country-card .region { color: var(--dim2); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   13. Brand-Chips & Brands-Band
   -------------------------------------------------------------------------- */
.brand-chips { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.brand-chip {
  display: inline-block;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--dim);
  padding: 0.5rem 1.1rem;
  border-radius: var(--r-pill);
  font-size: 0.82rem;
  font-weight: 500;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.brand-chip:hover { color: var(--ink); border-color: var(--accent); background: var(--accent-dim); }

.brands-band {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(120deg, rgba(77, 163, 255, 0.05), rgba(124, 245, 200, 0.03));
  padding: var(--s-6);
}
.brands-band h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  margin-bottom: var(--s-4);
}

/* --------------------------------------------------------------------------
   14. Most-Read-Liste
   -------------------------------------------------------------------------- */
.most-read { list-style: none; counter-reset: mr; }
.most-read li {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
}
.most-read li:first-child { padding-top: 0; }
.mr-num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  min-width: 2.2rem;
  background: linear-gradient(92deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.most-read a { flex: 1; font-size: 0.95rem; transition: color 0.25s; }
.most-read a:hover { color: var(--accent); }
.mr-meta { color: var(--dim2); font-size: 0.72rem; letter-spacing: 0.06em; white-space: nowrap; }

/* --------------------------------------------------------------------------
   15. Video-Sektion (16:9, Play-Overlay)
   -------------------------------------------------------------------------- */
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.2rem; }

.video-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg2);
  transition: border-color 0.3s, transform 0.3s var(--ease);
}
.video-card:hover { border-color: var(--line-strong); transform: translateY(-3px); }

.video-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #05070a; }
.video-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
  filter: brightness(0.6);
}
.video-card:hover .video-thumb img { transform: scale(1.05); }
.video-thumb .play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  color: #fff;
  background: rgba(5, 7, 10, 0.25);
  transition: background 0.3s;
}
.video-thumb::after {
  content: "▶";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  font-size: 1rem;
  color: #fff;
  transition: transform 0.3s var(--ease), background 0.3s, border-color 0.3s;
  z-index: 1;
}
.video-card:hover .video-thumb::after { transform: translate(-50%, -50%) scale(1.1); background: var(--accent); border-color: var(--accent); }

.video-card h3 { font-family: var(--font-display); font-size: 1rem; line-height: 1.35; padding: var(--s-4) var(--s-4) var(--s-2); }
.video-meta { display: flex; flex-direction: column; gap: 0.3rem; padding: 0 var(--s-4) var(--s-4); }
.video-meta .cat { color: var(--accent2); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; }
.video-meta h3 { font-family: var(--font-display); font-size: 1rem; line-height: 1.35; padding: 0; }
.video-meta .ago { color: var(--dim2); font-size: 0.7rem; letter-spacing: 0.06em; }

/* Video-Detail-Frame (16:9, für iframe/video) */
.video-frame {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 9;
  background: #05070a;
  margin-bottom: var(--s-6);
}
.video-frame iframe, .video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --------------------------------------------------------------------------
   16. Stats-Band (Original-Design)
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.stat { background: var(--bg); padding: 2.2rem 1.5rem; text-align: center; transition: background 0.35s; }
.stat:hover { background: var(--bg2); }
.stat .n {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  background: linear-gradient(92deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat .l { color: var(--dim); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; margin-top: 0.5rem; }

/* --------------------------------------------------------------------------
   17. Newsletter (Gradient-CTA)
   -------------------------------------------------------------------------- */
.newsletter-band { padding: var(--s-9) 0; }

.newsletter-box, .nl-hero {
  position: relative;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: radial-gradient(120% 140% at 50% 0%, #131b2a 0%, var(--bg2) 60%);
  padding: var(--s-9) var(--s-7);
  text-align: center;
  overflow: hidden;
}
.newsletter-box::before, .nl-hero::before {
  content: "";
  position: absolute; inset: -40%;
  background: radial-gradient(60% 60% at 50% 30%, rgba(77, 163, 255, 0.14), transparent 70%);
  pointer-events: none;
}
.newsletter-box h2, .nl-hero h1, .nl-hero h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  letter-spacing: -0.02em;
  margin-bottom: 0.8rem;
  position: relative;
}
.newsletter-box p, .nl-hero p { color: var(--dim); max-width: 520px; margin: 0 auto var(--s-6); font-size: 0.92rem; line-height: 1.6; }

.nl-form {
  display: flex;
  gap: 0.7rem;
  max-width: 440px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.nl-form input {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 0.9rem 1.3rem;
  color: var(--ink);
  font-size: 0.88rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.3s;
}
.nl-form input::placeholder { color: var(--dim2); }
.nl-form input:focus { border-color: var(--accent); }
.nl-big { max-width: 520px; }

.nl-hint { color: var(--dim2); font-size: 0.74rem; margin-top: var(--s-4); letter-spacing: 0.03em; }
.nl-hint.ok { color: var(--accent2); }
.nl-hint.err { color: var(--hot-soft); }

/* Inline-Newsletter (Artikel-Seite) */
.newsletter-inline {
  margin-top: var(--s-8);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg2);
  padding: var(--s-6);
  text-align: center;
}
.newsletter-inline h3 { font-family: var(--font-display); font-size: 1.2rem; margin-bottom: var(--s-4); }

/* Newsletter-Landing */
.nl-page { min-height: 60vh; display: flex; align-items: center; }
.nl-hero { max-width: 720px; margin: 0 auto; width: 100%; }

/* --------------------------------------------------------------------------
   18. Footer (4 Spalten)
   -------------------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); background: var(--bg2); margin-top: var(--s-9); }

.footer-grid {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: var(--s-8) var(--s-6) var(--s-7);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--s-7);
}
.footer-brand .logo { font-size: 1.05rem; }
.footer-brand p { color: var(--dim); font-size: 0.82rem; line-height: 1.7; max-width: 300px; margin-top: var(--s-4); }
.footer-social { display: flex; gap: var(--s-4); margin-top: var(--s-4); }
.footer-social a { color: var(--dim2); font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.25s; }
.footer-social a:hover { color: var(--accent); }

.footer-col h4 {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--s-4);
}
.footer-col a { display: block; color: var(--dim); font-size: 0.82rem; padding: 0.28rem 0; transition: color 0.2s; }
.footer-col a:hover { color: var(--accent); }

.footer-bottom {
  border-top: 1px solid var(--line);
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 1.4rem var(--s-6);
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  color: var(--dim2);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}
.footer-bottom a { color: var(--accent); }

/* --------------------------------------------------------------------------
   19. Artikel-Seite (Typografie, Hero-Bild, Meta)
   -------------------------------------------------------------------------- */
.article-page { max-width: 860px; padding-top: var(--s-8); }

/* Breadcrumbs */
.crumbs { color: var(--dim); font-size: 0.75rem; padding-bottom: var(--s-2); letter-spacing: 0.04em; }
.crumbs a { color: var(--dim); transition: color 0.25s; }
.crumbs a:hover { color: var(--ink); }
.crumbs span { margin: 0 0.5rem; color: var(--dim2); }

/* Breaking-/Sponsored-Tag über der Headline */
.breaking-tag, .sponsored-tag {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  border-radius: var(--r-pill);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin-bottom: var(--s-4);
}
.breaking-tag {
  color: #fff;
  background: var(--hot);
  animation: breakingPulse 1.6s ease-in-out infinite;
}
.sponsored-tag {
  color: #ffc857;
  border: 1px solid rgba(255, 200, 87, 0.4);
  background: rgba(255, 200, 87, 0.08);
}

.article-h1 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin-bottom: var(--s-4);
}

.article-teaser { color: #c7cedb; font-size: 1.08rem; line-height: 1.7; margin-bottom: var(--s-5); }

.article-meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  color: var(--dim);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-6);
}
.article-meta a { color: var(--dim); transition: color 0.25s; }
.article-meta a:hover { color: var(--accent); }

/* Hero-Bild */
.article-hero { margin-bottom: var(--s-7); }
.article-hero img { width: 100%; border-radius: var(--r-lg); }

/* Artikel-Typografie (.content) */
.content p { margin-bottom: 1.35rem; color: var(--ink-soft); font-size: 1rem; line-height: 1.8; }
.content h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  margin: 2.4rem 0 var(--s-4);
}
.content h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin: var(--s-7) 0 var(--s-3);
}
.content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.content ul, .content ol { margin: 0 0 1.35rem 1.4rem; color: var(--ink-soft); }
.content li { margin-bottom: 0.5rem; line-height: 1.7; }
.content blockquote {
  border-left: 3px solid var(--accent);
  padding: var(--s-3) 0 var(--s-3) var(--s-5);
  margin: 0 0 1.35rem;
  color: #c7cedb;
  font-style: italic;
}
.content img { border-radius: var(--r-md); margin: var(--s-5) 0; }
.content figure figcaption, .content .figcaption { color: var(--dim2); font-size: 0.76rem; margin-top: 0.6rem; letter-spacing: 0.04em; }
.content table { width: 100%; border-collapse: collapse; margin: 0 0 1.35rem; font-size: 0.9rem; }
.content th, .content td { border: 1px solid var(--line); padding: 0.6rem 0.9rem; text-align: left; }
.content th { background: var(--bg2); font-family: var(--font-display); font-size: 0.82rem; letter-spacing: 0.04em; }

/* Statische Seiten nutzen dieselbe Typografie */
.static-page h1 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.5vw, 2.8rem);
  letter-spacing: -0.02em;
  margin-bottom: var(--s-5);
}
.static-page h2 { font-family: var(--font-display); font-size: 1.5rem; margin: var(--s-7) 0 var(--s-4); letter-spacing: -0.01em; }
.static-page h3 { font-family: var(--font-display); font-size: 1.2rem; margin: var(--s-6) 0 var(--s-3); }
.static-page p { margin-bottom: 1.35rem; color: var(--ink-soft); line-height: 1.8; }
.static-page ul, .static-page ol { margin: 0 0 1.35rem 1.4rem; color: var(--ink-soft); }
.static-page li { margin-bottom: 0.5rem; }

/* Artikel-Tags */
.article-tags { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: var(--s-7); }
.article-tags .tag { text-transform: none; letter-spacing: 0.02em; font-size: 0.74rem; transition: border-color 0.25s, color 0.25s; }
.article-tags .tag:hover { border-color: var(--accent); color: var(--accent); }

/* Quellen-Box */
.sources-box {
  margin-top: var(--s-7);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg2);
  padding: var(--s-5) var(--s-6);
}
.sources-box h3 {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: var(--s-4);
}
.sources-box ul { list-style: none; }
.sources-box li { padding: 0.55rem 0; border-top: 1px solid var(--line); font-size: 0.86rem; }
.sources-box li:first-child { border-top: none; }
.sources-box a { color: var(--accent); transition: opacity 0.25s; }
.sources-box a:hover { opacity: 0.8; }
.src-date, .src-conf { color: var(--dim2); font-size: 0.76rem; }

/* Share-Buttons */
.share-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: 0.8rem;
}
.share-btn {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s, transform 0.25s var(--ease);
}
.share-btn:hover { border-color: var(--accent); background: var(--accent-dim); transform: translateY(-2px); }

/* Verwandte Artikel */
.related { margin-top: var(--s-9); }
.related h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.02em;
  margin-bottom: var(--s-6);
}

/* --------------------------------------------------------------------------
   20. Ad-Slot (.ean-ad, gestrichelt animiert) & WT24-Marketplace-Box
   -------------------------------------------------------------------------- */
.ean-ad {
  margin-top: var(--s-8);
  border: 1px dashed rgba(255, 255, 255, 0.22);
  border-radius: var(--r-md);
  padding: var(--s-6);
  text-align: center;
  background: linear-gradient(120deg, rgba(77, 163, 255, 0.06), rgba(124, 245, 200, 0.04));
  animation: adDash 30s linear infinite;
}
@keyframes adDash { to { background-position: 200% 0; } }

.ean-ad .t { font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim); margin-bottom: 0.5rem; }
.ean-ad .c { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); }
.ean-ad .s { color: var(--accent); font-size: 0.82rem; margin-top: 0.5rem; display: inline-block; transition: opacity 0.25s; }
.ean-ad .s:hover { opacity: 0.75; }

.wt24box {
  margin-top: var(--s-8);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-7);
  background: radial-gradient(120% 140% at 0% 0%, #131b2a 0%, var(--bg2) 60%);
}
.wt24box .k { color: var(--accent); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 0.6rem; }
.wt24box h3 { font-family: var(--font-display); font-size: 1.15rem; margin-bottom: 0.5rem; }
.wt24box p { color: var(--dim); font-size: 0.86rem; margin-bottom: var(--s-4); }

/* --------------------------------------------------------------------------
   21. Key-Facts-Box (Entity-Hubs) & Entity-Listen
   -------------------------------------------------------------------------- */
.key-facts { padding-top: var(--s-7); }
.key-facts h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  margin-bottom: var(--s-5);
}
.facts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.fact { background: var(--bg2); padding: var(--s-5); display: flex; flex-direction: column; gap: 0.4rem; }
.fact-k { color: var(--dim2); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; }
.fact-v { font-family: var(--font-display); font-size: 1.05rem; }

.entity-list { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: var(--s-7); }
.entity-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg2);
  padding: var(--s-4) var(--s-5);
}
.entity-row b { font-family: var(--font-display); font-size: 0.95rem; white-space: nowrap; }
.entity-row span { color: var(--dim); font-size: 0.82rem; text-align: right; }

/* --------------------------------------------------------------------------
   22. Autor-Seite
   -------------------------------------------------------------------------- */
.author-hero { display: flex; align-items: center; gap: var(--s-6); margin-bottom: var(--s-7); }
.author-avatar {
  flex-shrink: 0;
  width: 84px; height: 84px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: #0a0c10;
}
.author-hero h1 { font-family: var(--font-display); font-size: clamp(1.6rem, 3.5vw, 2.2rem); letter-spacing: -0.02em; }
.author-role { color: var(--accent); font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 0.3rem; }
.author-bio { color: var(--dim); font-size: 0.9rem; line-height: 1.7; margin-top: 0.8rem; max-width: 560px; }

/* --------------------------------------------------------------------------
   23. Intelligence / Data-Series
   -------------------------------------------------------------------------- */
.series-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.2rem; }
.series-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg2);
  padding: var(--s-6);
  transition: border-color 0.3s, transform 0.3s var(--ease);
}
.series-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.series-card h3 { font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 0.5rem; }
.series-card p { font-size: 0.84rem; line-height: 1.6; margin-bottom: var(--s-4); }
.series-meta { display: flex; justify-content: space-between; gap: var(--s-3); border-top: 1px solid var(--line); padding-top: var(--s-3); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim2); }
.series-meta .unit { color: var(--accent2); }

/* --------------------------------------------------------------------------
   24. Category-/Country-/Brand-Hero (Hub-Seiten)
   -------------------------------------------------------------------------- */
.cat-hero {
  position: relative;
  padding: calc(var(--s-9) + var(--nav-h)) 0 var(--s-8);
  background:
    radial-gradient(80% 120% at 50% -20%, rgba(77, 163, 255, 0.12), transparent 60%),
    linear-gradient(180deg, var(--bg3), var(--bg));
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.cat-hero-bg { position: absolute; inset: 0; z-index: -1; }
.cat-hero-bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.3) saturate(1.1); }
.cat-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 12, 16, 0.5), var(--bg)); }

.cat-hero-inner { max-width: var(--wrap-max); margin: 0 auto; padding: 0 var(--s-6); position: relative; }
.cat-label {
  display: inline-block;
  color: var(--accent);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: var(--s-3);
}
.cat-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.4rem);
  letter-spacing: -0.025em;
  line-height: 1.08;
  max-width: 800px;
  margin-bottom: var(--s-4);
}
.cat-hero p { color: #c7cedb; max-width: 640px; font-size: 1rem; line-height: 1.7; margin-bottom: var(--s-5); }

/* Filter-Leiste (Kategorie-Seiten) */
.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-6);
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.02);
}
.filter-label { color: var(--dim2); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; margin-right: 0.3rem; }
.sort { display: flex; gap: 0.5rem; }

/* --------------------------------------------------------------------------
   25. Search-Page & Search-Overlay
   -------------------------------------------------------------------------- */
.search-hero { text-align: center; padding: var(--s-7) 0 var(--s-8); }
.search-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: -0.025em;
  margin-bottom: var(--s-6);
}
.search-page-form {
  display: flex;
  gap: 0.7rem;
  max-width: 640px;
  margin: 0 auto var(--s-5);
}
.search-page-form input {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 1rem 1.5rem;
  color: var(--ink);
  font-size: 1rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.3s;
}
.search-page-form input:focus { border-color: var(--accent); }
.search-hint { color: var(--dim2); font-size: 0.8rem; letter-spacing: 0.04em; }

.search-suggestions { text-align: center; padding: var(--s-5) 0; }
.search-suggestions h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin-bottom: var(--s-4);
}
.search-suggestions .brand-chips { justify-content: center; }

/* Search-Overlay (Ctrl+K / Button) */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 18vh var(--s-6) 0;
  background: rgba(5, 7, 10, 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity 0.25s;
}
.search-overlay.open { opacity: 1; }

.search-box {
  width: 100%;
  max-width: 640px;
  display: flex;
  gap: 0.7rem;
  background: var(--bg3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  padding: 0.5rem 0.5rem 0.5rem 1.4rem;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  transform: translateY(-12px);
  transition: transform 0.25s var(--ease);
}
.search-overlay.open .search-box { transform: none; }
.search-box input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--ink);
  font-size: 1.05rem;
  font-family: inherit;
  padding: 0.8rem 0;
}
.search-box input::placeholder { color: var(--dim2); }
.search-box button {
  background: linear-gradient(92deg, var(--accent), var(--accent-deep));
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  padding: 0.8rem 1.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   26. Empty-State, Fehlerseite
   -------------------------------------------------------------------------- */
.empty-state { text-align: center; padding: var(--s-9) var(--s-6); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); }
.empty-state p { color: var(--dim); margin-bottom: var(--s-3); }
.empty-state .dim { font-size: 0.84rem; }

.error-page { text-align: center; padding-top: 12vh; min-height: 60vh; }
.err-code {
  font-family: var(--font-display);
  font-size: clamp(5rem, 16vw, 9rem);
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(92deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: var(--s-4);
}
.error-page h1 { font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.4rem); letter-spacing: -0.02em; margin-bottom: var(--s-3); }
.error-page .dim { margin-bottom: var(--s-7); }
.err-actions { display: flex; gap: var(--s-4); justify-content: center; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   27. Pagination
   -------------------------------------------------------------------------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: var(--s-8);
  flex-wrap: wrap;
}
.pg {
  min-width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--dim);
  font-size: 0.85rem;
  font-family: var(--font-display);
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.pg:hover { color: var(--ink); border-color: var(--accent); }
.pg.on { color: #fff; border-color: var(--accent); background: var(--accent-dim); }

/* --------------------------------------------------------------------------
   28. Reading-Progress-Bar (oben, über allem)
   -------------------------------------------------------------------------- */
.progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  z-index: 300;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   29. Scroll-Reveals
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.95s var(--ease), transform 0.95s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

/* Lazy-Loading-Bilder: sanftes Einblenden */
img[data-src] { opacity: 0; transition: opacity 0.6s ease; }
img[data-src].loaded { opacity: 1; }

/* --------------------------------------------------------------------------
   30. Responsive — 1200px
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .feature-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { gap: var(--s-6); }
  .nav-links { gap: 1.1rem; }
}

/* --------------------------------------------------------------------------
   31. Responsive — 900px
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  :root { --nav-h: 58px; }

  nav#topnav { padding: 0.8rem var(--s-5); }
  nav#topnav.scrolled { padding: 0.55rem var(--s-5); }

  /* Mobile-Navigation: Burger + Overlay-Menü */
  .nav-burger { display: flex; }
  .nav-links {
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    bottom: 0;
    margin-left: 0;
    flex-direction: column;
    gap: 0;
    padding: var(--s-6) var(--s-5);
    background: rgba(10, 12, 16, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--line);
    font-size: 1rem;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, transform 0.3s var(--ease), visibility 0.3s;
  }
  nav#topnav.open .nav-links { opacity: 1; visibility: visible; transform: none; }
  .nav-links a { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
  .nav-links a.active::after { display: none; }

  .wrap { padding-left: var(--s-5); padding-right: var(--s-5); }
  .hero { padding: 0 var(--s-5) var(--s-8); }
  .cat-hero-inner, .footer-grid, .footer-bottom { padding-left: var(--s-5); padding-right: var(--s-5); }

  .section-head { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .filter-bar { flex-direction: column; align-items: flex-start; }
  .entity-row { flex-direction: column; gap: 0.4rem; }
  .entity-row span { text-align: left; }
  .author-hero { flex-direction: column; align-items: flex-start; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .breaking-text { font-size: 0.76rem; }
}

/* --------------------------------------------------------------------------
   32. Responsive — 600px
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  :root { --nav-h: 54px; }

  nav#topnav { padding: 0.7rem var(--s-4); gap: var(--s-3); }
  .logo { font-size: 1rem; }
  .langs { display: none; } /* Spracherkennung über das Menü bzw. ?lang= */

  .wrap, .hero, .cat-hero-inner, .footer-grid, .footer-bottom { padding-left: var(--s-4); padding-right: var(--s-4); }

  .hero { min-height: calc(100svh - var(--nav-h) - 80px); padding-bottom: var(--s-7); }
  .hero h1 { font-size: 2.5rem; }
  .hero-meta { gap: var(--s-2); }
  .hero-meta .btn { width: 100%; justify-content: center; }

  .side-card { flex-direction: column; }
  .side-img { flex-basis: auto; aspect-ratio: 16 / 9; }
  .side-card > div { padding: var(--s-4); }

  .article-grid, .video-grid, .series-grid, .country-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding: var(--s-5) var(--s-3); }
  .stat .n { font-size: 1.8rem; }

  .newsletter-box, .nl-hero { padding: var(--s-7) var(--s-4); }
  .nl-form { flex-direction: column; }
  .nl-form input { width: 100%; }
  .nl-form .btn { justify-content: center; }

  .search-page-form { flex-direction: column; }
  .search-box { padding-left: var(--s-5); }
  .search-overlay { padding-top: 10vh; }

  .footer-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; }

  .card-body { padding: var(--s-4); }
  .most-read li { flex-wrap: wrap; gap: var(--s-2); }
  .mr-meta { width: 100%; }
  .wt24box, .sources-box { padding: var(--s-5); }
  .breaking-bar { padding: 0.5rem var(--s-4); }
}

/* --------------------------------------------------------------------------
   33. Barrierefreiheit: reduzierte Bewegung
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero-bg img { transform: none; animation: none; }
  .ticker .track { animation: none; }
  .reveal { opacity: 1; transform: none; }
  img[data-src] { opacity: 1; }
  .breaking-bar::before, .breaking-label, .breaking-tag { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   STARTSEITE v2 — Modernes News-Portal-Layout (25.10.2026)
   Hero-Grid, Latest-Strip, Six-Desks-Karten, Two-Column-Sektionen
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hero v2: Big Story + 2 Secondary ── */
.hero-v2{position:relative;padding:8.5rem 0 3rem;min-height:88svh;display:flex;align-items:flex-end;overflow:hidden}
.hero-v2 .hero-fade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,16,.55) 0%,rgba(10,12,16,.18) 35%,rgba(10,12,16,.94) 92%,var(--bg) 100%),radial-gradient(90% 70% at 80% 10%,rgba(77,163,255,.14),transparent 60%)}
.hero-grid{display:grid;grid-template-columns:1.9fr 1fr;gap:2.2rem;align-items:end;position:relative;z-index:2}
.hero-main h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.9rem,4.8vw,3.4rem);line-height:1.06;letter-spacing:-.025em;margin:.9rem 0 1rem;max-width:21ch}
.hero-main h1 a{background:linear-gradient(180deg,#fff 55%,rgba(244,246,248,.82));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;transition:opacity .25s}
.hero-main h1 a:hover{opacity:.82}
.hero-main .hero-teaser{color:var(--dim);font-size:1.02rem;max-width:58ch;margin-bottom:1.2rem}
.hero-meta{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;color:var(--dim2);font-size:.78rem;letter-spacing:.05em;text-transform:uppercase}
.hero-meta .who{color:var(--accent2)}
.cat-tag{display:inline-flex;align-items:center;padding:.32rem .8rem;border-radius:99px;background:rgba(77,163,255,.16);border:1px solid rgba(77,163,255,.4);color:var(--accent);font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.live-dot{display:inline-flex;align-items:center;gap:.4rem;color:#ffb3b3;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}
.live-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--hot);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,90,90,.5)}50%{box-shadow:0 0 0 7px rgba(255,90,90,0)}}
.hero-side{display:flex;flex-direction:column;gap:1rem}
.side-v2{display:grid;grid-template-columns:112px 1fr;gap:1rem;align-items:center;background:rgba(16,20,27,.72);border:1px solid var(--line);border-radius:16px;padding:.9rem;backdrop-filter:blur(10px);transition:border-color .25s,transform .25s}
.side-v2:hover{border-color:rgba(77,163,255,.45);transform:translateY(-2px)}
.side-v2 .side-img{border-radius:10px;overflow:hidden;aspect-ratio:4/3}
.side-v2 h3{font-family:'Space Grotesk',sans-serif;font-size:.95rem;line-height:1.3;letter-spacing:-.01em}
.side-v2 .card-meta{margin-bottom:.35rem}

/* ── Latest-Strip (Newsticker-Zeile mit Uhrzeiten) ── */
.latest-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg2);position:relative;z-index:3}
.strip-scroll{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.strip-scroll::-webkit-scrollbar{display:none}
.strip-item{display:flex;align-items:baseline;gap:.55rem;padding:.85rem 1.1rem;border-right:1px solid var(--line);white-space:nowrap;color:var(--dim);font-size:.83rem;transition:background .2s,color .2s}
.strip-item:hover{background:rgba(77,163,255,.07);color:var(--ink)}
.strip-time{font-family:'Space Grotesk',sans-serif;color:var(--accent);font-weight:600;font-size:.78rem}
.strip-cat{color:var(--accent2);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase}
.strip-text{overflow:hidden;text-overflow:ellipsis}

/* ── Six Desks (Kategorie-Karten) ── */
.desks-section{padding-top:2.6rem}
.kicker-h{font-family:'Space Grotesk',sans-serif;font-size:.95rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);display:flex;align-items:center;gap:.7rem;margin:0}
.kicker-h::before{content:"";width:22px;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:2px}
.section-sub{color:var(--dim2);font-size:.8rem}
.desk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:1.6rem}
.desk-card{position:relative;border-radius:18px;overflow:hidden;min-height:210px;display:flex;align-items:flex-end;border:1px solid var(--line);transition:border-color .3s,transform .3s;isolation:isolate}
.desk-card:hover{border-color:rgba(77,163,255,.5);transform:translateY(-3px)}
.desk-img{position:absolute;inset:0;z-index:-2}
.desk-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.desk-card:hover .desk-img img{transform:scale(1.06)}
.desk-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,16,.15) 0%,rgba(10,12,16,.55) 55%,rgba(10,12,16,.96) 100%)}
.desk-body{padding:1.2rem 1.3rem 1.3rem;display:flex;flex-direction:column;gap:.45rem;width:100%}
.desk-name{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.02rem;color:var(--ink);display:flex;justify-content:space-between;align-items:center;letter-spacing:.01em}
.desk-arrow{color:var(--accent);transition:transform .25s}
.desk-card:hover .desk-arrow{transform:translateX(4px)}
.desk-head{color:var(--dim);font-size:.82rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.desk-empty{font-style:italic;color:var(--dim2)}

/* ── Two-Column (Editors' Picks + Most Read) ── */
.two-col-section{display:grid;grid-template-columns:2fr 1fr;gap:2.4rem;align-items:start}
.col-side{border-left:1px solid var(--line);padding-left:2rem}
.two-col-section .article-grid{grid-template-columns:repeat(2,1fr);margin-top:1.4rem}
.two-col-section .most-read{margin-top:1.4rem}

/* ── Responsive ── */
@media (max-width:1200px){
  .desk-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-side{flex-direction:row}
  .side-v2{flex:1;min-width:0}
  .two-col-section{grid-template-columns:1fr}
  .col-side{border-left:0;padding-left:0}
}
@media (max-width:600px){
  .hero-v2{min-height:74svh;padding:6.5rem 0 2rem}
  .hero-side{flex-direction:column}
  .side-v2{grid-template-columns:88px 1fr}
  .desk-grid{grid-template-columns:1fr}
  .strip-cat{display:none}
  .two-col-section .article-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .desk-card,.desk-img img,.side-v2,.hero-main h1 a{transition:none!important;animation:none!important}
}

/* ═══════════════════════════════════════════════════════════════════
   HERO v3 — Background-Video + News-Galerie (Auto-Scroll) 25.10.2026
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hero mit Video-Hintergrund ── */
.hero-v3{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:8rem 0 4.2rem;overflow:hidden}
.hero-v3 .hero-bg video,.hero-v3 .hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06);animation:heroZoom 20s ease-out forwards}
.hero-v3 .hero-fade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,16,.42) 0%,rgba(10,12,16,.12) 34%,rgba(10,12,16,.88) 82%,var(--bg) 100%),radial-gradient(85% 65% at 78% 12%,rgba(77,163,255,.16),transparent 62%)}
.hero-v3 .hero-kicker-row{display:flex;align-items:center;gap:.8rem;margin-bottom:1.1rem}
.hero-v3 .hero-status{display:inline-flex;align-items:center;gap:.45rem;color:var(--dim);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--line);border-radius:99px;padding:.34rem .85rem;background:rgba(10,12,16,.45);backdrop-filter:blur(8px)}
.hero-v3 .hero-status .dot-live{width:7px;height:7px;border-radius:50%;background:var(--accent2);box-shadow:0 0 10px rgba(124,245,200,.8);animation:pulse 2.2s infinite}
.hero-v3 h1{font-size:clamp(2rem,5.4vw,3.8rem);max-width:23ch;text-shadow:0 2px 30px rgba(0,0,0,.55)}
.hero-v3 .hero-teaser{font-size:1.05rem;max-width:60ch;text-shadow:0 1px 18px rgba(0,0,0,.5)}

/* ── News-Galerie: horizontal, Auto-Scroll, pausiert bei Hover ── */
.news-gallery{position:relative;background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.6rem 0 1.8rem;overflow:hidden}
.news-gallery::before,.news-gallery::after{content:"";position:absolute;top:0;bottom:0;width:110px;z-index:2;pointer-events:none}
.news-gallery::before{left:0;background:linear-gradient(90deg,var(--bg2),transparent)}
.news-gallery::after{right:0;background:linear-gradient(270deg,var(--bg2),transparent)}
.ng-head{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto 1.1rem;padding:0 1.5rem}
.ng-title{font-family:'Space Grotesk',sans-serif;font-size:.85rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);display:flex;align-items:center;gap:.65rem}
.ng-title::before{content:"";width:20px;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.ng-live{display:inline-flex;align-items:center;gap:.45rem;color:var(--dim2);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase}
.ng-live .dot-live{width:6px;height:6px;border-radius:50%;background:var(--accent2);animation:pulse 2.2s infinite}
.ng-viewport{overflow:hidden}
.ng-track{display:flex;gap:1.1rem;width:max-content;padding:0 1.5rem;animation:ngScroll 55s linear infinite}
.news-gallery:hover .ng-track{animation-play-state:paused}
@keyframes ngScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ng-card{position:relative;width:272px;flex-shrink:0;border-radius:16px;overflow:hidden;background:var(--bg3);border:1px solid var(--line);transition:border-color .3s,transform .3s,box-shadow .3s;display:block}
.ng-card:hover{border-color:rgba(77,163,255,.55);transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.5)}
.ng-img{position:relative;aspect-ratio:16/9;overflow:hidden}
.ng-img img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.ng-card:hover .ng-img img{transform:scale(1.07)}
.ng-cat{position:absolute;top:.7rem;left:.7rem;z-index:2;background:rgba(10,12,16,.72);backdrop-filter:blur(6px);color:var(--accent);border:1px solid rgba(77,163,255,.35);border-radius:99px;padding:.24rem .68rem;font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.ng-body{padding:.85rem .95rem .95rem}
.ng-time{color:var(--dim2);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.34rem;display:block}
.ng-title-txt{font-family:'Space Grotesk',sans-serif;color:var(--ink);font-size:.88rem;line-height:1.38;letter-spacing:-.005em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em}

/* ── Responsive ── */
@media (max-width:900px){
  .hero-v3{min-height:88svh;padding:6.5rem 0 3.4rem}
  .ng-card{width:232px}
}
@media (max-width:600px){
  .ng-card{width:206px}
  .ng-track{gap:.85rem}
}
@media (prefers-reduced-motion:reduce){
  .ng-track,.hero-v3 .hero-bg video,.hero-v3 .hero-bg img{animation:none!important;transform:none!important}
}

/* ═══ 25.10. 23:15 — Nav-Hintergrund robuster + Hero-Video sichtbar ═══ */
nav#topnav{background:rgba(10,12,16,.82)!important;border-bottom:1px solid rgba(35,43,56,.9)!important;-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
nav#topnav.scrolled{background:rgba(10,12,16,.94)!important}
/* Fallbacks: Browser ohne backdrop-filter */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){nav#topnav{background:rgb(10,12,16)!important}}
/* Hero-Video: immer absolute füllend + Poster-Fallback, kein z-index-Konflikt */
.hero-v3 .hero-bg{z-index:0}
.hero-v3 .hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.68) saturate(1.15);z-index:0;pointer-events:none}
.hero-v3 .hero-fade{z-index:1}
.hero-v3 .wrap{position:relative;z-index:2}