/* ki-china-daily - Theme kcd 2.0 "Portal" (16.09.2026)
   Weisser Grund, grosse Ueberschriften, Bilder, Raster. Keine Schrift und kein Skript
   von fremden Servern: Schriften in assets/schriften/ (Fontsource 5.3.0, Latein,
   SIL OFL 1.1), Bilder in assets/images/.
   Die Regel bleibt: Violett gehoert der Einordnung. Die sieben Rubrikfarben erscheinen
   nur als Flaeche (Feld, Punkt, Bildton). */

@font-face { font-family: "Archivo"; src: url("../schriften/archivo-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../schriften/archivo-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../schriften/archivo-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../schriften/archivo-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../schriften/archivo-800.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../schriften/newsreader-italic-400.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap; }

/* ---------------------------------------------------------------- Werte
   Kontraste auf Weiss: Tinte 18,9 : 1, Text 10,4 : 1, Grau 6,2 : 1, Hellgrau 5,3 : 1,
   Kopierstift 9,4 : 1 (auf Hauch 8,0 : 1). Weiss auf jeder Rubrikfarbe >= 7,4 : 1. */
:root {
  --weiss: #FFFFFF;
  --tinte: #111114;
  --text: #3C3F46;
  --grau: #5E626B;
  --grau-hell: #6A6C72;
  --linie: #E4E5E9;
  --flaeche: #F4F4F6;
  --nummer: #85888F;
  --papier: #FAF7F1;
  --kopf-grund: #1B1B1D;
  --kopierstift: #5B2E91;
  --kopierstift-hauch: #F1EBF8;
  --kopierstift-linie: #E0D3F0;

  --rubrik-modelle: #1F4D5C;
  --rubrik-chips: #7A4A12;
  --rubrik-robotik: #3F5230;
  --rubrik-regulierung: #6B2F2F;
  --rubrik-infrastruktur: #33445E;
  --rubrik-unternehmen: #4A4A52;
  --rubrik-anwendung: #155248;
  --rubrik-forschung: #4F5325;

  --breite: 1200px;
  --rand: 16px;
  --radius: 10px;
  --radius-gross: 14px;
}
@media (min-width: 760px) { :root { --rand: 40px; } }

.tag-modelle { --rubrik: var(--rubrik-modelle); --rubrik-bild: url("../images/rubrik-modelle.jpg"); }
.tag-chips { --rubrik: var(--rubrik-chips); --rubrik-bild: url("../images/rubrik-chips.jpg"); }
.tag-robotik { --rubrik: var(--rubrik-robotik); --rubrik-bild: url("../images/rubrik-robotik.jpg"); }
.tag-regulierung { --rubrik: var(--rubrik-regulierung); --rubrik-bild: url("../images/rubrik-regulierung.jpg"); }
.tag-infrastruktur { --rubrik: var(--rubrik-infrastruktur); --rubrik-bild: url("../images/rubrik-infrastruktur.jpg"); }
.tag-unternehmen { --rubrik: var(--rubrik-unternehmen); --rubrik-bild: url("../images/rubrik-unternehmen.jpg"); }
.tag-anwendung { --rubrik: var(--rubrik-anwendung); --rubrik-bild: url("../images/rubrik-anwendung.jpg"); }
.tag-forschung { --rubrik: var(--rubrik-forschung); --rubrik-bild: url("../images/rubrik-forschung.jpg"); }

/* ---------------------------------------------------------------- Grundlagen */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--weiss); color: var(--tinte);
  font-family: Archivo, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; }
