/* =========================================================================
   Joel Sidler — Seiten-CSS: Inhalt
   Gilt für ueber-mich.html.
   Ergänzt nur Layout. Komponenten kommen ausschliesslich aus css/style.css.
   ========================================================================= */

/* ---------- Hero ----------------------------------------------------------
   Der Hero ist seit dem Umbau auf jeder Seite dieselbe Komponente und wird
   vollständig in style.css (Abschnitt 4.13) geregelt — auch die Kickerzeile
   auf dunklem Grund und der Weiter-Link. Hier bleibt nichts zu tun.
   -------------------------------------------------------------------------- */

/* ---------- Sektionsmuster --------------------------------------------------
   Ersetzt am 22.09.2026 das alte .abschnitt-Muster (Kicker in einer 12rem-
   Labelspalte links, position: sticky, Inhalt in einer 54rem-Spalte daneben).
   Zwei Beschwerden aus derselben Quelle (Feedback Auftraggeber, 21.09.2026):
   »es sollte nicht der obertitel so scrollbar sein« — der Kicker folgte beim
   Scrollen — und »texte sind schon fast mittig, das ist random« — die
   Labelspalte frass von links Platz weg, wodurch die Inhaltsspalte im
   1180px-Wrap optisch nahe der Bildschirmmitte landete, ohne dass sie eine
   Kante hielt.

   Neu: kein Kicker mehr über den Sektionen (siehe unten), kein sticky, und
   jede Sektion liegt direkt in .wrap — an derselben linken Kante wie
   Navigationsmarke, Hero-Text und Aufruf-Band. Die Breite variiert bewusst
   pro Sektion, nicht die Kante: Intro ist schmal (Porträt + Text), Mein Weg
   voll (Spurenplan), Politisches Engagement breiter (Rollenraster, zwei
   Belegzeilen-Blöcke, zwei Fotos), Privates wieder schmal (Lead + ein Foto).
   Vier Inhalte, vier Formen — keine Kette gleicher Blöcke.

   Getrennt werden die Sektionen durch Weissraum und den Wechsel auf
   --paper-alt bei Mein Weg, nicht durch eine Haarlinie: die Seite führt
   Haarlinien schon an anderer Stelle (Rollenraster, Legenden) und eine
   weitere zwischen jeder Sektion hätte sie Richtung Zeitungs-Layout mit
   Nulldelta-Radius gekippt.

   Warum keine vier Kicker mehr: geprüft, ob der Kicker etwas sagt, das die
   Überschrift darunter nicht schon sagt. »Intro« sagt nichts. »Mein Weg«
   wiederholt, was »Zehn Jahre auf drei Spuren« schon trägt. »Politisches
   Engagement« wiederholt »Wo ich mich einbringe«, dazu macht es der
   Rollenraster direkt darunter ohnehin explizit. »Privates« wiederholt, was
   sich aus »Neben der Politik« zwei Zeilen tiefer von selbst ergibt. In
   keinem Fall bleibt eine eigenständige Aussage übrig — ersatzlos raus.
   -------------------------------------------------------------------------- */

/* ---------- Intro mit Porträt (ueber-mich.html) ----------------------------
   Das Bild ist seit dem 21.09.2026 img/joel-hero.jpg (1600×2400, warm,
   leichtes Lächeln) statt img/joel-portrait.jpg — auf dem quadratischen
   Porträt wirkte Joel nach eigener Aussage »streng bzw. böse«. Das neue Bild
   ist hochformatig (2:3), die Spalte ist darum schmaler als zuvor: sonst
   würde das Porträt höher als der Text daneben.

   Die Sektion bleibt bewusst schmal (46rem) — das leiseste Stück der Seite,
   ein Porträt und drei kurze Absätze, kein Raster, keine Liste. */

.intro {
  max-inline-size: 46rem;
  display: grid;
  gap: var(--space-l);
  align-items: center;
}
.intro__portrait {
  inline-size: 100%;
  max-inline-size: 220px;
  margin-inline: auto;
}
@media (min-width: 760px) {
  .intro { grid-template-columns: minmax(160px, 220px) 1fr; }
  .intro__portrait { margin-inline: 0; }
}

