/* ==========================================================================
   Technikshavo — Stylesheet
   Werte aus dem Design-Handoff (Modernist-Tokens, Akzent auf Technikshavo-Navy).
   Radius durchgehend 0, eine Schrift (Archivo 400/600/800).
   ========================================================================== */

:root {
  /* Farben */
  --bg: #f3f2f2;
  --surface: #eae9e9;
  --text: #201e1d;
  --divider: rgba(32, 30, 29, .4);

  --navy-900: #001a6b;              /* Technikshavo-Navy, dunkelste Stufe */
  --navy: #2a3f85;                  /* Hauptnavigation, Primärbuttons */
  --navy-600: #152c78;              /* Hover auf Akzentflächen */
  --navy-200: #d6d9ea;              /* Rahmen Icon-Buttons */
  --navy-100: #eceef5;              /* Text auf Navy-Flaechen */
  --hover: #cfd5ea;                 /* Hover-Flaeche auf hellem Grund */

  --neutral-300: #d7d3d3;
  --neutral-500: #9b9797;
  --neutral-600: #7d7979;
  --neutral-700: #605d5d;
  --neutral-800: #444141;
  --neutral-900: #2d2b2b;

  --schatten-lg: 0 12px 32px rgba(45, 43, 43, .22);

  --rand: 40px;                     /* Seitenrand Desktop */
  --sidebar: 320px;
  --spalte-abstand: 48px;
  --breite: 1280px;                 /* Entwurfsbreite des Handoffs */

  --schrift: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ------------------------------------------------------------------ Basis */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  /* clip statt hidden: `hidden` erzeugt einen Scroll-Container und setzt
     damit jedes position:sticky im Dokument ausser Kraft. */
  overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--schrift);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
}

