/* ==========================================================================
   manuel-hartmann.de
   Handgeschrieben. Kein Framework, kein Build-Tool, kein CDN.

   Gestaltungsgedanke: "Signal im Dunkeln".
   Tiefer Graphit als Grund, ein einziger Gruenton, der sich wie eine
   Kontrollleuchte verhaelt. Tiefe entsteht durch weiche Lichtverlaeufe und
   feine Raster, nicht durch Kaesten und Rahmen. Verlaeufe setzen Akzente,
   sie tragen aber nie Information - was sie zeigen, steht auch im Text.

   1  Schriften     2  Tokens        3  Reset & Basis    4  Layout
   5  Licht/Textur  6  Kopf & Nav    7  Hero             8  Kennzahlen
   9  Karten       10  Prinzipien   11  Werdegang       12  Grafiken
   13 Formular     14  Fuss         15  Bewegung & Hilfsklassen
   ========================================================================== */

/* ── 1  Schriften ─────────────────────────────────────────────────────────
   Selbst gehostet. Keine Google-Fonts-CDN - das waere eine Uebermittlung der
   Besucher-IP an einen Dritten ohne Rechtsgrundlage. Variable Fonts: alle
   Schnitte aus je einer Datei. Lizenz SIL OFL 1.1 -> /assets/fonts/OFL.txt */

@font-face {
  font-family: 'Geist';
  src: url('/assets/fonts/Geist.6a98141a06.woff2') format('woff2');
  font-weight: 100 900; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/assets/fonts/GeistMono.e54fa48c73.woff2') format('woff2');
  font-weight: 100 900; font-display: swap; font-style: normal;
}

/* ── 2  Tokens ─────────────────────────────────────────────────────────────
   Zwei Farbschemata, EIN Satz Namen. Dunkel ist der Grund (:root), hell
   liegt als Attribut-Schema darueber (data-theme="light", gesetzt von
   theme.js vor dem ersten Paint). Alles, was Farbe traegt, greift ueber
   diese Namen — auch die Grafiken in den Templates (--svg-*). Eine Farbe,
   die nur in einem Schema definiert ist, ist ein Fehler. */