/* ---------- Mein Weg — Spurenplan ----------------------------------------
   Drei Bahnen über einer gemeinsamen Jahresachse. Elf Rasterspalten, eine je
   Jahr von 2017 bis 2027. Jede Station im Markup setzt --von und --bis als
   Spaltennummern; daraus ergeben sich Lage und Breite ganz von selbst.

   Warum überhaupt ein Plan statt einer Liste: Joels Stationen liefen zu
   weiten Teilen gleichzeitig. Untereinander gesetzt sähe es nach einer
   Abfolge aus. Nebeneinander sieht man, was die Sache ausmacht — und man
   sieht die Lücke zwischen 2023 und 2025, in der er Vollzeit studiert hat.

   Gerechnet wird mit der Spaltenlinie, nicht mit dem Jahr: eine Station von
   2017 bis 2020 läuft von Linie 1 bis Linie 4 und endet damit genau dort,
   wo 2020 beginnt. Nur so stossen Stationen, die im selben Jahr wechseln,
   aneinander statt sich zu überlappen.
   ------------------------------------------------------------------------ */

/* Die Lead-Zeile bleibt auf Lesebreite, der Plan selbst nicht — er braucht
   die volle Sektionsbreite, das ist die dichteste, breiteste Stelle der
   Seite. */
.weg__intro { max-inline-size: 40rem; }

/* Drei gleich hohe Bahnen. 1fr je Bahn heisst: alle drei bekommen die Höhe
   der höchsten, statt dass jede so hoch wird, wie ihr längster Text es
   gerade erzwingt. Der Plan liest sich dadurch als Raster und nicht als
   drei Listen, die zufällig untereinander stehen — und er bleibt auf einer
   Bildschirmhöhe, weil die Bahnen enger zusammenrücken. */
.weg__plan {
  display: grid;
  grid-template-rows: auto repeat(3, 1fr);
  gap: var(--space-s);
  margin-block-start: var(--space-l);
}

/* Die Achse trägt dieselben elf Spalten wie jede Bahn — die Jahreszahl
   steht dadurch immer genau über ihrer Spalte. */
.weg__achse,
.weg__bahn {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 3px;
  list-style: none; margin: 0; padding: 0;
}
.weg__achse {
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.7rem; letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-mute);
  padding-block-end: 0.4rem;
  border-block-end: 1px solid var(--line);
}
/* Das laufende Jahr ist der Bezugspunkt für alles, was »seit« heisst. */
.weg__achse-jetzt { color: var(--blue-deep); }

/* Der Name oben, die Bahn füllt den Rest der Zeile — nur so kommt die
   gleiche Höhe auch bei der Station an. */
.weg__spur { display: grid; grid-template-rows: auto 1fr; gap: 0.35rem; }
/* Der Spurname stand in der Spurfarbe — Cyan auf Weiss kommt als Schrift
   auf 2,97:1 und fällt für diese Grösse durch. Die Farbe trägt jetzt ein
   kleines Quadrat davor, die Schrift steht schwarz. Das ist zugleich die
   Legende: dasselbe Quadrat wie auf der Zeitspur der Startseite.
   Gemischtschreibung statt gesperrter Versalien, seit dem 22.09.2026 im
   Sinn der gleichen Änderung an .eyebrow in style.css. */
.weg__spur-titel {
  display: flex; align-items: center; gap: 0.5em;
  font-size: var(--step--1); font-weight: 600;
  color: var(--ink);
}
.weg__spur-titel::before {
  content: "";
  flex: none;
  inline-size: 0.7em; block-size: 0.7em;
  background: var(--spur);
}
/* Der Farbklang der FDP, eine Farbe je Spur. Dazu je ein zweiter Wert für
   die Schrift darauf: Weiss auf Cyan liegt bei 2,97:1 und fällt für diese
   Schriftgrösse durch, auf der Beruf-Spur steht der Text darum schwarz
   (7:1). Auf Dunkelblau und Magenta bleibt er weiss. */
.weg__spur--ausbildung { --spur: var(--blue-deep); --spur-text: var(--white); }
.weg__spur--beruf      { --spur: var(--cyan);      --spur-text: var(--ink); }
.weg__spur--firma      { --spur: var(--magenta);   --spur-text: var(--white); }

