/* Acessio Magazin — Redaktionelle Vorschau
   20min-Umbau 12./13.10.2026: Aufbau und Anmutung nach dem Prinzip von
   20min.ch. Hellblau-weißer Grund, darauf eine weiße Seite mit weißem
   Kopf, wischbarer Ressortleiste, Fotofeed mit grauen Versal-Dachzeilen,
   Reaktionszeile und runden Reaktionsknöpfen. Akzent ist Acessio-Türkis
   statt 20min-Blau, Schrift Schibsted Grotesk (lokal, OFL), keine
   Remote-Webfonts, kein Tracking. */

@font-face {
  font-family: "Schibsted Grotesk Magazin";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("../fonts/schibsted-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Schibsted Grotesk Magazin";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("../fonts/schibsted-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+2020;
}

:root {
  --grund: #f1f7ff;          /* Seitengrund wie 20min */
  --blatt: #fffefc;          /* weiße Seite wie 20min */
  --flaeche: #f1f7ff;        /* Kästen wie „Darum gehts“ */
  --bildgrund: #e9eff7;
  --text: #1a1a1a;
  --grau: #4c4c4c;
  --grau-hell: #6b6b6b;
  --linie: #e3e6eb;
  --akzent: #0b6e78;         /* Acessio-Türkis, dunkel genug für Text */
  --akzent-dunkel: #08545c;
  --akzent-rand: rgba(11, 110, 120, 0.4);
  --tuerkis: #22c7d6;        /* Marke */
  --warn: #8a4b1f;
  --ink: #1d1813;            /* Footer */
  --kopf-soft: #d9d1c3;
  --kopf-linie: #3d3630;

  --f: "Schibsted Grotesk Magazin", "Segoe UI", system-ui, sans-serif;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --s7: 48px; --s8: 64px;

  --max: 1120px;
  --max-text: 720px;
  --spalte-abstand: 32px;
  --radius: 8px;
}

/* --- Grundlagen ---------------------------------------------------------- */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--grund); }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--grund);
  color: var(--text);
  font-family: var(--f);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.55;
}
img { max-width: 100%; display: block; }
a { color: var(--akzent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--akzent-dunkel); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
  border-radius: 4px;
}
h1, h2, h3 {
  font-weight: 700;
  margin: 0 0 var(--s3);
  line-height: 1.15;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
  hyphens: auto;
}
h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); text-wrap: balance; }
h2 { font-size: clamp(1.35rem, 1.2rem + 0.8vw, 1.75rem); text-wrap: balance; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 var(--s4); text-wrap: pretty; max-width: 42em; }
ul, ol { margin: 0 0 var(--s4); padding-left: 1.3em; }
li { margin-bottom: var(--s2); }
main { display: block; }
[id] { scroll-margin-top: 124px; }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0 1.1em;
  border-radius: var(--radius);
  border: 1px solid var(--linie);
  text-decoration: none;
  cursor: pointer;
  background: var(--blatt);
  color: var(--text);
}
.button--sekundaer:hover { border-color: var(--akzent); color: var(--akzent); }

/* Kleine Rubrikkennung im Redaktionsplan */
.kicker {
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--grau);
  margin: 0;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  background: var(--akzent);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  padding: var(--s3) var(--s4);
}
.skip-link:focus-visible { left: var(--s4); top: var(--s2); color: #fff; }

/* --- Weiße Seite ---------------------------------------------------------- */

.blatt {
  flex: 1 0 auto;
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--s5));
  margin: 12px auto 0;
  background: var(--blatt);
  border-radius: 24px 24px 0 0;
}

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

.kopf {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--blatt);
  border-radius: 24px 24px 0 0;
}
.kopf__leiste {
  min-height: 72px;
  padding: var(--s3) var(--s5);
  display: flex;
  align-items: center;
  gap: var(--s4);
}
.kopf__marke {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
}
.kopf__marke:hover { color: var(--text); }
.kopf__marke { margin-right: var(--s3); gap: 0; }

/* Logo nach dem Prinzip von 20min: kräftige Kachel mit Kürzel plus
   Wortmarke. Kürzel „ac“ wie im kleingeschriebenen Acessio-Logo. */
.logo__kachel {
  flex: none;
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  padding-bottom: 3px;
  background: var(--akzent);
  color: #fff;
  border-radius: 7px;
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: -0.07em;
}
.logo__wort {
  margin-left: 7px;
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: -0.035em;
  color: #0a3d44;
  white-space: nowrap;
}