:root {
  color-scheme: dark;

  --bg:          #0A0B0D;
  --bg-2:        #0E1013;
  --surface:     #131519;
  --surface-2:   #171A1F;
  --border:      #22262E;
  --border-hi:   #2E333D;
  --border-feld: #60646B;   /* Bedienelemente: 3,3:1 - WCAG 1.4.11 */
  --border-feld-hi: #7C8089;

  /* Nachgerechnet auf --bg / --surface:
     text 17,9:1 / 16,5:1 · muted 7,5:1 / 6,9:1 · dim 4,9:1 / 4,6:1 */
  --text:   #F2F3F5;
  --muted:  #9AA0A8;
  --dim:    #7C7F85;

  /* Akzent: verfeinerte Variante des Gruens aus dem eigenen ERP. */
  --accent:      #7BC043;
  --accent-hell: #A3E06B;
  --accent-dim:  #4E7F24;
  --accent-rgb:  123,192,67;     /* fuer rgba(var(--accent-rgb), .x) */
  --teal:        #3FA9A0;
  --teal-rgb:    63,169,160;
  --gold:        #E0B341;
  --fehler:      #FF9382;
  --auf-akzent:  #080A05;        /* Text AUF Akzentflaechen (Buttons, Auswahl) */

  --saum:   rgba(255,255,255,.07);   /* Lichtsaum an Kachel-Oberkanten */
  --raster: rgba(255,255,255,.05);   /* Punktraster der Flaeche */
  --glow-1: .11; --glow-2: .08; --glow-3: .05;   /* Deckkraft der Lichtquellen */

  --grad-akzent: linear-gradient(100deg, #A3E06B 0%, #7BC043 45%, #3FA9A0 100%);
  --grad-linie:  linear-gradient(90deg, transparent, var(--border-hi) 18%, var(--border-hi) 82%, transparent);
  --grad-flaeche: linear-gradient(165deg, #16191E 0%, #101317 100%);
  --grad-zahl:   linear-gradient(180deg, #FFFFFF 0%, #C6CBD2 100%);

  /* Grafiken in den Templates (inline SVG) — gleiche Rollen wie im Text. */
  --svg-text:  var(--text);
  --svg-muted: var(--muted);
  --svg-dim:   var(--dim);
  --svg-line:  var(--border);

  --sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-display: clamp(2.3rem, 1.1rem + 4.6vw, 4.6rem);
  --fs-h2:      clamp(1.6rem, 1.15rem + 1.8vw, 2.6rem);
  --fs-h3:      clamp(1.1rem, 1rem + .5vw, 1.35rem);
  --fs-body:    clamp(1rem, .96rem + .2vw, 1.0625rem);
  --fs-small:   .875rem;
  --fs-micro:   .75rem;

  --measure:   62ch;
  --wrap:      1180px;
  --gutter:    clamp(1.25rem, .7rem + 2.2vw, 2.75rem);
  --section-y: clamp(4.5rem, 2.5rem + 7vw, 9rem);

  --radius:    14px;
  --radius-sm: 8px;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur:  260ms;
}

/* Helles Schema. Nachgerechnet auf --bg #F6F7F9 / --surface #FFFFFF:
   text 16,1:1 / 17,4:1 · muted 7,6:1 / 8,2:1 · dim 4,9:1 / 5,3:1 ·
   accent (als Text) 5,1:1 / 5,5:1 · border-feld 3,1:1 (WCAG 1.4.11). */
:root[data-theme="light"] {
  color-scheme: light;

  --bg:          #F6F7F9;
  --bg-2:        #EEF0F3;
  --surface:     #FFFFFF;
  --surface-2:   #F3F5F7;
  --border:      #DCE0E6;
  --border-hi:   #C7CDD5;
  --border-feld: #8A9099;
  --border-feld-hi: #6B7380;

  --text:   #14171C;
  --muted:  #4A5260;
  --dim:    #646B78;

  --accent:      #3F7A18;
  --accent-hell: #4E9420;
  --accent-dim:  #2E5A10;
  --accent-rgb:  63,122,24;
  --teal:        #1F7A73;
  --teal-rgb:    31,122,115;
  --gold:        #8F6400;
  --fehler:      #B3261E;
  --auf-akzent:  #FFFFFF;

  --saum:   rgba(0,0,0,.05);
  --raster: rgba(0,0,0,.06);
  --glow-1: .09; --glow-2: .06; --glow-3: .04;

  --grad-akzent: linear-gradient(100deg, #4E9420 0%, #3F7A18 45%, #1F7A73 100%);
  --grad-flaeche: linear-gradient(165deg, #FFFFFF 0%, #F3F5F7 100%);
  --grad-zahl:   linear-gradient(180deg, #14171C 0%, #3A414D 100%);
}

/* ── 3  Reset & Basis ────────────────────────────────────────────────────── */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;          /* der Seitenkoerper scrollt nie seitlich */
  position: relative;
}

h1, h2, h3, h4 {
  margin: 0; line-height: 1.1; font-weight: 600;
  letter-spacing: -.025em; text-wrap: balance;
}
h1 { font-size: var(--fs-display); font-weight: 500; letter-spacing: -.038em; line-height: 1.03; }
h2 { font-size: var(--fs-h2); letter-spacing: -.03em; }
h3 { font-size: var(--fs-h3); letter-spacing: -.015em; }

p { margin: 0 0 1.1em; max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--accent-hell); }

/* ── Unterstreichung: nur wo sie gebraucht wird ───────────────────────────
   Der Akzentton liegt gegenueber dem Fliesstext nur bei 1,2-2,0:1. WCAG 1.4.1
   verlangt 3:1, wenn ausschliesslich Farbe einen Link kennzeichnet — bei
   Links MITTEN IM TEXT bleibt die Unterstreichung deshalb, sonst waeren sie
   fuer Menschen mit Farbsehschwaeche nicht mehr als Link erkennbar.

   FREISTEHENDE Links sind ein anderer Fall: sie stehen allein in ihrer Zeile,
   es gibt keinen Fliesstext, mit dem man sie verwechseln koennte. Dort ist die
   Unterstreichung nur Unruhe. Beim Ueberfahren und bei Tastaturfokus kommt sie
   zurueck — damit bleibt ein nicht-farbliches Signal erhalten. */
.hero__links a,
.taetigkeit__mehr a,
.kontaktwege a,
p > a:only-child {
  text-decoration: none;
}
.hero__links a:hover,        .hero__links a:focus-visible,
.taetigkeit__mehr a:hover,   .taetigkeit__mehr a:focus-visible,
.kontaktwege a:hover,        .kontaktwege a:focus-visible,
p > a:only-child:hover,      p > a:only-child:focus-visible {
  text-decoration: underline;
}

strong { font-weight: 600; color: var(--text); }
em { font-style: normal; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; max-width: var(--measure); }
li { margin-bottom: .4em; }
li::marker { color: var(--dim); }

img, svg { max-width: 100%; height: auto; display: block; }
code, kbd { font-family: var(--mono); font-size: .9em; }

/* Deutsche Silbentrennung: bei 320 px (400 % Zoom, WCAG 1.4.10) sprengt
   "Warenwirtschaftssystem" jede Ueberschriftenzeile. */
body { hyphens: manual; }
@media (max-width: 560px) {
  h1, h2, h3, h4 { hyphens: auto; overflow-wrap: anywhere; }
  p, li, dd, dt   { hyphens: auto; }
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
:focus:not(:focus-visible) { outline: none; }
::selection { background: var(--accent); color: var(--auf-akzent); }

/* ── 4  Layout ───────────────────────────────────────────────────────────── */

.wrap {
  width: 100%; max-width: var(--wrap);
  margin-inline: auto; padding-inline: var(--gutter);
  position: relative; z-index: 1;
}

.section { padding-block: var(--section-y); position: relative; }
.section + .section { padding-top: 0; }

/* Trennlinie als Verlauf, der an den Raendern ausblendet - eine durchgezogene
   Linie von Kante zu Kante wirkt wie ein Kasten, das hier wie ein Uebergang. */
.section--line { padding-top: var(--section-y); }
/* Direkt hinter dem Hero (der eigenen Abstand nach unten hat) waere der
   volle Sektionsabstand doppelt — das Kennzahlenband sitzt deshalb dicht. */
.section--dicht { padding-top: 0; }
.section--line::before {
  content: ""; position: absolute; inset-inline: var(--gutter); top: 0; height: 1px;
  background: var(--grad-linie);
}

.section__label {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 1.4rem;
  /* Als umrandete Pille (05.09.2026): das Label tritt als Marke der Sektion
     auf, nicht als Fliesstext — gleiche Form wie die Chips der Projekte. */
  padding: .32rem .75rem .32rem .65rem;
  border: 1px solid var(--border); border-radius: 999px;
  background: color-mix(in oklab, var(--surface) 70%, transparent);
}
/* Kleine Kontrollleuchte vor dem Sektionslabel. Reine Dekoration -
   die Information steht im Text daneben. */
.section__label::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px var(--accent);
  flex: 0 0 auto;
}

.section__intro {
  color: var(--muted);
  font-size: clamp(1.02rem, .96rem + .4vw, 1.25rem);
  margin-top: 1.1rem; max-width: 56ch; line-height: 1.6;
}

.skip {
  position: absolute; left: -9999px; z-index: 100;
  background: var(--accent); color: var(--auf-akzent);
  padding: .7rem 1.1rem; border-radius: 0 0 var(--radius-sm) 0; font-weight: 600;
}
.skip:focus { left: 0; top: 0; }

/* ── 5  Licht & Textur ───────────────────────────────────────────────────── */

/* Zwei weiche Lichtquellen und ein sehr feines Punktraster. Zusammen nehmen
   sie der Flaeche das Pappige, ohne dass etwas "gestaltet" aussieht.
   Beides liegt hinter dem Inhalt und ist fuer Screenreader unsichtbar. */
body::before {
  content: ""; position: fixed; inset: -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 78% 8%,   rgba(var(--accent-rgb), var(--glow-1)), transparent 62%),
    radial-gradient(48rem 34rem at 8%  28%,  rgba(var(--teal-rgb), var(--glow-2)), transparent 60%),
    radial-gradient(70rem 50rem at 50% 96%,  rgba(var(--accent-rgb), var(--glow-3)), transparent 65%);
  /* Sehr langsame Drift. 48 Sekunden ist bewusst so lang, dass man die
     Bewegung nicht sieht, sondern nur merkt, dass die Flaeche lebt. */
  animation: drift 48s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-2.5%, 1.8%, 0) scale(1.06); }
}

/* Punktraster + Koernung. Die Koernung nimmt dem Verlauf das Digitale -
   ohne sie sieht jede dunkle Flaeche nach Bildschirmschoner aus. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(var(--raster) 1px, transparent 1px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
  background-size: 34px 34px, 140px 140px;
  mask-image: radial-gradient(130% 100% at 50% 0%, #000 12%, transparent 72%);
  opacity: .55;
}

/* Fortschrittsbalken am oberen Rand - rein dekorativ, deshalb aria-hidden
   im Markup. Laeuft ohne JavaScript ueber eine scrollgebundene Animation. */
.fortschritt {
  position: fixed; inset-inline: 0; top: 0; height: 2px; z-index: 60;
  background: var(--grad-akzent);
  transform-origin: 0 50%; transform: scaleX(0);
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .fortschritt {
    animation: fortschritt linear;
    animation-timeline: scroll(root block);
  }
  @keyframes fortschritt { to { transform: scaleX(1); } }
}

/* ── 6  Kopf & Navigation ────────────────────────────────────────────────── */

.kopf {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
:root[data-scrolled="1"] .kopf {
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  backdrop-filter: blur(16px) saturate(1.5);
  border-bottom-color: var(--border);
}

.kopf__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 4.75rem;
}

.marke { text-decoration: none; color: var(--text); display: block; line-height: 1.2; }
.marke__name { font-weight: 600; letter-spacing: -.02em; font-size: 1.0625rem; }
.marke__rolle {
  display: block; font-family: var(--mono); font-size: .625rem;
  letter-spacing: .17em; text-transform: uppercase; color: var(--dim);
  margin-top: .2rem;
}

.nav { display: flex; gap: 1.85rem; align-items: center; margin-left: auto; }
.kopf__aktionen { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; }

/* Farbschema-Umschalter. Zwei Symbole im Markup, das Stylesheet zeigt das
   jeweils passende — kein Icon-Set, kein Nachladen. Ohne JS gibt es nichts
   umzuschalten, dann ist der Knopf weg. */
.theme-toggle {
  background: none; border: 1px solid var(--border-feld); color: var(--muted);
  border-radius: 999px; width: 2.3rem; height: 2.3rem; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.theme-toggle:hover { color: var(--text); border-color: var(--border-feld-hi); }
.theme-toggle svg { width: 1.05rem; height: 1.05rem; display: block; }
.theme-toggle__sonne { display: none; }
:root[data-theme="light"] .theme-toggle__sonne { display: block; }
:root[data-theme="light"] .theme-toggle__mond  { display: none; }
.kein-js .theme-toggle { display: none; }
.nav a {
  color: var(--muted); text-decoration: none; font-size: var(--fs-small);
  padding: .35rem 0; position: relative; transition: color 150ms var(--ease);
}
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] { color: var(--text); }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--grad-akzent); border-radius: 2px;
}