/* Die Schiene: eine durchgehende, schwach getönte Fläche über die volle
   Bahnbreite, in der Spurfarbe. Joel: eine Station wie Bridged läuft
   inhaltlich weiter, daneben standen bisher »einfach zwei Kästchen«. Mit
   der Schiene liest sich eine Lücke als »die Spur läuft weiter« statt als
   Leere — die gepunktete Mittellinie liegt weiterhin darauf und hält die
   Jahre auch in leeren Abschnitten sichtbar. */
.weg__bahn {
  position: relative;
  background:
    repeating-linear-gradient(to right, var(--line) 0 4px, transparent 4px 9px)
      center / 100% 1px no-repeat,
    color-mix(in srgb, var(--spur) 7%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--spur) 18%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--spur) 18%, transparent);
}

.weg__station {
  grid-column: var(--von) / var(--bis);
  /* Alle Stationen einer Spur liegen auf derselben Zeile. Ohne diese Angabe
     würde eine Überschneidung stillschweigend eine zweite Zeile öffnen —
     ein Rechenfehler in den Spalten fiele dann gar nicht auf. */
  grid-row: 1;
  position: relative;
  display: grid; align-content: start; gap: 0.1rem;
  padding: 0.6rem 0.7rem 0.7rem;
  background: var(--spur); color: var(--spur-text);
  /* Die Titel stehen teils in einer einzigen Jahresspalte. Getrennt wird
     deshalb — aber nur dort, wo im Markup ein ­ steht: die automatische
     Trennung setzte »Berufsmaturi-tät«. */
  hyphens: manual; overflow-wrap: break-word;
}

/* Was noch läuft, endet nicht mit einer Kante, sondern mit einer Spitze.
   Vorher war das eine weiche Maske: die Farbe verlief ins Nichts und der
   Text am rechten Rand verblasste mit. Jetzt bleibt die Fläche voll deckend
   und die Form selbst sagt »geht weiter«. */
.weg__station--laeuft {
  clip-path: polygon(0 0, calc(100% - 0.85rem) 0, 100% 50%, calc(100% - 0.85rem) 100%, 0 100%);
  padding-inline-end: 1.5rem;
}
/* Die kleine Marke dazu — ein Dreieck und das Wort. Steht als echter Text im
   Markup, nicht als CSS-Inhalt: sie ist eine Aussage, keine Dekoration.
   Gemischtschreibung statt gesperrter Versalien, seit dem 22.09.2026 im
   Sinn der gleichen Änderung an .eyebrow in style.css. */
.weg__marke {
  display: flex; align-items: center; gap: 0.4em;
  margin-block-start: 0.35rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.68rem;
  color: color-mix(in srgb, currentColor 80%, transparent);
}
.weg__marke::before {
  content: "";
  flex: none;
  inline-size: 0; block-size: 0;
  border-block: 0.28em solid transparent;
  border-inline-start: 0.42em solid currentColor;
}

/* Bridged und Arclumina: EIN Lauf mit zwei beschrifteten Abschnitten statt
   zwei getrennter Kästchen. Die Spalten des Laufs stehen im Markup
   (--teile), weil sie von den Jahren abhängen: Bridged deckt ein Jahr,
   Arclumina zwei. Die Trennung ist eine Haarlinie in der Fläche, kein
   Abstand — sonst wären es wieder zwei Kästchen. */
.weg__lauf {
  padding: 0;
  grid-template-columns: var(--teile, 1fr 1fr);
  align-content: stretch;
  gap: 0;
}
.weg__lauf-teil {
  display: grid; align-content: start; gap: 0.1rem;
  padding: 0.6rem 0.7rem 0.7rem;
  min-inline-size: 0;
}
.weg__lauf-teil + .weg__lauf-teil {
  border-inline-start: 1px solid color-mix(in srgb, var(--spur-text) 45%, transparent);
  padding-inline-end: 1.5rem;
}

.weg__jahre {
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.68rem; letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, currentColor 75%, transparent);
}
.weg__was {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(0.72rem, 0.85vw, 0.88rem); line-height: 1.25;
}
.weg__wo {
  font-size: clamp(0.66rem, 0.75vw, 0.78rem); line-height: 1.3;
  color: color-mix(in srgb, currentColor 78%, transparent);
}
/* Die Lücke in der Beruf-Spur trägt einen Namen, statt nur eine zu sein.
   Nur eine Ahnung von Farbe und eine gestrichelte Kontur: sie darf nicht
   wie eine Anstellung aussehen. */
