/* Portfolio - die Eingangstuer zur Werkstatt.

   Baut auf werkstatt.css auf: Buehne, Kopf, Fuss, .knopf, .plakat und die
   Tokens kommen von dort. Hier steht nur, was die Startseite zusaetzlich
   braucht. Entwurf: design/portfolio/DESIGN.md (Rauke, 11.09.2026).

   Dasselbe Haus wie die Werkstatt - schwarz, Monospace, 1px-Kanten - aber
   mehr Luft und ein Gesicht statt einer Bestandsliste. Terminal-Motiv
   sparsam: Pfad, Cursor am Namen, "//" vor dem Abschnitt, git log als
   Werdegang. Mehr nicht. */

:root {
  /* Die leiseste Farbe, die noch Text sein darf: 7.1:1 auf --flaeche,
     7.6:1 auf --grund. --rand-stark (6.1:1) ist als Rahmenfarbe belegt und
     wird nicht fuer Text benutzt - eine Farbe, ein Zweck. */
  --schrift-leisest: #5fae7a;

  /* Held: die Fotoflaeche ist quadratisch und fest breit, damit der Name
     links die Hauptsache bleibt - auch wenn spaeter ein Foto kommt. */
  --held-bild: 20rem;
  --held-bild-schmal: 11rem;

  /* Projektkarte: Text links, Fenster rechts. 46 % statt 50 %, damit der
     Text nicht in vier Zeilen Umbruch verhungert. */
  --karte-bild: 46%;

  /* Stack: drei Groessen tragen die Wichtigkeit, nicht drei Farben. */
  --stapel-gross: 1.35rem;
  --stapel-mittel: 0.95rem;
  --stapel-klein: 0.8rem;

  /* Werdegang */
  --zeitstrahl-linie: var(--rand-stark);
  --zeitstrahl-knoten: 0.6rem;
  --zeitstrahl-jahr: 7.5rem;   /* "2009–2011" muss in eine Zeile passen */
  --zeitstrahl-spur: 1.25rem;  /* Abstand der privaten Linie zur Hauptlinie */
}

/* --- Kopf: der Werkstatt-Link ist ein Ausgang, darum mit Rahmen ----------- */

.kopf__link--werkstatt {
  border-color: var(--rand-stark);
  color: var(--signal);
}

.kopf__link--werkstatt::after { content: " \2192" / ""; }

.kopf__link--werkstatt:hover {
  border-color: var(--signal);
  background: rgba(var(--signal-rgb), 0.07);
}

/* --- Abschnitte ------------------------------------------------------------
   Jeder Abschnitt faengt an wie eine Sparte der Werkstatt: "// STACK". */

.abschnitt {
  margin: 0 0 var(--r8);
  scroll-margin-top: 4rem;   /* der Kopf klebt oben, Sprungziele nicht darunter */
}

.abschnitt:last-child { margin-bottom: 0; }

.abschnitt__titel {
  display: flex;
  align-items: baseline;
  gap: var(--r2);
  margin: 0 0 var(--r5);
  padding-bottom: var(--r2);
  border-bottom: 1px solid var(--rand);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--schrift);
}

.abschnitt__marke { color: var(--rand-stark); }

.abschnitt__zahl {
  margin-left: auto;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--schrift-leise);
  border: 1px solid var(--rand);
  padding: 0 var(--r2);
}

.abschnitt__leer {
  margin: 0;
  color: var(--schrift-leise);
  max-width: var(--lesebreite);
}

/* --- Held: Pfad, Name, Titel, Foto -----------------------------------------
   Zweispaltig, Text links, Foto rechts. Nicht zentriert wie die Referenz:
   auf einer 1180px-Buehne saehe ein zentriertes Foto nach Visitenkarte aus. */

.held {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--held-bild);
  align-items: center;
  gap: var(--r7);
  padding: var(--r7) 0;
  margin: 0 0 var(--r8);
  border-bottom: 1px solid var(--rand);
}

.held__text { min-width: 0; }

.held__pfad {
  margin: 0 0 var(--r3);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rand-stark);
}