.nav-toggle, .nav__schliessen {
  background: none; border: 1px solid var(--border-feld); color: var(--text);
  border-radius: var(--radius-sm); padding: .55rem .85rem;
  font: inherit; font-size: var(--fs-small); cursor: pointer;
}
/* WICHTIG: beide Knoepfe existieren nur fuer die schmale Ansicht.
   Ohne dieses display:none stand der Schliessen-Knopf mitten in der
   Desktop-Navigation. */
.nav-toggle, .nav__schliessen { display: none; }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 0; z-index: 60;
    background: var(--bg);
    flex-direction: column; align-items: stretch; justify-content: center;
    gap: 0; padding: var(--gutter); display: none;
  }
  .nav[data-offen="1"] { display: flex; }
  .nav a {
    font-size: 1.3rem; padding: 1.05rem 0; color: var(--text);
    border-bottom: 1px solid var(--border); min-height: 48px;
  }
  .nav a[aria-current="page"] { color: var(--accent); }
  .nav a[aria-current="page"]::after { display: none; }
  .nav[data-offen="1"] .nav__schliessen {
    display: block; position: absolute; top: 1.45rem; right: var(--gutter);
  }
}

/* Ohne JavaScript: kein Umschalter, Navigation bricht einfach um. */
.kein-js .nav-toggle, .kein-js .nav__schliessen { display: none; }
.kein-js .nav {
  position: static; display: flex; flex-direction: row; flex-wrap: wrap;
  gap: 1rem; padding: 0;
}
.kein-js .nav a { font-size: var(--fs-small); padding: .3rem 0; border-bottom: 0; min-height: 0; }

/* ── 7  Hero ─────────────────────────────────────────────────────────────── */

.hero {
  padding-block: clamp(4rem, 2rem + 10vw, 9rem) clamp(4rem, 2rem + 6vw, 7rem);
  position: relative;
}
/* Die Hauptzeile ist kurz und der Umbruch steht im Markup — 22ch verhindert
   nur, dass "Automatisieren," bei sehr grossen Fenstern unnoetig umbricht. */
.hero h1 { max-width: 22ch; position: relative; }

/* ── Kreismotiv rechts ────────────────────────────────────────────────────
   Drei Ringe, die unterschiedlich schnell und teils gegenlaeufig drehen.
   Sehr niedrig deckend: es soll den Blick nicht holen, sondern den leeren
   rechten Bereich fuellen und dem Text Tiefe geben. */
.hero__grafik {
  position: absolute; z-index: 0; pointer-events: none;
  right: clamp(-9rem, -14vw, -3rem);
  top: 50%; translate: 0 -50%;
  width: clamp(24rem, 42vw, 40rem); aspect-ratio: 1;
  opacity: .55;
  mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
}
.hero__grafik svg { width: 100%; height: 100%; }
.hero__ring { transform-origin: 260px 260px; }
.hero__ring--1 { animation: ringdreh 54s linear infinite; }
.hero__ring--2 { animation: ringdreh 38s linear infinite reverse; }
.hero__ring--3 { animation: ringdreh 26s linear infinite; }
@keyframes ringdreh { to { transform: rotate(360deg); } }

/* Unter 900 px stoert das Motiv mehr, als es traegt. */
@media (max-width: 900px) { .hero__grafik { display: none; } }

/* ── Einlauf beim Laden ───────────────────────────────────────────────────
   Gestaffelt, kurz, einmalig. "backwards" sorgt dafuer, dass die Elemente
   waehrend der Verzoegerung schon im Startzustand stehen — ohne das blitzen
   sie kurz auf, bevor die Animation greift. */
@keyframes heroauf {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
/* Ohne Deckkraft — fuer die beiden grossen Textbloecke. Ein Element mit
   opacity: 0 zaehlt nicht als LCP-Kandidat, die Ueberschrift haette den
   groessten Inhaltsbaustein also um ihre Verzoegerung nach hinten geschoben.
   Beide Bloecke umstellen, nicht nur einen: welcher der groessere ist, haengt
   an der Fensterbreite. */
@keyframes heroauf_still {
  from { transform: translateY(18px); }
  to   { transform: none; }
}
@keyframes herografik {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: .55; transform: none; }
}

.hero__rolle  { animation: heroauf 700ms var(--ease)  60ms backwards; }
.hero h1      { animation: heroauf_still 800ms var(--ease) 140ms backwards; }
.hero__sub    { animation: heroauf_still 800ms var(--ease) 320ms backwards; }
.hero__links  { animation: heroauf 800ms var(--ease) 440ms backwards; }
.hero__weiter { animation: heroauf 800ms var(--ease) 620ms backwards; }
.hero__grafik { animation: herografik 1400ms var(--ease) 200ms backwards; }

/* ── Scroll-Hinweis ───────────────────────────────────────────────────── */
.hero__weiter {
  display: inline-flex; align-items: center; gap: .7rem;
  margin-top: clamp(3rem, 2rem + 4vw, 5rem);
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--dim); text-decoration: none;
  position: relative; z-index: 1;
  transition: color var(--dur) var(--ease);
}
.hero__weiter:hover { color: var(--text); }
.hero__weiter-pfeil {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--border-hi); color: var(--accent);
  animation: tippen 2.6s ease-in-out infinite;
}
@keyframes tippen {
  0%, 100% { transform: translateY(0);   }
  50%      { transform: translateY(3px); }
}
.hero__weiter:hover .hero__weiter-pfeil { border-color: var(--accent); }
.hero h1 .zeile-2 { display: block; color: var(--muted); }