.weg__station--luecke {
  background: color-mix(in srgb, var(--spur) 10%, transparent);
  color: var(--ink-mute);
  border: 1px dashed var(--spur);
}
.weg__station--luecke .weg__jahre,
.weg__station--luecke .weg__wo { color: var(--ink-mute); }

/* Die globale Regel gibt jedem p die Satzbreite --measure mit. In den
   Stationen bestimmt die Spalte die Breite, nicht der Text. */
.weg__station p { max-inline-size: none; }

/* Schmale Viewports: elf Spalten sind auf dem Telefon nicht lesbar. Die
   Achse fällt weg, jede Bahn wird zur Liste. Die Jahreszahl geht dabei
   nicht verloren — sie steht in jeder Station im Text. */
@media (max-width: 819px) {
  .weg__achse { display: none; }
  /* Gleich hohe Bahnen ergeben nur neben der Achse einen Sinn. Untereinander
     als Listen bekäme jede Bahn die Höhe der längsten — mit vier Bahnen
     Leerraum unter dem Unternehmertum. */
  .weg__plan { grid-template-rows: none; gap: var(--space-m); }
  .weg__bahn { grid-template-columns: 1fr; gap: 2px; background: none; box-shadow: none; }
  .weg__station { grid-column: auto; grid-row: auto; }
  /* Die Spitze braucht Breite, um zu wirken. In der Liste ist jede Station
     gleich breit — dort sagt die Marke »läuft« das allein. */
  .weg__station--laeuft { clip-path: none; padding-inline-end: 0.7rem; }
  .weg__lauf { grid-auto-flow: row; grid-template-columns: 1fr; }
  .weg__lauf-teil + .weg__lauf-teil {
    border-inline-start: 0;
    border-block-start: 1px solid color-mix(in srgb, var(--spur-text) 45%, transparent);
    padding-inline-end: 0.7rem;
  }
  .weg__was { font-size: var(--step-0); }
  .weg__wo { font-size: var(--step--1); }
  .weg__jahre { font-size: var(--step--1); }
  .weg__marke { font-size: 0.68rem; }
}

/* ---------- Politisches Engagement — der dunkle Akt ----------------------
   Die einzige Sektion der Seite auf farbigem Grund. Begruendung steht im
   Markup; hier nur, was daran technisch haengt.

   --blue-deep, nicht --blue-night: Dunkelblau ist auf dieser Seite schon die
   Farbe des Schlussbands, der Footer liegt eine Stufe tiefer. Zwei Toene, drei
   Flaechen — ein dritter Blauwert waere ein neuer Wert im Farbklang gewesen.

   Cyan auf --blue-deep kommt auf 3,2:1. Das reicht fuer Flaechen und fuer
   grosse Schrift (Schwelle 3:1) — die Zaehlziffern stehen bei 3rem aufwaerts.
   Kleine Schrift steht hier nie in Cyan, sondern in abgesetztem Weiss.
   -------------------------------------------------------------------------- */

.engagement {
  background: var(--blue-deep);
  color: var(--white);
}
.engagement h2,
.engagement h3 { color: var(--white); }
.engagement p { color: color-mix(in srgb, var(--white) 88%, transparent); }
/* Der blaue Fokusring waere hier unsichtbar (style.css, Abschnitt 2). */
.engagement :focus-visible { outline-color: var(--focus-on-dark); }

.engagement__inner { display: grid; gap: var(--space-l); }

/* Masthead: Ueberschrift links, Haltung rechts daneben. Die Haltung ist kein
   Nachsatz unter dem Titel, sondern sein Gegengewicht — darum steht sie auf
   derselben Hoehe und nicht darunter. Unter 900 px stapelt sie normal. */
.engagement__kopf { display: grid; gap: var(--space-m); }
@media (min-width: 900px) {
  .engagement__kopf {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-l);
    align-items: start;
  }
}
.engagement__haltung p { max-inline-size: 46ch; }