/* Bereichsreiter wie „News | Video“ bei 20min */
.kopf__reiter { display: flex; align-items: center; gap: var(--s1); margin-right: auto; }
.kopf__reiter a {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  padding: 0 var(--s3);
  border-radius: var(--radius);
  color: var(--grau);
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
}
.kopf__reiter a:hover { color: var(--text); background: var(--flaeche); }
.kopf__reiter a.ist-aktiv { color: var(--akzent); font-weight: 600; }
@media (max-width: 899px) { .kopf__reiter { display: none; } .kopf__marke { margin-right: auto; } }
.kopf__status {
  flex: none;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--grau);
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding: 0.2em 0.75em;
  white-space: nowrap;
}
.kopf__suche {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  padding: 0 var(--s4);
  border-radius: var(--radius);
  background: var(--akzent);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
}
.kopf__suche:hover,
.kopf__suche[aria-current="page"] { background: var(--akzent-dunkel); color: #fff; }
.kopf__merkliste {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--text);
}
.kopf__merkliste svg { width: 24px; height: 24px; }
.kopf__merkliste:hover,
.kopf__merkliste[aria-current="page"] { background: var(--flaeche); color: var(--akzent-dunkel); }

/* --- Ressortleiste: auf jeder Breite sichtbar und wischbar ---------------- */

.ressorts { border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); background: var(--blatt); }
.ressorts__innen { position: relative; padding: 0 var(--s3); }
.ressorts__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  position: relative;
}
.ressorts__liste::-webkit-scrollbar { display: none; }
.ressorts__liste li { flex: none; margin: 0; }
.ressorts__liste a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--s3);
  border-bottom: 2px solid transparent;
  color: var(--grau);
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  white-space: nowrap;
}
.ressorts__liste a:hover { color: var(--text); }
.ressorts__liste a[aria-current="page"],
.ressorts__liste a.ist-aktiv { color: var(--akzent); border-bottom-color: var(--akzent); font-weight: 600; }
.ressorts__liste a:focus-visible { outline-offset: -3px; }
.ressorts__pfeil {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 56px;
  display: flex;
  align-items: center;
  border: 0;
  padding: 0;
  color: var(--text);
  cursor: pointer;
}
.ressorts__pfeil[hidden] { display: none; }
.ressorts__pfeil--zurueck {
  left: 0;
  justify-content: flex-start;
  padding-left: var(--s2);
  background: linear-gradient(90deg, var(--blatt) 55%, rgba(255, 254, 252, 0));
}
.ressorts__pfeil--vor {
  right: 0;
  justify-content: flex-end;
  padding-right: var(--s2);
  background: linear-gradient(270deg, var(--blatt) 55%, rgba(255, 254, 252, 0));
}

/* --- Seitenrahmen ------------------------------------------------------- */

#inhalt { padding: var(--s5) var(--s5) var(--s8); }

/* --- Teaser und Feed ---------------------------------------------------- */
/* Desktop: drei Spalten. Jeder Teaser belegt per subgrid zwei Zeilen
   (Bild, Text), dadurch beginnen Bilder und Titel einer Reihe auf
   derselben Kante und die Reaktionszeilen schliessen unten buendig ab. */

.feed {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--spalte-abstand);
}
.teaser {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  row-gap: var(--s3);
  padding-bottom: 36px;
}
@supports not (grid-template-rows: subgrid) {
  .teaser { display: flex; flex-direction: column; gap: var(--s3); }
}
.teaser--aufmacher,
.teaser--breit { grid-column: span 2; }

