/* =====================================================================
   Ein Stylesheet für die ganze Website. Layout: Kopfleiste oben, Inhalt in
   einer linksbündigen Spalte darunter. Farben und Schriften stehen im ersten Block
   und gelten auch für die Diagramme.
   ===================================================================== */

@font-face {
  font-family: "Hanken Grotesk";
  src: url("../schriften/hanken-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../schriften/hanken-grotesk-latin-wght-italic.woff2") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: swap;
}

/* ---------- Design-Variablen ---------- */
:root {
  --papier: #FFFFFF;        /* Inhaltsbereich */
  --leiste: #F7F6F2;        /* zweite Zeile der Kopfleiste: sehr helles Warmgrau */
  --flaeche: #F7F6F2;       /* Kästen: Code */
  --tinte: #111111;         /* Text */
  --gedaempft: #666666;     /* Nebentext, Meta-Zeile, Achsen */
  --linie: #DEDCD6;         /* Hairlines */
  --akzent: #D0271F;        /* Signalrot: Name, aktiver Menüpunkt, Links */
  --akzent-hell: #D0271F;   /* Rot für Balken, Unterstreichung, Marker (gleich, kann heller gesetzt werden) */

  /* Datenreihen in Diagrammen, auch bei Rot-Grün-Schwäche unterscheidbar */
  --reihe-1: #D0271F;       /* Rot */
  --reihe-2: #1F4E9C;       /* Blau */
  --reihe-3: #111111;       /* Schwarz */
  --reihe-4: #8C8C8C;       /* Grau */

  --schrift-text: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --schrift-ui: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --spalte: 60rem;          /* Breite der Textspalte (none = volle Breite; ursprünglich 44rem) */
  --rahmen: 90rem;          /* Breite der ganzen Seite (none = volle Breite; ursprünglich 68rem) */
}
/* ---------- Alternative Paletten ----------
   Auswahl in hugo.toml unter [params] mit palette = "rot" | "wolke" | "schwarzweiss" | "petrol" */

/* Schwarz-Weiß: nur Schwarz, Weiß und Graustufen */
:root[data-palette="schwarzweiss"] {
  --papier: #FFFFFF; --leiste: #F2F2F2; --flaeche: #F5F5F5;
  --tinte: #000000; --gedaempft: #5C5C5C; --linie: #D9D9D9;
  --akzent: #000000; --akzent-hell: #000000;
  --reihe-1: #000000; --reihe-2: #8A8A8A; --reihe-3: #454545; --reihe-4: #BDBDBD;
}

/* Wolke: sehr helles, warmes Off-White (nach Pantones "Cloud Dancer" 2026) als Grund,
   dazu ein gedecktes Karminrot als Akzent */
:root[data-palette="wolke"] {
  --papier: #FAF9F6; --leiste: #F1EFEA; --flaeche: #FCFBF9;
  --tinte: #1A1A1A; --gedaempft: #666460; --linie: #DDDAD2;
  --akzent: #AE3A33; --akzent-hell: #AE3A33;      /* Karminrot: dunkler und weniger leuchtend als das Signalrot */
  --reihe-1: #AE3A33; --reihe-2: #1F4E9C; --reihe-3: #1A1A1A; --reihe-4: #8C8A84;
}

/* Petrol: dasselbe Off-White mit tiefem Blaugrün (nach "Transformative Teal", WGSN/Coloro 2026) */
:root[data-palette="petrol"] {
  --papier: #F4F2ED; --leiste: #ECE9E2; --flaeche: #F9F8F4;
  --tinte: #1D2426; --gedaempft: #5F6A6C; --linie: #D9D4CA;
  --akzent: #12666A; --akzent-hell: #12666A;
  --reihe-1: #12666A; --reihe-2: #7A3E6B; --reihe-3: #B27A1E; --reihe-4: #6F7A7C;
}

