/* ==========================================================================
   Stefan Sadlak, Website
   Ein Stilblatt fuer alle vier Seiten. Warum nicht aufgeteilt, steht in
   docs/TECHNIK.md.

   Aufbau: Tokens, Reset, Grundtypografie, Grundgeruest, Kopf, Inhalt,
   Fuss, Hilfsklassen, schmale Fenster, Druck.

   Keine Farbe und kein Abstand steht hier direkt. Alles kommt aus den
   Tokens, damit sich der Akzent in einer Zeile wechseln laesst.
   ========================================================================== */

/* -------------------------------------------------------------- Tokens */

:root {
  /* Farben. Alle Paare auf mindestens 4.5:1 nachgerechnet, die Werte
     stehen in docs/KONZEPT.md. Keine dunkle Darstellung, entschieden am
     11.10.2026. */
  --grund:          #ffffff;
  --grund-flaeche:  #f5f7fa;   /* abgesetzte Abschnitte */
  --text:           #15181c;   /* 17.8:1 auf Grund */
  --text-leise:     #4d555e;   /*  7.6:1 auf Grund */
  --akzent:         #14539e;   /*  7.6:1 auf Grund */
  --akzent-dunkel:  #0e3f7a;   /* 10.4:1, fuer Hover */
  --linie:          #dfe4ea;

  /* Abstaende, eine Stufenleiter statt freier Werte */
  --raum-1: 0.25rem;
  --raum-2: 0.5rem;
  --raum-3: 1rem;
  --raum-4: 1.5rem;
  --raum-5: 2.5rem;
  --raum-6: 4rem;
  /* Eine Stufe darueber gab es einmal, 6rem. Sie wird seit dem Straffen
     der Abschnitte nicht mehr gebraucht. Wer sie wieder einfuehrt, sollte
     einen Grund haben. */

  /* Schrift. Systemschriften als Ausgangspunkt: laedt nichts nach,
     keine Lizenzfrage, keine Uebertragung an Dritte. Sobald eine eigene
     Schrift gewaehlt ist, kommt sie lokal dazu, siehe docs/TECHNIK.md. */
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;

  --mass:   38rem;   /* Lesebreite, etwa 70 Zeichen */
  --breite: 64rem;   /* Seitenbreite */
  --rund:   6px;
}

/* --------------------------------------------------------------- Reset */

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

