/* ============================================================
   Philipp Weidlich – philipp-weidlich.de
   Statisches Stylesheet, mobile-first, keine externen Quellen.

   Gestaltungsprinzip: STRUKTUR ÜBER FLÄCHEN.
   Keine Trennlinien, keine Rahmen. Gliederung entsteht durch
   sanft abgesetzte Flächen, weiche Schatten und Weißraum.
   Der Akzentton wird nur punktuell gesetzt.

   Ausnahme: Fokus-Ringe. Die sind Barrierefreiheit, keine Deko.

   Aufbau: 1 Schrift · 2 Tokens · 3 Reset · 4 Raster · 5 Typo
           6 Komponenten · 7 Sektionen · 8 Hero-Varianten
           9 Animation · 10 Rechtstexte · 11 A11y/Druck
   ============================================================ */


/* --- 1 Schrift ------------------------------------------------ */

/* Variable Schrift, selbst gehostet (kein CDN, kein Tracking).
   Fehlt die Datei, greift lautlos der Fallback unten.
   Lizenz: assets/fonts/LICENSE-Inter.txt (SIL OFL 1.1) */
@font-face {
  font-family: "Site Sans";
  src: url("../assets/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Metrisch angeglichener Fallback – verhindert den Layout-Sprung (CLS)
   in den Millisekunden, bevor die Webfont-Datei da ist.

   Die drei Override-Werte entsprechen den Inter-Metriken und halten die
   Zeilenhöhe konstant; sie allein beseitigen die vertikale Verschiebung.
   size-adjust wirkt nur auf die Breite: 105.5 % bringt Segoe UI auf
   Inters Laufweite (gemessen: 0,2 % Restabweichung), damit der Text beim
   Wechsel nicht anders umbricht.

   Bei einem Schriftwechsel neu ausmessen, nicht schätzen. */
@font-face {
  font-family: "Site Sans Fallback";
  src: local("Segoe UI"), local("Helvetica Neue"), local("Arial"), local("Roboto");
  size-adjust: 105.5%;
  ascent-override: 96.9%;
  descent-override: 24.1%;
  line-gap-override: 0%;
}


/* --- 2 Design-Tokens ----------------------------------------- */
:root {
  /* Flächen-Staffelung: von der Seite (hell) über das Band (getönt)
     bis zur Karte (weiß). Diese drei Ebenen ersetzen alle Linien. */
  --bg:        #faf9f7;          /* Seite                        */
  --bg-panel:  #f3f0ea;          /* abgesetztes Band (Sektion)   */
  --bg-footer: #f0ece4;          /* Footer – eine Stufe tiefer   */
  --bg-tile:   #f6f4ef;          /* Kachel auf heller Seite      */
  --bg-elev:   #ffffff;          /* Karte, oberste Ebene         */

  /* Tönung der hervorgehobenen Karte. Bewusst schwächer als
     --accent-soft: auf der Karte steht Fließtext, der >= 7:1 halten muss. */
  --tint-current: rgba(13, 82, 76, 0.06);

  --text:       #14161a;
  --text-muted: #4a4e54;         /* >= 7:1 auf allen vier Flächen (AAA) */

  /* Der eine Akzentton – gedecktes Petrol, in genau vier Rollen:
     Nummern-Chips · Rollen-Labels · Hover · Fokus */
  /* 7 % Tönung ist der stärkste Wert, bei dem Akzenttext auf der
     getönten Fläche noch >= 7:1 erreicht (AAA). Nicht erhöhen. */
  --accent:      #0d524c;
  --accent-soft: rgba(13, 82, 76, 0.07);

  /* Weiche, tief ansetzende Schatten – sie übernehmen die Abgrenzung,
     die vorher Rahmen geleistet haben. */
  --shadow-card: 0 1px 2px rgba(20, 22, 26, 0.035),
                 0 8px 20px -12px rgba(20, 22, 26, 0.10);
  --shadow-lift: 0 2px 4px rgba(20, 22, 26, 0.04),
                 0 18px 38px -18px rgba(20, 22, 26, 0.18);
  --shadow-soft: 0 1px 2px rgba(20, 22, 26, 0.03);
  /* Im Dunkelmodus tragen Schatten nicht – dort definiert ein
     unsichtbar leiser Innenring die Kante. Wird unten gesetzt. */
  --edge: 0 0 0 0 transparent;

  /* Schrift */
  --font-sans: "Site Sans", "Site Sans Fallback", ui-sans-serif, system-ui,
               -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Typo-Skala – modular (~1.25), Display per clamp() flüssig */
  --fs-2xs:  0.6875rem;
  --fs-xs:   0.75rem;
  --fs-sm:   0.8438rem;
  --fs-base: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);
  --fs-md:   clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
  --fs-lg:   clamp(1.1875rem, 1.12rem + 0.34vw, 1.375rem);
  --fs-xl:   clamp(1.375rem, 1.24rem + 0.68vw, 1.75rem);
  --fs-2xl:  clamp(1.75rem, 1.44rem + 1.55vw, 2.625rem);
  --fs-3xl:  clamp(2.5rem, 1.42rem + 5.4vw, 5rem);

  /* Zeilenhöhen – je größer der Grad, desto enger */
  --lh-display: 1.0;
  --lh-title:   1.16;
  --lh-lead:    1.45;
  --lh-body:    1.62;
  --lh-tight:   1.4;

  /* Laufweite – optischer Ausgleich für große Grade */
  --ls-display: -0.035em;
  --ls-title:   -0.022em;
  --ls-label:    0.13em;

  /* Abstandsskala (4px-Raster) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.75rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Raster */
  --measure: 64rem;
  --measure-text: 36rem;
  --gutter: clamp(1.25rem, 4.5vw, 3rem);
  --rail: 9.5rem;
  --section-gap: clamp(4rem, 9vw, 7.5rem);
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;

  /* Bewegung – eine Kurve für alles */
  --ease: cubic-bezier(0.22, 0.7, 0.2, 1);
  --dur-fast: 0.18s;
  --dur: 0.28s;
  --dur-slow: 0.7s;
}

/* Dunkelmodus: gleiche Flächen-Logik, nur invertiert gestaffelt.
   Statt Schatten definiert ein sehr leiser Innenring die Kanten –
   Schatten sind auf dunklem Grund praktisch unsichtbar. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0e0f11;
    --bg-panel:  #14161a;
    --bg-footer: #181b1f;
    --bg-tile:   #171a1e;
    --bg-elev:   #1a1d21;

    /* Im Dunkelmodus hellt die Tönung die Karte auf, statt sie
       abzudunkeln. Gemessenes Maximum für 7:1 beim gedämpften Text
       sind 3 % – die Karte bleibt sichtbar abgesetzt. Nicht erhöhen. */
    --tint-current: rgba(116, 214, 202, 0.03);

    --text:       #eceae5;
    --text-muted: #a9adb3;

    --accent:      #74d6ca;
    --accent-soft: rgba(116, 214, 202, 0.12);

    --edge: inset 0 0 0 1px rgba(255, 255, 255, 0.045);
    --shadow-card: var(--edge);
    --shadow-lift: var(--edge), 0 20px 44px -20px rgba(0, 0, 0, 0.75);
    --shadow-soft: none;
  }
}