p { margin: 0 0 12px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
ul, ol { margin: 0 0 12px; padding-left: 22px; }
a { color: inherit; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
::selection { background: rgba(42, 63, 133, .25); }

.nurlesbar {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.sprung {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy-900); color: var(--bg); padding: 10px 16px;
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.sprung:focus { left: 0; }

/* ------------------------------------------------------- Grundbausteine */

.kicker {
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--navy-900);
}

.meta {
  font-size: 12px; color: var(--neutral-700);
  font-feature-settings: 'tnum' 1;
}

.regel { height: 2px; border: 0; margin: 0; background: var(--divider); }

.knopf {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border: 1px solid transparent; border-radius: 0;
  font-family: var(--schrift); font-weight: 800; font-size: 14px; line-height: 1.2;
  text-decoration: none; cursor: pointer; background: transparent; color: var(--text);
  transition: background 150ms, color 150ms, border-color 150ms;
}
.knopf svg { flex: none; display: block; }
.knopf[disabled], .knopf.aus { opacity: .45; pointer-events: none; }

.knopf-primaer { background: var(--navy); color: var(--bg); }
.knopf-primaer:hover { background: var(--navy-600); }

.knopf-sekundaer { border-color: var(--divider); }
.knopf-sekundaer:hover { background: rgba(32, 30, 29, .07); }

.knopf-umriss { border-color: var(--bg); color: var(--bg); }
.knopf-umriss:hover { background: var(--navy-600); }

.feld {
  width: 100%; min-height: 40px; padding: 8px 12px;
  font: inherit; font-size: 14px; color: var(--text); caret-color: var(--navy);
  background: var(--surface); border: 1px solid var(--divider); border-radius: 0;
}
.feld:hover { border-color: rgba(32, 30, 29, .55); }
.feld:focus-visible { border-color: var(--navy); outline-offset: 0; }

/* ----------------------------------------------------------------- Kopf */

.kopf { display: contents; }
.kopf-desktop { display: contents; }

.leiste {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; height: 32px; padding: 0 var(--rand);
  background: var(--navy-900); color: var(--bg); font-size: 12px;
}
.leiste-claim { color: var(--navy-100); }
.leiste-sozial { display: flex; gap: 20px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.leiste-sozial a {
  display: inline-flex; align-items: center; gap: 7px;
  color: inherit; text-decoration: none; transition: color 150ms;
}
.leiste-sozial svg { flex: none; display: block; }
.leiste-sozial a:hover { color: var(--navy-200); }

.marke {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; padding: 28px var(--rand) 20px;
}
.marke-block { display: flex; align-items: center; gap: 16px; text-decoration: none; color: inherit; }
.marke-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.marke-logo { display: block; flex: none; }
.marke-logo img { display: block; width: 56px; height: 56px; }
.kopf-mobil .marke-block { gap: 10px; }
.kopf-mobil .marke-logo img { width: 36px; height: 36px; }
.wortmarke {
  font-weight: 800; font-size: 40px; letter-spacing: -0.03em;
  line-height: .95; margin-left: -0.058em;
}
.subline { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy-900); }

.suchform { display: flex; width: 380px; position: relative; }
.suchform .feld { border-right: 0; }
.suchform .knopf { flex: none; padding-inline: 14px; }

/* Die Navigation bleibt beim Scrollen oben stehen. Mega-Menue und Navigation
   liegen im selben Wrapper, damit das Panel mitwandert statt an seiner
   urspruenglichen Stelle zu bleiben. */
.klebe-marke { display: block; height: 1px; margin-bottom: -1px; }
.navleiste { position: sticky; top: 0; z-index: 40; }
.navleiste.klebt .hauptnav { box-shadow: 0 2px 12px rgba(45, 43, 43, .28); }

.hauptnav {
  display: flex; align-items: stretch; padding: 0 var(--rand);
  background: var(--navy); color: var(--bg); font-size: 14px; font-weight: 600;
}

/* Marke in der Navigation: erscheint erst, wenn die Leiste klebt und der
   grosse Seitenkopf nach oben herausgescrollt ist. */
.nav-marke {
  display: flex; align-items: center; gap: 10px;
  max-width: 0; padding: 0 !important; overflow: hidden;
  opacity: 0; white-space: nowrap;
  transition: max-width 200ms, opacity 150ms, padding 200ms;
}
.nav-marke img { width: 28px; height: 28px; flex: none; }
.nav-marke span { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
.navleiste.klebt .nav-marke {
  max-width: 240px; opacity: 1;
  padding: 12px 18px 12px 0 !important; margin-right: 8px;
}
.navleiste.klebt .hauptnav > a:first-of-type { margin-left: 0; }

.nav-suche {
  display: none; align-items: center; margin-left: auto; margin-right: -18px;
  padding: 12px 18px; background: var(--navy-900); border: 0; cursor: pointer;
  color: inherit; transition: background 150ms;
}
.nav-suche:hover { background: var(--navy-600); }
.navleiste.klebt .nav-suche { display: inline-flex; }
.hauptnav a {
  display: flex; align-items: center; gap: 6px; padding: 12px 18px;
  color: inherit; text-decoration: none; transition: background 150ms;
  background: none; border: 0; font: inherit; cursor: pointer;
}
.hauptnav a:first-child { margin-left: -18px; }
.hauptnav a:hover, .hauptnav a[aria-expanded="true"] { background: var(--navy-600); }
.hauptnav a.aktiv { background: var(--navy-900); }
.hauptnav .unterstuetzen { margin-left: auto; margin-right: -18px; background: var(--navy-900); }

/* Social-Links rechtsbündig in der Navigation (ersetzt die alte obere Leiste). */
.nav-sozial { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.nav-sozial a {
  display: inline-flex; align-items: center; gap: 7px; padding: 12px 4px;
  color: inherit; text-decoration: none; font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase; transition: color 150ms;
}
.nav-sozial svg { flex: none; display: block; }
.nav-sozial a:hover { color: var(--navy-200); }

.ticker {
  display: flex; align-items: center; gap: 16px; height: 40px;
  padding: 0 var(--rand); border-bottom: 1px solid var(--divider);
  font-size: 13px; overflow: hidden; white-space: nowrap;
}
.ticker-label,
.ticker-mobil .ticker-label {
  flex: none; font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--navy-900);
}

/* --- Laufband ---------------------------------------------------------
   Das Band enthaelt den Inhalt zweimal und wandert genau um die Haelfte
   nach links. Dadurch steht am Ende wieder der Anfang und der Lauf wirkt
   endlos, ohne Sprung. Die Dauer setzt das Skript anhand der Breite, damit
   die Geschwindigkeit unabhaengig von der Anzahl der Eintraege gleich bleibt. */
.ticker-fenster {
  flex: 1; min-width: 0; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.ticker-band {
  display: flex; width: max-content;
  animation: ticker-lauf var(--ticker-dauer, 60s) linear infinite;
}
.ticker-satz { display: flex; gap: 28px; padding-right: 28px; }
@keyframes ticker-lauf { to { transform: translateX(-50%); } }

/* Anhalten bei Mauskontakt, Tastaturfokus und per Schalter. */
.ticker:hover .ticker-band,
.ticker-mobil:hover .ticker-band,
.ticker:focus-within .ticker-band,
.ticker-mobil:focus-within .ticker-band,
.ticker-band.pausiert { animation-play-state: paused; }

.ticker a, .ticker-mobil a { color: inherit; text-decoration: none; transition: color 150ms; }
.ticker a:hover, .ticker-mobil a:hover { color: var(--navy-900); text-decoration: underline; text-underline-offset: 3px; }
.ticker a span { color: var(--neutral-700); font-feature-settings: 'tnum' 1; }

/* Wer Bewegung abgestellt hat, bekommt ein ruhiges, scrollbares Band. */
@media (prefers-reduced-motion: reduce) {
  .ticker-band { animation: none; }
  .ticker-fenster { overflow-x: auto; mask-image: none; }
  .ticker-satz + .ticker-satz { display: none; }
}

/* Mega-Menü */
.mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
  background: var(--bg); border-top: 2px solid var(--navy); border-bottom: 2px solid var(--navy);
  box-shadow: var(--schatten-lg); padding: 28px var(--rand) 32px;
}
/* Geschlossen ist der Ausgangszustand. `visibility` wird verzoegert
   umgeschaltet, damit das Panel beim Schliessen noch sichtbar bleibt,
   solange die Bewegung laeuft, danach aber sauber aus Fokus und
   Vorlesereihenfolge verschwindet. */
.mega {
  opacity: 0; visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s 180ms;
}
.mega.offen {
  opacity: 1; visibility: visible;
  transform: translateY(0);
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s;
}
/* Solange JavaScript nicht gelaufen ist, bleibt das Attribut massgeblich. */
.mega[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .mega, .mega.offen { transition: opacity 1ms, visibility 0s; transform: none; }
}
.mega-kopf {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 2px solid var(--divider); padding-bottom: 12px; margin-bottom: 24px;
}
.mega-kopf a { font-size: 13px; font-weight: 600; color: var(--navy); text-decoration: none; }
.mega-spalten {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 32px;
  font-size: 14px;
}
.mega-spalten > div { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mega-spalten a {
  display: block; color: inherit; text-decoration: none; line-height: 1.3;
  padding: 4px 8px; margin: 0 -8px; border-radius: 6px;
  transition: background 150ms, color 150ms;
  overflow-wrap: anywhere;
}
.mega-spalten a:hover { background: var(--navy); color: #fff; }

/* Mobiler Kopf */
/* Auf dem Desktop komplett aus; im mobilen Breakpoint wird daraus `contents`,
   damit die Kinder direkte Geschwister des Inhalts werden und der Kopf kleben
   kann (siehe .kopf / .kopf-desktop weiter oben). */
.kopf-mobil { display: none; }
.kopf-mobil-leiste {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: var(--navy); color: var(--bg);
}
.navleiste-mobil { position: sticky; top: 0; z-index: 40; }
.kopf-mobil .wortmarke { font-size: 20px; letter-spacing: -0.02em; line-height: 1; margin-left: 0; }
.kopf-mobil .subline { font-size: 10px; letter-spacing: 0.08em; color: var(--navy-100); }
.icon-knopf {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--navy-200); color: inherit;
  cursor: pointer; border-radius: 0; padding: 0;
}
.ticker-mobil {
  display: flex; align-items: center; gap: 12px; padding: 8px 16px;
  border-bottom: 1px solid var(--divider); font-size: 12px;
  overflow: hidden; white-space: nowrap;
}
.ticker-mobil .ticker-satz { gap: 20px; padding-right: 20px; }

/* Mobiler Schub (Drawer) */
.schub {
  position: fixed; inset: 0; z-index: 60; background: var(--bg);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.schub[hidden] { display: none; }
.schub-kopf {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: var(--navy); color: var(--bg);
  position: sticky; top: 0;
}
.schub-liste { padding: 8px 16px 40px; }
.schub-liste a, .schub-liste button {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  min-height: 44px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--divider);
  background: none; font: inherit; font-weight: 600; color: inherit;
  text-align: left; text-decoration: none; cursor: pointer;
}
.schub-unter { display: none; padding-left: 12px; }
.schub-unter.offen { display: block; }
.schub-unter a { font-weight: 400; font-size: 14px; }

/* Suchvorschläge */
.vorschlaege {
  position: absolute; top: calc(100% + 4px); right: 0; width: 380px; z-index: 40;
  background: var(--bg); border: 1px solid var(--divider); box-shadow: var(--schatten-lg);
  max-height: 70vh; overflow-y: auto;
}
.vorschlaege[hidden] { display: none; }
.vorschlaege-gruppe {
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--navy-900); padding: 10px 14px 6px;
}
.vorschlaege a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 8px 14px; font-size: 14px; text-decoration: none; color: inherit;
}
.vorschlaege a:hover, .vorschlaege a.markiert {
  background: var(--hover); color: var(--navy-900);
  box-shadow: inset 3px 0 0 0 var(--navy);
}
.vorschlaege a.programm { background: var(--hover); font-weight: 600; }
.vorschlaege a span { flex: none; font-size: 12px; color: var(--neutral-700); }
.vorschlaege-fuss {
  padding: 8px 14px; border-top: 1px solid var(--divider);
  font-size: 11px; color: var(--neutral-700);
}
.vorschlaege-fuss kbd {
  background: var(--surface); padding: 1px 5px; font: inherit; font-size: 11px; font-weight: 600;
}

/* Bausteine, die es nur in der mobilen Fassung gibt (Handoff Screen 02) */
.nur-mobil { display: none; }
.suchform-mobil { display: none; }

/* --------------------------------------------------------------- Layout */

/* Der Handoff ist auf 1280px entworfen. Ohne Begrenzung laufen Zeilen und
   Raster auf breiten Monitoren auseinander.
   Zwei Faelle, bewusst unterschiedlich geloest:
   1. Blaue Vollflaechen (Leiste, Navigation, Poster, Fuss) sollen weiterhin
      randlos durchlaufen — dort wird nur der INHALT ueber padding zentriert.
   2. Inhaltsbloecke ohne eigenen Hintergrund bekommen schlicht max-width. */
.leiste, .marke, .hauptnav, .ticker, .mega, .poster, .fuss {
  padding-inline: max(var(--rand), calc((100% - var(--breite)) / 2 + var(--rand)));
}

.inhalt, .zweispaltig, .artikel-layout, .seitenkopf, .spotlight {
  max-width: var(--breite);
  margin-inline: auto;
}
.seitenkopf-regel { max-width: calc(var(--breite) - var(--rand) * 2); margin-inline: auto; }

.inhalt { padding: 0 var(--rand); }

.zweispaltig {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar);
  gap: var(--spalte-abstand); padding: 0 var(--rand) 48px;
}

.sektionskopf {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 2px solid var(--divider); padding-bottom: 10px; margin-bottom: 4px;
}
.sektionskopf a { font-size: 13px; font-weight: 600; color: var(--navy); text-decoration: none; }
.sektionskopf a:hover { color: var(--navy-900); }

/* Bildflaechen
   Zwei Drittel aller Beitragsbilder sind 16:9-Screenshots, daher ist 16:9 das
   Grundformat. `contain` statt `cover`: lieber ein schmaler Rand als ein
   abgeschnittener Screenshot, bei dem links und rechts der Bildinhalt fehlt.
   `picture` traegt dabei die Flaechenfarbe, damit die Kacheln buendig bleiben. */
.spotlight-bild picture, .zeile-bild picture, .kachel-bild picture { display: block; background: var(--surface); }

/* -------------------------------------------------------------- Spotlight */

.spotlight {
  display: grid; grid-template-columns: 7fr 5fr; gap: var(--spalte-abstand);
  padding: 32px var(--rand) 40px; border-bottom: 2px solid var(--divider);
  text-decoration: none; color: inherit;
}
.spotlight-bild { position: relative; background: var(--surface); }
.spotlight-bild img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: scale-down; }
.spotlight-badge {
  position: absolute; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; background: var(--navy-900); color: var(--bg);
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.spotlight-text { display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.spotlight-text h2 { font-size: 48px; line-height: 1.02; letter-spacing: -0.025em; }
.spotlight-teaser { font-size: 16px; color: var(--neutral-800); margin: 0; }
.spotlight .knopf { align-self: flex-start; margin-top: 4px; }
.spotlight:hover h2 { color: var(--navy-900); text-decoration: underline; text-underline-offset: 4px; }

/* ------------------------------------------------------------- Listenzeile */

.zeilen { display: flex; flex-direction: column; }
.zeile {
  display: grid; grid-template-columns: 220px 1fr; gap: 24px;
  padding: 24px 0; border-bottom: 1px solid var(--divider);
  text-decoration: none; color: inherit;
}
.zeile-bild { background: var(--surface); }
.zeile-bild img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: scale-down; }
.zeile-text { display: flex; flex-direction: column; gap: 8px; }
/* Programm links, Datum rechts in derselben Zeile. Wird es eng (mobiles
   Raster), bricht das Datum unter den Kicker statt abgeschnitten zu werden. */
.zeile-kopf {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 2px 16px;
}
.zeile-kopf .meta { flex: none; }
.zeile-text h3 { font-size: 24px; line-height: 1.1; letter-spacing: -0.015em; }
.zeile-teaser { font-size: 14px; line-height: 1.55; color: var(--neutral-800); margin: 0; }
.zeile:hover h3 { color: var(--navy-900); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ Raster */

.raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
.raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kachel { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; }
.kachel-bild { background: var(--surface); }
.kachel-bild img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: scale-down; }
.kachel h3 { font-size: 17px; line-height: 1.2; letter-spacing: -0.01em; }
.kachel:hover h3 { color: var(--navy-900); text-decoration: underline; text-underline-offset: 3px; }

/* ----------------------------------------------------------------- Sidebar */

.sidebar { display: flex; flex-direction: column; gap: 32px; }

/* Der letzte Anzeigenplatz laeuft mit, solange die Seitenspalte noch Hoehe
   hat. Auf Artikelseiten endet der Sidebar-Inhalt lange vor dem Text; diese
   Strecke bleibt sonst ungenutzt. `align-self` verhindert, dass das Flex-Item
   gestreckt wird — sonst kann sticky nicht wandern.
   Der Abstand nach oben haelt Abstand zur klebenden Navigation. */
.sidebar .anzeige-klebt {
  position: sticky;
  top: calc(52px + 16px);
  align-self: flex-start;
  width: 100%;
}
.widget h2 {
  font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--navy-900); border-bottom: 2px solid var(--navy);
  padding-bottom: 8px; margin-bottom: 12px;
}
.programmliste { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.programmliste a {
  display: block; padding: 7px 8px; margin: 0 -8px;
  border-bottom: 1px solid var(--divider);
  font-size: 14px; text-decoration: none; color: inherit; transition: background 150ms, color 150ms;
}
.programmliste a { box-shadow: inset 0 0 0 0 var(--navy); }
.programmliste a:hover {
  background: var(--hover); color: var(--navy-900);
  box-shadow: inset 3px 0 0 0 var(--navy);
}
.widget-mehr { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--navy); text-decoration: none; }