.teaser__bild {
  /* stretch in beiden Achsen: Nachbarn eines breiten Teasers erhalten
     dieselbe Bildhöhe, ohne aus der Spalte zu laufen. */
  align-self: stretch;
  justify-self: stretch;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 16 / 10;
  background: var(--bildgrund);
  border-radius: var(--radius);
  overflow: hidden;
}
.teaser--aufmacher .teaser__bild,
.teaser--breit .teaser__bild { aspect-ratio: 16 / 9; }
.teaser__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.teaser__bild img.ist-zeichnung { object-fit: contain; background: #fff; }

.teaser__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--s2); }
.teaser__titel { margin: 0; font-size: 1.45rem; font-weight: 650; line-height: 1.18; }
/* Senkrechte Trennlinie zwischen Aufmacher und Seitenteaser wie bei 20min */
@media (min-width: 1024px) {
  .feed--auftakt > .teaser:nth-child(2)::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 36px;
    left: calc(var(--spalte-abstand) / -2);
    border-left: 1px solid var(--linie);
  }
}
.teaser__titel a { color: var(--text); text-decoration: none; }
.teaser__titel a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}
.teaser__titel a:focus-visible { outline: none; }
.teaser__titel a:focus-visible::after { outline: 3px solid var(--akzent); outline-offset: 4px; }
.teaser__dach {
  display: block;
  margin-bottom: 4px;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--grau);
}
/* eigener Block, damit text-wrap: balance greift */
.teaser__zeile { display: block; text-wrap: balance; }
.teaser:hover .teaser__zeile { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.teaser__lead { margin: 0; font-size: 1.05rem; line-height: 1.5; color: var(--grau); max-width: 36em; }

.teaser--aufmacher .teaser__titel { font-size: clamp(1.9rem, 1.2rem + 1.6vw, 2.15rem); line-height: 1.12; }
.teaser--aufmacher .teaser__dach { font-size: 0.95rem; }
.teaser--breit .teaser__titel { font-size: 1.75rem; line-height: 1.14; }

/* Reaktionszeile wie bei 20min: Daumen, Kommentare, Merken */
.reaktionen {
  position: relative;
  z-index: 2;
  margin-top: auto;
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  color: var(--grau);
}
.reaktion {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  min-width: 36px;
  padding: 0 var(--s3) 0 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.reaktion:hover { color: var(--akzent); }
.reaktion svg { flex: none; }
.reaktion--kommentare { padding-left: var(--s3); border-left: 1px solid var(--linie); min-height: 20px; }
.reaktion--like[hidden] + .reaktion--kommentare { padding-left: 0; border-left: 0; }
.reaktion--merken { margin-left: auto; padding: 0; justify-content: flex-end; }
.reaktion[aria-pressed="true"] { color: var(--akzent); }
.reaktion[aria-pressed="true"] svg path { fill: currentColor; }

/* Ressortaufmacher (Themen- und Dossierseiten) */
.feed--thema .teaser { display: flex; flex-direction: column; gap: var(--s3); grid-row: auto; }
.feed--thema .teaser--aufmacher { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.feed--thema .teaser--spalte { grid-column: 3; }

/* Kompakte Liste (Weiterlesen, Merkliste) */
.feed--kompakt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.teaser--kompakt {
  grid-row: auto;
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  grid-template-rows: none;
  align-items: start;
  gap: var(--s4);
  padding: var(--s4) 0;
  border-top: 1px solid var(--linie);
}
.teaser--kompakt .teaser__bild { align-self: start; }
.teaser--kompakt .teaser__titel { font-size: 1.1rem; }
.teaser--kompakt .teaser__dach { font-size: 0.75rem; }

/* Tablet: zwei Spalten */
@media (max-width: 1023px) {
  .feed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .teaser--aufmacher { grid-column: 1 / -1; }
  .teaser--breit { grid-column: auto; }
  .teaser--breit .teaser__bild { aspect-ratio: 16 / 10; }
  .teaser--breit .teaser__titel { font-size: 1.45rem; }
  .feed > .teaser:first-child:nth-last-child(3) { grid-column: 1 / -1; }
  .feed > .teaser:first-child:nth-last-child(3) .teaser__bild { aspect-ratio: 16 / 9; }
  .feed--thema .teaser--aufmacher { grid-column: 1 / -1; grid-row: auto; }
  .feed--thema .teaser--spalte { grid-column: auto; }
  .feed--filter > .rubrik-liste__eintrag:first-child:nth-last-child(3) > .teaser { grid-column: auto; }
}

/* Handy: ein grosser Teaser je Block, die weiteren als kompakte Zeilen */
@media (max-width: 719px) {
  .feed, .feed--kompakt { display: block; }
  .teaser,
  .feed--thema .teaser {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
    padding-bottom: var(--s5);
  }
  .teaser__titel { font-size: 1.3rem; }
  .teaser--aufmacher .teaser__titel { font-size: 1.75rem; }
  .teaser--breit .teaser__bild,
  .feed > .teaser:first-child:nth-last-child(3) .teaser__bild { aspect-ratio: 16 / 10; }

  .teaser--mobil-kompakt,
  .feed--thema .teaser--mobil-kompakt,
  .teaser--kompakt {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-rows: none;
    align-items: start;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid var(--linie);
  }
  .teaser--mobil-kompakt .teaser__bild,
  .teaser--kompakt .teaser__bild { align-self: start; border-radius: 6px; }
  .teaser--mobil-kompakt .teaser__titel,
  .teaser--kompakt .teaser__titel { font-size: 1.05rem; line-height: 1.25; }
  .teaser--mobil-kompakt .teaser__dach,
  .teaser--kompakt .teaser__dach { font-size: 0.72rem; }
  .teaser--mobil-kompakt .reaktionen,
  .teaser--kompakt .reaktionen { font-size: 0.8rem; margin-top: 2px; }
}

/* --- Blockköpfe (Ressorts und Module) ----------------------------------- */

.block { margin-top: var(--s5); }
.block__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0 var(--s4);
  border-top: 1px solid var(--linie);
  padding-top: var(--s5);
  margin-bottom: var(--s4);
}
.block__kopf h2 { margin: 0; min-width: 0; font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem); }
.block__mehr {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--akzent);
  text-decoration: none;
}
.block__mehr:hover { text-decoration: underline; }

/* --- Dossier-Modul ---------------------------------------------------------- */

.dossier-modul {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--s4) var(--s6);
  align-items: start;
  margin: var(--s4) 0 var(--s7);
  padding: var(--s6);
  border-radius: 16px;
  background: var(--flaeche);
}
.dossier-modul__label {
  margin: 0 0 6px;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--akzent);
}
.dossier-modul h2 { margin: 0 0 var(--s2); }
.dossier-modul__frage { margin: 0; color: var(--grau); }
.dossier-modul__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
  counter-reset: dossier;
}
.dossier-modul__liste li { margin: 0; counter-increment: dossier; }
.dossier-modul__liste a { display: flex; flex-direction: column; gap: 10px; color: var(--text); text-decoration: none; }
.dossier-modul__bild {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--bildgrund);
  border-radius: var(--radius);
  overflow: hidden;
}
.dossier-modul__bild img { width: 100%; height: 100%; object-fit: cover; }
.dossier-modul__bild::before {
  content: counter(dossier);
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 1;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--akzent);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
}
.dossier-modul__titel { font-weight: 700; font-size: 1.05rem; line-height: 1.25; }
.dossier-modul__liste a:hover .dossier-modul__titel { text-decoration: underline; }
.dossier-modul__mehr { grid-column: 2; margin: 0; }
.dossier-modul__mehr a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; text-decoration: none; }
.dossier-modul__mehr a:hover { text-decoration: underline; }