h1, h2 { text-wrap: balance; }
h3 { text-wrap: pretty; }
.zeichen { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
.zeichen-voll { fill: currentColor; stroke: none; }
.sprung { position: absolute; left: -9999px; }
.sprung:focus { position: fixed; left: 12px; top: 12px; z-index: 10; padding: 10px 16px;
  background: var(--weiss); color: var(--tinte); border-radius: 999px; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

.knopf { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px;
  border: 1px solid var(--tinte); font-weight: 700; font-size: 15px; }
.knopf:hover { background: var(--tinte); color: var(--weiss); text-decoration: none; }
.hinweis { margin: 0; font-size: 17px; color: var(--text); }
.hinweis a { text-decoration: underline; }

/* ---------------------------------------------------------------- Kopf
   Kopfbild (Daemmerung, 6000 x 400, seit 17.09.2026) in Bandhoehe, nie in der Hoehe
   beschnitten, rechtsbuendig: die Skyline steht rechts, links ruhiger Himmel.
   Breiter als das Bild (ab rund 2100 px) setzt der dritte Verlauf die linke
   Bildkante fort (dieselben Farben). Die Lasur dunkelt nur links ab, wo Schriftzug
   und Zeile stehen; zwischen 760 und 1023 px liegt die Zeile ueber der Skyline und
   bekommt eine gleichmaessigere Lasur. Nachgerechnet gegen die hellsten 1 % der
   Pixel (320-2560 px): Schriftzug >= 4,5 : 1 (grosse Schrift, verlangt 3), Zeile
   >= 4,6 : 1, Suchfeld >= 6,4 : 1. */
.kopf { --kopf-lasur: linear-gradient(90deg, rgba(17, 17, 20, .58) 0%, rgba(17, 17, 20, .52) 55%,
      rgba(17, 17, 20, .20) 75%, rgba(17, 17, 20, 0) 100%);
  background-color: #3B74CF;
  background-image:
    var(--kopf-lasur),
    url("../images/ki-china-daily.jpg"),
    linear-gradient(180deg, #3B74CF 0%, #4A77C9 20%, #5A73B9 40%, #6E74AF 50%, #8673A4 60%,
      #846B9A 70%, #706293 80%, #5E5A88 88%, #31487A 89%, #3A446E 89.7%, #706A95 90%,
      #565A8D 92%, #6F6393 100%);
  background-size: 100% 100%, auto 100%, 100% 100%;
  background-position: center, right center, center;
  background-repeat: no-repeat; color: var(--papier); }
@media (min-width: 1700px) {
  .kopf { --kopf-lasur: linear-gradient(90deg, rgba(17, 17, 20, .40) 0%, rgba(17, 17, 20, .36) 55%,
      rgba(17, 17, 20, .14) 75%, rgba(17, 17, 20, 0) 100%); }
}
@media (min-width: 760px) and (max-width: 1023px) {
  .kopf { --kopf-lasur: linear-gradient(90deg, rgba(17, 17, 20, .40) 0%, rgba(17, 17, 20, .36) 60%,
      rgba(17, 17, 20, .28) 100%); }
}
.kopf-innen { max-width: var(--breite); margin: 0 auto; padding: 18px var(--rand) 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; }
.kopf-marke { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.marke { margin: 0; font-size: 26px; font-weight: 800; line-height: .95; letter-spacing: -.035em;
  text-transform: uppercase; color: var(--weiss); }
.marke a { color: inherit; }
.marke-satz { display: inline; }
.marke-turm { display: inline-block; height: .95em; width: auto; vertical-align: baseline;
  margin: 0 .04em; }
.marke-rest { margin-left: .3em; }
.marke a:hover, a.marke:hover { text-decoration: none; }
.marke-zeile { display: none; margin: 0; font-size: 15px; color: var(--papier);
  text-shadow: 0 1px 2px rgba(17, 17, 20, .6); }
.kopf-werkzeuge { display: flex; align-items: center; gap: 10px; flex: none; }
.suchfeld { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 42px; height: 42px; padding: 0; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .35); background: rgba(17, 17, 20, .55); color: var(--weiss);
  font: inherit; font-size: 15px; }
.suchfeld span { display: none; }
.suchfeld:hover { background: rgba(17, 17, 20, .75); }
@media (min-width: 760px) {
  .kopf-innen { padding: 22px var(--rand) 20px; }
  .marke { font-size: 46px; }
  .marke-zeile { display: block; font-size: 16px; }
  .suchfeld { width: 320px; justify-content: flex-start; padding: 0 16px; color: #EDEBE6; }
  .suchfeld span { display: inline; }
}
@media (min-width: 760px) and (max-width: 1023px) {
  .suchfeld { width: 42px; justify-content: center; padding: 0; }
  .suchfeld span { display: none; }
}

/* Rubrikleiste: Ghosts Navigation als flache Verweise, waagerecht verschiebbar */
.rubrikleiste { background: var(--weiss); border-bottom: 1px solid var(--linie); }
.rubrikleiste-innen { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand);
  display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; }
.rubrikleiste-innen::-webkit-scrollbar { display: none; }
.rubrikleiste a { padding: 13px 0; font-size: 15px; font-weight: 500; color: var(--text); white-space: nowrap; }
.rubrikleiste a:hover { color: var(--tinte); text-decoration: none; box-shadow: inset 0 -2px 0 var(--linie); }
.rubrikleiste .nav-an { font-weight: 700; color: var(--tinte); box-shadow: inset 0 -3px 0 var(--tinte); }
.rubrikleiste .nav-an:hover { box-shadow: inset 0 -3px 0 var(--tinte); }
@media (min-width: 760px) { .rubrikleiste-innen { gap: 26px; } }

/* ---------------------------------------------------------------- Bausteine */
.schlagwort { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px;
  background: var(--rubrik, var(--grau)); color: var(--weiss); font-size: 12px; font-weight: 700;
  letter-spacing: .01em; line-height: 1.3; white-space: nowrap; }
.rubrikname { font-size: 12px; font-weight: 700; color: var(--rubrik, var(--grau)); }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; color: var(--grau); }
.meta-quelle, .meta-zeit { display: inline-flex; align-items: center; gap: 5px; }
.meta-quelle:not(:has(.quelle-name)) { display: none; }
.meta-gross { font-size: 14px; }
.ein { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  background: var(--kopierstift-hauch); color: var(--kopierstift); font-size: 12px; font-weight: 700; white-space: nowrap; }
.ein::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--kopierstift); }
.kurzfassung { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--grau-hell); white-space: nowrap; }
.kurzfassung .zeichen { width: 14px; height: 14px; }