.widget-zeilen a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 8px; margin: 0 -8px; border-bottom: 1px solid var(--divider);
  font-size: 14px; font-weight: 600; text-decoration: none; color: inherit;
  transition: background 150ms, color 150ms;
}
.widget-zeilen a:hover {
  background: var(--hover); color: var(--navy-900);
  box-shadow: inset 3px 0 0 0 var(--navy);
}
.widget-zeilen a span { flex: none; font-weight: 400; font-size: 12px; color: var(--neutral-700); }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; padding: 10px 12px;
  border: 1px solid var(--divider); font-size: 13px; font-weight: 600;
  text-decoration: none; color: inherit; transition: background 150ms, color 150ms;
}
.chip:hover, .chip.aktiv { background: var(--hover); color: var(--navy-900); border-color: var(--navy); }
.chip span { margin-left: 6px; font-weight: 400; color: var(--neutral-700); }

/* ------------------------------------------------------------- Werbeplatz */

.anzeige {
  display: grid; place-items: center; margin: 24px 0;
  border: 1px dashed var(--neutral-500); color: var(--neutral-700);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  min-height: 90px; overflow: hidden;
}
.anzeige-300 { min-height: 250px; }
.anzeige ins { display: block; width: 100%; }

/* Nur in der Vorschau: zeigt, wo die Werbeplaetze sitzen. Auf der Live-Seite
   steht an dieser Stelle die echte Anzeige. */