/* --- Plan-Modul -------------------------------------------------------------- */

.plan-modul { margin: var(--s4) 0 var(--s7); }
.plan-modul .block__kopf { margin-bottom: var(--s2); }
.plan-modul__hinweis { color: var(--grau); font-size: 0.92rem; margin: 0 0 var(--s4); }
.plan-modul__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
}
.plan-modul__liste li { margin: 0; }
.plan-modul__liste a {
  height: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "tag thema status" "titel titel titel";
  align-items: center;
  gap: 4px var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--flaeche);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
}
.plan-modul__liste a:hover .plan-modul__titel { text-decoration: underline; }
.plan-modul__tag { grid-area: tag; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--grau); }
.plan-modul__thema { grid-area: thema; font-size: 0.75rem; font-weight: 600; color: var(--akzent); }
.plan-modul__titel { grid-area: titel; font-weight: 700; font-size: 1.05rem; line-height: 1.25; }
.plan-modul__status { grid-area: status; font-size: 0.72rem; font-weight: 600; padding: 0.15em 0.65em; border-radius: 999px; background: var(--blatt); color: var(--akzent); white-space: nowrap; }

/* --- Über-Hinweis am Ende der Startseite ------------------------------------- */

.start-ueber { border-top: 1px solid var(--linie); padding-top: var(--s5); margin-top: var(--s5); }
.start-ueber h2 { font-size: 1.2rem; }
.start-ueber p { color: var(--grau); }

/* --- Ressort-, Themen- und Dossierköpfe -------------------------------------- */

.ressort-kopf { max-width: var(--max-text); padding: var(--s2) 0 var(--s5); }
.ressort-kopf h1 { margin-bottom: var(--s2); }
.ressort-kopf--thema { max-width: none; display: flex; align-items: center; gap: var(--s5); }
.ressort-kopf__motiv { flex: none; width: 128px; height: auto; aspect-ratio: 8 / 5; border-radius: var(--radius); background: #fff; }
.ressort-kopf__icon { display: inline-block; color: var(--akzent); margin-bottom: var(--s2); }
.ressort-kopf__kurz { color: var(--grau); font-size: 1.05rem; margin: 0; }
.dossier-kopf__frage { font-size: 1.2rem; font-weight: 700; color: var(--akzent); }
.zurueck { margin-top: var(--s5); font-weight: 600; }

.block--geplant { margin-top: var(--s5); }
.themen-kandidaten { color: var(--grau); font-size: 0.95rem; columns: 2; column-gap: var(--s6); }
.themen-kandidaten li { break-inside: avoid; }

.rubrikreihe__leer { background: var(--flaeche); border-radius: var(--radius); padding: var(--s5); margin-top: var(--s4); }
.rubrik-liste__eintrag { display: contents; }
.rubrik-liste__eintrag[hidden] { display: none; }
.rubrik-liste__leer { color: var(--grau); font-style: italic; }

.chip-leiste { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s5); }
.chip {
  min-height: 40px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.35em 1em;
  border: 1px solid var(--akzent-rand);
  border-radius: 999px;
  background: var(--blatt);
  color: var(--akzent);
  cursor: pointer;
}
.chip:hover { background: var(--flaeche); }
.chip--aktiv, .chip[aria-pressed="true"] { background: var(--akzent); color: #fff; border-color: var(--akzent); }

/* --- Themenübersicht ----------------------------------------------------------- */

.themen-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6) var(--spalte-abstand); }
.thema-karte { display: flex; flex-direction: column; gap: var(--s2); color: var(--text); text-decoration: none; }
.thema-karte__bildfeld { display: block; aspect-ratio: 8 / 5; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.thema-karte__bild { width: 100%; height: 100%; object-fit: contain; }
.thema-karte__name { font-weight: 700; font-size: 1.15rem; line-height: 1.2; }
.thema-karte:hover .thema-karte__name { text-decoration: underline; }
.thema-karte__kurz { color: var(--grau); font-size: 0.95rem; line-height: 1.45; }
.thema-karte__anzahl { margin-top: auto; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--akzent); }
@media (max-width: 1023px) { .themen-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 719px) {
  .themen-raster { display: block; }
  .thema-karte {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 2px;
    align-items: start;
    padding: 14px 0;
    border-top: 1px solid var(--linie);
  }
  .thema-karte__bildfeld { grid-row: 1 / span 3; border-radius: 6px; }
  .thema-karte__name { font-size: 1.05rem; }
  .thema-karte__kurz { font-size: 0.9rem; }
}

