/* ============================================================
   Niels Rakers - persönliche Website (Redesign)
   Dunkel + SAP-Blau, Kacheln aus Milchglas, Grotesk mit Mono-Akzenten.
   Eine Punktwolke (scene.js) liegt hinter der ganzen Seite,
   die Bühnen werden von app.js per Scroll choreografiert.
   Ohne JS bleibt der gesamte Inhalt sichtbar.
   ============================================================ */

@font-face {
  font-family: "Space Grotesk";
  src: url("assets/fonts/space-grotesk-latin-wght.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("assets/fonts/jetbrains-mono-latin-wght.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --bg:          #05070d;
  --bg-elev:     #0a0f1c;
  --surface-hi:  rgba(120, 170, 255, 0.09);
  --border:      rgba(140, 180, 255, 0.16);
  --border-soft: rgba(140, 180, 255, 0.08);
  --text:        #eef2fb;   /* 17.4:1 auf --bg */
  --text-dim:    #a7b0c4;   /*  9.0:1 */
  --text-faint:  #7a8499;   /*  5.2:1 */


  --sap:         #0a6ed1;
  --sap-light:   #4da3ff;
  --gold:        #f0ab00;

  --maxw: 1180px;
  --pad: clamp(1rem, 4vw, 2.5rem);
  --radius: 24px;
  --radius-sm: 12px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Glas (an Apples Liquid Glass angelehnt): neutral ohne Farbstich, milchig weichgezeichnet,
     mit leichter Körnung, heller Lichtkante und innerem Schimmer an den Rändern */
  --glass-fill:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    linear-gradient(160deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0.09) 100%),
    rgba(255, 255, 255, 0.04);
  --glass-blur: blur(24px) saturate(180%) brightness(1.08);
  --glass-inner:
    inset 1px 1px 0 rgba(255, 255, 255, 0.3),
    inset -1px -1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 22px rgba(255, 255, 255, 0.07);
  --glass-edge: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.08) 28%, transparent 50%, rgba(255, 255, 255, 0.08) 72%, rgba(255, 255, 255, 0.42));

  --font: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto,
    "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas,
    "PingFang SC", "Noto Sans SC", monospace;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Randabdunklung über der Punktwolke */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(5, 7, 13, 0.8) 100%);
}

a { color: inherit; }
img { max-width: 100%; }
.mono { font-family: var(--mono); }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

::selection { background: var(--sap); color: #fff; }

:focus-visible {
  outline: 2px solid var(--sap-light);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bg-elev);
  color: var(--text);
  padding: 0.6rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  z-index: 200;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---------- Punktwolke ---------- */
.scene-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  pointer-events: none;
  /* Fallback ohne WebGL */
  background:
    radial-gradient(60% 50% at 70% 80%, rgba(10, 110, 209, 0.28), transparent 70%),
    radial-gradient(40% 40% at 20% 30%, rgba(10, 110, 209, 0.14), transparent 70%);
}
.scene-canvas.is-live { background: none; }

/* Name und Kontakt-Symbole zeichnet die Punktwolke; das HTML bleibt für Screenreader und Klicks */
.has-particles .hero-line,
.has-particles .hero-line .char { color: transparent; -webkit-text-stroke-color: transparent; }
.has-particles .contact-icon svg { opacity: 0; }
/* Bis die Punktwolke bereit ist, bleibt der HTML-Titel unsichtbar (sonst blitzt er beim Laden kurz auf) */
.js .hero-title { opacity: 0; }
.js.no-particles .hero-title { opacity: 1; }
/* Der Name steckt in der Wolke: der HTML-Text darf sich nicht markieren lassen */
.has-particles .hero-title { user-select: none; -webkit-user-select: none; pointer-events: none; }
main, .footer { position: relative; z-index: 1; }

/* Greifen: Hand nur auf freien Flächen, Inhalte behalten ihren Zeiger */
.can-grab { cursor: grab; }
.can-grab > :not(.can-grab) { cursor: auto; }
.can-grab > a, .can-grab > button { cursor: pointer; }
html.is-grabbing, html.is-grabbing * { cursor: grabbing !important; user-select: none; }

/* ---------- Scroll-Fortschritt ---------- */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 120;
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--sap), var(--sap-light));
  transform-origin: 0 50%;
  transform: scaleX(0);
}