.held__name {
  margin: 0 0 var(--r2);
  font-size: clamp(1.9rem, 9vw, 3.6rem);
  letter-spacing: 0.01em;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

/* Der Cursor am Namensende: die Eingabezeile, die die Marke im Kopf
   anfaengt, endet hier. Leer-Alternative, damit er nicht vorgelesen wird. */
.held__name::after {
  content: "_" / "";
  color: var(--signal);
  animation: blinken 1.1s steps(2, start) infinite;
}

@keyframes blinken { to { visibility: hidden; } }

.held__titel {
  margin: 0 0 var(--r4);
  font-size: 1.05rem;
  color: var(--signal);
  letter-spacing: 0.02em;
}

.held__satz {
  margin: 0 0 var(--r5);
  max-width: var(--lesebreite);
  color: var(--schrift-leise);
}

.held__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r3);
}

/* Die Fotoflaeche. Ohne Foto steht das Schild aus den Initialen darin -
   dasselbe Schild, das die Werkstatt bei Werken ohne Bild zeigt. Ein Foto
   ersetzt es bei gleichem Rahmen: kein Filter, kein Gruenstich. */
.held__bild {
  aspect-ratio: 1;
  border: 1px solid var(--rand);
  background: var(--flaeche);
  overflow: hidden;
}

.held__bild .plakat {
  aspect-ratio: auto;
  height: 100%;
  border: 0;
}

.held__bild .plakat__initial { font-size: clamp(4rem, 12vw, 7rem); }

.held__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Kevins Foto ist 3:4, die Flaeche quadratisch: Ausschnitt oben, damit
     die Muetze nicht abgeschnitten wird - unten faellt nur Rucksack weg. */
  object-position: 50% 15%;
}

/* --- Stack -----------------------------------------------------------------
   Drei Reihen, drei Groessen. Keine Rahmen: hier klickt man nichts. Die Zahl
   hinter dem Namen ist die Anzahl der Projekte im Ordner. */

.stapel {
  list-style: none;
  margin: 0;
  padding: 0;
}

.stapel__reihe {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--r4);
  padding: var(--r4) 0;
  border-bottom: 1px solid var(--rand);
}

.stapel__reihe:last-child { border-bottom: 0; }

.stapel__wofuer {
  margin: 0;
  padding-top: 0.2em;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--schrift-leise);
}

.stapel__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--r5);
  row-gap: var(--r2);
}

.stapel__eintrag { white-space: nowrap; }

.stapel__reihe--gross .stapel__eintrag {
  font-size: var(--stapel-gross);
  font-weight: 700;
  color: var(--schrift);
}

.stapel__reihe--mittel .stapel__eintrag {
  font-size: var(--stapel-mittel);
  color: var(--schrift);
}

.stapel__reihe--klein .stapel__eintrag {
  font-size: var(--stapel-klein);
  color: var(--schrift-leisest);
}

.stapel__zahl {
  font-size: 0.7em;
  font-weight: 400;
  color: var(--schrift-leise);
  margin-left: 0.3em;
}

/* --- Projekte --------------------------------------------------------------
   Eine Karte = ein Panel: Text links, Fenster rechts. Jahr und Art stehen
   als Pfadzeile ueber dem Titel, die Tags sind Text mit Punkten dazwischen,
   keine Chips - Rahmen nur, wo man klickt. */

.projekte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--r5);
}

.projekt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--karte-bild);
  border: 1px solid var(--rand);
  background: var(--flaeche);
  min-width: 0;
}

.projekt__text {
  padding: var(--r5);
  display: flex;
  flex-direction: column;
  gap: var(--r3);
  min-width: 0;
}

.projekt__pfad {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
}

.projekt__pfad::before {
  content: "// " / "";
  color: var(--rand-stark);
}

.projekt__art { color: var(--schrift-leise); }

.projekt__titel {
  margin: 0;
  font-size: 1.35rem;
  overflow-wrap: anywhere;
}

.projekt__satz {
  margin: 0;
  color: var(--schrift);
  max-width: var(--lesebreite);
}

.projekt__tags {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: var(--schrift-leise);
}

.projekt__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r2);
  margin-top: auto;
  padding-top: var(--r2);
}

/* Das Fenster: Titelleiste wie ein Terminal, darunter das Bild. Die drei
   Punkte sind Deko, die Zeile daneben die Adresse. */