/* --- 3 Reset / Basis ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-weight: 400;
  letter-spacing: -0.006em;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}

img, svg { max-width: 100%; height: auto; }
ul, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }
p { margin: 0; }
::selection { background: var(--accent-soft); }

/* Links tragen keine Unterstreichung mehr – ihre Erkennbarkeit
   kommt aus Position, Gewicht und Hover-Fläche. */
a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}

/* Fokus: bleibt ein Ring. Barrierefreiheit vor Optik. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}
:focus:not(:focus-visible) { outline: none; }

/* Nur für Screenreader */
.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -4rem;
  z-index: 100;
  padding: 0.65rem 1.1rem;
  background: var(--text);
  color: var(--bg);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus-visible { top: var(--space-3); }


/* --- 4 Raster ------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section-gap);
}

/* Abgesetztes Band: übernimmt die Gliederung, die vorher die
   Trennlinien geleistet haben. Wechselt sich mit der Seitenfläche ab. */
.section--panel { background: var(--bg-panel); }

/* Messpunkt für die Kopfzeile (js/main.js) – ohne Layout-Einfluss */
#top-sentinel {
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 1px;
}


/* --- 5 Typografie -------------------------------------------- */

/* Labels: gesperrte Versalien, klein, ruhig */
.label {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin: 0;
  font-size: var(--fs-2xs);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Sektionsnummer als kleine getönte Kachel statt Linie/Ziffer */
.label__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  font-feature-settings: "tnum" 1;
}