/* Das Akzentwort mit Verlauf statt Vollton - der einzige Ort, an dem der
   Verlauf auf Schrift liegt. Faellt der Verlauf aus, bleibt die Grundfarbe. */
.hero h1 em {
  color: var(--accent);
  background: var(--grad-akzent);
}

.hero__sub {
  margin-top: clamp(1.6rem, 1rem + 1.6vw, 2.4rem);
  font-size: clamp(1.05rem, .98rem + .5vw, 1.3rem);
  color: var(--muted); max-width: 50ch;
}

.hero__links { display: flex; flex-wrap: wrap; gap: 1.75rem; margin-top: 2.4rem; }
.hero__links a { font-size: var(--fs-small); }

/* ── Grundsaetze ──────────────────────────────────────────────────────────
   Vier Kurzregeln als Liste mit Haken — im Hero der Startseite und unter dem
   Einstieg auf /ueber. Der Haken ist zwei Kanten eines gedrehten Kastens,
   kein Icon: nichts zu laden, faerbt sich ueber --accent mit. */
.grundsaetze {
  list-style: none; padding: 0; margin: 2rem 0 0;
  display: grid; gap: .6rem; max-width: 46ch;
}
.grundsaetze li {
  position: relative; padding-left: 1.7rem;
  color: var(--text); font-size: var(--fs-body); line-height: 1.5;
}
.grundsaetze li::before {
  content: ""; position: absolute; left: .15rem; top: .5em;
  width: .6rem; height: .32rem;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
/* Im Hero laeuft die Liste mit den Links ein — gleiche Staffel, nur Position
   und Deckkraft, nicht auf h1/Subline (LCP). */
.hero .grundsaetze { animation: heroauf 800ms var(--ease) 400ms backwards; }
.hero__links       { animation-delay: 520ms; }

/* Augenbraue ueber der Hauptzeile - ordnet ein, bevor der Claim kommt. */
.hero__rolle {
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--dim); margin: 0 0 1.5rem;
  display: inline-flex; align-items: center; gap: .6rem;

  /* Die allgemeine Absatzregel setzt max-width: 62ch. Bei 12px Monospace sind
     das nur ~450px — deshalb brach die Zeile viel frueher um als noetig.
     Hier ist die Breite kein Lesbarkeitsthema: es ist eine Kopfzeile, kein
     Fliesstext. */
  max-width: none;
  white-space: nowrap;

  /* Statt eines harten Umbruchpunkts schrumpfen Schriftgrad UND Laufweite mit.
     Die Laufweite ist der groessere Hebel: bei 55 Zeichen kostet .2em mehr
     Breite als der Schriftgrad selbst. So bleibt die Zeile bis hinunter zu
     kleinen Fenstern einzeilig, ohne dass sie winzig wird. */
  font-size:      clamp(.62rem, .5rem + .32vw, .75rem);
  letter-spacing: clamp(.09em, .02em + .3vw, .2em);
}

/* Unter ~520px passt sie beim besten Willen nicht mehr in eine Zeile.
   Dort darf sie umbrechen — abgeschnittener Text waere schlechter. */
@media (max-width: 520px) {
  .hero__rolle { white-space: normal; }
}
.hero__rolle::before {
  content: ""; width: 28px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
}

/* Werkzeugkasten: Schlagworte als Chips. Kompakt genug, dass viel Wissen
   auf wenig Flaeche passt - und ohne dass ein Satz daraus wird. */
.stack {
  display: grid; gap: clamp(1.75rem, 1rem + 2.5vw, 3rem);
  margin-top: 3rem;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.stack__gruppe h3 {
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim); font-weight: 500; margin-bottom: 1.1rem;
}
.stack__liste {
  list-style: none; padding: 0; margin: 0; max-width: none;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.stack__liste li {
  margin: 0; padding: .42rem .85rem;
  font-size: var(--fs-small); line-height: 1.3; color: var(--muted);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px;
  transition: border-color 180ms var(--ease), color 180ms var(--ease);
}
.stack__liste li:hover { border-color: var(--border-hi); color: var(--text); }

/* ── 8  Kennzahlen ───────────────────────────────────────────────────────── */

/* Am Seitenraster ausgerichtet, nicht randlos. Randlos stand die erste Zahl
   sonst ausserhalb der Textspalte im Nichts. */
.zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 1px;
  margin: 0; padding: 0; list-style: none; max-width: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--border);
  overflow: hidden;
  position: relative;
}

.zahl {
  background: var(--grad-flaeche);
  padding: 1.9rem clamp(1.2rem, .9rem + .7vw, 1.8rem);
  position: relative;
  /* Raster statt Flex: so beginnen Wert, Label und Zusatz in JEDER Zelle auf
     derselben Hoehe. Vorher rutschte das Label nach unten, sobald ein Wert
     zweizeilig wurde — die Zeile fiel dann sichtbar aus der Flucht. */
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: .45rem;
  align-content: start;
}
/* Feiner Lichtsaum an der Oberkante jeder Zelle - macht die Kacheln
   plastisch, ohne dass ein Rahmen noetig waere. */
.zahl::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--saum) 50%, transparent);
}

.zahl__wert {
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(1.7rem, 1.25rem + 1.5vw, 2.5rem);
  letter-spacing: -.04em; font-variant-numeric: tabular-nums;
  margin: 0; line-height: 1.05;
  /* Ein Wert bleibt einzeilig. Bricht er um, verschiebt sich alles darunter. */
  white-space: nowrap;
  background: var(--grad-zahl);
}
.zahl__label {
  font-size: var(--fs-small); color: var(--text); margin: 0;
  font-weight: 500; letter-spacing: -.005em;
}
.zahl__zusatz {
  font-size: var(--fs-micro); color: var(--dim); margin: 0;
  line-height: 1.5; max-width: 26ch;
}

/* Feiner Akzentstrich unter dem Wert, der beim Ueberfahren der Zelle
   von links einlaeuft. Reine Zugabe — traegt keine Information. */
.zahl::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px;
  width: 0; background: var(--grad-akzent);
  transition: width 420ms var(--ease);
}
.zahl:hover::after { width: 100%; }
.zahl__bezug  { font-size: var(--fs-micro); color: var(--dim); line-height: 1.55; margin: .35rem 0 0; max-width: 46ch; }
/* Projektseiten zeigen sechs Kacheln: mit 200 px Mindestbreite blieb die
   sechste allein in einer zweiten Reihe. 170 px lassen sechs in eine Reihe
   passen; darunter bricht es in 3+3, nicht in 5+1. */