.anzeige-vorschau {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; background: repeating-linear-gradient(
    135deg, transparent, transparent 9px,
    rgba(42, 63, 133, .07) 9px, rgba(42, 63, 133, .07) 18px);
  border: 1px dashed var(--navy); color: var(--navy-900);
}
.anzeige-titel {
  font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
}
.anzeige-info {
  font-size: 11px; letter-spacing: 0.04em; text-transform: none;
  color: var(--neutral-700); font-feature-settings: 'tnum' 1;
}
.anzeige.geladen {
  display: block;              /* nicht grid: sonst hat das <ins> Breite 0 */
  border: 0; min-height: 0; margin: 16px 0;
}
/* Liefert AdSense keine Anzeige aus, soll auch kein Loch im Text bleiben.
   Das Attribut setzt AdSense selbst, sobald der Platz unbefuellt bleibt. */
.anzeige ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
.anzeige:has(ins[data-ad-status="unfilled"]) { display: none; }

/* ----------------------------------------------------------------- Poster */

.poster { background: var(--navy); color: var(--bg); padding: 64px var(--rand); }
.poster h2 { font-size: 56px; line-height: 1.02; letter-spacing: -0.02em; color: var(--bg); }
.poster-knoepfe { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ Fuß */

.fuss {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-wrap: wrap; padding: 28px var(--rand);
  background: var(--navy-900); color: var(--navy-100); font-size: 12px;
}
.fuss a { color: inherit; text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss-links { display: flex; gap: 20px; }
.fuss-rechts { text-align: right; }

/* --------------------------------------------------------------- Artikel */

.artikel-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar);
  gap: var(--spalte-abstand); padding: 24px var(--rand) 48px;
}
.artikel { max-width: 760px; }