/* Sektionskopf: Nummernspur links, Titel rechts (ab Desktop) */
.section__head {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}
@media (min-width: 60rem) {
  .section__head {
    grid-template-columns: var(--rail) minmax(0, 1fr);
    gap: 0 var(--space-6);
    align-items: start;
  }
  /* Nummer über den Text statt daneben: in der schmalen Spur bliebe
     sonst zu wenig Platz und längere Labels brechen mitten im Wort um. */
  .section__head .label {
    grid-row: span 2;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
    padding-top: 0.3rem;
  }
}

.section__title {
  margin: 0;
  max-width: 32ch;
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  text-wrap: balance;
}

.section__intro {
  margin-top: var(--space-4);
  max-width: var(--measure-text);
  color: var(--text-muted);
  font-size: var(--fs-base);
  line-height: var(--lh-lead);
}

/* Inhalt richtet sich ab Desktop an der Titelspalte aus */
.section__body { max-width: var(--measure-text); }
@media (min-width: 60rem) {
  .section__body { margin-left: calc(var(--rail) + var(--space-6)); }
  /* wide: an der Titelspalte ausgerichtet, aber ohne Lesebreite */
  .section__body--wide { max-width: none; }
  /* full: volle Containerbreite – für Kachel- und Kartenraster,
     damit drei bzw. vier Elemente sauber in eine Reihe passen */
  .section__body--full { max-width: none; margin-left: 0; }
}
.section__body + .section__body { margin-top: var(--space-6); }

/* Fließtext */
.prose p {
  color: var(--text-muted);
  font-size: var(--fs-md);
  line-height: var(--lh-lead);
  text-wrap: pretty;
}
.prose p + p { margin-top: var(--space-4); }
.prose strong { color: var(--text); font-weight: 500; }

/* Link mitten im Fließtext. Farbe allein reicht zur Erkennbarkeit nicht
   aus (WCAG 1.4.1) – statt einer Unterstreichung markiert ihn hier eine
   leicht getönte Fläche. Passt zur Flächen-Logik und ist eindeutig. */
.textlink {
  padding: 0.08em 0.34em;
  margin-inline: -0.06em;
  border-radius: 5px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 500;
  transition: background-color var(--dur-fast) var(--ease);
}
.textlink:hover { background: var(--bg-tile); }

/* Externe-Link-Pfeil */
.icon {
  width: 0.7em;
  height: 0.7em;
  flex: none;
  margin-left: 0.45em;
  opacity: 0.5;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}


/* --- 6 Komponenten ------------------------------------------- */

/* 6.1 Kopfzeile – kein Rahmen, nur ein weicher Schatten beim Scrollen */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);                                    /* Fallback */
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  transition: box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.site-header.is-stuck {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  box-shadow: 0 1px 20px -8px rgba(20, 22, 26, 0.16);
}
@media (prefers-color-scheme: dark) {
  .site-header.is-stuck { box-shadow: 0 8px 24px -16px rgba(0, 0, 0, 0.9); }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 4rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
}
/* Monogramm als gefüllte Kachel (vorher: Rahmen) */
.wordmark__mark {
  display: grid;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: var(--radius-sm);
  background: var(--text);
  color: var(--bg);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background-color var(--dur) var(--ease);
}
.wordmark:hover .wordmark__mark { background: var(--accent); }

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
/* Hover ist eine weiche Fläche, keine Unterstreichung */
.site-nav a {
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
}
.site-nav a:hover { color: var(--text); background: var(--bg-tile); }