/* Die Seite bleibt immer hell, unabhängig vom Dunkelmodus des Geräts. */

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 1rem; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--akzent); text-decoration: none; }
.inhalt a { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
img { max-width: 100%; height: auto; }
.symbol, .meta svg, .umschalter svg { width: 1.1em; height: 1.1em; flex: none; }

.sprunglink { position: absolute; left: -999rem; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprunglink:focus { left: 1rem; top: 1rem; background: var(--papier); padding: 0.5rem 0.75rem; z-index: 20; }

/* ---------- Seitenaufbau ---------- */
.rahmen { width: 100%; max-width: var(--rahmen); margin: 0 auto; padding: 0 2rem; }
.inhalt { padding-top: 4rem; padding-bottom: 5rem; }
.inhalt > *, article > * { max-width: var(--spalte); }
.inhalt > .titelbereich, article > .titelbereich { max-width: none; }

/* ---------- Kopfleiste ---------- */
.kopf { background: var(--papier); border-bottom: 3px solid var(--tinte); font-family: var(--schrift-ui); }
.kopf .zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 2.5rem; padding-top: 1.1rem; padding-bottom: 1.1rem; }
.kopf .name {
  margin-right: auto;
  font-weight: 700; font-size: 1.15rem; line-height: 1;
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--akzent);
}
.umschalter { display: none; background: none; border: 0; color: var(--tinte); padding: 0.4rem; cursor: pointer; }
.umschalter svg { width: 1.5rem; height: 1.5rem; display: block; }
.navigation { display: flex; flex-wrap: wrap; gap: 0.25rem 2rem; }
.navigation a { position: relative; padding: 0.35rem 0; font-size: 0.98rem; font-weight: 500; color: var(--tinte); }
.navigation a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.05rem; height: 2px; background: transparent; }
.navigation a:hover::after { background: var(--linie); }
.navigation a.aktiv { color: var(--akzent); }
.navigation a.aktiv::after { background: var(--akzent-hell); }

/* Ausklappmenü in der Kopfleiste (z. B. „Datenprojekte“) */
.aufklapp { position: relative; }
.aufklappknopf { display: inline-flex; align-items: center; gap: 0.3rem; background: none; border: 0; padding: 0.35rem 0; font: inherit; font-size: 0.98rem; font-weight: 500; color: var(--tinte); cursor: pointer; }
.aufklappknopf svg { width: 1rem; height: 1rem; transition: transform 0.15s; }
.aufklappknopf[aria-expanded="true"] svg { transform: rotate(180deg); }
.aufklappknopf:hover, .aufklappknopf.aktiv { color: var(--akzent); }
.aufklappmenue { display: none; position: absolute; top: calc(100% + 0.6rem); right: 0; z-index: 30; min-width: 14rem; margin: 0; padding: 0.4rem 0; list-style: none; background: var(--papier); border: 1px solid var(--linie); border-top: 3px solid var(--akzent-hell); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); }
.aufklapp.offen .aufklappmenue { display: block; }
.aufklappmenue li { margin: 0; }
.navigation .aufklappmenue a { display: block; padding: 0.55rem 1.1rem; white-space: nowrap; }
.navigation .aufklappmenue a::after { display: none; }
.navigation .aufklappmenue a:hover, .navigation .aufklappmenue a[aria-current="page"] { color: var(--akzent); background: var(--leiste); }
.beitragsliste .mehr { margin-top: 0.4rem; font-size: 0.95rem; }
.beitragsliste a.weiterlink { font-weight: 500; font-size: inherit; color: var(--akzent); }

.unternavigation { background: var(--leiste); border-top: 1px solid var(--linie); }
.unternavigation .rahmen { display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; padding-top: 0.6rem; padding-bottom: 0.6rem; }
.unternavigation a { position: relative; padding-left: 0.9rem; font-size: 0.9rem; color: var(--gedaempft); }
.unternavigation a::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.3rem; height: 0.3rem; background: var(--linie); }
.unternavigation a:hover { color: var(--tinte); }
.unternavigation a[aria-current="page"] { color: var(--akzent); }
.unternavigation a[aria-current="page"]::before { background: var(--akzent-hell); }
.unternavigation .mehr { font-style: italic; }

/* ---------- Blog: linke Seitenleiste mit den Beiträgen ---------- */
.blograhmen { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 0 3rem; align-items: start; }
.blograhmen .inhalt { padding-left: 0; padding-right: 0; }
.blogleiste { position: sticky; top: 0; max-height: 100vh; overflow-y: auto; padding: 2rem 0 2rem; border-right: 1px solid var(--linie); font-family: var(--schrift-ui); }
.leistenkopf { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-right: 1rem; margin-bottom: 1rem; }
.leistentitel { font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinte); }
.leistenknopf { background: none; border: 0; padding: 0.3rem; color: var(--gedaempft); cursor: pointer; }
.leistenknopf:hover { color: var(--akzent); }
.leistenknopf svg { width: 1.25rem; height: 1.25rem; display: block; }
.beitragsnavigation { padding-right: 1rem; }
.beitragsnavigation .jahr { margin: 1rem 0 0.4rem; padding-top: 0.6rem; border-top: 1px solid var(--linie); font-size: 0.8rem; font-weight: 600; color: var(--gedaempft); }
.beitragsnavigation .jahr:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.beitragsnavigation ul { list-style: none; margin: 0; padding: 0; }
.beitragsnavigation li { position: relative; margin: 0; padding-left: 0.9rem; }
.beitragsnavigation li::before { content: ""; position: absolute; left: 0; top: 0.85em; width: 0.3rem; height: 0.3rem; background: var(--linie); }
.beitragsnavigation li:has(a[aria-current="page"])::before { background: var(--akzent-hell); }
.beitragsnavigation a { display: block; padding: 0.3rem 0; font-size: 0.92rem; line-height: 1.4; color: var(--tinte); }
.beitragsnavigation a:hover, .beitragsnavigation a[aria-current="page"] { color: var(--akzent); }