.zahlen-sechs .zahlen { grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); }
.zahlen-sechs .zahl   { padding-inline: clamp(1rem, .8rem + .5vw, 1.4rem); }
.zahl__stand  { font-family: var(--mono); font-size: var(--fs-micro); color: var(--dim); }

/* Vorher/Nachher. Der Pfeil ist Dekoration und wird uebersprungen -
   die Zahlen selbst nicht, sie sind die Aussage. */
.delta { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
.delta__vorher {
  font-family: var(--mono); color: var(--dim);
  font-size: clamp(1rem, .9rem + .4vw, 1.15rem);
  text-decoration: line-through; text-decoration-color: var(--border-hi);
  -webkit-text-fill-color: currentColor;
}
.delta__pfeil { color: var(--dim); font-size: .9rem; -webkit-text-fill-color: currentColor; }
.delta__nachher {
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(1.55rem, 1.2rem + 1.3vw, 2.15rem);
  letter-spacing: -.035em; font-variant-numeric: tabular-nums;
  background: var(--grad-akzent);
}

/* Taetigkeiten. Kein Kennzahlenband: gezaehlte Ergebnisse beschreiben den
   Betrieb, nicht die Person. Hier steht, was tatsaechlich getan wird —
   Ueberschrift plus ein Satz, mehr nicht. */
.taetigkeiten {
  list-style: none; padding: 0; margin: 3rem 0 0; max-width: none;
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
}
.taetigkeit {
  position: relative; isolation: isolate; margin: 0;
  background: var(--grad-flaeche);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: clamp(1.5rem, 1.1rem + 1vw, 2.1rem);
  display: flex; flex-direction: column; gap: .7rem;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.taetigkeit::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1;
  background: linear-gradient(150deg, rgba(var(--accent-rgb),.5), rgba(var(--teal-rgb),.25) 40%, transparent 70%);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.taetigkeit:hover { transform: translateY(-4px); border-color: transparent; }
.taetigkeit:hover::after { opacity: 1; }
.taetigkeit:focus-within { border-color: var(--accent); }

.taetigkeit h3 { margin: 0; font-size: var(--fs-h3); }
.taetigkeit p  { margin: 0; color: var(--muted); font-size: var(--fs-small); }
.taetigkeit__mehr { margin-top: auto !important; padding-top: .6rem; }
.taetigkeit__mehr a { font-size: var(--fs-small); }

/* Die einzige Zahl, die bleibt — sie gehoert zur Taetigkeit, nicht zum Betrieb. */
.taetigkeit__zahl {
  font-family: var(--mono); font-weight: 500; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  background: var(--grad-akzent);
  margin-right: .15rem;
}

/* ── 9  Karten ───────────────────────────────────────────────────────────── */

.karten {
  display: grid; gap: 1.25rem; margin-top: 3rem;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
}

.karte {
  position: relative; isolation: isolate;
  background: var(--grad-flaeche);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 1.1rem + 1vw, 2.1rem);
  display: flex; flex-direction: column; gap: .8rem;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* Verlaufskante, die beim Zeigen aufleuchtet. Liegt als Pseudoelement
   darueber und faengt keine Klicks ab. */
.karte::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1;
  background: linear-gradient(150deg, rgba(var(--accent-rgb),.5), rgba(var(--teal-rgb),.25) 40%, transparent 70%);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.karte:hover { transform: translateY(-4px); border-color: transparent; }
.karte:hover::after { opacity: 1; }
.karte:focus-within { border-color: var(--accent); }

/* Lichtkegel, der dem Zeiger folgt. app.js schreibt nur zwei Zahlen in
   --mx/--my; gerechnet wird ausschliesslich in der Grafikkarte. */
.karte::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(16rem 16rem at var(--mx, 50%) var(--my, 0%),
              rgba(var(--accent-rgb),.13), transparent 60%);
  opacity: 0; transition: opacity var(--dur) var(--ease); pointer-events: none;
}
.karte:hover::before { opacity: 1; }

.karte h3 { margin: 0; }
.karte p  { color: var(--muted); font-size: var(--fs-small); margin: 0; }
.karte__zahl {
  font-family: var(--mono); font-size: var(--fs-small);
  font-variant-numeric: tabular-nums; color: var(--accent);
  margin-top: auto; padding-top: .9rem; position: relative;
}
.karte__zahl::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, var(--border-hi), transparent);
}
.karte a { font-size: var(--fs-small); }

.spalten { display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem); margin-top: 2.5rem; }
@media (min-width: 900px) { .spalten { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }

/* ── 10  Prinzipien ──────────────────────────────────────────────────────── */

.prinzipien { list-style: none; padding: 0; margin: 3rem 0 0; max-width: none; }
.prinzip { padding-block: clamp(1.7rem, 1.2rem + 1vw, 2.5rem); display: grid; gap: .9rem; position: relative; }
.prinzip::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px;
  background: var(--grad-linie);
}
@media (min-width: 860px) {
  .prinzip { grid-template-columns: 5.5rem minmax(0,1fr); column-gap: 2.25rem; }
  /* Ziffer in Spalte 1, alles andere fest in Spalte 2.
     Ein "grid-row: span N" auf der Ziffer erzeugte leere Zeilen, sobald ein
     Eintrag weniger Absaetze hat als der Span breit ist - daher die grossen
     Luecken zwischen den Eintraegen. */
  .prinzip__nr { grid-column: 1; grid-row: 1; }
  .prinzip > :not(.prinzip__nr) { grid-column: 2; }
}

.prinzip h3 { margin: 0; }
.prinzip p  { margin: 0; color: var(--muted); }
.prinzip__beleg {
  border-left: 2px solid; border-image: linear-gradient(180deg, var(--accent), transparent) 1;
  padding-left: 1.05rem; font-size: var(--fs-small); color: var(--dim); max-width: var(--measure);
}
.prinzip__beleg strong { color: var(--muted); font-weight: 500; }

/* ── 11  Werdegang ───────────────────────────────────────────────────────── */

.phasen { list-style: none; padding: 0; margin: 3rem 0 0; max-width: none; }
.phase { padding-block: clamp(1.6rem, 1.2rem + 1vw, 2.3rem); display: grid; gap: .8rem; position: relative; }
.phase::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px;
  background: var(--grad-linie);
}
@media (min-width: 860px) {
  .phase { grid-template-columns: 5.5rem minmax(0,1fr); column-gap: 2.25rem; }
  .phase__nr { grid-column: 1; grid-row: 1; }
  .phase > :not(.phase__nr) { grid-column: 2; }
}
/* ── Zeitachse für Phasen und Prinzipien ──────────────────────────────────
   Die Ziffern standen vorher klein und ohne Bezug in einer leeren Spalte.
   Jetzt tragen sie eine Linie mit Knoten: aus einer Aufzählung wird eine
   Abfolge — und genau das sind Phasen ja auch. */

.phasen, .prinzipien { position: relative; }

/* Die Linie läuft nur zwischen erstem und letztem Knoten und blendet an
   beiden Enden aus. Durchgezogen sähe sie nach Rahmen aus. */
