/* ═══════════════════════════ about.css ═══════════════════════════
   #about: Vorstellungsbereich, Fokus-Themen und Signatur-Timeline.

   Überschreibt die provisorische Section-Regel aus global.css (Abschnitt 8)
   gezielt über #about: Blockfluss statt vertikal zentriertem Flex, sonst
   würde ein so langer Abschnitt mittig "schweben" statt oben zu beginnen
   und nach unten zu wachsen. .about-title (Klasse) reicht aus, um die
   blasse main-section-h2-Platzhalterfarbe zu überschreiben. Eine Klasse
   schlägt zwei Typselektoren immer, unabhängig von deren Reihenfolge im
   Dokument.

   Die "Laser"-Optik (glühender roter Faden mit mitwandernder Kugel) ist
   von einer dunklen Referenzseite inspiriert, hier bewusst auf das
   bestehende HELLE Farbschema übertragen: --accent bleibt dieselbe
   Markenfarbe, der Glow läuft nur gedämpfter, damit er auf --bg
   (#F7F6F3) nicht schmutzig statt "High-Tech" wirkt. Bewusst KEIN
   Kennzahlen-Dashboard (Bento-Kacheln mit hochzählenden Zahlen) mehr für
   die Einleitung: das passte nicht zu einem ersten Ausbildungsjahr, in
   dem es noch wenig zu zählen gibt (siehe Abschnitt 2, Fokus-Themen). */

#about{
  display:block;
  padding:calc(var(--nav-h) + var(--gutter) * 1.4) var(--gutter) calc(var(--gutter) * 1.6);
}

.about-wrap{
  display:flex;flex-direction:column;
  gap:var(--section-gap);
}


/* ───────────────────────── 1. Vorstellung ───────────────────────── */

.about-title{
  position:relative;
  margin:0 0 clamp(28px,5vw,48px);
  padding-bottom:14px;
  font-family:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  font-size:clamp(32px,5vw,52px);font-weight:600;letter-spacing:-.02em;
  color:var(--ink);
}
.about-title .accent{color:var(--accent-ink)}
/* Signatur-Strich, wiederkehrend unter jedem Haupttitel (siehe auch
   .projects-title und .contact-title), derselbe rote Strich wie unter
   .timeline-item-title, hier als roter Faden, der sich sitenweit durch
   die Section-Überschriften zieht. */
.about-title::after{
  content:'';
  position:absolute;left:0;bottom:0;
  width:44px;height:3px;border-radius:2px;
  background:var(--accent);
}

.about-text{
  margin:0;
  max-width:62ch;
  font-size:clamp(16px,1.6vw,18px);line-height:1.75;
  color:var(--muted);
}


/* ───────────────────────── 2. Signatur-Timeline ────────────────────
   Zickzack-Editorial-Layout statt schmaler Randspalte: der Faden läuft
   MITTIG durch .timeline-wrap, Stationen wechseln abwechselnd links/rechts
   (siehe .timeline-item weiter unten, nth-child(odd/even)). Ab 760px
   (Abschnitt 6) kollabiert das auf eine einspaltige Randspalte wie bei
   Projects/Skills. Zwei echte Spalten plus grosse Jahres-Typografie
   bräuchten dort mehr Breite, als schmale Screens hergeben.

   .timeline-wrap trägt Positionierung, das Signatur-SVG (Markup siehe
   index.html) und die Kugel. <ol> erlaubt laut HTML-Spec nur <li> als
   Kinder. Deshalb sitzen Pfad und Kugel auf dem Wrapper aussen herum,
   nicht auf der Liste selbst. Volle Breite von .about-wrap (kein eigenes
   max-width mehr), dieselbe Breite wie die Einleitung darüber, statt wie
   zuvor eine schmalere, isolierte Spalte. */

.timeline-wrap{
  position:relative;
}