/* --- Dossierliste ----------------------------------------------------------------- */

.dossier-eintrag {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s6);
  align-items: center;
  padding: var(--s5);
  background: var(--flaeche);
  border-radius: 16px;
}
.dossier-eintrag__bilder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.dossier-eintrag__bilder img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; }
.dossier-eintrag__titel a { color: var(--text); text-decoration: none; }
.dossier-eintrag__titel a:hover { text-decoration: underline; }
.dossier-eintrag__meta { font-size: 0.85rem; font-weight: 600; color: var(--grau); margin: 0; }

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

.brotkrumen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--s2);
  margin: 0 0 var(--s5);
  font-size: 0.875rem;
  color: var(--grau);
}
.brotkrumen a { color: var(--grau); text-decoration: none; }
.brotkrumen a:hover { color: var(--text); text-decoration: underline; }
.brotkrumen [aria-current] { color: var(--text); font-weight: 600; }

.artikel { max-width: var(--max-text); margin: 0 auto var(--s7); }
.artikel-kopf { margin-bottom: var(--s5); }
.artikel-kopf__stand { margin: 0 0 var(--s2); font-size: 0.85rem; color: var(--grau-hell); }
.artikel-kopf__status { color: var(--akzent); font-weight: 600; }
.artikel-kopf h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.6rem); line-height: 1.12; letter-spacing: -0.02em; margin-bottom: var(--s4); }
.artikel-kopf__dach {
  display: block;
  margin-bottom: var(--s2);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--grau);
}
.artikel-kopf__zeile { display: block; }
.artikel-kopf__lead { font-size: 1.25rem; font-weight: 500; line-height: 1.45; margin-bottom: var(--s5); }
.artikel-kopf__leiste { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.byline { display: flex; align-items: center; gap: var(--s3); margin: 0; font-size: 0.95rem; color: var(--grau); }
.byline__bild { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--tuerkis); }
.byline a { color: var(--akzent); }

/* Runde Reaktionsknöpfe wie bei 20min */
.aktionen { display: flex; gap: var(--s4); }
.aktion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 48px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--grau);
  font: inherit;
  font-size: 0.75rem;
  text-decoration: none;
  cursor: pointer;
}
.aktion__kreis {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--akzent-rand);
  background: var(--blatt);
  color: var(--akzent);
}
.aktion:hover .aktion__kreis { background: var(--flaeche); }
.aktion[aria-pressed="true"] .aktion__kreis { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.aktion[aria-pressed="true"] .aktion__kreis svg path { fill: currentColor; }
.aktion:focus-visible { outline: none; }
.aktion:focus-visible .aktion__kreis { outline: 3px solid var(--akzent); outline-offset: 2px; }
.aktionen__status { margin: var(--s2) 0 0; min-height: 1.4em; font-size: 0.85rem; color: var(--akzent); text-align: right; max-width: none; }

.artikel-bild { margin: 0 0 var(--s5); }
.artikel-bild img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); background: var(--bildgrund); }
.artikel-bild img.ist-zeichnung { aspect-ratio: 8 / 5; object-fit: contain; background: #fff; }
.artikel-bild figcaption { margin-top: var(--s2); font-size: 0.85rem; line-height: 1.45; color: var(--grau); }
.artikel-bild__quelle { color: var(--grau-hell); }

/* „Darum gehts“-Kasten wie bei 20min */
.darum { background: var(--flaeche); border-radius: var(--radius); padding: var(--s4) var(--s5); margin-bottom: var(--s6); }
.darum__titel { margin: 0 0 var(--s2); font-weight: 700; font-size: 1.15rem; }
.darum ul { list-style: none; margin: 0; padding: 0; }
.darum li { position: relative; margin: 0 0 var(--s2); padding-left: 1.2em; }
.darum li:last-child { margin-bottom: 0; }
.darum li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--akzent); }
.darum a { color: var(--text); }
.darum a:hover { color: var(--akzent); }

.artikel-text { font-size: 1.1rem; line-height: 1.65; }
.artikel-text p { max-width: none; }
.artikel-abschnitt { margin-bottom: var(--s6); }
.artikel-abschnitt h2 { font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.55rem); }
.liste-check { list-style: none; padding-left: 0; }
.liste-check li { position: relative; padding-left: 1.6em; }
.liste-check li::before {
  content: "";
  position: absolute; left: 0; top: 0.45em;
  width: 10px; height: 10px;
  border: 2px solid var(--akzent);
  border-radius: 2px;
}
.liste-schritte { padding-left: 1.4em; }
.liste-schritte li::marker { font-weight: 700; color: var(--akzent); }