/* ---------- Aemter — drei Ebenen ineinander --------------------------------
   Joel: einzelne interne Aktivitaeten sind fuer eine persoenliche Website zu
   spezifisch — zeigen soll die Sektion die Funktionen, das Engagement und die
   Verantwortung. Die Aemter stehen darum zuerst und als eigenstaendiger
   Block, nicht als Fliesstext. Keine Eintrittsdaten (bestehende Regel).

   Bis zum 23.09.2026 ein 2x2-Raster mit Haarfugen — vier gleiche Felder, die
   nichts ueber ihr Verhaeltnis sagten. Neu liegen die Aemter in drei Rahmen
   ineinander: Schweiz, Kanton Zuerich, Region. Dieselbe Geste wie die Karte
   auf der Startseite (Knonaueramt › Kanton), nur still — Haarlinien, keine
   Flaechen, keine Bewegung ausser dem ueblichen Reveal.

   Nach innen werden die Linien kraeftiger (16 › 26 › 38 % Weiss), und nur der
   innerste Rahmen traegt einen Hauch Cyan: die Region, in der Joel lebt, ist
   der hellste Punkt. Der Ebenenname sitzt wie eine Fieldset-Legende auf der
   Oberkante und deckt sie mit dem Sektionsgrund ab — mit dem Cyan-Quadrat aus
   der Spurenplan-Legende davor. Cyan nur als Flaeche, nie als Schrift.
   -------------------------------------------------------------------------- */

.ebene {
  --kante: color-mix(in srgb, var(--white) 16%, transparent);
  position: relative;
  display: grid;
  gap: var(--space-m);
  padding: calc(var(--space-m) * 1.25) var(--space-m) var(--space-m);
  border: 1px solid var(--kante);
}
/* Ab 900 px liegt die naechste Ebene rechts neben dem Amt statt darunter —
   ein Fernrohr, das nach rechts hineinzoomt. Untereinander standen auf voller
   Wrapbreite drei fast leere Rahmen mit je einem Eintrag links. Die innerste
   Liste hat keine Ebene mehr neben sich und nimmt beide Spalten. */
@media (min-width: 900px) {
  .ebene { grid-template-columns: clamp(9rem, 16vw, 14rem) minmax(0, 1fr); }
  .ebene > .aemter:last-child { grid-column: 1 / -1; }
}
.ebene .ebene { --kante: color-mix(in srgb, var(--white) 26%, transparent); }
.ebene .ebene .ebene {
  --kante: color-mix(in srgb, var(--white) 38%, transparent);
  background: color-mix(in srgb, var(--cyan) 8%, transparent);
}

.ebene__name {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: var(--space-s);
  translate: 0 -50%;
  display: flex; align-items: center; gap: 0.5em;
  padding-inline: 0.5em;
  background: var(--blue-deep);
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.72rem; letter-spacing: 0.04em; line-height: 1;
}
.engagement .ebene__name { color: color-mix(in srgb, var(--white) 76%, transparent); }
.ebene__name::before {
  content: "";
  flex: none;
  inline-size: 0.7em; block-size: 0.7em;
  background: var(--cyan);
}

.aemter {
  margin: 0; padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-m);
}
/* Zwei Spalten nur, solange die Ebenen untereinander stehen. Im Fernrohr ab
   900 px bleibt der Region zu wenig Breite, »Stellvertretender Delegierter«
   braeche dort mitten im Titel. */
@media (min-width: 620px) and (max-width: 899px) {
  .aemter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.amt { display: grid; align-content: start; gap: 0.2em; }

/* Telefon: die Rahmen oeffnen sich nach rechts. Drei volle Rahmen kosten
   sechsmal den Innenabstand — so bleiben es drei, und die Ebenen lesen sich
   als eingerueckte Schienen links. */
@media (max-width: 619px) {
  .ebene {
    border-inline-end: 0;
    padding-inline: var(--space-s) 0;
  }
}
.amt__was {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--step-1); line-height: 1.15;
  color: var(--white);
}
.amt__wo {
  font-size: var(--step--1); line-height: 1.4;
  color: color-mix(in srgb, var(--white) 76%, transparent);
}