@media (min-width: 860px) {
  .phasen::before, .prinzipien::before {
    content: ""; position: absolute; left: .5rem; top: 3.6rem; bottom: 3.6rem;
    width: 1px;
    background: linear-gradient(180deg,
      transparent, var(--border-hi) 7%, var(--border-hi) 93%, transparent);
  }
}

.phase__nr, .prinzip__nr {
  position: relative;
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(1.4rem, 1.15rem + .85vw, 1.95rem);
  line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  background: var(--grad-akzent);
  color: var(--accent);
}

@media (min-width: 860px) {
  .phase__nr, .prinzip__nr { padding-left: 1.9rem; padding-top: .2rem; }

  /* Knoten auf der Linie. Der weiche Ring aussen herum lässt ihn leuchten,
     ohne dass ein zweites Element nötig wäre. */
  .phase__nr::before, .prinzip__nr::before {
    content: ""; position: absolute; left: .19rem; top: .5rem;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.10), 0 0 14px rgba(var(--accent-rgb),.55);
    transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .phase:hover .phase__nr::before,
  .prinzip:hover .prinzip__nr::before {
    transform: scale(1.28);
    box-shadow: 0 0 0 6px rgba(var(--accent-rgb),.16), 0 0 22px rgba(var(--accent-rgb),.85);
  }
}

/* Schmale Ansicht: kein Platz für eine Achse — Ziffer und Knoten stehen
   nebeneinander über der Überschrift. */
@media (max-width: 859px) {
  .phase__nr, .prinzip__nr {
    display: inline-flex; align-items: center; gap: .6rem; font-size: 1.2rem;
  }
  .phase__nr::before, .prinzip__nr::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb),.6);
    flex: 0 0 auto;
  }
}
.phase h3 { margin: 0; }
.phase p  { margin: 0; color: var(--muted); }

.phase__felder { display: grid; gap: 1.1rem; margin-top: .5rem; }
@media (min-width: 1000px) { .phase__felder { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.phase__feld dt {
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-bottom: .35rem;
}
.phase__feld dd { margin: 0; font-size: var(--fs-small); color: var(--muted); }

/* ── 12  Grafiken ────────────────────────────────────────────────────────── */

.grafik {
  margin: 2.5rem 0 0; padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  background: var(--grad-flaeche);
  border: 1px solid var(--border); border-radius: var(--radius);
  position: relative; overflow: hidden;
}
.grafik::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(30rem 20rem at 85% 0%, rgba(var(--accent-rgb),.10), transparent 65%);
}
.grafik svg { width: 100%; height: auto; position: relative; }
.grafik figcaption {
  margin-top: 1.25rem; font-size: var(--fs-micro); color: var(--dim);
  font-family: var(--mono); position: relative;
}

/* Systembilder (Nachbauten) — breite Inhalte scrollen im eigenen Rahmen. */
.bild {
  margin: 2.5rem 0 0; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface); overflow: hidden;
}
.bild__rahmen { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bild__inhalt { min-width: 680px; }
.bild figcaption {
  border-top: 1px solid var(--border); padding: .8rem 1.15rem;
  font-family: var(--mono); font-size: var(--fs-micro); color: var(--dim);
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between;
}

/* ── 13  Formular ────────────────────────────────────────────────────────── */

.form { display: grid; gap: 1.4rem; max-width: 44rem; margin-top: 2.5rem; }
.feld { display: grid; gap: .45rem; }
.feld label { font-size: var(--fs-small); color: var(--muted); }
.feld .pflicht { color: var(--accent); }

input[type="text"], input[type="email"], textarea {
  width: 100%; background: var(--surface); color: var(--text);
  border: 1px solid var(--border-feld); border-radius: var(--radius-sm);
  font: inherit; padding: .85rem 1rem;
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
input:hover, textarea:hover { border-color: var(--border-feld-hi); }
input:focus, textarea:focus {
  border-color: var(--accent); outline-offset: 1px;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.12);
}
textarea { min-height: 11rem; resize: vertical; line-height: 1.6; }
::placeholder { color: var(--dim); }

.feld__fehler { font-size: var(--fs-small); color: var(--fehler); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--fehler); }

/* Honigtopf: nicht display:none - manche Ausfueller ignorieren das. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.btn {
  justify-self: start; border: 0; cursor: pointer; font: inherit; font-weight: 600;
  color: var(--auf-akzent); background: var(--grad-akzent);
  border-radius: var(--radius-sm); padding: .9rem 1.7rem;
  transition: filter 150ms var(--ease), transform 150ms var(--ease);
}
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

.form__hinweis { font-size: var(--fs-small); color: var(--dim); max-width: var(--measure); margin: 0; }

.meldung {
  border: 1px solid var(--border-hi); border-left: 3px solid var(--accent);
  background: var(--surface); border-radius: var(--radius-sm);
  padding: 1.05rem 1.2rem; margin-bottom: 2rem;
}
.meldung--fehler { border-left-color: var(--fehler); }
.meldung p { margin: 0; font-size: var(--fs-small); }

.kontaktwege { display: grid; gap: .55rem; margin: 2rem 0 0; }
.kontaktwege dt {
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
}
.kontaktwege dd { margin: 0 0 .85rem; }
.kontaktwege a { font-size: 1.05rem; }

/* ── 14  Fuss ────────────────────────────────────────────────────────────
   Spalten mit hochkant gestellten Labels und einem rotierenden Kreis-Siegel.
   Die Labels stehen senkrecht, weil sie dadurch aus dem Lesefluss treten und
   die Spalten gliedern, ohne Platz in der Breite zu kosten. */

.fuss { margin-top: var(--section-y); padding-block: 4rem 2rem; position: relative; }
.fuss::before {
  content: ""; position: absolute; inset-inline: var(--gutter); top: 0; height: 1px;
  background: var(--grad-linie);
}

.fuss__raster {
  display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  align-items: start;
}

.fuss__block { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; }

/* Hochkant, von unten nach oben gelesen. Der kleine Strich darunter ist der
   ruhige Ersatz fuer die "xx"-Marke aus der Vorlage. */
.fuss__label {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--mono); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--dim); margin: 0;
  display: flex; align-items: center; gap: .8rem;
  justify-self: start;
}
.fuss__label::after {
  content: ""; width: 1px; height: 22px;
  background: linear-gradient(180deg, var(--accent), transparent);
}

.fuss__inhalt p { margin: 0 0 .55rem; font-size: var(--fs-small); color: var(--muted); }
.fuss__inhalt p:last-child { margin-bottom: 0; }
.fuss__name { color: var(--text) !important; font-weight: 600; }
.fuss__inhalt a { color: var(--muted); text-decoration: none; }
.fuss__inhalt a:hover { color: var(--accent); }