.fenster {
  border-left: 1px solid var(--rand);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.fenster__leiste {
  display: flex;
  align-items: center;
  gap: var(--r2);
  padding: var(--r2) var(--r3);
  background: var(--flaeche-hoch);
  border-bottom: 1px solid var(--rand);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--schrift-leise);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fenster__punkte {
  flex: none;
  display: inline-flex;
  gap: 4px;
}

.fenster__punkte i {
  width: 7px;
  height: 7px;
  border: 1px solid var(--rand-stark);
}

.fenster__inhalt {
  flex: 1;
  /* Die Hoehe kommt vom Text links, nicht vom Bild: sonst wird jede Karte
     so hoch wie ein 16:10-Screenshot und der Text haengt in einem leeren
     Kasten. Die Untergrenze verhindert, dass ein Zweizeiler das Bild zum
     Streifen macht. */
  min-height: 14rem;
  position: relative;
  background: var(--grund);
}

/* Absolut, damit die Bilddatei die Kartenhoehe nicht mitbestimmt. */
.fenster__inhalt img,
.fenster__inhalt .plakat {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.fenster__inhalt img {
  object-fit: cover;
  object-position: 50% 0;   /* Screenshots tragen ihre Kopfzeile oben */
}

/* Hochkant-Bilder sind Motive, keine Screenshots: Ausschnitt aus der Mitte,
   sonst zeigt die Karte nur die Zimmerdecke. Die Klasse setzt portfolio.js,
   sobald es die Bildmasse kennt. */
.fenster__inhalt--mitte img { object-position: 50% 50%; }

.fenster__inhalt .plakat {
  aspect-ratio: auto;
  border: 0;
}

/* Zugeklappt: ab der fuenften Karte. Die Klasse setzt nur das JS - ohne
   JS bleibt alles offen und der Knopf verborgen. */
.projekte--zu .projekt:nth-child(n + 5) { display: none; }

.projekte__mehr {
  display: flex;
  justify-content: center;
  margin-top: var(--r5);
}

/* --- Werdegang: ein git log ------------------------------------------------
   Eine Linie links, ein Knoten pro Station, neueste zuerst. Beruf ist ein
   gefuellter Knoten, Schule ein hohler, Schwerpunkt ein kleiner - der
   Unterschied haengt nicht nur an der Beschriftung (WCAG 1.4.1). */

.werdegang {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--r5);
  border-left: 1px solid var(--zeitstrahl-linie);
}

/* Zwei Zweige (git log --graph): die Hauptlinie bleibt der Rahmen links,
   die private Linie laeuft --zeitstrahl-spur weiter rechts und zweigt bei
   der aeltesten privaten Station in einer Kurve von der Hauptlinie ab.
   Gestrichelt statt bunt - die Seite hat eine Farbe. */
.werdegang--zwei-zweige {
  padding-left: calc(var(--r5) + var(--zeitstrahl-spur));
}

.station {
  /* x der Linie, auf der der Knoten sitzt, gemessen vom Textrand aus. */
  --spur-x: calc(-1 * var(--r5));
  /* x der privaten Linie - fest, auch bei beruflichen Stationen dazwischen. */
  --spur-privat: calc(-1 * var(--r5));
  position: relative;
  display: grid;
  grid-template-columns: var(--zeitstrahl-jahr) minmax(0, 1fr) auto;
  gap: var(--r2) var(--r4);
  align-items: baseline;
  padding: var(--r3) 0;
  border-bottom: 1px solid var(--rand);
}

.station:last-child { border-bottom: 0; }

.werdegang--zwei-zweige .station--spur-beruf {
  --spur-x: calc(-1 * (var(--r5) + var(--zeitstrahl-spur)));
}

.station::before {
  content: "";
  position: absolute;
  z-index: 1;   /* ueber der gestrichelten Nebenlinie */
  left: calc(var(--spur-x) - var(--zeitstrahl-knoten) / 2 - 0.5px);
  top: calc(var(--r3) + 0.45em);
  width: var(--zeitstrahl-knoten);
  height: var(--zeitstrahl-knoten);
  background: var(--signal);
  border: 1px solid var(--signal);
  box-shadow: 0 0 8px rgba(var(--signal-rgb), 0.5);
}

.station--schule::before,
.station--ausbildung::before { background: var(--grund); }

/* Die eine Station, die nicht untergehen darf (Werder Bremen): eigener
   Kasten mit Signalkante, Knoten groesser und heller. Der Rest der Liste
   bleibt, wie er ist - Hervorhebung wirkt nur, wenn sie einmal vorkommt. */
.station--hervorgehoben {
  margin: var(--r2) 0 var(--r2) var(--r3);   /* Luft zwischen Knoten und Kasten */
  padding: var(--r3) var(--r4);
  border: 1px solid var(--rand-stark);
  border-left: 3px solid var(--signal);
  background: var(--flaeche);
}

.station--hervorgehoben::before {
  width: calc(var(--zeitstrahl-knoten) + 4px);
  height: calc(var(--zeitstrahl-knoten) + 4px);
  left: calc(var(--spur-x) - var(--r3) - var(--zeitstrahl-knoten) / 2 - 3.5px);
  top: calc(var(--r3) + 0.3em);
  box-shadow: 0 0 14px rgba(var(--signal-rgb), 0.8);
}

.station--hervorgehoben .station__titel { color: var(--signal); }

/* Ereignis (geboren, Fusion): kein Abschnitt, nur ein Punkt auf der Linie -
   klein und hohl. */
.station--ereignis::before {
  background: var(--grund);
  width: calc(var(--zeitstrahl-knoten) - 4px);
  height: calc(var(--zeitstrahl-knoten) - 4px);
  left: calc(var(--spur-x) - var(--zeitstrahl-knoten) / 2 + 1.5px);
  box-shadow: none;
}

.station--schwerpunkt::before {
  width: calc(var(--zeitstrahl-knoten) - 4px);
  height: calc(var(--zeitstrahl-knoten) - 4px);
  left: calc(var(--spur-x) - var(--zeitstrahl-knoten) / 2 + 1.5px);
  box-shadow: none;
}

/* Die private Linie: ein Stueck je Station, vom Abzweig bis heute. Auch
   berufliche Stationen in dem Zeitraum zeichnen sie mit - sonst haette sie
   Luecken. -1px unten, damit sie ueber die Trennlinie der Station reicht. */
.station--nebenspur::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: -1px;
  left: calc(var(--spur-privat) - 0.5px);
  width: 0;
  border-left: 1px dashed var(--zeitstrahl-linie);
  pointer-events: none;
}