/* ---------- Einsaetze — durchnummeriert -----------------------------------
   Die drei Projekte sind der Proof unter der Rolle, nicht die Botschaft. Neu
   tragen sie eine Zaehlung: 01, 02, 03. Sie kommt aus einem CSS-Zaehler auf
   der <ol>, steht also nirgends im Markup und geht beim Umstellen oder
   Streichen einer Zeile nicht kaputt.

   Die Ziffer liegt als Flaeche hinter dem Text, nicht daneben: bei drei
   Spalten waere eine eigene Ziffernspalte je Karte dreimal derselbe leere
   Streifen. aria-hidden braucht es nicht — CSS-Inhalt aus ::before wird von
   Screenreadern der Sprachausgabe je nach Einstellung ohnehin uebersprungen,
   und die Ordnung steht semantisch in der <ol>.
   -------------------------------------------------------------------------- */

.einsaetze { display: grid; gap: var(--space-m); }
.einsaetze__titel { font-size: var(--step-2); }

.einsaetze__liste {
  counter-reset: einsatz;
  margin: 0; padding: 0;
  list-style: none;
  display: grid;
  gap: 1px;
  background: color-mix(in srgb, var(--white) 22%, transparent);
  border-block: 1px solid color-mix(in srgb, var(--white) 22%, transparent);
}
@media (min-width: 860px) {
  .einsaetze__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.einsatz {
  counter-increment: einsatz;
  position: relative;
  isolation: isolate;
  display: grid; align-content: start; gap: 0.35em;
  padding: var(--space-m) var(--space-m) calc(var(--space-m) * 2) 0;
  background: var(--blue-deep);
  overflow: hidden;
}
@media (min-width: 860px) {
  .einsatz + .einsatz { padding-inline-start: var(--space-m); }
}
.einsatz::before {
  content: counter(einsatz, decimal-leading-zero);
  position: absolute; z-index: -1;
  inset-block-end: -0.16em; inset-inline-end: 0.08em;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3.5rem, 7vw, 5.5rem); line-height: 1;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--cyan) 42%, transparent);
}
.einsatz__was {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-1); line-height: 1.2;
  color: var(--white);
}
.einsatz__text {
  font-size: var(--step--1); line-height: 1.55;
  color: color-mix(in srgb, var(--white) 78%, transparent);
  max-inline-size: none;
}

/* Die beiden Reportagefotos auf dunklem Grund. Ohne die 52rem-Deckelung:
   hier stehen sie in der vollen Wrapbreite und kommen dabei immer noch unter
   ihrer nativen Breite heraus (930 + 840 px verteilt auf 1180 px ergibt 464
   und 692) — es wird also nichts hochskaliert. */
.engagement .belege { max-inline-size: none; }

/* Pinnwand: der dunkle Grund ist die Wand, die Fotos hängen als weisse
   Abzüge daran, je leicht schief und mit einer Magenta-Nadel oben mittig.
   Die Legende ist ein eigener Notizzettel, der unten rechts über den Abzug
   gepinnt ist — ohne den Cyansteg, den sie sonst seitweit trägt. */
