/* Ardem Info – „Switch it back on“
   Nacht über dem Mittleren Westen. Einziges warmes Licht: Natriumdampf-Bernstein.
   Layout: redaktionelles Raster, linksbündig; die Kühnheit sitzt im Hero (Wortmarke + Sicherungskasten). */
:root {
  --night: #0c0f12;
  --deep: #11161b;
  --panel: #161d24;
  --line: #26313b;
  --ink: #ece6d6;
  --muted: #9aa3a8;
  --sodium: #ffad33;
  --sodium-soft: rgba(255, 173, 51, .14);
  --ok: #86d59a;
  --plan: #8fb8d6;
  --risk: #ef6a55;
  --font-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --font-body: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--night); color: var(--ink);
  font: 400 17px/1.65 var(--font-body);
  font-feature-settings: "ss01";
}
/* feines Filmkorn über allem, ohne Bilddatei */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--sodium); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--sodium); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; line-height: 1.02; margin: 0; letter-spacing: .01em; }
h2 { font-size: clamp(34px, 5vw, 58px); font-weight: 800; text-transform: uppercase; }
h3 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.prose p + p { margin-top: 1em; }
.prose { max-width: 68ch; }
.lead { font-size: clamp(18px, 2vw, 21px); color: var(--ink); max-width: 60ch; }
.muted { color: var(--muted); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--sodium); color: #111; padding: 8px 14px; z-index: 200; }
.skip:focus { left: 8px; }

.kicker {
  font: 500 12px/1.2 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
}
.lampdot { width: 8px; height: 8px; border-radius: 50%; background: var(--sodium); box-shadow: 0 0 10px 2px rgba(255,173,51,.55); flex: none; }
.sechead { margin-bottom: clamp(24px, 3vw, 40px); display: grid; gap: 4px; }
.section { padding: clamp(56px, 8vw, 110px) 0; border-top: 1px solid var(--line); }
.section--flush { border-top: 0; }
.more { font: 500 13px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; display: inline-flex; gap: 8px; align-items: center; margin-top: 28px; }
.more::after { content: "→"; transition: transform .2s; }
.more:hover::after { transform: translateX(4px); }