.fuss__liste { list-style: none; padding: 0; margin: 0; max-width: none; }
.fuss__liste li { margin: 0 0 .5rem; font-size: var(--fs-small); }
.fuss__liste li:last-child { margin-bottom: 0; }
.fuss__liste a { color: var(--muted); text-decoration: none; position: relative; }
.fuss__liste a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px;
  background: var(--accent); transition: right 260ms var(--ease);
}
.fuss__liste a:hover { color: var(--text); }
.fuss__liste a:hover::after { right: 0; }
.fuss__liste--still li { color: var(--dim); }

/* Kreis-Siegel: Ring dreht sich langsam, die Mitte steht still. */
.siegel {
  position: relative; justify-self: end; align-self: center;
  width: clamp(9.5rem, 8rem + 5vw, 12rem); aspect-ratio: 1;
  display: grid; place-items: center;
  text-decoration: none; color: var(--text);
}
.siegel__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.siegel__ring text {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; fill: var(--dim);
  transition: fill var(--dur) var(--ease);
}
.siegel__mitte {
  position: relative; text-align: center; line-height: 1.25;
  font-size: clamp(.95rem, .9rem + .25vw, 1.1rem); font-weight: 600;
  letter-spacing: -.015em;
}
.siegel__pfeil {
  display: block; margin-bottom: .3rem; font-size: 1.15em; color: var(--accent);
  transition: transform var(--dur) var(--ease);
}
.siegel:hover .siegel__ring text { fill: var(--accent); }
.siegel:hover .siegel__pfeil { transform: translateY(-4px); }
.siegel:focus-visible { border-radius: 50%; }

@keyframes siegeldreh { to { transform: rotate(360deg); } }
.siegel__ring { animation: siegeldreh 26s linear infinite; }
.siegel:hover .siegel__ring { animation-duration: 12s; }

/* Untere Leiste */
.fuss__leiste {
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  padding-top: 1.6rem; position: relative;
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: center; justify-content: space-between;
}
.fuss__leiste::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px;
  background: var(--grad-linie);
}
.fuss__copy { margin: 0; font-size: var(--fs-small); color: var(--dim); }
.fuss__recht { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; }
.fuss__recht a { color: var(--muted); text-decoration: none; font-size: var(--fs-small); }
.fuss__recht a:hover { color: var(--text); text-decoration: underline; }

/* Schmale Ansicht: Siegel wandert unter die Spalten und zentriert sich. */
@media (max-width: 760px) {
  .siegel { justify-self: center; margin-top: 1rem; }
}

/* ── 15  Bewegung & Hilfsklassen ─────────────────────────────────────────── */