/* eingeklappt: nur der Knopf bleibt am linken Rand */
.blogleiste-zu .blograhmen { grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0 2rem; }
.blogleiste-zu .blogleiste { border-right: 0; }
.blogleiste-zu .leistenkopf { padding-right: 0; justify-content: center; }
.blogleiste-zu .leistentitel, .blogleiste-zu .beitragsnavigation { display: none; }

/* ---------- Überschriften und Text ---------- */
.titelbereich { margin: 0 0 3rem; }
.titelbereich::before { content: ""; display: block; width: 3rem; height: 4px; background: var(--akzent-hell); margin-bottom: 1.5rem; }
h1 {
  font-family: var(--schrift-ui); font-weight: 600;
  font-size: clamp(2.2rem, 1.5rem + 3vw, 3.4rem);
  line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 1rem;
  text-wrap: balance;
}
h2 {
  font-family: var(--schrift-ui); font-weight: 600;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem);
  line-height: 1.2; letter-spacing: -0.02em; margin: 3rem 0 0.9rem;
}
h3 { font-family: var(--schrift-ui); font-weight: 600; font-size: 1.1rem; line-height: 1.3; margin: 2rem 0 0.5rem; }
p, ul, ol { margin: 0 0 1.35rem; }
li { margin-bottom: 0.3rem; }
hr { border: 0; border-top: 1px solid var(--linie); margin: 2.5rem 0; }
blockquote { margin: 1.75rem 0; padding-left: 1.25rem; border-left: 3px solid var(--akzent-hell); color: var(--gedaempft); font-size: 1.05em; }
.vorspann { font-size: 1.2rem; line-height: 1.5; margin: 0 0 2rem; }
.vorspann > :last-child { margin-bottom: 0; }

.meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin: 0; font-size: 0.85rem; color: var(--gedaempft); }
.meta > * { display: inline-flex; align-items: center; gap: 0.4rem; }
.meta button { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.meta button:hover { color: var(--akzent); }

pre { overflow-x: auto; background: var(--flaeche); border: 1px solid var(--linie); padding: 1rem 1.25rem; font-size: 0.85rem; line-height: 1.55; }
code, pre { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
code { font-size: 0.9em; }
article > table { display: block; overflow-x: auto; border-collapse: collapse; font-size: 0.95rem; }
article > table th, article > table td { padding: 0.4rem 1.25rem 0.4rem 0; border-bottom: 1px solid var(--linie); text-align: left; }

/* ---------- Übersichten ---------- */
.block { margin: 0 0 3rem; }
.block > h2:first-child { margin-top: 0; }
.block > h2 { margin-top: 0; }
.block + .block { margin-top: 3.5rem; }
.mehr { font-size: 0.95rem; margin-top: 1rem; }

.beitragsliste { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--tinte); }
.beitragsliste li { margin: 0; padding: 1rem 0 1.1rem; border-bottom: 1px solid var(--linie); }
.beitragsliste time { display: block; font-size: 0.85rem; color: var(--gedaempft); margin-bottom: 0.15rem; }
.beitragsliste a { text-decoration: none; font-weight: 600; font-size: 1.15rem; line-height: 1.3; color: var(--tinte); }
.beitragsliste a:hover { color: var(--akzent); text-decoration: underline; }
.beitragsliste p { margin: 0.3rem 0 0; font-size: 0.98rem; line-height: 1.5; color: var(--gedaempft); }

/* ---------- Blog-Startseite: Beiträge endlos untereinander ---------- */
.endlos > .feedbeitrag { max-width: none; padding-top: 3rem; border-top: 2px solid var(--tinte); }
.endlos > .feedbeitrag + .feedbeitrag { margin-top: 4.5rem; }
.endlos > .feedbeitrag:first-child { padding-top: 0; border-top: 0; }   /* kein Strich über dem ersten Beitrag */
.feedbeitrag > .titelbereich { margin-bottom: 2rem; }
.feedbeitrag > .titelbereich::before { display: none; }
.feedbeitrag h2.beitragstitel { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 0.8rem; text-wrap: balance; }
.feedbeitrag h2.beitragstitel a { color: var(--tinte); text-decoration: none; }
.feedbeitrag h2.beitragstitel a:hover { color: var(--akzent); text-decoration: underline; }
.blaettern { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 4rem; padding-top: 1.25rem; border-top: 1px solid var(--linie); font-size: 0.95rem; }
.blaettern [rel="next"] { margin-left: auto; }
.feedstatus { margin: 0; color: var(--gedaempft); }

/* ---------- Diagramm-Baustein ---------- */
figure.diagramm {
  max-width: calc(var(--spalte) + 8rem);
  margin: 2.5rem 0;
  padding: 1.25rem 0 1.25rem;
  border-top: 3px solid var(--akzent-hell);
  border-bottom: 1px solid var(--linie);
}
.diagramm .titel { font-weight: 600; font-size: 1.1rem; line-height: 1.3; margin: 0; }
.diagramm .untertitel { font-size: 0.9rem; color: var(--gedaempft); margin: 0.2rem 0 0; }
.diagramm .buehne { position: relative; height: clamp(16rem, 45vw, 24rem); margin-top: 1.25rem; }
.diagramm figcaption { font-size: 0.85rem; line-height: 1.5; color: var(--gedaempft); margin-top: 1rem; }
.diagramm figcaption a { color: inherit; }
.diagramm details { margin-top: 0.75rem; font-size: 0.9rem; }
.diagramm summary { cursor: pointer; color: var(--akzent); width: fit-content; }
.diagramm .tabellenrahmen { overflow-x: auto; margin-top: 0.75rem; }
.diagramm table { border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 16rem; }
.diagramm th, .diagramm td { padding: 0.3rem 1.5rem 0.3rem 0; border-bottom: 1px solid var(--linie); text-align: right; font-weight: 400; }
.diagramm thead th { font-weight: 600; }
.diagramm th:first-child { text-align: left; }
.diagramm .herunterladen { margin: 0.75rem 0 0; }

/* ---------- Seitenfuß ---------- */
.fuss { border-top: 1px solid var(--linie); font-size: 0.85rem; color: var(--gedaempft); }
.fuss .rahmen { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; padding-top: 1.5rem; padding-bottom: 2rem; }
.fuss a { color: inherit; }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 52rem) {
  .rahmen { padding: 0 1.25rem; }
  .kopf .zeile { padding-top: 0.85rem; padding-bottom: 0.85rem; }
  .umschalter { display: block; }
  .navigation { display: none; flex-basis: 100%; flex-direction: column; gap: 0; padding: 0.5rem 0 0.25rem; border-top: 1px solid var(--linie); margin-top: 0.5rem; }
  .kopf.offen .navigation { display: flex; }
  .navigation a { padding: 0.55rem 0; }
  .navigation a::after { display: none; }
  .aufklappknopf { padding: 0.55rem 0; width: 100%; justify-content: space-between; }
  .aufklappmenue { position: static; min-width: 0; padding: 0 0 0.25rem 1rem; border: 0; box-shadow: none; background: none; }
  .navigation .aufklappmenue a { padding: 0.45rem 0; }
  .navigation .aufklappmenue a:hover { background: none; }
  .unternavigation .rahmen { flex-wrap: nowrap; overflow-x: auto; }
  .unternavigation a { white-space: nowrap; }
  .inhalt { padding-top: 2.5rem; padding-bottom: 3.5rem; }
  body { font-size: 1rem; }

  /* Blogleiste liegt über dem Inhalt und ist zunächst eingeklappt */
  .blograhmen, .blogleiste-zu .blograhmen { display: block; }
  .blogleiste { position: static; max-height: none; padding: 0.75rem 0 0; border-right: 0; border-bottom: 1px solid var(--linie); }
  .leistenkopf, .blogleiste-zu .leistenkopf { justify-content: space-between; padding-right: 0; margin-bottom: 0.25rem; }
  .blogleiste-zu .leistentitel { display: block; }
  .beitragsnavigation { padding: 0.25rem 0 0.75rem; }
  .blogleiste-zu .beitragsnavigation { display: none; }
}

@media print {
  .kopf nav, .fuss, .sprunglink, .meta button, .blogleiste { display: none; }
  .blograhmen { display: block; }
  body { background: #fff; }
}