/* Giuseppe Grifo, persönliche Seite.
   Farben: Papier und Tinte, Marineblau wie im Lebenslauf (#18324a), dazu ein
   warmer Akzent. Handy zuerst, Breiten ab 720 und 1080 px erweitern das Raster. */

:root {
  --papier: #f5f1ea;
  --papier-2: #ebe5da;
  --karte: #fffdf9;
  --tinte: #18324a;
  --text: #1f2a33;
  --text-leise: #56626c;
  --linie: #d8d0c3;
  --akzent: #924810;
  --auf-akzent: #fff;
  --akzent-hell: #e08a3c;
  --dunkel: #0f1a24;
  --dunkel-2: #172633;
  --dunkel-text: #e9eef2;
  --dunkel-leise: #a9b6c1;
  --schatten: 0 1px 2px rgba(24, 50, 74, .06), 0 12px 32px -12px rgba(24, 50, 74, .18);
  --kopf-h: 64px;
  --rand: 16px;
  --rund: 14px;
  --schrift-titel: 'Archivo', system-ui, sans-serif;
  --schrift-text: 'IBM Plex Sans', system-ui, sans-serif;
  --schrift-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #111b25;
    --papier-2: #16232f;
    --karte: #182836;
    --tinte: #e9eef2;
    --text: #dfe6ec;
    --text-leise: #9fb0bd;
    --linie: #2a3d4d;
    --akzent: #e89a52;
    --auf-akzent: #1a1206;
    --akzent-hell: #f0b074;
    --dunkel: #0a121a;
    --dunkel-2: #13202c;
    --schatten: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -12px rgba(0, 0, 0, .6);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font: 400 17px/1.6 var(--schrift-text);
  overflow-wrap: break-word;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--schrift-titel); color: var(--tinte); line-height: 1.12; margin: 0; letter-spacing: -.01em; hyphens: manual; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }

.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 var(--rand); }

/* ---------- Kopf und Navigation ----------
   Aufbau und Verhalten wie auf dynamicupscale.com: dunkle Leiste, Menüpunkte mit
   Unterstrich, rechts Telefon und Knopf, unter 1080 px ein eckiger Menüknopf mit
   aufklappender Tafel. Der Fortschrittsstreifen sitzt an der Unterkante und wirft
   einen schmalen Lichtschein nach unten. */