/* Sehr schmale Displays: nur der wichtigste Link bleibt (kein Burger-JS) */
@media (max-width: 26rem) {
  .site-nav a:not(.site-nav__key) { display: none; }
  .site-nav a.site-nav__key { background: var(--bg-tile); color: var(--text); }
}

/* 6.2 Buttons – beide gefüllt, keine Konturen */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.875rem;                  /* >= 44px Touch-Ziel */
  padding: 0.7rem 1.4rem;
  border: 0;
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.004em;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.btn .icon { margin-left: 0; opacity: 0.55; }
.btn:hover .icon { opacity: 0.9; transform: translate(1px, -1px); }

.btn--primary {
  background: var(--text);
  color: var(--bg);
  box-shadow: var(--shadow-card);
}
.btn--primary:hover { background: var(--accent); box-shadow: var(--shadow-lift); }

.btn--ghost {
  background: var(--bg-tile);
  color: var(--text);
  box-shadow: var(--shadow-soft);
}
/* Hover geht auf eine TIEFERE neutrale Fläche – eine Akzenttönung
   würde heller wirken als der Ruhezustand. */
.btn--ghost:hover { background: var(--bg-panel); color: var(--accent); }

/* Auf getönten Bändern braucht der leise Button mehr Substanz */
.section--panel .btn--ghost,
.site-footer .btn--ghost { background: var(--bg-elev); }
.section--panel .btn--ghost:hover,
.site-footer .btn--ghost:hover { background: var(--bg-tile); }

@media (prefers-reduced-motion: no-preference) {
  .btn:hover { transform: translateY(-1px); }
}

/* 6.3 Karten – reine Flächen, Abgrenzung über Schatten */
/* Spaltenzahl bewusst explizit statt auto-fit: bei drei Karten würde
   auto-fit je nach Breite eine angebrochene Reihe (2+1) erzeugen. */
.cards {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 34rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 52rem) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Angebrochene letzte Reihe vermeiden – das Raster passt sich der
   Kartenzahl an, damit später hinzugefügte Karten nicht auffallen.

   Zwei Spalten: steht die letzte Karte allein (ungerade Anzahl),
   nimmt sie die volle Breite. Gilt für 3, 5, 7 … Karten. */
@media (min-width: 34rem) and (max-width: 51.999rem) {
  .cards > .card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Drei Spalten: bei genau vier Karten wäre die Reihe 3+1 – dann lieber
   2x2. :has() zählt hier die Karten; fehlt die Unterstützung, bleibt es
   bei drei Spalten (unschön, aber nicht kaputt). */
@media (min-width: 52rem) {
  .cards:has(> .card:nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Fünf Karten: die letzte füllt die Restbreite der zweiten Reihe */
  .cards:has(> .card:nth-child(5):last-child) > .card:last-child {
    grid-column: span 2;
  }
}

/* Referenzen-Raster: die hervorgehobene Karte steht oben allein über
   die volle Breite, darunter laufen immer zwei pro Reihe.
   Wächst mit jeder weiteren Karte, ohne dass hier etwas anzupassen ist. */
.cards--featured { grid-template-columns: 1fr; }
@media (min-width: 34rem) {
  .cards--featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards--featured > .card--current { grid-column: 1 / -1; }
  /* Bleibt unten eine Karte allein übrig, nimmt sie die volle Breite.
     Geprüft wird "gerade", weil die erste Karte eine ganze Reihe belegt. */
  .cards--featured > .card:last-child:nth-child(even) { grid-column: 1 / -1; }
}
/* Auch auf breiten Displays bei zwei Spalten bleiben – nicht drei.
   Die Zähl-Regeln des allgemeinen Rasters werden hier bewusst
   zurückgenommen: sie gehen von einer Reihe ohne Vollbreiten-Karte aus
   und würden die letzte Karte fälschlich alleine stellen. */
@media (min-width: 52rem) {
  .cards--featured,
  .cards--featured:has(> .card:nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cards--featured:has(> .card:nth-child(5):last-child) > .card:last-child {
    grid-column: auto;
  }
}
.cards--single,
.cards--single:is(.cards) { grid-template-columns: 1fr; }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: clamp(1.4rem, 2.6vw, 2rem);
  background: var(--bg-elev);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.card:hover, .card:focus-within { box-shadow: var(--shadow-lift); }

@media (prefers-reduced-motion: no-preference) {
  .card:hover, .card:focus-within { transform: translateY(-3px); }
}

/* Einzelne Karte: nimmt die volle Breite des Blocks, damit die Sektion
   nicht schmaler wirkt als das Referenzen-Raster darüber. */
.card--feature { max-width: none; }

/* Hervorgehobene Karte (aktueller Arbeitsplatz): liegt dauerhaft eine
   Stufe weiter vorn und ist leicht getönt – ohne laute Farbe. */
.card--current {
  background: var(--bg-elev);
  box-shadow: var(--shadow-lift);
}
.card--current::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tint-current);
  pointer-events: none;
}
.card--current > * { position: relative; }

.card__label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
}
.card__label .sep { opacity: 0.45; }