body, h1, h2, h3, p, ul, ol, li, figure, blockquote, dl, dd {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

img { max-width: 100%; height: auto; display: block; }

/* ------------------------------------------------------- Grundtypografie */

html {
  /* Kein overflow-x: hidden. Das schaltet position: sticky im ganzen
     Dokument ab, und waagerechtes Scrollen gehoert behoben, nicht
     versteckt. Befund aus dem Nachbarprojekt.

     Auch kein scroll-behavior: smooth. Es stand hier und ist am
     11.10.2026 wieder herausgeflogen: Wer von aussen auf
     index.html#kontakt kommt, und das sind die alten Verweise aus Mails
     und von Visitenkarten, sieht sonst erst eine mehrere Sekunden lange
     Scrollfahrt durch die ganze Seite. Genau dieser Fall ist hier der
     wichtige. Ein sofortiger Sprung faellt niemandem als Mangel auf,
     eine lange Fahrt schon. */
}

body {
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 1.0625rem;        /* 17px, nicht unter 16px */
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 650; }
h2 { font-size: clamp(1.5rem, 3.5vw, 1.875rem); font-weight: 600; }
h3 { font-size: 1.1875rem; font-weight: 600; }

p, li { max-width: var(--mass); text-wrap: pretty; }

p + p { margin-top: var(--raum-3); }

strong { font-weight: 650; }

a {
  color: var(--akzent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover { color: var(--akzent-dunkel); }

/* Ein sichtbarer Fokus ist keine Zier, er ist die Bedienung fuer
   jemanden, der die Tastatur benutzt. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ------------------------------------------------------- Grundgeruest */

.huelle {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--raum-3);
}

main { display: block; }

/* Abschnittshoehe. Zwei benachbarte Bloecke addieren ihre Polster, aus
   2.5rem werden also 5rem Abstand. Mit --raum-7 auf beiden Seiten waren
   es 12rem, und das war auf einem grossen Bildschirm zu viel Scrollweg
   fuer zu wenig Inhalt. Am 11.10.2026 gestrafft.

   Seit dem 29.10.2026 ein clamp statt einer festen Stufe: Auf dem Handy
   bleibt es bei den gestrafften 2.5rem, auf einem breiten Schirm wird
   daraus bis zu 4rem. Die 12rem von damals kommen damit nicht zurueck,
   aber die Abschnitte kleben auf einem grossen Bildschirm auch nicht
   mehr aneinander. */
.block {
  padding-block: clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid var(--linie);
}

.block:first-of-type { border-top: 0; }

/* Der Einstieg traegt seine eigene Linie als ::after. Ohne diese Regel
   liegt die Rahmenlinie des naechsten Blocks genau darauf, und zwei
   Linien uebereinander sehen nach Versehen aus. Befund vom 29.10.2026. */
.einstieg + .block { border-top: 0; }

.block--flaeche {
  background: var(--grund-flaeche);
  border-top: 0;
}

/* Zwei abgesetzte Bloecke hintereinander verschmelzen sonst zu einer
   einzigen grauen Flaeche. Auf der Startseite war das bis zum 29.10.2026
   so, von den Projekten bis zum Seitenende. Dort ist der Kontaktblock
   jetzt wieder weiss; diese Regel ist das Netz fuer den naechsten Fall. */
.block--flaeche + .block--flaeche { border-top: 1px solid var(--linie); }

.block__titel { margin-bottom: var(--raum-4); }

/* Ein kurzer Strich ueber jeder Abschnittsueberschrift. Er ordnet, er
   schmueckt nicht: Auf einer Seite ohne Bilder uebernimmt er die Arbeit,
   die sonst ein Trennelement taete. Die Rechtsseiten bekommen ihn nicht,
   die arbeiten mit .rechtstext und bleiben ruhig. */
.block__titel h2::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-bottom: var(--raum-3);
  background: var(--akzent);
}

/* Wer ueber index.html#kontakt aus einer alten Mail kommt, soll sehen,
   wo er gelandet ist. Der Strich des Zielabschnitts wird laenger, mehr
   passiert nicht. Kein Aufblitzen, nichts, was sich bewegt. */
:target .block__titel h2::before { width: 5.5rem; }

/* Die Unterzeile unter einer Abschnittsueberschrift steht naeher dran als
   normaler Fliesstext. Auch unter einer h1: Im Lebenslauf klebte
   "Stefan Sadlak, Bissendorf" sonst an der Ueberschrift. */
.block__titel h1 + p,
.block__titel h2 + p { margin-top: var(--raum-2); }

/* Abstaende zwischen benachbarten Bausteinen. Hier statt als style-Attribut
   im HTML, damit sich eine Stufe an einer Stelle aendern laesst. */
.daten + p,
.karten + p,
p + .karten { margin-top: var(--raum-4); }

.huelle > h2 + p,
.stationen + p { margin-top: var(--raum-3); }

/* Ein Sprungziel darf nicht unter dem klebenden Kopf verschwinden.

   Befund vom 29.10.2026: Die 5rem stimmten nur fuer den einzeiligen Kopf.
   Auf schmalen Fenstern bricht die Navigation um, und der Kopf wird
   hoeher als das Sprungziel tief sitzt. Die Umbruchstellen sind mit einer
   binaeren Suche gemessen, nicht geschaetzt, und zwar am Lebenslauf: Dort
   steht der aktive Navigationspunkt fett und bricht darum als erster um.

       ab   598px   Kopf  69px   ->  5rem   (80px)
       468-597px    Kopf 105px   ->  7.5rem (120px)
       bis  467px   Kopf 149px   -> 10.5rem (168px)

   Die Schwellen liegen bewusst etwas ueber den Messwerten (38rem statt
   37.4rem, 29.5rem statt 29.2rem). Ein zu grosser Rand setzt das Ziel ein
   Stueck tiefer und faellt niemandem auf. Ein zu kleiner versteckt die
   Ueberschrift, und das ist der Fehler, um den es hier geht.

   ACHTUNG: Diese Werte haengen an der Zahl der Navigationspunkte. Beim
   fuenften Punkt ("Werkzeuge", 29.10.2026) sind sie von 528/368 auf
   598/468 gewandert. Kommt ein Punkt dazu, wird neu gemessen. */
[id] { scroll-margin-top: 5rem; }

@media (max-width: 38rem) {
  [id] { scroll-margin-top: 7.5rem; }
}

@media (max-width: 29.5rem) {
  [id] { scroll-margin-top: 10.5rem; }
}

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

.sprung {
  position: absolute;
  left: -9999px;
}

.sprung:focus {
  position: static;
  display: inline-block;
  margin: var(--raum-2);
  padding: var(--raum-2) var(--raum-3);
  background: var(--akzent);
  color: var(--grund);
  border-radius: var(--rund);
}

.kopf {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--grund);
  border-bottom: 1px solid var(--linie);
}