.engagement .belege { gap: var(--space-l); padding-block: var(--space-s) var(--space-m); }
.engagement .belege__figur {
  position: relative;
  padding: var(--space-s);
  background: var(--white);
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.25), 0 14px 28px rgb(0 0 0 / 0.35);
  rotate: var(--neigung);
}
.engagement .belege__figur--quer { rotate: calc(var(--neigung) * -1.25); }
.engagement .belege__figur::before,
.engagement figcaption::before {
  content: "";
  position: absolute;
  inset-block-start: -0.4rem;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: 1.1rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff5fb0, var(--magenta) 45%, var(--magenta-dark));
  box-shadow: 2px 4px 5px rgb(0 0 0 / 0.4);
}
.engagement .belege figcaption {
  position: relative;
  inline-size: fit-content;
  max-inline-size: 85%;
  margin: -1.75rem calc(var(--space-s) * -2) 0 auto;
  padding: var(--space-s) var(--space-m);
  border: 0;
  background: var(--cyan-soft);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.2), 0 8px 16px rgb(0 0 0 / 0.3);
  font-size: var(--step-0);
  line-height: 1.35;
  color: var(--ink);
  rotate: 3deg;
}
.engagement .belege__figur--quer figcaption { rotate: -2deg; }
/* Nadel auf dem Zettel in Cyan, damit sie sich von der Bildnadel abhebt. */
.engagement figcaption::before {
  inline-size: 0.85rem;
  background: radial-gradient(circle at 35% 30%, #7fd6ff, var(--cyan) 45%, var(--blue-deep));
}

/* ---------- Privates — heller Gegenschlag ---------------------------------
   Wie Intro bewusst schmal statt ueber die volle Sektion: das letzte Stueck
   der Seite ist wieder leise, nicht so dicht wie das Engagement darueber.

   .privat__bild trug bis zum 22.09.2026 position: sticky — dasselbe Muster,
   das der Auftraggeber am Kicker bemaengelt hat. Auf der ganzen Seite gibt es
   kein sticky mehr. Nicht wieder einfuehren.
   -------------------------------------------------------------------------- */

.privat__inner {
  display: grid;
  gap: var(--space-l);
  max-inline-size: 52rem;
}

/* Ab 1000 px bricht die Sektion aus der 52rem-Spalte aus: Text und Streifen
   bleiben links schmal, die Bildflaeche nimmt die rechte Spalte und laeuft
   bis an den Bildschirmrand.

   --rand ist der Weg von der rechten Wrapkante zum Bildschirmrand. Nicht
   `calc(50% - 50vw)`: ein Prozentwert in margin bezieht sich auf die
   INLINE-GROESSE DES ENTHALTENDEN BLOCKS — hier also auf die Rasterspalte,
   nicht auf den Wrap. Der Anschnitt schoss damit weit ueber den Rand hinaus
   und beschnitt das Foto. Der Wrap ist min(--wrap, 100% - 2 * --gutter) und
   zentriert; rechts bleibt also entweder die Gosse oder die halbe Differenz
   zur Wrapbreite, je nachdem, welche groesser ist. */
@media (min-width: 1000px) {
  .privat__inner {
    --rand: max(var(--gutter), (100vw - var(--wrap)) / 2);
    max-inline-size: none;
    grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
    gap: var(--space-l);
    align-items: start;
  }
  .privat__flaeche {
    grid-column: 2;
    grid-row: 1 / span 4;
    margin-inline-end: calc(var(--rand) * -1);
    align-self: stretch;
  }
}

.privat__lead {
  font-family: var(--font-display);
  font-size: var(--step-1); font-weight: 500; line-height: 1.35;
  color: var(--ink);
}

/* ---------- Orte — Steckbrief-Streifen ------------------------------------
   Buergerort, Wohnort, Aufgewachsen standen bis zum 22.09.2026 als Aufzaehlung
   in einem Satz. Drei gleichartige Fakten sind eine Liste, kein Satz — als
   Streifen unter einer 2px-Linie liest man sie in einem Blick.
   -------------------------------------------------------------------------- */

.orte {
  margin: 0; padding: var(--space-s) 0 0;
  display: grid;
  gap: var(--space-m);
  border-block-start: 2px solid var(--ink);
}
@media (min-width: 520px) {
  .orte { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-s); }
}
.ort { display: grid; align-content: start; gap: 0.1em; }
.ort__label {
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--ink-mute);
}
.ort__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--step-1); line-height: 1.15;
  color: var(--ink);
}

/* ---------- Freizeit — typografische Reihe --------------------------------
   Kein Pillen- oder Chipraster: Joel bemaengelt ausdruecklich Elemente, die
   klickbar aussehen und keine sind (siehe style.css, Stimmen-Slider). Die
   Woerter stehen darum als Schrift da, gross, jedes mit dem Cyan-Quadrat, das
   im Spurenplan die Legende traegt — dieselbe Geste, zweiter Einsatz.
   -------------------------------------------------------------------------- */

.freizeit { display: grid; gap: var(--space-s); }
.freizeit__label {
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--ink-mute);
}
.freizeit__liste {
  margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
  gap: 0.35em 1.1em;
}
.freizeit__liste li {
  display: flex; align-items: center; gap: 0.45em;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-2); line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.freizeit__liste li::before {
  content: "";
  flex: none;
  inline-size: 0.4em; block-size: 0.4em;
  background: var(--cyan);
}