/* Der Abzweig (aelteste private Station, in der Liste die unterste mit
   Nebenlinie): die Linie kommt von oben, laeuft durch den Knoten und biegt
   unten in einer Kurve auf die Hauptlinie ein - wie eine Verzweigung im
   git log. Rechte Kante + untere Kante + Rundung = die Kurve. */
.station--abzweig::after {
  left: calc(var(--spur-x) - var(--zeitstrahl-spur) - 0.5px);
  width: calc(var(--zeitstrahl-spur) + 1px);
  border-left: 0;
  border-right: 1px dashed var(--zeitstrahl-linie);
  border-bottom: 1px dashed var(--zeitstrahl-linie);
  border-bottom-right-radius: var(--zeitstrahl-spur);
}

/* Hervorgehobene Station: der Kasten ist um --r3 eingerueckt und hat 3px
   Rahmen links, die feste private Linie muss das ausgleichen. */
.station--hervorgehoben.station--nebenspur::after {
  left: calc(var(--spur-privat) - var(--r3) - 3.5px);
}

/* Legende ueber der Liste: welche Linie was ist. Zwei kleine Striche in
   der Machart der Linien, kein Farbcode. */
.zweige {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--r2) var(--r5);
  margin: 0 0 var(--r4);
  padding: 0;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--schrift-leise);
}

.zweige__eintrag {
  display: inline-flex;
  align-items: center;
  gap: var(--r2);
}

.zweige__eintrag::before {
  content: "";
  width: 1.5rem;
  border-top: 1px solid var(--zeitstrahl-linie);
}

.zweige__eintrag--privat::before { border-top-style: dashed; }

.zweige__seit {
  letter-spacing: 0;
  text-transform: none;
  color: var(--schrift-leisest);
}

/* Die Spur steht auch im Text - die Position der Linie allein traegt die
   Information nicht (WCAG 1.4.1). Gleiche Machart wie das Art-Label. */
.station__spur {
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signal);
  margin-right: var(--r2);
}

.station__jahr {
  margin: 0;
  color: var(--signal);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.station__was { min-width: 0; }

.station__titel {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.station__art {
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--schrift-leise);
  margin-right: var(--r2);
}

.station__ort {
  margin: 0;
  color: var(--schrift-leise);
}

/* Die Projekte einer Station: eine Zeile, durch Kommas getrennt. Im HTML
   bleibt es eine Liste, damit der Screenreader "Liste, 5 Eintraege" sagt. */
.station__projekte {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--schrift-leise);
}