.kopf {
  position: sticky; top: 0; z-index: 50; height: var(--kopf-h);
  background: rgba(12, 24, 34, .94);
  backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid rgba(233, 238, 242, .1);
}
.kopf__innen { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.marke { font: 700 18px/1 var(--schrift-titel); color: #f4f7f7; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; flex: none; }
.marke__zeichen { font: 700 14px/1 var(--schrift-mono); color: #f0b074; padding: 5px 6px; border-radius: 6px; background: rgba(244, 247, 247, .08); }

.fortschritt { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none; }
.fortschritt span {
  position: relative; display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, rgba(224, 138, 60, .35), #e08a3c 65%, #f0b074);
  box-shadow: 0 0 3px rgba(240, 176, 116, .95), 0 0 9px rgba(240, 176, 116, .7), 0 0 20px rgba(224, 138, 60, .48), 0 0 38px rgba(224, 138, 60, .26);
  transform-origin: 0 50%; transform: scaleX(var(--fortschritt, 0));
}
.fortschritt span::before {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 22px;
  background: linear-gradient(180deg, rgba(240, 176, 116, .22), rgba(240, 176, 116, 0));
}

.nav { display: flex; align-items: center; gap: 26px; }
.nav a {
  font: 500 15px/1 var(--schrift-text); color: rgba(244, 247, 247, .86); text-decoration: none; white-space: nowrap;
  padding: 6px 0; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s;
}
.nav a:hover, .nav a[aria-current="true"] { color: #fff; border-bottom-color: #e08a3c; }
.nav__meta { display: none; }

.kopf__aktionen { display: flex; align-items: center; gap: 18px; }
.kopf__telefon { font: 500 15px/1 var(--schrift-text); color: rgba(244, 247, 247, .86); text-decoration: none; white-space: nowrap; }
.kopf__telefon:hover { color: #fff; }
.kopf__knopf {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; white-space: nowrap;
  font: 600 15px/1 var(--schrift-text); text-decoration: none; color: #1a1206; background: #e08a3c;
  transition: background .2s, transform .2s;
}
.kopf__knopf:hover { background: #f0b074; transform: translateY(-1px); }
@media (max-width: 1240px) { .kopf__telefon { display: none; } .nav { gap: 20px; } }

.burger {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  background: rgba(244, 247, 247, .07); border: 1px solid rgba(244, 247, 247, .42);
  border-radius: 2px; color: #f4f7f7; cursor: pointer; transition: background .2s, border-color .2s, color .2s;
}
.burger span { display: block; width: 20px; height: 2px; background: currentColor; position: relative; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor;
  transition: transform .26s cubic-bezier(.2, .7, .2, 1), top .2s ease;
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger[aria-expanded="true"] { background: rgba(224, 138, 60, .18); border-color: #e08a3c; color: #f0b074; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1079px) {
  .nav, .kopf__telefon, .kopf__aktionen > .kopf__knopf:not(.kopf__knopf--immer) { display: none; }
  .burger { display: flex; }
  .kopf.ist-offen { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(12, 24, 34, .98); }
  .kopf.ist-offen .nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0; padding: 6px var(--rand) 26px;
    background: #13202c; border-bottom: 2px solid #e08a3c; box-shadow: 0 24px 50px rgba(0, 0, 0, .6);
    max-height: calc(100vh - var(--kopf-h)); max-height: calc(100dvh - var(--kopf-h)); overflow-y: auto;
  }
  .kopf.ist-offen .nav a { width: 100%; padding: 16px 0; border-bottom: 1px solid rgba(233, 238, 242, .1); font-size: 17.5px; }
  .kopf.ist-offen .nav a[aria-current="true"] { border-bottom-color: #e08a3c; }
  .kopf.ist-offen .nav__meta { display: flex; flex-direction: column; gap: 6px; padding-top: 22px; }
  .kopf.ist-offen .nav__meta a { border: 0; padding: 0; width: auto; font: 700 21px/1.3 var(--schrift-titel); color: #f4f7f7; }
  .kopf.ist-offen .nav__meta a + a { font: 400 15px/1.4 var(--schrift-text); color: rgba(244, 247, 247, .6); }
  .kopf.ist-offen::after { content: ""; position: fixed; inset: var(--kopf-h) 0 0; background: rgba(6, 11, 20, .7); z-index: -1; }
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px; border-radius: 999px;
  border: 1.5px solid var(--tinte); color: var(--tinte);
  font: 600 16px/1.2 var(--schrift-text); text-decoration: none;
  transition: transform .2s, background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.knopf:hover { transform: translateY(-2px); box-shadow: var(--schatten); }
.knopf--voll { background: var(--tinte); color: var(--papier); }
.knopf--voll:hover { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
.knopf--gross { font-size: clamp(17px, 15px + 1vw, 22px); padding: 16px 28px; }

.vorzeile {
  font: 600 13px/1.4 var(--schrift-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--akzent); margin-bottom: 14px;
}
.abschnitt .vorzeile::before { content: "// "; opacity: .7; }
.nb { white-space: nowrap; }

/* KÜNI: Markenfarbe ausnahmslos #006277. Auf dunklem Grund steht das Wort auf einer
   hellen Platte wie ein Textmarker, genau wie auf dynamicupscale.com. */
.ku { color: #006277 !important; font-weight: 700; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ku {
    background: #dceef2; padding: .08em .34em .12em; margin: 0 .04em; border-radius: 3px;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
  :root:not([data-theme="light"]) :is(h1, h2, h3) .ku { padding: .06em .26em .1em; border-radius: 4px; }
}

/* ---------- Status ---------- */
.status {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px;
  padding: 7px 14px 7px 12px; border-radius: 999px; font-size: 14px; font-weight: 500;
  background: var(--karte); border: 1px solid var(--linie); color: var(--text); box-shadow: var(--schatten);
}
.status__punkt { position: relative; flex: none; width: 9px; height: 9px; border-radius: 50%; background: #2e9d57; }
.status__punkt::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: #2e9d57;
  animation: pulsieren 1.8s ease-out infinite;
}
@keyframes pulsieren { to { transform: scale(3); opacity: 0; } }

/* ---------- Start ---------- */
.held { position: relative; padding: 32px 0 56px; overflow: hidden; isolation: isolate; }
.held::before {
  content: ""; position: absolute; z-index: -1;
  width: 70vmax; height: 70vmax; right: -30vmax; top: -35vmax; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--akzent-hell) 26%, transparent), transparent 62%);
  animation: schweben 14s ease-in-out infinite alternate;
}
/* feines Raster wie auf Millimeterpapier, zum Rand hin ausgeblendet */
.held::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--tinte) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--tinte) 7%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 30%, transparent 75%);
}
@keyframes schweben { to { transform: translate(-6vmax, 8vmax) scale(1.1); } }

.held__raster { display: grid; gap: 36px; }
.held__rolle { font: 600 14px/1.4 var(--schrift-mono); letter-spacing: .04em; color: var(--text-leise); margin-bottom: 12px; }
.held h1 { font-size: clamp(34px, 22px + 4.2vw, 62px); font-weight: 800; margin-bottom: 20px; }
.held__akzent { color: var(--akzent); }
.held__lead { font-size: clamp(17px, 15px + .5vw, 20px); color: var(--text-leise); max-width: 36em; }
.held__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.held__knoepfe .knopf { flex: 1 1 180px; }

.belege { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.belege li {
  padding: 6px 12px; border-radius: 999px; font-size: 14px; color: var(--text);
  background: color-mix(in srgb, var(--karte) 80%, transparent); border: 1px solid var(--linie);
}
.belege b { font-family: var(--schrift-titel); color: var(--akzent); margin-right: 2px; }

/* Porträt mit kreisenden Werkzeugen */
.held__buehne {
  position: relative; width: min(100%, 340px); aspect-ratio: 1; margin: 0 auto;
  container-type: inline-size;
}
.held__bild {
  position: absolute; inset: 19%; margin: 0; border-radius: 50%;
  box-shadow: 0 0 0 6px var(--karte), 0 0 0 7px var(--linie), 0 24px 60px -12px color-mix(in srgb, var(--akzent-hell) 55%, transparent);
}
.held__bild img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.umlauf { position: absolute; inset: 0; --r: 145px; --r: 42cqw; }
.umlauf::before, .umlauf::after {
  content: ""; position: absolute; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--tinte) 22%, transparent);
}
.umlauf::before { inset: 8%; }
.umlauf::after { inset: -2%; border-style: solid; border-color: color-mix(in srgb, var(--tinte) 8%, transparent); }
.umlauf span {
  position: absolute; left: 50%; top: 50%; z-index: 1; white-space: nowrap;
  padding: 6px 11px; border-radius: 999px; font: 600 12px/1 var(--schrift-mono);
  background: var(--karte); color: var(--tinte); border: 1px solid var(--linie); box-shadow: var(--schatten);
  transform: translate(-50%, -50%) rotate(var(--w)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--w)));
  animation: kreisen 60s linear infinite;
}
.umlauf span:nth-child(odd) { color: var(--akzent); }
@keyframes kreisen {
  from { transform: translate(-50%, -50%) rotate(var(--w)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--w))); }
  to   { transform: translate(-50%, -50%) rotate(calc(var(--w) + 360deg)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--w) - 360deg)); }
}