.kopf__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-2) var(--raum-4);
  padding-block: var(--raum-3);
}

.kopf__name {
  font-weight: 650;
  font-size: 1.0625rem;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.kopf__name:hover { color: var(--akzent); }

.navi ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2) var(--raum-4);
}

.navi a {
  display: inline-block;
  padding-block: var(--raum-1);
  color: var(--text-leise);
  text-decoration: none;
}

.navi a:hover { color: var(--akzent); }

.navi a[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--akzent);
}

/* ---------------------------------------------------------- Einstieg */

/* Der Einstieg darf etwas mehr Luft haben als die Bloecke darunter, er
   traegt die Hauptueberschrift. */
.einstieg { padding-block: var(--raum-6) var(--raum-5); }

/* Seit dem Wegfall des Portraits steht die Hauptueberschrift allein und
   darf groesser werden. Die Zeilenbreite begrenzt sie trotzdem: ueber die
   vollen 64rem gelesen, zerfaellt eine Ueberschrift. 18ch ergeben zwei
   bis drei Zeilen, und darauf ist text-wrap: balance eingestellt.
   Nur hier, nicht global: Die Rechtsseiten bleiben ruhig. */
.einstieg h1 {
  font-size: clamp(2rem, 5.5vw, 3.25rem);
  max-width: 18ch;
}

/* Bis zum 29.10.2026 war das ein zweispaltiges Raster: links der Text,
   rechts der Platz fuer ein Portrait. Das Portrait kommt nicht, der Platz
   ist entfallen, und damit auch die zweite Spalte. Der Name bleibt, damit
   die Seite nicht wegen einer Umbenennung angefasst werden muss. */
.einstieg__raster {
  display: block;
}

.einstieg__satz {
  margin-top: var(--raum-4);
  font-size: 1.1875rem;
  color: var(--text-leise);
}

.einstieg__wege {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-3);
  margin-top: var(--raum-5);
}

/* ------------------------------------------------------- Bausteine */

.knopf {
  display: inline-block;
  padding: 0.7em 1.3em;
  background: var(--akzent);
  color: var(--grund);
  border: 1px solid var(--akzent);
  border-radius: var(--rund);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
}

.knopf:hover {
  background: var(--akzent-dunkel);
  border-color: var(--akzent-dunkel);
  color: var(--grund);
}

/* Der allgemeine Fokusumriss liegt 3px ausserhalb und damit meist auf
   weissem Grund. Auf einem abgesetzten Block steht der blaue Knopf aber
   auf Grau, und dort verliert sich ein blauer Umriss. Ein heller
   Innenrand trennt beides zuverlaessig. */
.knopf:focus-visible {
  box-shadow: inset 0 0 0 2px var(--grund);
}

.knopf--leise {
  background: transparent;
  color: var(--akzent);
  border-color: var(--linie);
}

.knopf--leise:hover {
  background: var(--grund-flaeche);
  color: var(--akzent-dunkel);
  border-color: var(--akzent);
}