.station__projekte li { display: inline; }
.station__projekte li:not(:last-child)::after { content: ", "; }

/* Rechts, leiseste Textfarbe. Darf umbrechen - wer acht Technologien
   eintraegt, soll die Zeile nicht sprengen. */
.station__tech {
  margin: 0;
  font-size: 0.8rem;
  color: var(--schrift-leisest);
  text-align: right;
  max-width: 20rem;
}

/* --- Kontakt: kein Formular. Drei Wege, ein Knopf. ----------------------- */

.kontakt {
  border: 1px solid var(--rand);
  background: var(--flaeche);
  padding: var(--r5);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--r4);
  align-items: center;
}

.kontakt__satz {
  margin: 0 0 var(--r2);
  font-size: 1.15rem;
  font-weight: 700;
}

.kontakt__wege {
  margin: 0;
  color: var(--schrift-leise);
}

.kontakt__wege a { color: var(--schrift); }
.kontakt__wege a:hover { color: var(--signal); }

/* --- Leerzustand Projekte --------------------------------------------------
   Die Form dessen, was hierhin kommt: eine Karte als gestrichelter Umriss,
   darunter ein Satz mit dem Weg in die Werkstatt. Kein Zaehler, kein Knopf. */

.leer {
  border: 1px dashed var(--rand-stark);
  padding: var(--r6) var(--r5);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16rem;   /* fest, sonst wird der Bildkasten riesig */
  gap: var(--r5);
}

.leer__balken {
  display: grid;
  gap: var(--r2);
  align-content: start;
}

.leer__balken i {
  display: block;
  height: 0.8rem;
  background: var(--flaeche-hoch);
}

.leer__balken i:nth-child(1) { width: 30%; }
.leer__balken i:nth-child(2) { width: 70%; height: 1.2rem; }
.leer__balken i:nth-child(3) { width: 90%; }
.leer__balken i:nth-child(4) { width: 55%; }

.leer__bild {
  aspect-ratio: 16 / 10;
  border: 1px dashed var(--rand);
}

.leer + .abschnitt__leer { margin-top: var(--r4); }

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

@media (max-width: 900px) {
  .held {
    grid-template-columns: minmax(0, 1fr) 15rem;
    gap: var(--r5);
  }
  .station {
    grid-template-columns: var(--zeitstrahl-jahr) minmax(0, 1fr);
  }
  .station__tech {
    grid-column: 2;
    text-align: left;
    max-width: none;
  }
}

@media (max-width: 640px) {
  .held {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--r5) 0;
    margin-bottom: var(--r7);
  }
  /* Das Foto ueber dem Namen, klein - der Name bleibt die Hauptsache.
     Das Bild ist nicht bedienbar, darum ist die andere Reihenfolge ok. */
  .held__bild {
    order: -1;
    width: var(--held-bild-schmal);
  }
  .held__bild .plakat__initial { font-size: 3.5rem; }

  .abschnitt { margin-bottom: var(--r7); scroll-margin-top: var(--r4); }   /* Kopf klebt hier nicht */

  .stapel__reihe {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--r2);
  }

  .projekt { grid-template-columns: minmax(0, 1fr); }
  .fenster { border-left: 0; border-bottom: 1px solid var(--rand); order: -1; }
  .fenster__inhalt { min-height: 0; aspect-ratio: 16 / 10; }
  .projekt__text { padding: var(--r4); }

  .werdegang { padding-left: var(--r4); --zeitstrahl-spur: 1rem; }
  .werdegang--zwei-zweige { padding-left: calc(var(--r4) + var(--zeitstrahl-spur)); }
  .station {
    --spur-x: calc(-1 * var(--r4));
    --spur-privat: calc(-1 * var(--r4));
    grid-template-columns: minmax(0, 1fr);
    gap: var(--r1);
  }
  .werdegang--zwei-zweige .station--spur-beruf {
    --spur-x: calc(-1 * (var(--r4) + var(--zeitstrahl-spur)));
  }
  .station--hervorgehoben { padding: var(--r3); }
  .station__tech { grid-column: 1; }

  .kontakt { grid-template-columns: minmax(0, 1fr); }
  .leer { grid-template-columns: minmax(0, 1fr); }
  .leer__bild { max-width: 16rem; }
}

@media (prefers-reduced-motion: reduce) {
  .held__name::after { animation: none; }
}