.card__title {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
}
.card__title a { display: inline-flex; align-items: center; }
/* Ganze Karte klickbar – ohne verschachtelte Links (a11y-sicher) */
.card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.card:hover .card__title a { color: var(--accent); }
.card:hover .icon { opacity: 0.95; transform: translate(1px, -1px); }

.card__text {
  color: var(--text-muted);
  font-size: var(--fs-base);
  line-height: var(--lh-lead);
  text-wrap: pretty;
}

/* Tags: gefüllte Pillen ohne Kontur */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: var(--space-3);
}
.tags li {
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: var(--bg-tile);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-muted);
}
/* Auf weißen Karten in einem getönten Band bleibt die Pille sichtbar */
.section--panel .tags li { background: var(--bg-panel); }

/* 6.4 Schwerpunkte als Kacheln */
/* Vier Schwerpunkte -> 2x2 ab Tablet, damit keine Reihe anbricht */
.facts {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Ungerade Anzahl: die letzte Kachel nimmt die volle Breite,
     statt allein in der Reihe zu stehen. */
  .facts__row:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.facts__row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: var(--space-5);
  border-radius: var(--radius);
  background: var(--bg-tile);
  transition: background-color var(--dur) var(--ease);
}
/* Auf getönten Bändern eine Stufe heller, damit die Kachel liest */
.section--panel .facts__row { background: var(--bg-elev); }

.facts dt {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.008em;
}
.facts dd {
  color: var(--text-muted);
  font-size: var(--fs-base);
  line-height: var(--lh-lead);
  text-wrap: pretty;
}