.brotkrumen { font-size: 12px; color: var(--neutral-700); margin-bottom: 14px; }
.brotkrumen a { color: inherit; text-decoration: none; }
.brotkrumen a:hover { color: var(--navy); }
.brotkrumen span { margin: 0 6px; color: var(--neutral-700); }

.artikel h1 { font-size: 52px; line-height: 1.02; letter-spacing: -0.025em; margin: 8px 0 16px; }
.artikel-meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-bottom: 14px; border-bottom: 2px solid var(--divider);
  font-size: 12px; color: var(--neutral-700); font-feature-settings: 'tnum' 1;
}
.artikel-meta svg { vertical-align: -2px; }

.artikel-intro { font-size: 18px; line-height: 1.6; margin: 24px 0; }

.inhaltsverzeichnis {
  border-top: 2px solid var(--divider); border-bottom: 2px solid var(--divider);
  padding: 16px 0; margin: 24px 0 32px;
}
.inhaltsverzeichnis .kicker { display: block; margin-bottom: 10px; }
.inhaltsverzeichnis ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.inhaltsverzeichnis li { display: flex; gap: 12px; }
.inhaltsverzeichnis .nr { flex: none; font-size: 13px; font-weight: 600; color: var(--neutral-700); font-feature-settings: 'tnum' 1; }
.inhaltsverzeichnis a { font-size: 15px; font-weight: 600; text-decoration: none; color: inherit; }
.inhaltsverzeichnis a:hover { color: var(--navy); }