/* ---------- Sprachumschalter (oben rechts, ohne Titelleiste) ---------- */
.lang-switch {
  position: fixed;
  top: 0.9rem;
  right: var(--pad);
  z-index: 100;
  display: inline-flex;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  /* Glas wie die Kacheln */
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6), var(--glass-inner);
}
.lang-switch::before,
.tile::before {
  /* Lichtkante: ein 1px-Rand mit Verlauf, hell an den Ecken oben links und unten rechts */
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  pointer-events: none;
  border-radius: inherit;
  background: var(--glass-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.lang-indicator {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 0;
  border-radius: 999px;
  background: var(--sap);
  transition: transform 0.45s var(--ease), width 0.45s var(--ease);
}
.lang-switch button {
  position: relative;
  z-index: 1;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-faint);
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.3s ease;
}
.lang-switch button[aria-pressed="true"] { color: #fff; }
html:not(.js) .lang-switch button[aria-pressed="true"] { background: var(--sap); }

/* ---------- Buttons (Hero) ---------- */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.45rem;
  border-radius: 999px;
  font-size: 0.98rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
/* Lichtreflex, der beim Hover einmal darüberläuft */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
  transform: translateX(-120%);
  pointer-events: none;
}
.btn:hover::after { transform: translateX(120%); transition: transform 0.8s var(--ease); }
.btn-primary { background: var(--sap); color: #fff; }
.btn-primary:hover { background: #1580ea; }
.btn-outline { border-color: rgba(77, 163, 255, 0.55); color: var(--sap-light); background: rgba(8, 12, 24, 0.6); }
.btn-outline:hover { background: rgba(10, 110, 209, 0.18); color: #fff; border-color: var(--sap-light); }
.btn-arrow { transition: transform 0.3s var(--ease); }
.btn-primary:hover .btn-arrow { transform: translateX(4px); }

/* ---------- Kacheln ----------
   Glas-Kacheln (an Apples Liquid Glass angelehnt, siehe --glass-*): milchig,
   neutral ohne Farbstich, die Punktwolke dahinter wird weichgezeichnet.
   Die Ränder biegen das Licht wie eine dicke Glaskante (::after).
   Inhalte (z. B. das PDF) liegen darüber. */
.tile {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  /* --sy dreht den Schatten auf über die X-Achse umgedrehten Kacheln zurück nach unten */
  box-shadow: 0 calc(24px * var(--sy, 1)) 50px -24px rgba(0, 0, 0, 0.6), var(--glass-inner);
  transition: border-color 0.3s ease;
}
.tile::after {
  /* Glaskante als Linse: direkt am Rand wird das Licht gebündelt (heller Saum, oben links am stärksten),
     dahinter abgelenkt (etwas dunklerer Ring), zur Mitte hin wird das Glas wieder ruhig.
     Nur gemalt und statisch: kostet beim Scrollen nichts extra */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    inset 2px 3px 3px -1px rgba(255, 255, 255, 0.34),
    inset -2px -3px 3px -1px rgba(255, 255, 255, 0.18),
    inset 0 0 9px 2px rgba(255, 255, 255, 0.1),
    inset 0 0 26px 12px rgba(0, 0, 0, 0.12),
    inset 0 0 60px 10px rgba(255, 255, 255, 0.03);
}
.tile:hover { border-color: rgba(255, 255, 255, 0.24); }
.tile > * { position: relative; z-index: 1; }

.tile-kicker {
  margin: 0 0 0.45rem;
  font-size: clamp(0.62rem, 0.55vw, 0.8rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: max(620px, 100svh);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 7rem var(--pad) 6rem;
}
.hero-content { width: 100%; max-width: var(--maxw); margin: 0 auto; }
.hero-title {
  margin: 0 0 1.6rem;
  font-size: clamp(3.6rem, min(18vw, 24vh), 17rem);
  line-height: 0.88;
  font-weight: 700;
  letter-spacing: -0.055em;
}
.hero-line { display: block; }
.hero-line-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(160, 200, 255, 0.85);
  padding-left: 0.6em;
}
.hero-line .char { display: inline-block; will-change: transform; }
.lead {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  color: #c4cce0;
  text-shadow: 0 0 2px var(--bg), 0 2px 18px var(--bg), 0 0 40px var(--bg);
  max-width: 44ch;
  margin: 0 0 2.2rem;
}
.hero-footer {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: 1.6rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  font-size: 0.72rem;
  color: var(--text-faint);
  max-width: var(--maxw);
  margin: 0 auto;
}
.hero-hint-tilt {
  appearance: none;
  font: inherit;
  color: var(--text-dim);
  background: rgba(8, 12, 24, 0.85);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
}
.hero-hint-tilt[hidden] { display: none; }
@media (max-width: 640px) {
  .hero-line-outline { padding-left: 0.3em; }
}

/* ---------- Bühnen (gemeinsam) ----------
   Die Bühnen wachsen mit dem Fenster mit (keine feste Maximalbreite),
   damit sie auch auf großen Monitoren den Raum füllen. */
.stage { position: relative; }
.stage + .stage { margin-top: clamp(3rem, 14vh, 12rem); }
.stage-grid {
  width: min(94vw, 2400px);
  margin: 0 auto;
  padding: clamp(4rem, 9vw, 6rem) 0 2rem;
  display: grid;
  gap: clamp(1.2rem, 2vw, 3rem);
}
.stage-title,
.col-title {
  margin: 0;
  font-size: clamp(2rem, 2.6vw, 3.6rem);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.035em;
}
.col-title { margin-bottom: 1.3rem; }
.stage-head { margin-bottom: clamp(1rem, 1.5vw, 2rem); }

/* ---------- Bühne 1: Zertifikate ---------- */
.stage-center { width: 100%; min-width: 0; }
.cert-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  /* Die genaue Skalierung setzt app.js (fitCertGrid) passend zur Bildschirmhöhe; hier nur ein Startwert */
  scale: 0.7;
  transform-origin: 50% 0;
  gap: clamp(1rem, 1.5vw, 2.2rem);
  perspective: 1400px;
}
.cert-card { display: flex; flex-direction: column; }
.cert-card:hover { z-index: 3; }
.cert-media {
  display: block;
  aspect-ratio: 16 / 9;
  margin: clamp(0.55rem, 0.55vw, 0.9rem) clamp(0.55rem, 0.55vw, 0.9rem) 0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.cert-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  transition: transform 0.6s var(--ease);
}
.cert-card:hover .cert-media img { transform: scale(1.05); }
.cert-body {
  flex: 1;
  padding: clamp(0.7rem, 1.5vh, 1.5rem) clamp(1.05rem, 1.1vw, 1.6rem) 0;
}
.cert-title {
  margin: 0;
  font-size: clamp(1rem, 0.95vw, 1.4rem);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.cert-desc { margin: 0.35rem 0 0; font-size: clamp(0.82rem, 0.72vw, 1.05rem); color: var(--text-dim); line-height: 1.35; }
.cert-meta { margin: 0.45rem 0 0; font-size: clamp(0.72rem, 0.62vw, 0.92rem); color: var(--text-faint); line-height: 1.35; }

/* Logo zwischen Text und Buttons, über die ganze Kachelbreite */
.cert-logo-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: clamp(0.6rem, 1.4vh, 1.4rem) clamp(1.05rem, 1.1vw, 1.6rem) clamp(1rem, 2.2vh, 2.2rem);
}
.cert-logo-row::before,
.cert-logo-row::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12));
}
.cert-logo-row::after { background: linear-gradient(90deg, rgba(255, 255, 255, 0.12), transparent); }
.cert-logo { display: block; width: auto; height: clamp(42px, 5.1vh, 80px); }
.cert-logo-sap { height: clamp(32px, 3.9vh, 61px); }
.cert-actions {
  display: flex;
  justify-content: flex-end;
  padding: clamp(0.35rem, 0.8vh, 0.8rem) clamp(0.9rem, 1vw, 1.4rem) clamp(0.6rem, 1.2vh, 1.2rem);
}
/* Nachweis-Link: gebogener Pfeil + Text, hellblau, unten rechts */
.cert-proof {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3em 0.2em;
  color: var(--sap-light);
  font-size: clamp(0.8rem, 0.68vw, 1rem);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.25s ease;
}
.cert-proof-icon {
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.35s var(--ease);
}
.cert-proof:hover { color: #fff; }
.cert-proof:hover .cert-proof-icon { transform: translate(2px, -2px); }

@media (min-width: 1100px) and (min-height: 700px) {
  .stage-profile .stage-grid {
    min-height: 100vh;
    align-content: center;
    justify-items: center;
    padding: 4.4rem 0 1rem;
  }
  .stage-profile .stage-head { margin-bottom: clamp(0.6rem, 1.6vh, 2rem); }
  .stage-profile .stage-title { font-size: clamp(1.8rem, 4.2vh, 3.6rem); }
  /* 3 × 3 Karten: Breite so wählen, dass drei Kartenreihen in die Bildschirmhöhe passen */
  .stage-profile .stage-center { width: min(100%, calc(150vh + 40px)); }
}
@media (max-width: 1099px), (max-height: 699px) {
  .cert-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); scale: 1; }
}
@media (max-width: 860px) {
  .cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cert-grid { gap: 0.7rem; }
  .cert-card { border-radius: 22px; }
}