/* 6.5 Meta-Kacheln (Hero-Fuß) */
/* Drei Meta-Kacheln: gestapelt oder alle drei nebeneinander, nie 2+1 */
.meta-row {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 1fr;
}
@media (min-width: 34rem) { .meta-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.meta-row > li {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  background: var(--bg-tile);
}
.meta-row__k {
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.meta-row__v {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-sm);
  font-weight: 500;
}


/* --- 7 Sektionen --------------------------------------------- */

/* 7.1 Hero */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(88svh, 44rem);
  padding-block: clamp(3.5rem, 11vw, 6.5rem) var(--space-8);
  overflow: hidden;
}
/* Sehr weicher Akzent-Hauch – Fläche, keine Kontur */
.hero::before {
  content: "";
  position: absolute;
  inset: -30% -20% auto -20%;
  height: 85%;
  background: radial-gradient(52% 100% at 72% 0%, var(--accent-soft), transparent 72%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.hero__name {
  order: 2;
  margin: 0;
  font-size: var(--fs-3xl);
  font-weight: 600;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

.hero__role {
  order: 3;
  margin-top: var(--space-4);
  max-width: 30ch;
  font-size: var(--fs-xl);
  font-weight: 450;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  text-wrap: balance;
}
.hero__role .sep { color: var(--accent); padding-inline: 0.1em; }

.hero__lead {
  order: 4;
  margin-top: var(--space-4);
  max-width: 44ch;
  color: var(--text-muted);
  font-size: var(--fs-md);
  line-height: var(--lh-lead);
  text-wrap: pretty;
}

.hero__actions {
  order: 5;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

.hero__meta { order: 6; width: 100%; margin-top: var(--space-8); }

/* 7.2 Footer – eigenes, etwas tieferes Band */
.site-footer {
  position: relative;
  /* Eigener, tieferer Ton – so bleibt der Footer auch dann abgesetzt,
     wenn die Sektion darüber bereits ein Band ist. */
  background: var(--bg-footer);
  padding-block: var(--section-gap) var(--space-7);
}
.site-footer__inner { display: grid; gap: var(--space-8); }

.site-footer__cta { max-width: var(--measure-text); }
.site-footer__lead {
  margin: var(--space-4) 0 var(--space-5);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  text-wrap: balance;
}

/* Kontaktwege als klar erkennbare Flächen (vorher: Unterstreichung) */
.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.875rem;                  /* >= 44px Touch-Ziel */
  /* E-Mail-Adressen haben keine Leerzeichen: ohne diese zwei Zeilen
     läuft eine lange Adresse auf schmalen Displays aus der Fläche. */
  max-width: 100%;
  overflow-wrap: anywhere;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  background: var(--bg-elev);
  box-shadow: var(--shadow-card);
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.contact-link:hover { color: var(--accent); box-shadow: var(--shadow-lift); }
.contact-link .icon { margin-left: 0; opacity: 0.55; }
.contact-link:hover .icon { opacity: 0.95; }
@media (prefers-reduced-motion: no-preference) {
  .contact-link:hover { transform: translateY(-1px); }
}

/* Hinweis unter den Kontaktflächen – bewusst leiser gesetzt */
.site-footer__note {
  margin-top: var(--space-5);
  max-width: 34rem;
  font-size: var(--fs-sm);
  line-height: var(--lh-lead);
  color: var(--text-muted);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-left: -0.7rem;                  /* Hover-Fläche optisch ausrichten */
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.site-footer__links a {
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
}
.site-footer__links a:hover { color: var(--text); background: var(--bg-elev); }
.site-footer__links a[aria-current="page"] { color: var(--text); background: var(--bg-elev); }

.site-footer__legal { font-size: var(--fs-xs); color: var(--text-muted); }


/* --- 8 Hero-Varianten ---------------------------------------- */
/* Umschalten über die Klasse am <html>-Element:
     class="hero-a"  -> Variante A "Name dominiert"   (Standard)
     class="hero-b"  -> Variante B "Aussage dominiert"           */

/* Variante A – der Name ist das Plakat, die Rolle die Unterzeile. */
.hero-a .hero__name { font-size: var(--fs-3xl); }
.hero-a .hero__role { font-weight: 450; color: var(--text-muted); }
@media (min-width: 48rem) {
  /* Optischer Randausgleich: große Grade wirken sonst eingerückt */
  .hero-a .hero__name { margin-left: -0.055em; }
}

/* Variante B – der Name wird zum kleinen Kicker, die Positionierung
   trägt die Fläche. Wirkt redaktioneller und weniger plakativ. */
.hero-b .hero__name {
  order: 1;
  margin-top: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: var(--lh-tight);
  color: var(--text-muted);
}
.hero-b .hero__role {
  order: 3;
  margin-top: var(--space-5);
  max-width: 24ch;
  font-size: clamp(2.125rem, 1.5rem + 3.4vw, 3.75rem);
  font-weight: 550;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--text);
}
.hero-b .hero__role .sep { display: none; }
.hero-b .hero__role .hero__role-2 { color: var(--text-muted); }
.hero-b .hero__lead { max-width: 46ch; }


/* --- 9 Scroll-Reveal ----------------------------------------- */
/* Elemente starten unsichtbar und werden per IntersectionObserver
   (js/main.js) eingeblendet. Bei prefers-reduced-motion greift keine
   dieser Regeln -> alles ist sofort da, ohne Umweg. */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    /* nur transform+opacity -> läuft auf dem Compositor, kein Reflow */
    transform: translate3d(0, 12px, 0);
    transition: opacity var(--dur-slow) var(--ease),
                transform var(--dur-slow) var(--ease);
  }
  .reveal.is-visible { opacity: 1; transform: none; }

  .stagger > .reveal:nth-child(2) { transition-delay: 0.07s; }
  .stagger > .reveal:nth-child(3) { transition-delay: 0.14s; }
  .stagger > .reveal:nth-child(4) { transition-delay: 0.21s; }
  .stagger > .reveal:nth-child(5) { transition-delay: 0.28s; }
  .stagger > .reveal:nth-child(6) { transition-delay: 0.35s; }

  .hero .reveal:nth-child(2) { transition-delay: 0.05s; }
  .hero .reveal:nth-child(3) { transition-delay: 0.10s; }
  .hero .reveal:nth-child(4) { transition-delay: 0.15s; }
  .hero .reveal:nth-child(5) { transition-delay: 0.20s; }
  .hero .reveal:nth-child(6) { transition-delay: 0.25s; }
}


/* --- 10 Textseiten (kontakt / datenschutz / rechtliche Hinweise) --- */
.legal { padding-block: clamp(2.5rem, 7vw, 4.5rem) var(--section-gap); }
.legal__title {
  margin: var(--space-4) 0 var(--space-6);
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
}
.legal__body { max-width: var(--measure-text); }
.legal__body h2 {
  margin: var(--space-7) 0 var(--space-2);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.legal__body p, .legal__body li {
  color: var(--text-muted);
  line-height: var(--lh-lead);
}
.legal__body p + p { margin-top: var(--space-3); }
.legal__body ul { margin: var(--space-2) 0 0; padding-left: 1.1rem; list-style: disc; }
.legal__body li { margin-bottom: 0.3rem; }
.legal__body li::marker { color: var(--accent); }
.legal__body address { font-style: normal; }
.legal__body strong { color: var(--text); font-weight: 500; }
/* Links im Rechtstext brauchen eine erkennbare Auszeichnung */
.legal__body a {
  color: var(--accent);
  font-weight: 500;
}
.legal__body a:hover { background: var(--accent-soft); border-radius: 4px; }

/* Hinweis auf offene Angaben – getönte Fläche statt gestricheltem Rahmen */
.todo {
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  background: var(--accent-soft);
  font-size: var(--fs-sm);
}
.todo strong { color: var(--accent); }
.todo code {
  padding: 0.05em 0.35em;
  border-radius: 4px;
  background: var(--bg-elev);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.95em;
}

/* Wörtlich übernommener Fremdtext – als eigene Fläche abgesetzt, damit
   erkennbar bleibt, was Zitat ist und was eigener Text. */
.legal__quote {
  margin: var(--space-4) 0 0;
  padding: var(--space-4) var(--space-5);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--bg-tile);
}
.legal__quote footer {
  margin-top: var(--space-3);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.legal__quote footer::before { content: "— "; }

/* Zurück-Link als leise Fläche */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--space-8);
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  background: var(--bg-tile);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.back-link:hover { background: var(--bg-panel); color: var(--accent); }


/* --- 11 Zugänglichkeit & Druck -------------------------------- */

/* Bewegung reduzieren */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Höherer Kontrast gewünscht: Flächen deutlicher staffeln */
@media (prefers-contrast: more) {
  :root {
    --text-muted: #33373c;
    --bg-panel:   #eae6dd;
    --bg-tile:    #ece8e0;
  }
  :focus-visible { outline-width: 3px; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root {
    --text-muted: #dcdee2;
    --bg-panel:   #1b1e22;
    --bg-tile:    #23262b;
    --bg-elev:    #292d33;
  }
}

/* Windows-Kontrastmodus: dort ersetzt das System Flächen durch
   Konturen – hier sind Rahmen ausdrücklich erwünscht. */
@media (forced-colors: active) {
  .card, .tags li, .btn, .facts__row, .meta-row > li, .mailto {
    border: 1px solid CanvasText;
  }
  .label__num, .wordmark__mark { border: 1px solid CanvasText; }
  :focus-visible { outline-color: Highlight; }
  }

@media print {
  .site-header, .skip-link, .hero::before, .todo { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .section, .section--panel { padding-block: 1.5rem; background: none; break-inside: avoid; }
  .site-footer { background: none; }
  /* Im Druck tragen Flächen nicht – hier sind Konturen sinnvoll */
  .card, .facts__row, .meta-row > li { border: 1px solid #bbb; box-shadow: none; break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
}