.artikel-text { font-size: 16px; line-height: 1.65; }
.artikel-text h2 {
  display: flex; gap: 14px; align-items: baseline;
  font-size: 28px; letter-spacing: -0.015em; margin: 40px 0 16px; scroll-margin-top: 16px;
}
.artikel-text h2 .nr { flex: none; font-size: 18px; color: var(--neutral-700); font-feature-settings: 'tnum' 1; }
.artikel-text h3 { font-size: 21px; margin: 28px 0 12px; }
.artikel-text h4 { font-size: 17px; margin: 22px 0 10px; }
.artikel-text p { margin: 0 0 16px; }
.artikel-text ul, .artikel-text ol { margin: 0 0 16px; padding-left: 24px; }
.artikel-text li { margin-bottom: 6px; }
.artikel-text a { color: var(--navy); text-underline-offset: 3px; }
.artikel-text strong { font-weight: 600; }
.artikel-text code, .artikel-text kbd {
  background: var(--surface); padding: 2px 6px; font-family: inherit; font-size: .93em; font-weight: 600;
}
/* Bilder nie ueber ihre Originalbreite hinaus ziehen: viele Screenshots sind
   schmaler als die Textspalte und wuerden sonst unscharf. --bildbreite setzt
   der Build je Bild; ohne Angabe bleibt es bei voller Spaltenbreite. */
.artikel-text figure { margin: 24px 0; max-width: min(100%, var(--bildbreite, 100%)); }
.artikel-text figure picture { display: block; }
.artikel-text figure img { width: 100%; height: auto; background: var(--surface); }
.artikel-text figcaption { font-size: 12px; color: var(--neutral-700); margin-top: 6px; }
.artikel-text table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 24px 0; }
.artikel-text th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--neutral-700); padding: 8px; border-bottom: 2px solid var(--divider);
}
.artikel-text td { padding: 8px; border-bottom: 1px solid var(--divider); vertical-align: top; }
.artikel-text blockquote {
  margin: 24px 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--navy);
  color: var(--neutral-800);
}

/* Schrittliste */
.schritte { margin: 24px 0; }
.schritte-zeit { font-size: 12px; color: var(--neutral-700); margin-bottom: 12px; }
.schritte ol { list-style: none; margin: 0; padding: 0; counter-reset: schritt; }
.schritte li {
  counter-increment: schritt; position: relative;
  padding: 14px 0 14px 46px; border-bottom: 1px solid var(--divider);
}
.schritte li::before {
  content: counter(schritt, decimal-leading-zero);
  position: absolute; left: 0; top: 14px;
  font-size: 13px; font-weight: 600; color: var(--navy);
  font-feature-settings: 'tnum' 1;
}
.schritte li > strong { display: block; font-size: 16px; font-weight: 800; line-height: 1.3; }
.schritte li p { margin: 6px 0 0; font-size: 15px; color: var(--neutral-800); }
.schritte li picture { display: block; margin-top: 12px; max-width: min(100%, var(--bildbreite, 100%)); }
.schritte li img { width: 100%; height: auto; background: var(--surface); }

/* Video */
.video { margin: 40px 0 24px; }
.video-rahmen {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: var(--neutral-900); border: 0; padding: 0; cursor: pointer; display: block;
  overflow: hidden;
}
.video-rahmen img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.video-rahmen iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 72px; height: 72px; background: var(--navy); display: grid; place-items: center;
  transition: background 150ms;
}
.video-rahmen:hover .video-play { background: var(--navy-600); }
.video-play svg { fill: var(--bg); }
.video-text { position: absolute; left: 0; bottom: 0; padding: 16px 20px; color: var(--bg); text-align: left; }
.video-text .kicker { color: var(--navy-100); }
.video-text strong { display: block; font-size: 22px; font-weight: 800; line-height: 1.2; margin-top: 4px; }
.video-hinweis { font-size: 12px; color: var(--neutral-700); margin-top: 8px; }
.video-hinweis a { color: var(--navy); }