.timeline{
  margin:0;padding:0;list-style:none;
  display:flex;flex-direction:column;
  gap:clamp(96px,13vw,180px);
}

/* Echte S-Kurve statt gerader Linie: js/about.js misst nach jedem Layout
   die tatsächliche Position jedes Markers (siehe .timeline-marker/
   nth-child weiter unten: die Mittelspalte sitzt pro Station an einer
   ANDEREN Stelle, dank asymmetrischer grid-template-columns) und
   konstruiert d + viewBox so, dass der Pfad exakt durch jeden Marker-
   Mittelpunkt läuft, in echten Pixel-Einheiten (viewBox = Wrap-Grösse in
   px, 1:1, keine Streckung nötig). Das SVG selbst ist deshalb schlicht
   voll-flächig. Die eigentliche Form kommt komplett aus JS.

   Zwei deckungsgleiche <path>-Elemente (Markup siehe index.html), keine
   Pseudoelemente: ein Pfad mit Schwung lässt sich über d nicht als
   ::before/::after ausdrücken. .timeline-ink-base ist der neutrale
   Grundpfad, immer sichtbar, auch ohne JS (dann eine simple, von JS
   unangetastete Gerade als HTML-Fallback). .timeline-ink-line ist die rote
   "Tinte": js/about.js setzt ihr stroke-dasharray auf die Pfadlänge und
   zieht stroke-dashoffset gedämpft zurück, während gescrollt wird. Der
   Pfad "zeichnet" sich damit wortwörtlich nach. Der Glow (drop-shadow
   statt box-shadow, da SVG) übernimmt die "Laser"-Optik. */
.timeline-ink{
  position:absolute;inset:0;
  width:100%;height:100%;
  overflow:visible;
}
.timeline-ink-base,
.timeline-ink-line{
  fill:none;
  stroke-width:3;
  stroke-linecap:round;
  /* KEIN vector-effect:non-scaling-stroke mehr: das war nötig, solange
     preserveAspectRatio="none" die Y-Achse gegenüber X unterschiedlich
     staucht/streckt (Vorversion). Seit js/about.js die viewBox 1:1 auf
     echte Pixelmasse setzt (updateCurve), gibt es keine Streckung mehr,
     die kompensiert werden müsste. */
}
.timeline-ink-base{stroke:var(--hairline)}
.timeline-ink-line{
  stroke:var(--accent);
  filter:drop-shadow(0 0 5px rgba(218,41,28,.55));
  /* Keine transition hier: js/about.js dämpft stroke-dashoffset bereits
     selbst framerate-unabhängig (eigener rAF-Loop, gleiches Muster wie
     heroPointer.js) und schreibt jeden Frame einen bereits geglätteten
     Wert. Eine zusätzliche CSS-transition würde diese Glättung ein zweites
     Mal draufsetzen und den Strich spürbar hinter der (selbst schon
     gedämpften) Kugel herhinken lassen statt synchron mit ihr zu laufen. */
}

/* Echtes SVG-<circle> statt eines div: es lebt als Kind direkt IM SVG
   (Markup siehe index.html). cx/cy schreibt js/about.js bei jedem Frame
   per getPointAtLength() in denselben Pixel-Koordinaten wie der Pfad
   selbst. Die Kugel reitet damit WIRKLICH auf der Kurve mit, statt wie in
   der vorigen, geraden Fassung nur auf einer festen Mittelachse. fill/stroke
   statt background/border, filter:drop-shadow statt box-shadow: die
   SVG-Pendants derselben Optik. */