.bild { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius);
  background-color: var(--kopf-grund); }
.bild-rubrik { background-image: var(--rubrik-bild, url("../images/rubrik-allgemein.jpg"));
  background-size: cover; background-position: center; }
.auf-bild { position: absolute; left: 12px; top: 12px; display: flex; gap: 6px; }
.auf-bild:empty { display: none; }

.abschnitt { display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 0 0 12px; border-bottom: 2px solid var(--tinte); }
.abschnitt h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.abschnitt a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text); }
.kasten-t { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.kasten-unter { margin: 1px 0 0; font-size: 12px; color: var(--grau); }

/* Karte */
.karte { display: flex; flex-direction: column; gap: 12px; min-width: 0; scroll-margin-top: 24px; }
.karte-bild { position: relative; display: block; }
.karte-bild:hover .bild { filter: brightness(1.08); }
.karte-titel { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.18; letter-spacing: -.02em; }
.karten-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 600px) { .karten-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .karten-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Aufmacher */
.aufmacher { display: flex; flex-direction: column; gap: 14px; min-width: 0; scroll-margin-top: 24px; }
.aufmacher-bild { position: relative; display: block; }
.aufmacher-bild .auf-bild { left: 14px; top: 14px; }
.aufmacher-bild .schlagwort { font-size: 13px; padding: 5px 12px; }
.aufmacher-titel { margin: 0; font-size: 26px; font-weight: 800; line-height: 1.07; letter-spacing: -.03em; }
.aufmacher-anriss { margin: 0; font-size: 17px; line-height: 1.55; color: var(--text); }
@media (min-width: 760px) {
  .aufmacher { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-areas: "titel titel" "bild anriss" "bild meta"; gap: 14px 24px;
    align-content: start; }
  .aufmacher-titel { grid-area: titel; }
  .aufmacher-bild { grid-area: bild; align-self: start; }
  .aufmacher-anriss { grid-area: anriss; align-self: start; }
  .aufmacher .meta { grid-area: meta; align-self: start; }
}
@media (min-width: 760px) {
  .aufmacher-titel { font-size: 34px; line-height: 1.08; letter-spacing: -.03em; }
  .aufmacher-anriss { font-size: 16px; line-height: 1.5; }
}

/* Liste */
.liste { list-style: none; margin: 0; padding: 0; }
.zeile { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 6px 12px; padding: 16px 0;
  border-bottom: 1px solid var(--linie); scroll-margin-top: 24px; }
.zeile-zeit { padding-top: 4px; font-size: 13px; color: var(--grau); font-variant-numeric: tabular-nums; }
.zeile-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.zeile-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; font-size: 13px; color: var(--grau); }
.zeile-kopf:not(:has(.schlagwort, .quelle-name)) { display: none; }
.zeile-titel { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.zeile .ein, .zeile .kurzfassung { align-self: flex-start; }
.zeile.eingeordnet { margin: 0 calc(-1 * var(--rand)); padding-left: var(--rand); padding-right: var(--rand);
  background: var(--kopierstift-hauch); box-shadow: inset 3px 0 0 var(--kopierstift);
  border-bottom-color: var(--kopierstift-linie); }
@media (min-width: 760px) {
  .zeile { grid-template-columns: 64px minmax(0, 1fr); gap: 6px 16px; }
  .zeile.eingeordnet { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
}

/* Meistgelesen */
.meistgelesen { padding: 16px 18px 6px; border-radius: var(--radius-gross); background: var(--flaeche); }
.meist-liste { list-style: none; margin: 8px 0 0; padding: 0; }
.meist { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 9px 0;
  border-top: 1px solid var(--linie); }
.meist-nr { font-size: 17px; font-weight: 800; line-height: 1; color: var(--nummer); font-variant-numeric: tabular-nums; }
.meist-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.meist-titel { font-size: 14px; font-weight: 600; line-height: 1.32; }


/* Einstiege */
.filter-spalte { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.filter-block { display: flex; flex-direction: column; gap: 12px; }
.filter-firmen:not(:has(.firma)) { display: none; }
.filter-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.filter { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--linie); background: var(--weiss); font-size: 14px; font-weight: 600; white-space: nowrap; }
.filter:hover { border-color: var(--tinte); text-decoration: none; }
.filter b { font-weight: 600; color: var(--grau); }
.filter i { width: 8px; height: 8px; border-radius: 50%; background: var(--rubrik, var(--grau)); }
.firma { display: inline-flex; padding: 6px 12px; border-radius: 8px; background: var(--flaeche);
  font-size: 14px; font-weight: 600; }
.firma:hover { background: var(--linie); text-decoration: none; }

/* ---------------------------------------------------------------- Startseite und Tagesausgabe */
.portal { max-width: var(--breite); margin: 0 auto; padding: 22px var(--rand) 56px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px;
  grid-template-areas: "kopf" "auf" "karten" "meist" "liste" "aelter" "filter"; }
.portal-kopf { grid-area: kopf; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.portal > .aufmacher { grid-area: auf; }
.portal > .meistgelesen { grid-area: meist; }
.portal-karten { grid-area: karten; display: flex; flex-direction: column; gap: 24px; }
.portal-karten:not(:has(.karte)) { display: none; }
.portal-liste { grid-area: liste; display: flex; flex-direction: column; min-width: 0; }
.portal-liste:not(:has(.zeile, .hinweis)) { display: none; }
.portal > .filter-spalte { grid-area: filter; }
.portal-aelter { grid-area: aelter; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.seitenzahl { font-size: 14px; color: var(--grau); }
.tagestitel { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.025em; line-height: 1.15;
  display: flex; align-items: center; gap: 12px; }
.tageszahl { font-size: 14px; color: var(--grau); font-variant-numeric: tabular-nums; }
.rubrik-punkt { width: 14px; height: 14px; border-radius: 50%; background: var(--rubrik, var(--grau)); }
.rubrik-beschreibung { flex: 0 0 100%; margin: 6px 0 0; font-size: 17px; color: var(--text); }
.seitenspalte { grid-area: seite; display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.portal.rubrikseite { grid-template-areas: "kopf" "karten" "liste" "aelter" "seite"; }

@media (min-width: 1024px) {
  .portal { padding: 36px var(--rand) 64px; gap: 44px 48px;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-areas: "kopf kopf" "auf meist" "karten karten" "liste filter" "aelter filter";
    align-items: start; }
  .tagestitel { font-size: 30px; }
  .portal.rubrikseite { grid-template-areas: "kopf kopf" "karten karten" "liste seite" "aelter seite"; }
  .tagestitel .rubrik-punkt { width: 16px; height: 16px; }
}

/* ---------------------------------------------------------------- Beitrag */
.beitrag-raster { max-width: var(--breite); margin: 0 auto; padding: 20px var(--rand) 40px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.beitrag { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.brotkrume { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 14px; color: var(--grau); }
.zurueck { flex-basis: 100%; font-weight: 600; color: var(--text); }
.rubrik-link { font-weight: 700; color: var(--rubrik, var(--tinte)); }
.brotkrume-art::before { content: "\203A"; margin-right: 12px; color: var(--grau); }
.brotkrume:not(:has(.rubrik-link)) .brotkrume-art::before { content: none; }
.beitrag-titel { margin: 0; font-size: 34px; font-weight: 800; line-height: 1.06; letter-spacing: -.035em; }
.beitrag-bild { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.beitrag-bild figcaption { font-size: 12px; color: var(--grau-hell); }
.beitrag-text { font-size: 18px; line-height: 1.7; }
.beitrag-text > * { margin: 0 0 1.1em; }
.beitrag-text > p, .beitrag-text > ul, .beitrag-text > ol, .beitrag-text > h2, .beitrag-text > h3 { max-width: 68ch; }
.beitrag-text a { text-decoration: underline; text-underline-offset: 3px; }
.beitrag-text h2 { font-size: 26px; line-height: 1.2; letter-spacing: -.02em; }
.beitrag-text h3 { font-size: 21px; line-height: 1.25; }
.themen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 18px; border-top: 1px solid var(--linie); }
.themen:not(:has(.firma)) { display: none; }
.themen-t { margin-right: 4px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--grau); }
.beitrag-raster .seitenspalte { grid-area: auto; }
.mehr { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand) 56px; display: flex; flex-direction: column; gap: 24px; }
/* Die Abfrage holt fuenf und laesst den aufgerufenen Beitrag weg; steht er nicht darunter,
   bleiben fuenf - sichtbar sind immer vier. */
.mehr .karte:nth-child(n+5) { display: none; }
@media (min-width: 1024px) {
  .beitrag-raster { padding: 36px var(--rand) 56px; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; }
  .beitrag-titel { font-size: 54px; line-height: 1.03; }
  .beitrag-text { font-size: 20px; }
  .mehr { padding-bottom: 72px; }
}

/* Die drei Klassen der Pipeline. Die Einordnung ist Meinung: violett, kursiv, beschriftet. */
.beitrag-text .kcd-einordnung { margin: 32px 0; padding: 20px 22px; max-width: 760px; border-radius: var(--radius-gross);
  background: var(--kopierstift-hauch); border-left: 4px solid var(--kopierstift); }
.beitrag-text .kcd-einordnung::before { content: "Einordnung des Herausgebers"; display: block; margin: 0 0 10px;
  font-family: Archivo, system-ui, sans-serif; font-style: normal; font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--kopierstift); }
.beitrag-text .kcd-einordnung p { margin: 0; font-family: Newsreader, Charter, "Sitka Text", Cambria, Georgia, serif;
  font-style: italic; font-size: 1.05em; line-height: 1.6; color: #3B1F5C; }
.beitrag-text .kcd-einordnung em { font-style: italic; }
.beitrag-text .kcd-vorbehalt, .beitrag-text .kcd-quellen { max-width: 760px; margin: 0 0 10px; font-size: 15px;
  line-height: 1.55; color: var(--text); }
.beitrag-text .kcd-vorbehalt, .beitrag-text p:not(.kcd-vorbehalt) + .kcd-quellen { margin-top: 32px; padding-top: 18px;
  border-top: 1px solid var(--linie); }
.beitrag-text .kcd-vorbehalt em, .beitrag-text .kcd-quellen em { font-style: normal; font-weight: 700; color: var(--tinte); }
.beitrag-text .kcd-vorbehalt small { font-size: inherit; }
@media (min-width: 760px) { .beitrag-text .kcd-einordnung { padding: 26px 30px; } }

/* Ghosts Karten (gscan verlangt kg-width-wide und kg-width-full) */
.beitrag-text .kg-card { margin: 1.6em 0; }
.beitrag-text .kg-width-wide, .beitrag-text .kg-width-full { width: 100%; max-width: none; }
.beitrag-text .kg-image, .beitrag-text .kg-width-wide img, .beitrag-text .kg-width-full img,
.beitrag-text .kg-width-full video { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.beitrag-text figcaption { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--grau); }

/* ---------------------------------------------------------------- Seiten */
.seite { max-width: 880px; margin: 0 auto; padding: 32px var(--rand) 64px; display: flex; flex-direction: column; gap: 24px; }
.seitentitel { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1.08; }
@media (min-width: 760px) { .seitentitel { font-size: 46px; } }
.archiv-liste { gap: 10px; }

/* ---------------------------------------------------------------- Fuss */
.fuss { background: var(--tinte); color: #C9CBD1; }
.fuss-innen { max-width: var(--breite); margin: 0 auto; padding: 40px var(--rand) 36px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.fuss-marke { display: flex; flex-direction: column; gap: 12px; }
.fuss .marke { font-size: 26px; }
.fuss-satz { margin: 0; font-size: 14px; line-height: 1.6; max-width: 60ch; }
.fuss-nav { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.fuss-nav a { color: var(--weiss); }
.fuss-nav .nav-an { font-weight: 700; }
.fuss-t { font-weight: 700; color: var(--weiss); }
@media (min-width: 760px) { .fuss-innen { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); } }