/* Autorbox */
.autorbox {
  display: grid; grid-template-columns: 72px 1fr; gap: 20px; align-items: start;
  border-top: 2px solid var(--divider); border-bottom: 2px solid var(--divider);
  padding: 24px 0; margin: 40px 0;
}
.autorbox img { width: 72px; height: 72px; object-fit: cover; background: var(--surface); }
.autorbox h2 { font-size: 18px; font-weight: 800; }
.autorbox p { font-size: 14px; color: var(--neutral-800); margin: 6px 0 10px; }
.autorbox-mehr {
  display: inline-block; margin-top: 10px;
  font-size: 13px; font-weight: 600; color: var(--navy-900); text-decoration: none;
}
.autorbox-mehr:hover { text-decoration: underline; text-underline-offset: 3px; }
.artikel-meta a { color: inherit; }
.artikel-meta a:hover { color: var(--navy-900); text-decoration: underline; text-underline-offset: 3px; }

/* Autorenseite */
.autor-kopf { display: grid; grid-template-columns: 120px 1fr; gap: 24px; align-items: center; margin: 8px 0 24px; }
.autor-kopf img { width: 120px; height: 120px; object-fit: cover; background: var(--surface); }
.autor-kopf h1 { font-size: 44px; line-height: 1.02; letter-spacing: -0.025em; margin: 6px 0 4px; }
.autor-rolle { font-size: 15px; color: var(--neutral-800); margin: 0; }

.autor-zahlen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0; margin: 24px 0 32px; padding: 0;
  border-top: 2px solid var(--divider); border-bottom: 2px solid var(--divider);
}
.autor-zahlen > div { padding: 14px 0; }
.autor-zahlen dt {
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--navy-900);
}
.autor-zahlen dd {
  margin: 4px 0 0; font-size: 28px; font-weight: 800;
  letter-spacing: -0.02em; font-feature-settings: 'tnum' 1;
}

.autorbox-links { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; font-weight: 600; }
.autorbox-links a {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--navy-900); text-decoration: none;
}
.autorbox-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.autorbox-links svg { flex: none; display: block; }

/* --------------------------------------------------- Kategorie und Suche */

.seitenkopf {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  padding: 32px var(--rand) 16px;
}
.seitenkopf h1 { font-size: 56px; line-height: 1; letter-spacing: -0.025em; }
.seitenkopf .beschreibung { font-size: 15px; color: var(--neutral-800); margin: 10px 0 0; max-width: 70ch; }
.seitenkopf-regel { margin: 0 var(--rand) 32px; }

.blaettern {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-top: 2px solid var(--divider); padding-top: 20px; margin-top: 40px;
}
.blaettern-stand { font-size: 13px; color: var(--neutral-700); }
.blaettern-knoepfe { display: flex; gap: 8px; }

.treffer { display: flex; flex-direction: column; }
.treffer-zeile {
  display: grid; grid-template-columns: 160px 1fr; gap: 20px;
  padding: 20px 0; border-bottom: 1px solid var(--divider);
  text-decoration: none; color: inherit;
}
.treffer-zeile img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: scale-down; background: var(--surface); }
.treffer-zeile h2 { font-size: 22px; line-height: 1.15; letter-spacing: -0.015em; }
.treffer-zeile:hover h2 { color: var(--navy-900); text-decoration: underline; text-underline-offset: 3px; }
.treffer-leer { padding: 40px 0; font-size: 16px; color: var(--neutral-800); }

.radio { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; padding: 6px 0; }
.radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.radio .punkt { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1.5px solid var(--divider); }
.radio:hover .punkt { border-color: var(--navy); }
.radio input:checked + .punkt { border-color: var(--navy); background: var(--navy); box-shadow: inset 0 0 0 4px var(--bg); }
.radio input:focus-visible + .punkt { outline: 2px solid var(--navy); outline-offset: 2px; }

/* -------------------------------------------------------- Einwilligung */

.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: var(--bg); border-top: 2px solid var(--navy);
  box-shadow: var(--schatten-lg); padding: 20px var(--rand);
  transition: transform 300ms ease, opacity 300ms ease;
}
/* Beim Bestätigen faehrt das Banner nach unten aus und blendet aus. */
.consent.zu { transform: translateY(100%); opacity: 0; pointer-events: none; }
.consent[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .consent { transition: none; } }