/* Die Karten trugen bis zum 19.10.2026 den Abschnitt "Fuer Unternehmen".
   Der ist entfallen, weil das Gewerbe abgemeldet ist. Seit demselben Tag
   tragen sie den Projektabschnitt (index.html#projekte), und das ist der
   bessere Platz: Vier Belege nebeneinander lesen sich schneller als vier
   Absaetze untereinander.

   Zwei Spalten ab mittlerer Breite, nicht auto-fit. Mit auto-fit passten
   bei 64rem genau drei Karten nebeneinander, und die vierte stand allein
   in der zweiten Reihe. Zwei mal zwei ist ruhiger und laesst den Karten
   mehr Breite. Darunter einspaltig, das regelt die Vorgabe hier. */
.karten {
  display: grid;
  gap: var(--raum-4);
  grid-template-columns: 1fr;
}

.karte {
  padding: var(--raum-4);
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
}

.karte > * + * { margin-top: var(--raum-2); }

.karte p { max-width: none; color: var(--text-leise); }

/* Die Kopfzeile einer Karte: wann, und in welcher Rolle. Sie steht ueber
   der Ueberschrift, damit zuerst der Zusammenhang klar ist und dann die
   Sache. Klein und leise, denn sie ordnet nur ein. */
.karte__wann {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.karte h3 { font-size: 1.0625rem; }

/* Code-Auszeichnung. Bisher stand dazu nichts im Stilblatt, und die
   Vorgabe des Browsers ist eine Monospace-Schrift in abweichender
   Groesse, die den Fliesstext auseinanderzieht. Seit dem 19.10.2026
   stehen in den Projektkarten Dateinamen und Kopfzeilen, die als solche
   erkennbar sein sollen. overflow-wrap, damit ein langer Bezeichner auf
   einem schmalen Schirm umbricht statt die Zeile hinauszuschieben. */
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas,
               "Liberation Mono", monospace;
  font-size: 0.9em;
  overflow-wrap: anywhere;
}

/* Ein Werkzeug auf werkzeuge.html. Wie eine Karte, aber mit Raum: Hier
   steht ein Eintrag allein und traegt eine eigene Ueberschrift, waehrend
   die Karten auf der Startseite zu viert nebeneinander liegen. Kommt ein
   zweites Werkzeug dazu, stehen sie untereinander; eine Spaltenaufteilung
   lohnt erst ab drei. */
.werkzeug {
  /* Begrenzt, nicht ueber die vollen 64rem: Der Text darin bricht bei
     38rem um, und ein Kasten, der weit darueber hinausragt, steht rechts
     leer. */
  max-width: 46rem;
  padding: var(--raum-5);
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
}

.werkzeug > * + * { margin-top: var(--raum-3); }

.werkzeug h2 { margin-top: var(--raum-1); }

/* Der Satz direkt unter dem Namen sagt in einer Zeile, was das Ding tut.
   Er steht naeher an der Ueberschrift als der Fliesstext darunter. */
.werkzeug__satz {
  margin-top: var(--raum-2);
  font-size: 1.1875rem;
  color: var(--text-leise);
}

/* Das Kleingedruckte unter dem Knopf: Betriebssystem, Gewaehr, Lizenzen. */
.werkzeug__fuss {
  font-size: 0.9375rem;
  margin-top: var(--raum-4);
}

.werkzeug .einstieg__wege { margin-top: var(--raum-4); }

/* Aufzaehlung mit eigenem Zeichen, ohne list-style */
.liste li {
  position: relative;
  padding-left: 1.2em;
}

.liste li + li { margin-top: var(--raum-2); }

.liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 0.4em;
  height: 2px;
  background: var(--akzent);
}

/* Werdegang und Kontaktdaten als Beschreibungsliste */
.daten {
  display: grid;
  gap: var(--raum-2) var(--raum-4);
  margin-top: var(--raum-3);
}

.daten dt {
  font-weight: 600;
  color: var(--text);
}

.daten dd { color: var(--text-leise); }

.stationen > li + li {
  margin-top: var(--raum-4);
  padding-top: var(--raum-4);
  border-top: 1px solid var(--linie);
}

/* In einer Station folgt der Text direkt auf die Ueberschrift und sass
   ihr auf. Eine kleine Stufe genuegt, mehr wuerde die Station
   auseinanderziehen. */