@media (min-width: 720px) {
  .held { padding: 56px 0 80px; }
  .held__raster { grid-template-columns: 1.3fr 1fr; align-items: center; column-gap: 40px; }
  .held__buehne { width: min(100%, 420px); }
}
@media (min-width: 1080px) {
  .held__raster { column-gap: 64px; }
  .umlauf span { font-size: 13px; padding: 7px 13px; }
}

/* ---------- Rollen-Laufband ---------- */
.laufband { padding: 22px 0 24px; border-block: 1px solid var(--linie); background: var(--papier-2); overflow: hidden; }
.laufband__titel { text-align: center; font: 600 12px/1 var(--schrift-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-leise); margin-bottom: 16px; }
.laufband__spur {
  display: flex; width: max-content; animation: laufen 38s linear infinite;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.laufband:hover .laufband__spur { animation-play-state: paused; }
.laufband__liste { list-style: none; display: flex; flex: none; }
.laufband__liste li {
  display: flex; align-items: center; white-space: nowrap;
  font: 700 clamp(15px, 13px + .6vw, 19px)/1 var(--schrift-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tinte);
}
.laufband__liste li::after { content: "✦"; margin: 0 28px; font-size: .75em; color: var(--akzent); }
@keyframes laufen { to { transform: translateX(-50%); } }

/* ---------- Angebot ---------- */
.angebote { display: grid; gap: 16px; }
.angebot {
  position: relative; padding: 26px 22px 22px; border-radius: var(--rund);
  background: var(--karte); border: 1px solid var(--linie); box-shadow: var(--schatten); overflow: hidden;
  transition: transform .3s, border-color .3s, opacity .7s ease;
}
.angebot::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--akzent), var(--akzent-hell));
  transform-origin: 0 50%; transform: scaleX(.18); transition: transform .9s .3s cubic-bezier(.2, .7, .2, 1);
}
.angebot:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--akzent) 45%, var(--linie)); }
.angebot:hover::before, .angebot.ist-sichtbar::before { transform: scaleX(1); }
.angebot__kennung { font: 600 14px/1 var(--schrift-mono); color: var(--akzent); margin-bottom: 14px; }
.angebot h3 { font-size: clamp(20px, 18px + .6vw, 24px); margin-bottom: 10px; }
.angebot__beleg { display: inline-block; font: 600 13px/1.4 var(--schrift-mono); color: var(--text-leise); text-decoration: none; padding: 8px 0 2px; border-bottom: 1px dashed var(--linie); }
.angebot__beleg:hover { color: var(--akzent); border-color: var(--akzent); }
@media (min-width: 720px) { .angebote { grid-template-columns: 1fr 1fr; gap: 20px; } .angebot { padding: 30px 28px 26px; } }