/* Karteninhalt skaliert mit der Kartenbreite (Container-Einheiten), damit 3 × 3 Karten
   in jeder Größe gleich aussehen */
.cert-card { container-type: inline-size; }
.cert-media { margin: 2.4cqw 2.4cqw 0; border-radius: 3cqw; }
.cert-body { padding: 3cqw 4.4cqw 0; }
.cert-card .tile-kicker { font-size: 3.4cqw; }
.cert-title { font-size: 5.6cqw; }
.cert-meta { margin-top: 1.4cqw; font-size: 3.5cqw; }
.cert-logo-row { gap: 3cqw; padding: 3cqw 4.4cqw 4.4cqw; }
.cert-logo { height: 18.9cqw; }
.cert-logo-sap { height: 14.3cqw; }
.cert-back-logo .cert-logo { height: 24cqw; }
.cert-back-logo .cert-logo-sap { height: 18cqw; }
.cert-back-link { font-size: 4.6cqw; }

/* ---------- Bühne 2: Werdegang · Ausbildung ---------- */
@media (min-width: 1100px) and (min-height: 700px) {
  .stage-career .stage-grid {
    min-height: 100vh;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.9fr) minmax(0, 0.85fr);
    align-items: center;
    align-content: center;
    column-gap: clamp(1rem, 2vw, 3rem);
    width: min(99vw, 2600px);
    padding: 5.5rem 0 1.5rem;
  }
}
@media (max-width: 1099px), (max-height: 699px) {
  .stage-career .stage-grid { grid-template-columns: 1fr; gap: 3rem; }
}
.career-edu, .career-projects { perspective: 1400px; }
@media (min-width: 1100px) and (min-height: 700px) {
  /* Platz für die Firmenlogos links der Zeitleiste, damit sie die Ausbildung nicht überdecken */
  .career-exp { padding-left: calc(15.5vw + 6rem); }
}

/* ---------- Bühne 3: Fähigkeiten ---------- */
@media (min-width: 1100px) {
  .stage-skills .stage-grid {
    min-height: 100vh;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 4vw, 6rem);
    align-items: start;
    align-content: center;
    padding: 6rem 0 3rem;
  }
}
@media (max-width: 1099px) {
  .stage-skills .stage-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 1.2rem; }
}
@media (max-width: 640px) {
  .stage-skills .stage-grid { grid-template-columns: 1fr; }
}
.lang-deck, .career-prog, .project-list { perspective: 1400px; }

.prog-card { padding: clamp(1.1rem, 1.3vw, 1.9rem); }
.prog-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.5rem, 0.6vw, 0.9rem);
}
.prog-list li { display: grid; }
.prog-chip {
  appearance: none;
  display: grid;
  place-items: center;
  width: 100%;
  color: inherit;
  cursor: pointer;
  min-height: clamp(2.8rem, 3.2vw, 4.4rem);
  padding: 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
  font-size: clamp(0.82rem, 0.8vw, 1.15rem);
  font-weight: 600;
  text-align: center;
  transition: border-color 0.25s ease, color 0.25s ease, transform 0.35s var(--ease);
}
.prog-chip:hover,
.prog-chip:focus-visible { border-color: var(--sap-light); color: var(--sap-light); transform: translateY(-3px); }

