/* =========================================================================
   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 dunklen Block des
   Engagements, 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.
   -------------------------------------------------------------------------- */

/* v16: Seit das Engagement nicht mehr dunkel ist, liegen alle Sektionen auf
   Weiss. Zwei volle Polster an jeder Naht waren zu viel Luft (Joel:
   »zwischen Werdegang und dem oben ein bisschen weniger space«) — die Naht
   trägt nur noch das Bodenpolster der oberen Sektion. */
.section + .section { padding-block-start: 0; }

/* ---------- Intro — »Hier fühle ich mich zuhause« (ueber-mich.html) -------
   Text links, Porträt rechts ab 900 px, darunter gestapelt. Seit v13
   ohne Scroll-Inszenierung.
   -------------------------------------------------------------------------- */

/* v16: oben bündig statt mittig (Joel). */
.zuhause__inner { display: grid; gap: var(--space-l); align-items: start; }
@media (min-width: 900px) {
  .zuhause__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}
.zuhause__lead {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-2); line-height: 1.2; color: var(--blue-deep);
  padding-inline-start: var(--space-m);
  border-inline-start: 3px solid var(--cyan);
}
.zuhause__bild { margin: 0; }
.zuhause__bild img {
  inline-size: 100%;
  /* Immer 4:5. Die Höhengrenze läuft über die Breite (56vh = 70vh × 4/5).
     Vorher stauchte max-block-size: 70vh das Format auf niedrigen Fenstern,
     und der ganze Überschuss ging oben am Kopf weg. */
  aspect-ratio: 4 / 5; max-inline-size: 56vh; margin-inline-start: auto;
  /* v16: weniger Luft über dem Kopf als vorher (Joel), aber nicht
     angeschnitten: 80 % lässt rund ein Fünftel der Bildhöhe Kopfraum. */
  object-fit: cover; object-position: 50% 80%;
}

/* ---------- 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. */
.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;
}
/* Bridged und Arclumina: ein Lauf mit zwei Abschnitten. Seit v12 liegen
   die Abschnitte im selben 3-px-Abstand wie alle anderen Stationen — die
   Fläche trägt jeder Abschnitt selbst, die Spitze am Ende bleibt am Lauf. */
.weg__lauf {
  padding: 0;
  grid-template-columns: var(--teile, 1fr 1fr);
  align-content: stretch;
  gap: 3px;
  background: none;
}
.weg__lauf-teil {
  display: grid; align-content: start; gap: 0.1rem;
  padding: 0.6rem 0.7rem 0.7rem;
  min-inline-size: 0;
  background: var(--spur);
}
.weg__lauf-teil:last-child { 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 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: 3px; 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 »seit« 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:last-child { 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); }
}

/* ---------- Politisches Engagement ---------------------------------------
   Seit v16 weiss statt dunkelblau und ohne Rollenliste: Joels Text und das
   Foto der Sammelaktion, gebaut wie Privates (.privat__kopf). Das Foto
   steht hier links, sonst stünden drei Sektionen hintereinander mit Text
   links und Bild rechts.
   -------------------------------------------------------------------------- */

/* Oben bündig: Bild und Titel beginnen auf derselben Linie (Joel). */
.engagement .privat__kopf { align-items: start; }
@media (min-width: 900px) {
  .engagement .privat__bild { order: -1; }
}

/* ---------- Privates — »Abseits von Beruf und Politik« ---------------------
   Text und Foto, zweispaltig ab 900 px. Die Zeile mit den drei Sportarten
   darunter ist seit v16 raus.
   -------------------------------------------------------------------------- */

.privat__kopf { display: grid; gap: var(--space-l); align-items: center; }
@media (min-width: 900px) {
  .privat__kopf { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}
.privat__lead {
  font-family: var(--font-display);
  font-size: var(--step-1); font-weight: 500; line-height: 1.35;
  color: var(--ink);
}
.privat__bild { margin: 0; max-inline-size: var(--nativ, 100%); }
.privat__bild img { inline-size: 100%; block-size: auto; filter: saturate(0.88); }

/* ---------- 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;
}
.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; }
}