/* ══════════════════════════════════════════════════════════════════
   ERAS — fünf Epochen, fließend ineinander
   Die Hintergründe liegen als feste Ebenen übereinander und werden
   von js/era.js beim Scrollen ineinander geblendet. Die Sektionen
   selbst sind durchsichtig und bringen nur Schrift und Farbe mit.
   ══════════════════════════════════════════════════════════════════ */

.section {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: transparent;
}

/* Epoche 2 trägt die Taskleiste unten. Die Glas-Epoche hält sich den
   Platz fürs Dock selbst frei (.glass__foot). */
.section--luna { padding-bottom: clamp(7rem, 14vh, 10rem); }


/* ══════════════════════════════════════════════════════════════════
   DIE HINTERGRUND-EBENEN
   ══════════════════════════════════════════════════════════════════ */

.backdrops {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.backdrop {
  position: absolute;
  inset: 0;
  opacity: 0;
  will-change: opacity;
}
.backdrop[data-era="0"] { opacity: 1; }

/* Inhalt liegt über den Ebenen */
main, .foot { position: relative; z-index: 1; }

/* Ohne JavaScript blendet nichts — dann zeigt jede Sektion einfach
   ihren eigenen Hintergrund, damit die Seite lesbar bleibt. */
html:not(.js) .backdrops { display: none; }
html:not(.js) .section--terminal { background: #ADADA4; }
html:not(.js) .section--system   { background: #7E8DA0; }
html:not(.js) .section--luna     { background: linear-gradient(to bottom, #1B4FA0, #9CCBF0 70%, #5CA32E); }
html:not(.js) .section--glass    { background: linear-gradient(180deg, #191B20, #0D0F12); }
html:not(.js) .section--about,
html:not(.js) .section--now      { background: #0A0B0D; }


/* — 0 · Terminal — */
.backdrop--terminal { background: #ADADA4; }

/* — 1 · Platinum-Schreibtisch: Grau mit Farbe, ~1997.
     Das feine Karo bleibt als Nachhall des alten Dither-Musters,
     nur nicht mehr als Schwarzweiß-Raster. — */
.backdrop--system {
  background-color: #7E8DA0;
  background-image:
    radial-gradient(130% 95% at 50% 0%, rgba(255, 255, 255, .26), transparent 62%),
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, .06) 0 1px, transparent 1px 3px);
}

/* — 2 · Himmel und Hügel — */
.backdrop--luna { background: #1B4FA0; overflow: hidden; }
.bliss {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* — 3 · Liquid Glass: neutrales Graphit, ein einziger kühler Schein.
     Das Glas braucht nur genug Verlauf, um sichtbar zu werden — die
     Farbe kam vorher aus dem Hintergrund und hat alles erschlagen. — */
.backdrop--glass {
  background:
    radial-gradient(85% 55% at 50% 0%, rgba(150, 170, 205, .16) 0%, transparent 62%),
    radial-gradient(65% 45% at 82% 96%, rgba(120, 145, 190, .12) 0%, transparent 62%),
    linear-gradient(180deg, #191B20 0%, #131519 55%, #0D0F12 100%);
}

/* — 4 · Jetzt — */
.backdrop--now { background: #0A0B0D; }


/* ══════════════════════════════════════════════════════════════════
   0 · TERMINAL — grau, schwarz, ~1979
   ══════════════════════════════════════════════════════════════════ */

.section--terminal {
  --font-body: 'VT323', ui-monospace, 'Courier New', monospace;
  --font-display: var(--font-body);
  color: #111;
  font-family: var(--font-body);
  align-items: center;
  padding-block: 4rem;
}

.terminal {
  width: min(100% - 2.5rem, 46rem);
  font-size: clamp(1.35rem, 1rem + 1.6vw, 2.1rem);
  line-height: 1.35;
  text-shadow: 0 0 1px rgba(0, 0, 0, .35);
}

.terminal__prompt { opacity: .72; margin-bottom: 1.2em; }
.terminal__user { font-weight: 700; }
.terminal__path { opacity: .8; }

.terminal__name {
  font-family: var(--font-body);
  font-size: clamp(2.6rem, 1.2rem + 7.5vw, 6.5rem);
  line-height: .95;
  font-weight: 400;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin-bottom: .35em;
}

.terminal__list { margin-bottom: 1.4em; }
.terminal__list li { position: relative; padding-left: 1.6em; }
.terminal__list li::before { content: '>'; position: absolute; left: 0; opacity: .55; }
.terminal__wink { white-space: nowrap; }
.terminal__cursorline { min-height: 1.35em; }

.cursor {
  display: inline-block;
  width: .55em; height: 1em;
  background: #111;
  vertical-align: -.15em;
  animation: blink 1.06s steps(1) infinite;
}
@keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

.terminal__hint {
  margin-top: 2.5em;
  font-size: .62em;
  letter-spacing: .06em;
  opacity: .62;
  display: flex; align-items: center; gap: .6em;
}
.terminal__hint-arrow { animation: nudge 2.1s ease-in-out infinite; }
@keyframes nudge {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50%      { transform: translateY(.35em); opacity: 1; }
}

/* Boot-Sequenz. Versteckt wird nur, wenn boot.js selbst die Klasse
   setzt — so bleibt der Text sichtbar, falls das Skript ausbleibt. */
.boot .section--terminal .line { opacity: 0; }
.boot .section--terminal .line.is-in { opacity: 1; animation: lineIn .16s steps(3) both; }
@keyframes lineIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .boot .section--terminal .line { opacity: 1; }
}

/* Röhren-Overlay. Blendet stufenlos mit dem Epochen-Fortschritt aus —
   deshalb hier kein Flackern per Animation, das würde die Deckkraft
   überschreiben und beim Wechsel springen. */
.crt {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: clamp(0, calc(1 - var(--era-p, 0)), 1);
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,.07) 0 1px, transparent 1px 3px),
    radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.28) 100%);
}
/* Ohne JavaScript gibt es keinen Fortschritt — dann läge die Röhre
   über der ganzen Seite. */
html:not(.js) .crt { display: none; }


/* ══════════════════════════════════════════════════════════════════
   1 · PLATINUM — graue Fenster mit 3D-Kante, Farbe im Detail, ~1997
   Die Epoche, in der aus dem Schwarzweiß-Kasten eine Oberfläche
   mit Licht und Schatten wurde. Der Regenbogen-Apfel gehört noch
   dazu, er blieb es bis 1998.
   ══════════════════════════════════════════════════════════════════ */

.section--system {
  --font-body: 'Charcoal', 'Geneva', Verdana, Tahoma, ui-sans-serif, sans-serif;
  --font-display: var(--font-body);
  --pl-face:   #DDDDDD;   /* Fensterfläche */
  --pl-light:  #FFFFFF;   /* obere Lichtkante */
  --pl-mid:    #C4C4C8;
  --pl-shade:  #A0A0A6;   /* untere Schattenkante */
  --pl-line:   #6E6E76;   /* Umriss */
  color: #000;
  font-family: var(--font-body);
  padding-block: clamp(6rem, 14vh, 10rem);
}

.section--system .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.3rem);
  line-height: 1.18;
  letter-spacing: -.02em;
  margin-bottom: 1.1rem;
}
.section--system .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(.98rem, .9rem + .35vw, 1.12rem);
  line-height: 1.3;
  letter-spacing: -.01em;
  margin-bottom: .55em;
}
.section--system .lead {
  font-size: 1rem;
  line-height: 1.65;
  max-width: 50ch;
}
.section--system p { font-size: .95rem; line-height: 1.62; }

/* Platinum-Fenster: graue Fläche, Lichtkante oben links,
   Schattenkante unten rechts, weicher Schlagschatten */
.win {
  background: var(--pl-face);
  border: 1px solid var(--pl-line);
  border-radius: 4px;
  box-shadow:
    inset 1px 1px 0 var(--pl-light),
    inset -1px -1px 0 var(--pl-shade),
    0 8px 22px rgba(20, 30, 48, .3);
}

.win__bar {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .42rem;
  border-bottom: 1px solid var(--pl-shade);
  border-radius: 3px 3px 0 0;
  background: linear-gradient(to bottom, #EDEDEF 0%, var(--pl-face) 55%, #D2D2D6 100%);
}

/* Die Streifen links und rechts des Titels — in Platinum feine
   Lichtlinien statt harter schwarzer Balken */
.win__stripes {
  flex: 1;
  min-width: .8rem;
  height: 11px;
  border-radius: 1px;
  background-image: repeating-linear-gradient(to bottom,
    #FFFFFF 0 1px, #B8B8BE 1px 2px);
}

/* Schließfeld mit Kante — anklickbar statt nur gezeichnet */
.win__close {
  flex: none;
  width: 13px; height: 13px;
  padding: 0;
  border: 1px solid var(--pl-line);
  border-radius: 2px;
  background: linear-gradient(160deg, #FDFDFD 0%, #E2E2E6 52%, #C2C2C8 100%);
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 var(--pl-shade);
  -webkit-appearance: none;
  appearance: none;
}
button.win__close { cursor: pointer; }
button.win__close:hover { background: linear-gradient(160deg, #fff 0%, #EDEDF0 52%, #D2D2D8 100%); }
button.win__close:active {
  background: linear-gradient(160deg, #9C9CA2, #B8B8BE);
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
}

.win__title {
  flex: none;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #16161A;
  padding: 0 .5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}

/* Der Regenbogen-Apfel — 1997 noch das Zeichen des Hauses */
.win__rainbow {
  flex: none;
  width: 13px; height: 13px;
  border: 1px solid var(--pl-line);
  border-radius: 2px;
  background: linear-gradient(to bottom,
    #61BB46 0 16.66%, #FDB827 0 33.33%, #F5821F 0 50%,
    #E03A3E 0 66.66%, #963D97 0 83.33%, #009DDC 0 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4);
}

.win__body { padding: 1.3rem 1.4rem 1.45rem; }

.win--main {
  max-width: 48rem;
  margin: 0 auto 3rem;
}
.win--main .win__body { padding: 1.9rem clamp(1.4rem, 3vw, 2.4rem) 2.1rem; }

.grid--benefits {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

/* Jedes Fenster bekommt eine Farbe aus der Sechser-Palette */
.grid--benefits .win--sm:nth-child(6n+1) { --chip: #61BB46; }
.grid--benefits .win--sm:nth-child(6n+2) { --chip: #FDB827; }
.grid--benefits .win--sm:nth-child(6n+3) { --chip: #F5821F; }
.grid--benefits .win--sm:nth-child(6n+4) { --chip: #E03A3E; }
.grid--benefits .win--sm:nth-child(6n+5) { --chip: #963D97; }
.grid--benefits .win--sm:nth-child(6n+6) { --chip: #009DDC; }

.win--sm .win__bar::after {
  content: '';
  flex: none;
  width: 11px; height: 11px;
  border: 1px solid var(--pl-line);
  border-radius: 2px;
  background: var(--chip, #888);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
}

/* Die Symbole tragen jetzt Farbe — dafür stand diese Epoche.
   shape-rendering aus dem HTML wird hier überstimmt: die harten
   Treppen gehörten zum 1-Bit-Look, nicht zu Platinum. */
.ico { display: block; width: 30px; height: 30px; margin-bottom: 1rem; }
.ico svg {
  width: 100%; height: 100%;
  fill: var(--chip, #4A4A52);
  shape-rendering: auto;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .6));
  transition: transform .16s ease;
}
.win--sm:hover .ico svg { transform: scale(1.08); }

.win--sm { transition: transform .12s ease, box-shadow .12s ease; }
.win--sm:hover {
  transform: translate(-1px, -2px);
  box-shadow:
    inset 1px 1px 0 var(--pl-light),
    inset -1px -1px 0 var(--pl-shade),
    0 14px 30px rgba(20, 30, 48, .38);
}
.win--sm.is-closing { animation: winClose .28s ease-in forwards; }
@keyframes winClose { to { transform: scale(.86); opacity: 0; } }
.is-closed { display: none !important; }

/* Leiste, die geschlossene Fenster zurückholt — entsteht per JS.
   Die Klasse setzt display, also muss [hidden] ausdrücklich gewinnen. */
.restore[hidden] { display: none; }
.restore {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--pl-shade, #A0A0A6);
  font-size: .85rem;
}
.restore__btn {
  padding: .32rem .95rem;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 700;
  color: #16161A;
  background: linear-gradient(to bottom, #FDFDFD 0%, #E4E4E8 52%, #C6C6CC 100%);
  border: 1px solid var(--pl-line, #6E6E76);
  border-radius: 4px;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 var(--pl-shade, #A0A0A6);
  cursor: pointer;
}
.restore__btn:hover { background: linear-gradient(to bottom, #fff 0%, #EFEFF2 52%, #D4D4DA 100%); }
.restore__btn:active {
  background: linear-gradient(to bottom, #A8A8AE, #C4C4CA);
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
}

.section--luna .restore {
  justify-content: center;
  border-top: 0;
  margin-top: 1.4rem;
  padding-top: 0;
  color: #EAF4FF;
  text-shadow: 0 1px 3px rgba(0, 30, 80, .55);
}
.section--luna .restore__btn {
  border: 1px solid #7B7B6B;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85);
  background: linear-gradient(to bottom, #FDFDFB 0%, #ECE9D8 46%, #D8D3BC 100%);
  color: #1A1A18;
  font-weight: 700;
  text-shadow: none;
}
.section--luna .restore__btn:active { transform: none; box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .28); }


/* ══════════════════════════════════════════════════════════════════
   2 · LUNA — Fenster, Taskleiste, Hügel, ~2001
   ══════════════════════════════════════════════════════════════════ */

.section--luna {
  --font-body: Tahoma, Verdana, Geneva, sans-serif;
  --font-display: var(--font-body);
  font-family: var(--font-body);
  color: #fff;
}

.luna__head { margin-bottom: 2.5rem; text-align: center; }
.section--luna .h2 {
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 30, 80, .6);
  margin-bottom: .6rem;
}
.section--luna .lead {
  color: #EAF4FF;
  text-shadow: 0 1px 5px rgba(0, 30, 80, .6);
  margin-inline: auto;
}

.grid--projects {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  align-items: start;
}

.xpwin {
  position: relative;
  background: #ECE9D8;
  border: 3px solid #1E56B0;
  border-top: 0;
  border-radius: 8px 8px 3px 3px;
  box-shadow: 0 12px 34px rgba(0, 25, 70, .42);
  overflow: hidden;
  color: #1A1A18;
  transition: box-shadow .16s ease;
}
.xpwin:hover { box-shadow: 0 18px 44px rgba(0, 25, 70, .5); }
.xpwin.is-dragging { box-shadow: 0 26px 60px rgba(0, 25, 70, .58); user-select: none; }
.xpwin.is-collapsed .xpwin__body,
.xpwin.is-collapsed .xpwin__status { display: none; }

.xpwin__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .28rem .3rem .28rem .6rem;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(to bottom,
    #4A8AE0 0%, #2C6BD2 8%, #1E56B0 42%, #235FBE 88%, #4E8DE0 100%);
  color: #fff;
  font-weight: 700;
  font-size: .82rem;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .5);
}
.xpwin__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xpwin__btns { display: flex; gap: 2px; flex: none; }

.xpbtn {
  width: 19px; height: 17px;
  padding: 0;
  display: grid; place-items: center;
  font-family: inherit;
  font-size: .62rem; font-weight: 700;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 3px;
  background: linear-gradient(to bottom, #6FA5E8, #2A63C4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}
button.xpbtn { cursor: pointer; -webkit-appearance: none; appearance: none; }
button.xpbtn:hover { background: linear-gradient(to bottom, #8FBDF2, #3A73D4); }
button.xpbtn:active { box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .4); }
.xpbtn--close { background: linear-gradient(to bottom, #E8896B, #C1391A); }
button.xpbtn--close:hover { background: linear-gradient(to bottom, #F09B7E, #D8481F); }

@media (pointer: fine) {
  .xpwin__bar { cursor: grab; }
  .xpwin.is-dragging .xpwin__bar { cursor: grabbing; }
}

.xpwin__body { padding: .55rem; }

.xpwin__shot {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  border: 1px solid #8A8778;
  background: #fff;
  box-shadow: inset 0 0 0 1px #fff;
}

.xpwin__meta { padding: .9rem .55rem .5rem; }
.section--luna .h3 { font-size: .95rem; margin-bottom: .45rem; color: #14304F; text-shadow: none; }
.xpwin__meta p { font-size: .84rem; line-height: 1.55; color: #3A3A34; margin-bottom: .8rem; }

.tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: 1rem; }
.tags li {
  font-size: .68rem;
  padding: .15rem .45rem;
  background: #fff;
  border: 1px solid #B4B0A0;
  border-radius: 2px;
  color: #4A4A42;
}

.xpbutton {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .34rem .95rem;
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  color: #1A1A18;
  background: linear-gradient(to bottom, #FDFDFB 0%, #ECE9D8 46%, #D8D3BC 100%);
  border: 1px solid #7B7B6B;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85);
  cursor: pointer;
}
.xpbutton:hover { background: linear-gradient(to bottom, #FFF 0%, #F5F2E4 46%, #E2DDC8 100%); border-color: #4A6FA8; }
.xpbutton:active { box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .28); }

.xpwin__soon {
  display: inline-block;
  font-size: .74rem;
  padding: .3rem .7rem;
  background: #FFF8D8;
  border: 1px solid #C9BC7A;
  color: #6B5A16;
}

.xpwin__status {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .28rem .6rem;
  font-size: .7rem;
  color: #4A4A42;
  background: #ECE9D8;
  border-top: 1px solid #fff;
  box-shadow: inset 0 1px 0 #B4B0A0;
}

.xpwin__body--empty .xpwin__placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  border: 1px dashed #8A8778;
  background: repeating-linear-gradient(45deg, #F5F3E8 0 8px, #ECE9D8 8px 16px);
  font-size: 3rem;
}


/* ══════════════════════════════════════════════════════════════════
   3 · LIQUID GLASS — Bühne statt Aufklappfelder, ~2025
   ══════════════════════════════════════════════════════════════════ */

.section--glass {
  --font-body: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: var(--font-body);
  font-family: var(--font-body);
  color: #F2F4F7;
  display: block;            /* die Bühne bringt ihre eigene Höhe mit */
  padding-top: clamp(6rem, 14vh, 9rem);
}

/* Die Überschrift leitet die Sektion ein und scrollt dann weg. Sie
   festzupinnen sah zwar gut aus, nahm den Karten aber den oberen
   Drittel des Bildschirms — der Titel verschwand dahinter. Die
   Orientierung übernimmt die Leiste links. */
.glass__head {
  text-align: center;
  margin-bottom: clamp(2rem, 7vh, 4.5rem);
}
.section--glass .eyebrow { color: rgba(255, 255, 255, .5); margin-bottom: .85rem; }
.section--glass .h2 {
  margin-bottom: .8rem;
  font-weight: 700;
  letter-spacing: -.035em;
}
.section--glass .lead { color: rgba(255, 255, 255, .58); margin-inline: auto; }


/* ── Die Bühne ──────────────────────────────────────────────────── */

.flow {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
}

/* Fortschritt links, klebt auf halber Höhe mit */
.flow__rail {
  position: sticky;
  top: 50vh;
  display: grid;
  gap: .85rem;
  margin: 0;
  transform: translateY(-50%);
}
.flow__rail li {
  display: flex;
  align-items: center;
  gap: .55rem;
  height: 1.1rem;
}
.flow__rail-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  transition: background .35s ease, transform .35s ease;
}
.flow__rail-num {
  font-size: .68rem;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .28);
  transition: color .35s ease;
}
.flow__rail li.is-current .flow__rail-dot { background: #fff; transform: scale(1.5); }
.flow__rail li.is-current .flow__rail-num { color: rgba(255, 255, 255, .9); }

.flow__steps { display: block; margin: 0; }

/* Jeder Schritt bekommt seinen eigenen Bildschirm. Die Polster halten
   oben die Menüleiste und unten das Dock frei — dadurch landet die
   Karte in der Mitte des tatsächlich freien Bereichs, nicht in der
   Mitte des Fensters. */
.flow__step {
  min-height: 100svh;
  padding-top: 3rem;
  padding-bottom: 7rem;
  display: grid;
  align-items: center;
  justify-items: center;
}

.flow__card {
  width: min(100%, 46rem);
  padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: linear-gradient(152deg,
    rgba(255, 255, 255, .11) 0%,
    rgba(255, 255, 255, .05) 100%);
  backdrop-filter: blur(26px) saturate(130%);
  -webkit-backdrop-filter: blur(26px) saturate(130%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 24px 70px rgba(0, 0, 0, .38);
  position: relative;
  overflow: hidden;
}

/* Glanzlicht, das dem Zeiger folgt */
.flow__card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  background: radial-gradient(20rem circle at var(--mx, 50%) var(--my, 0%),
    rgba(255, 255, 255, .16), transparent 60%);
}
.flow__card:hover::before { opacity: 1; }

.flow__num {
  font-size: .8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .18em;
  color: rgba(255, 255, 255, .42);
  margin-bottom: 1.1rem;
}
.flow__title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.035em;
  color: #fff;
  margin-bottom: .6rem;
  text-wrap: balance;
}
.flow__teaser {
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
  color: rgba(255, 255, 255, .55);
  margin-bottom: 1.4rem;
}
.flow__text {
  font-size: clamp(1rem, .95rem + .35vw, 1.18rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, .86);
  max-width: 40ch;
  text-wrap: pretty;
}
.flow__meta {
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .82rem;
  color: rgba(255, 255, 255, .45);
}

/* Der Auftritt. Erst wenn JavaScript die Bühne übernimmt, wird
   überhaupt etwas versteckt — sonst stünde ohne Skript alles auf
   Deckkraft null. */
.js .flow__card {
  opacity: .28;
  transform: translateY(2.5rem) scale(.97);
  transition: opacity .6s cubic-bezier(.22, .61, .36, 1),
              transform .6s cubic-bezier(.22, .61, .36, 1);
}
.js .flow__step.is-active .flow__card {
  opacity: 1;
  transform: none;
}

.glass__foot {
  margin-top: clamp(2rem, 6vh, 4rem);
  padding-bottom: clamp(6rem, 12vh, 9rem);
  text-align: center;
  font-size: .95rem;
  color: rgba(255, 255, 255, .5);
}

@media (max-width: 46rem) {
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow__rail { display: none; }
  .flow__step { min-height: 100svh; padding-bottom: 5.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .js .flow__card { opacity: 1; transform: none; }
  .glass__head { position: static; }
}


/* ══════════════════════════════════════════════════════════════════
   SYSTEM-CHROME — verwandelt sich mit der Epoche
   .chrome positioniert nur, .chrome__inner ist die sichtbare Leiste.
   Dadurch bleibt transform frei für den Wechsel-Effekt.
   ══════════════════════════════════════════════════════════════════ */

/* Kein Aus- und Einblenden beim Epochenwechsel: Die Leiste morpht
   über die Transitions auf .chrome__inner. Ein Effekt, der die
   Navigation kurz unsichtbar macht, kann im Fehlerfall unsichtbar
   hängenbleiben — das Risiko ist den Effekt nicht wert. */
.chrome {
  position: fixed;
  left: 0; right: 0;
  z-index: 90;
  display: flex;
  pointer-events: none;
}

.chrome__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  pointer-events: auto;
  transition: background .45s ease, color .45s ease, height .3s ease,
              border-radius .35s ease, box-shadow .45s ease, border-color .45s ease;
}

.chrome__nav { display: flex; align-items: center; gap: .1rem; }
.chrome__nav a { text-decoration: none; white-space: nowrap; }
.chrome__tray { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.chrome__clock { font-variant-numeric: tabular-nums; white-space: nowrap; }
.chrome__brand { display: none; align-items: center; gap: .5rem; }
.chrome__era { opacity: .7; font-variant-numeric: tabular-nums; }

.chrome__sound {
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
  padding: .25rem .35rem; line-height: 1; color: inherit;
}
.chrome__sound-icon { display: block; }
.chrome__sound-on { display: none; }
.chrome__sound[aria-pressed="true"] .chrome__sound-off { display: none; }
.chrome__sound[aria-pressed="true"] .chrome__sound-on { display: inline; }

/* — 0: kein Interface, der Rechner ist gerade erst an — */
html[data-era="0"] .chrome { opacity: 0; pointer-events: none; transform: translateY(-100%); }

/* — 1: Platinum-Menüleiste oben — */
html[data-era="1"] .chrome { top: 0; bottom: auto; }
html[data-era="1"] .chrome__inner {
  width: 100%;
  height: 28px;
  padding-inline: .7rem;
  gap: .2rem;
  background: linear-gradient(to bottom, #F2F2F4 0%, #DDDDE1 58%, #CACACF 100%);
  border-bottom: 1px solid #6E6E76;
  box-shadow: inset 0 1px 0 #fff;
  font-family: 'Charcoal', 'Geneva', Verdana, Tahoma, sans-serif;
  font-size: .78rem;
  font-weight: 700;
  color: #16161A;
}
html[data-era="1"] .chrome__brand { display: flex; margin-right: .9rem; }
html[data-era="1"] .chrome__brand-mark {
  width: 13px; height: 13px;
  border-radius: 2px;
  background: linear-gradient(to bottom,
    #61BB46 0 16.66%, #FDB827 0 33.33%, #F5821F 0 50%,
    #E03A3E 0 66.66%, #963D97 0 83.33%, #009DDC 0 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
}
html[data-era="1"] .chrome__nav a { padding: .3rem .55rem; border-radius: 3px; }
html[data-era="1"] .chrome__nav a:hover { background: #2C4C8C; color: #fff; }
html[data-era="1"] .chrome__era { display: none; }

/* — 2: Taskleiste unten mit Start-Knopf — */
html[data-era="2"] .chrome { top: auto; bottom: 0; }
html[data-era="2"] .chrome__inner {
  width: 100%;
  height: 32px;
  padding-right: .5rem;
  gap: .35rem;
  font-family: Tahoma, Verdana, sans-serif;
  font-size: .74rem;
  color: #fff;
  background: linear-gradient(to bottom,
    #4A90E8 0%, #2A6BD8 9%, #1B49B0 18%, #2154C4 90%, #1B9BE8 100%);
}
html[data-era="2"] .chrome__brand {
  display: flex;
  height: 100%;
  padding: 0 1.4rem 0 .7rem;
  font-weight: 700; font-style: italic;
  font-size: .95rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
  border-radius: 0 9px 9px 0;
  background: linear-gradient(to bottom, #67B54A 0%, #4A9B2E 42%, #2F7A1B 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}
html[data-era="2"] .chrome__brand-mark { display: none; }
html[data-era="2"] .chrome__nav { gap: .25rem; }
html[data-era="2"] .chrome__nav a {
  padding: .22rem .7rem;
  border-radius: 2px;
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
html[data-era="2"] .chrome__nav a:hover { background: rgba(255, 255, 255, .26); }
html[data-era="2"] .chrome__tray {
  height: 100%;
  padding-inline: .7rem;
  background: linear-gradient(to bottom, #1B9BE8 0%, #148ADA 40%, #1478C8 100%);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .3);
}

/* — 3: Liquid-Glass-Menüleiste oben, dazu das Dock unten —
   Wie in den Epochen davor sitzt die Systemleiste am oberen Rand.
   Das Glas lebt davon, dass der farbige Hintergrund durchscheint. */
html[data-era="3"] .chrome { top: 0; bottom: auto; }
html[data-era="3"] .chrome__inner {
  width: 100%;
  height: 40px;
  padding-inline: max(1.1rem, calc((100% - 78rem) / 2));
  gap: .3rem;
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: .84rem;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(to bottom, rgba(255,255,255,.26), rgba(255,255,255,.11));
  backdrop-filter: blur(30px) saturate(190%);
  -webkit-backdrop-filter: blur(30px) saturate(190%);
  border-bottom: 1px solid rgba(255, 255, 255, .24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    0 10px 30px rgba(12, 8, 45, .22);
}
html[data-era="3"] .chrome__brand { display: flex; margin-right: .9rem; font-weight: 600; }
html[data-era="3"] .chrome__brand-mark {
  width: 14px; height: 14px;
  border-radius: 5px;
  background: linear-gradient(150deg, #fff, rgba(255, 255, 255, .5));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 3px rgba(12, 8, 45, .3);
}
html[data-era="3"] .chrome__nav a { padding: .3rem .68rem; border-radius: 9px; transition: background .2s ease; }
html[data-era="3"] .chrome__nav a:hover { background: rgba(255, 255, 255, .22); }
html[data-era="3"] .chrome__tray { gap: .75rem; }
html[data-era="3"] .chrome__era { display: none; }


/* ── Das Dock — Beiwerk dieser Epoche, nur hier sichtbar ─────────── */

.dock {
  position: fixed;
  left: 0; right: 0;
  bottom: 1.1rem;
  z-index: 88;
  display: flex;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(150%);
  transition: opacity .4s ease, transform .45s cubic-bezier(.4, 0, .2, 1);
}
html[data-era="3"] .dock { opacity: 1; transform: none; }

.dock__inner {
  display: flex;
  align-items: center;
  gap: .45rem;
  max-width: calc(100% - 2rem);
  padding: .5rem .6rem;
  border-radius: 24px;
  pointer-events: auto;
  background: linear-gradient(150deg, rgba(255,255,255,.24), rgba(255,255,255,.10));
  backdrop-filter: blur(30px) saturate(190%);
  -webkit-backdrop-filter: blur(30px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, .3);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .6),
    0 16px 44px rgba(12, 8, 45, .38);
}

.dock__app {
  width: 46px; height: 46px;
  border-radius: 14px;
  background: linear-gradient(160deg, var(--a, #fff), var(--b, #888));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    0 4px 12px rgba(12, 8, 45, .3);
  transition: transform .22s cubic-bezier(.34, 1.4, .64, 1);
}
.dock__app:hover { transform: translateY(-11px) scale(1.16); }

.dock__sep {
  width: 1px; height: 34px;
  margin-inline: .25rem;
  background: rgba(255, 255, 255, .3);
}

@media (max-width: 40rem) {
  .dock__app { width: 38px; height: 38px; border-radius: 11px; }
  .dock__inner { gap: .3rem; padding: .4rem .45rem; }
}

/* — 4: heutige Sticky-Nav oben — */
html[data-era="4"] .chrome { top: 0; bottom: auto; }
html[data-era="4"] .chrome__inner {
  width: 100%;
  height: 60px;
  padding-inline: max(1.25rem, calc((100% - 74rem) / 2));
  gap: .35rem;
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: .875rem;
  color: #F6F6F4;
  background: rgba(10, 11, 13, .72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid #23262C;
}
html[data-era="4"] .chrome__brand { display: flex; margin-right: auto; font-weight: 600; }
html[data-era="4"] .chrome__brand-mark { width: 9px; height: 9px; border-radius: 2px; background: #2B6BFF; }
html[data-era="4"] .chrome__nav { margin-left: auto; }
html[data-era="4"] .chrome__nav a { padding: .45rem .8rem; border-radius: 8px; color: #A8AEB8; transition: color .2s ease, background .2s ease; }
html[data-era="4"] .chrome__nav a:hover { color: #F6F6F4; background: rgba(255, 255, 255, .06); }
html[data-era="4"] .chrome__tray { margin-left: .5rem; }
html[data-era="4"] .chrome__era,
html[data-era="4"] .chrome__clock { display: none; }

/* Auf schmalen Geräten ist kein Platz für die volle Navigation */
@media (max-width: 46rem) {
  .chrome__nav a[data-nav="1"] { display: none; }
  .chrome__nav a[href="#ueber-mich"] { display: none; }
  .chrome__era { display: none !important; }
  html[data-era="1"] .chrome__brand,
  html[data-era="4"] .chrome__brand { display: none; }
}
@media (max-width: 30rem) {
  .chrome__clock { display: none !important; }
  .chrome__nav a[data-nav="3"] { display: none; }
}


/* ══════════════════════════════════════════════════════════════════
   SCROLLBAR — altert mit
   ══════════════════════════════════════════════════════════════════ */

::-webkit-scrollbar { width: 15px; height: 15px; }

html[data-era="0"] ::-webkit-scrollbar-track { background: #9C9C94; }
html[data-era="0"] ::-webkit-scrollbar-thumb { background: #111; }

html[data-era="1"] ::-webkit-scrollbar-track {
  background: linear-gradient(to right, #C8C8CE, #DCDCE0);
  border-left: 1px solid #6E6E76;
}
html[data-era="1"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(to right, #FDFDFD, #D0D0D6);
  border: 1px solid #6E6E76;
  border-radius: 3px;
}

html[data-era="2"] ::-webkit-scrollbar-track { background: #EFEDE3; }
html[data-era="2"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(to right, #fff, #D6D2BD);
  border: 1px solid #7B7B6B;
  border-radius: 2px;
}

html[data-era="3"] ::-webkit-scrollbar-track { background: rgba(255, 255, 255, .06); }
html[data-era="3"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .38);
  border-radius: 999px;
  border: 4px solid transparent;
  background-clip: padding-box;
}

html[data-era="4"] ::-webkit-scrollbar-track { background: #0A0B0D; }
html[data-era="4"] ::-webkit-scrollbar-thumb {
  background: #2E333B; border-radius: 999px;
  border: 4px solid #0A0B0D; background-clip: padding-box;
}