/* ==========================================================================
   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: #0d0d0d;
  --bg2: #161616;
  --bg3: #1d1d1d;
  --ink: #f6f6f6;
  --ink-soft: #e3e3e3;
  --dim: #a2a2a2;
  --dim2: #767676;
  --accent: #ff334e;
  --accent-deep: #f63b54;
  --accent-dim: rgba(255,51,78,0.14);
  --accent2: #f14159;
  --accent2-dim: rgba(241,65,89,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(255,51,78,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(255,51,78,0.35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(255,51,78,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, #1e1e1e, #121212 60%, #101010);
  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(13,13,13,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(13,13,13,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, #262626, #171717);
  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(13,13,13,0.35) 0%, rgba(13,13,13,0.15) 40%, rgba(13,13,13,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: #d1d1d1;
  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(22,22,22,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(241,65,89,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,41,69,0.1); color: #ff2945; border-color: rgba(255,41,69,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(13,13,13,0.1) 20%, rgba(8,8,8,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(255,51,78,0.05), rgba(241,65,89,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: #080808; }
.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(8,8,8,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: #080808;
  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%, #1e1e1e 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(255,51,78,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: #ff2945;
  border: 1px solid rgba(255,41,69,0.4);
  background: rgba(255,41,69,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: #d1d1d1; 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: #d1d1d1;
  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(255,51,78,0.06), rgba(241,65,89,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%, #1e1e1e 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: #0d0d0d;
}
.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;
  isolation: isolate;               /* 26.10.: Stacking-Kontext — Video bleibt im Hero sichtbar */
  padding: calc(var(--s-9) + var(--nav-h)) 0 var(--s-8);
  background:
    radial-gradient(80% 120% at 50% -20%, rgba(255,51,78,0.12), transparent 60%);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.cat-hero-bg { position: absolute; inset: 0; z-index: 0; }
.cat-hero-bg video, .cat-hero-bg img { z-index: 0; }
.cat-hero-bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.3) saturate(1.1); }
.cat-hero-bg video { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.38) saturate(1.15); }
.cat-hero-bg video[src*="cat-"] { filter: brightness(0.42) saturate(1.2); }
@media (prefers-reduced-motion: reduce) { .cat-hero-bg video { display: none; } }
.cat-hero-bg::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(13,13,13,0.55), var(--bg)); }