.stationen h3 + p { margin-top: var(--raum-1); }

.stationen__zeit {
  display: block;
  font-size: 0.9375rem;
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}

/* Rechtstexte: schmaler Satz, lesbare Abstaende */
.rechtstext > * + * { margin-top: var(--raum-3); }
.rechtstext h2 { margin-top: var(--raum-5); }
.rechtstext h3 { margin-top: var(--raum-4); }

/* Ein Platzhalter muss auffallen. Solange einer steht, geht die Seite
   nicht live, siehe docs/RECHT.md und /seite-pruefen. */
.platzhalter {
  padding: var(--raum-3) var(--raum-4);
  background: #fff8e1;
  border: 1px solid #e0b300;
  border-left: 4px solid #e0b300;
  border-radius: var(--rund);
  color: #4a3800;
}

.platzhalter p { max-width: none; }

/* ------------------------------------------------------------- Fuss */

.fuss {
  padding-block: var(--raum-5);
  border-top: 1px solid var(--linie);
  background: var(--grund-flaeche);
  font-size: 0.9375rem;
}

.fuss__zeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2) var(--raum-4);
  justify-content: space-between;
  align-items: center;
}

.fuss ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2) var(--raum-4);
}

.fuss, .fuss a { color: var(--text-leise); }
.fuss a:hover { color: var(--akzent); }

/* ------------------------------------------------------ Hilfsklassen */

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

.leise { color: var(--text-leise); }

.eng { max-width: var(--mass); }

/* --------------------------------------------------- Schmale Fenster */

/* Gebaut wird in einer Spalte, erweitert wird nach oben. Bei 360px
   muss alles lesbar sein, ohne waagerechtes Scrollen. */