.project-list { display: grid; gap: clamp(0.8rem, 1vw, 1.5rem); }
.project-card { padding: clamp(1.1rem, 1.3vw, 1.9rem); }
.project-head {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  margin: 0 0 0.5rem;
  font-size: clamp(0.66rem, 0.58vw, 0.85rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.project-period { color: var(--sap-light); }
.project-title { margin: 0; font-size: clamp(1.02rem, 1.05vw, 1.45rem); line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
.project-text { margin: 0.45rem 0 0; font-size: clamp(0.84rem, 0.78vw, 1.08rem); line-height: 1.45; color: var(--text-dim); }



.timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 2rem;
}
.timeline-rail {
  position: absolute;
  top: 0.45rem;
  bottom: 0.45rem;
  left: 0.35rem;
  width: 2px;
  border-radius: 2px;
  background: var(--border-soft);
}
.timeline-progress {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--sap-light), var(--sap));
  transform-origin: 50% 0;
}
.entry { position: relative; padding: 0 0 clamp(1.1rem, 1.2vw, 1.8rem); }
.entry::before {
  content: "";
  position: absolute;
  left: calc(-2rem + 0.35rem - 6px);
  top: 0.35rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--sap);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 1.5px var(--sap-light);
}
.entry-period { margin: 0; font-size: clamp(0.76rem, 0.65vw, 0.95rem); color: var(--text-faint); }
.entry-role { margin: 0.2rem 0 0; font-size: clamp(1.05rem, 1.15vw, 1.6rem); font-weight: 500; line-height: 1.3; }
.entry-org { margin: 0.1rem 0 0; color: var(--text-dim); font-size: clamp(0.9rem, 0.85vw, 1.2rem); }
.entry-current { padding-bottom: 1.6rem; }
/* Firmenlogos: auf kleinen Bildschirmen über dem Eintrag, sonst links neben dem Knoten */
.entry-logo {
  display: block;
  width: auto;
  height: 57px;
  margin: 0 0 0.6rem;
  border-radius: 5px;
}
.entry-logo-mindsquare { height: 66px; border-radius: 0; }
@media (min-width: 1100px) and (min-height: 700px) {
  .entry-logo {
    position: absolute;
    top: 0.1rem;
    right: calc(100% + 3.1rem);
    margin: 0;
    height: clamp(51px, 4.5vw, 87px);
  }
  /* mindsquare so groß wie die Schrift "IT-Berater" daneben */
  .entry-logo-mindsquare { top: 0.3rem; height: clamp(3.45rem, 5.2vw, 7.2rem); }
}
.entry-current .entry-role { font-size: clamp(2rem, 3vw, 4.2rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.timeline-divider {
  margin: 0 0 1rem;
  font-size: clamp(0.68rem, 0.6vw, 0.85rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.career-edu { display: grid; gap: clamp(1rem, 1.3vw, 2rem); align-content: start; }
.career-edu .col-title { margin-bottom: 0.2rem; }
.edu-card { padding: clamp(1.3rem, 1.6vw, 2.4rem); }
.edu-role { margin: 0.4rem 0 0.15rem; font-size: clamp(1.4rem, 1.8vw, 2.5rem); line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; }
.edu-grade { margin: 1rem 0 0; font-size: clamp(0.9rem, 0.85vw, 1.2rem); color: var(--text-dim); }
.edu-grade [data-decode] { font-variant-numeric: tabular-nums; }
.edu-back-body { display: grid; gap: 0.35rem; align-content: start; }
.edu-back-label { margin: 0; font-size: clamp(0.64rem, 0.55vw, 0.8rem); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; }
.edu-back-list { margin: 0; padding-left: 1.1rem; font-size: clamp(0.9rem, 0.88vw, 1.2rem); font-weight: 500; line-height: 1.3; }
.edu-back-fact { margin: 0.3rem 0 0; font-size: clamp(0.9rem, 0.85vw, 1.2rem); color: var(--text-dim); }

.lang-deck {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.2vw, 1.8rem);
}
.lang-card {
  min-height: clamp(160px, 11vw, 280px);
  padding: clamp(1.1rem, 1.3vw, 2rem);
}
.lang-card .face { display: flex; flex-direction: column; }
.lang-card .face-back .lang-name { margin-top: 0; }
.lang-glyph {
  font-size: clamp(2.4rem, 3vw, 4.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--sap-light);
}
.lang-name { margin-top: auto; font-size: clamp(1.05rem, 1.05vw, 1.45rem); font-weight: 600; }
.lang-level { margin-top: 0.15rem; font-size: clamp(0.74rem, 0.65vw, 0.95rem); color: var(--text-dim); }

/* ---------- Umdrehbare Kacheln ----------
   Vorder- und Rückseite liegen in derselben Rasterzelle, die Kachel ist
   also immer so hoch wie die größere Seite. app.js dreht die Kachel um
   90°, tauscht die Seiten und dreht zurück; so ist die Rückseite nie
   gespiegelt. Ohne JS bleibt die Vorderseite sichtbar. */
/* .can-grab > … setzt Kindern sonst den normalen Zeiger (siehe Greifen) */
.flip-card { display: grid; }
.flip-card,
.can-grab > .flip-card { cursor: pointer; }
.can-grab > .flip-card[data-flip="prog"] { cursor: default; }
.can-grab > .flip-card[data-flip="prog"].is-flipped { cursor: pointer; }
.flip-card > .face { grid-area: 1 / 1; min-width: 0; }
.flip-card > .face-back,
.flip-card.is-flipped > .face-front { visibility: hidden; }
.flip-card.is-flipped > .face-back { visibility: visible; }
/* Mit Animation dreht app.js die ganze Kachel um 180°: Rückseite vorab
   spiegeln, damit sie danach richtig herum steht.
   Projekte drehen über die X-Achse, die übrigen über die Y-Achse. */
.anim .flip-card > .face-back { transform: scaleX(-1); }
.anim .project-card > .face-back,
.anim .edu-card > .face-back { transform: scaleY(-1); }
.anim .project-card.is-flipped,
.anim .edu-card.is-flipped { --sy: -1; }
.project-card .face-back { display: flex; flex-direction: column; justify-content: center; }
.project-card .face-back .flip-text { margin: 0; }
.flip-text {
  margin: 0.6rem 0 0;
  font-size: clamp(0.86rem, 0.8vw, 1.1rem);
  line-height: 1.5;
  color: var(--text-dim);
}
/* Zertifikate: Vorderseite wie bisher, Rückseite mit Logo oben und Nachweis-Link unten */
.cert-card > .face-front { display: flex; flex-direction: column; }
.cert-card > .face-back {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 5cqw 4cqw;
}
.cert-back-logo { flex: 1; display: grid; place-items: center; }
.cert-back-link,
.edu-doc {
  color: var(--sap-light);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.3em;
  transition: color 0.25s ease;
}

.cert-back-link:hover, .edu-doc:hover { color: #fff; }
/* Ausbildung: Rückseite mit Liste, Zusatznote und unten dem Dokument-Link */
.edu-card > .face-back { display: flex; flex-direction: column; }
.edu-card .edu-doc { margin-top: auto; padding-top: 0.5rem; align-self: center; }
.edu-doc { font-size: clamp(1.05rem, 1.2vw, 1.6rem); }
.edu-card .face-front { display: block; }
/* Hochschul- und Schul-Logo rechts auf der Vorderseite, senkrecht mittig */
.edu-logo {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: auto;
  height: clamp(72px, 9.5vh, 128px);
}
/* Text weicht dem Logo aus */
.edu-card .entry-period,
.edu-card .edu-role,
.edu-card .entry-org { padding-right: clamp(86px, 11.5vh, 160px); }

/* Hinweis wie bei den Programmiersprachen-Einträgen: Hand-Zeiger und
   aufleuchtender Rand zeigen, dass man die Kachel anklicken kann */
.flip-card:not([data-flip="prog"]):hover,
.flip-card:not([data-flip="prog"]):focus-visible,
.flip-card[data-flip="prog"].is-flipped:hover { border-color: var(--sap-light); }
.flip-icon {
  width: clamp(14px, 0.9vw, 20px);
  height: clamp(14px, 0.9vw, 20px);
  fill: none;
  stroke: var(--text-faint);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.25s ease, transform 0.5s var(--ease);
}

.prog-card .face-back { position: relative; display: flex; flex-direction: column; }
.prog-detail-name {
  margin: 0;
  font-size: clamp(1.6rem, 2vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--sap-light);
}
.flip-close {
  appearance: none;
  align-self: flex-end;
  margin-top: auto;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.25s ease;
}
.flip-close:hover { border-color: var(--sap-light); }
.flip-close:hover .flip-icon { stroke: var(--sap-light); transform: rotate(-180deg); }

/* ---------- Kontakt ---------- */
html { --footer-h: 8.5rem; }
.section-contact {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  /* Volle Bildschirmhöhe, damit man weit genug scrollen kann, bis die Symbole fertig sind */
  min-height: 150vh;
  min-height: 150svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Abstand zum vorherigen Abschnitt als Außenabstand, damit die Symbole mittig im Abschnitt sitzen */
  margin-top: clamp(12rem, 28vw, 20rem);
  /* Mehr Scrollweg für die Animation. Oben 2 × Fußzeile + halbe Bildhöhe Platz: ganz unten im Seitenende sitzen die Symbole dann mittig im Bild */
  padding: calc(var(--footer-h) * 2 + 50vh) var(--pad) 0;
  padding-top: calc(var(--footer-h) * 2 + 50svh);
}
.section-index { margin: 0 0 1rem; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sap-light); }
.contact-icons {
  display: flex;
  justify-content: center;
  gap: clamp(1rem, 4vw, 4rem);
}
.contact-icon {
  position: relative;
  display: block;
  width: clamp(110px, 20vw, 200px);
  aspect-ratio: 1;
  color: var(--sap-light);
  border-radius: 24px;
}
.contact-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; transition: opacity 0.2s ease; }
/* Beschriftung: erscheint kurz nach Erreichen des Seitenendes (Klasse .labels-on setzt app.js) */
.contact-label {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 1rem;
  font-size: clamp(0.78rem, 0.9vw, 1.05rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-dim);
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 0.7s ease, transform 0.7s var(--ease);
  pointer-events: none;
}
.contact-icons.labels-on .contact-label { opacity: 1; transform: translate(-50%, 0); }
.contact-icon:hover .contact-label { color: var(--sap-light); }
.contact-icon:focus-visible { outline: 2px solid var(--sap-light); outline-offset: 6px; }

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--border-soft);
  background: var(--bg);
  height: var(--footer-h);
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-inner { width: 100%; display: flex; justify-content: center; padding: 0 var(--pad); }
.footer-logo { display: block; width: 190px; max-width: 60%; height: auto; mix-blend-mode: screen; opacity: 0.92; }

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   NEU: Handrolle · Nacht · Sternenhimmel/Zettel · Erde
   ============================================================ */
:root {
  --table: #141821; --silk: #24345a; --silk-line: #33497c; --silk-edge: #c9c7bc;
  --paper: #ecece6; --paper-2: #e3e3dc; --ink: #15161a; --ink-2: #3d3f46; --ink-3: #63656c; --jade: #9fb8a6;
  --f-text: "Alegreya Sans", "Space Grotesk", "Noto Serif SC", "PingFang SC", system-ui, sans-serif;
  --f-sc: "Alegreya Sans SC", "Alegreya Sans", "Space Grotesk", system-ui, sans-serif;
  --f-brush: "Zhi Mang Xing", "Noto Serif SC", "Kaiti SC", cursive;
  --strip: 18px; --padX: clamp(28px, 5vw, 80px);
}
/* feste Leinwände hinter der Seite (über der Punktwolke, unter dem Inhalt) */
#skyCanvas, #earthCanvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; display: block; }

/* ---------- Rolle: gepinnte Bühne ---------- */
.rolle { position: relative; z-index: 2; }
.rolle-stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.rolle-table { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 46%, #202737 0%, var(--table) 58%, #0e1117 100%); }
.rolle-frame {
  position: absolute; left: 16px; right: 16px; top: 56px; bottom: 60px; z-index: 2;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.45));
}
.rolle-scroller {
  position: absolute; inset: 0; overflow-x: auto; overflow-y: hidden; direction: rtl;
  scrollbar-width: none; overscroll-behavior: contain; touch-action: pan-x; outline: none;
}
.rolle-scroller::-webkit-scrollbar { display: none; }
.anim .rolle-scroller { overflow-x: hidden; }
.rolle .track {
  position: relative; display: flex; align-items: stretch; height: 100%; width: max-content;
  padding: var(--strip) 0; background: var(--paper) var(--tex, none); color: var(--ink);
  font: 16px/1.45 var(--f-text);
}
.rolle .track::before, .rolle .track::after {
  content: ""; position: absolute; left: 0; right: 0; height: var(--strip);
  background-color: var(--silk); background-image: var(--silk-pattern); background-size: 22px 22px;
}
.rolle .track::before { top: 0; box-shadow: 0 1px 0 var(--silk-edge), 0 3px 0 rgba(0,0,0,.08); }
.rolle .track::after { bottom: 0; box-shadow: 0 -1px 0 var(--silk-edge), 0 -3px 0 rgba(0,0,0,.08); }
.rolle .panel { direction: ltr; flex: none; position: relative; height: 100%; padding: clamp(18px, 4vh, 36px) var(--padX); }
.rolle .panel h2, .rolle .panel h3, .rolle .panel p, .rolle .panel ul, .rolle .panel ol { margin: 0; }
/* Nacht-Überblendungen über dem Papier */
.rolle-night { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; mix-blend-mode: multiply;
  background: linear-gradient(180deg, #0b1020 0%, #1b2548 55%, #0b1020 100%); }
.rolle-black { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; background: #000; }
/* Rollstäbe */
.roller { position: absolute; z-index: 6; pointer-events: none; top: -10px; bottom: -10px; width: var(--rw, 24px); }
.roller .body {
  position: absolute; inset: 10px 0; border-radius: 3px;
  background:
    linear-gradient(to bottom, var(--silk) 0 var(--strip), transparent var(--strip) calc(100% - var(--strip)), var(--silk) calc(100% - var(--strip))),
    linear-gradient(90deg, #77776f 0%, #cfcfc7 22%, #f3f3ee 46%, #dcdcd5 66%, #8c8c84 88%, #5d5d57 100%);
}
.roller .body::after { content: ""; position: absolute; inset: 0; border-radius: 3px; mix-blend-mode: multiply;
  background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(255,255,255,.12) 45%, rgba(0,0,0,.05) 60%, rgba(0,0,0,.5)); }
.roller .knob { position: absolute; left: 50%; width: 11px; height: 14px; margin-left: -5.5px; border-radius: 3px;
  background: linear-gradient(90deg, #5f7a68, var(--jade) 40%, #d7e3d9 55%, #7f9a88); }
.roller .knob.t { top: 0; } .roller .knob.b { bottom: 0; }
.roller-l { left: 0; } .roller-r { right: 0; --rw: 12px; }
.roller-r .knob { width: 7px; margin-left: -3.5px; background: linear-gradient(90deg, #2b211b, #6b5240 50%, #2b211b); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Typografie auf dem Papier */
.rolle .sc { font: 700 12px/1.3 var(--f-sc); letter-spacing: .1em; color: var(--ink-3); text-transform: uppercase; }
.rolle .role { font: 500 19px/1.2 var(--f-text); color: var(--ink); text-wrap: balance; }
.rolle .org { font-size: 14px; color: var(--ink-2); line-height: 1.35; }
.rolle .logo { display: block; height: 48px; width: auto; max-width: 150px; object-fit: contain; }   /* Originalfarbe, etwas größer */
.rolle-stage.is-night .scape .mist { animation-play-state: paused; }

/* Titelstück */
.front { display: flex; align-items: center; }
.front-inner { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.front-role { font: 500 18px/1.3 var(--f-text); color: var(--ink-2); text-align: right; }
.front-hint { display: flex; align-items: center; gap: 10px; margin-top: 6px; color: var(--ink-3); font: 500 13.5px/1.35 var(--f-text); max-width: 38ch; text-align: right; }
.front-hint .arrow { font-size: 22px; color: var(--ink); animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-8px); } }

/* Landschaften */
.scape { padding: 0; }
.scape canvas.scape-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scape .mist { position: absolute; inset: 0; pointer-events: none; opacity: .75; animation: drift 38s ease-in-out infinite alternate;
  background: radial-gradient(40% 14% at 30% 62%, rgba(236,236,230,.9), transparent 70%), radial-gradient(35% 10% at 72% 74%, rgba(236,236,230,.85), transparent 70%); }
@keyframes drift { from { transform: translateX(-3%); } to { transform: translateX(4%); } }

/* Zeitlinien-Panel: Zeilen in Anteilen der Papierhöhe */
.tl-panel { --axis: 34%; }
.rh { position: absolute; top: 4px; display: flex; align-items: flex-end; min-height: 48px; }
.rh-title { font: 400 44px/1 var(--f-brush); color: var(--ink); white-space: nowrap; }
.rh.has-brush .rh-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.rh-exp { top: calc(var(--axis) + 10px); }
.rh-proj { top: calc(var(--axis) + 21%); }
.edu-row { position: absolute; left: 0; right: 0; top: 60px; height: calc(var(--axis) - 70px); }
.edu-band { position: absolute; top: 0; height: 100%; }
.edu-band .band-line { position: absolute; left: 0; right: 0; bottom: 0; height: 0; border-top: 3px double var(--ink-2); }
.edu-band::before, .edu-band::after { content: ""; position: absolute; bottom: -4px; width: 1px; height: 12px; background: var(--ink-2); }
.edu-band::before { left: 0; } .edu-band::after { right: 0; }
.edu { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); width: 250px; display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 4px; }
.edu .logo { height: 52px; max-width: 130px; margin-bottom: 4px; }
.grade { display: flex; align-items: baseline; justify-content: flex-end; gap: 10px; margin-top: 4px !important; }
.grade .gl { font: 700 12px/1 var(--f-sc); letter-spacing: .1em; color: var(--ink-3); text-transform: uppercase; }
.grade .gv { font: 500 28px/1 var(--f-text); color: var(--ink); }
.more { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 3px 0; border: 0; background: none; cursor: pointer;
  font: 700 12px/1 var(--f-sc); letter-spacing: .12em; color: var(--ink-2); border-bottom: 1px solid currentColor; text-transform: uppercase; }
.more:hover { color: var(--ink); }
.more .plus { display: inline-block; transition: transform .3s var(--ease); }
.more[aria-expanded="true"] .plus { transform: rotate(45deg); }
/* Kolophon-Blatt klappt links neben dem Eintrag auf (dort ist auf der Rolle Platz) */
.edu .slip { position: absolute; right: calc(100% + 18px); top: 0; width: 260px; text-align: left; transform-origin: right center; }
.slip { padding: 12px 14px 13px; background: var(--paper-2) var(--tex, none); box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 6px 14px -8px rgba(0,0,0,.35);
  border-top: 2px solid var(--ink); font-size: 14.5px; color: var(--ink-2); }
.slip:not([hidden]) { animation: unfoldX .45s var(--ease); }
@keyframes unfoldX { from { transform: scaleX(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.slip ul { padding: 0; list-style: none; margin: 6px 0 8px; }
.slip li { padding-left: 14px; position: relative; }
.slip li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-2); }
.slip b { color: var(--ink); } .slip a { color: var(--ink); } .slip-doc { margin-top: 8px !important; }
.tl-axis { position: absolute; top: var(--axis); height: 20px; margin-top: -10px; }
.tl-line { position: absolute; inset: 0; pointer-events: none; }
.tl-years { position: absolute; left: 0; right: 0; top: var(--axis); height: 0; list-style: none; padding: 0; }
.tl-year { position: absolute; top: -26px; transform: translateX(-50%); font: 700 11.5px/1 var(--f-sc); letter-spacing: .12em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tl-year::after { content: ""; position: absolute; left: 50%; top: 15px; width: 1px; height: 7px; background: var(--ink-3); }
.tl-exp { position: absolute; left: 0; right: 0; top: var(--axis); height: 0; list-style: none; padding: 0; }
.tl-item { position: absolute; top: 0; }
.tl-dot { position: absolute; left: -5.5px; top: -5.5px; width: 11px; height: 11px; border-radius: 48% 52% 46% 54% / 55% 46% 54% 45%; background: var(--ink); }
.tl-item.current .tl-dot { width: 15px; height: 15px; left: -7.5px; top: -7.5px; box-shadow: 0 0 0 4px var(--paper), 0 0 0 5.5px var(--ink); }
.tl-bar { position: absolute; left: 0; top: -2px; height: 4px; background: var(--ink-2); opacity: .55; border-radius: 2px; }
.tl-item .entry { position: absolute; left: 0; top: 18px; width: 215px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-left: 10px; border-left: 1px solid rgba(21,22,26,.35); }
.tl-item .entry .logo { height: 44px; max-width: 140px; margin-bottom: 2px; }
.tl-item .role { font-size: 17px; }
.tl-proj { position: absolute; top: calc(var(--axis) + 21% + 48px); display: flex; flex-direction: row-reverse; gap: 18px; align-items: flex-start; }
.proj { width: clamp(240px, 22vw, 290px); padding: 14px 16px 16px; background: var(--paper-2) var(--tex, none);
  border-top: 3px double var(--ink-2); border-bottom: 3px double var(--ink-2); display: flex; flex-direction: column; gap: 6px; }
.proj .p-period { font: 700 12px/1 var(--f-sc); letter-spacing: .12em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.proj h3 { font: 700 16.5px/1.22 var(--f-text); text-wrap: balance; margin-top: 2px !important; }
.proj .p-text { font-size: 14px; line-height: 1.4; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px !important; }
.chips li { font: 600 11px/1 var(--mono); padding: 5px 8px; border: 1px solid var(--ink-3); border-radius: 999px; color: var(--ink-2); }
@media (max-height: 760px) {
  .tl-panel { --axis: 38%; }
  .proj .p-text { display: none; }
  .edu .logo { height: 42px; }
}
@media (max-width: 760px) {
  .rolle-frame { left: 10px; right: 10px; top: 52px; bottom: 52px; }
  :root { --strip: 12px; --padX: 22px; }
  .rh-title { font-size: 34px; }
  .rolle .role { font-size: 17px; }
  .edu { width: 220px; }
  .edu .slip { right: auto; left: 50%; transform: translateX(-50%); top: calc(100% + 8px); width: 230px; transform-origin: top center; z-index: 3; }
  .tl-item .entry { width: 190px; }
  .proj { width: 240px; padding: 10px 12px; gap: 4px; }
  .proj .p-text { display: none; }
  .proj h3 { font-size: 15px; }
  .chips li { font-size: 10px; padding: 4px 7px; }
  .tl-panel { --axis: 36%; }
  .rh-proj { top: calc(var(--axis) + 27%); }
  .tl-proj { top: calc(var(--axis) + 27% + 40px); }
}

/* ---------- Sternenhimmel: Zertifikate als Zettel ---------- */
.sterne { position: relative; z-index: 1; }
.sterne-stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; --S: 1; --zoomout: 1; }
.sterne-head { position: absolute; left: var(--pad); top: clamp(1.2rem, 4vh, 2.6rem); z-index: 2; max-width: 60%; }
.sterne-head h2 { margin: 0; font-size: clamp(1.4rem, 2.4vw, 2.2rem); font-weight: 600; letter-spacing: -0.01em; }
.sterne-head p { margin: .4rem 0 0; color: var(--text-dim); font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; }
.cert-world { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(calc(var(--S) * var(--zoomout))); opacity: var(--certfade, var(--zoomout)); transform-origin: 50% 50%; }
.cert-world .obj { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; cursor: pointer; user-select: none; outline: none; }
.cert-world .obj:focus-visible::after { content: ""; position: absolute; inset: -10px; border: 2px dashed var(--sap-light); border-radius: 12px; pointer-events: none; }
.cert-world .obj img { pointer-events: none; }
.cert-world.fanning .obj:not(.fanned) { filter: brightness(.55) saturate(.8); }
.cert-world .obj { transition: filter .3s ease; }
.sheet { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #fff; transition: transform .5s var(--ease); transform-origin: 50% 60%;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.08), 1px 2px 1px rgba(0,0,0,.22), 3px 8px 14px -6px rgba(0,0,0,.6); }
.sheet img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fanned .sheet { cursor: zoom-in; }
.fanned .sheet:hover { box-shadow: 0 0 0 .5px rgba(0,0,0,.08), 2px 4px 2px rgba(0,0,0,.2), 10px 22px 28px -10px rgba(0,0,0,.6); }
.tag { position: absolute; z-index: 20; left: 14px; top: -30px; padding: 6px 10px 5px 26px; transform: rotate(-3deg);
  font-family: var(--mono); color: #1c1a16; line-height: 1.15; white-space: nowrap; box-shadow: 1px 2px 2px rgba(0,0,0,.35); }
.tag small { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #6a6454; }
.tag b { font-size: 15px; font-weight: 700; }
.tag i { font-style: normal; font-size: 12px; color: #a3372a; margin-left: 6px; }
.clip { position: absolute; left: 6px; top: -12px; width: 16px; height: 44px; filter: drop-shadow(1px 2px 1px rgba(0,0,0,.45)); }
.paper { background: linear-gradient(170deg, #fbf9f3, #efe9dc 100%); color: #1c1a16; }
.sheet.blank, .d-sheet.blank { background: linear-gradient(170deg, #fbf9f3, #f1ece0); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 10%; }
.d-sheet.blank { aspect-ratio: 150 / 206; }
.blank-title { margin: 0; font: 600 14px/1.25 var(--font); color: #1c1a16; }
.blank-soon { margin: 0; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #8a8270; border: 1px dashed #b9b19e; padding: 5px 8px; border-radius: 4px; }
.d-sheet.blank .blank-title { font-size: 22px; } .d-sheet.blank .blank-soon { font-size: 13px; }

/* Lightbox (aufgenommenes Blatt) */
.held-layer { position: fixed; inset: 0; z-index: 90; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.held-layer[hidden] { display: none; }
.held-backdrop { position: fixed; inset: 0; background: radial-gradient(80% 80% at 50% 45%, rgba(4,6,14,.78), rgba(2,3,8,.94)); }
.held-wrap { position: relative; min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 76px max(16px, env(safe-area-inset-right, 0px)) 96px max(16px, env(safe-area-inset-left, 0px)); }
.held { position: relative; max-width: 100%; transform-origin: 50% 50%; --fit: calc(100vw - 32px); }
.d-paper { box-shadow: 0 0 0 .5px rgba(0,0,0,.1), 2px 4px 3px rgba(0,0,0,.25), 18px 40px 60px -20px rgba(0,0,0,.7); }
.d-cert { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 0 }
.d-sheet { position: relative; display: block; background: #fff; flex: none; }
.d-sheet img { display: block; width: 100%; height: auto; }
.d-note { position: relative; width: 300px; flex: none; margin-left: -28px; padding: 34px 24px 22px; transform: rotate(2.2deg); display: flex; flex-direction: column; gap: 8px; box-shadow: 1px 2px 2px rgba(0,0,0,.35), 10px 20px 30px -12px rgba(0,0,0,.6); }
.d-note .clip { left: 22px; top: -18px; width: 20px; height: 56px; }
.d-note .kicker { margin: 0; font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #6a6454; }
.d-note h2 { margin: 0; font: 600 21px/1.2 var(--font); text-wrap: balance; color: #1c1a16; }
.d-note p { margin: 0; }
.d-note .desc { font-size: 15px; color: #2e2a22; }
.d-note .meta { font: 500 12.5px/1.4 var(--mono); color: #4d4430; }
.d-note .links { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.d-link { display: inline-flex; align-items: center; gap: 6px; font: 700 14px/1.2 var(--mono); color: #1f4f9c; text-decoration: none; border-bottom: 1.5px solid currentColor; align-self: flex-start; }
.d-link:hover { color: #a3372a; }
.d-note .logo { height: 38px; width: auto; align-self: flex-start; margin-top: 6px; }
.put-back { position: fixed; right: 18px; top: 18px; z-index: 2; border: 1px solid var(--border); background: rgba(10,15,28,.8); color: var(--text); border-radius: 999px; padding: .55rem .95rem; font: 600 .8rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.put-back:hover { background: var(--sap); border-color: var(--sap); }
html.held-open { overflow: hidden; }
@media (max-width: 720px) {
  .d-cert { flex-direction: column; }
  .d-note { margin: -20px 0 0; width: min(300px, 100%); transform: rotate(-1.5deg); }
}

/* ---------- Erde: Sprachen ---------- */
.erde { position: relative; z-index: 1; }
.erde-stage { position: relative; height: 100vh; height: 100svh; display: flex; align-items: center; }
.erde-legend { position: relative; margin-left: max(var(--pad), calc((100vw - var(--maxw)) / 2)); max-width: 320px; }
.erde-legend h2 { margin: 0 0 .9rem; font-size: clamp(1.4rem, 2.4vw, 2.2rem); font-weight: 600; letter-spacing: -0.01em; }
.erde-legend ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.erde-legend li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .55rem .9rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(10,15,28,.55); backdrop-filter: blur(6px); }
.erde-legend .lang-name { font-weight: 600; }
.erde-legend .lang-level { color: var(--text-dim); font-size: .85rem; white-space: nowrap; }
.erde-legend .hint { margin: .8rem 0 0; color: var(--text-faint); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 760px) {
  .erde-stage { align-items: flex-end; padding-bottom: 6vh; }
  .erde-legend { margin: 0 var(--pad); max-width: none; width: 100%; }
  .erde-legend ul { grid-template-columns: 1fr 1fr; gap: .4rem; }
  .erde-legend li { flex-direction: column; align-items: flex-start; gap: .1rem; padding: .45rem .7rem; }
}
/* Übergangsabschnitt zwischen Erde und Kontakt */
.section-contact { margin-top: clamp(4rem, 10vw, 8rem); }