.cat-hero-inner { max-width: var(--wrap-max); margin: 0 auto; padding: 0 var(--s-6); position: relative; z-index: 2; }
.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: #d1d1d1; 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(8,8,8,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(13,13,13,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(13,13,13,.55) 0%,rgba(13,13,13,.18) 35%,rgba(13,13,13,.94) 92%,var(--bg) 100%),radial-gradient(90% 70% at 80% 10%,rgba(255,51,78,.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(246,246,246,.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(255,51,78,.16);border:1px solid rgba(255,51,78,.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(22,22,22,.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(255,51,78,.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(255,51,78,.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(255,51,78,.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(13,13,13,.15) 0%,rgba(13,13,13,.55) 55%,rgba(13,13,13,.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:center;padding:7rem 0 3.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(13,13,13,.42) 0%,rgba(13,13,13,.12) 34%,rgba(13,13,13,.88) 82%,var(--bg) 100%),radial-gradient(85% 65% at 78% 12%,rgba(255,51,78,.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(13,13,13,.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(241,65,89,.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(255,51,78,.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(13,13,13,.72);backdrop-filter:blur(6px);color:var(--accent);border:1px solid rgba(255,51,78,.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(13,13,13,.82)!important;border-bottom:1px solid rgba(46,46,46,.9)!important;-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
nav#topnav.scrolled{background:rgba(13,13,13,.94)!important}
/* Fallbacks: Browser ohne backdrop-filter */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){nav#topnav{background:rgb(13,13,13)!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}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT MODE (26.10.2026) — Toggle im Header, Speicherung via JS
   ═══════════════════════════════════════════════════════════════════ */
:root[data-theme="light"] {
  --bg: #f8f8f8;
  --bg2: #f1f1f1;
  --bg3: #ffffff;
  --ink: #161616;
  --ink-soft: #333333;
  --dim: #555555;
  --dim2: #767676;
  --accent: #db0b27;
  --accent-deep: #ad091f;
  --accent-dim: rgba(219,11,39,0.10);
  --accent2: #8f0a1c;
  --accent2-dim: rgba(143,10,28,0.12);
  --hot: #d93636;
  --hot-soft: #b32424;
  --hot-dim: rgba(217, 54, 54, 0.10);
  --line: rgba(22,22,22,0.12);
  --line-strong: rgba(22,22,22,0.22);
  color-scheme: light;
}
:root[data-theme="dark"] { color-scheme: dark; }

/* ── Light-Overrides für hartkodierte Dunkel-Bereiche ── */
:root[data-theme="light"] nav#topnav {
  background: rgba(248,248,248,0.92) !important;
  border-bottom: 1px solid rgba(22,22,22,0.14) !important;
}
:root[data-theme="light"] nav#topnav.scrolled { background: rgba(248,248,248,0.98) !important; }
:root[data-theme="light"] .breaking-bar { background: #fff5f5; color: #7a1414; }
:root[data-theme="light"] .breaking-label { background: var(--hot); }
:root[data-theme="light"] .latest-strip { background: var(--bg2); }
:root[data-theme="light"] .hero-v3 .hero-fade {
  background: linear-gradient(180deg, rgba(248,248,248,.40) 0%, rgba(248,248,248,.10) 34%, rgba(248,248,248,.90) 84%, var(--bg) 100%);
}
:root[data-theme="light"] .hero-v3 h1 a {
  background: linear-gradient(180deg, #161616 55%, rgba(22,22,22,.78));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
:root[data-theme="light"] .hero-v3 .hero-teaser, :root[data-theme="light"] .hero-v3 .hero-meta { text-shadow: none; }
:root[data-theme="light"] .side-v2 { background: rgba(255, 255, 255, 0.85); }
:root[data-theme="light"] .hero-status { background: rgba(255, 255, 255, 0.6); }
:root[data-theme="light"] .news-gallery { background: var(--bg2); }
:root[data-theme="light"] .news-gallery::before { background: linear-gradient(90deg, var(--bg2), transparent); }
:root[data-theme="light"] .news-gallery::after { background: linear-gradient(270deg, var(--bg2), transparent); }
:root[data-theme="light"] .ng-cat { background: rgba(255, 255, 255, 0.82); }
:root[data-theme="light"] .ticker { background: var(--bg3); }
:root[data-theme="light"] .footer-site { background: #161616; }
:root[data-theme="light"] .footer-site, :root[data-theme="light"] .footer-site a { color: #e3e3e3; }
:root[data-theme="light"] .desk-overlay { background: linear-gradient(180deg, rgba(248,248,248,.05) 0%, rgba(248,248,248,.45) 55%, rgba(248,248,248,.96) 100%); }
:root[data-theme="light"] .desk-body { color: var(--ink); }
:root[data-theme="light"] img, :root[data-theme="light"] video { filter: none; }

/* ── Theme-Toggle-Button (Sonne/Mond) ── */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--r-pill);
  background: var(--accent-dim); color: var(--accent);
  border: 1px solid var(--line); font-size: 1.05rem; line-height: 1;
  cursor: pointer; transition: background 0.25s, transform 0.2s;
}
.theme-toggle:hover { background: var(--accent-dim); transform: scale(1.06); }
.theme-toggle .ico-sun { display: none; }
:root[data-theme="light"] .theme-toggle .ico-sun { display: inline; }
:root[data-theme="light"] .theme-toggle .ico-moon { display: none; }

/* Flash-Vermeidung: Inline-Theme vor Render anwenden (siehe layout <head>) */
html.theme-pending { visibility: hidden; }
html.theme-pending.theme-set { visibility: visible; }

/* Logo-SVG-Anpassungen (Nav) */
.logo-svg img { display: block; height: 34px; width: auto; }
.logo-svg { display: inline-flex; align-items: center; }
:root[data-theme="light"] .logo-svg img { filter: brightness(0) invert(0); }

/* ═══════════════════════════════════════════════════════════════════
   LOGO v2 + THEME-TOGGLE DEZENT + MOBILE-MENÜ SOLIDE (26.10., 09:10)
   ═══════════════════════════════════════════════════════════════════ */

/* Logo: automatischer Theme-Wechsel (Dark: helle Wortmarke / Light: dunkle) */
.logo-svg img { display: block; height: 32px; width: auto; }
.logo-light { display: none; }
:root[data-theme="light"] .logo-light { display: block; }
:root[data-theme="light"] .logo-dark { display: none; }
@media (max-width: 900px) {
  .logo-svg img { height: 24px; }
  .logo-svg + .theme-toggle { margin-left: auto; }
}

/* Theme-Toggle: dezent — schlichtes Outline-Icon statt gefülltem Kreis */
.theme-toggle {
  width: 30px; height: 30px;
  background: transparent;
  border: none;
  color: var(--dim2);
  font-size: 0.92rem;
  line-height: 1;
  opacity: 0.75;
}
.theme-toggle:hover, .theme-toggle:focus-visible {
  background: transparent;
  color: var(--accent);
  opacity: 1;
  transform: none;
  outline: none;
}
:root[data-theme="light"] .theme-toggle { color: var(--dim2); }

/* Mobile-Menü: VOLL deckend, scharfe Lesbarkeit in BEIDEN Themes */
@media (max-width: 900px) {
  .nav-links {
    background: rgb(13,13,13);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
    padding-top: calc(var(--s-6) + var(--s-2));
  }
  .nav-links a { color: var(--ink-soft); font-weight: 500; }
  .nav-links a:hover, .nav-links a.active { color: var(--accent); }
}
:root[data-theme="light"] .nav-links {
  background: #ffffff;
  box-shadow: 0 24px 48px rgba(22,22,22,0.14);
}
:root[data-theme="light"] .nav-links a { border-bottom-color: var(--line); }

/* ═══════════════════════════════════════════════════════════════════
   NAVIGATION v3 — automobilnews-Stil (26.10., 09:15, Andy-Wunsch):
   Nav IMMER hell & solide (weiß), Logo-PNG mit dunkler Schrift.
   Gilt in BEIDEN Themes; Dark-Mode wechselt nur den Content.
   ═══════════════════════════════════════════════════════════════════ */
nav#topnav {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(22,22,22,0.12) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
nav#topnav.scrolled { background: #ffffff !important; }
nav#topnav .logo, nav#topnav .logo a { color: #161616; }
.nav-links, .nav-links a { color: #333333 !important; }
.nav-links a:hover, .nav-links a.active { color: #db0b27 !important; }
.nav-burger span { background: #161616 !important; }
nav#topnav .theme-toggle { color: #555555 !important; }
nav#topnav .theme-toggle:hover { color: #db0b27 !important; }

/* Mobile-Panel: VOLL deckend weiß wie die Nav (automobilnews) */
@media (max-width: 900px) {
  .nav-links {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 20px 44px rgba(22,22,22,0.16) !important;
  }
  .nav-links a { color: #161616 !important; border-bottom: 1px solid rgba(22,22,22,0.08); }
  .nav-links a:hover, .nav-links a.active { color: #db0b27 !important; }
}
/* Alte Dark-Panel-Regeln aus 09:10 neutralisieren */
:root[data-theme="light"] .nav-links, nav#topnav.open .nav-links { background: #ffffff !important; }

/* Logo: EIN PNG für alle Themes (dunkle Schrift auf weißer Nav) */
.logo-svg img { height: 30px; }
.logo-light, .logo-dark { display: none !important; }
.logo-png { display: block !important; }
@media (max-width: 900px) { .logo-svg img { height: 22px; } }

/* ═══ HERO HEADLINE-ROTATOR (Andy 26.10. 22:11): grosse fette animierte Titel + Read now ═══ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hero-rot { position: relative; width: 100%; min-height: clamp(13rem, 22vw, 18rem); }
.hero-slide {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--s-3);
    text-align: center;
    opacity: 0; text-decoration: none;
    animation: heroSlide 30s cubic-bezier(0.22, 1, 0.36, 1) infinite;
    will-change: opacity, transform;
}
.hero-slide-kicker { justify-content: center; }
@keyframes heroSlide {
    0%      { opacity: 0; transform: translateY(34px) scale(0.985); filter: blur(7px); visibility: hidden; }
    1.4%    { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); visibility: visible; }
    16.4%   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); visibility: visible; }
    19.4%   { opacity: 0; transform: translateY(-26px) scale(0.99); filter: blur(5px); visibility: hidden; }
    100%    { opacity: 0; transform: translateY(-26px) scale(0.99); filter: blur(5px); visibility: hidden; }
}
.hero-slide-kicker { display: flex; align-items: center; gap: var(--s-3); }
.hero-slide-cat {
    display: inline-block; padding: 0.3rem 0.9rem; border-radius: 999px;
    background: rgba(202,16,41,0.18); color: #eb1330;
    font-weight: 700; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.hero-slide-ago { color: rgba(255,255,255,0.62); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.hero-v3 .wrap { max-width: none; width: 100%; padding: 0 var(--s-7); }
.hero-slide-title {
    display: block; width: 100%; max-width: none;
    font-family: 'Inter', 'Space Grotesk', sans-serif;
    font-size: clamp(2.3rem, 4.3vw, 4rem);
    font-weight: 900; line-height: 1.1; letter-spacing: -0.02em;
    color: #fff; text-wrap: balance;
    /* Andy 22:29: noch fetter + fein schwarz umrandet — Kontur HINTER der Fuellung */
    paint-order: stroke fill;
    -webkit-text-stroke: 2.5px rgba(6,6,6,0.95);
    text-shadow:
        0 1px 0 rgba(0,0,0,0.85),
        0 3px 10px rgba(0,0,0,0.75),
        0 8px 34px rgba(0,0,0,0.55),
        0 0 70px rgba(0,0,0,0.4);
}
/* Andy 22:16: der wichtigste Teil des Titels unterstrichen */
.hl-key {
    text-decoration: underline;
    text-decoration-color: var(--accent, #ca1029);
    text-decoration-thickness: max(5px, 0.09em);
    text-underline-offset: 0.14em;
    text-decoration-skip-ink: none;
}
.hero-slide:hover .hero-slide-title { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.hero-slide-cta {
    margin-top: var(--s-2);
    display: inline-flex; align-items: center; gap: 0.55rem;
    padding: 0.78rem 1.7rem; border-radius: 999px;
    background: linear-gradient(135deg, #ca1029, #ee2742);
    color: #121212; font-weight: 800; font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase;
    box-shadow: 0 8px 28px rgba(202,16,41,0.45), inset 0 1px 0 rgba(255,255,255,0.25);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hero-slide-cta .arr { transition: transform 0.25s ease; }
.hero-slide:hover .hero-slide-cta { transform: translateY(-2px) scale(1.04); box-shadow: 0 14px 38px rgba(202,16,41,0.6); }
.hero-slide:hover .hero-slide-cta .arr { transform: translateX(4px); }
.hero-rot-dots { display: flex; gap: 0.45rem; margin-top: var(--s-2); }
.hero-rot-dots span { width: 26px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.18); animation: dotPulse 30s infinite; }
@keyframes dotPulse {
    0%, 19.4% { background: #eb1330; box-shadow: 0 0 12px rgba(235,19,48,0.7); }
    20%, 100% { background: rgba(255,255,255,0.18); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-slide { animation: none; display: none; position: static; opacity: 1; transform: none; filter: none; }
    .hero-slide:first-child { display: flex; }
    .hero-rot { min-height: 0; }
    .hero-rot-dots { display: none; }
}

/* ═══ TOP-NEWS-RAIL (Andy 26.10. 22:12): 6 Top-News-Widgets rechts neben Artikeln ═══ */
.article-page { max-width: 1240px; display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: var(--s-6); align-items: start; }
.article-main { max-width: 860px; min-width: 0; }
.tn-rail {
    position: sticky; top: calc(var(--nav-h, 64px) + var(--s-4));
    display: flex; flex-direction: column; gap: var(--s-3);
    max-height: calc(100vh - var(--nav-h, 64px) - var(--s-6)); overflow-y: auto;
    padding: var(--s-3); border: 1px solid var(--line); border-radius: 16px;
    background: var(--bg2, rgba(255,255,255,0.03));
    scrollbar-width: thin;
}
.tn-head {
    display: flex; align-items: center; gap: 0.5rem;
    font-weight: 800; font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text, #fff); padding: 0 var(--s-1) var(--s-1);
}
.tn-widget {
    display: block; text-decoration: none; border-radius: 12px; overflow: hidden;
    background: var(--bg3, rgba(255,255,255,0.05)); border: 1px solid var(--line);
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.tn-widget:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 10px 26px rgba(0,0,0,0.35); }
.tn-img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg); }
.tn-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.tn-widget:hover .tn-img img { transform: scale(1.05); }
.tn-body { padding: 0.7rem 0.85rem 0.85rem; display: flex; flex-direction: column; gap: 0.3rem; }
.tn-cat { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.tn-title {
    display: block;
    font-size: 1.02rem; font-weight: 800; line-height: 1.32;
    color: #fff;
    max-height: 4.1em; overflow: hidden;
}
.tn-widget:hover .tn-title { text-decoration: underline; text-underline-offset: 3px; }
.tn-time { font-size: 0.72rem; color: var(--dim); font-weight: 600; }
@media (max-width: 1020px) {
    .article-page { grid-template-columns: 1fr; }
    .tn-rail { position: static; max-height: none; flex-direction: row; flex-wrap: wrap; }
    .tn-widget { flex: 1 1 240px; }
}

/* ═══ TOP-NEWS-BAND (Andy 26.10. 22:21): endlose vertikale Rotation + Pause bei Hover ═══ */
.tn-viewport {
    overflow: hidden; position: relative;
    max-height: calc(100vh - var(--nav-h, 64px) - 7rem);
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 92%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0, #000 92%, transparent 100%);
}
.tn-track { display: flex; flex-direction: column; gap: var(--s-3); animation: tnScroll 38s linear infinite; will-change: transform; }
.tn-viewport:hover .tn-track { animation-play-state: paused; }
@keyframes tnScroll { to { transform: translateY(calc(-50% - 0.5 * var(--s-3))); } }
.tn-widget { animation: tnIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes tnIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
.tn-widget .tn-cat { animation: tnPulse 2.6s ease-in-out infinite; }
@keyframes tnPulse { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tn-track, .tn-widget, .tn-widget .tn-cat { animation: none; } }
@media (max-width: 1020px) {
    .tn-viewport { max-height: none; -webkit-mask-image: none; mask-image: none; }
    .tn-track { animation: none; flex-direction: row; flex-wrap: wrap; }
}

/* ═══ TAGES-LAUFBAND (Andy 26.10. 22:27): alle heutigen Artikel durchlaufend ═══ */
.day-ticker {
    display: flex; align-items: center; gap: var(--s-4);
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    background: rgba(13,13,13,0.72); backdrop-filter: blur(10px);
    padding: 0.62rem 0; overflow: hidden;
}
.dt-head { display: inline-flex; align-items: center; gap: 0.45rem; flex: 0 0 auto; margin-left: var(--s-6);
    color: var(--accent2, #f14159); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; }
.dt-viewport { flex: 1 1 auto; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.dt-track { display: inline-flex; gap: 2.6rem; white-space: nowrap; padding-right: 2.6rem;
    animation: dtRun 42s linear infinite; will-change: transform; }
.dt-viewport:hover .dt-track { animation-play-state: paused; }
@keyframes dtRun { to { transform: translateX(calc(-50% - 1.3rem)); } }
.dt-item { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.dt-cat { color: var(--accent); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 0.22rem 0.62rem; border-radius: 99px; background: rgba(202,16,41,0.14); }
.dt-title { color: #f5f5f5; font-weight: 700; font-size: 0.94rem; }
.dt-item:hover .dt-title { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--accent); }
.dt-arr { color: var(--accent); font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .dt-track { animation: none; } }

/* ═══ ANDY 26.10. 22:45: Hero-Headline LINKSBÜNDIG + WEITER NACH OBEN ═══ */
.hero-v3 { align-items: flex-start; }
.hero-v3 .hero-kicker-row { margin-bottom: 0.9rem; }
.hero-rot { min-height: clamp(12rem, 18vw, 16rem); }
.hero-slide {
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
}
.hero-slide-kicker { justify-content: flex-start; }
.hero-rot-dots { justify-content: flex-start; }

/* ═══ ANDY 26.10. 22:45: Hero-Schriftstil (Inter 900 + Kontur) in JEDEN Header der Seite ═══ */
.kicker-h,
.section-head h2,
.newsletter-box h2 {
    font-family: 'Inter', 'Space Grotesk', sans-serif;
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--ink);
    paint-order: stroke fill;
    -webkit-text-stroke: 1.5px rgba(6,6,6,0.85);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.65), 0 4px 20px rgba(0, 0, 0, 0.5);
}
:root[data-theme="light"] .kicker-h,
:root[data-theme="light"] .section-head h2,
:root[data-theme="light"] .newsletter-box h2 {
    -webkit-text-stroke: 0;
    text-shadow: none;
}

/* Claude 23:05 Hero */
/* Andy 23:03: Schrift mehr fett, ein wenig groesser, ein wenig nach unten */
.hero-slide-title{font-size:clamp(2.7rem,5.2vw,5rem);font-weight:900;font-variation-settings:"wght" 900;-webkit-text-stroke:3px rgba(6,6,6,.95);line-height:1.06}
.hero-v3 .hero-kicker-row{margin-top:clamp(2.5rem,9vh,6rem)}
.hero-slide-ago{text-transform:none;letter-spacing:.04em}

/* Claude 23:10 Kopf-Ueberschriften */
/* Gleiche Schriftform wie der Aufmacher der Startseite: Inter 900, Kontur, Kicker unterstrichen */
main h1:not(.sr-only){font-family:'Inter','Space Grotesk',sans-serif;font-weight:900;font-variation-settings:"wght" 900;letter-spacing:-.02em;line-height:1.06;text-wrap:balance}
html:not([data-theme="light"]) main h1:not(.sr-only){color:#fff;paint-order:stroke fill;-webkit-text-stroke:2px rgba(6,6,6,.95);text-shadow:0 1px 0 rgba(0,0,0,.85),0 3px 10px rgba(0,0,0,.6),0 8px 30px rgba(0,0,0,.45)}
.cat-hero h1,.hero-main h1,.author-hero h1,.search-hero h1{font-size:clamp(2.4rem,4.6vw,4.4rem);max-width:none}
.article-h1{font-size:clamp(2.1rem,3.8vw,3.6rem)}
main h1 .hl-key{text-decoration:underline;text-decoration-color:var(--accent,#ca1029);text-decoration-thickness:max(4px,.08em);text-underline-offset:.14em;text-decoration-skip-ink:none}

/* ═══ COOKIE-BANNER (P0-3, 26.10.): gleich prominente Buttons, jederzeit aenderbar ═══ */
.cookie-banner { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 90; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; max-width: min(680px, calc(100vw - 2rem)); padding: 1rem 1.2rem; background: rgba(18,18,18,.96); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 48px rgba(0,0,0,.55); backdrop-filter: blur(10px); }
.cookie-banner[hidden] { display: none; }
.cookie-banner .cb-text { flex: 1 1 320px; font-size: .85rem; color: var(--dim); line-height: 1.45; }
.cookie-banner .cb-text strong { color: var(--ink); display: block; margin-bottom: .2rem; font-family: 'Space Grotesk', sans-serif; }
.cookie-banner .cb-text a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.cookie-banner .cb-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.cookie-banner .cb-btn { flex: 1 1 auto; min-width: 150px; padding: .7rem 1.1rem; border-radius: 10px; border: 1px solid var(--line); background: var(--bg2); color: var(--ink); font-weight: 700; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.cookie-banner .cb-btn:hover { transform: translateY(-2px); border-color: var(--accent); }
.cookie-banner .cb-btn.cb-all { background: linear-gradient(135deg, #ca1029, #ee2742); color: #121212; border-color: transparent; }
:root[data-theme="light"] .cookie-banner { background: rgba(255,255,255,.97); box-shadow: 0 18px 48px rgba(0,0,0,.18); }
@media (max-width: 640px) { .cookie-banner { left: .8rem; right: .8rem; bottom: .8rem; transform: none; } .cookie-banner .cb-btn { min-width: 0; flex: 1 1 40%; } }
.cookie-table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.cookie-table th, .cookie-table td { border: 1px solid var(--line); padding: .5rem .7rem; font-size: .85rem; text-align: left; vertical-align: top; }
.cookie-table th { font-family: 'Space Grotesk', sans-serif; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; color: var(--dim); }

/* ═══ FIX 26.10. 23:40 (Nachtrag 3): Sprachumschalter-Kontrast auf heller Nav ═══ */
.lang-btn.on {
  color: #121212;
  border-color: transparent;
  background: linear-gradient(135deg, #ca1029, #ee2742);
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(202,16,41,0.35);
}
.lang-btn:hover { color: var(--ink); border-color: var(--accent); background: rgba(202,16,41,0.12); }
:root[data-theme="light"] .lang-btn.on, :root[data-theme="light"] .lang-btn:hover { color: #121212; }


/* ═══ ANDY 22:45/22:46 (Klärung): Schrift im HEADER-BEREICH (Kicker-Labels) —
   linksbündig + weiter nach oben; dieses Label-Format in JEDEN Header der Seite ═══ */
.hero-v3 .hero-kicker-row{margin-top:clamp(.5rem,1.6vh,1.2rem);margin-bottom:.85rem}
.hero-slide-kicker{margin-top:0}
.hero-slide-ago{color:var(--dim)}
.cat-label,main .cat-label,.country-hero .cat-label,.search-hero .cat-label,.author-hero .cat-label{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  margin:0 0 .85rem;
}
/* Seiten-Header weiter nach oben: Top-Padding 3.4rem -> 1rem (Labels sitzen wie im Home-Hero direkt unter Nav) */
.cat-hero{padding-top:calc(var(--s-5) + var(--nav-h))}

/* ═══ PRUEFRUNDE 2 (Claude 01:05) Fix 4: Sprach-Dropdown statt 14 Pills; Header einzeilig <=72px ═══ */
.nav-links { white-space: nowrap; flex-wrap: nowrap; }
.langs { display: none; }
.lang-dd { position: relative; }
.lang-dd-btn { display: inline-flex; align-items: center; gap: .35rem; background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--ink); border-radius: var(--r-pill); padding: .34rem .8rem; font-size: .74rem; font-weight: 700; cursor: pointer; transition: border-color .2s; }
.lang-dd-btn:hover { border-color: var(--accent); }
.lang-globe { font-size: .9rem; line-height: 1; }
.lang-cur { letter-spacing: .04em; }
.lang-dd-menu { position: absolute; top: calc(100% + .5rem); right: 0; z-index: 120; display: none; flex-direction: column; gap: .12rem; min-width: 10rem; max-height: min(24rem, 60vh); overflow-y: auto; padding: .5rem; background: var(--bg3); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 48px rgba(0,0,0,.45); }
.lang-dd.open .lang-dd-menu { display: flex; }
.lang-dd-item { padding: .38rem .6rem; border-radius: 8px; font-size: .78rem; color: var(--dim); text-decoration: none; white-space: nowrap; }
.lang-dd-item:hover { background: var(--accent-dim); color: var(--ink); }
.lang-dd-item.on { color: #121212; background: linear-gradient(135deg,#ca1029,#ee2742); font-weight: 700; }
:root[data-theme="light"] .lang-dd-menu { background: #fff; box-shadow: 0 18px 48px rgba(0,0,0,.18); }
:root[data-theme="light"] .lang-dd-btn { background: rgba(22,22,22,.05); }
/* Fix 5b: RTL (ar-SA) — Aufmacher/Kopf rechtsbuendig, Layout spiegeln */
[dir="rtl"] .hero-slide, [dir="rtl"] .cat-hero-inner, [dir="rtl"] .section-head, [dir="rtl"] .article-meta, [dir="rtl"] .section-sub { text-align: right; }
[dir="rtl"] .hero-v3 .hero-kicker-row, [dir="rtl"] .hero-slide-kicker, [dir="rtl"] .hero-rot-dots { flex-direction: row-reverse; }
[dir="rtl"] .strip-item, [dir="rtl"] .ng-body, [dir="rtl"] .card, [dir="rtl"] .footer-grid { text-align: right; }
[dir="rtl"] .lang-dd-menu { right: auto; left: 0; }

/* ═══ 02:05 A11y-Kontrast (Lighthouse v3): lang-cur/section-sub/kicker-Schatten ═══ */
.lang-dd-btn .lang-cur { color: var(--ink); font-weight: 800; }
:root[data-theme="light"] .lang-dd-btn .lang-cur { color: #0f0f0f; }
.section-sub { color: var(--dim); }
:root[data-theme="light"] .section-sub { color: #444444; }
html:not([data-theme="light"]) .kicker-h, html:not([data-theme="light"]) .section-head h2 { text-shadow: none; }

/* ═══ 02:15 A11y: kicker-h/Sektions-H2 ohne Kontur-Strich (Lighthouse color-contrast; Strich nur fuer grosse H1) ═══ */
.kicker-h, .section-head h2, .newsletter-box h2 { -webkit-text-stroke: 0 !important; text-shadow: none !important; }

/* ═══ 02:35 A11y-Rest: mr-meta + lang-cur Kontrast (Lighthouse v5: 12 Fails) ═══ */
.mr-meta { color: #c2c2c2; }
:root[data-theme="light"] .mr-meta { color: #444444; }
.lang-dd-btn { color: #fff; }
.lang-dd-btn .lang-cur { color: #fff; font-weight: 800; }
:root[data-theme="light"] .lang-dd-btn, :root[data-theme="light"] .lang-dd-btn .lang-cur { color: #0f0f0f; }

/* ═══ 02:40 A11y-Final: Footer-Kontrast (Lighthouse v6: letzte 5 Fails) ═══ */
.footer-social a { color: #dcdcdc; opacity: 1; }
.footer-social a:hover { color: #fff; }
.footer-bottom, .footer-bottom span, .footer-bottom a { color: #cbcbcb; }
:root[data-theme="light"] .footer-social a, :root[data-theme="light"] .footer-bottom, :root[data-theme="light"] .footer-bottom span, :root[data-theme="light"] .footer-bottom a { color: #444444; }

/* Pruefrunde 3 Punkt 6: tn-img Bild nicht abschneiden (sicherer aspect-ratio-Fallback) */
.tn-img { aspect-ratio: 16 / 9; min-height: 90px; }
.tn-img img { width: 100%; height: 100%; object-fit: cover; }

/* ═══ PRUEFRUNDE 4 (03:50): LIGHT-MODE-LESBARKEIT — Rail, Teaser, Nav-Transparenz, Hero-Zeit, Karten ═══ */
:root[data-theme="light"] .tn-title { color: #161616; }
:root[data-theme="light"] .tn-head { color: #161616; }
:root[data-theme="light"] .tn-widget { background: #ffffff; }
:root[data-theme="light"] .article-teaser { color: #333333; }
/* P3: Nav im Light Mode transparent wie im Dark Mode (0.6/0.85 statt 0.92/0.98-Kasten) */
:root[data-theme="light"] nav#topnav { background: rgba(248,248,248,0.6) !important; }
:root[data-theme="light"] nav#topnav.scrolled { background: rgba(248,248,248,0.85) !important; }
/* P4: Hero-Zeit im Light Mode dunkel lesbar + Overlay oben staerken */
:root[data-theme="light"] .hero-slide-ago { color: #161616; text-shadow: 0 1px 0 rgba(255,255,255,.4); }
:root[data-theme="light"] .hero-v3 .hero-fade { background: linear-gradient(180deg, rgba(248,248,248,.58) 0%, rgba(248,248,248,.14) 34%, rgba(248,248,248,.90) 84%, var(--bg) 100%); }
:root[data-theme="light"] .ng-time { color: #555555; }
:root[data-theme="light"] .ng-body { color: #161616; }
:root[data-theme="light"] .hero-status { color: #161616; }
/* P6-Fallback: Reveal-Sektionen ohne JS / bei reduced-motion sofort sichtbar */
@media (prefers-reduced-motion: reduce) {
  .reveal, [data-reveal], section.reveal { opacity: 1 !important; transform: none !important; }
}
.no-js .reveal, .no-js [data-reveal] { opacity: 1 !important; transform: none !important; }

/* ── Pruefrunde 5 (27.10.): AI-Note (EU AI Act) — beide Themes via Variablen ── */
.ai-note{display:flex;align-items:center;gap:.5rem;margin:-0.6rem 0 1.6rem;font-size:.72rem;color:var(--dim);border:1px solid var(--line);border-radius:99px;padding:.35rem .9rem;width:fit-content;background:var(--accent-dim)}
.ai-note .ai-dot{width:8px;height:8px;border-radius:50%;background:linear-gradient(120deg,var(--accent),var(--accent2));flex:none;box-shadow:0 0 8px rgba(255,51,78,.5)}

/* ── Pruefrunde 5 (27.10., Andy 09:50 Teil 3): WT24-Neuzugaenge-Streifen ── */
.wt24-strip{margin:3.2rem 0 0;padding:2rem 0 2.4rem;border-top:1px solid var(--line);background:var(--bg2)}
.wt24-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem}
.wt24-title{font-weight:800;letter-spacing:.01em;color:var(--ink);font-size:1.06rem}
.wt24-count{font-size:.74rem;color:var(--dim);letter-spacing:.08em;text-transform:uppercase}
.wt24-frame{position:relative;display:flex;align-items:center;gap:.6rem}
.wt24-viewport{overflow:hidden;flex:1;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.wt24-track{display:flex;gap:.9rem;width:max-content;animation:wt24scroll 60s linear infinite}
.wt24-strip:hover .wt24-track,.wt24-strip:focus-within .wt24-track{animation-play-state:paused}
.wt24-card{flex:none;width:178px;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--bg3);transition:border-color .2s}
.wt24-card:hover{border-color:var(--accent)}
.wt24-imglink{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--bg2)}
.wt24-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.wt24-card:hover img{transform:scale(1.04)}
.wt24-info{padding:.7rem .8rem .85rem;display:flex;flex-direction:column;gap:.3rem}
.wt24-model{font-size:.8rem;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wt24-meta{font-size:.72rem;color:var(--dim)}
.wt24-btn{margin-top:.35rem;font-size:.72rem;font-weight:700;color:var(--accent);text-decoration:none}
.wt24-btn:hover{text-decoration:underline}
.wt24-arrow{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-strong);background:var(--bg3);color:var(--ink);cursor:pointer;font-size:1rem;line-height:1;transition:all .15s}
.wt24-arrow:hover{border-color:var(--accent);color:var(--accent)}
@keyframes wt24scroll{to{transform:translateX(calc(-50% - .45rem))}}
@media (prefers-reduced-motion: reduce){.wt24-track{animation:none}}
@media (max-width:640px){.wt24-card{width:150px}.wt24-arrow{display:none}}

/* ── Pruefrunde 5 (27.10., Andy 09:50 Teil 1): Intelligence-Charts ── */
.int-updated{font-size:.78rem;color:var(--dim);margin-top:.4rem}
.int-mod{display:flex;align-items:center;gap:.8rem;margin:0 0 1.4rem;padding:.7rem 1.1rem;border:1px solid var(--line);border-radius:var(--r-md);background:var(--accent-dim);width:fit-content}
.int-mod-label{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:800}
.int-mod-value{font-size:.86rem;font-weight:700;color:var(--ink)}
.int-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.2rem;margin-bottom:2rem}
.int-card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg3);padding:1.4rem 1.4rem 1.1rem;overflow:hidden}
.int-card h3{font-size:1.02rem;margin:0 0 1.1rem;color:var(--ink);letter-spacing:.01em}
.int-bars{display:flex;flex-direction:column;gap:.55rem}
.int-bar-row{display:flex;align-items:center;gap:.6rem}
.int-bar-label{flex:none;width:2.4rem;font-size:.74rem;font-weight:700;color:var(--dim);text-align:right}
.int-row-brand .int-bar-label{width:6.6rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.int-bar-track{flex:1;height:14px;background:var(--bg2);border-radius:99px;overflow:hidden}
.int-bar{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent-deep));transition:width 1.1s cubic-bezier(.22,1,.36,1)}
.int-bar-alt{background:linear-gradient(90deg,var(--accent2),var(--accent))}
.int-bar-val{flex:none;width:4.2rem;font-size:.76rem;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.int-line{width:100%;height:150px;display:block}
.int-stroke{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.int-area{fill:var(--accent);opacity:.18}
.int-line-meta{display:flex;justify-content:space-between;font-size:.78rem;color:var(--dim);margin:.5rem 0 .2rem}
.int-src{font-size:.68rem;color:var(--dim2);margin:.8rem 0 0;letter-spacing:.03em}
@media (prefers-reduced-motion: reduce){.int-bar{transition:none}}
@media (max-width:640px){.int-grid{grid-template-columns:1fr}.int-bar-val{width:3.6rem}.int-row-brand .int-bar-label{width:5.2rem}}

/* ── Intelligence-Teaser (Startseite) ── */
.intel-teaser-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:1rem}
.intel-teaser-card{display:flex;flex-direction:column;gap:.9rem;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg3);padding:1.3rem 1.4rem;text-decoration:none;transition:border-color .2s}
.intel-teaser-card:hover{border-color:var(--accent)}
.it-label{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:800}
.it-bars{display:flex;flex-direction:column;gap:.5rem}
.it-bar-row{display:flex;align-items:center;gap:.55rem}
.it-bar-row b{width:1.8rem;font-size:.72rem;color:var(--dim);text-align:right}
.it-track{flex:1;height:10px;background:var(--bg2);border-radius:99px;overflow:hidden}
.it-fill{display:block;height:100%;width:var(--w);border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent-deep));max-width:100%}
.it-bar-row em{font-size:.76rem;font-style:normal;font-weight:700;color:var(--ink)}
.it-src{font-size:.66rem;color:var(--dim2)}
.it-big{font-size:2.1rem;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.it-sub{font-size:.8rem;color:var(--dim)}
@media (max-width:640px){.intel-teaser-grid{grid-template-columns:1fr}}

/* ── Country Hubs: Hauptstadt-Bilder (Andy 28.10.2026) ── */
.country-card { position: relative; overflow: hidden; }
.country-card-img { display: block; width: 100%; aspect-ratio: 16/9; overflow: hidden; border-radius: 12px 12px 0 0; }
.country-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.country-card:hover .country-card-img img { transform: scale(1.05); }
.country-card .capital { display: block; font-size: .78rem; opacity: .85; margin-top: 2px; }
.cat-hero.country-hero { position: relative; overflow: hidden; }
.country-hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: .38; }
.country-hero-img { background-size: cover; background-position: center; }
.cat-hero.country-hero .cat-hero-inner { position: relative; z-index: 1; }
.country-hero-media ~ .cat-hero-inner { text-shadow: 0 2px 18px rgba(0,0,0,.55); }
.country-capital-label { display: inline-block; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; opacity: .92; margin-top: 6px; }

/* Claude 28.10. Footer-Logo: dunkel = blau-weiss, hell = blau-dunkel */
.site-footer .footer-logo img { display:block; height:30px; width:auto; }
.site-footer .footer-logo .fl-light { display:none !important; }
:root[data-theme="light"] .site-footer .footer-logo .fl-dark { display:none !important; }
:root[data-theme="light"] .site-footer .footer-logo .fl-light { display:block !important; }
@media (max-width:900px) { .site-footer .footer-logo img { height:24px; } }

/* Claude 28.10.: Newsletter-Rückmeldung */
[data-nl-msg].nl-ok { color:#8d0b1d !important; font-weight:600; }
[data-nl-msg].nl-err { color:#c9302c !important; font-weight:600; }
:root[data-theme="dark"] [data-nl-msg].nl-ok { color:#ed213c !important; }
:root[data-theme="dark"] [data-nl-msg].nl-err { color:#ff6b66 !important; }

/* Claude 28.10.: Augen-Badge mit Leserzahl */
.views-badge { position:absolute; right:10px; bottom:10px; z-index:2; display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:999px; background:rgba(13,13,13,.62); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#fff; font:600 12px/1 'Inter',system-ui,sans-serif; letter-spacing:.01em; pointer-events:none; font-variant-numeric:tabular-nums; }
.views-badge svg { width:14px; height:14px; fill:currentColor; opacity:.92; flex:0 0 auto; }
.views-badge b { font-weight:700; }
.views-badge.views-inline { position:static; background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; color:inherit; padding:0 0 0 10px; opacity:.85; }
[dir="rtl"] .views-badge:not(.views-inline) { right:auto; left:10px; }

/* Claude 28.10.: Logo nie komplett schwarz – zweifarbiges Original zeigen */
#topnav .logo-svg img, :root[data-theme="light"] .logo-svg img { filter: none !important; }

/* Claude 28.10.: generative Video-Header (Analysen, Video, Länder) */
.cat-hero{position:relative;overflow:hidden}
.cat-hero-bg.ean-genvid video{filter:brightness(.95) saturate(1.05)!important}
.cat-hero-bg.ean-genvid::after{background:linear-gradient(90deg,rgba(12,12,12,.78) 0%,rgba(12,12,12,.35) 45%,rgba(12,12,12,0) 75%),linear-gradient(180deg,rgba(12,12,12,0) 55%,var(--bg) 100%)}
.cat-hero-bg.ean-genvid~.cat-hero-inner h1,.cat-hero-bg.ean-genvid~.cat-hero-inner p{text-shadow:0 2px 18px rgba(0,0,0,.45)}

/* ═══════════════════════════════════════════════════════════════════
   NAVIGATION v5 (Claude, 29.10.2026, Andy: „moderner, übersichtlicher, professioneller“)
   Desktop: zwei Ebenen – oben Logo + Werkzeuge, darunter die Rubriken mit aktivem Unterstrich.
   Mobil/Tablet (< 1180 px): eine Zeile + aufklappendes Menü. Nav bleibt in beiden Themes weiß.
   ═══════════════════════════════════════════════════════════════════ */
:root { --nav-h: 109px !important; --nv-ink: #161616; --nv-ink2: #494949; --nv-muted: #767676; --nv-line: #ececec; --nv-blue: #db0b27; }
nav#topnav {
  position: fixed !important; top: 0; left: 0; right: 0; z-index: 1000;
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: 64px 44px;
  grid-template-areas: "logo . actions" "links links links";
  align-items: center; column-gap: 12px; row-gap: 0;
  height: auto !important; min-height: 0 !important;
  padding: 0 clamp(20px, 3.2vw, 48px) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid var(--nv-line) !important;
  box-shadow: none !important;
  transition: box-shadow .25s ease;
}
nav#topnav.scrolled { box-shadow: 0 8px 28px rgba(22,22,22,0.08) !important; background: rgba(255, 255, 255, 0.985) !important; }
nav#topnav .logo { grid-area: logo; display: inline-flex !important; align-items: center; margin: 0 !important; padding: 0 !important; }
nav#topnav .logo-png, nav#topnav .logo-svg img { display: block !important; height: 26px !important; width: auto !important; max-width: none !important; }
nav#topnav .nav-burger { display: none !important; }

/* Werkzeuge rechts */
nav#topnav .nav-actions { grid-area: actions; display: flex !important; align-items: center; gap: 8px; margin: 0 !important; }
nav#topnav .nv-btn, nav#topnav .search-btn, nav#topnav .lang-dd-btn, nav#topnav .theme-toggle {
  height: 38px; min-width: 38px; display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
  padding: 0 12px !important; border-radius: 10px !important; border: 1px solid var(--nv-line) !important;
  background: #fff !important; color: var(--nv-ink2) !important; font: 600 13.5px/1 Inter, system-ui, sans-serif !important;
  cursor: pointer; box-shadow: none !important; transition: border-color .15s, color .15s, background .15s; margin: 0 !important;
}
nav#topnav .search-btn:hover, nav#topnav .lang-dd-btn:hover, nav#topnav .theme-toggle:hover { border-color: #d4d4d4 !important; color: var(--nv-ink) !important; background: #f8f8f8 !important; }
nav#topnav .search-btn { min-width: 168px; justify-content: flex-start; color: var(--nv-muted) !important; font-weight: 500 !important; }
nav#topnav .search-btn kbd { margin-left: auto; font: 600 11px/1 Inter, sans-serif; color: var(--nv-muted); border: 1px solid var(--nv-line); border-radius: 5px; padding: 3px 6px; background: #f8f8f8; }
nav#topnav .theme-toggle { width: 38px; padding: 0 !important; font-size: 0 !important; }
nav#topnav .theme-toggle svg, nav#topnav .search-btn svg, nav#topnav .lang-dd-btn svg { width: 17px; height: 17px; flex: 0 0 auto; }
nav#topnav .lang-globe { display: none !important; }
nav#topnav .lang-cur { font-weight: 700; letter-spacing: .02em; color: var(--nv-ink); }
nav#topnav .nav-cta {
  height: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border-radius: 10px;
  background: linear-gradient(135deg, #db0b27, #dd122d); color: #fff !important; font: 700 13.5px/1 Inter, system-ui, sans-serif;
  text-decoration: none !important; white-space: nowrap; box-shadow: 0 4px 14px rgba(219,11,39,.25); transition: transform .15s, box-shadow .15s;
}
nav#topnav .nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(219,11,39,.32); }
nav#topnav .lang-dd { position: relative; }
nav#topnav .lang-dd-menu { right: 0; left: auto; top: calc(100% + 8px) !important; border-radius: 12px !important; border: 1px solid var(--nv-line) !important; box-shadow: 0 18px 40px rgba(22,22,22,.14) !important; background: #fff !important; padding: 6px !important; grid-template-columns: repeat(4, 1fr); gap: 2px; min-width: 228px; }
nav#topnav .lang-dd.open .lang-dd-menu, nav#topnav .lang-dd-menu.open { display: grid !important; }
nav#topnav .lang-dd-item { border-radius: 8px !important; padding: 9px 0 !important; text-align: center; color: var(--nv-ink2) !important; font: 600 13px/1 Inter, sans-serif !important; }
nav#topnav .lang-dd-item:hover { background: #f5f5f5 !important; color: var(--nv-ink) !important; }
nav#topnav .lang-dd-item.on { background: #f2f2f2 !important; color: var(--nv-blue) !important; }

/* Rubriken-Leiste */
nav#topnav .nav-links {
  grid-area: links; position: static !important; display: flex !important; align-items: stretch; gap: 2px;
  height: 44px; margin: 0 calc(-1 * clamp(20px, 3.2vw, 48px)) !important; padding: 0 clamp(12px, 2.6vw, 40px) !important;
  border-top: 1px solid var(--nv-line); background: transparent !important; box-shadow: none !important; border-radius: 0 !important;
  opacity: 1 !important; visibility: visible !important; transform: none !important; overflow-x: auto; scrollbar-width: none; max-height: none !important;
}
nav#topnav .nav-links::-webkit-scrollbar { display: none; }
nav#topnav .nav-links a {
  position: relative; display: inline-flex !important; align-items: center; padding: 0 12px !important; margin: 0 !important;
  color: var(--nv-ink2) !important; font: 600 14.5px/1 Inter, system-ui, sans-serif !important; letter-spacing: -.005em;
  white-space: nowrap; text-decoration: none !important; background: none !important; border: 0 !important; border-radius: 0 !important; transition: color .15s;
}
nav#topnav .nav-links a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, #db0b27, #e3122e); transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
nav#topnav .nav-links a:hover { color: var(--nv-ink) !important; }
nav#topnav .nav-links a:hover::after { transform: scaleX(.5); }
nav#topnav .nav-links a[aria-current="page"] { color: var(--nv-ink) !important; }
nav#topnav .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
nav#topnav .nav-links a.nv-home { display: none !important; }
nav#topnav .nav-links a.nv-sep { margin-left: 14px !important; }
nav#topnav .nav-links a.nv-sep::before { content: ""; position: absolute; left: -8px; top: 14px; bottom: 14px; width: 1px; background: var(--nv-line); }
nav#topnav .nav-links a .nv-dot { width: 6px; height: 6px; border-radius: 50%; background: #e3122e; margin-left: 7px; box-shadow: 0 0 0 3px rgba(227,18,46,.18); }

/* Tablet & Mobil */
@media (max-width: 1179px) {
  :root { --nav-h: 62px !important; }
  nav#topnav { grid-template-columns: auto 1fr auto auto; grid-template-rows: 62px; grid-template-areas: "logo . actions burger"; }
  nav#topnav .logo-png, nav#topnav .logo-svg img { height: 22px !important; }
  nav#topnav .nav-burger { grid-area: burger; display: inline-flex !important; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 40px; height: 38px; border: 1px solid var(--nv-line) !important; border-radius: 10px !important; background: #fff !important; padding: 0 !important; margin-left: 8px !important; }
  nav#topnav .nav-burger span { display: block; height: 2px; width: 18px; background: var(--nv-ink) !important; border-radius: 2px; transition: transform .2s, opacity .2s; }
  nav#topnav.open .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  nav#topnav.open .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  nav#topnav .nav-cta, nav#topnav .search-btn span, nav#topnav .search-btn kbd { display: none !important; }
  nav#topnav .search-btn { min-width: 38px; padding: 0 !important; justify-content: center; }
  nav#topnav .nav-links {
    position: fixed !important; top: 62px; left: 0; right: 0; height: auto; max-height: calc(100vh - 62px) !important;
    margin: 0 !important; padding: 8px 20px 24px !important; flex-direction: column; gap: 0; overflow-y: auto;
    background: #fff !important; border-top: 1px solid var(--nv-line); box-shadow: 0 24px 48px rgba(22,22,22,.14) !important;
    opacity: 0 !important; visibility: hidden !important; transform: translateY(-6px) !important; transition: opacity .2s, transform .2s, visibility .2s;
  }
  nav#topnav.open .nav-links { opacity: 1 !important; visibility: visible !important; transform: none !important; }
  nav#topnav .nav-links a { padding: 15px 4px !important; font-size: 16.5px !important; border-bottom: 1px solid #f2f2f2 !important; }
  nav#topnav .nav-links a::after { display: none; }
  nav#topnav .nav-links a[aria-current="page"] { color: var(--nv-blue) !important; }
  nav#topnav .nav-links a.nv-home { display: inline-flex !important; }
  nav#topnav .nav-links a.nv-sep { margin-left: 0 !important; }
  nav#topnav .nav-links a.nv-sep::before { display: none; }
}
@media (max-width: 520px) {
  nav#topnav { padding: 0 14px !important; column-gap: 6px; }
  nav#topnav .nav-actions { gap: 6px; }
  nav#topnav .logo-png, nav#topnav .logo-svg img { height: 19px !important; }
  nav#topnav .lang-dd-btn { padding: 0 9px !important; }
  nav#topnav .lang-dd-btn svg { display: none; }
}

/* Claude 29.10.: Hero mit Bild/Video – Text in beiden Themes weiß und lesbar */
.cat-hero:has(.cat-hero-bg) { background: #0e0e0e; }
.cat-hero:has(.cat-hero-bg) .cat-hero-inner h1, .cat-hero:has(.cat-hero-bg) .cat-hero-inner h1 a { color: #fff !important; }
.cat-hero:has(.cat-hero-bg) .cat-hero-inner p { color: #dcdcdc !important; }
.cat-hero:has(.cat-hero-bg) .cat-hero-inner { text-shadow: 0 2px 20px rgba(0,0,0,.5); }
:root:not([data-theme="dark"]) .cat-hero-bg::after { background: linear-gradient(90deg, rgba(12,12,12,.82) 0%, rgba(12,12,12,.45) 50%, rgba(12,12,12,.12) 100%), linear-gradient(180deg, rgba(12,12,12,0) 60%, rgba(12,12,12,.55) 100%) !important; }
/* Nav v5 – sehr schmale Displays */
@media (max-width: 520px) {
  nav#topnav { padding: 0 12px !important; column-gap: 4px; }
  nav#topnav .nav-actions { gap: 5px; }
  nav#topnav .logo-png, nav#topnav .logo-svg img { height: 16px !important; }
  nav#topnav .search-btn, nav#topnav .theme-toggle { width: 34px; min-width: 34px; height: 34px; }
  nav#topnav .lang-dd-btn { height: 34px; min-width: 34px; padding: 0 8px !important; }
  nav#topnav .nav-burger { width: 36px; height: 34px; margin-left: 5px !important; }
}

/* ═══ Video-Detail „Kino“ (Claude, 29.10.2026): Video oben groß, Story darunter, weitere Videos rechts ═══ */
.vdp-wrap{max-width:1240px;margin:0 auto;padding:0 clamp(16px,3vw,40px)}
.vdp-stage{position:relative;overflow:hidden;background:#090909;padding:22px 0 44px;color:#fff}
.vdp-glow{position:absolute;inset:-60px;background-size:cover;background-position:center;filter:blur(60px) saturate(1.3) brightness(.45);transform:scale(1.15);opacity:.9}
.vdp-stage::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 70% at 50% 40%,rgba(9,9,9,0) 0%,rgba(9,9,9,.75) 100%),linear-gradient(180deg,rgba(9,9,9,.2),rgba(9,9,9,.85))}
.vdp-stage .vdp-wrap{position:relative;z-index:1}
.vdp-crumbs{display:flex;gap:10px;align-items:center;font:600 13px/1 Inter,system-ui,sans-serif;letter-spacing:.04em;color:#b2b2b2;margin:0 0 16px}
.vdp-crumbs a{color:#f04259!important;text-decoration:none}.vdp-crumbs a:hover{color:#fff!important}
.vdp-player{position:relative;aspect-ratio:16/9;width:100%;border-radius:20px;overflow:hidden;background:#000;box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08)}
.vdp-player video,.vdp-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:contain;background:#000}
.vdp-play{position:absolute;left:50%;top:50%;width:92px;height:92px;margin:-46px 0 0 -46px;border:0;border-radius:50%;cursor:pointer;color:#fff;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(219,11,39,.92),rgba(227,18,46,.92));box-shadow:0 18px 50px rgba(219,11,39,.45),0 0 0 10px rgba(255,255,255,.12);transition:transform .2s ease,box-shadow .2s ease}
.vdp-play:hover{transform:scale(1.06);box-shadow:0 22px 60px rgba(219,11,39,.55),0 0 0 14px rgba(255,255,255,.14)}
.vdp-play svg{width:38px;height:38px;margin-left:5px}.vdp-play[hidden]{display:none}
.vdp-body{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:clamp(28px,4vw,56px);padding-top:36px;padding-bottom:64px}
.vdp-kicker{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.vdp-chip{font:700 11px/1 Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,#db0b27,#e3122e);padding:7px 10px;border-radius:999px}
.vdp-cat{font:700 11px/1 Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#db0b27!important;text-decoration:none;padding:6px 10px;border-radius:999px;border:1px solid rgba(219,11,39,.35)}
:root[data-theme="dark"] .vdp-cat{color:#ff334e!important}
.vdp-title{font:900 clamp(28px,3.4vw,46px)/1.08 Inter,system-ui,sans-serif;letter-spacing:-.02em;margin:0 0 16px;max-width:none}
.vdp-meta{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font:500 14px/1 Inter,system-ui,sans-serif;opacity:.75;padding-bottom:22px;margin-bottom:24px;border-bottom:1px solid rgba(144,144,144,.25)}
.vdp-views{display:inline-flex;align-items:center;gap:6px}.vdp-views svg{width:17px;height:17px}
.vdp-share{margin-left:auto;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:10px;border:1px solid rgba(144,144,144,.35);background:transparent;color:inherit;font:600 13.5px/1 Inter,system-ui,sans-serif;cursor:pointer;opacity:1}
.vdp-share svg{width:16px;height:16px}.vdp-share:hover{border-color:#db0b27;color:#db0b27}
.vdp-desc p{font-size:18px;line-height:1.75;margin:0 0 18px;max-width:72ch}
.vdp-desc p:first-child{font-size:20px;line-height:1.65;font-weight:500}
.vdp-btn{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 22px;border-radius:12px;background:linear-gradient(135deg,#db0b27,#dd122d);color:#fff!important;font:700 15px/1 Inter,system-ui,sans-serif;text-decoration:none!important;box-shadow:0 10px 26px rgba(219,11,39,.3)}
.vdp-btn:hover{transform:translateY(-1px)}
.vdp-desc .vdp-sources{font-size:13.5px;line-height:1.6;opacity:.65;font-style:italic;font-weight:400}
.vdp-side h2{font:800 18px/1.2 Inter,system-ui,sans-serif;margin:4px 0 16px}
.vdp-list{display:flex;flex-direction:column;gap:14px}
.vdp-item{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:start;text-decoration:none!important;color:inherit!important}
.vdp-thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#101010}
.vdp-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.vdp-item:hover .vdp-thumb img{transform:scale(1.06)}
.vdp-thumb i{position:absolute;left:50%;top:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(219,11,39,.85);box-shadow:0 6px 16px rgba(0,0,0,.35);opacity:.92}
.vdp-thumb i svg{width:16px;height:16px;margin-left:2px}
.vdp-thumb b{position:absolute;right:6px;bottom:6px;font:700 11px/1 Inter,system-ui,sans-serif;color:#fff;background:rgba(0,0,0,.72);padding:4px 6px;border-radius:6px}
.vdp-item-t{display:flex;flex-direction:column;gap:5px;min-width:0}
.vdp-item-t small{font:700 10.5px/1 Inter,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#db0b27}
:root[data-theme="dark"] .vdp-item-t small{color:#ff334e}
.vdp-item-t strong{font:700 14.5px/1.35 Inter,system-ui,sans-serif;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.vdp-item:hover .vdp-item-t strong{color:#db0b27}
.vdp-item-t em{font:500 12.5px/1 Inter,system-ui,sans-serif;font-style:normal;opacity:.6}
.vdp-all{display:inline-block;margin-top:18px;font:700 14px/1 Inter,system-ui,sans-serif;color:#db0b27!important;text-decoration:none!important}
@media (max-width:980px){.vdp-body{grid-template-columns:1fr}.vdp-side{border-top:1px solid rgba(144,144,144,.25);padding-top:24px}}
@media (max-width:560px){.vdp-stage{padding-bottom:22px}.vdp-player{border-radius:14px}.vdp-play{width:72px;height:72px;margin:-36px 0 0 -36px}.vdp-play svg{width:30px;height:30px}
  .vdp-desc p{font-size:16.5px}.vdp-desc p:first-child{font-size:18px}.vdp-item{grid-template-columns:128px minmax(0,1fr)}.vdp-share{margin-left:0}}

/* ── Claude 29.10.2026: Hero-Videos im Wechsel (weiche Überblendung), dunkler Kino-Look in beiden Modi ── */
.hero-v3 .hero-bg video.hv{opacity:0;transition:opacity 1.1s ease;filter:brightness(.86) saturate(1.08)}
.hero-v3 .hero-bg video.hv.on{opacity:1}
.hero-v3 .hero-bg{background:#0c0c0c}
.hero-v3 .hero-fade,:root[data-theme="light"] .hero-v3 .hero-fade{background:linear-gradient(90deg,rgba(12,12,12,.78) 0%,rgba(12,12,12,.42) 42%,rgba(12,12,12,.08) 72%),linear-gradient(180deg,rgba(12,12,12,.45) 0%,rgba(12,12,12,0) 26%,rgba(12,12,12,.25) 70%,var(--bg) 100%),radial-gradient(70% 60% at 85% 15%,rgba(255,51,78,.18),transparent 60%)!important}
:root[data-theme="light"] .hero-v3 .hero-slide-title,:root[data-theme="light"] .hero-v3 h1,:root[data-theme="light"] .hero-v3 h1 a{color:#fff!important;text-shadow:0 2px 26px rgba(0,0,0,.55)!important}
:root[data-theme="light"] .hero-v3 .hero-slide-ago,:root[data-theme="light"] .hero-v3 .hero-teaser,:root[data-theme="light"] .hero-v3 .hero-meta{color:#dcdcdc!important}
:root[data-theme="light"] .hero-v3 .hero-status{color:#eeeeee;background:rgba(12,12,12,.45);border-color:rgba(255,255,255,.18)}
/* Live-Ticker: Etikett und Laufband nebeneinander */
.ticker{display:flex;align-items:center;padding:0}
.ticker-tag{flex:0 0 auto;display:inline-flex;align-items:center;gap:.45rem;margin:0 .2rem 0 .9rem;padding:.28rem .7rem;border-radius:99px;font:700 .62rem/1 'Space Grotesk',Inter,sans-serif;letter-spacing:.16em;color:#fff;background:linear-gradient(135deg,#db0b27,#e3122e);position:relative;z-index:2}
.ticker-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:#f14159;box-shadow:0 0 8px rgba(241,65,89,.9);animation:pulse 2.2s infinite}
.ticker-viewport{flex:1 1 auto;min-width:0;overflow:hidden;padding:.45rem 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 2%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 2%,#000 96%,transparent)}

/* ═══ ANDY 29.10. 01:11: Hero-Schrift größer, Block senkrecht mittig und links mit Abstand ═══ */
.hero-v3{align-items:center!important;padding-top:calc(var(--nav-h,62px) + 2rem)!important;padding-bottom:3rem!important}
.hero-v3 .wrap{padding-left:clamp(1.25rem,7vw,8.5rem)!important;padding-right:clamp(1.25rem,5vw,6rem)!important}
.hero-v3 .hero-kicker-row{margin-top:0!important}
.hero-rot{min-height:clamp(19rem,31vw,30rem)!important}
.hero-slide{justify-content:center!important;align-items:flex-start!important;text-align:left!important}
.hero-slide-title{font-size:clamp(3rem,6.3vw,6.4rem)!important;line-height:1.03!important;max-width:19ch!important;-webkit-text-stroke:3px rgba(6,6,6,.95)!important}
.hero-slide-cta{font-size:1.02rem;padding:.9rem 1.9rem}
@media (max-width:760px){
  .hero-slide-title{font-size:clamp(2.3rem,9.5vw,3.2rem)!important;max-width:none!important;-webkit-text-stroke:2px rgba(6,6,6,.95)!important}
  .hero-rot{min-height:24rem!important}
}

/* ═══ ANDY 29.10. 01:14: neues Logo (Bildmarke + fetter Schriftzug) – größer und gestochen scharf als SVG ═══ */
nav#topnav .logo-png,nav#topnav .logo-svg img{height:40px!important;width:auto!important}
.site-footer .footer-logo img{height:42px!important;width:auto!important}
@media (max-width:1179px){nav#topnav .logo-png,nav#topnav .logo-svg img{height:32px!important}.site-footer .footer-logo img{height:34px!important}}
@media (max-width:520px){nav#topnav .logo-png,nav#topnav .logo-svg img{height:27px!important}}

/* ═══ Claude 29.10.2026: Archiv mit Zeitleiste ═══ */
.tl-hero .tl-stats{margin-top:1rem;display:inline-flex;align-items:baseline;gap:.5rem;padding:.45rem 1rem;border-radius:99px;background:rgba(12,12,12,.45);border:1px solid rgba(255,255,255,.14);color:#dcdcdc;font-size:.9rem;backdrop-filter:blur(8px)}
.tl-hero .tl-stats b{font:800 1.15rem/1 Inter,sans-serif;background:linear-gradient(90deg,#ff334e,#f14159);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tl-wrap{padding-top:1.6rem;padding-bottom:4rem}
.tl-filter{position:sticky;top:calc(var(--nav-h,62px) + .5rem);z-index:20;display:flex;flex-direction:column;gap:.75rem;padding:1rem 1.1rem;margin-bottom:2rem;border-radius:18px;background:color-mix(in srgb,var(--bg2,#181818) 88%,transparent);border:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 14px 40px rgba(0,0,0,.18)}
.tl-chips{display:flex;gap:.45rem;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.tl-chips::-webkit-scrollbar{display:none}
.tl-chip{flex:0 0 auto;padding:.42rem .95rem;border-radius:99px;border:1px solid var(--line);color:var(--dim);font-size:.82rem;font-weight:600;text-decoration:none;white-space:nowrap;transition:all .2s}
.tl-chip:hover{color:var(--ink);border-color:var(--accent)}
.tl-chip.on{color:#121212;background:linear-gradient(135deg,#ca1029,#ee2742);border-color:transparent}
.tl-row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.tl-select select,.tl-search input{height:42px;border-radius:12px;border:1px solid var(--line);background:var(--bg,#0d0d0d);color:var(--ink);font:500 .9rem Inter,sans-serif;padding:0 .9rem}
.tl-select select{min-width:12rem;cursor:pointer}
.tl-search{flex:1 1 16rem;position:relative;display:flex}
.tl-search svg{position:absolute;left:.8rem;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--dim2,#8a8a8a)}
.tl-search input{width:100%;padding-left:2.4rem}
.tl-select select:focus,.tl-search input:focus{outline:none;border-color:var(--accent)}
.tl-go{height:42px;padding:0 1.3rem;border:0;border-radius:12px;cursor:pointer;color:#fff;font:700 .9rem Inter,sans-serif;background:linear-gradient(135deg,#db0b27,#e3122e)}
.tl-reset{font-size:.85rem;color:var(--dim);text-decoration:underline}
.tl-grid{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:2.6rem;align-items:start}
.tl{position:relative;padding-left:2.2rem}
.tl::before{content:"";position:absolute;left:.55rem;top:.4rem;bottom:0;width:2px;border-radius:2px;background:linear-gradient(180deg,#ff334e,#f14159 40%,rgba(241,65,89,.08))}
.tl-month{position:sticky;top:calc(var(--nav-h,62px) + 8.6rem);z-index:5;margin:2.2rem 0 1rem -2.2rem;padding:0;font:800 clamp(1.4rem,2.6vw,2rem)/1.1 Inter,sans-serif;letter-spacing:-.02em;color:var(--ink)}
.tl-month span{display:inline-block;padding:.35rem 1rem .35rem 2.2rem;border-radius:0 99px 99px 0;background:color-mix(in srgb,var(--bg,#0d0d0d) 82%,transparent);backdrop-filter:blur(10px)}
.tl-month:first-child{margin-top:0}
.tl-day{position:relative;display:flex;align-items:center;gap:.7rem;margin:1.5rem 0 .8rem;color:var(--accent2,#f14159);font:700 .78rem/1 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.tl-day i{position:absolute;left:-2.05rem;width:14px;height:14px;border-radius:50%;background:#161616;border:3px solid #f14159;box-shadow:0 0 0 4px rgba(241,65,89,.15),0 0 16px rgba(241,65,89,.6)}
.tl-item{position:relative;display:grid;grid-template-columns:3.6rem minmax(0,1fr);gap:.9rem;margin-bottom:.9rem}
.tl-item::before{content:"";position:absolute;left:-1.82rem;top:1.15rem;width:8px;height:8px;border-radius:50%;background:#ff334e;opacity:.7}
.tl-time{padding-top:1rem;color:var(--dim2,#8a8a8a);font:600 .8rem/1 Inter,sans-serif;font-variant-numeric:tabular-nums}
.tl-card{display:grid;grid-template-columns:200px minmax(0,1fr);gap:1.1rem;padding:.7rem;border-radius:18px;text-decoration:none!important;color:inherit;background:var(--bg2,#181818);border:1px solid var(--line);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.tl-card:hover{transform:translateY(-3px);border-color:rgba(255,51,78,.5);box-shadow:0 16px 40px rgba(0,0,0,.25)}
.tl-img{display:block;border-radius:12px;overflow:hidden;aspect-ratio:16/10;background:#161616}
.tl-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.tl-card:hover .tl-img img{transform:scale(1.06)}
.tl-body{display:flex;flex-direction:column;gap:.4rem;min-width:0;padding:.3rem .4rem .3rem 0}
.tl-meta{display:flex;gap:.45rem;flex-wrap:wrap}
.tl-cat{font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#eb1330;background:rgba(202,16,41,.14);padding:.24rem .6rem;border-radius:99px}
.tl-co{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line);padding:.2rem .55rem;border-radius:99px}
.tl-title{font:800 1.08rem/1.3 Inter,sans-serif;letter-spacing:-.01em;color:var(--ink)}
.tl-teaser{font-size:.88rem;line-height:1.55;color:var(--dim);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tl-empty{padding:2rem 0;color:var(--dim)}
.tl-nav{position:sticky;top:calc(var(--nav-h,62px) + 9rem);padding:1.1rem;border-radius:18px;background:var(--bg2,#181818);border:1px solid var(--line)}
.tl-nav h2{margin:0 0 .7rem;font:700 .7rem/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.tl-nav ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.2rem;max-height:60vh;overflow-y:auto}
.tl-nav a{display:flex;justify-content:space-between;gap:.6rem;padding:.5rem .7rem;border-radius:10px;color:var(--dim);text-decoration:none;font-size:.88rem;transition:background .2s,color .2s}
.tl-nav a b{font-size:.75rem;color:var(--dim2,#8a8a8a);font-variant-numeric:tabular-nums}
.tl-nav a:hover,.tl-nav a.cur{background:rgba(255,51,78,.1);color:var(--ink)}
.tl-nav a.on{color:#121212;background:linear-gradient(135deg,#ca1029,#ee2742)}.tl-nav a.on b{color:#121212}
.tl-load{display:flex;justify-content:center;margin-top:1.6rem}
.tl-load-btn{height:46px;padding:0 1.8rem;border-radius:99px;border:1px solid var(--line);background:var(--bg2,#181818);color:var(--ink);font:700 .9rem Inter,sans-serif;cursor:pointer}
.tl-load-btn.busy{opacity:.6;cursor:progress}
:root[data-theme="light"] .tl-card,:root[data-theme="light"] .tl-nav{background:#fff;box-shadow:0 6px 22px rgba(22,22,22,.06)}
:root[data-theme="light"] .tl-filter{background:rgba(255,255,255,.9)}
:root[data-theme="light"] .tl-select select,:root[data-theme="light"] .tl-search input{background:#f8f8f8}
:root[data-theme="light"] .tl-day i{background:#fff}
@media (max-width:1100px){.tl-grid{grid-template-columns:1fr}.tl-nav{display:none}}
@media (max-width:700px){
  .tl-filter{position:static}
  .tl{padding-left:1.6rem}.tl::before{left:.3rem}
  .tl-month{margin-left:-1.6rem;top:calc(var(--nav-h,62px) + .3rem)}.tl-month span{padding-left:1.6rem}
  .tl-day i{left:-1.6rem;width:12px;height:12px}
  .tl-item{grid-template-columns:1fr;gap:.3rem}.tl-item::before{left:-1.45rem;top:.35rem}
  .tl-time{padding-top:0}
  .tl-card{grid-template-columns:1fr}
}
[dir="rtl"] .tl{padding-left:0;padding-right:2.2rem}[dir="rtl"] .tl::before{left:auto;right:.55rem}
[dir="rtl"] .tl-month{margin:2.2rem -2.2rem 1rem 0}[dir="rtl"] .tl-day i{left:auto;right:-2.05rem}[dir="rtl"] .tl-item::before{left:auto;right:-1.82rem}

/* ═══ Claude 29.10.2026: Rubrik „KI & Automobil“ – Partnerbox DaVinci AI ═══ */
.ai-partner{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1.4rem;align-items:center;margin:2rem 0 2.4rem;padding:1.5rem 1.7rem;border-radius:22px;overflow:hidden;color:#f4f4f4;
  background:radial-gradient(120% 140% at 0% 0%,rgba(255,51,78,.28),transparent 55%),radial-gradient(120% 140% at 100% 100%,rgba(241,65,89,.22),transparent 55%),#111111;border:1px solid rgba(241,65,89,.35);box-shadow:0 18px 50px rgba(12,12,12,.35)}
.ai-partner::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.06) 45%,transparent 60%);animation:aiSheen 6s ease-in-out infinite;pointer-events:none}
@keyframes aiSheen{0%,100%{transform:translateX(-60%)}50%{transform:translateX(60%)}}
.ai-partner-mark{width:74px;height:74px;border-radius:20px;display:grid;place-items:center;background:conic-gradient(from 200deg,#db0b27,#ff334e,#f14159,#f04259,#db0b27);box-shadow:0 0 30px rgba(255,51,78,.45)}
.ai-partner-mark span{width:62px;height:62px;border-radius:16px;display:grid;place-items:center;background:#111111;font:900 1.15rem/1 Inter,sans-serif;letter-spacing:.02em;color:#fff}
.ai-partner small{display:inline-block;font:800 .66rem/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#f14159;margin-bottom:.45rem}
.ai-partner h2{margin:0 0 .35rem;font:900 clamp(1.3rem,2.4vw,1.75rem)/1.15 Inter,sans-serif;letter-spacing:-.02em;color:#fff}
.ai-partner p{margin:0;color:#f04259;font-size:.95rem;line-height:1.55;max-width:62ch}
.ai-partner-cta{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.4rem;border-radius:99px;text-decoration:none!important;white-space:nowrap;font:800 .9rem/1 Inter,sans-serif;color:#121212!important;background:linear-gradient(135deg,#ca1029,#ee2742);box-shadow:0 10px 28px rgba(202,16,41,.4);transition:transform .2s}
.ai-partner-cta:hover{transform:translateY(-2px)}
@media (max-width:760px){.ai-partner{grid-template-columns:1fr;text-align:left}.ai-partner-mark{width:60px;height:60px}.ai-partner-mark span{width:50px;height:50px;font-size:1rem}}
@media (prefers-reduced-motion:reduce){.ai-partner::after{animation:none}}

/* Sprachwahl: Kürzel + Sprachname */
.lang-dd-item{display:flex;align-items:center;gap:.6rem}
.lang-dd-item b{min-width:1.9rem;font-weight:800}
.lang-dd-item span{font-weight:500;opacity:.85}
.lang-dd-menu{min-width:12.5rem}

/* ═══ Andy 29.10. 01:51: Fußbereich auch im hellen Modus dunkel ═══ */
.site-footer{--bg:#0d0d0d;--bg2:#101010;--bg3:#1e1e1e;--ink:#f6f6f6;--ink-soft:#dcdcdc;--dim:#b6b6b6;--dim2:#8a8a8a;--accent:#ff334e;--accent2:#f14159;--line:rgba(255,255,255,.08);background:#101010!important;color:#b6b6b6;border-top-color:rgba(255,255,255,.06)!important}
.site-footer .footer-col h4,.site-footer h3,.site-footer h4{color:#f6f6f6!important}
.site-footer .footer-col a,.site-footer .footer-brand p{color:#b6b6b6!important}
.site-footer .footer-col a:hover{color:#f14159!important}
:root[data-theme] .site-footer .footer-social a,:root[data-theme] .site-footer .footer-bottom,:root[data-theme] .site-footer .footer-bottom span,:root[data-theme] .site-footer .footer-bottom a,.site-footer .footer-social a,.site-footer .footer-bottom,.site-footer .footer-bottom span,.site-footer .footer-bottom a{color:#cbcbcb!important}
.site-footer .footer-bottom{border-top-color:rgba(255,255,255,.08)!important}
:root[data-theme="light"] .site-footer .footer-logo .fl-dark,.site-footer .footer-logo .fl-dark{display:block!important}
:root[data-theme="light"] .site-footer .footer-logo .fl-light,.site-footer .footer-logo .fl-light{display:none!important}

/* ═══ Andy 29.10. 02:00: 3D-Ansicht der Beiträge beim Darüberfahren ═══ */
@media (hover:hover) and (pointer:fine) {
  article.card,.ng-card,.desk-card,.video-card,.tl-card,.wt24-card,.intel-teaser-card,.vdp-item,.side-v2{position:relative;transform-style:preserve-3d;backface-visibility:hidden;transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease}
  .tilt-on{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px) scale3d(1.025,1.025,1.025)!important;
    transition:transform .12s ease-out,box-shadow .3s ease!important;z-index:4;
    box-shadow:0 34px 60px -24px rgba(12,12,12,.55),0 18px 40px -20px rgba(219,11,39,.45),0 0 0 1px rgba(241,65,89,.22)!important}
  .tilt-on img{transform:scale(1.07);transition:transform .6s ease}
  .tilt-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:6;opacity:0;transition:opacity .35s ease;
    background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.30),rgba(255,255,255,.06) 35%,rgba(255,255,255,0) 60%)}
  .tilt-on .tilt-glare{opacity:1}
  :root[data-theme="light"] .tilt-on .tilt-glare{opacity:.75}
}

/* Claude 29.10.2026: Home-Symbol vorne in der Rubrikenleiste + Copyright-Link im Footer */
nav#topnav .nav-links a.nv-home{display:inline-flex!important;gap:9px;padding:0 12px 0 6px!important}
nav#topnav .nav-links a.nv-home::after{left:4px;right:4px}
nav#topnav .nav-links a.nv-home .nv-hic{width:19px;height:19px;flex:0 0 auto;transition:transform .15s}
nav#topnav .nav-links a.nv-home:hover .nv-hic{transform:translateY(-1px)}
nav#topnav .nav-links a.nv-home[aria-current="page"]{color:var(--nv-blue,#db0b27)!important}
nav#topnav .nav-links a.nv-home .nv-hlabel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:1179px){
  nav#topnav .nav-links a.nv-home{padding:15px 4px!important}
  nav#topnav .nav-links a.nv-home .nv-hlabel{position:static;width:auto;height:auto;overflow:visible;clip:auto}
}
.site-footer .footer-bottom a.ft-copy-dv{color:#ff334e!important;font-weight:600;text-decoration:none}
.site-footer .footer-bottom a.ft-copy-dv:hover{color:#fff!important;text-decoration:underline}
/* Claude 29.10.2026: Handy – Logo so groß, dass Menü-Knopf sichtbar bleibt */
@media (max-width:520px){nav#topnav .logo-png,nav#topnav .logo-svg img{height:18px!important;width:auto!important}}
@media (max-width:370px){nav#topnav .logo-png,nav#topnav .logo-svg img{height:15px!important}}

/* ═══ Claude 29.10.2026: App-Knopf unten links (wie WorldTrader24) ═══ */
.app-fab{position:fixed;left:20px;bottom:20px;z-index:1250;display:flex;align-items:center;gap:11px;padding:7px 16px 7px 7px;border-radius:18px;text-decoration:none!important;
  background:rgba(14,14,14,.9);color:#fff!important;-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 14px 34px rgba(12,12,12,.35),0 0 0 1px rgba(241,65,89,.16) inset;opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease,box-shadow .2s}
.app-fab.in{opacity:1;transform:none}
.app-fab:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(12,12,12,.42),0 0 0 1px rgba(241,65,89,.35) inset}
.app-fab img{width:40px;height:40px;border-radius:10px;display:block;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.app-fab span{display:flex;flex-direction:column;gap:3px;line-height:1}
.app-fab b{font:700 14px/1 Inter,system-ui,sans-serif;letter-spacing:.01em}
.app-fab small{font:500 11.5px/1 Inter,system-ui,sans-serif;color:#f04259}
@media (max-width:640px){.app-fab{left:12px;bottom:14px;padding:5px;border-radius:15px}.app-fab span{display:none}.app-fab img{width:42px;height:42px;border-radius:11px}}
@media print{.app-fab{display:none}}
/* Hinweis-Banner unten links, blendet sich alle 5 Minuten ein */
.app-promo{position:fixed;left:20px;bottom:20px;z-index:1260;width:min(372px,calc(100vw - 24px));display:flex;gap:14px;align-items:flex-start;padding:16px 40px 16px 16px;border-radius:20px;
  background:linear-gradient(160deg,rgba(29,29,29,.97),rgba(12,12,12,.97));color:#fff;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 22px 50px rgba(12,12,12,.45),0 0 0 1px rgba(241,65,89,.18) inset;transform:translateY(24px) scale(.97);opacity:0;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s;pointer-events:none}
.app-promo.show{transform:none;opacity:1;pointer-events:auto}
.app-promo::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(60% 80% at 0% 0%,rgba(240,47,73,.25),transparent 70%);pointer-events:none}
.app-promo img{position:relative;width:56px;height:56px;border-radius:14px;flex:0 0 auto;box-shadow:0 8px 20px rgba(0,0,0,.45),0 0 24px rgba(240,47,73,.35)}
.app-promo div{position:relative;min-width:0}
.app-promo b{display:block;font:700 15px/1.25 Inter,system-ui,sans-serif;margin-bottom:4px}
.app-promo span{display:block;font:500 13px/1.45 Inter,system-ui,sans-serif;color:#c4c4c4;margin-bottom:11px}
.app-promo-go{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:10px;border:0;cursor:pointer;color:#fff!important;text-decoration:none!important;
  font:700 13px/1 Inter,system-ui,sans-serif;background:linear-gradient(135deg,#db0b27,#ed223d 60%,#e3122e);box-shadow:0 6px 16px rgba(219,11,39,.4)}
.app-promo-go:hover{filter:brightness(1.08)}
.app-promo-x{position:absolute;top:8px;right:8px;width:28px;height:28px;border:0;border-radius:8px;background:rgba(255,255,255,.07);color:#d4d4d4;font:400 18px/1 Inter,sans-serif;cursor:pointer}
.app-promo-x:hover{background:rgba(255,255,255,.14);color:#fff}
.app-promo-bar{position:absolute;left:16px;right:16px;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,#f02f49,#f14159);transform-origin:left;transform:scaleX(0)}
.app-promo.show .app-promo-bar{animation:apBar 15s linear forwards}
@keyframes apBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.app-fab.away{opacity:0!important;pointer-events:none}
@media (max-width:640px){.app-promo{left:12px;bottom:12px;padding:14px 38px 14px 14px}.app-promo img{width:48px;height:48px;border-radius:12px}}
@media (prefers-reduced-motion:reduce){.app-promo{transition:opacity .2s}.app-promo.show .app-promo-bar{animation:none}}

/* Claude 30.10.2026: KI-Bildnachweis am Titelbild */
.article-hero{position:relative}
.article-hero .hero-ai-badge{position:absolute;left:14px;top:14px;z-index:2;padding:6px 12px;border-radius:999px;background:rgba(14,14,14,.78);color:#fff;font:600 12.5px/1 Inter,system-ui,sans-serif;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.article-hero .hero-credit{margin-top:8px;font:500 13px/1.4 Inter,system-ui,sans-serif;color:var(--dim,#767676)}

/* Claude 30.10.2026: Zulassungsreport Mittel- und Osteuropa */
.mr-page h2{margin:34px 0 14px}
.mr-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:22px 0}
.mr-kpis div{border:1px solid var(--line,#e6e6e6);border-radius:14px;padding:16px 18px}
.mr-kpis b{display:block;font:800 28px/1.1 Inter,system-ui,sans-serif}
.mr-kpis span{font-size:13.5px;color:var(--dim,#767676)}
.mr-bars{display:grid;gap:7px;margin:8px 0 18px}
.mr-bar{display:grid;grid-template-columns:140px 1fr 86px;align-items:center;gap:10px;font-size:14.5px}
.mr-bt{height:14px;background:var(--soft,#f1f1f1);border-radius:7px;overflow:hidden}
.mr-bt i{display:block;height:100%;background:linear-gradient(90deg,#ff0b2c,#ff334e);border-radius:7px}
.mr-bars-brand .mr-bt i{background:linear-gradient(90deg,#e8461e,#ff2945)}
.mr-bv{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.mr-table-wrap{overflow-x:auto}
.mr-table{width:100%;border-collapse:collapse;font-size:14.5px}
.mr-table th,.mr-table td{padding:9px 10px;border-bottom:1px solid var(--line,#e6e6e6);text-align:left;vertical-align:top}
.mr-table th{font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--dim,#767676)}
.mr-up{color:#8a0a1b;font-weight:600}.mr-down{color:#c0262d;font-weight:600}
.mr-note{font-size:13px}
.mr-sources{font-size:14px;line-height:1.55}
.brand-chip.active{background:#ff0b2c;color:#fff}
@media(max-width:640px){.mr-kpis{grid-template-columns:1fr}.mr-bar{grid-template-columns:96px 1fr 70px;font-size:13px}}
.mr-page{max-width:1040px;margin:0 auto;padding:26px 0 70px}
.mr-page .article-teaser{max-width:820px}
.mr-page .crumbs{font-size:13px;color:var(--dim,#767676);margin-bottom:14px}

.mr-country-box{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin:0 0 26px;padding:16px 20px;border:1px solid var(--line,#e6e6e6);border-radius:14px;text-decoration:none;color:inherit}
.mr-country-box .cat-label{flex-basis:100%}
.mr-country-box b{font:800 26px/1 Inter,system-ui,sans-serif}
.mr-country-box .mr-cta{margin-left:auto;font-weight:600;color:#ff0b2c}

/* Claude 30.10.2026: Footer mit edlem Hintergrundvideo (langsame Nachtfahrt, blau gegradet) */
.site-footer.has-video{position:relative;isolation:isolate;overflow:hidden}
.ft-video{position:absolute;inset:0;z-index:-1;pointer-events:none}
.ft-video video{width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity 2.2s ease,transform 14s ease-out;filter:saturate(.85)}
.ft-video.on video{opacity:.62;transform:scale(1)}
.ft-video::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#111111 0%,rgba(17,17,17,.6) 22%,rgba(17,17,17,.38) 58%,rgba(13,13,13,.88) 100%),radial-gradient(ellipse at 20% 30%,rgba(255,51,78,.18),transparent 55%)}
@media (prefers-reduced-motion:reduce){.ft-video video{transition:none;transform:none}}

/* Claude 31.10.2026 (Andy): Teilen – LinkedIn, X, Facebook, Instagram mit Marken-Hover */
.share-row{flex-wrap:wrap}
.share-btn svg{width:17px;height:17px;fill:currentColor;display:block}
a.share-btn{text-decoration:none}
.share-btn.sb-li:hover{background:#c20a23;border-color:#c20a23;color:#fff}
.share-btn.sb-x:hover{background:#000;border-color:#555;color:#fff}
.share-btn.sb-fb:hover{background:#f21835;border-color:#f21835;color:#fff}
.share-btn.sb-ig:hover{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#ed2640 90%);border-color:transparent;color:#fff}
.share-sep{width:1px;height:22px;background:var(--line);margin:0 2px}
.share-msg{font-size:.8rem;color:var(--accent,#f63b54)}
@media print{.share-row{display:none}}

/* Claude 31.10.2026 (Audit): Cookie-Hinweis über den schwebenden Knöpfen (App, Eva, Barrierefreiheit), sonst auf dem Handy nicht klickbar */
#cookieBanner{z-index:10000}

/* Claude 01.11.2026: aktiver Filter im hellen Design lesbar (filter-badge.on (Claude 01.11)) */
:root[data-theme="light"] .filter-badge.on,:root[data-theme="light"] .pg.on{color:#fff;background:var(--accent-deep,#f63b54);border-color:var(--accent-deep,#f63b54)}

/* Claude 01.11.2026 (Andy): passender WorldTrader24-Link unter dem Artikel */
.wt24-deep{margin:1.4em 0}
.wt24-deep a{display:inline-flex;align-items:center;gap:.5em;padding:.7em 1.1em;border-radius:12px;background:var(--accent-dim,rgba(255,51,78,.14));border:1px solid var(--accent,#ff334e);color:var(--ink,#f6f6f6);font-weight:650;text-decoration:none;line-height:1.35;transition:background .2s,transform .2s}
.wt24-deep a:hover{background:var(--accent-deep,#f63b54);color:#fff;transform:translateY(-1px)}
:root[data-theme="light"] .wt24-deep a{color:#131313}:root[data-theme="light"] .wt24-deep a:hover{color:#fff}

/* Claude 02.11.2026: Admin-Login-Symbol in der Navigation */
.nav-admin{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
nav#topnav .nav-admin svg{width:18px;height:18px}

/* ── Claude 02.11.2026 (Andy): Marktplatz- und Werbe-Box mit Hintergrundvideo (partials/promo_boxes.php) ── */
.pbx{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;min-height:320px;margin:2.2rem 0;padding:clamp(26px,4.2vw,52px);border-radius:26px;color:#fff;background:radial-gradient(120% 140% at 0% 0%,#700917 0%,#161616 55%,#0e0e0e 100%);box-shadow:0 34px 90px -36px rgba(12,12,12,.65),inset 0 1px 0 rgba(255,255,255,.06)}
.pbx-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.03)}
.pbx-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(12,12,12,.93) 0%,rgba(12,12,12,.74) 40%,rgba(12,12,12,.18) 100%)}
.pbx-ad{background:radial-gradient(120% 140% at 100% 0%,#202020 0%,#0c0c0c 55%,#080808 100%)}
.pbx-ad .pbx-shade{background:linear-gradient(100deg,rgba(7,7,7,.93) 0%,rgba(7,7,7,.72) 42%,rgba(7,7,7,.15) 100%)}
.pbx-ad::after{content:"";position:absolute;z-index:-1;right:-120px;bottom:-160px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(249,22,52,.35),transparent 65%);pointer-events:none}
.pbx-in{position:relative;max-width:640px}
.pbx-k{display:inline-flex;align-items:center;gap:9px;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#f04259}
.pbx-ad .pbx-k{color:#fdba74}
.pbx-dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 currentColor;animation:pbxPulse 2.2s infinite}
@keyframes pbxPulse{0%{box-shadow:0 0 0 0 rgba(240,66,89,.55)}70%{box-shadow:0 0 0 9px rgba(240,66,89,0)}100%{box-shadow:0 0 0 0 rgba(240,66,89,0)}}
.pbx .pbx-h{font-family:var(--font-display);font-weight:800;font-size:clamp(1.55rem,2.6vw,2.15rem);line-height:1.1;letter-spacing:-.015em;color:#fff!important;margin:16px 0 10px;text-wrap:balance}
.pbx .pbx-h-xl{font-size:clamp(1.75rem,3.3vw,2.75rem)}
.pbx .pbx-p{color:rgba(241,241,241,.88)!important;font-size:1.02rem;line-height:1.6;margin:0 0 22px;max-width:56ch}
.pbx-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none!important;margin:0 0 24px!important;padding:0!important}
.pbx-chips li{margin:0!important;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);font-size:.86rem;font-weight:600;color:#fff;list-style:none}
.pbx-chips li::before{content:none!important}
.pbx-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px}
.pbx .pbx-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:999px;font-weight:800;font-size:1rem;color:#fff!important;text-decoration:none!important;background:linear-gradient(110deg,#ff1e3c 0%,#ff2f4b 45%,#ee223d 100%);background-size:170% 100%;box-shadow:0 18px 42px -14px rgba(237,35,62,.95);transition:transform .2s,box-shadow .2s,background-position .5s}
.pbx .pbx-btn:hover{transform:translateY(-2px);background-position:100% 0;box-shadow:0 24px 54px -14px rgba(238,34,61,.85)}
.pbx .pbx-btn span{transition:transform .2s}.pbx .pbx-btn:hover span{transform:translateX(4px)}
.pbx .pbx-btn-hot{color:#0e0e0e!important;background:linear-gradient(110deg,#fb2d49 0%,#f50b2a 50%,#fa1534 100%);background-size:170% 100%;box-shadow:0 18px 42px -14px rgba(249,22,52,.95)}
.pbx .pbx-btn-hot:hover{box-shadow:0 24px 54px -14px rgba(250,21,52,.8)}
.pbx-note{color:rgba(241,241,241,.72);font-size:.86rem}
@media (max-width:760px){.pbx{min-height:0;border-radius:20px;padding:26px 20px}.pbx-shade,.pbx-ad .pbx-shade{background:linear-gradient(180deg,rgba(12,12,12,.72),rgba(12,12,12,.9))}.pbx .pbx-btn{width:100%;justify-content:center}}
@media (prefers-reduced-motion:reduce){.pbx-dot{animation:none}.pbx .pbx-btn{transition:none}}

/* ══════════════════════════════════════════════════════════════════════
   Claude 02.11.2026 (Andy): „Stand 2030“ – Newsletter mit Video, WT24-Karussell, Länder-Kacheln mit Stadtvideos
   ══════════════════════════════════════════════════════════════════════ */
@property --nl30a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.nl30-band { padding: clamp(40px, 6vw, 88px) 0; }
.nl30 { position: relative; isolation: isolate; overflow: hidden; border-radius: 30px; min-height: 440px; display: grid; place-items: center;
  padding: clamp(52px, 7vw, 104px) clamp(20px, 5vw, 72px); background: #0c0c0c; color: #f8f8f8; text-align: center;
  box-shadow: 0 40px 90px -40px rgba(148,12,30,.65), 0 0 0 1px rgba(255, 255, 255, .07) inset; }
.nl30::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; z-index: 3; pointer-events: none;
  background: conic-gradient(from var(--nl30a), rgba(255,51,78,0) 0deg, rgba(255,51,78,.95) 60deg, rgba(241,65,89,.9) 120deg, rgba(247,59,84,.85) 180deg, rgba(255,51,78,0) 240deg, rgba(255,51,78,0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: nl30spin 9s linear infinite; }
@keyframes nl30spin { to { --nl30a: 360deg; } }
.nl30-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; transform: scale(1.03); }
.nl30-shade { position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(70% 85% at 50% 50%, rgba(11,11,11,.30), rgba(11,11,11,.86) 78%), linear-gradient(180deg, rgba(11,11,11,.55), rgba(11,11,11,.18) 45%, rgba(11,11,11,.82)); }
.nl30-shade::after { content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(60% 70% at 50% 50%, transparent 30%, #000 100%); mask-image: radial-gradient(60% 70% at 50% 50%, transparent 30%, #000 100%); }
.nl30-aurora { position: absolute; inset: -30%; z-index: -1; pointer-events: none;
  background: radial-gradient(28% 26% at 18% 22%, rgba(255,51,78,.28), transparent 70%), radial-gradient(26% 26% at 86% 82%, rgba(241,65,89,.20), transparent 70%), radial-gradient(20% 20% at 70% 10%, rgba(247,59,84,.18), transparent 70%); }
.nl30-body { position: relative; max-width: 760px; width: 100%; }
.nl30-kicker { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16); font: 700 .72rem/1 var(--font-body, inherit); letter-spacing: .2em; text-transform: uppercase; color: #e7e7e7; }
.nl30-kicker i { width: 8px; height: 8px; border-radius: 50%; background: #f14159; box-shadow: 0 0 12px #f14159; animation: nl30pulse 2.2s ease-in-out infinite; }
@keyframes nl30pulse { 50% { opacity: .35; transform: scale(.8); } }
.nl30 .nl30-title { font-family: var(--font-display); font-size: clamp(2.1rem, 4.8vw, 3.7rem); line-height: 1.04; letter-spacing: -.035em; margin: 20px 0 16px; font-weight: 800;
  background: linear-gradient(180deg, #ffffff 35%, #ffb7c1 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nl30 .nl30-sub { color: rgba(237,237,237,.86); font-size: clamp(1rem, 1.35vw, 1.16rem); line-height: 1.6; max-width: 580px; margin: 0 auto 32px; }
.nl30-form { max-width: 580px; margin: 0 auto; }
.nl30-field { display: flex; align-items: center; gap: 8px; padding: 7px; border-radius: 999px; background: rgba(17,17,17,.62); border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 14px 44px -14px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08); transition: border-color .25s, box-shadow .25s; }
.nl30-field:focus-within { border-color: rgba(255,51,78,.75); box-shadow: 0 0 0 4px rgba(255,51,78,.20), 0 14px 44px -14px rgba(0,0,0,.7); }
.nl30-mail { flex: none; margin-left: 14px; color: #f04259; }
.nl30-field input { flex: 1; min-width: 0; background: transparent !important; border: 0 !important; outline: 0; box-shadow: none !important; color: #fff !important;
  font: 500 1rem/1.2 var(--font-body, inherit); padding: 14px 6px; }
.nl30-field input::placeholder { color: rgba(236,200,205,.55); }
.nl30-btn { flex: none; display: inline-flex; align-items: center; gap: 9px; border: 0; cursor: pointer; border-radius: 999px; padding: 15px 24px;
  font: 750 .98rem/1 var(--font-body, inherit); color: #111111; background: linear-gradient(120deg, #f14159, #ff334e 50%, #f73b54); background-size: 200% 100%;
  box-shadow: 0 10px 32px -8px rgba(255,51,78,.75); transition: transform .2s, box-shadow .25s, background-position .5s; }
.nl30-btn:hover { transform: translateY(-1px); background-position: 100% 0; box-shadow: 0 14px 40px -8px rgba(241,65,89,.6); }
.nl30-btn svg { transition: transform .2s; } .nl30-btn:hover svg { transform: translateX(3px); }
.nl30 .nl30-hint { color: rgba(244,214,218,.72); margin: 16px 0 0; font-size: .84rem; letter-spacing: .02em; }
.nl30 .nl30-hint.nl-ok { color: #f14159; } .nl30 .nl30-hint.nl-err { color: #fda4af; }
.nl30--compact { min-height: 0; border-radius: 26px; padding: clamp(40px, 5vw, 64px) clamp(18px, 4vw, 48px); }
.nl30--compact .nl30-title { font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin: 16px 0 12px; }
.nl30--compact .nl30-sub { margin-bottom: 26px; font-size: 1rem; }
.newsletter-inline.nl30-inline { border: 0; background: none; padding: 0; margin-top: var(--s-8, 48px); }
@media (max-width: 600px) {
  .nl30 { border-radius: 24px; min-height: 0; }
  .nl30-field { flex-wrap: wrap; border-radius: 22px; padding: 8px; }
  .nl30-field input { flex-basis: calc(100% - 50px); padding: 12px 6px; }
  .nl30-btn { flex: 1 1 100%; justify-content: center; padding: 15px; }
}
@media (prefers-reduced-motion: reduce) { .nl30::before, .nl30-kicker i { animation: none; } }

/* ── WT24-Karussell ── */
.wt24-strip.wt30 { position: relative; overflow: hidden; padding: 3.4rem 0 3.6rem; border-top: 1px solid var(--line);
  background: radial-gradient(55% 120% at 8% 0%, rgba(255,51,78,.11), transparent 62%), radial-gradient(45% 110% at 100% 100%, rgba(241,65,89,.09), transparent 60%), var(--bg2); }
.wt30 .wt24-head { align-items: flex-end; margin-bottom: 1.6rem; gap: 1rem; }
.wt30-headl { display: flex; flex-direction: column; gap: .55rem; }
.wt30-kick { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 12px; border-radius: 999px; font: 700 .68rem/1 var(--font-body, inherit);
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.wt30-kick i { width: 7px; height: 7px; border-radius: 50%; background: #d6112c; box-shadow: 0 0 10px #d6112c; animation: nl30pulse 2s ease-in-out infinite; }
.wt30 .wt24-title { font-family: var(--font-display); font-size: clamp(1.45rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -.025em; }
.wt30 .wt24-count { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg3) 80%, transparent); font-weight: 700; color: var(--ink-soft, var(--dim)); }
.wt30 .wt24-frame { gap: 1rem; }
.wt30 .wt24-viewport { padding: 14px 0 22px; margin: -14px 0 -22px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.wt30 .wt24-track { gap: 18px; animation-name: wt30scroll; animation-duration: 70s; }
@keyframes wt30scroll { to { transform: translateX(calc(-50% - 9px)); } }
.wt30 .wt24-card { width: 250px; border-radius: 22px; border: 1px solid var(--line); background: var(--bg3); cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 14px 34px -22px rgba(0,0,0,.5); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .25s; }
.wt30 .wt24-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 26px 50px -24px color-mix(in srgb, var(--accent) 70%, transparent); }
.wt30 .wt24-imglink { position: relative; aspect-ratio: 16/11; background: linear-gradient(180deg, #f6f6f6, #eaeaea); }
.wt30 .wt24-imglink::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(12,12,12,.28)); pointer-events: none; }
.wt30 .wt24-card:hover img { transform: scale(1.06); }
.wt30-year { position: absolute; z-index: 1; left: 12px; top: 12px; padding: 5px 10px; border-radius: 999px; font: 750 .72rem/1 var(--font-body, inherit); color: #fff;
  background: rgba(17,17,17,.62); border: 1px solid rgba(255,255,255,.22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.wt30 .wt24-info { padding: 14px 16px 18px; gap: 6px; }
.wt30 .wt24-model { font-size: .98rem; font-weight: 780; letter-spacing: -.01em; }
.wt30 .wt24-meta { font-size: .82rem; }
.wt30 .wt24-btn { margin-top: 10px; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: 999px;
  background: linear-gradient(120deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #ef3850)); color: #fff !important; font-size: .78rem; font-weight: 750; line-height: 1.25;
  text-decoration: none !important; box-shadow: 0 8px 20px -10px var(--accent); transition: transform .2s, filter .2s; }
.wt30 .wt24-card:hover .wt24-btn { filter: brightness(1.08); transform: translateX(2px); }
.wt30 .wt24-arrow { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong, var(--line)); background: var(--bg3);
  color: var(--ink); box-shadow: 0 10px 26px -14px rgba(0,0,0,.45); transition: background .2s, color .2s, transform .2s, border-color .2s; }
.wt30 .wt24-arrow:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: scale(1.06); }
@media (max-width: 640px) { .wt30 .wt24-card { width: 200px; } .wt30 .wt24-head { flex-direction: column; align-items: flex-start; } }

/* ── Länder-Kacheln ── */
.cty30-wrap { padding-top: clamp(28px, 4vw, 56px); }
.cty30-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; grid-auto-flow: dense; }
.cty30 { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; min-height: 300px;
  border-radius: 26px; background: #141414; color: #fff !important; text-decoration: none !important; padding: 18px;
  box-shadow: 0 22px 50px -30px rgba(40,40,40,.7), 0 0 0 1px rgba(255,255,255,.06) inset; transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s; }
.cty30:hover, .cty30:focus-visible { transform: translateY(-6px); box-shadow: 0 34px 70px -30px rgba(237,33,60,.65), 0 0 0 1px rgba(255,51,78,.55) inset; }
.cty30-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; transition: transform 1.2s cubic-bezier(.2,.8,.2,1), opacity .8s; }
.cty30-vid { z-index: -2; opacity: 0; }
.cty30-vid.is-playing { opacity: 1; }
.cty30:hover .cty30-media { transform: scale(1.07); }
.cty30-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,10,10,.45) 0%, rgba(10,10,10,0) 30%, rgba(10,10,10,.12) 55%, rgba(10,10,10,.88) 100%); }
.cty30-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cty30-iso { padding: 8px 12px; border-radius: 12px; font: 800 .82rem/1 var(--font-mono, ui-monospace, monospace); letter-spacing: .12em; color: #fff;
  background: rgba(17,17,17,.45); border: 1px solid rgba(255,255,255,.28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cty30-region { padding: 7px 11px; border-radius: 999px; font: 700 .66rem/1 var(--font-body, inherit); letter-spacing: .18em; text-transform: uppercase; color: #f2f2f2;
  background: rgba(17,17,17,.55); border: 1px solid rgba(255,51,78,.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cty30-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.cty30 h3 { margin: 0 0 6px; font-family: var(--font-display); font-size: clamp(1.45rem, 2vw, 1.9rem); font-weight: 800; letter-spacing: -.025em; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.cty30-cap { display: inline-flex; align-items: center; gap: 6px; font-size: .92rem; font-weight: 600; color: rgba(240,240,240,.9); }
.cty30-go { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.3); transition: background .25s, transform .25s, color .25s; }
.cty30:hover .cty30-go { background: linear-gradient(135deg, #f14159, #ff334e); color: #111111; border-color: transparent; transform: rotate(45deg); }
@media (min-width: 1100px) {
  .cty30-grid { grid-template-columns: repeat(4, 1fr); }
  .cty30--hero { grid-column: span 2; grid-row: span 2; min-height: 620px; padding: 26px; }
  .cty30--hero h3 { font-size: clamp(2.4rem, 3.4vw, 3.4rem); }
  .cty30--hero .cty30-cap { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) { .cty30, .cty30-media { transition: none; } .cty30:hover .cty30-media { transform: none; } }
/* Länder ohne passendes Video: Standbild mit langsamer Kamerafahrt */
.cty30--still .cty30-media { animation: cty30kb 22s ease-in-out infinite alternate; transform-origin: 60% 40%; }
@keyframes cty30kb { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.14) translate3d(-2%, -1.5%, 0); } }
@media (prefers-reduced-motion: reduce) { .cty30--still .cty30-media { animation: none; } }

/* WT24-Karussell mit Video-Hintergrund (Drohnenflug über Fahrzeugbestand) – Claude 02.11.2026 */
.wt24-strip.wt30v { position: relative; isolation: isolate; background: #0c0c0c !important; border-top: 0; padding: 4.4rem 0 4.6rem; }
.wt30-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.wt30-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,11,11,.80) 0%, rgba(11,11,11,.42) 42%, rgba(11,11,11,.84) 100%), radial-gradient(60% 90% at 12% 0%, rgba(255,51,78,.28), transparent 60%), radial-gradient(45% 80% at 100% 100%, rgba(241,65,89,.16), transparent 60%); }
.wt30v .wt24-title { color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.45); }
.wt30v .wt24-count { background: rgba(17,17,17,.55); border-color: rgba(255,255,255,.22); color: #f2f2f2; }
.wt30v .wt30-kick { color: #ff334e; background: rgba(255,51,78,.16); border-color: rgba(255,51,78,.42); }
.wt30v .wt24-arrow { background: rgba(17,17,17,.6); border-color: rgba(255,255,255,.28); color: #fff; }
.wt30v .wt24-arrow:hover { background: var(--accent); border-color: var(--accent); }
.wt30v .wt24-card { box-shadow: 0 22px 54px -26px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.06) inset; }

.wt30-claim { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.05rem, 1.8vw, 1.4rem); letter-spacing: -.01em; line-height: 1.25;
  background: linear-gradient(90deg, #f14159, #ff334e 55%, #fdb5bf); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── Brotkrumen-Navigation „2030“ (Claude 02.11.2026, Andy) ── */
.crumbs30 { position: relative; z-index: 6; padding: 14px 0 6px; }
.crumbs30-in { display: flex; align-items: center; gap: 10px; min-width: 0; }
.crumbs30-back { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px 8px 10px; border-radius: 999px; font-weight: 700; font-size: .84rem;
  color: #fff !important; text-decoration: none !important; background: linear-gradient(120deg, var(--accent), color-mix(in srgb, var(--accent) 65%, #ef3850));
  box-shadow: 0 8px 22px -12px var(--accent); transition: transform .2s, box-shadow .2s, filter .2s; }
.crumbs30-back:hover { transform: translateX(-3px); filter: brightness(1.08); box-shadow: 0 10px 26px -10px var(--accent); }
.crumbs30-back svg { transition: transform .2s; } .crumbs30-back:hover svg { transform: translateX(-2px); }
.crumbs30-list { display: flex; align-items: center; min-width: 0; margin: 0; padding: 7px 16px; list-style: none; border-radius: 999px;
  background: color-mix(in srgb, var(--bg3) 82%, transparent); border: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  overflow-x: auto; scrollbar-width: none; }
.crumbs30-list::-webkit-scrollbar { display: none; }
.crumbs30-list li { display: flex; align-items: center; flex: none; font-size: .84rem; color: var(--dim); }
.crumbs30-list li + li::before { content: ""; flex: none; width: 6px; height: 6px; margin: 0 11px 0 7px; border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor; transform: rotate(45deg); opacity: .45; }
.crumbs30-list a { display: inline-flex; align-items: center; gap: 6px; color: var(--dim); text-decoration: none; white-space: nowrap; transition: color .15s; }
.crumbs30-list a:hover { color: var(--accent); }
.crumbs30-list li[aria-current] { flex: 0 1 auto; min-width: 0; color: var(--ink); font-weight: 650; }
.crumbs30-list li[aria-current] span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: min(56vw, 640px); }
@media (max-width: 640px) { .crumbs30 { padding: 10px 0 4px; } .crumbs30-back span { display: none; } .crumbs30-back { padding: 8px 10px; }
  .crumbs30-list li[aria-current] span { max-width: 46vw; } }
html[dir="rtl"] .crumbs30-back svg, html[dir="rtl"] .crumbs30-list li + li::before { transform: scaleX(-1); }
html[dir="rtl"] .crumbs30-list li + li::before { transform: rotate(-135deg); margin: 0 7px 0 11px; }
/* alte, kleine Artikel-Brotkrumen ausblenden – ersetzt durch die neue Leiste */
.crumbs30 ~ * nav.crumbs { display: none; }

/* Menüpunkt Werbung (Claude 02.11.2026, Andy) – dezent hervorgehoben */
#topnav a[href$="/advertise#live"] { color: var(--accent) !important; font-weight: 700; padding: 6px 12px !important; border-radius: 999px; background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
#topnav a[href$="/advertise#live"]:hover { background: var(--accent); color: #fff !important; }

/* ── Claude 02.11.2026 (Andy): Lese-Grenze / Registrierungs-Box „2030“ ── */
.article-body.rw-cut { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 220px), rgba(0,0,0,.18) calc(100% - 40px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 220px), rgba(0,0,0,.18) calc(100% - 40px), transparent); }
.paywall-rest:empty { display: none; }
.paywall-rest.rw-reveal { animation: rwReveal 1.1s cubic-bezier(.2,.8,.2,1); }
@keyframes rwReveal { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.rw30-slot:empty { display: none; }
.rw30-slot { margin: -40px 0 var(--s-8, 48px); position: relative; z-index: 2; }
@property --rw30a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.rw30 { position: relative; isolation: isolate; overflow: hidden; border-radius: 30px; padding: clamp(40px, 6vw, 76px) clamp(20px, 5vw, 64px); background: #0c0c0c; color: #f8f8f8;
  text-align: center; box-shadow: 0 50px 110px -40px rgba(148,12,30,.75), 0 0 0 1px rgba(255,255,255,.07) inset; animation: rwIn .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rwIn { from { opacity: 0; transform: translateY(26px) scale(.985); } to { opacity: 1; transform: none; } }
.rw30::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; z-index: 3; pointer-events: none;
  background: conic-gradient(from var(--rw30a), rgba(255,51,78,0) 0deg, rgba(255,51,78,.95) 60deg, rgba(241,65,89,.9) 120deg, rgba(247,59,84,.85) 180deg, rgba(255,51,78,0) 240deg, rgba(255,51,78,0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: rw30spin 8s linear infinite; }
@keyframes rw30spin { to { --rw30a: 360deg; } }
.rw30-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; transform: scale(1.04); }
.rw30-shade { position: absolute; inset: 0; z-index: -2; background: radial-gradient(75% 90% at 50% 45%, rgba(11,11,11,.42), rgba(11,11,11,.9) 80%), linear-gradient(180deg, rgba(11,11,11,.6), rgba(11,11,11,.25) 45%, rgba(11,11,11,.88)); }
.rw30-shade::after { content: ""; position: absolute; inset: 0; opacity: .45; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 46px 46px; -webkit-mask-image: radial-gradient(60% 70% at 50% 50%, transparent 30%, #000 100%); mask-image: radial-gradient(60% 70% at 50% 50%, transparent 30%, #000 100%); }
.rw30-aurora { position: absolute; inset: -30%; z-index: -1; pointer-events: none; animation: rwAur 14s ease-in-out infinite alternate;
  background: radial-gradient(26% 26% at 16% 20%, rgba(255,51,78,.32), transparent 70%), radial-gradient(24% 24% at 86% 84%, rgba(241,65,89,.24), transparent 70%), radial-gradient(20% 20% at 72% 10%, rgba(247,59,84,.22), transparent 70%); }
@keyframes rwAur { to { transform: translate3d(4%, -3%, 0) rotate(8deg); } }
.rw30-body { position: relative; max-width: 700px; margin: 0 auto; }
.rw30-kicker { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  font: 700 .72rem/1 var(--font-body, inherit); letter-spacing: .2em; text-transform: uppercase; color: #e7e7e7; }
.rw30-kicker i { width: 8px; height: 8px; border-radius: 50%; background: #f14159; box-shadow: 0 0 12px #f14159; animation: nl30pulse 2.2s ease-in-out infinite; }
.rw30 .rw30-title { font-family: var(--font-display); font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.04; letter-spacing: -.035em; margin: 18px 0 14px; font-weight: 800; border: 0; padding: 0;
  background: linear-gradient(180deg, #fff 35%, #ffb7c1 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rw30 .rw30-sub { color: rgba(237,237,237,.88); font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.6; max-width: 580px; margin: 0 auto 22px; }
.rw30-ben { list-style: none; padding: 0; margin: 0 auto 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.rw30-ben li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; font-size: .9rem; font-weight: 600; color: #f2f2f2;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); margin: 0; }
.rw30-ben li::before { content: none; }
.rw30-ben svg { color: #f14159; flex: none; }
.rw30-form { max-width: 620px; margin: 0 auto; text-align: start; }
.rw30-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.rw30-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rw30-f { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-radius: 18px; background: rgba(17,17,17,.66); border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); transition: border-color .25s, box-shadow .25s; color: #f04259; margin: 0; }
.rw30-f:focus-within { border-color: rgba(255,51,78,.8); box-shadow: 0 0 0 4px rgba(255,51,78,.22); }
.rw30-f.bad { border-color: #fb7185; box-shadow: 0 0 0 4px rgba(251,113,133,.2); animation: rwShake .35s; }
@keyframes rwShake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.rw30-f svg { flex: none; }
.rw30-f input { flex: 1; min-width: 0; background: transparent !important; border: 0 !important; outline: 0; box-shadow: none !important; color: #fff !important; font: 500 1rem/1.2 var(--font-body, inherit); padding: 17px 0; }
.rw30-f input::placeholder { color: rgba(236,200,205,.6); }
.rw30-nl { display: flex; align-items: flex-start; gap: 12px; margin: 14px 2px 18px; cursor: pointer; color: rgba(237,237,237,.9); font-size: .93rem; line-height: 1.5; }
.rw30-nl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rw30-box { flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 8px; display: grid; place-items: center; border: 1.5px solid rgba(255,255,255,.35); background: rgba(255,255,255,.05); color: transparent; transition: all .2s; }
.rw30-nl input:checked + .rw30-box { background: linear-gradient(135deg, #f14159, #ff334e); border-color: transparent; color: #111111; box-shadow: 0 0 18px rgba(241,65,89,.45); }
.rw30-nl input:focus-visible + .rw30-box { outline: 2px solid #ff334e; outline-offset: 2px; }
.rw30-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; cursor: pointer; border-radius: 18px; padding: 19px 24px;
  font: 780 1.06rem/1 var(--font-body, inherit); color: #111111; background: linear-gradient(120deg, #f14159, #ff334e 50%, #f73b54); background-size: 200% 100%;
  box-shadow: 0 16px 40px -10px rgba(255,51,78,.8); transition: transform .2s, box-shadow .25s, background-position .5s; }
.rw30-btn:hover { transform: translateY(-1px); background-position: 100% 0; box-shadow: 0 20px 48px -10px rgba(241,65,89,.65); }
.rw30-btn svg { transition: transform .2s; } .rw30-btn:hover svg { transform: translateX(3px); }
.rw30-btn.busy { opacity: .7; cursor: progress; }
.rw30-btn.busy svg { animation: rwSpin .8s linear infinite; }
@keyframes rwSpin { to { transform: rotate(360deg); } }
.rw30 .rw30-msg { min-height: 1.2em; margin: 12px 0 0; text-align: center; font-weight: 650; font-size: .95rem; }
.rw30 .rw30-msg.ok { color: #f14159; } .rw30 .rw30-msg.err { color: #fda4af; }
.rw30 .rw30-fine { margin: 10px 0 0; text-align: center; font-size: .8rem; line-height: 1.55; color: rgba(236,200,205,.66); }
.rw30 .rw30-fine a { color: #ffb7c1; text-decoration: underline; }
.rw30--done .rw30-form > :not(.rw30-msg) { opacity: .35; pointer-events: none; transition: opacity .4s; }
.rw30[dir="rtl"] .rw30-form { text-align: right; }
.rw-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 9999; padding: 14px 22px; border-radius: 16px; background: #181818; color: #f3f3f3;
  border: 1px solid rgba(241,65,89,.45); box-shadow: 0 20px 50px -14px rgba(0,0,0,.6); font-weight: 650; animation: rwIn .6s both, rwOut .5s 5s forwards; }
@keyframes rwOut { to { opacity: 0; transform: translate(-50%, 12px); } }
@media (max-width: 640px) {
  .rw30 { border-radius: 24px; }
  .rw30-row { grid-template-columns: 1fr; }
  .rw30-ben li { font-size: .84rem; padding: 8px 12px; }
  .rw30-slot { margin-top: -24px; }
}
@media (prefers-reduced-motion: reduce) { .rw30::before, .rw30-kicker i, .rw30-aurora, .rw30 { animation: none; } }

/* ── Claude 02.11.2026 (Andy): Mega-Menü „2030“ – neueste Beiträge je Rubrik ── */
.mm30 { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; padding: 0 clamp(16px, 3vw, 40px) 22px; pointer-events: none; }
.mm30[hidden] { display: none; }
.mm30-in { pointer-events: auto; max-width: 1320px; margin: 0 auto; position: relative; overflow: hidden; border-radius: 0 0 26px 26px; padding: 18px 22px 22px;
  background: color-mix(in srgb, var(--bg, #fff) 86%, transparent); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--line, rgba(0,0,0,.08)); border-top: 0; box-shadow: 0 40px 80px -36px rgba(25,25,25,.45), 0 1px 0 rgba(255,255,255,.5) inset;
  opacity: 0; transform: translateY(-10px); transition: opacity .22s ease, transform .28s cubic-bezier(.2,.8,.2,1); }
.mm30.open .mm30-in { opacity: 1; transform: none; }
.mm30-in::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #ff334e 20%, #f14159 50%, #f73b54 80%, transparent); opacity: .9; }
.mm30-in::after { content: ""; position: absolute; inset: -40% -10% auto; height: 260px; pointer-events: none; z-index: -1;
  background: radial-gradient(40% 60% at 15% 0%, rgba(255,51,78,.14), transparent 70%), radial-gradient(35% 60% at 85% 0%, rgba(241,65,89,.12), transparent 70%); }
.mm30-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 2px 14px; }
.mm30-k { display: inline-flex; align-items: center; gap: 9px; font: 800 .74rem/1 var(--font-body, inherit); letter-spacing: .18em; text-transform: uppercase; color: var(--accent, #db0b27); }
.mm30-k i { width: 8px; height: 8px; border-radius: 50%; background: #d6112c; box-shadow: 0 0 10px #d6112c; animation: nl30pulse 2.2s ease-in-out infinite; }
.mm30-all { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font-size: .82rem; font-weight: 700; color: var(--ink, #1c1c1c) !important;
  border: 1px solid var(--line, rgba(0,0,0,.1)); background: color-mix(in srgb, var(--bg3, #f6f6f6) 80%, transparent); transition: background .2s, color .2s, border-color .2s; text-decoration: none !important; }
.mm30-all:hover { background: var(--accent, #db0b27); border-color: var(--accent, #db0b27); color: #fff !important; }
.mm30-all svg { transition: transform .2s; } .mm30-all:hover svg { transform: translateX(3px); }
.mm30-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.mm30-card { display: flex; flex-direction: column; gap: 10px; color: var(--ink, #1c1c1c) !important; text-decoration: none !important; border-radius: 18px; padding: 8px; margin: -8px;
  transition: background .25s, transform .3s cubic-bezier(.2,.8,.2,1); animation: mmIn .45s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 45ms); }
.mm30.swap .mm30-card { animation-name: mmSwap; animation-duration: .35s; }
@keyframes mmIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes mmSwap { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.mm30-card:hover { background: color-mix(in srgb, var(--accent, #db0b27) 7%, transparent); transform: translateY(-3px); }
.mm30-img { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: linear-gradient(110deg, #eeeeee 30%, #f8f8f8 50%, #eeeeee 70%); background-size: 200% 100%; animation: mmShim 1.4s linear infinite;
  box-shadow: 0 12px 26px -16px rgba(25,25,25,.55); }
@keyframes mmShim { to { background-position: -200% 0; } }
.mm30-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.mm30-img::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); background: linear-gradient(180deg, transparent 60%, rgba(12,12,12,.25)); }
.mm30-card:hover .mm30-img img { transform: scale(1.07); }
.mm30-meta { display: flex; flex-direction: column; gap: 5px; padding: 0 2px; }
.mm30-t { font-weight: 720; font-size: .93rem; line-height: 1.32; letter-spacing: -.005em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mm30-card:hover .mm30-t { color: var(--accent, #db0b27); }
.mm30-d { font-size: .76rem; color: var(--dim, #787878); }
.nav-links a.mm-on { color: var(--accent, #db0b27) !important; }
:root[data-theme="dark"] .mm30-in { background: rgba(18,18,18,.9); border-color: rgba(255,255,255,.08); box-shadow: 0 40px 80px -30px rgba(0,0,0,.8); }
:root[data-theme="dark"] .mm30-img { background: linear-gradient(110deg, #252525 30%, #303030 50%, #252525 70%); background-size: 200% 100%; }
:root[data-theme="dark"] .mm30-card, :root[data-theme="dark"] .mm30-all { color: #f0f0f0 !important; }
@media (max-width: 1099px), (hover: none) { .mm30 { display: none !important; } }
@media (max-width: 1280px) { .mm30-grid { gap: 12px; } .mm30-t { font-size: .88rem; } }
@media (prefers-reduced-motion: reduce) { .mm30-in, .mm30-card, .mm30-img { animation: none; transition: none; } }

/* ── Claude 02.11.2026 (Andy): Startseite „Daten statt nur Nachrichten“ – Neuzulassungen animiert, Stil 2030 ── */
.d30 { position: relative; isolation: isolate; overflow: hidden; padding: clamp(56px, 7vw, 104px) 0; background: #0c0c0c; color: #f4f4f4; margin: clamp(24px, 4vw, 56px) 0; }
.d30::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 50% at 12% 10%, rgba(255,51,78,.18), transparent 70%), radial-gradient(35% 45% at 90% 90%, rgba(241,65,89,.14), transparent 70%), radial-gradient(25% 30% at 70% 0%, rgba(247,59,84,.14), transparent 70%); }
.d30::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(70% 80% at 50% 50%, #000, transparent); mask-image: radial-gradient(70% 80% at 50% 50%, #000, transparent); }
.d30-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 40px); }
.d30-kick { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  font: 700 .7rem/1 var(--font-body, inherit); letter-spacing: .2em; text-transform: uppercase; color: #e7e7e7; }
.d30-kick i { width: 8px; height: 8px; border-radius: 50%; background: #d6112c; box-shadow: 0 0 12px #d6112c; animation: nl30pulse 2s ease-in-out infinite; }
.d30 .d30-title { font-family: var(--font-display); font-size: clamp(2.1rem, 4.6vw, 3.8rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; margin: 14px 0 0;
  background: linear-gradient(180deg, #fff 30%, #ffb7c1); -webkit-background-clip: text; background-clip: text; color: transparent; }
.d30-cta { display: inline-flex; align-items: center; gap: 10px; padding: 15px 24px; border-radius: 999px; font-weight: 750; color: #111111 !important; text-decoration: none !important;
  background: linear-gradient(120deg, #f14159, #ff334e 50%, #f73b54); background-size: 200% 100%; box-shadow: 0 14px 36px -10px rgba(255,51,78,.7); transition: transform .2s, background-position .5s; }
.d30-cta:hover { transform: translateY(-2px); background-position: 100% 0; }
.d30-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 20px; }
.d30-side { display: grid; gap: 20px; }
.d30-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: clamp(20px, 2.4vw, 30px); border-radius: 26px; color: #f4f4f4 !important; text-decoration: none !important;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 30px 70px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.07);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s; opacity: 0; transform: translateY(24px); }
.d30.in .d30-card { opacity: 1; transform: none; transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s; }
.d30.in .d30-side .d30-card:nth-child(1) { transition-delay: .15s; } .d30.in .d30-side .d30-card:nth-child(2) { transition-delay: .3s; }
.d30-card:hover { border-color: rgba(255,51,78,.45); box-shadow: 0 0 0 1px rgba(255,51,78,.25), 0 36px 80px -36px rgba(255,51,78,.55); }
.d30.in .d30-card:hover { transform: translateY(-4px); }
.d30-ch { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.d30-lbl { font: 750 .74rem/1.3 var(--font-body, inherit); letter-spacing: .14em; text-transform: uppercase; color: #f04259; }
.d30-total { text-align: right; } .d30-total b { display: block; font: 800 clamp(1.7rem, 2.6vw, 2.3rem)/1 var(--font-display); letter-spacing: -.02em; }
.d30-total small { font-size: .78rem; color: #f04259; }
.d30-bars { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 11px; }
.d30-bars li { display: grid; grid-template-columns: 34px minmax(70px, 120px) 1fr auto; align-items: center; gap: 12px; margin: 0; }
.d30-bars li::before { content: none; }
.d30-iso { font: 800 .74rem/1 var(--font-body, inherit); letter-spacing: .06em; color: #161616; background: linear-gradient(135deg, #f14159, #ff334e); border-radius: 8px; padding: 6px 0; text-align: center; }
.d30-name { font-size: .9rem; font-weight: 600; color: #e9e9e9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d30-track { position: relative; height: 12px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.d30-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, #ff334e, #f14159); box-shadow: 0 0 18px rgba(255,51,78,.55);
  transition: width 1.4s cubic-bezier(.2,.8,.2,1); transition-delay: calc(.2s + var(--i, 0) * 90ms); }
.d30-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); transform: translateX(-100%); animation: d30sheen 3.2s ease-in-out infinite; animation-delay: calc(1.6s + var(--i, 0) * 120ms); }
@keyframes d30sheen { 60%, 100% { transform: translateX(100%); } }
.d30.in .d30-fill { width: var(--w); }
.d30-bars li:first-child .d30-fill { background: linear-gradient(90deg, #f73b54, #ff334e 55%, #f14159); }
.d30-val { display: inline-flex; align-items: baseline; gap: 8px; min-width: 132px; justify-content: flex-end; }
.d30-val b { font: 800 1rem/1 var(--font-body, inherit); font-variant-numeric: tabular-nums; }
.d30-val em { font-style: normal; font-size: .74rem; font-weight: 700; padding: 3px 7px; border-radius: 999px; }
.d30-val em.up { color: #f14159; background: rgba(241,65,89,.12); } .d30-val em.down { color: #fda4af; background: rgba(253,164,175,.12); }
.d30-src { margin-top: auto; font-size: .78rem; color: #a4a4a4; }
.d30-big b { font: 800 clamp(2rem, 3.4vw, 2.8rem)/1 var(--font-display); letter-spacing: -.02em; margin-right: 10px; } .d30-big small { color: #f04259; font-size: .85rem; }
.d30-spark { width: 100%; height: 130px; overflow: visible; }
.d30-line { stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 4px 10px rgba(255,51,78,.6)); }
.d30.in .d30-line { stroke-dashoffset: 0; transition: stroke-dashoffset 2s cubic-bezier(.4,0,.2,1) .4s; }
.d30-area { opacity: 0; } .d30.in .d30-area { opacity: 1; transition: opacity 1.2s ease 1.2s; }
.d30-dot { fill: #f14159; opacity: 0; filter: drop-shadow(0 0 8px #f14159); } .d30.in .d30-dot { opacity: 1; transition: opacity .4s 2.3s; animation: d30dot 2s ease-in-out 2.6s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes d30dot { 50% { transform: scale(1.6); } }
.d30-axis { display: flex; justify-content: space-between; font-size: .74rem; color: #a4a4a4; margin-top: -4px; }
.d30-rings { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.d30-ring { position: relative; display: grid; place-items: center; text-align: center; aspect-ratio: 1; }
.d30-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.d30-ring circle { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 4; }
.d30-ring circle.v { stroke: #f14159; stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray 1.6s cubic-bezier(.2,.8,.2,1); transition-delay: calc(.4s + var(--i, 0) * 120ms); filter: drop-shadow(0 0 6px rgba(241,65,89,.6)); }
.d30.in .d30-ring circle.v { stroke-dasharray: var(--p) 100; }
.d30-ring { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.d30-ring b { position: relative; font: 800 clamp(.74rem, 1vw, .9rem)/1 var(--font-body, inherit); } .d30-ring small { position: relative; font-size: .64rem; color: #f04259; font-weight: 700; letter-spacing: .06em; }
@media (max-width: 960px) { .d30-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .d30-bars li { grid-template-columns: 30px 1fr auto; } .d30-name { display: none; } .d30-val { min-width: 0; } .d30-rings { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .d30-card, .d30-fill, .d30-line, .d30-area, .d30-dot, .d30-ring circle.v { transition: none !important; animation: none !important; } }

/* ── Claude 02.11.2026 (Andy): Briefing-Seite „2050“ – Video-Header, holografische Vorschau, einladend ── */
.n50 { position: relative; isolation: isolate; overflow: hidden; min-height: min(92vh, 900px); display: flex; align-items: center; color: #f6f6f6; background: #080808; margin-top: 8px; }
.n50-bg { position: absolute; inset: 0; z-index: -1; }
.n50-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); filter: saturate(1.15) contrast(1.05); }
.n50-shade { position: absolute; inset: 0; background: radial-gradient(80% 90% at 70% 40%, rgba(8,8,8,.25), rgba(8,8,8,.88) 75%), linear-gradient(90deg, rgba(8,8,8,.92) 0%, rgba(8,8,8,.55) 48%, rgba(8,8,8,.35) 100%), linear-gradient(0deg, #080808 0%, transparent 30%); }
.n50-grid { position: absolute; inset: -20% -10% 0; opacity: .35; transform: perspective(900px) rotateX(62deg) translateY(30%); transform-origin: 50% 100%;
  background-image: linear-gradient(rgba(255,51,78,.28) 1px, transparent 1px), linear-gradient(90deg, rgba(255,51,78,.28) 1px, transparent 1px); background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(0deg, #000 10%, transparent 70%); mask-image: linear-gradient(0deg, #000 10%, transparent 70%); animation: n50grid 14s linear infinite; }
@keyframes n50grid { to { background-position: 0 64px, 0 0; } }
.n50-orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: n50float 16s ease-in-out infinite alternate; }
.n50-orb.o1 { width: 420px; height: 420px; left: -120px; top: 10%; background: #ff2f4b; }
.n50-orb.o2 { width: 360px; height: 360px; right: 8%; bottom: -120px; background: #da122c; animation-delay: -6s; }
.n50-orb.o3 { width: 260px; height: 260px; right: 30%; top: -80px; background: #f43e56; animation-delay: -11s; opacity: .45; }
@keyframes n50float { to { transform: translate3d(40px, -30px, 0) scale(1.12); } }
.n50-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(56px, 8vw, 110px); }
.n50-kick { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font: 700 .74rem/1 var(--font-body, inherit); letter-spacing: .22em; text-transform: uppercase; color: #e7e7e7; }
.n50-kick i { width: 9px; height: 9px; border-radius: 50%; background: #f14159; box-shadow: 0 0 14px #f14159; animation: nl30pulse 2s ease-in-out infinite; }
.n50 .n50-h1 { font-family: var(--font-display); font-weight: 850; font-size: clamp(2.6rem, 6.4vw, 5.6rem); line-height: .98; letter-spacing: -.045em; margin: 22px 0 20px; border: 0; padding: 0;
  background: linear-gradient(100deg, #ffffff 0%, #ececec 30%, #f14159 52%, #ff334e 72%, #fdb5bf 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: n50shine 9s ease-in-out infinite alternate; text-shadow: 0 0 60px rgba(255,51,78,.18); }
@keyframes n50shine { to { background-position: 100% 0; } }
.n50 .n50-lead { font-size: clamp(1.05rem, 1.45vw, 1.25rem); line-height: 1.65; color: rgba(238,238,238,.9); max-width: 600px; margin: 0 0 30px; }
.n50-form { max-width: 600px; }
.n50-field { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 22px; background: rgba(15,15,15,.62); border: 1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); box-shadow: 0 20px 60px -20px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.1); transition: border-color .25s, box-shadow .25s; color: #f04259; }
.n50-field > svg { margin-left: 12px; flex: none; }
.n50-field:focus-within { border-color: rgba(241,65,89,.75); box-shadow: 0 0 0 5px rgba(241,65,89,.16), 0 20px 60px -20px rgba(0,0,0,.8); }
.n50-field input { flex: 1; min-width: 0; background: transparent !important; border: 0 !important; outline: 0; box-shadow: none !important; color: #fff !important; font: 500 1.05rem/1.2 var(--font-body, inherit); padding: 16px 4px; }
.n50-field input::placeholder { color: rgba(236,200,205,.55); }
.n50-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; cursor: pointer; border-radius: 16px; padding: 17px 26px; text-decoration: none !important;
  font: 780 1rem/1 var(--font-body, inherit); color: #111111 !important; background: linear-gradient(120deg, #f14159, #ff334e 50%, #f73b54); background-size: 200% 100%;
  box-shadow: 0 14px 40px -10px rgba(255,51,78,.85); transition: transform .2s, background-position .5s, box-shadow .25s; }
.n50-btn:hover { transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 18px 50px -10px rgba(241,65,89,.7); }
.n50-btn svg { transition: transform .2s; } .n50-btn:hover svg { transform: translateX(3px); }
.n50-btn--solo { margin-top: 6px; }
.n50 .n50-hint, .n50-final .n50-hint { margin: 14px 4px 0; font-size: .86rem; color: rgba(244,214,218,.72); }
.n50-hint.nl-ok { color: #f14159 !important; } .n50-hint.nl-err { color: #fda4af !important; }
.n50-chips { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.n50-chips li { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 9px 14px; border-radius: 999px; font-size: .88rem; font-weight: 650; color: #f0f0f0;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.n50-chips li::before { content: none; } .n50-chips svg { color: #f14159; }
.n50-phone { position: relative; perspective: 1400px; }
.n50-mail { position: relative; z-index: 1; border-radius: 30px; padding: 18px; background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); box-shadow: 0 60px 120px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.25);
  transform: rotateY(-8deg) rotateX(4deg); transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.8,.2,1); animation: n50hover 7s ease-in-out infinite; }
@keyframes n50hover { 50% { translate: 0 -10px; } }
.n50-mail::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--nl30a), rgba(255,51,78,0), rgba(255,51,78,.9) 60deg, rgba(241,65,89,.9) 130deg, rgba(247,59,84,.8) 200deg, rgba(255,51,78,0) 260deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: nl30spin 8s linear infinite; }
.n50-glow { position: absolute; inset: 10% 5%; z-index: 0; border-radius: 40px; background: radial-gradient(closest-side, rgba(255,51,78,.55), transparent); filter: blur(40px); }
.n50-mail-top { display: flex; align-items: center; gap: 12px; padding: 6px 6px 14px; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 12px; }
.n50-logo { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; font: 900 1.2rem/1 var(--font-display); color: #111111; background: linear-gradient(135deg, #f14159, #ff334e); }
.n50-mail-top b { display: block; font-size: .95rem; } .n50-mail-top small { font-size: .74rem; color: rgba(244,214,218,.7); }
.n50-mail-top em { margin-left: auto; font-style: normal; font-size: .66rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; color: #f14159; padding: 6px 10px; border-radius: 999px; background: rgba(241,65,89,.1); }
.n50-story { display: grid; grid-template-columns: 88px 1fr; gap: 12px; align-items: center; padding: 9px; border-radius: 16px; color: #f6f6f6 !important; text-decoration: none !important;
  transition: background .25s; animation: n50in .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.35s + var(--i) * .12s); }
.n50-story:hover { background: rgba(255,255,255,.08); }
.n50-story.lead { grid-template-columns: 1fr; }
.n50-img { display: block; aspect-ratio: 16/10; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.08); }
.n50-story.lead .n50-img { aspect-ratio: 16/8; }
.n50-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s; } .n50-story:hover img { transform: scale(1.06); }
.n50-st small { display: block; font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #ff334e; margin-bottom: 4px; }
.n50-st b { font-size: .92rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.n50-story.lead .n50-st b { font-size: 1.12rem; }
@keyframes n50in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.n50-ben { padding: clamp(56px, 7vw, 100px) 0 clamp(40px, 5vw, 80px); }
.n50-ben .n50-h2 { font-family: var(--font-display); font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 850; letter-spacing: -.035em; text-align: center; margin: 0 0 34px; }
.n50-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.n50-card { position: relative; padding: 30px 28px; border-radius: 26px; background: var(--bg3, #fff); border: 1px solid var(--line, rgba(0,0,0,.08)); box-shadow: 0 24px 60px -36px rgba(40,40,40,.45);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .3s; overflow: hidden; }
.n50-card::after { content: ""; position: absolute; inset: auto -30% -60% auto; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,51,78,.18), transparent); }
.n50-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--accent, #db0b27) 45%, transparent); box-shadow: 0 34px 70px -34px rgba(219,11,39,.45); }
.n50-ico { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; color: #111111; background: linear-gradient(135deg, #f14159, #ff334e); box-shadow: 0 12px 30px -10px rgba(255,51,78,.7); margin-bottom: 18px; }
.n50-card h3 { font-size: 1.2rem; font-weight: 800; letter-spacing: -.015em; margin: 0 0 8px; } .n50-card p { margin: 0; color: var(--dim, #676767); line-height: 1.6; }
.n50-final { margin: clamp(48px, 6vw, 80px) auto 0; max-width: 760px; text-align: center; padding: clamp(36px, 5vw, 56px) clamp(20px, 4vw, 48px); border-radius: 30px; color: #f6f6f6;
  background: radial-gradient(60% 90% at 20% 0%, rgba(255,51,78,.35), transparent 70%), radial-gradient(50% 90% at 100% 100%, rgba(241,65,89,.22), transparent 70%), #0e0e0e; box-shadow: 0 40px 90px -40px rgba(28,28,28,.8); }
.n50-final .n50-h2 { color: #fff; margin-bottom: 22px; }
.n50-final .n50-form { margin: 0 auto; text-align: left; }
@media (max-width: 960px) { .n50-inner { grid-template-columns: 1fr; } .n50-phone { max-width: 520px; } .n50-mail { transform: none; } .n50-cards { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .n50-field { flex-wrap: wrap; } .n50-field input { flex-basis: calc(100% - 48px); } .n50-btn { flex: 1 1 100%; } .n50 { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .n50-grid, .n50-orb, .n50 .n50-h1, .n50-mail, .n50-mail::before, .n50-story { animation: none !important; } }
.n50-mail-top em { white-space: nowrap; } .n50-mail-top > span:nth-child(2) { min-width: 0; } @media (max-width: 1280px) { .n50-mail-top em { display: none; } }

/* ── Claude 02.11.2026 (Andy): Sternebewertung „2040“ ── */
.rt40 { position: relative; isolation: isolate; overflow: hidden; margin: 34px 0 26px; padding: 28px clamp(20px, 3vw, 34px); border-radius: 26px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px 24px;
  background: radial-gradient(60% 140% at 0% 0%, rgba(255,51,78,.22), transparent 60%), radial-gradient(50% 140% at 100% 100%, rgba(250,21,52,.16), transparent 60%), #161616; color: #f6f6f6;
  box-shadow: 0 30px 70px -40px rgba(28,28,28,.8), inset 0 1px 0 rgba(255,255,255,.08); border: 1px solid rgba(255,51,78,.22); }
.rt40::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--nl30a), rgba(250,21,52,0), rgba(250,21,52,.9) 60deg, rgba(241,65,89,.8) 140deg, rgba(255,51,78,.8) 220deg, rgba(250,21,52,0) 300deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: nl30spin 7s linear infinite; }
.rt40-aur { position: absolute; inset: -40%; z-index: -1; background: radial-gradient(20% 30% at 70% 50%, rgba(250,21,52,.18), transparent 70%); animation: rtAur 8s ease-in-out infinite alternate; }
@keyframes rtAur { to { transform: translate(-12%, 6%); } }
.rt40 h3 { margin: 0 0 6px; font-size: clamp(1.15rem, 1.8vw, 1.45rem); font-weight: 800; letter-spacing: -.015em; color: #fff; }
.rt40-sub { margin: 0; font-size: .92rem; color: rgba(244,214,218,.75); }
.rt40-stars { display: flex; gap: 6px; }
.rt40-star { width: 54px; height: 54px; padding: 6px; border: 0; background: none; cursor: pointer; border-radius: 14px; transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.rt40-star svg { width: 100%; height: 100%; fill: rgba(255,255,255,.08); stroke: rgba(255,255,255,.45); stroke-width: 1.3; stroke-linejoin: round; transition: fill .2s, stroke .2s, filter .25s; }
.rt40-star:hover, .rt40-star:focus-visible { transform: translateY(-3px) scale(1.12); outline: none; }
.rt40-star.on svg { fill: #fa1534; stroke: #fde68a; filter: drop-shadow(0 0 10px rgba(250,21,52,.75)); }
.rt40-star.hov svg { fill: #fde047; }
.rt40.in:not(.rated) .rt40-star { animation: rtWave 2.8s ease-in-out infinite; }
.rt40.in:not(.rated) .rt40-star:nth-child(2) { animation-delay: .12s; } .rt40.in:not(.rated) .rt40-star:nth-child(3) { animation-delay: .24s; }
.rt40.in:not(.rated) .rt40-star:nth-child(4) { animation-delay: .36s; } .rt40.in:not(.rated) .rt40-star:nth-child(5) { animation-delay: .48s; }
@keyframes rtWave { 0%, 60%, 100% { transform: none; } 20% { transform: translateY(-6px) scale(1.08); } }
.rt40-stars:hover .rt40-star { animation: none !important; }
.rt40-meta { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-height: 1.2em; font-size: .9rem; }
.rt40-lbl { color: #fde68a; font-weight: 700; } .rt40-avg { color: rgba(244,214,218,.8); } .rt40-avg b { color: #fa1534; }
.rt40-spark { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #fa1534; box-shadow: 0 0 10px #fa1534; pointer-events: none; animation: rtSpark .85s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes rtSpark { from { transform: translate(-50%, -50%) scale(1); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.2); opacity: 0; } }
@media (max-width: 640px) { .rt40 { grid-template-columns: 1fr; } .rt40-star { width: 48px; height: 48px; } }
@media (prefers-reduced-motion: reduce) { .rt40::before, .rt40-aur, .rt40-star { animation: none !important; } }

/* ── Claude 02.11.2026 (Andy): Fotos in Beiträgen wirken wie Video (langsame Kamerafahrt, Lichtschimmer) ── */
.article-hero .hero-frame { position: relative; display: block; overflow: hidden; border-radius: var(--r-lg, 18px); isolation: isolate; }
.article-hero .hero-frame img { display: block; width: 100%; border-radius: 0; transform-origin: 60% 45%; animation: kbMove 26s ease-in-out infinite alternate; will-change: transform; }
.article-hero .hero-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.16) 45%, transparent 60%); background-size: 250% 100%; animation: kbLight 9s ease-in-out infinite; mix-blend-mode: screen; }
@keyframes kbMove { 0% { transform: scale(1.03) translate3d(0, 0, 0); } 50% { transform: scale(1.1) translate3d(-1.6%, -1%, 0); } 100% { transform: scale(1.14) translate3d(1.2%, -2%, 0); } }
@keyframes kbLight { 0%, 30% { background-position: 120% 0; } 70%, 100% { background-position: -40% 0; } }
.article-body figure { overflow: hidden; border-radius: 14px; }
.article-body figure img { animation: kbMove 30s ease-in-out infinite alternate; }
.article-body figure figcaption { position: relative; z-index: 1; background: var(--bg, #fff); }
@media (prefers-reduced-motion: reduce) { .article-hero .hero-frame img, .article-body figure img, .article-hero .hero-frame::after { animation: none !important; } }

/* ── Claude 02.11.2026 (Andy): Beitragsbilder „leben“ – jede Karte mit eigener, langsamer Kamerafahrt, Atmen und Lichtschimmer ── */
/* verankert oben rechts: das EastAutoNews-Logo im Bild bleibt immer vollständig sichtbar */
@keyframes lvA { 0% { transform: scale(1.01); } 100% { transform: scale(1.12); } }
@keyframes lvB { 0% { transform: scale(1.13); } 100% { transform: scale(1.02); } }
@keyframes lvC { 0% { transform: scale(1.03); } 100% { transform: scale(1.15); } }
@keyframes lvD { 0% { transform: scale(1.14); } 100% { transform: scale(1.04); } }
@keyframes kbMove { 0% { transform: scale(1.02); } 50% { transform: scale(1.08); } 100% { transform: scale(1.13); } }
.lv-on img, img.lv-on, .article-hero .hero-frame img, .article-body figure img { transform-origin: 100% 0; }
@keyframes lvBreath { 0%, 100% { filter: saturate(1) brightness(1); } 50% { filter: saturate(1.12) brightness(1.06); } }
@keyframes lvSweep { 0%, 62% { transform: translateX(-120%) skewX(-18deg); opacity: 0; } 66% { opacity: 1; } 86%, 100% { transform: translateX(260%) skewX(-18deg); opacity: 0; } }
.lv-on img, img.lv-on { will-change: transform; animation-play-state: paused !important; }
.lv-on.lv-run img, img.lv-on.lv-run { animation-play-state: running !important; }
.mg-media.lv-on::after, .desk-img.lv-on::after, .video-thumb.lv-on::before {
  content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 38%; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); mix-blend-mode: screen;
  animation: lvSweep var(--lv-sweep, 13s) ease-in-out var(--lv-sd, 0s) infinite; animation-play-state: paused; }
.mg-media.lv-run::after, .desk-img.lv-run::after, .video-thumb.lv-run::before { animation-play-state: running; }
.mg-tile:hover .mg-media.lv-on img, .mg-card:hover .mg-media.lv-on img { animation-duration: 9s !important; }
@media (prefers-reduced-motion: reduce) { .lv-on img, img.lv-on { animation: none !important; } .mg-media.lv-on::after, .desk-img.lv-on::after, .video-thumb.lv-on::before { display: none; } }

/* ── Claude 02.11.2026 (Andy): Schlagzeile im sichtbaren Bereich (unter Menü + Laufband) optisch mittig – nicht zu hoch, nicht zu tief ── */
.hero-v3 { min-height: calc(100svh - 143px) !important; padding-top: clamp(1.5rem, 4vh, 3rem) !important; padding-bottom: clamp(2.5rem, 7vh, 5rem) !important; }
@media (max-width: 900px) { .hero-v3 { min-height: calc(100svh - 96px) !important; } }

/* ── Claude 02.11.2026 (Andy): Podcast-Kasten unter dem Vorlese-Player „2040“ ── */
.pb40 { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 18px; margin: 18px 0 26px; padding: 20px 22px;
  border-radius: 24px; text-decoration: none !important; color: #f6f6f6;
  background: radial-gradient(70% 160% at 0% 0%, rgba(255,51,78,.26), transparent 60%), radial-gradient(60% 160% at 100% 100%, rgba(241,65,89,.18), transparent 60%), #131313;
  border: 1px solid rgba(255,51,78,.2); box-shadow: 0 0 46px -14px rgba(255,51,78,.55), 0 30px 70px -40px rgba(28,28,28,.9), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.pb40::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--nl30a), rgba(255,51,78,0), rgba(255,51,78,.95) 60deg, rgba(241,65,89,.95) 130deg, rgba(247,59,84,.85) 200deg, rgba(255,51,78,0) 260deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: nl30spin 6s linear infinite; filter: drop-shadow(0 0 6px rgba(241,65,89,.8)); }
.pb40:hover { transform: translateY(-3px); box-shadow: 0 0 60px -10px rgba(241,65,89,.6), 0 34px 80px -40px rgba(28,28,28,.9); }
.pb40-aur { position: absolute; inset: -50%; z-index: -1; background: radial-gradient(18% 26% at 30% 50%, rgba(241,65,89,.2), transparent 70%), radial-gradient(16% 24% at 75% 40%, rgba(247,59,84,.18), transparent 70%); animation: pbAur 10s ease-in-out infinite alternate; }
@keyframes pbAur { to { transform: translate(14%, -6%) rotate(8deg); } }
.pb40-disc { position: relative; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; color: #111111; background: linear-gradient(135deg, #f14159, #ff334e); box-shadow: 0 10px 30px -8px rgba(255,51,78,.9); }
.pb40-disc svg { width: 28px; height: 28px; fill: currentColor; }
.pb40-ring { position: absolute; inset: -7px; border-radius: 50%; border: 2px solid rgba(241,65,89,.55); animation: pbPing 2.2s ease-out infinite; }
@keyframes pbPing { 0% { transform: scale(.9); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
.pb40-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pb40-k { display: inline-flex; align-items: center; gap: 7px; font: 800 11px/1 Inter, system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #f14159; }
.pb40-k i { width: 8px; height: 8px; border-radius: 50%; background: #ff4d6d; box-shadow: 0 0 0 0 rgba(255,77,109,.7); animation: pbLive 1.6s infinite; }
@keyframes pbLive { 70% { box-shadow: 0 0 0 8px rgba(255,77,109,0); } 100% { box-shadow: 0 0 0 0 rgba(255,77,109,0); } }
.pb40-txt b { font: 900 clamp(1.08rem, 1.7vw, 1.32rem)/1.2 Inter, system-ui, sans-serif; letter-spacing: -.015em; background: linear-gradient(110deg, #fff 20%, #f14159 55%, #ff334e 80%, #fff); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: pbShine 6s linear infinite; }
@keyframes pbShine { to { background-position: -220% 0; } }
.pb40-txt small { font-size: .9rem; line-height: 1.45; color: rgba(244,214,218,.78); }
.pb40-eq { display: flex; align-items: center; gap: 3px; height: 40px; }
.pb40-eq i { width: 4px; height: 100%; border-radius: 3px; background: linear-gradient(180deg, #f14159, #ff334e); transform-origin: center; animation: pbEq 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--k) * -.13s); opacity: .85; }
@keyframes pbEq { 0% { transform: scaleY(.2); } 100% { transform: scaleY(1); } }
.pb40-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 99px; white-space: nowrap; font: 800 .92rem/1 Inter, system-ui, sans-serif; color: #121212;
  background: linear-gradient(110deg, #f14159, #ff334e, #f73b54, #f14159); background-size: 300% 100%; animation: pbFlow 6s linear infinite; box-shadow: 0 10px 28px -10px rgba(241,65,89,.9); }
.pb40-btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); animation: pbSweep 3.4s ease-in-out infinite; }
@keyframes pbFlow { to { background-position: -300% 0; } } @keyframes pbSweep { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.pb40-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) { .pb40 { grid-template-columns: auto minmax(0, 1fr); } .pb40-eq { display: none; } .pb40-btn { grid-column: 1 / -1; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .pb40::before, .pb40-aur, .pb40-ring, .pb40-k i, .pb40-txt b, .pb40-eq i, .pb40-btn, .pb40-btn::after { animation: none !important; } }

/* Claude 03.11.2026 (Andy): Hero-Hintergrund = Beitragsbild der aktuellen Titel-Folie, wie ein Video animiert */
.hero-v3 .hero-art{position:absolute;inset:0;z-index:0;overflow:hidden;background:#0d0d0d}
.hero-v3 .hero-art .ha-s{position:absolute;inset:0;opacity:0;animation-timing-function:linear;animation-iteration-count:infinite;animation-fill-mode:backwards;will-change:opacity}
.hero-v3 .hero-art img{position:absolute;inset:-4%;width:108%;height:108%;max-width:none;object-fit:cover;filter:brightness(.72) saturate(1.12) contrast(1.04);animation:none;transform:none;will-change:transform}
.hero-v3 .hero-art .ha0 img{transform-origin:30% 40%;animation:haA 9s ease-in-out infinite alternate}
.hero-v3 .hero-art .ha1 img{transform-origin:70% 35%;animation:haB 9s ease-in-out infinite alternate}
.hero-v3 .hero-art .ha2 img{transform-origin:50% 60%;animation:haC 9s ease-in-out infinite alternate}
.hero-v3 .hero-art .ha3 img{transform-origin:20% 70%;animation:haD 9s ease-in-out infinite alternate}
@keyframes haA{0%{transform:scale(1.02) translate3d(-1.2%,0,0)}100%{transform:scale(1.14) translate3d(1.4%,-1%,0)}}
@keyframes haB{0%{transform:scale(1.13) translate3d(1.5%,.6%,0)}100%{transform:scale(1.02) translate3d(-1%,-.6%,0)}}
@keyframes haC{0%{transform:scale(1.03) translate3d(0,1.4%,0) rotate(-.4deg)}100%{transform:scale(1.15) translate3d(0,-1.2%,0) rotate(.3deg)}}
@keyframes haD{0%{transform:scale(1.12) translate3d(-1.5%,-.8%,0)}100%{transform:scale(1.03) translate3d(1.3%,.9%,0)}}
/* wanderndes Licht + feines Flimmern – wirkt wie Filmmaterial */
.hero-v3 .hero-art .ha-light{position:absolute;inset:-20%;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.55;
  background:radial-gradient(38% 30% at 30% 30%,rgba(241,65,89,.16),transparent 70%),radial-gradient(42% 34% at 75% 60%,rgba(255,51,78,.18),transparent 70%);
  animation:haLight 14s ease-in-out infinite alternate}
@keyframes haLight{0%{transform:translate3d(-6%,-3%,0)}50%{opacity:.7}100%{transform:translate3d(6%,4%,0);opacity:.45}}
@media (prefers-reduced-motion:reduce){
  .hero-v3 .hero-art .ha-s,.hero-v3 .hero-art img,.hero-v3 .hero-art .ha-light{animation:none!important}
  .hero-v3 .hero-art .ha-s:first-child{opacity:1}
}

/* Claude 03.11.2026 (Andy: „oben flattert die Seite in Chrome“): Hero-Bilder nur noch 3 Ebenen, kein Mischmodus, keine Dauer-will-change */
.hero-v3 .hero-art .ha-s{animation:none!important;opacity:0;transition:opacity 1.3s ease;will-change:auto;display:none}
.hero-v3 .hero-art .ha-s.on,.hero-v3 .hero-art .ha-s.off,.hero-v3 .hero-art .ha-s.nx{display:block}
.hero-v3 .hero-art .ha-s.on{opacity:1}
.hero-v3 .hero-art img{will-change:auto}
.hero-v3 .hero-art .ha-s:not(.on):not(.off) img{animation-play-state:paused}
.hero-v3 .hero-art .ha-light{mix-blend-mode:normal;opacity:.3}

/* Claude 03.11.2026 (Andy): Kopfzeile beim Scrollen vollständig deckend – kein durchscheinender, flackernder Inhalt mehr */
nav#topnav.scrolled{background:#ffffff!important}
:root[data-theme="light"] nav#topnav.scrolled{background:#ffffff!important}