/* Mitscrollender Cookie-Button (Ecke unten links), oeffnet die Einstellungen. */
.cookie-knopf {
  position: fixed; left: 16px; bottom: 16px; z-index: 70;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface); color: var(--neutral-700);
  border: 1px solid var(--navy-200); box-shadow: var(--schatten-lg);
  cursor: pointer; transition: background 150ms, color 150ms, transform 150ms;
}
.cookie-knopf:hover { background: var(--navy); color: #fff; transform: translateY(-2px); }
.cookie-knopf svg { display: block; }
.consent-innen {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.consent p { font-size: 13px; margin: 0; flex: 1 1 420px; color: var(--neutral-800); }
.consent p strong { display: block; font-size: 15px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.consent a { color: var(--navy); }
.consent-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }

.platzhalter-einwilligung {
  display: grid; place-items: center; gap: 12px; padding: 32px 20px; text-align: center;
  background: var(--surface); border: 1px dashed var(--neutral-500);
}
.platzhalter-einwilligung p { font-size: 13px; color: var(--neutral-800); margin: 0; max-width: 46ch; }

/* ------------------------------------------------------------ Mobil */

@media (max-width: 900px) {
  :root { --rand: 16px; --spalte-abstand: 32px; }

  /* Mit display:contents traegt der Wrapper keine Box mehr: der Desktop-Kopf
     wird ueber seine Kinder ausgeblendet, der mobile ueber sich selbst. */
  .kopf-desktop > * { display: none; }
  .kopf-mobil { display: contents; }

  .zweispaltig, .artikel-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .artikel { max-width: none; }

  .spotlight { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px var(--rand) 24px; }
  .spotlight-bild img { aspect-ratio: 16 / 9; }
  .spotlight-text h2 { font-size: 26px; }
  .spotlight-teaser { font-size: 15px; }

  .nur-mobil { display: block; }
  .suchform-mobil { display: flex; width: auto; margin: 16px var(--rand) 0; }

  /* Neueste Tutorials als 2er-Raster statt als Liste (Handoff Screen 02) */
  .zeilen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .zeile {
    grid-template-columns: minmax(0, 1fr); gap: 8px;
    padding: 0; border-bottom: 0;
  }
  .zeile-text { gap: 6px; }
  .zeile-text h3 { font-size: 15px; line-height: 1.2; letter-spacing: -0.01em; }
  .zeile-text .kicker { font-size: 10px; }
  .zeile-teaser { display: none; }
  /* Im schmalen 2er-Raster ist fuer Programm und Datum nebeneinander kein
     Platz. `display: contents` loest die Kopfzeile auf, damit beide zu
     direkten Flex-Kindern werden und das Datum unter den Titel rutscht. */
  .zeile-kopf { display: contents; }
  .zeile-text .meta { order: 3; font-size: 11px; }

  .raster, .raster-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  .kachel h3 { font-size: 15px; }
  .kachel .kicker { font-size: 10px; }

  .programmliste { grid-template-columns: 1fr; }
  .sidebar .anzeige-klebt { position: static; }

  .seitenkopf { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px var(--rand) 12px; }
  .seitenkopf h1 { font-size: 34px; }

  .artikel h1 { font-size: 32px; line-height: 1.05; letter-spacing: -0.02em; }
  .autor-kopf { grid-template-columns: 84px 1fr; gap: 16px; }
  .autor-kopf img { width: 84px; height: 84px; }
  .autor-kopf h1 { font-size: 30px; }
  .autor-zahlen dd { font-size: 22px; }
  .artikel-intro { font-size: 16px; line-height: 1.6; }
  .artikel-text { font-size: 16px; line-height: 1.6; }
  .artikel-text h2 { font-size: 22px; margin: 32px 0 12px; }
  .artikel-text h3 { font-size: 18px; }
  .schritte li { padding-left: 38px; font-size: 15px; }

  .poster { padding: 32px var(--rand); }
  .poster h2 { font-size: 34px; }
  .poster-knoepfe { flex-direction: column; gap: 8px; }
  .poster .knopf { width: 100%; min-height: 44px; justify-content: flex-start; }

  .treffer-zeile { grid-template-columns: 110px 1fr; gap: 14px; }
  .treffer-zeile h2 { font-size: 17px; }

  .fuss { flex-direction: column; align-items: flex-start; gap: 12px; }
  .fuss-rechts { text-align: left; }
  .fuss-links { flex-wrap: wrap; }

  .vorschlaege { position: static; width: 100%; max-height: none; box-shadow: none; }

  .consent { padding: 16px var(--rand); }
  .consent-knoepfe .knopf { min-height: 44px; }
}

@media (max-width: 560px) {
  .raster, .raster-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media print {
  .kopf, .fuss, .sidebar, .anzeige, .poster, .consent, .video { display: none; }
  .artikel-layout { grid-template-columns: 1fr; padding: 0; }
}