/* Die cyanhelle Flaeche hinter dem Sommerfoto. Sie traegt den Anschnitt nach
   rechts, das Bild selbst nicht: joel-sommerfest.jpg ist 1340 px breit
   (--nativ) und wird nie darueber hinaus skaliert. */
.privat__flaeche {
  background: var(--cyan-soft);
  padding: var(--space-m);
  display: grid; align-content: center;
}

/* ---------- Reportagebilder im Textfluss (ueber-mich.html) -----------------
   Zwei Fotos nebeneinander, hoch und quer gemischt. Der flex-grow-Wert jeder
   Figur ist ihr Seitenverhaeltnis (Breite geteilt durch Hoehe). Dadurch teilen
   sich die Bilder die Zeile genau so auf, dass sie gleich hoch herauskommen —
   ohne object-fit, ohne Beschnitt.

   Die drei echten Fotos sind klein (930×1240, 840×752, 1340×1034) und fielen
   neben dem uebrigen Material als »schlechter aufgeloest« auf. Ersetzen geht
   nicht, also integrieren: jede Figur traegt ihre native Breite als --nativ
   und wird nie darueber hinaus skaliert, keines laeuft randabfallend, und
   alle drei bekommen dieselbe leicht zurueckgenommene Saettigung plus die
   Legende mit Cyansteg. So lesen sie als gewollte Reportageebene statt als
   schwaechere Bilder.
   -------------------------------------------------------------------------- */

.belege {
  display: flex;
  align-items: flex-start;
  gap: var(--space-m);
  max-inline-size: 52rem;
  margin-block-start: var(--space-l);
}

.belege__figur { margin: 0; min-inline-size: 0; max-inline-size: var(--nativ, 100%); }
.belege__figur img { inline-size: 100%; block-size: auto; }

.belege__figur--hoch { flex: 0.75 1 0; }   /* 930 / 1240 */
.belege__figur--quer { flex: 1.117 1 0; }  /* 840 / 752  */

/* Versetzt statt buendig: die beiden Fotos standen oben auf einer Linie und
   lasen sich dadurch als Bilderpaar aus einem Raster. Faellt das quere um ein
   Stueck ab, entsteht eine Reportagespalte — und die Legende des hohen Fotos
   liegt nicht mehr auf derselben Zeile wie das zweite Bild. Nur ab 760 px:
   darunter steht ohnehin jedes Foto fuer sich (siehe ganz unten). */
@media (min-width: 760px) {
  .belege--versetzt .belege__figur--quer { margin-block-start: var(--space-l); }
}

/* ---------- Einzelnes Bild ueber die Satzbreite hinaus --------------------- */

.beleg {
  max-inline-size: min(52rem, var(--nativ, 100%));
  margin: var(--space-l) 0 0;
}
/* In der cyanhellen Flaeche sitzt das Bild mittig und bringt seinen Abstand
   ueber deren Polster mit — der Vorlauf von oben waere dort doppelt. */
.privat__flaeche .beleg { margin: 0; justify-self: center; }
.beleg img { inline-size: 100%; block-size: auto; }

/* Eine Behandlung fuer alle drei Reportagefotos: leicht zurueckgenommene
   Saettigung. Sie nimmt den Aufloesungsunterschied zum uebrigen, gerenderten
   Material aus dem direkten Vergleich und macht aus der Schwaeche eine
   erkennbare Ebene. Kein Filter auf Portraet oder Hero. */
.belege__figur img,
.beleg img { filter: saturate(0.88); }

/* ---------- Bildlegende ----------------------------------------------------
   Derselbe Cyan-Steg wie bei .forderung__bezug — die Legende ist ein Beleg
   zum Text daneben, kein eigener Inhalt.
   -------------------------------------------------------------------------- */

.belege figcaption,
.beleg figcaption {
  margin-block-start: var(--space-s);
  padding-inline-start: var(--space-s);
  border-inline-start: 3px solid var(--cyan);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-mute);
}

/* Unter 760px steht jedes Foto fuer sich ueber die volle Spaltenbreite. Die
   Seitenverhaeltnis-Verteilung oben braucht zwei Spalten, um zu greifen. */
@media (max-width: 759px) {
  .belege { display: grid; gap: var(--space-l); }
  .belege__figur--hoch,
  .belege__figur--quer { flex: none; }
}