/* ---------- Abschnitte ---------- */
.abschnitt { padding: 72px 0; position: relative; }
.abschnitt h2 { font-size: clamp(28px, 20px + 2.8vw, 46px); font-weight: 800; margin-bottom: 16px; max-width: 20em; }
.abschnitt__lead { font-size: clamp(17px, 15.5px + .4vw, 19px); color: var(--text-leise); max-width: 40em; margin-bottom: 36px; }
.abschnitt--hell { background: var(--papier-2); }
.abschnitt--dunkel { background: var(--dunkel); color: var(--dunkel-text); overflow: hidden; overflow: clip; }
.abschnitt--dunkel h2, .abschnitt--dunkel h3 { color: #fff; }
.abschnitt--dunkel .abschnitt__lead { color: var(--dunkel-leise); }
.abschnitt--dunkel .vorzeile { color: var(--akzent-hell); }
.abschnitt--dunkel { --akzent: #e08a3c; --auf-akzent: #1a1206; }
.abschnitt--dunkel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(600px circle at var(--licht-x, 20%) var(--licht-y, 10%), rgba(224, 138, 60, .14), transparent 60%);
  transition: background .1s;
}
@media (min-width: 720px) { .abschnitt { padding: 104px 0; } }

/* ---------- Projekte ---------- */
.projekt {
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund);
  padding: 24px 20px; box-shadow: var(--schatten);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.projekt:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--akzent) 45%, var(--linie)); }
.projekt__kopf { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
.projekt__nr { font: 700 14px/1 var(--schrift-mono); color: var(--akzent); padding-top: 6px; }
.projekt h3 { font-size: clamp(21px, 18px + .8vw, 26px); font-weight: 700; margin-bottom: 6px; }
.projekt__art { font: 13px/1.4 var(--schrift-mono); color: var(--text-leise); margin: 0; }
.projekt h4 { font: 600 12px/1.3 var(--schrift-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--akzent); margin-bottom: 8px; }
.projekt ul { list-style: none; }
.projekt li { position: relative; padding-left: 18px; margin-bottom: 8px; }
.projekt li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: var(--akzent); }
.projekt__link {
  display: inline-flex; gap: 6px; align-items: center; min-height: 44px;
  font-weight: 600; color: var(--tinte); text-decoration: none;
  border-bottom: 2px solid var(--akzent);
}
.projekt__link:hover { color: var(--akzent); }
.projekt__hinweis { font-size: 14px; color: var(--text-leise); margin: 0; padding-top: 8px; border-top: 1px dashed var(--linie); }

.projekt--gross { margin-bottom: 20px; }
.projekt--spiel {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-decoration: none; color: var(--text);
  background: transparent; border: 2px dashed var(--linie); box-shadow: none;
}
.projekt--spiel:hover { border-color: var(--akzent); }
.projekt--spiel p { margin: 0; }
.projekt__raster { display: grid; gap: 22px; }
.projekt__block p:last-child { margin-bottom: 0; }
.projekte-raster { display: grid; gap: 20px; }

