/* Die Seite "Über mich" (/ueber).
 * ===========================================================================
 *
 * Sie war zuerst ein Abschnitt auf der Startseite. Sven wollte einen eigenen
 * Bereich wie Funktionen, Betrieb und Preise - richtig so: Als Abschnitt in
 * der Mitte war sie nur zu erreichen, wer bis dorthin rollte, und genau das
 * ging zeitweise nicht.
 *
 * WARUM EIN EIGENER STILBOGEN und nicht ein Block in styles.css:
 * styles.css gehoert Kamakasis Spur (siehe AUSTAUSCH/REVIER.md). Der Abschnitt
 * ist rein additiv, also kostet ihn eine eigene Datei nichts ausser einer Zeile
 * im SHELL des Service Workers - und spart die Zusammenfuehrung in einer Datei,
 * an der zwei Haende arbeiten.
 *
 * ALLE FARBEN KOMMEN AUS TOKEN. Kein einziger fester Farbwert. Der dunkle
 * Modus wird dadurch nicht "auch noch" unterstuetzt, sondern gar nicht erst
 * zum Sonderfall - er faellt heraus, weil --surface-2 und --border im dunklen
 * Satz einfach andere Werte tragen.
 *
 * Die Karten heissen .lp-feat, nicht .ueber-karte. Das ist Absicht:
 * app.js beobachtet in beobachteEinblendungen() genau diese Klasse. Wer hier
 * eine eigene Kartenklasse erfindet, bekommt einen Abschnitt, der als einziger
 * auf der Seite nicht einblendet - und merkt es erst, wenn es jemand meldet.
 * ========================================================================== */

.lp-ueber {
  background: var(--surface-1);
  border-block: 1px solid var(--border);
}

/* ---------- Der obere Teil: Erzaehlung links, Kurzprofil rechts ---------- */

.ueber-raster {
  display: grid;
  gap: clamp(24px, 4vw, 40px);
  max-width: 1100px;
  margin: 0 auto 40px;
  align-items: start;
}
/* Erst ab 900px zwei Spalten. Darunter steht das Kurzprofil UNTER der
   Erzaehlung - wer auf dem Handy liest, will zuerst wissen, wer da spricht,
   und erst danach die Stationen. */
@media (min-width: 900px) {
  .ueber-raster { grid-template-columns: 1.45fr 1fr; }
}

.ueber-kopfzeile {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}

/* Das Medaillon.
   Es enthaelt ZWEI Kinder im SELBEN Rasterfeld: das Monogramm und darueber
   das Foto. Ohne `grid-area: 1/1` legte das Raster sie in zwei Zeilen und
   beides waere halb zu sehen. Laedt das Foto nicht, bleibt das Monogramm
   stehen - besser als ein leerer Kreis.

   Das Foto ist ein QUADRAT, kein rundes PNG: Das Runde macht dieses
   Regelwerk (border-radius + overflow), nicht die Bilddatei. Damit bleibt es
   ein JPEG von 22 KB statt eines PNG mit Alphakanal, und die Form laesst sich
   hier aendern, ohne das Bild neu zu schneiden.

   Der Ausschnitt selbst ist gerechnet: Das Selfie war um 38.8 Grad geneigt
   (an den Pupillen gemessen), das Foto ist um 39 Grad zurueckgedreht. Der
   Kreis liegt so, dass KEIN Punkt darin von ausserhalb des Fotos stammt -
   Svens Kopf beruehrt im Original den rechten Bildrand, ein mittiger
   Ausschnitt lief dort hinaus. */
.ueber-bild {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent-fg);
  border: 2px solid var(--accent);
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: .04em;
  user-select: none;
}
@media (min-width: 900px) {
  .ueber-bild { width: 120px; height: 120px; }
}
.ueber-bild > * { grid-area: 1 / 1; }
.ueber-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ueber-name { margin: 0; font-size: var(--fs-2xl); line-height: 1.2; }
.ueber-rolle {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: var(--fs-lg);
}

.ueber-text p {
  color: var(--text-secondary);
  font-size: var(--fs-lg);
  line-height: 1.7;
  margin: 0 0 16px;
  max-width: 62ch;   /* Lesbreite. Darueber springt das Auge beim Zeilenwechsel. */
}
.ueber-text p:last-child { margin-bottom: 0; }
.ueber-text strong { color: var(--text-primary); font-weight: 600; }

/* ---------- Kurzprofil ---------- */

.ueber-profil {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
}
.ueber-profil h2 {
  font-size: var(--fs-lg);
  margin: 0 0 16px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}
.ueber-profil h2 + .ueber-block { margin-top: 0; }

.ueber-block { margin-top: 20px; }
.ueber-block-titel {
  margin: 0 0 8px;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-primary);
}
.ueber-block ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ueber-block li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 6px;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--text-secondary);
}
.ueber-block li:last-child { margin-bottom: 0; }
.ueber-block li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
/* Die Jahreszahl steht mit im Listenpunkt, nicht in einer eigenen Spalte:
   Zwei Spalten brechen auf schmalen Geraeten unschoen, und die Jahre sind
   unterschiedlich lang ("2018-2020" gegen "seit 2026"). */
.ueber-block .jahr {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ueber-beleg {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.55;
}

/* Das Portraet in der Teaser-Karte auf der Startseite.
   Es sitzt im selben Feld wie die Symbole der anderen vier Karten (.lp-teaser-ic
   gibt Groesse und Rundung vor); hier steht nur, was ein Bild zusaetzlich
   braucht - und dass der Akzentwechsel beim Ueberfahren es nicht einfaerbt. */
.lp-teaser-portraet { padding: 0; overflow: hidden; background: none; }
.lp-teaser-portraet img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-teaser-karte:hover .lp-teaser-portraet { background: none; }

/* ---------- Die drei Karten darunter ----------
   Sie tragen .lp-feat (siehe Kopf dieser Datei). Hier steht nur, was dort
   fehlt: die Ueberschrift ueber der Reihe. */
.ueber-zwischentitel {
  max-width: 1100px;
  margin: 0 auto 20px;
  font-size: var(--fs-xl);
  text-align: center;
}