/* Vergleichstabellen in Ratgebern (22.10.2026) */
.tabelle-rahmen { overflow-x: auto; margin: 0 0 var(--s5); }
.tabelle { width: 100%; border-collapse: collapse; font-size: 0.98rem; line-height: 1.5; }
.tabelle th, .tabelle td { text-align: left; vertical-align: top; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--linie); hyphens: auto; overflow-wrap: break-word; }
@media (max-width: 480px) { .tabelle th, .tabelle td { padding: var(--s2); } }
.tabelle thead th { background: var(--flaeche); font-weight: 700; }
.tabelle tbody th { font-weight: 700; }
kbd {
  font-family: inherit;
  font-size: 0.85em;
  padding: 0.1em 0.45em;
  border: 1px solid var(--linie);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--blatt);
  white-space: nowrap;
}

.hinweisbox {
  border-left: 4px solid var(--text);
  padding: var(--s4) var(--s5);
  margin-bottom: var(--s6);
  background: var(--flaeche);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.hinweisbox__titel { font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 var(--s2); }
.hinweisbox--pruefung { border-left-color: var(--akzent); }
.hinweisbox--pruefung .hinweisbox__titel { color: var(--akzent); }
.hinweisbox--grenzen { border-left-color: var(--warn); }
.hinweisbox--grenzen .hinweisbox__titel { color: var(--warn); }
.hinweisbox p:last-child, .hinweisbox ul:last-child { margin-bottom: 0; }

/* Lange Dateinamen/Codezeilen umbrechen statt horizontal überlaufen */
code {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.9em;
  background: var(--flaeche);
  padding: 0.1em 0.35em;
  border-radius: 4px;
  word-break: break-word;
  overflow-wrap: anywhere;
}
pre.code-block {
  background: var(--flaeche);
  border-radius: var(--radius);
  padding: var(--s4);
  margin: 0 0 var(--s4);
  overflow-x: auto;
  max-width: 100%;
}
pre.code-block code { background: none; padding: 0; white-space: pre-wrap; word-break: break-word; display: block; }

.quellen { border-top: 1px solid var(--linie); padding-top: var(--s5); margin-top: var(--s7); }
.quellen h2 { font-size: 1.1rem; }
.quellen ul { padding-left: 1.2em; font-size: 0.95rem; color: var(--grau); }
.quellen__eigene { font-size: 0.95rem; color: var(--grau); font-style: italic; }

.artikel-footer { margin-top: var(--s6); font-size: 0.9rem; color: var(--grau); border-top: 1px solid var(--linie); padding-top: var(--s4); }

.kommentare { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--linie); }
.kommentare h2 { font-size: 1.4rem; }
.kommentare__zahl { color: var(--grau); font-weight: 500; }
.kommentare__hinweis { background: var(--flaeche); border-radius: var(--radius); padding: var(--s4) var(--s5); }
.kommentare__titel { margin: 0 0 var(--s2); font-weight: 700; }
.kommentare__hinweis p:last-child { margin-bottom: 0; color: var(--grau); }

.weiterlesen { margin-top: var(--s7); }

/* --- Textseiten ----------------------------------------------------------------------- */

.textseite-kopf { max-width: var(--max-text); margin-bottom: var(--s6); }
.textseite-kopf__lead { font-size: 1.15rem; color: var(--grau); }
.textseite { max-width: var(--max-text); font-size: 1.05rem; }
.textseite h2 { margin-top: var(--s7); }
.seite-text .textseite { margin-bottom: var(--s7); }

.autor-themengruppe { padding: var(--s3) 0; border-top: 1px solid var(--linie); }
.autor-themengruppe:first-of-type { border-top: none; }
.autor-themengruppe__name { font-weight: 700; margin-bottom: var(--s1); }
.autor-themengruppe__name a { color: var(--text); text-decoration: none; }
.autor-themengruppe__links { font-size: 0.92rem; color: var(--grau); margin: 0; }

.autoren-liste { list-style: none; padding: 0; display: flex; gap: var(--s4); flex-wrap: wrap; }
.autor-karte a { display: block; text-decoration: none; color: var(--text); background: var(--flaeche); border-radius: var(--radius); padding: var(--s4) var(--s5); }
.autor-karte__name { display: block; font-weight: 700; }
.autor-karte__rolle { display: block; font-size: 0.85rem; color: var(--grau); }

/* --- Redaktionsplan --------------------------------------------------------------------- */