.timeline-orb{
  /* Radialer Verlauf (index.html, <radialGradient id="timeline-orb-gradient">)
     statt flacher Füllung, dasselbe "glänzende Kugel"-Prinzip wie bei
     .timeline-marker, hier per SVG-Gradient statt CSS background. Der
     dritte drop-shadow (dunkel, ohne Farbe) legt zusätzlich einen kleinen
     Schlagschatten unter die Kugel, für Volumen statt nur Glow. */
  fill:url(#timeline-orb-gradient);
  stroke:var(--accent);
  stroke-width:4;
  filter:drop-shadow(0 0 6px rgba(218,41,28,.55)) drop-shadow(0 0 14px rgba(218,41,28,.3)) drop-shadow(0 2px 3px rgba(0,0,0,.25));
  /* Kein transition auf cx/cy: js/about.js dämpft die Bewegung bereits
     selbst (siehe .timeline-ink-line oben) und schreibt jeden Frame einen
     schon geglätteten Pixelwert. Eine zusätzliche transition würde nur
     Nachlauf auf Nachlauf stapeln. */
  /* Sanftes Atmen, auch ohne dass gerade eine neue Station erscheint.
     Sonst wirkt die Kugel zwischen zwei Stationen leblos statt "unter
     Strom". prefers-reduced-motion dämpft das automatisch mit (siehe
     global.css, Abschnitt 11: animation-duration wird dort auf .01ms
     gezwungen, ganz ohne eigene Zusatzregel hier). */
  animation:orb-pulse 2.6s ease-in-out infinite;
  pointer-events:none;
}

@keyframes orb-pulse{
  0%,100%{filter:drop-shadow(0 0 6px rgba(218,41,28,.55)) drop-shadow(0 0 14px rgba(218,41,28,.3)) drop-shadow(0 2px 3px rgba(0,0,0,.25))}
  50%{filter:drop-shadow(0 0 9px rgba(218,41,28,.7)) drop-shadow(0 0 20px rgba(218,41,28,.4)) drop-shadow(0 2px 3px rgba(0,0,0,.25))}
}

/* Drei Spalten: Inhalt links | Mittelspalte mit dem Marker | Inhalt rechts.
   .timeline-year und .timeline-card teilen sich dieselbe Zeile (grid-row:1)
   und liegen auf ENTGEGENGESETZTEN Aussenspalten. Welche Spalte welches
   Element bekommt, kehrt sich bei jeder zweiten Station um (siehe
   nth-child-Regeln unten). Reihenfolge im HTML bleibt unverändert (Jahr vor
   Karte, Marker aria-hidden dazwischen). Die visuelle Seite kommt allein
   aus grid-column, das Markup liest sich also für Screenreader weiterhin
   chronologisch, unabhängig von links/rechts. */
.timeline-item{
  position:relative;
  display:grid;
  grid-template-columns:1fr clamp(40px,6vw,64px) 1fr;
  align-items:start;
  column-gap:clamp(20px,4vw,40px);
}

.timeline-marker{
  grid-column:2;grid-row:1;
  justify-self:center;
  /* Kleiner Versatz statt exakt row-Start: die grosse Jahres-Typografie
     und die Karte beginnen optisch nicht auf derselben Grundlinie (Karte
     hat zusätzlich Padding). Dieser Nudge lässt den Punkt ungefähr auf
     Höhe der ersten Textzeile beider Seiten sitzen, statt spürbar darüber
     zu schweben. */
  margin-top:10px;
  width:20px;height:20px;border-radius:50%;
  /* Radialer Verlauf statt flacher Fläche: heller "Lichtreflex" oben links,
     dunkelt zum Rand hin leicht ab und lässt den Punkt wie eine glänzende
     Kugel wirken statt wie eine flache Scheibe. Zusammen mit dem Schlag-
     schatten unten der eigentliche 3D-Hinweis (rotateX auf Text/Karten
     hatte sich als kontraproduktiv erwiesen, siehe Kommentar weiter oben.
     Das hier kippt nichts, sondern schattiert nur). */
  background:radial-gradient(circle at 35% 30%, #ffffff, var(--surface) 55%, #d9d7d1 100%);
  border:3px solid var(--accent);
  /* Ring in Seitenfarbe trennt den Punkt von der durchlaufenden Linie
     dahinter, der weiche Schatten darunter gibt ihm zusätzlich Volumen. */
  box-shadow:0 0 0 4px var(--bg), 0 3px 5px rgba(0,0,0,.18);
  /* Über dem Faden UND den Karten links wie rechts, ohne dass eine der
     beiden Seiten durch DOM-Reihenfolge zufällig gewinnt. */
  z-index:1;
}

/* Grosse Editorial-Typografie statt kleinem Badge, der eigentliche
   Blickfang jeder Station, im Zusammenspiel mit der Karte auf der
   jeweils anderen Spalte (siehe .timeline-item oben). text-align kippt
   pro Seite (Regeln weiter unten): auf der linken Spalte rechtsbündig,
   damit der Text zur Mittellinie hin "wächst", statt mit Luft zur Karte
   zu enden. */
.timeline-year{
  grid-row:1;
  margin:0;
  font-family:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  font-size:clamp(26px,3.6vw,46px);font-weight:600;
  line-height:1.05;letter-spacing:-.01em;
  color:var(--ink);
}

/* Abwechselnde Seiten: ungerade Stationen (1., 3., ...) haben das Jahr
   links/Karte rechts, gerade Stationen spiegelbildlich, das Zickzack, das
   dem Abschnitt seinen Charakter gibt. grid-column gewinnt unabhängig von
   der DOM-Reihenfolge im Markup (siehe Kommentar oben).

   Symmetrische Spaltenbreiten (1fr/auto/1fr, siehe .timeline-item oben)
   für BEIDE Varianten: die Mittelspalte (und mit ihr .timeline-marker,
   siehe justify-self:center dort) sitzt dadurch bei jeder Station exakt
   auf der Wrap-Mitte. Der Signatur-Pfad in js/about.js läuft weiterhin
   durch die gemessenen Marker-Positionen, ergibt bei identischer
   X-Position aber automatisch eine gerade Linie statt einer Kurve: keine
   eigene Gerade-statt-Kurve-Logik nötig, nur diese Spaltenwahl hier. */
.timeline-item:nth-child(odd) .timeline-year{grid-column:1;text-align:right}
.timeline-item:nth-child(odd) .timeline-card{grid-column:3}

.timeline-item:nth-child(even) .timeline-year{grid-column:3;text-align:left}
.timeline-item:nth-child(even) .timeline-card{grid-column:1}

/* Eine eigene Karte statt frei fliessendem Text hebt jede Station optisch
   von der nächsten ab, statt dass fünf Absätze ohne Kontur ineinanderlaufen.
   Hover/Fokus liegt bewusst HIER und nicht auf .timeline-item: eigenes
   Element, eigene transition, keine Berührung mit der gestaffelten
   Einblend-transition weiter unten (siehe Kommentar im HTML). */
.timeline-card{
  grid-row:1;
  padding:var(--card-padding);
  border-radius:var(--radius-card);
  background:var(--surface);
  border:1px solid var(--hairline);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, var(--shadow-xl);
  transition:transform .3s var(--settle), box-shadow .3s var(--settle), border-color .3s var(--settle);
}
.timeline-item:hover .timeline-card,
.timeline-item:focus-within .timeline-card{
  transform:translateY(-3px);
  border-color:rgba(218,41,28,.25);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, var(--shadow-xl);
}

.timeline-item-title{
  position:relative;
  margin:0 0 6px;padding-bottom:9px;
  font-family:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  font-size:clamp(18px,2.2vw,22px);font-weight:600;letter-spacing:-.01em;
  color:var(--ink);
}
/* Unterstreichung, die sich wie ein Schlussstrich unter den Titel zieht,
   dieselbe "von Hand geschrieben"-Idee wie der Signatur-Pfad daneben, nur
   im Kleinen. scaleX statt width: reine Compositor-Eigenschaft, siehe
   Begründung beim Faden weiter oben. Startet erst, nachdem die Karte
   selbst eingelaufen ist (+.3s zur Basisverzögerung), damit es wie ein
   nachträglicher Federstrich wirkt statt wie Teil derselben Bewegung. */
.timeline-item-title::after{
  content:'';
  position:absolute;left:0;bottom:0;
  width:34px;height:2px;border-radius:2px;
  background:var(--accent);
  transform-origin:left;
  transform:scaleX(0);
}
.timeline-item.is-pending.is-visible .timeline-item-title::after{
  transform:scaleX(1);
  transition:transform .45s var(--spring);
  transition-delay:calc(var(--i,0) * 70ms + .3s);
}

.timeline-item-desc{
  margin:0;max-width:56ch;
  font-size:15.5px;line-height:1.65;
  color:var(--muted);
}

.timeline-tags{
  display:flex;flex-wrap:wrap;gap:8px;
  margin:14px 0 0;padding:0;list-style:none;
}
.timeline-tag{
  padding:4px 11px;
  border-radius:var(--radius-tag);
  background:var(--bg);
  border:1px solid var(--hairline);
  font-size:12.5px;font-weight:500;
  color:var(--muted);
}


/* ─────────────────── 3. Scroll-Einblendung ────────────────────────
   .reveal ist der Hook für die Timeline-Stationen: Fade+Slide beim
   Einlaufen. Der Marker-Bounce darunter kommt oben drauf.

   Grundzustand = sichtbar (gleiches Prinzip wie beim Hero, siehe
   hero.css). Ohne JS oder ohne IntersectionObserver-Unterstützung
   bleibt alles vollständig lesbar, nur ohne den Effekt.

   js/about.js setzt .is-pending NUR, wenn ein Observer tatsächlich
   läuft, und hebt es danach Element für Element per .is-visible wieder
   auf. prefers-reduced-motion wird schon dort abgefangen (der Observer
   startet gar nicht). Die globale Regel in global.css (Abschnitt 11)
   sichert zusätzlich ab, falls die Einstellung mitten in der Sitzung
   wechselt, während schon Elemente auf .is-pending stehen.

   --i (von JS pro Station gesetzt) staffelt die Verzögerung: kommen
   mehrere Stationen auf einmal ins Bild (schneller Scroll, hoher
   Viewport), laufen sie trotzdem nacheinander statt als ein Block ein. */
.reveal.is-pending{
  opacity:0;
  transform:translateY(28px) scale(.97);
}
.reveal.is-pending.is-visible{
  opacity:1;
  transform:none;
  transition:opacity .6s var(--settle), transform .6s var(--settle);
  transition-delay:calc(var(--i,0) * 70ms);
}

/* Timeline-Stationen federn beim Einlaufen leicht nach (--spring statt
   --settle) statt nur ruhig einzublenden, dieselbe Kurve, die schon
   Marker und Titel-Unterstreichung dieser Sektion nutzen, und dieselbe
   Familie wie der Stateful-Button im Kontaktformular. Kein rotateX/
   perspective mehr hier (früherer Versuch, dem Superpower-Vorbild näher
   zu kommen). Ohne echte Kamera/Beleuchtung liest sich reines rotateX
   auf 2D-Karten nur als "schief", nicht als 3D, und ging zulasten der
   Lesbarkeit. */
.timeline-item.is-pending.is-visible{
  transition:opacity .6s var(--settle), transform .6s var(--spring);
}

/* Der Marker federt eigenständig nach, kurz nachdem die Karte losläuft,
   damit er wie ein Punkt wirkt, der auf dem Faden "einschlägt", statt nur
   mitzuschweben. var(--spring) schiesst dafür bewusst leicht über. */
.timeline-item.is-pending .timeline-marker{transform:scale(0)}
.timeline-item.is-pending.is-visible .timeline-marker{
  transform:scale(1);
  transition:transform .5s var(--spring);
  transition-delay:calc(var(--i,0) * 70ms + .15s);
}


/* ────────────────────── 4. Cursor-Glow ─────────────────────────────
   Nur auf Geräten mit echtem Zeiger (hover:hover + pointer:fine): ein
   Touch-"Hover" bliebe sonst nach dem Antippen hängen, weil pointerleave
   auf Touch nie zuverlässig feuert. js/about.js setzt --mx/--my (0-100 %,
   Position relativ zur Karte) bei jeder Zeigerbewegung; hier wird daraus
   nur noch das Aussehen, ein Schein, der der Maus folgt. */
@media (hover:hover) and (pointer:fine){
  .timeline-card{
    --mx:50%; --my:50%;
    position:relative;
  }

  .timeline-card::before{
    content:'';
    position:absolute;inset:0;
    border-radius:inherit;
    background:radial-gradient(220px circle at var(--mx) var(--my), rgba(218,41,28,.12), transparent 70%);
    opacity:0;
    transition:opacity .35s var(--settle);
    pointer-events:none;
  }
  .timeline-card:hover::before{opacity:1}
}


/* ─────────────────────── 5. Breakpoints ───────────────────────────*/

/* Unter 760px kollabiert das Zickzack auf eine einspaltige Randspalte:
   zwei 1fr-Textspalten plus grosse Jahres-Typografie brauchen Platz, den
   schmale Screens nicht hergeben (Karte würde auf wenigen hundert Pixeln
   zu schmal, Jahr zu klein, um noch als Blickfang zu wirken). Marker
   wandert dafür für BEIDE nth-child-Varianten auf dieselbe schmale linke
   Spalte zurück, dieselbe Anordnung wie vor dem Zickzack-Redesign, nur
   mit den grösseren Massen von weiter oben. .timeline-year und
   .timeline-card bekommen dieselbe Spalte UND werden übereinander
   gestapelt (grid-row 1/2) statt nebeneinander.

   Faden/Kugel brauchen hier keine eigene Anpassung: js/about.js liest die
   Marker-Position ohnehin bei jedem Resize neu aus (measureMarkerPoints)
   und baut den Pfad daraus. Sitzen alle Marker (durch die Kollabierung
   unten) auf derselben X-Spalte, bleibt die Linie automatisch gerade,
   genau wie auf breiten Screens, ganz ohne Sonderfall im CSS. */
@media (max-width:760px){
  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even){
    grid-template-columns:20px 1fr;
    column-gap:20px;row-gap:10px;
  }
  .timeline-marker{grid-column:1;grid-row:1;justify-self:center;margin-top:4px}

  /* .timeline-item:nth-child(odd/even) explizit wiederholt statt nur
     .timeline-year/.timeline-card: die Zickzack-Regeln weiter oben binden
     grid-column/text-align an genau diese Selektoren mit Spezifität 0-3-0.
     Ein einfaches ".timeline-year{grid-column:2}" hier (Spezifität
     0-1-0) würde von ihnen überstimmt, Kaskade schlägt Quellreihenfolge
     bei ungleicher Spezifität. Ohne dieses Echo bliebe jede zweite Station
     auf Spalte 1/3 hängen, WÄHREND grid-template-columns hier schon auf
     zwei Spalten reduziert ist. Das Grid würde eine implizite dritte
     Spalte nachschieben, nur um diese verwaisten Platzierungen aufzufangen. */
  .timeline-item:nth-child(odd) .timeline-year,
  .timeline-item:nth-child(even) .timeline-year{
    grid-column:2;grid-row:1;text-align:left;
    font-size:clamp(22px,6vw,30px);
  }
  .timeline-item:nth-child(odd) .timeline-card,
  .timeline-item:nth-child(even) .timeline-card{
    grid-column:2;grid-row:2;
  }
}

@media (max-width:480px){
  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even){
    grid-template-columns:16px 1fr;
  }
  .timeline-marker{width:16px;height:16px}
}