@media (min-width: 48rem) {
  .daten {
    /* minmax statt fester 11rem: Bei knapper Breite darf die
       Begriffsspalte nachgeben, statt den Text zu quetschen. */
    grid-template-columns: minmax(8rem, 11rem) 1fr;
  }

  .karten {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Wer Bewegung abbestellt hat, bekommt keine. Weiches Scrollen steht
   ohnehin nirgends, siehe oben. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===================================================== Bewegung ====== */

/* Dazugekommen am 19.10.2026. Alles hier ist Zugabe: Die Seite ist ohne
   JavaScript vollstaendig lesbar, und sie ist ohne diese Regeln
   vollstaendig bedienbar.

   Drei Regeln, von denen nicht abgewichen wird:

   1. Nichts wird versteckt, bevor nicht feststeht, dass es auch wieder
      auftaucht. Darum haengt jede Startstellung an html.bewegung, und
      diese Klasse setzt ein winziges Skript im Kopf. Kein JavaScript,
      keine Klasse, alles sichtbar.
   2. Weiches Scrollen steht NICHT in scroll-behavior. Es laeuft im
      Skript und nur beim Klick. Der Grund steht oben bei html: Wer von
      aussen auf index.html#kontakt kommt, soll nicht erst eine
      Scrollfahrt durch die ganze Seite sehen.
   3. Wer Bewegung abbestellt hat, bekommt keine. Das erledigt nicht nur
      die Media Query unten, sondern auch das Skript selbst, sonst
      bliebe halb Aufgebautes stehen. */

/* ---- Startstellungen. Nur mit Skript, siehe Regel 1. */

html.bewegung [data-auftritt] {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

html.bewegung [data-auftritt].ist-da {
  opacity: 1;
  transform: none;
}

/* Die Stufung innerhalb eines Blocks. Macht aus dem Auftritt eine
   Bewegung und nicht ein Umschalten. */
html.bewegung [data-auftritt][data-verzug="1"] { transition-delay: 0.08s; }
html.bewegung [data-auftritt][data-verzug="2"] { transition-delay: 0.16s; }
html.bewegung [data-auftritt][data-verzug="3"] { transition-delay: 0.24s; }
html.bewegung [data-auftritt][data-verzug="4"] { transition-delay: 0.32s; }
html.bewegung [data-auftritt][data-verzug="5"] { transition-delay: 0.40s; }

/* ---- Die fliegenden Buchstaben der Hauptueberschrift */

/* Das Skript zerlegt die h1 in Spannen. Jeder Buchstabe kommt von unten,
   leicht gedreht und unscharf, und setzt sich. Die Wortgrenzen bleiben
   erhalten, damit nicht mitten im Wort umgebrochen wird. */
/* Kein display hier: Die Klasse landet auf der h1 selbst, und die soll
   ein Block bleiben. */
.fliegt { }

.fliegt__wort {
  display: inline-block;
  white-space: nowrap;
}

.fliegt__zeichen {
  display: inline-block;
  will-change: transform, opacity, filter;
}

html.bewegung .fliegt__zeichen {
  opacity: 0;
  transform: translateY(0.7em) rotate(6deg) scale(0.9);
  filter: blur(6px);
}

html.bewegung .fliegt.ist-da .fliegt__zeichen {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity 0.5s ease-out,
    transform 0.75s cubic-bezier(0.2, 1.3, 0.3, 1),
    filter 0.5s ease-out;
  transition-delay: var(--zeichen-verzug, 0s);
}

/* ---- Der Schimmer hinter dem Einstieg */

/* Ein weicher Lichtfleck in der Akzentfarbe, der dem Zeiger folgt. Das
   Skript setzt --zeiger-x und --zeiger-y, mehr passiert nicht. Ohne
   Skript stehen die Vorgabewerte, dann ist es ein unbewegter Fleck, und
   auch das sieht richtig aus. */
.einstieg {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.einstieg::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -30%;
  background:
    radial-gradient(
      26rem 26rem at var(--zeiger-x, 72%) var(--zeiger-y, 20%),
      color-mix(in srgb, var(--akzent) 13%, transparent),
      transparent 70%
    );
  pointer-events: none;
}

/* Fuer Browser ohne color-mix bleibt der Fleck einfach aus. Ein
   Hintergrundschimmer ist nichts, wofuer sich ein Ersatz lohnt. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .einstieg::before { display: none; }
}

/* Eine feine Linie unter dem Einstieg, die mit dem Auftritt waechst. */
.einstieg::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(
    to right,
    var(--akzent),
    color-mix(in srgb, var(--akzent) 20%, transparent)
  );
  transform-origin: left;
}

html.bewegung .einstieg::after { transform: scaleX(0); }

html.bewegung .einstieg.ist-da::after {
  transform: scaleX(1);
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}

/* ---- Der Fortschrittsbalken im Kopf */

/* Zeigt, wie weit die Seite gelesen ist. Das Skript setzt --gelesen auf
   einen Wert zwischen 0 und 1. Rein schmueckend, darum aria-hidden im
   HTML und keine Rolle fuer Vorleser. */
.fortschritt {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--akzent);
  transform: scaleX(var(--gelesen, 0));
  transform-origin: left;
}

/* ---- Die Gliederung am Rand */

/* Eine Leiste, die zeigt, wo man ist, und mit einem Klick woanders hin
   bringt. Das Skript baut sie aus den Abschnitten der Seite. Sie
   erscheint erst, wenn daneben Platz ist, siehe die Media Query. Auf
   schmalen Fenstern bleibt es bei der Navigation im Kopf. */
.gliederung {
  display: none;
  position: fixed;
  top: 50%;
  right: var(--raum-3);
  z-index: 9;
  transform: translateY(-50%);
}

.gliederung ul {
  display: grid;
  gap: var(--raum-3);
}

.gliederung a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--raum-2);
  padding: 0.3rem 0.45rem;
  border-radius: var(--rund);
  color: var(--text-leise);
  text-decoration: none;
  font-size: 0.8125rem;
  /* Die ausgefahrene Beschriftung kann bei knapper Fensterbreite ueber
     dem Text liegen. Darum bekommt sie dann einen eigenen Grund, dann
     liest sie sich als schwebende Bedienung und nicht als Panne. */
  background: transparent;
  transition: background-color 0.25s ease-out, box-shadow 0.25s ease-out;
}

/* Die Beschriftung liegt im Ruhezustand eingeklappt daneben und faehrt
   bei Hover, bei Tastaturfokus und beim aktiven Abschnitt heraus. */