@media (min-width: 720px) {
  .projekt { padding: 32px; }
  .projekte-raster { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1080px) {
  .projekt--gross .projekt__raster { grid-template-columns: 1fr 1.3fr 1fr; gap: 36px; }
}

/* ---------- Arbeitsweise: Stolpersteine ---------- */
.stolper { display: grid; gap: 8px; position: relative; }
.stolper__liste { list-style: none; display: grid; gap: 14px; counter-reset: stein; }
.stein {
  display: grid; gap: 10px; align-items: start;
  padding: 22px 20px; border-radius: var(--rund);
  background: var(--dunkel-2); border: 1px solid #25394a;
  transition: border-color .3s, transform .3s, background .3s;
}
.stein:hover { border-color: color-mix(in srgb, var(--akzent) 60%, #25394a); transform: translateX(4px); }
.stein__nr {
  font: 800 clamp(26px, 22px + 1vw, 34px)/1 var(--schrift-titel); color: transparent;
  -webkit-text-stroke: 1.5px var(--akzent-hell); min-width: 1.6em;
}
.stein h3 { font-size: clamp(18px, 16.5px + .5vw, 21px); margin-bottom: 8px; }
.stein p { color: var(--dunkel-leise); margin: 0; }
.stein p b { color: var(--akzent-hell); font-weight: 600; }
@media (min-width: 520px) { .stein { grid-template-columns: auto 1fr; gap: 18px; } }
@media (min-width: 960px) {
  .stolper { grid-template-columns: 1fr 1.35fr; gap: 64px; align-items: start; }
  .stolper__kopf { position: sticky; top: calc(var(--kopf-h) + 32px); }
  .stein { padding: 26px 28px; }
}

/* ---------- Werkzeuge ---------- */
.werkzeuge { display: grid; gap: 8px; }
.werkzeug-gruppen { display: grid; gap: 22px; }
.werkzeug-gruppe h3 { font-size: 17px; margin-bottom: 10px; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
  padding: 7px 13px; border-radius: 999px; font-size: 15px;
  background: var(--karte); border: 1px solid var(--linie); color: var(--text);
  transition: border-color .2s, transform .2s;
}
.chips li:hover { border-color: var(--akzent); transform: translateY(-2px); }
.werkzeug-gruppe--stark .chips li { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
@media (min-width: 900px) {
  .werkzeuge { grid-template-columns: 1fr 1.2fr; gap: 56px; }
  .werkzeug-gruppen { grid-template-columns: 1fr 1fr; }
}

/* ---------- Werdegang ---------- */
.zeitleiste { list-style: none; position: relative; padding-left: 26px; max-width: 760px; }
.zeitleiste::before {
  content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px;
  background: var(--linie);
}
.zeitleiste::after {
  content: ""; position: absolute; left: 6px; top: 8px; width: 2px; height: calc(100% - 16px);
  background: linear-gradient(var(--akzent), var(--akzent-hell));
  transform-origin: 50% 0; transform: scaleY(var(--zeit-fortschritt, 0));
}
.station { position: relative; padding-bottom: 32px; }
.station:last-child { padding-bottom: 0; }
.station::before {
  content: ""; position: absolute; left: -26px; top: 6px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--papier); border: 3px solid var(--akzent); z-index: 1;
}
.station__zeit { font: 600 13px/1.4 var(--schrift-mono); color: var(--akzent); }
.station h3 { font-size: clamp(19px, 17px + .5vw, 22px); margin: 4px 0 2px; }
.station__ort { color: var(--text-leise); font-size: 15px; margin-bottom: 8px; }
.station p:last-child { margin-bottom: 0; }

/* ---------- Abseits vom Bildschirm ---------- */
.privat {
  max-width: 760px; margin-top: 44px; padding: 20px 22px; border-radius: var(--rund);
  background: var(--karte); border: 1px solid var(--linie); border-left: 4px solid var(--akzent); box-shadow: var(--schatten);
}
.privat__titel { font: 600 12px/1.3 var(--schrift-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--akzent); margin-bottom: 8px; }
.privat p:last-child { margin-bottom: 0; }

/* ---------- Kontakt ---------- */
.kontakt__wege { display: grid; gap: 12px; }
.kontaktweg {
  display: grid; grid-template-columns: 50px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; align-items: center;
  padding: 18px 20px; border-radius: var(--rund);
  background: var(--dunkel-2); border: 1px solid #2a4052; text-decoration: none; color: #fff;
  transition: transform .2s, border-color .2s, background .2s;
}
.kontaktweg:hover { transform: translateY(-3px); border-color: var(--akzent); background: #1a2c3a; }
.kontaktweg__art { font: 600 12px/1.3 var(--schrift-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--akzent-hell); }
.kontaktweg__wert { font: 600 clamp(17px, 15px + .6vw, 21px)/1.3 var(--schrift-titel); overflow-wrap: anywhere; }
/* Symbole im Stil der Spielfiguren: flach, gefüllt, runde Ecken. LinkedIn im Original-Blau. */
.kontaktweg__symbol {
  grid-row: span 2; width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), 0 8px 18px -10px rgba(0, 0, 0, .6);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.kontaktweg__art, .kontaktweg__wert { grid-column: 2; }
.kontaktweg__symbol svg { width: 28px; height: 28px; }
.kontaktweg--mail .kontaktweg__symbol { background: #e08a3c; }
.kontaktweg--tel .kontaktweg__symbol { background: #5fd08a; }
.kontaktweg--li .kontaktweg__symbol { background: #0a66c2; }
.kontaktweg--li .kontaktweg__symbol svg { width: 26px; height: 26px; }
.kontaktweg:hover .kontaktweg__symbol, .kontaktweg:focus-visible .kontaktweg__symbol { transform: translateY(-2px) scale(1.06); }
.kontaktweg--mail:hover .kontaktweg__symbol svg { animation: brief-hopsen .6s ease; }
.kontaktweg--tel .kontaktweg__symbol svg { animation: klingeln 5s ease-in-out 2s infinite; transform-origin: 50% 55%; }
.kontaktweg--tel:hover .kontaktweg__symbol svg { animation: klingeln-schnell .5s ease-in-out infinite; }
.kontaktweg--li:hover .kontaktweg__symbol svg { animation: brief-hopsen .6s ease; }
@keyframes klingeln { 0%, 14%, 100% { rotate: 0deg; } 2%, 6%, 10% { rotate: -14deg; } 4%, 8%, 12% { rotate: 14deg; } }
@keyframes klingeln-schnell { 0%, 100% { rotate: 0deg; } 25% { rotate: -14deg; } 75% { rotate: 14deg; } }
@keyframes brief-hopsen { 0%, 100% { translate: 0 0; } 35% { translate: 0 -5px; } 65% { translate: 0 1px; } }
.kopf__symbol { width: 1.05em; height: 1.05em; vertical-align: -.16em; margin-right: .45em; }
@media (min-width: 900px) { .kontakt__wege { grid-template-columns: repeat(3, 1fr); } }
.kontakt__klein { font-size: 15px; color: var(--dunkel-leise); margin: 18px 0 0; }

.ablauf { list-style: none; display: grid; gap: 10px; margin-bottom: 28px; }
.ablauf li {
  display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center;
  padding: 14px 16px; border-radius: var(--rund); border: 1px dashed #34495b;
}
.ablauf__nr {
  grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font: 700 15px/1 var(--schrift-titel); background: var(--akzent); color: var(--auf-akzent);
}
.ablauf b { color: #fff; font-family: var(--schrift-titel); font-size: 17px; }
.ablauf li > span:last-child { color: var(--dunkel-leise); font-size: 15px; }
@media (min-width: 900px) { .ablauf { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Spiel ---------- */
.regeln { display: grid; gap: 10px; margin-bottom: 16px; }
.regel {
  padding: 14px 16px; border-radius: var(--rund); background: var(--karte);
  border: 1px solid var(--linie); border-left: 4px solid var(--tinte);
}
.regel--weg { border-left-color: #d9503e; }
.regel--gut { border-left-color: #2e9d57; }
.regel__kopf { font: 700 13px/1.3 var(--schrift-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinte); margin-bottom: 8px; }
.regel__bilder { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 6px; font-weight: 600; }
.regel__bilder span { margin-right: 6px; }
.regel__bilder svg { flex: none; }
.regel__text { font-size: 14px; color: var(--text-leise); margin: 0; }
kbd {
  display: inline-block; padding: 3px 9px; border-radius: 6px; font: 600 13px/1.4 var(--schrift-mono);
  background: var(--papier-2); border: 1px solid var(--linie); border-bottom-width: 3px; color: var(--tinte);
}
@media (min-width: 720px) { .regeln { grid-template-columns: 1fr 1.2fr 1.2fr; } }

.spiel {
  position: relative; width: 100%; aspect-ratio: 5 / 4; border-radius: var(--rund); overflow: hidden;
  background: #0a141d; box-shadow: var(--schatten); border: 1px solid #243646;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.spiel canvas { display: block; width: 100%; height: 100%; cursor: pointer; outline: none; }
.spiel canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--akzent-hell); }
.spiel__tafel {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 16px; background: rgba(6, 14, 20, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  user-select: text; -webkit-user-select: text;
}
.spiel__tafel[hidden] { display: none; }
.spiel__figur { width: 96px; height: auto; flex: none; filter: drop-shadow(0 8px 20px rgba(63, 240, 240, .25)); animation: winken 2.4s ease-in-out infinite; }
@keyframes winken { 50% { transform: translateY(-6px) rotate(-2deg); } }
.spiel__tafel-text {
  width: 100%; max-width: 400px; padding: 16px 18px; border-radius: var(--rund);
  background: #f5f1ea; color: #1f2a33; box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
}
.spiel__tafel-text p { font-size: 15px; margin-bottom: 10px; }
.spiel__tafel-text .spiel__titel { font: 800 21px/1.15 var(--schrift-titel); color: #18324a; margin-bottom: 4px; }
/* Knöpfe in der Tafel: feste helle Fläche, deshalb feste Farben statt Tokens */
.spiel__tafel-text .knopf { width: 100%; min-height: 44px; padding: 10px 16px; background: transparent; border-color: #18324a; color: #18324a; }
.spiel__tafel-text .knopf--voll { background: #18324a; color: #f5f1ea; }
.spiel__tafel-text .knopf:hover { background: #924810; border-color: #924810; color: #fff; }
.spiel__eintrag { margin-bottom: 10px; }
.spiel__eintrag[hidden] { display: none; }
.spiel__label { display: block; font: 600 12px/1.3 var(--schrift-mono); letter-spacing: .04em; color: #56626c; margin-bottom: 6px; }
.spiel__zeile { display: flex; gap: 8px; }
.spiel__zeile input {
  flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px; border-radius: 10px;
  border: 1.5px solid #b9b0a2; background: #fff; color: #1f2a33; font: 500 16px/1.2 var(--schrift-text);
}
.spiel__zeile input:focus { outline: none; border-color: #18324a; box-shadow: 0 0 0 3px rgba(24, 50, 74, .18); }
.spiel__zeile .knopf { width: auto; flex: none; }
.spiel.laeuft { box-shadow: 0 0 0 2px var(--akzent-hell), var(--schatten); }
@media (max-width: 519px) {
  .spiel__figur { display: none; }
  .spiel__tafel { padding: 10px; }
  .spiel__tafel-text { padding: 12px 14px; }
  .spiel__tafel-text p { font-size: 14px; margin-bottom: 8px; }
  .spiel__tafel-text .spiel__titel { font-size: 19px; }
}
@media (min-width: 720px) { .spiel { aspect-ratio: 16 / 7; } .spiel__figur { width: 130px; } }

.bestenliste {
  margin-top: 16px; padding: 18px 20px; border-radius: var(--rund);
  background: var(--karte); border: 1px solid var(--linie); box-shadow: var(--schatten); max-width: 560px;
}
.bestenliste h3 { font-size: 20px; margin-bottom: 10px; }
.bestenliste ol { list-style: none; counter-reset: platz; }
.bestenliste li {
  display: grid; grid-template-columns: 2.2em 1fr auto; gap: 10px; align-items: baseline;
  padding: 8px 10px; border-radius: 8px; font-size: 16px;
}
.bestenliste li:nth-child(odd) { background: var(--papier); }
.bestenliste li.ist-eigen { background: color-mix(in srgb, #2e9d57 16%, var(--karte)); box-shadow: inset 3px 0 0 #2e9d57; }
.bestenliste__platz { font: 700 14px/1 var(--schrift-mono); color: var(--akzent); }
.bestenliste li:nth-child(-n+3) .bestenliste__platz { font-size: 16px; }
.bestenliste__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bestenliste__punkte { font: 700 15px/1 var(--schrift-mono); color: var(--tinte); }
.bestenliste li.bestenliste__leer { display: block; color: var(--text-leise); background: none; }
.bestenliste__hinweis { font-size: 13px; color: var(--text-leise); margin: 8px 0 0; }
.bestenliste__hinweis:empty { display: none; }

/* ---------- Fuß ---------- */
.fuss { background: var(--dunkel); color: var(--dunkel-leise); padding: 24px 0 32px; font-size: 14px; border-top: 1px solid #1f3140; }
.fuss__innen { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; }
.fuss nav { display: flex; gap: 20px; }
.fuss a { text-decoration: none; padding: 10px 0; }
.fuss a:hover { color: #fff; }

/* ---------- Rechtsseiten ---------- */
.recht { padding: 48px 0 80px; }
.recht .wrap { max-width: 760px; }
.recht h1 { font-size: clamp(30px, 22px + 2.5vw, 44px); margin-bottom: 28px; }
.recht h2 { font-size: 21px; margin: 32px 0 10px; }
.recht a { color: var(--tinte); }
.zurueck { display: inline-block; margin-bottom: 24px; color: var(--text-leise); text-decoration: none; padding: 8px 0; }
.zurueck:hover { color: var(--akzent); }

/* ---------- Bilder in Projekten ---------- */
.projekt__kopf .projekt__figur {
  width: 64px; height: auto; margin-left: auto; flex: none; margin-top: -6px;
  filter: drop-shadow(0 8px 18px rgba(0, 98, 119, .35)); animation: winken 3s ease-in-out infinite;
}
@media (min-width: 720px) { .projekt__kopf .projekt__figur { width: 92px; margin-top: -14px; margin-bottom: -20px; } }
/* Bildleisten: wischen am Handy, Pfeile und Punkte */
.projekt { min-width: 0; }
.galerie { position: relative; margin: 4px -4px 18px; min-width: 0; max-width: calc(100% + 8px); }
.galerie__spur {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 4px;
  padding: 4px 4px 10px; scrollbar-width: none; overscroll-behavior-x: contain; outline: none;
}
.galerie__spur::-webkit-scrollbar { display: none; }
.galerie__spur:focus-visible { box-shadow: 0 0 0 2px var(--akzent); border-radius: 12px; }
.galerie__bild { flex: none; margin: 0; scroll-snap-align: start; width: min(62vw, 250px); }
.galerie__bild img {
  width: 100%; height: auto;
  border-radius: 12px; border: 1px solid var(--linie); background: #0f1a24; cursor: zoom-in;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .5); transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
.galerie__bild img:hover { transform: translateY(-3px); }
.galerie--quer .galerie__bild { width: 100%; }
.galerie__spur { align-items: flex-start; }
.galerie__leiste { display: flex; align-items: center; gap: 8px; padding: 0 4px; }
.galerie__punkte { display: flex; gap: 6px; flex: 1; }
.galerie__punkte button {
  width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center;
}
.galerie__punkte button::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: var(--linie); transition: width .3s, background .3s; }
.galerie__punkte button.ist-aktiv::before { width: 20px; background: var(--akzent); }
.galerie__pfeil {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--linie); background: var(--karte);
  color: var(--tinte); font: 600 16px/1 var(--schrift-text); cursor: pointer; display: none;
}
.galerie__pfeil:hover { border-color: var(--akzent); color: var(--akzent); }
.galerie__pfeil:disabled { opacity: .35; cursor: default; }
@media (hover: hover) { .galerie__pfeil { display: inline-grid; place-items: center; } }
@media (min-width: 720px) { .galerie__bild { width: 220px; } .galerie--quer .galerie__bild { width: 100%; } }

/* Wissensbasis: Obsidian-Screenshot vor einem gezeichneten Gehirn. Beim Hinscrollen wächst das Netz
   Punkt für Punkt auf einer Zeichenfläche (Lage aus dem Screenshot gemessen), am Ende steht der echte
   Screenshot. Ohne Skript oder bei reduzierter Bewegung steht der Screenshot sofort. */
.graph { position: relative; margin: 0 0 4px; aspect-ratio: 720 / 780; border-radius: 12px; overflow: hidden; background: #1c1c1c; border: 1px solid #333; }
.graph__buehne { position: absolute; inset: 0; }
.graph__buehne > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.graph__wachsen { opacity: 0; transition: opacity .8s; }
.graph__netz { transition: opacity .8s; }
.graph--laeuft .graph__wachsen { opacity: 1; transition: none; }
.graph--laeuft .graph__netz { opacity: 0; transition: none; }
.graph__nochmal {
  position: absolute; right: 10px; bottom: 10px; padding: 7px 12px; border-radius: 999px; cursor: pointer;
  font: 500 13px/1 var(--schrift-text); color: #d6d6d6; background: rgba(28, 28, 28, .8); border: 1px solid #444;
  transition: border-color .2s, color .2s;
}
.graph__nochmal:hover { color: #fff; border-color: #888; }

/* Erklärungen zu Bildern: bewusst als eigener Text erkennbar, nicht Teil des Bildes */
.galerie__bild figcaption, .bildtext {
  position: relative; padding-left: 20px; font-size: 13.5px; line-height: 1.5; color: var(--text-leise);
}
.galerie__bild figcaption { margin-top: 10px; }
.galerie__bild figcaption::before, .bildtext::before {
  content: "↑"; position: absolute; left: 2px; top: 0; font: 700 13px/1.5 var(--schrift-mono); color: var(--akzent);
}
.bildtext { margin: 10px 0 16px; }
.bildtext__stand { display: block; margin-top: 4px; font: 12px/1.4 var(--schrift-mono); color: var(--text-leise); }

/* Großansicht */
.grossbild {
  max-width: min(94vw, 900px); max-height: 94vh; padding: 0; border: 0; border-radius: 14px;
  background: #0a121a; color: #e9eef2; overflow: auto;
}
.grossbild::backdrop { background: rgba(4, 8, 12, .82); backdrop-filter: blur(4px); }
.grossbild img { display: block; width: 100%; height: auto; max-height: 84vh; object-fit: contain; }
.grossbild p { margin: 0; padding: 10px 16px 14px; font-size: 14px; color: #a9b6c1; }
.grossbild__zu {
  position: sticky; float: right; top: 8px; margin: 8px 8px -44px 0; z-index: 1; width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: rgba(15, 26, 36, .85); color: #fff; font-size: 16px; cursor: pointer;
}

/* Licht folgt dem Zeiger auf Karten (nur mit Maus) */
.projekt, .angebot { position: relative; isolation: isolate; }
.projekt::after, .angebot::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--akzent-hell) 16%, transparent), transparent 70%);
  opacity: 0; transition: opacity .35s;
}
@media (hover: hover) { .projekt:hover::after, .angebot:hover::after { opacity: 1; } }

/* ---------- Aussage: Wörter leuchten beim Scrollen auf ---------- */
.aussage { padding: 88px 0; background: var(--papier); }
.aussage__text {
  margin: 0; max-width: 18em; font: 800 clamp(30px, 18px + 4.4vw, 68px)/1.08 var(--schrift-titel);
  letter-spacing: -.02em; color: var(--tinte);
}
.aussage__text em { font-style: normal; color: var(--akzent); }
.js .aussage__text .wort { opacity: .16; transition: opacity .35s ease; }
.js .aussage__text .wort.an { opacity: 1; }
@media (min-width: 720px) { .aussage { padding: 128px 0; } }

/* ---------- Stolpersteine: der Stein in Lesehöhe leuchtet ---------- */
.stein.ist-aktiv { border-color: color-mix(in srgb, var(--akzent) 70%, #25394a); background: #1a2c3b; }
.stein.ist-aktiv .stein__nr { color: var(--akzent-hell); }
.stein__nr { transition: color .35s; }

/* ---------- Werdegang: Websites als eigener Faden ---------- */
.station--web::before { background: var(--akzent); }
.station--web h3 { color: var(--akzent); }

/* ---------- Einblenden beim Scrollen ---------- */
/* Über translate statt transform, damit Hover-Effekte (transform) unabhängig bleiben.
   Die Verzögerung gilt nur fürs Einblenden, nicht für den Hover. */
.js .einblenden {
  opacity: 0; translate: 0 24px;
  transition: opacity .7s ease var(--verzug, 0s), translate .7s cubic-bezier(.2, .7, .2, 1) var(--verzug, 0s),
    transform .3s, border-color .3s, box-shadow .3s;
}
.js .einblenden.ist-sichtbar { opacity: 1; translate: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .einblenden { opacity: 1; translate: none; }
  .zeitleiste::after { transform: none; }
  .js .aussage__text .wort { opacity: 1; }
  .laufband__spur { width: auto; flex-wrap: wrap; justify-content: center; -webkit-mask-image: none; mask-image: none; }
  .laufband__liste[aria-hidden] { display: none; }
  .laufband__liste { flex-wrap: wrap; justify-content: center; row-gap: 10px; padding: 0 var(--rand); }
}