/* ---------- Hinweis „inoffiziell“ ---------- */
.unofficial { margin: 0; padding: 7px var(--gutter); text-align: center; font-size: 13px; line-height: 1.4; color: #15110a; background: var(--sodium); }
.unofficial a { color: #15110a; font-weight: 600; }

/* ---------- Kopfzeile ---------- */
.masthead { position: sticky; top: 0; z-index: 50; background: rgba(12,15,18,.88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.masthead__inner { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: 24px; min-height: 62px; }
.brand { display: flex; align-items: baseline; gap: 10px; color: var(--ink); text-decoration: none; }
.brand__lamp { width: 10px; height: 10px; border-radius: 50%; background: var(--sodium); box-shadow: 0 0 14px 3px rgba(255,173,51,.6); align-self: center; }
.brand__word { font: 900 27px/1 var(--font-display); text-transform: uppercase; letter-spacing: .08em; }
.brand { align-items: center; gap: 12px; }
.brand__logo { display: block; line-height: 0; }
.brand__logo img { height: 30px; width: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.brand__tag { display: grid; gap: 3px; padding-left: 12px; border-left: 1px solid var(--line); font: 500 10px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.brand__tag b { color: var(--sodium); font-weight: 700; letter-spacing: .18em; }
.sitenav { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.sitenav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px; }
.sitenav a { display: block; padding: 8px 10px; color: var(--ink); text-decoration: none; font: 700 17px/1 var(--font-display); text-transform: uppercase; letter-spacing: .06em; border-radius: 3px; }
.sitenav a:hover { color: var(--sodium); }
.sitenav a[aria-current="page"] { color: var(--sodium); box-shadow: inset 0 -2px 0 var(--sodium); border-radius: 0; }
.langswitch { border: 1px solid var(--line); font-family: var(--font-mono) !important; font-size: 12px !important; letter-spacing: .12em !important; padding: 7px 10px !important; }
.navtoggle { display: none; margin-left: auto; background: none; border: 1px solid var(--line); color: var(--ink); font: 500 12px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; padding: 10px 12px; border-radius: 3px; cursor: pointer; }
@media (max-width: 1080px) {
  .navtoggle { display: block; }
  .sitenav { display: none; position: absolute; left: 0; right: 0; top: 62px; background: var(--deep); border-bottom: 1px solid var(--line); padding: 12px var(--gutter) 20px; flex-direction: column; align-items: flex-start; }
  .sitenav.is-open { display: flex; }
  .sitenav ul { flex-direction: column; width: 100%; }
  .sitenav a { font-size: 22px; padding: 10px 0; }
}

/* ---------- Hero ---------- */
.hero { position: relative; min-height: min(88vh, 860px); display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.hero__img { position: absolute; inset: 0; z-index: -2; }
.hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: saturate(.85) contrast(1.05); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(12,15,18,.35) 0%, rgba(12,15,18,.15) 30%, rgba(12,15,18,.85) 72%, var(--night) 100%),
              linear-gradient(90deg, rgba(12,15,18,.85) 0%, rgba(12,15,18,0) 60%); }
.hero__inner { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 120px var(--gutter) clamp(40px, 6vw, 72px); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .9fr); gap: clamp(28px, 4vw, 64px); align-items: end; }
.wordmark { font: 900 clamp(96px, 17vw, 236px)/.78 var(--font-display); text-transform: uppercase; letter-spacing: .015em; margin: 6px 0 22px; color: var(--ink);
  text-shadow: 0 0 40px rgba(255,173,51,.18); }
.wordmark span { color: var(--sodium); text-shadow: 0 0 34px rgba(255,173,51,.55), 0 0 2px rgba(255,200,120,.9); animation: flicker 2.6s steps(1) .4s 1 both; }
/* Logo: liegt erst stromlos da, dann springen die Buchstaben einzeln an (wie Leuchtröhren) */
.logo { position: relative; width: min(100%, 640px); aspect-ratio: 1202 / 349; margin: 14px 0 28px; line-height: 0; }
.logo picture { display: block; }
.logo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 24px rgba(0,0,0,.6)); }
.logo__lit, .logo__sweep { display: none; }
.js .hero--film .logo img { filter: grayscale(1) brightness(.22); }
.js .hero--film .logo__lit { display: block; position: absolute; inset: 0; filter: drop-shadow(0 0 18px rgba(255,214,160,.38)) drop-shadow(0 6px 20px rgba(0,0,0,.55)); animation: tube-hum 9s linear 4s infinite; }
.logo__lit i { position: absolute; inset: 0; background: url(/static/img/ardem-logo.webp) 0 0 / 100% 100% no-repeat; opacity: 0;
  animation: tube-on 1.1s linear both; }
.logo__lit i:nth-child(1) { clip-path: inset(0 80.1% 0 0);  animation-delay: .5s; }
.logo__lit i:nth-child(2) { clip-path: inset(0 60.9% 0 19.9%); animation-delay: .95s; }
.logo__lit i:nth-child(3) { clip-path: inset(0 40.4% 0 39.1%); animation-delay: .7s; }
.logo__lit i:nth-child(4) { clip-path: inset(0 24.6% 0 59.6%); animation-delay: 1.35s; }
.logo__lit i:nth-child(5) { clip-path: inset(0 0 0 75.4%);   animation-delay: 1.15s; }
.js .hero--film .logo__sweep { display: block; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url(/static/img/ardem-logo.webp) 0 0 / 100% 100% no-repeat; mask: url(/static/img/ardem-logo.webp) 0 0 / 100% 100% no-repeat;
  background: linear-gradient(100deg, transparent 0 40%, rgba(255,236,200,.7) 50%, transparent 60% 100%) 0 0 / 250% 100% no-repeat;
  background-position: 160% 0; mix-blend-mode: screen; animation: sweep 8s ease-in-out 2.6s infinite; }
/* Hinweis über dem Logo: Schrift in Natriumgelb, springt mit dem Logo an und bleibt hell */
.hero--film .kicker { color: var(--sodium); font-weight: 700; font-size: 13px;
  text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 8px rgba(0,0,0,.9), 0 0 18px rgba(0,0,0,.6); }
.js .hero--film .kicker { animation: tube-on 1.1s linear .3s both, plate-hum 9s linear 4s infinite; }
@keyframes plate-hum { 0%, 87%, 100% { opacity: 1; } 88%, 89% { opacity: .55; } 90%, 91% { opacity: 1; } 92%, 93% { opacity: .75; } 94% { opacity: 1; } }
/* Einleitung: weiße Schrift auf abgedunkelter Fläche mit gelbem Rahmen, lesbar vor jeder Szene */
.hero--film .hero__lead { color: #fff; max-width: 36ch; padding: 14px 18px; border: 1px solid rgba(255,173,51,.55); border-left: 3px solid var(--sodium); border-radius: 3px;
  background: rgba(12,15,18,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
@media (max-width: 900px) {
  /* Auf dem Handy liegt der Text mitten im Bild: Szene insgesamt dunkler */
  .hero--film::before { background: linear-gradient(180deg, rgba(12,15,18,.62) 0%, rgba(12,15,18,.58) 45%, rgba(12,15,18,.72) 75%, var(--night) 100%); }
}
.hero--film .hero__ctas .btn:not(.btn--solid) { background: rgba(12,15,18,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@keyframes tube-on {
  0%, 9% { opacity: 0; } 10%, 15% { opacity: .9; } 16%, 27% { opacity: .1; } 28%, 33% { opacity: 1; } 34%, 45% { opacity: .25; } 46%, 100% { opacity: 1; }
}
@keyframes tube-hum { 0%, 87%, 100% { opacity: 1; } 88%, 89% { opacity: .4; } 90%, 91% { opacity: 1; } 92%, 93% { opacity: .65; } 94% { opacity: 1; } }
@keyframes sweep { 0% { background-position: 160% 0; } 22%, 100% { background-position: -60% 0; } }
.hero__lead { font-size: clamp(19px, 2.1vw, 23px); max-width: 34ch; }
.hero__lead strong { color: var(--sodium); font-weight: 600; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 3px; text-decoration: none; font: 700 18px/1 var(--font-display); text-transform: uppercase; letter-spacing: .08em; border: 1px solid var(--sodium); color: var(--sodium); }
.btn--solid { background: var(--sodium); color: #15110a; }
.btn:hover { box-shadow: 0 0 22px rgba(255,173,51,.35); text-decoration: none; }
@keyframes flicker {
  0% { opacity: .55; } 8% { opacity: 1; } 12% { opacity: .6; } 18% { opacity: 1; } 22% { opacity: .75; } 30%, 100% { opacity: 1; }
}
@media (max-width: 900px) { .hero__inner { grid-template-columns: minmax(0, 1fr); padding-top: 160px; } }

/* Film-Hero: Trailer-Szenen im Hintergrund, Funkenflug, Kornrauschen, Stromschwankung */
.hero--film { min-height: min(92vh, 900px); }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s ease; }
.hero__video.is-ready { opacity: 1; }
.hero--film .hero__img { transform: scale(1.06) translate3d(var(--px, 0), var(--py, 0), 0); transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.hero--film .hero__img img, .hero--film .hero__video { filter: saturate(.9) contrast(1.1) brightness(1.05) sepia(.08); }
.hero--film::before { background:
  radial-gradient(130% 100% at 68% 38%, rgba(12,15,18,0) 45%, rgba(12,15,18,.6) 100%),
  linear-gradient(180deg, rgba(12,15,18,.4) 0%, rgba(12,15,18,0) 22%, rgba(12,15,18,.15) 55%, rgba(12,15,18,.8) 82%, var(--night) 100%),
  linear-gradient(90deg, rgba(12,15,18,.8) 0%, rgba(12,15,18,.2) 42%, rgba(12,15,18,0) 62%); }
/* Natriumdampf-Licht über der Szene */
.hero--film::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(60% 50% at 18% 62%, rgba(255,173,51,.35), transparent 70%); animation: brownout 11s linear 4s infinite; }
.hero__fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
@keyframes brownout { 0%, 90%, 100% { opacity: 1; } 91% { opacity: .2; } 92% { opacity: .9; } 93.5% { opacity: .35; } 95% { opacity: 1; } }
.hero__meta { position: absolute; right: var(--gutter); bottom: 14px; display: flex; align-items: center; gap: 14px; font: 500 11px/1.4 var(--font-mono); letter-spacing: .06em; color: rgba(236,230,214,.55); }
.hero__toggle { font: inherit; letter-spacing: inherit; color: var(--ink); background: rgba(12,15,18,.6); border: 1px solid var(--line); border-radius: 3px; padding: 6px 10px; cursor: pointer; }
.hero__toggle:hover, .hero__toggle:focus-visible { border-color: var(--sodium); color: var(--sodium); }
.hero__toggle:focus-visible { outline: 2px solid var(--sodium); outline-offset: 2px; }
.hero:not(.has-video) .hero__toggle { display: none; }
@media (max-width: 900px) { .hero__meta { position: static; padding: 0 var(--gutter) 18px; flex-wrap: wrap; } .logo { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .hero__video, .hero__fx, .logo__sweep { display: none !important; } .hero--film .hero__img { transform: none; } .logo__lit i, .hero--film .kicker { opacity: 1; } }

/* ---------- Sicherungskasten (Release-Status) ---------- */
.panel { background: linear-gradient(180deg, #1b232b, #141a20); border: 1px solid #2f3b46; border-radius: 6px; padding: 18px 18px 8px; box-shadow: 0 30px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04); position: relative; }
.panel::before, .panel::after { content: ""; position: absolute; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: #3a4752; box-shadow: inset 0 1px 1px rgba(0,0,0,.6); }
.panel::before { left: 10px; } .panel::after { right: 10px; }
.panel__head { display: flex; justify-content: space-between; gap: 12px; font: 500 11px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 0 8px 12px; border-bottom: 1px dashed #33414c; }
.panel__checked { color: #6f7a82; }
.panel__rows { list-style: none; margin: 0; padding: 0; }
.breaker { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "sw label state" "sw note note"; column-gap: 14px; row-gap: 2px; padding: 14px 8px; border-bottom: 1px solid #222b33; }
.breaker:last-child { border-bottom: 0; }
.breaker__switch { grid-area: sw; width: 30px; height: 46px; border-radius: 4px; background: #0b0e11; border: 1px solid #36434e; position: relative; align-self: center; }
.breaker__switch span { position: absolute; left: 4px; right: 4px; height: 20px; border-radius: 3px; background: linear-gradient(180deg, #59646d, #3b444c); transition: top .35s cubic-bezier(.5,1.6,.4,1); top: 21px; }
.breaker__switch::after { content: ""; position: absolute; top: -9px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #333d45; }
.breaker--on .breaker__switch span { top: 3px; background: linear-gradient(180deg, #ffd08a, var(--sodium)); }
.breaker--on .breaker__switch::after { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.breaker--standby .breaker__switch span { top: 12px; background: linear-gradient(180deg, #8a7a5e, #5f5440); }
.breaker--standby .breaker__switch::after { background: var(--sodium); box-shadow: 0 0 8px var(--sodium); animation: blink 1.8s ease-in-out infinite; }
.breaker--off .breaker__switch::after { background: var(--risk); box-shadow: 0 0 6px rgba(239,106,85,.7); }
.breaker__label { grid-area: label; font: 700 20px/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .05em; }
.breaker__state { grid-area: state; font: 500 12px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 2px; align-self: start; white-space: nowrap; }
.breaker--on .breaker__state { color: var(--ok); background: rgba(134,213,154,.1); }
.breaker--standby .breaker__state { color: var(--sodium); background: var(--sodium-soft); }
.breaker--off .breaker__state { color: var(--risk); background: rgba(239,106,85,.1); }
.breaker__note { grid-area: note; font-size: 14px; color: var(--muted); line-height: 1.45; }
@keyframes blink { 50% { opacity: .35; } }
/* Einschalt-Moment: Schalter springen nacheinander in ihre Stellung */
.js .panel--animate .breaker--on .breaker__switch span { animation: switchOn .6s cubic-bezier(.5,1.6,.4,1) both; }
.js .panel--animate .breaker:nth-child(2) .breaker__switch span { animation-delay: .15s; }
.js .panel--animate .breaker:nth-child(3) .breaker__switch span { animation-delay: .3s; }
@keyframes switchOn { from { top: 21px; } }

/* ---------- Lagebericht + Steckbrief ---------- */
.brief { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.brief__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.fact { padding: 20px 20px 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fact__value { font: 800 clamp(36px, 4.4vw, 54px)/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.fact__value small { font-size: .45em; color: var(--muted); font-weight: 700; margin-left: 4px; letter-spacing: .04em; }
.fact__label { font: 500 12px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.situation { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.situation li { padding-left: 22px; position: relative; max-width: 58ch; }
.situation li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 2px; background: var(--sodium); }
@media (max-width: 900px) { .brief { grid-template-columns: 1fr; } }

/* ---------- Meldungen ---------- */
.newsgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.newsgrid .news { padding: 22px 24px 26px 0; border-bottom: 1px solid var(--line); }
.newsgrid .news:not(:nth-child(3n+1)) { padding-left: 24px; border-left: 1px solid var(--line); }
@media (max-width: 900px) { .newsgrid { grid-template-columns: minmax(0, 1fr); } .newsgrid .news { padding-left: 0 !important; border-left: 0 !important; } }
.news__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font: 500 12px/1.3 var(--font-mono); letter-spacing: .08em; color: var(--muted); text-transform: uppercase; margin-bottom: 10px; }
.news__title { font-size: 24px; font-weight: 700; line-height: 1.12; }
.news__title a { color: var(--ink); text-decoration: none; }
.news__title a:hover { color: var(--sodium); }
.news__text { margin-top: 10px; color: #c9c4b6; font-size: 16px; line-height: 1.6; }
.news--major .news__title { color: var(--sodium); }
.news--major .news__title a { color: var(--sodium); }
.kind { padding: 2px 7px; border: 1px solid var(--line); border-radius: 2px; color: var(--ink); }
.kind--steam { border-color: #3c5a74; color: #a8c7e0; }
.kind--video { border-color: #6a3b33; color: #f2a395; }
.kind--qa { border-color: #6b5426; color: var(--sodium); }
.kind--milestone { background: var(--sodium); color: #15110a; border-color: var(--sodium); }
.orig { color: #737c82; text-transform: none; letter-spacing: 0; }

.newslist { display: grid; grid-template-columns: 150px minmax(0, 1fr); border-top: 1px solid var(--line); }
.newslist .news { display: contents; }
.newslist .news__meta { grid-column: 1; padding: 22px 16px 22px 0; border-bottom: 1px solid var(--line); flex-direction: column; align-items: flex-start; margin: 0; }
.newslist .news__body { grid-column: 2; padding: 22px 0; border-bottom: 1px solid var(--line); }
.newslist .news[hidden] { display: none; }
@media (max-width: 700px) {
  .newslist { grid-template-columns: minmax(0, 1fr); }
  .newslist .news__meta { grid-column: 1; border-bottom: 0; padding-bottom: 0; flex-direction: row; }
  .newslist .news__body { grid-column: 1; padding-top: 8px; }
}

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.filters button { background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: 2px; padding: 8px 12px; font: 500 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.filters button[aria-pressed="true"] { background: var(--sodium); color: #15110a; border-color: var(--sodium); }
.filters button:hover { border-color: var(--sodium); }

/* ---------- Videos ---------- */
.videogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 32px 24px; }
.shortgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 24px 16px; }
.video { margin: 0; display: grid; gap: 10px; align-content: start; }
.video[hidden] { display: none; }
.yt { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #000; cursor: pointer; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 3px; }
.video--short .yt { aspect-ratio: 9 / 16; }
.yt img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s, filter .3s; filter: saturate(.9); }
.yt:hover img { transform: scale(1.03); filter: saturate(1.05); }
.yt:hover .yt__play { background: var(--sodium); }
.yt:hover .yt__play::after { border-left-color: #15110a; }
.yt__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; background: rgba(12,15,18,.78); border: 2px solid var(--sodium); }
.yt__play::after { content: ""; position: absolute; left: 21px; top: 16px; border-left: 16px solid var(--sodium); border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.video--short .yt__play { width: 42px; height: 42px; }
.video--short .yt__play::after { left: 16px; top: 11px; border-left-width: 13px; border-top-width: 8px; border-bottom-width: 8px; }
.yt__dur { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.8); font: 500 12px/1 var(--font-mono); padding: 4px 6px; border-radius: 2px; color: var(--ink); }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video figcaption { display: grid; gap: 4px; }
.video__date { font: 500 12px/1 var(--font-mono); letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.video__title { font-weight: 600; line-height: 1.3; }
.video--short .video__title { font-size: 14px; font-weight: 500; }
.video__note { color: var(--muted); font-size: 15px; line-height: 1.5; }
.featured { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); align-items: start; }
.featured .video__title { font: 700 28px/1.1 var(--font-display); }
.featured__list { display: grid; gap: 22px; }
.featured__list .video { grid-template-columns: 150px 1fr; align-items: start; }
@media (max-width: 900px) { .featured { grid-template-columns: minmax(0, 1fr); } }
.ytnotice { font-size: 13px; color: #79838a; margin-top: 18px; max-width: 70ch; }

/* ---------- Galerie ---------- */
.strip { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(120px, 14vw, 190px); gap: 8px; }
.strip a { overflow: hidden; border-radius: 2px; display: block; position: relative; }
.strip a:nth-child(1) { grid-column: span 6; grid-row: span 2; }
.strip a:nth-child(2), .strip a:nth-child(3) { grid-column: span 3; }
.strip a:nth-child(4), .strip a:nth-child(5) { grid-column: span 3; }
.strip img, .gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s, filter .3s; filter: saturate(.9); }
.strip a:hover img, .gallery a:hover img { transform: scale(1.04); filter: saturate(1.05); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 10px; }
.gallery figure { margin: 0; }
.gallery a { display: block; aspect-ratio: 16/9; overflow: hidden; border-radius: 2px; }
.gallery figcaption { font-size: 14px; color: var(--muted); padding: 8px 2px 14px; }
@media (max-width: 700px) { .strip { grid-template-columns: repeat(2, 1fr); } .strip a { grid-column: span 1 !important; grid-row: span 1 !important; } .strip a:nth-child(1) { grid-column: span 2 !important; } }
.lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 94vh; }
.lightbox::backdrop { background: rgba(5,7,9,.92); }
.lightbox img { max-width: 96vw; max-height: 90vh; width: auto; height: auto; }
.lightbox__close { position: fixed; top: 16px; right: 20px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--deep); color: var(--ink); font-size: 26px; cursor: pointer; }

/* ---------- Karte ---------- */
.mapframe { position: relative; height: min(78vh, 760px); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: #141416; }
#map { position: absolute; inset: 0; background: #141416; }
/* Hochkant-Bildschirme: Rahmen im Seitenverhältnis der Insel (etwa 10:7), sonst bleibt oben und unten nur Leere */
@media (max-width: 700px), (orientation: portrait) and (max-width: 1000px) { .mapframe { height: auto; width: 100%; aspect-ratio: 10 / 7.6; } }
.leaflet-container { font-family: var(--font-body); }
.leaflet-control-zoom a { background: var(--deep) !important; color: var(--ink) !important; border-color: var(--line) !important; }
.leaflet-control-attribution { background: rgba(12,15,18,.8) !important; color: var(--muted) !important; font-size: 11px; }
.leaflet-control-attribution a { color: var(--sodium) !important; }
.credit { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; padding: 22px 24px; margin-top: 18px; border: 1px solid #4a3a1d; background: linear-gradient(90deg, rgba(255,173,51,.09), rgba(255,173,51,.02)); border-radius: 4px; }
.credit__badge { display: block; line-height: 0; }
.credit__badge img { width: clamp(180px, 22vw, 260px); height: auto; filter: drop-shadow(0 0 14px rgba(140,170,255,.35)); transition: filter .3s, transform .3s; }
.credit__badge:hover img { filter: drop-shadow(0 0 22px rgba(140,170,255,.7)); transform: translateY(-1px); }
.credit p { max-width: 70ch; }
@media (max-width: 800px) { .credit { grid-template-columns: 1fr; } }
.mapteaser { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 60px); align-items: center; }
.mapteaser__img { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
@media (max-width: 900px) { .mapteaser { grid-template-columns: 1fr; } }

/* ---------- Themen mit Status ---------- */
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 28px; }
.legend__label { font: 500 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.badge { display: inline-block; font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 7px; border-radius: 2px; white-space: nowrap; }
.badge--confirmed { color: var(--ok); background: rgba(134,213,154,.1); }
.badge--wip { color: var(--sodium); background: var(--sodium-soft); }
.badge--planned { color: var(--plan); background: rgba(143,184,214,.1); }
.badge--open { color: #b9bfc3; background: rgba(185,191,195,.08); }
.badge--dropped { color: var(--risk); background: rgba(239,106,85,.1); }
.topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 64px); }
@media (max-width: 900px) { .topics { grid-template-columns: minmax(0, 1fr); } }
.topic { padding: 30px 0 34px; border-top: 1px solid var(--line); }
.topic__title { font-size: 30px; text-transform: uppercase; font-weight: 800; letter-spacing: .02em; }
.topic__intro { margin-top: 10px; color: #c9c4b6; max-width: 60ch; }
.points { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.point { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 14px; align-items: baseline; font-size: 16px; line-height: 1.55; }
.point .badge { justify-self: start; }
.point .src { grid-column: 2; font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: #6f7a82; }
.point--dropped .point__text { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(239,106,85,.6); }
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.toc a { font: 700 16px/1 var(--font-display); text-transform: uppercase; letter-spacing: .06em; text-decoration: none; color: var(--ink); border: 1px solid var(--line); padding: 9px 12px; border-radius: 2px; }
.toc a:hover { border-color: var(--sodium); color: var(--sodium); }

/* ---------- Seitenkopf für Unterseiten ---------- */
.pagehead { position: relative; padding: clamp(70px, 10vw, 140px) 0 clamp(36px, 5vw, 60px); overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--line); }
.pagehead__img { position: absolute; inset: 0; z-index: -2; }
.pagehead__img img { width: 100%; height: 100%; object-fit: cover; opacity: .38; filter: saturate(.6); }
.pagehead::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12,15,18,.2), var(--night)); }
.pagehead h1 { font: 900 clamp(60px, 10vw, 132px)/.86 var(--font-display); text-transform: uppercase; margin: 4px 0 22px; }
.pagehead .lead { color: #d8d2c3; }

/* ---------- Zeitleiste ---------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 118px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, var(--sodium), var(--line) 60%); }
.timeline li { display: grid; grid-template-columns: 104px 1fr; gap: 36px; padding: 0 0 26px; position: relative; }
.timeline li::before { content: ""; position: absolute; left: 113px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--night); border: 2px solid var(--sodium); }
.timeline li.is-current::before { background: var(--sodium); box-shadow: 0 0 12px var(--sodium); }
.timeline li.is-void .timeline__text { color: var(--muted); }
.timeline__date { font: 500 13px/1.6 var(--font-mono); color: var(--muted); text-align: right; letter-spacing: .04em; }
.timeline__title { font: 700 22px/1.15 var(--font-display); text-transform: uppercase; letter-spacing: .03em; }
.timeline__text { color: #c9c4b6; margin-top: 4px; max-width: 64ch; }
@media (max-width: 600px) {
  .timeline::before { left: 6px; } .timeline li { grid-template-columns: 1fr; gap: 2px; padding-left: 28px; }
  .timeline li::before { left: 1px; } .timeline__date { text-align: left; }
}

/* ---------- Tabellen, FAQ, Karten ---------- */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 3px; }
table { width: 100%; border-collapse: collapse; font-size: 16px; font-variant-numeric: tabular-nums; }
th, td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
th { font: 500 12px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: var(--deep); }
tr:last-child td { border-bottom: 0; }
td strong { font-family: var(--font-display); font-size: 20px; letter-spacing: .03em; }
.faq { border-top: 1px solid var(--line); max-width: 900px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; font: 700 24px/1.15 var(--font-display); letter-spacing: .02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font: 400 28px/1 var(--font-mono); color: var(--sodium); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 0 22px; color: #d3cdbf; max-width: 68ch; }
.faq .answer p + p { margin-top: .8em; }
.faqcat { font: 500 12px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 40px 0 12px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.card { background: var(--night); padding: 26px 24px 28px; text-decoration: none; color: var(--ink); display: grid; gap: 10px; align-content: start; transition: background .25s; }
.card:hover { background: var(--deep); }
.card h3 { font-size: 28px; text-transform: uppercase; font-weight: 800; }
.card:hover h3 { color: var(--sodium); }
.card p { color: var(--muted); font-size: 16px; }
.sources { display: grid; gap: 28px; }
.sources ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.note { border-left: 3px solid var(--sodium); padding: 14px 18px; background: var(--deep); max-width: 76ch; }
.todo { border: 1px dashed var(--risk); padding: 18px 20px; color: #f3c6be; max-width: 76ch; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.quote { font: 700 clamp(26px, 3vw, 36px)/1.15 var(--font-display); letter-spacing: .01em; border-left: 3px solid var(--sodium); padding-left: 22px; max-width: 30ch; }
.quote cite { display: block; font: 500 12px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 12px; font-style: normal; }

/* ---------- Fußzeile ---------- */
.footer { border-top: 1px solid var(--line); margin-top: 40px; padding: 56px 0 30px; background: var(--deep); }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.footer__brand { font: 900 34px/1 var(--font-display); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; }
.footer__brand span { font: 500 11px/1 var(--font-mono); letter-spacing: .14em; color: var(--muted); vertical-align: middle; }
.footer__note { color: #c9c4b6; font-size: 15px; max-width: 60ch; border-left: 3px solid var(--sodium); padding-left: 14px; }
.footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer__links a { color: var(--ink); text-decoration: none; }
.footer__links a:hover { color: var(--sodium); }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); font: 500 12px/1.5 var(--font-mono); color: #6f7a82; letter-spacing: .04em; }
@media (max-width: 800px) { .footer__grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Rechtliches ---------- */
.legal h2 { font-size: clamp(26px, 3vw, 34px); margin: 44px 0 12px; }
.legal h2:first-child, .legal .note + h2 { margin-top: 28px; }
.legal h3 { font-size: 22px; margin: 30px 0 8px; text-transform: uppercase; letter-spacing: .03em; }
.legal p + p { margin-top: .8em; }
.legal .note { margin: 0 0 14px; }
.missing { background: rgba(239,106,85,.18); color: var(--risk); padding: 1px 6px; border-radius: 2px; font: 500 13px/1.4 var(--font-mono); }

/* ---------- Schmale Handys (auch bei vergrößerter Schrift in Android/iOS) ----------
   Grundsatz: nichts darf breiter werden als der Bildschirm. Lange Wörter und Adressen
   brechen um, Raster dürfen schrumpfen. Geprüft bis 260 px Breite. */
body { overflow-wrap: break-word; }
img, video, iframe, svg { max-width: 100%; }
.news__body, .news__text, .topic, .point__text, .faq, .legal, .hero__lead, .breaker__note { overflow-wrap: anywhere; min-width: 0; }
.brand { min-width: 0; }
@media (max-width: 380px) { .brand__tag { display: none; } }
@media (max-width: 420px) {
  .hero--film .kicker { letter-spacing: .08em; }
  .point { grid-template-columns: minmax(0, 1fr); }
  .point .src { grid-column: 1; }
  .featured__list .video { grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
  .breaker { grid-template-columns: 34px minmax(0, 1fr); grid-template-areas: "sw label" "sw state" "sw note"; }
  .breaker__state { justify-self: start; }
  .panel__head { flex-direction: column; gap: 4px; }
  .topic__title { font-size: 26px; }
  .btn { padding: 12px 16px; font-size: 17px; }
}
/* Große Seitentitel auf dem Handy so skalieren, dass ein Wort wie „Neuigkeiten“ in eine Zeile passt */
h1 { overflow-wrap: normal; }
@media (max-width: 600px) { .pagehead h1, main h1[style] { font-size: clamp(34px, 14vw, 60px) !important; } }

/* =====================================================================
   Lichtschicht: „Schalt die Welt wieder ein“ für die ganze Seite.
   Natriumlicht (warm) gegen Nebel (kalt), Strom fließt durch die
   Trennlinien, Bereiche springen beim Hineinscrollen kurz an.
   Alles ist ohne Bewegung vollständig sichtbar (Ruhezustand = fertig).
   ===================================================================== */
:root { --cold: #5f8fb4; --ember: #ff6a3d; }

/* Umgebungslicht hinter allem: drei Lichtquellen, die langsam wandern */
body::after { content: ""; position: fixed; inset: -20vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38vmax 30vmax at 12% 30%, rgba(255,173,51,.15), transparent 70%),
    radial-gradient(42vmax 34vmax at 88% 70%, rgba(95,143,180,.16), transparent 70%),
    radial-gradient(30vmax 24vmax at 60% 110%, rgba(255,106,61,.1), transparent 70%);
  animation: ambient 46s ease-in-out infinite alternate; }
@keyframes ambient { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(4vmax,-3vmax,0) scale(1.08); } 100% { transform: translate3d(-3vmax,2vmax,0) scale(1.02); } }

/* Bereiche abwechselnd warm und kalt getönt */
main > .section { position: relative; border-top: 0; isolation: isolate; }
main > .section::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
main > .section:nth-of-type(odd)::after { background: radial-gradient(60% 80% at 0% 0%, rgba(255,173,51,.16), transparent 62%), radial-gradient(40% 60% at 100% 100%, rgba(255,106,61,.07), transparent 70%), linear-gradient(180deg, rgba(26,34,42,.7), rgba(12,15,18,0) 75%); }
main > .section:nth-of-type(even)::after { background: radial-gradient(60% 85% at 100% 15%, rgba(95,143,180,.2), transparent 62%), radial-gradient(35% 50% at 0% 90%, rgba(255,173,51,.06), transparent 70%), linear-gradient(180deg, rgba(16,24,32,.85), rgba(12,15,18,0) 85%); }
/* kühle Bereiche: feines Punktraster wie auf einem Lageplan, nach außen ausgeblendet */
main > .section:nth-of-type(even) > .wrap { position: relative; }
main > .section:nth-of-type(even) > .wrap::before { content: ""; position: absolute; inset: -40px 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(143,184,214,.22) 1px, transparent 1.5px) 0 0 / 26px 26px;
  -webkit-mask: radial-gradient(70% 70% at 70% 40%, #000, transparent 75%); mask: radial-gradient(70% 70% at 70% 40%, #000, transparent 75%); animation: drift 60s linear infinite; }
@keyframes drift { to { background-position: 26px 52px; } }

/* Stromleitung statt grauer Trennstrich: ein Lichtimpuls läuft hindurch */
main > .section::before, .footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(255,214,140,.95) 50%, transparent) 0 0 / 220px 100% no-repeat,
    linear-gradient(90deg, rgba(38,49,59,.4), #2b3742 20%, #2b3742 80%, rgba(38,49,59,.4));
  animation: current 7s linear infinite; }
main > .section:nth-of-type(even)::before { animation-duration: 9s; animation-direction: reverse; }
.footer { position: relative; border-top: 0; background: linear-gradient(180deg, #121920, var(--deep)); }
@keyframes current { from { background-position: -220px 0, 0 0; } to { background-position: calc(100% + 220px) 0, 0 0; } }

/* Abschnittsköpfe: Lampe pulsiert, unter der Überschrift glimmt ein Leuchtbalken */
.sechead h2 { position: relative; padding-bottom: 14px; }
.sechead h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 72px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--sodium), rgba(255,173,51,0)); box-shadow: 0 0 14px rgba(255,173,51,.6); }
.lampdot { animation: lamp 3.2s ease-in-out infinite; }
@keyframes lamp { 0%, 100% { box-shadow: 0 0 10px 2px rgba(255,173,51,.55); } 50% { box-shadow: 0 0 16px 5px rgba(255,173,51,.8); } }

/* Einschalten beim Hineinscrollen (nur ein kurzes Flackern, nie unsichtbar) */
.is-powering { animation: power-on .9s steps(1) both; }
@keyframes power-on { 0% { opacity: .35; } 12% { opacity: 1; } 20% { opacity: .5; } 34% { opacity: 1; } 42% { opacity: .75; } 52%, 100% { opacity: 1; } }

/* Kennzahlen als beleuchtete Anzeigetafel */
.brief__facts { border-color: #2c3843; background: linear-gradient(160deg, rgba(27,35,43,.9), rgba(17,22,27,.9)); border-radius: 4px; overflow: hidden;
  box-shadow: 0 24px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04); }
.fact { position: relative; border-color: #26313b; transition: background .3s; }
.fact::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--sodium); opacity: 0; transition: opacity .3s; box-shadow: 0 0 12px var(--sodium); }
.fact:hover { background: rgba(255,173,51,.05); }
.fact:hover::before { opacity: 1; }
.fact__value { color: #fff3dc; text-shadow: 0 0 22px rgba(255,173,51,.35); }

/* Meldungen und Karten: Licht beim Überfahren */
.newsgrid .news, .card { transition: background .3s, box-shadow .3s; }
.newsgrid .news { position: relative; }
.newsgrid .news::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: linear-gradient(90deg, var(--sodium), transparent 70%);
  transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.7,.2,1); box-shadow: 0 0 10px rgba(255,173,51,.6); }
.newsgrid .news:hover::before { transform: scaleX(1); }
.newsgrid .news:hover { background: linear-gradient(180deg, rgba(255,173,51,.06), transparent 80%); }
.cards { background: #2a3540; border-radius: 4px; overflow: hidden; }
.card { position: relative; background: linear-gradient(160deg, #141b22, var(--night)); overflow: hidden; }
.card::after { content: ""; position: absolute; right: -30%; bottom: -60%; width: 70%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,173,51,.22), transparent 65%); opacity: 0; transition: opacity .35s, transform .5s; transform: translate(20%, 20%); }
.card:hover { background: linear-gradient(160deg, #18212a, #10151a); }
.card:hover::after { opacity: 1; transform: translate(0, 0); }
.video .yt { transition: box-shadow .3s, transform .3s; }
.video:hover .yt { box-shadow: 0 0 0 1px rgba(255,173,51,.6), 0 18px 40px rgba(0,0,0,.5), 0 0 30px rgba(255,173,51,.2); transform: translateY(-2px); }

/* Bilder: langsames Atmen, beim Überfahren warmes Licht */
.strip a::after, .gallery a::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(255,140,40,.28), transparent 55%); opacity: 0; transition: opacity .35s; }
.strip a:hover::after, .gallery a:hover::after { opacity: 1; }
.strip a:nth-child(1) img { animation: breathe 18s ease-in-out infinite alternate; }
@keyframes breathe { from { transform: scale(1); } to { transform: scale(1.07); } }

/* Karte: ein Suchlicht streicht über Minnowa */
.mapteaser__img { position: relative; box-shadow: 0 30px 60px rgba(0,0,0,.45), 0 0 0 1px #2c3843; }
.mapteaser__img::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(100deg, transparent 35%, rgba(255,214,140,.22) 50%, transparent 65%) 0 0 / 260% 100% no-repeat; animation: searchlight 7s ease-in-out infinite; }
@keyframes searchlight { 0% { background-position: 130% 0; } 60%, 100% { background-position: -30% 0; } }

/* Knöpfe: Lichtstreif beim Überfahren */
.btn { position: relative; overflow: hidden; }
.btn::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%) 0 0 / 250% 100% no-repeat; background-position: 150% 0; }
.btn:hover::after { transition: background-position .7s ease; background-position: -50% 0; }

/* Unterseiten-Köpfe: dasselbe warme Licht wie die Startseite */
.pagehead::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(55% 70% at 15% 70%, rgba(255,173,51,.45), transparent 70%); animation: brownout 13s linear 3s infinite; }

@media (prefers-reduced-motion: reduce) {
  main > .section::before, .footer::before { background: linear-gradient(90deg, rgba(38,49,59,.4), #2b3742 20%, #2b3742 80%, rgba(38,49,59,.4)); }
}

/* Nur für Screenreader und Suchmaschinen sichtbar */
.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; }

/* ---------- Meldungsseiten ---------- */
.pagehead--article h1.article__title { font: 800 clamp(34px, 5.4vw, 72px)/1 var(--font-display); text-transform: none; max-width: 22ch; }
.pagehead--article .kicker a { color: inherit; }
.article { display: grid; gap: 22px; }
.article > * { max-width: 820px; }
.card h3 { overflow-wrap: anywhere; hyphens: auto; }
.article__text { font-size: clamp(19px, 2vw, 22px); line-height: 1.6; color: #e4dfd2; }
.article__video { max-width: 760px; }
.article__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.article__note { color: var(--muted); font-size: 14px; border-left: 2px solid var(--line); padding-left: 12px; }

/* ---------- Systemanforderungen ---------- */
.reqgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid #2c3843; border-radius: 4px; overflow: hidden;
  background: linear-gradient(160deg, rgba(27,35,43,.9), rgba(17,22,27,.9)); box-shadow: 0 24px 50px rgba(0,0,0,.35); }
.reqcol { padding: 26px 26px 18px; }
.reqcol + .reqcol { border-left: 1px solid #26313b; }
.reqcol h2 { font-size: 28px; text-transform: uppercase; margin-bottom: 14px; }
.reqcol--rec h2 { color: var(--sodium); text-shadow: 0 0 18px rgba(255,173,51,.35); }
.reqlist { margin: 0; display: grid; }
.reqlist div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid #222b33; }
.reqlist dt { font: 500 12px/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.reqlist dd { margin: 0; color: var(--ink); }
.req__note { color: var(--muted); margin-top: 14px; }
.req__more { margin-top: clamp(40px, 6vw, 70px); }
.req__platforms { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.req__platforms li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 3px; font-weight: 600; }
.req__platforms span { font: 500 12px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.req__platforms .is-yes span { color: var(--ok); }
.req__platforms .is-no span { color: var(--muted); }
.req__source { color: var(--muted); font-size: 14px; margin: 34px 0 18px; }
@media (max-width: 800px) { .reqgrid { grid-template-columns: minmax(0, 1fr); } .reqcol + .reqcol { border-left: 0; border-top: 1px solid #26313b; } }
@media (max-width: 420px) { .reqlist div { grid-template-columns: minmax(0, 1fr); gap: 2px; } .brand__logo img { height: 24px; } }