.seite-plan #plan-liste { display: grid; gap: var(--s5); }
.plan-woche { background: var(--flaeche); border-radius: 12px; padding: var(--s5); }
.plan-woche[hidden] { display: none; }
.plan-woche__kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); }
.plan-woche__datum { font-weight: 700; }
.plan-eintrag { padding: var(--s2) 0; border-top: 1px solid var(--linie); }
.plan-eintrag[hidden] { display: none; }
.plan-eintrag:first-of-type { border-top: none; }
.plan-eintrag__zeile { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.plan-eintrag__tag { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; color: var(--grau); width: 6.5em; flex: none; }
.plan-eintrag__thema { flex: none; }
.plan-eintrag__titel { flex: 1 1 auto; }
.plan-status { font-size: 0.72rem; font-weight: 600; padding: 0.15em 0.6em; border-radius: 999px; white-space: nowrap; }
.plan-status--geplant { background: var(--blatt); color: var(--akzent); }
.plan-status--fertig { background: var(--akzent); color: #fff; }
.plan-woche__notiz { margin: var(--s4) 0 0; font-size: 0.9rem; color: var(--grau); }
.plan-hinweis { color: var(--grau); font-size: 0.92rem; margin-top: var(--s6); }

.plan-details { margin: var(--s1) 0 0 calc(6.5em + var(--s3)); }
.plan-details summary { font-size: 0.8rem; font-weight: 600; color: var(--akzent); cursor: pointer; }
.plan-details dl { display: grid; grid-template-columns: auto 1fr; gap: var(--s1) var(--s3); margin: var(--s2) 0 0; font-size: 0.85rem; }
.plan-details dt { font-weight: 700; color: var(--grau); }
.plan-details dd { margin: 0; }
@media (max-width: 560px) { .plan-details { margin-left: 0; } }

/* --- Suche und Merkliste ------------------------------------------------------------------ */

/* Entdecken-Seite wie „Entdecken & Suchen“ bei 20min */
.entdecken { padding: var(--s4) 0 var(--s2); text-align: center; }
.entdecken h1 { font-size: clamp(1.9rem, 1.6rem + 1vw, 2.3rem); margin-bottom: var(--s4); }
.suchform { max-width: 600px; margin: 0 auto; }
.suchform__pille {
  display: flex;
  align-items: center;
  gap: var(--s1);
  min-height: 48px;
  padding: 0 var(--s1) 0 var(--s5);
  border: 1px solid var(--grau-hell);
  border-radius: 999px;
  background: #fff;
}
.suchform__pille:focus-within { outline: 3px solid var(--akzent); outline-offset: 2px; }
.suchform__feld {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  outline: none;
}
.suchform__feld::-webkit-search-cancel-button { display: none; }
.suchform__leeren,
.suchform__los {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.suchform__leeren { background: transparent; color: var(--grau); }
.suchform__feld:placeholder-shown ~ .suchform__leeren { visibility: hidden; }
.suchform__leeren:hover { background: var(--flaeche); }
.suchform__los { background: var(--akzent); color: #fff; }
.suchform__los:hover { background: var(--akzent-dunkel); }
.suchergebnisse { max-width: 600px; margin: var(--s3) auto 0; text-align: left; }
.suchergebnisse__hinweis { color: var(--grau); font-size: 0.92rem; text-align: center; margin-inline: auto; }

.themen-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.themen-kachel {
  position: relative;
  display: block;
  min-height: 96px;
  padding: var(--s3) var(--s4);
  overflow: hidden;
  border-radius: var(--radius);
  background: #e4f0ff;
  color: var(--text);
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
}
.themen-kachel:hover { color: var(--text); background: #d8e8fd; }
.themen-kachel:hover .themen-kachel__name { text-decoration: underline; }
.themen-kachel__name { position: relative; z-index: 1; display: block; max-width: 72%; line-height: 1.25; }
.themen-kachel__form {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 30%;
  height: 46px;
  background: var(--farbe);
  clip-path: polygon(0 0, 100% 16%, 100% 100%, 0 100%);
  border-radius: 4px 0 var(--radius) 0;
}

/* Themenfarben als Klassen statt Inline-Style (strenge CSP ohne unsafe-inline) */
.themen-kachel--thema-pdf-dateien { --farbe: #e5533d; }
.themen-kachel--thema-internet-technik { --farbe: #0b6e78; }
.themen-kachel--thema-smartphone { --farbe: #6d4fd8; }
.themen-kachel--thema-sicher-online { --farbe: #1f7a4d; }
.themen-kachel--thema-ki-alltag { --farbe: #f0a531; }
.themen-kachel--thema-buero-organisation { --farbe: #2f63c8; }
.themen-kachel--thema-website-sichtbarkeit { --farbe: #d4467f; }
.themen-kachel--thema-unterwegs-freizeit { --farbe: #22c7d6; }

.fokus__hinweis { margin: -4px 0 var(--s4); font-size: 0.88rem; color: var(--grau); }
.fokus-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--spalte-abstand); }
.fokus-eintrag { margin: 0; border-top: 1px solid var(--linie); }
.fokus-eintrag a { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s4); align-items: start; padding: var(--s4) 0; color: var(--text); text-decoration: none; }
.fokus-eintrag__bild { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: var(--bildgrund); }
.fokus-eintrag__bild img { width: 100%; height: 100%; object-fit: cover; }
.fokus-eintrag__nr { position: absolute; left: 6px; top: 6px; padding: 1px 7px; border-radius: 4px; background: var(--akzent); color: #fff; font-weight: 700; font-size: 0.85rem; }
.fokus-eintrag__text { display: flex; flex-direction: column; }
.fokus-eintrag__titel { font-weight: 650; font-size: 1.1rem; line-height: 1.25; text-wrap: balance; }
.fokus-eintrag a:hover .fokus-eintrag__titel { text-decoration: underline; }

.mehr-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.mehr-links li { margin: 0; }
.mehr-links a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: var(--s4); border-radius: var(--radius); background: var(--flaeche); color: var(--text); text-decoration: none; }
.mehr-link__titel { font-weight: 700; }
.mehr-link__text { font-size: 0.88rem; color: var(--grau); line-height: 1.4; }
.mehr-links a:hover .mehr-link__titel { text-decoration: underline; }

@media (max-width: 1023px) {
  .themen-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mehr-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 719px) {
  .themen-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
  .themen-kachel { min-height: 80px; font-size: 0.98rem; }
  .fokus-liste { grid-template-columns: minmax(0, 1fr); }
  .fokus-eintrag a { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 14px 0; }
  .fokus-eintrag__titel { font-size: 1.02rem; }
  .mehr-links { grid-template-columns: minmax(0, 1fr); }
}
.suchergebnisse__typ { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--grau); }
.lesetipps__liste { list-style: none; margin: 0; padding: 0; }
.lesetipp { margin: 0; border-top: 1px solid var(--linie); }
.lesetipp a { display: flex; gap: var(--s4); padding: var(--s3) 0; text-decoration: none; color: var(--text); }
.lesetipp__text { display: flex; flex-direction: column; }
.lesetipp__titel { font-weight: 700; line-height: 1.3; }
.lesetipp a:hover .lesetipp__titel { text-decoration: underline; }
.merkliste__leer { color: var(--grau); }
.merkliste__leer[hidden] { display: none; }
#merkliste .reaktion--merken { margin-left: 0; color: var(--akzent); font-weight: 600; }

/* --- Footer --------------------------------------------------------------------------------- */

.site-footer { background: var(--ink); color: var(--kopf-soft); }
.site-footer a:focus-visible { outline-color: var(--tuerkis); }
.site-footer__raster {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--s7) var(--s4) var(--s5);
  display: grid;
  gap: var(--s6);
  grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr));
}
.site-footer__name { display: flex; align-items: center; margin: 0 0 var(--s3); }
.site-footer__name .logo__kachel { background: var(--tuerkis); color: var(--ink); }
.site-footer__name .logo__wort { color: #fff; }
.site-footer__leitgedanke { margin: 0; font-size: 0.95rem; color: #bfb6a6; }
.site-footer__titel { font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: #fff; margin-bottom: var(--s3); }
.site-footer__liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s2); font-size: 0.92rem; }
.site-footer__liste li { margin: 0; }
.site-footer__liste a { color: var(--kopf-soft); text-decoration: none; }
.site-footer__liste a:hover { color: #fff; text-decoration: underline; }
.site-footer__unten {
  margin-inline: max(var(--s4), calc((100% - var(--max)) / 2 + var(--s4)));
  padding: var(--s4) 0 var(--s6);
  border-top: 1px solid var(--kopf-linie);
  font-size: 0.82rem;
  color: #bfb6a6;
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
}
.site-footer__unten a { color: var(--kopf-soft); }
.site-footer__unten a:hover { color: #fff; }
@media (max-width: 1023px) {
  .site-footer__raster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site-footer__marke { grid-column: 1 / -1; }
}

/* --- Handy: Seite, Kopf, Module ----------------------------------------------------------------- */

@media (max-width: 719px) {
  .blatt { margin-top: 0; border-radius: 0; }
  .kopf { border-radius: 0; }
  .kopf__leiste { min-height: 60px; padding: var(--s2) var(--s4); gap: 6px; }
  .logo__kachel { width: 36px; height: 36px; font-size: 1.3rem; border-radius: 6px; }
  .logo__wort { font-size: 1.3rem; margin-left: 6px; }
  .kopf__status-lang { display: none; }
  .kopf__status { padding: 0.15em 0.6em; }
  .kopf__suche { width: 44px; padding: 0; justify-content: center; }
  .kopf__suche span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .ressorts__innen { padding: 0 var(--s1); }
  #inhalt { padding: var(--s4) var(--s4) var(--s7); }

  .ressort-kopf--thema { align-items: flex-start; gap: var(--s4); }
  .ressort-kopf__motiv { width: 88px; }

  .artikel-kopf__leiste { flex-direction: column; align-items: flex-start; }
  .aktionen { width: 100%; justify-content: space-between; }
  .aktionen__status { text-align: left; }

  .dossier-modul { grid-template-columns: minmax(0, 1fr); padding: var(--s5) var(--s4); margin-left: calc(var(--s4) * -1); margin-right: calc(var(--s4) * -1); border-radius: 0; }
  .dossier-modul__liste { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .dossier-modul__liste a { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 14px; padding: var(--s3) 0; border-top: 1px solid var(--linie); }
  .dossier-modul__mehr { grid-column: auto; }

  .plan-modul__liste { grid-template-columns: minmax(0, 1fr); }
  .themen-kandidaten { columns: 1; }
  .dossier-eintrag { grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding: var(--s4); }
  .site-footer__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
}

@media (max-width: 360px) {
  .kopf__merkliste { display: none; } /* Merkliste bleibt über Entdecken und Footer erreichbar */
}

/* --- Reduzierte Bewegung -------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}