.nur-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.mono  { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.dim   { color: var(--dim); }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Startzustand nur setzen, wenn JS laeuft - sonst bliebe bei einem
   JS-Fehler die halbe Seite unsichtbar. */
.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal[data-sichtbar="1"] {
  opacity: 1; transform: none;
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}

/* Gestaffelt: Karten, Prinzipien und Phasen laufen nacheinander ein.
   Der Versatz ist klein genug, dass es fliessend wirkt statt als Abfolge. */
.js .reveal[data-sichtbar="1"] > *  { animation: einlauf 620ms var(--ease) backwards; }
.js .reveal[data-sichtbar="1"] > *:nth-child(1) { animation-delay:  40ms; }
.js .reveal[data-sichtbar="1"] > *:nth-child(2) { animation-delay: 110ms; }
.js .reveal[data-sichtbar="1"] > *:nth-child(3) { animation-delay: 180ms; }
.js .reveal[data-sichtbar="1"] > *:nth-child(4) { animation-delay: 250ms; }
.js .reveal[data-sichtbar="1"] > *:nth-child(5) { animation-delay: 320ms; }
@keyframes einlauf {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* Wo der Browser scrollgebundene Animationen kann, uebernimmt er sie:
   die Ueberschriften bewegen sich dann MIT dem Scrollen statt einmalig
   abzuspielen. Das ist der Unterschied, den man als "teuer" wahrnimmt. */
@supports (animation-timeline: view()) {
  .section h2, .section__intro, .grafik {
    animation: aufblenden linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 26%;
  }
  @keyframes aufblenden {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
  }
  /* KEINE scrollgebundene Ausblendung mehr auf .hero h1 / .hero__sub:
     die setzt dieselbe animation-Eigenschaft wie der Einlauf beim Laden und
     haette ihn ueberschrieben. Der Einlauf ist der wertvollere Effekt —
     man sieht ihn bei jedem Seitenaufruf, das Ausblenden nur beim Wegscrollen.
     Stattdessen driftet nur das Kreismotiv beim Scrollen davon. */
  .hero__grafik {
    animation: herografik 1400ms var(--ease) 200ms backwards,
               herodrift linear both;
    animation-timeline: auto, view();
    animation-range: normal, exit-crossing 0% exit-crossing 100%;
  }
  @keyframes herodrift {
    to { opacity: 0; transform: translateY(-40px) scale(1.08); }
  }
}

/* Zahlen zaehlen beim ersten Sichtbarwerden hoch (app.js). Waehrend des
   Zaehlens feste Ziffernbreite, sonst zappelt das Layout. */
.zahl__wert[data-zahl] { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .js .reveal[data-sichtbar="1"] > * { animation: none; }
  .karte:hover, .projekt:hover { transform: none; }
  .karte::before { display: none; }
  body::before { animation: none; }
  .fortschritt { display: none; }
  .siegel__ring { animation: none; }
  .hero__ring, .hero__weiter-pfeil { animation: none; }
  .hero__rolle, .hero h1, .hero__sub, .hero__links, .hero__weiter {
    animation: none; opacity: 1; transform: none;
  }
  .hero__grafik { animation: none; opacity: .55; transform: none; }
  .section h2, .section__intro, .grafik, .hero h1, .hero__sub { animation: none; opacity: 1; transform: none; }
}

/* Kontrastpraeferenz: Verlaufsschrift auf Vollton zuruecknehmen. */
@media (prefers-contrast: more) {
  .hero h1 em, .zahl__wert, .delta__nachher, .prinzip__nr, .phase__nr {
    background: none; -webkit-text-fill-color: currentColor; color: var(--text);
  }
  .hero h1 em, .delta__nachher { color: var(--accent); }
  body::before, body::after { display: none; }
}

@media print {
  .kopf, .nav-toggle, .theme-toggle, .form, .grafik { display: none; }
  body { background: #fff; color: #000; }
  body::before, body::after { display: none; }
}

/* ── 15a  Projekte ─────────────────────────────────────────────────────────
   Karten, Chips, Logos, Bausteine und Verweise — die Bausteine der
   Projektseiten (05.09.2026). Gleiche Flaechen und Radien wie Karten und
   Taetigkeiten, damit die Seite eine Handschrift behaelt. */

/* Logo mit zwei Fassungen: das Stylesheet blendet die zum Schema passende
   ein. Ohne Logo eine typografische Wortmarke gleicher Hoehe. */
.marken { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .9rem; }
.marken .logo + .logo { padding-left: .9rem; border-left: 1px solid var(--border); }
.logo { display: inline-flex; align-items: center; }
.logo img { height: 1.5rem; width: auto; display: block; }
.logo--gross img { height: clamp(2rem, 1.6rem + 1.2vw, 2.8rem); }
/* Spezifitaet: ".logo img" (0-1-1) muss unterliegen — deshalb ".logo .logo__hell". */
.logo .logo__hell { display: none; }
:root[data-theme="light"] .logo .logo__dunkel { display: none; }
:root[data-theme="light"] .logo .logo__hell   { display: block; }
.wortmarke {
  display: inline-block; font-weight: 700; letter-spacing: -.035em;
  font-size: 1.35rem; line-height: 1; color: var(--text);
}
.wortmarke.logo--gross { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); }

/* Chips: Status und Themen. Mono, klein, rund — wie das Sektionslabel. */
.chips { list-style: none; padding: 0; margin: 0; max-width: none; display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  margin: 0; font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .08em; text-transform: uppercase; line-height: 1.2;
  padding: .3rem .62rem; border: 1px solid var(--border-hi); border-radius: 999px;
  color: var(--dim);
}
.chip a { color: inherit; text-decoration: none; }
.chip a:hover { color: var(--text); }
.chip--status { border-color: transparent; }
.chip--laeuft    { background: rgba(var(--accent-rgb), .14); color: var(--accent); }
.chip--aufbau    { background: rgba(224,179,65,.16); color: var(--gold); }
.chip--abgeloest { background: var(--surface-2); color: var(--dim); border-color: var(--border); }

/* Projektkarten (Startseite, Uebersicht). Die ganze obere Haelfte ist der
   Link; die Chips darunter sind eigene Ziele und liegen deshalb ausserhalb. */
.projekte {
  list-style: none; padding: 0; margin: 3rem 0 0; max-width: none;
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.projekt {
  margin: 0; position: relative; isolation: isolate;
  background: var(--grad-flaeche); border: 1px solid var(--border);
  border-radius: var(--radius); padding: clamp(1.5rem, 1.1rem + 1vw, 2.1rem);
  display: flex; flex-direction: column; gap: 1rem;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.projekt:hover { transform: translateY(-4px); border-color: var(--border-hi); }
.projekt:focus-within { border-color: var(--accent); }
.projekt__link {
  text-decoration: none; color: inherit;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1rem;
}
.projekt__marke { grid-column: 1 / -1; margin-bottom: .5rem; min-height: 1.5rem; }
.projekt__name { font-weight: 600; font-size: var(--fs-h3); letter-spacing: -.015em; line-height: 1.2; }
.projekt__einzeiler { grid-column: 1; color: var(--muted); font-size: var(--fs-small); line-height: 1.5; }
.projekt__pfeil {
  grid-column: 2; grid-row: 2 / 4; align-self: center;
  color: var(--accent); font-size: 1.35rem;
  transition: transform var(--dur) var(--ease);
}
.projekt:hover .projekt__pfeil { transform: translateX(4px); }
.projekt .chips { margin-top: auto; padding-top: .7rem; border-top: 1px solid var(--border); }

/* Kopf einer Projektseite */
.projekt-kopf__marke { margin: 0 0 1.5rem; }
.meta-zeile { display: flex; flex-wrap: wrap; gap: .75rem 1.6rem; align-items: center; margin-top: 1.7rem; }
.meta-zeile__extern { font-size: var(--fs-small); text-decoration: none; white-space: nowrap; }
.meta-zeile__extern:hover { text-decoration: underline; }

/* Bausteine: nummerierte Liste in zwei Spalten — Titel + ein bis zwei Saetze. */
.bausteine {
  list-style: none; padding: 0; margin: 2.5rem 0 0; max-width: none;
  display: grid; gap: 1.3rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.baustein { margin: 0; display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); gap: .25rem .8rem; }
.baustein__nr {
  grid-row: span 2; font-family: var(--mono); font-size: var(--fs-small);
  color: var(--accent); padding-top: .2rem; font-variant-numeric: tabular-nums;
}
.baustein h3 { font-size: 1.02rem; margin: 0; letter-spacing: -.01em; }
.baustein p  { margin: 0; color: var(--muted); font-size: var(--fs-small); }

/* Verweise am Ende einer Projektseite */
.verweise { list-style: none; padding: 0; margin: 2rem 0 0; max-width: none; display: grid; gap: .7rem; }
.verweise li { margin: 0; font-size: var(--fs-small); color: var(--muted); display: flex; gap: .9rem; align-items: baseline; flex-wrap: wrap; }
.verweise__art {
  font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim); min-width: 5.5rem;
}

/* Kompakte Listen der Uebersicht (Bausteine ohne eigene Seite, Abgeloestes). */
.kompakt { list-style: none; padding: 0; margin: 2rem 0 0; max-width: none; display: grid; gap: .55rem; }
.kompakt li { margin: 0; font-size: var(--fs-small); color: var(--muted); padding-left: 1.2rem; position: relative; }
.kompakt li::before { content: ""; position: absolute; left: 0; top: .62em; width: .45rem; height: .45rem; border-radius: 50%; background: var(--border-hi); }
.kompakt strong { color: var(--text); font-weight: 600; }
.kompakt--abgeloest li::before { background: transparent; border: 1px solid var(--border-hi); }

/* ── 15b  Ersatz fuer style-Attribute ─────────────────────────────────────
   Die eigene Content-Security-Policy erlaubt style-src 'self' ohne
   'unsafe-inline'. Nach CSP Level 3 faellt style-src-attr darauf zurueck —
   inline style="…" wird also blockiert und wirkte NICHT. Die betroffenen
   Abstaende sahen im Quelltext richtig aus und fehlten in der Anzeige. */

#kopf-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }
.abstand-gross  { margin-top: 2.5rem; }
.abstand-mittel { margin-top: 1.5rem; }
.klein          { font-size: var(--fs-small); }

/* ── 16  Verlaufsschrift ──────────────────────────────────────────────────
   BEWUSST AM DATEIENDE UND IN EIGENEM ABSCHNITT.

   Diese Regeln beschneiden den Verlauf auf die Buchstaben. Fehlen sie, wird
   aus jedem Verlaufstext ein farbiger Kasten, der die Ziffer verdeckt —
   genau das ist einmal passiert, weil der Block beim Umbau eines anderen
   Abschnitts mit ersetzt wurde. Deshalb steht er jetzt isoliert am Ende,
   und bin/build.php prueft seine Existenz.

   Der @supports-Rahmen ist kein Schmuck: ohne background-clip wuerde
   -webkit-text-fill-color: transparent den Text UNSICHTBAR machen. */

.hero h1 em,
.zahl__wert,
.delta__nachher,
.prinzip__nr,
.phase__nr,
.taetigkeit__zahl { color: var(--accent); }

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero h1 em,
  .zahl__wert,
  .delta__nachher,
  .prinzip__nr,
  .phase__nr,
  .taetigkeit__zahl {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}