.gliederung__wort {
  opacity: 0;
  transform: translateX(0.5rem);
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}

.gliederung__punkt {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--linie);
  transition: background-color 0.3s ease-out, transform 0.3s ease-out;
}

.gliederung a:hover .gliederung__wort,
.gliederung a:focus-visible .gliederung__wort,
.gliederung a[aria-current="true"] .gliederung__wort {
  opacity: 1;
  transform: none;
}

.gliederung a:hover .gliederung__punkt,
.gliederung a:focus-visible .gliederung__punkt {
  background: var(--akzent);
}

.gliederung a:hover,
.gliederung a:focus-visible,
.gliederung a[aria-current="true"] {
  background: var(--grund);
  box-shadow: 0 2px 12px -6px rgba(21, 24, 28, 0.35);
}

.gliederung a[aria-current="true"] { color: var(--text); }

.gliederung a[aria-current="true"] .gliederung__punkt {
  background: var(--akzent);
  transform: scale(1.7);
}

/* ---- Kleine Regungen beim Zeigen */

.karte {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s ease-out,
              border-color 0.3s ease-out;
}

.karte:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--akzent) 40%, var(--linie));
  box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--akzent) 55%, transparent);
}

.knopf {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.2s ease-out,
              border-color 0.2s ease-out,
              box-shadow 0.2s ease-out;
}

.knopf:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--akzent) 70%, transparent);
}

.knopf:active { transform: translateY(0); }

/* Die Begriffsliste im Profil: der Begriff faerbt sich beim Zeigen.
   Mehr braucht es nicht, es ist eine Liste und kein Karussell. */
.daten dt { transition: color 0.25s ease-out; }

.daten dt:hover { color: var(--akzent); }

/* ---- Wer Bewegung abbestellt hat */

/* Das Skript prueft dasselbe und baut dann gar nichts erst auf. Diese
   Regeln sind der Guertel zum Hosentraeger, fuer den Fall, dass jemand
   die Einstellung mitten im Besuch aendert. */
@media (prefers-reduced-motion: reduce) {
  html.bewegung [data-auftritt],
  html.bewegung .fliegt__zeichen {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  html.bewegung .einstieg::after { transform: scaleX(1) !important; }

  .einstieg::before { display: none; }

  .karte:hover, .knopf:hover { transform: none; }
}

/* ---- Breite Fenster: hier erscheint die Gliederung */

/* 74rem, nicht 64rem: Der Inhalt ist 64rem breit, die Leiste braucht
   daneben Platz. 76rem waren zu viel, bei einem Fenster von 1214 Pixeln
   blieb die Leiste aus, und das ist eine ganz normale Laptopbreite.
   Weniger als 74rem waere zu wenig: Dann faehrt die Beschriftung ueber
   eine lange Ueberschrift. Nachgemessen am 19.10.2026, bei 1214 Pixeln
   endet der Text bei 1096 und die Leiste beginnt bei 1098. */
@media (min-width: 74rem) {
  .gliederung { display: block; }
}

/* -------------------------------------------------------------- Druck */

/* Der Lebenslauf wird ausgedruckt, und zwar von Leuten, die ihn in eine
   Mappe legen. Das soll nicht nach Webseite aussehen. */
@media print {
  .kopf, .fuss, .sprung, .einstieg__wege, .platzhalter,
  .gliederung, .fortschritt { display: none; }

  /* Auf Papier ist jede Startstellung ein Fehler: Was noch nicht
     aufgetaucht ist, wuerde unsichtbar gedruckt. */
  html.bewegung [data-auftritt],
  html.bewegung .fliegt__zeichen {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .einstieg::before, .einstieg::after { display: none; }

  body {
    font-size: 11pt;
    line-height: 1.45;
    color: #000;
    background: #fff;
  }

  .block {
    padding-block: 0 1.5rem;
    border-top: 0;
    break-inside: avoid;
  }

  .block--flaeche { background: transparent; }

  p, li { max-width: none; }

  a { color: #000; text-decoration: none; }

  /* Eine Adresse, die auf Papier verschwindet, ist verloren. */
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  main a[href^="mailto:"]::after { content: ""; }
}