/* =========================================================
   NAKA — Portfolio Template (Rebuild)
   Design system + components
   ========================================================= */

@import url("../fonts/fonts.css");

/* ---------- Tokens ---------- */
:root {
  /* colour */
  --ink:          #0A0A0A;   /* primary text / dark surfaces */
  --ink-2:        #141414;   /* button label on light */
  --ink-3:        #1F1F1F;   /* dark surface elevated */
  --muted:        #707070;   /* secondary text on light */
  --muted-2:      #999999;   /* secondary text on dark */
  --line:         #EBEBEB;   /* hairlines */
  --line-surface: #DFDFDF;   /* hairline auf --surface: #EBEBEB verschwindet dort */
  --line-dark:    #262626;
  --surface:      #F7F7F7;   /* light grey panel */
  --white:        #FFFFFF;
  --accent:       #E3C100;   /* yellow */
  --accent-deep:  #89590A;   /* gold text / eyebrow */

  /* radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-btn: 100px;   /* Pille — passend zu Navigation, Eyebrows und Tags */
  --r-lg: 20px;
  --r-xl: 24px;
  --r-2xl: 40px;
  --r-pill: 100px;

  /* layout */
  --container: 1120px;
  --page-x: 40px;
  --section-y: 200px;

  /* type */
  --font: "Geist", "Geist Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* elevation */
  --shadow-btn:
      rgba(0,0,0,.10) .592779px .592779px .838315px -.4px,
      rgba(0,0,0,.10) 1.61429px 1.61429px 2.28296px -.8px,
      rgba(0,0,0,.11) 3.5444px 3.5444px 5.01254px -1.2px,
      rgba(0,0,0,.12) 7.86777px 7.86777px 11.1267px -1.6px,
      rgba(0,0,0,.15) 20px 20px 28.2843px -2px;
  /* Mittig statt gerichtet, und mit kräftigem negativem Spread.
     Die Vorlage warf 40px nach rechts unten, bei nur 1px Spread. Auf einem
     Knopf ist das ein weicher Abwurf; auf der 1000px breiten Karussellkarte
     lag dadurch an der rechten und unteren Kante sofort die volle Stärke an —
     ein Sprung von 255 auf 138 in einem Pixel, also eine harte Kante statt
     eines Schattens. Jetzt liegt der Schatten unter der Karte und lugt
     seitlich nur wenige Pixel hervor, wo er ohnehin fast durchsichtig ist. */
  --shadow-card:
      rgba(0,0,0,.03) 0 1px 2px -1px,
      rgba(0,0,0,.04) 0 4px 8px -4px,
      rgba(0,0,0,.05) 0 12px 20px -10px,
      rgba(0,0,0,.07) 0 28px 44px -22px,
      rgba(0,0,0,.10) 0 56px 88px -40px;
  --shadow-tile:
      rgba(0,0,0,.18) 0 .597144px .597144px -.9375px,
      rgba(0,0,0,.17) 0 1.81088px 1.81088px -1.875px,
      rgba(0,0,0,.15) 0 4.78699px 4.78699px -2.8125px,
      rgba(0,0,0,.08) 0 16px 16px -3.75px;
  --shadow-hero:
      rgba(15,12,12,.03) .67px .67px .95px -.125px,
      rgba(15,12,12,.03) 1.59px 1.59px 2.25px -.25px,
      rgba(15,12,12,.04) 2.90px 2.90px 4.11px -.375px,
      rgba(15,12,12,.04) 4.83px 4.83px 6.83px -.5px,
      rgba(15,12,12,.05) 7.80px 7.80px 11.03px -.625px,
      rgba(15,12,12,.06) 12.77px 12.77px 18.05px -.75px,
      rgba(15,12,12,.08) 21.98px 21.98px 31.09px -.875px,
      rgba(15,12,12,.12) 40px 40px 56.57px -1px,
      rgba(0,0,0,.03) -.67px .67px .95px -.125px,
      rgba(0,0,0,.03) -1.59px 1.59px 2.25px -.25px,
      rgba(0,0,0,.04) -2.90px 2.90px 4.11px -.375px,
      rgba(0,0,0,.04) -4.83px 4.83px 6.83px -.5px,
      rgba(0,0,0,.05) -7.80px 7.80px 11.03px -.625px,
      rgba(0,0,0,.06) -12.77px 12.77px 18.05px -.75px,
      rgba(0,0,0,.08) -21.98px 21.98px 31.09px -.875px,
      rgba(0,0,0,.12) -40px 40px 56.57px -1px;

  --ease: cubic-bezier(.44,0,.56,1);
  --ease-out: cubic-bezier(.2,.8,.2,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { border-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; border-radius: 4px; }

/* ---------- Type scale ---------- */
.t-h1  { font-size: 64px; line-height: 64px; letter-spacing: -3.2px;  font-weight: 500; color: var(--ink); }
.t-h2  { font-size: 40px; line-height: 42px; letter-spacing: -1.6px;  font-weight: 500; color: var(--ink); }
.t-h3  { font-size: 28px; line-height: 33.6px; letter-spacing: -1.12px; font-weight: 500; color: var(--ink); }
.t-card{ font-size: 24px; line-height: 28.8px; letter-spacing: -.72px; font-weight: 500; color: var(--ink); }
.t-quote{font-size: 24px; line-height: 28.8px; letter-spacing: -.96px; font-weight: 400; color: var(--ink); }
.t-lg  { font-size: 18px; line-height: 23.4px; letter-spacing: -.72px; font-weight: 400; }
.t-md  { font-size: 16px; line-height: 20.8px; letter-spacing: -.64px; font-weight: 400; }
.muted { color: var(--muted); }
.muted-2 { color: var(--muted-2); }

/* Für das Auge weg, für die Vorlesefunktion da. Nicht `display: none` — das
   nähme das Element auch aus dem Baum und `aria-live` bliebe stumm. */
.u-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; white-space: nowrap; border: 0;
  clip-path: inset(50%);
}

/* ---------- Layout ---------- */
.section {
  padding: var(--section-y) var(--page-x);
  display: flex;
  justify-content: center;
  position: relative;
}
.section--grey { background: var(--surface); }
.section--dark { background: var(--ink); }
.container { width: 100%; max-width: var(--container); }

/* Section header: eyebrow + h2 (+ optional action) */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.sec-head__text { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 600px; }
.sec-head > .sec-head__text { flex: 0 1 600px; }
.sec-head--center { flex-direction: column; align-items: center; gap: 24px; max-width: 800px; margin: 0 auto; }
.sec-head--center .t-h2 { text-align: center; }
/* Umbrüche, die nur für die breite Überschriftenspalte gesetzt sind. Auf dem
   Handy bricht die so entstandene Hälfte selbst noch einmal um, und übrig
   bleibt eine Zeile aus zwei Wörtern; ohne den Umbruch fließt der Satz von
   allein besser. Die längere Hälfte misst 449px und hat ab rund 490px
   Fensterbreite Platz; 500 lässt etwas Luft für abweichende Schriftlagen. */
@media (max-width: 500px) { .br--wide { display: none; } }

.eyebrow {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 16px; border-radius: var(--r-pill);
  border: 1px solid var(--accent-deep); color: var(--accent-deep);
  font-size: 16px; line-height: 20.8px; letter-spacing: -.64px;
}
.eyebrow--yellow { border-color: var(--accent); color: var(--accent); }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--surface);
  --btn-fg: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 12px 24px;
  background: var(--btn-bg); color: var(--btn-fg);
  border-radius: var(--r-btn);
  font-size: 16px; font-weight: 500; line-height: 19.2px; letter-spacing: -.64px;
  transition: transform .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn--dark  { --btn-bg: var(--ink);   --btn-fg: var(--white); box-shadow: var(--shadow-btn); }
.btn--white { --btn-bg: var(--white); --btn-fg: var(--ink); }
.btn--elev  { box-shadow: var(--shadow-btn); }
.btn--dim   { --btn-bg: var(--ink-3); --btn-fg: var(--white); }
.btn--block { width: 100%; }
.btn .icon { width: 20px; height: 20px; flex: 0 0 auto; }

/* text-roll hover (Framer style) */
.roll { display: block; overflow: hidden; height: 19px; }
.roll > span {
  display: block; height: 19px;
  transition: transform .45s var(--ease);
  transform: translateY(0);
}
.btn:hover .roll > span,
.roll-host:hover .roll > span { transform: translateY(-19px); }
.roll > span > i { display: block; height: 19px; font-style: normal; }

/* icon-roll: two stacked icons */
.icon-roll { overflow: hidden; height: 20px; width: 20px; flex: 0 0 auto; }
.icon-roll > span { display: block; transition: transform .45s var(--ease); }
.btn:hover .icon-roll > span { transform: translateY(-20px); }

/* ---------- Nav ---------- */
/* Schwebende Insel statt vollbreiter Leiste: der Rahmen selbst fängt keine
   Klicks, nur die Insel. */
.nav {
  position: fixed; inset: 12px 0 auto 0; z-index: 50;
  display: flex; justify-content: center;
  padding: 0 var(--page-x);
  pointer-events: none;
}
/* Zwei Zustände.

   Ganz oben gibt es nichts abzugrenzen: kein Material, keine Kante, kein
   Schatten — nur Wortmarke, Links und Buttons, die auf der Seite liegen. Die
   Leiste läuft dabei über die volle Breite.

   Sobald Inhalt darunter durchläuft, materialisiert sich das Glas und die
   Insel zieht sich auf die Breite der Sektionen zusammen (--container). Damit
   der Übergang weich bleibt, ist der Ausgangszustand nicht `none`, sondern
   `blur(0px) saturate(100%)` — nur so interpoliert der Backdrop-Filter. */
.nav__inner {
  pointer-events: auto;
  position: relative; isolation: isolate;
  width: 100%; max-width: 1600px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 8px 8px 8px 22px;
  border-radius: var(--r-pill);

  background: rgba(255,255,255,0);
  -webkit-backdrop-filter: blur(0px) saturate(100%);
          backdrop-filter: blur(0px) saturate(100%);
  box-shadow: none;
  transition:
    max-width .55s var(--ease),
    background-color .45s var(--ease),
    box-shadow .45s var(--ease),
    -webkit-backdrop-filter .45s var(--ease),
    backdrop-filter .45s var(--ease);
}
/* Glanz auf der oberen Hälfte — dadurch liest sich die Fläche als Material
   und nicht als halbtransparentes Rechteck. */
.nav__inner::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 55%);
  opacity: 0; pointer-events: none;
  transition: opacity .45s var(--ease);
}

.nav.is-scrolled .nav__inner {
  max-width: var(--container);
  background: rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
          backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),      /* Lichtkante oben */
    inset 0 0 0 1px rgba(255,255,255,.5),    /* Innenrand, fängt Streiflicht */
    0 0 0 1px rgba(10,10,10,.06),            /* Haarlinie zur Abgrenzung */
    0 16px 40px -16px rgba(10,10,10,.28),    /* Auftrieb */
    0 3px 10px -4px rgba(10,10,10,.12);
}
.nav.is-scrolled .nav__inner::before { opacity: 1; }

.brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.brand__mark { display: flex; color: var(--ink); flex: 0 0 auto; }
.brand__mark svg { width: 30px; height: auto; display: block; }
.brand__name { font-size: 18px; line-height: 23.4px; letter-spacing: -.72px; color: var(--ink); }
.nav__actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* ---- Inline-Links ---- */
.navlinks { display: flex; align-items: center; gap: 2px; }
.navlink {
  padding: 10px 14px; border-radius: var(--r-pill);
  /* Auf durchscheinendem Grund braucht Text mehr Kontrast und etwas mehr
     Laufweite als auf einer deckenden Fläche. */
  font-size: 16px; font-weight: 500; line-height: 20.8px; letter-spacing: -.32px;
  color: rgba(10,10,10,.58); white-space: nowrap;
  transition: color .25s var(--ease), background-color .25s var(--ease), transform .1s ease-out;
}
.navlink:hover { color: var(--ink); background: rgba(10,10,10,.035); }
.navlink:active { transform: scale(.96); }
/* „Hier stehst du" trägt dieselbe Sprache wie der Sprachumschalter zwei
   Elemente weiter: gefüllte Pille, nicht Farbe. Vorher stand hier
   --accent-deep — die einzige Farbe in einer sonst durchgehend grauschwarzen
   Leiste, und dadurch eher ein Fremdkörper als eine Markierung. Die Füllung
   ist kräftiger als die beim Überfahren, damit beides unterscheidbar bleibt. */
.navlink.is-active { color: var(--ink); background: rgba(10,10,10,.07); }
.navlink.is-active:hover { background: rgba(10,10,10,.09); }

/* ---- DE/EN ---- */
.langtoggle {
  display: flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: var(--r-pill); background: rgba(10,10,10,.06);
}
.langtoggle__opt {
  display: flex; align-items: center; justify-content: center;
  min-width: 44px; padding: 8px 12px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 500; line-height: 18.2px; letter-spacing: -.14px;
  color: var(--muted);
  transition: color .25s var(--ease), background-color .25s var(--ease), transform .1s ease-out;
}
.langtoggle__opt.is-on {
  background: var(--white); color: var(--ink);
  box-shadow: 0 1px 2px rgba(10,10,10,.12), 0 0 0 1px rgba(10,10,10,.04);
}
a.langtoggle__opt:hover { color: var(--ink); background: rgba(255,255,255,.6); }
a.langtoggle__opt:active { transform: scale(.94); }

.menu { position: relative; }
/* Neben dem dunklen Kontakt-Button wäre eine zweite dunkle Pille zu schwer —
   deshalb ein heller Icon-Knopf ohne Beschriftung. */
.menu__btn {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0;
  background: rgba(10,10,10,.06); border-radius: var(--r-pill); color: var(--ink);
  transition: background-color .25s var(--ease), transform .1s ease-out;
}
.menu__btn:hover { background: rgba(10,10,10,.10); }
.menu__btn:active { transform: scale(.94); }
.menu__label { display: none; }
.menu__icon {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.menu__icon svg { width: 20px; height: 20px; transition: transform .4s var(--ease); }
.menu.is-open .menu__icon svg { transform: rotate(135deg); }

.menu__panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 250px; padding: 8px;
  background: var(--white); border-radius: var(--r-lg);
  box-shadow: var(--shadow-tile);
  display: flex; flex-direction: column; gap: 4px;
  transform-origin: top right;
  opacity: 0; transform: translateY(-8px) scale(.96); pointer-events: none;
  transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.menu.is-open .menu__panel { opacity: 1; transform: none; pointer-events: auto; }
.menu__link {
  display: flex; align-items: center; gap: 16px; height: 48px;
  padding: 6px; border-radius: var(--r-md);
  font-size: 16px; line-height: 20.8px; letter-spacing: -.64px; color: var(--muted);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.menu__link:hover { background: var(--surface); color: var(--ink); }
/* Dieselbe Markierung wie in der Leiste: gefüllte Fläche, kräftiger als die
   beim Überfahren (`--surface` entspricht rund 3 %). */
.menu__link.is-active { color: var(--ink); background: rgba(10,10,10,.06); }
.menu__link .tile {
  width: 36px; height: 36px; border-radius: var(--r-sm);
  background: var(--surface);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.menu__link .tile svg { width: 20px; height: 20px; }

/* ---------- Hero ----------
   Zwei Zustände statt eines fortlaufenden Morphs: „initial" beim Laden,
   „revealed" ab dem ersten Scrollen. Beide Fassungen liegen übereinander im
   Dokument und werden überblendet — deshalb entsteht beim Wechsel kein
   Layout-Shift. Umgeschaltet wird per Klasse aus main.js; animiert wird nur
   opacity und transform, also auf der GPU.

   Die Sticky-Strecke: der Track ist höher als der Bildschirm, die Hero selbst
   klebt darin oben. Der Nutzer scrollt echte Pixel — kein abgefangenes
   Scroll-Event, dadurch bleibt die Seite flüssig. */
.hero-track {
  position: relative;
  height: 190vh;
  background: #FFFFFF;
}
.hero-track__sentinel {
  position: absolute; top: 80px; left: 0; width: 1px; height: 1px;
}
.hero {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 0 var(--page-x);
  /* Weiß oben, Grau unten. Der Verlauf wird früher grau als zuvor: der
     Schriftzug beginnt bei 21 % und braucht dort schon einen Ton, auf dem
     eine weiße Kontur überhaupt stehen kann. */
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFB 9%, #EBEBEF 24%, #DADAE1 48%, #C9C9D1 74%, #BBBBC3 100%);
  --stat-green: #2FB457;
}

/* ---- Hintergrund-Schriftzug ---- */
.hero__wordmark {
  position: absolute; left: 0; right: 0; top: 21%;
  display: grid; place-items: center; pointer-events: none; z-index: 0;
}
.hero__word {
  grid-area: 1 / 1;
  /* „Now" (SIL OFL) liegt unter assets/fonts/ und ist in fonts.css
     eingebunden. Geist bleibt als Rückfall stehen. */
  font-family: "Now", var(--font);
  font-size: clamp(96px, 19vw, 340px);
  line-height: .88; font-weight: 800; letter-spacing: .085em; white-space: nowrap;
  /* Outline statt Fläche. Die Kontur ist bewusst kräftig — im Entwurf trägt
     sie den Hintergrund, sie soll nicht darin verschwinden. */
  color: transparent;
  /* 60 % transparenter als zuvor — der Schriftzug tritt zurück und
     konkurriert nicht mehr mit dem Porträt. Die Schatten sind im selben
     Verhältnis mitgenommen, sonst überstrahlt der Schatten die Linie. */
  -webkit-text-stroke: 4px rgba(255,255,255,.4);
  /* Zwei Schatten: der dunkle setzt die Kontur gegen den hellen Verlauf ab,
     der helle gibt ihr nach oben eine Lichtkante. Ohne den dunklen
     verschwindet die weiße Linie im oberen, fast weißen Drittel. */
  filter:
    drop-shadow(0 2px 2px rgba(88,90,104,.12))
    drop-shadow(0 -1px 0 rgba(255,255,255,.22));
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.hero__word--revealed { opacity: 0; transform: translateY(14px); }
.hero.is-revealed .hero__word--initial { opacity: 0; transform: translateY(-14px); }
.hero.is-revealed .hero__word--revealed { opacity: 1; transform: none; }

/* ---- Freisteller ---- */
.hero__cutout {
  position: absolute; bottom: 0; left: 50%;
  /* Gespiegelt: im Entwurf geht der Blick nach links, in die Seite hinein. */
  transform: translateX(-50%) scaleX(-1);
  /* Kleiner, damit der Kopf unter der Navigationsleiste bleibt. */
  height: min(86%, 980px); width: auto; max-width: none; z-index: 1;
  /* Deckend. Die Milderung des Schwarz übernimmt der Filter `#hero-soften`
     (Definition im Hero-Markup): Er entsättigt und hebt die Tiefen an, statt
     das Bild durchsichtig zu machen. Mit `opacity: .8` schlug der
     Hintergrund-Schriftzug durch das Gesicht. */
  filter: url(#hero-soften) grayscale(1);
}
/* Trägt nur die Filterdefinition und darf nichts einnehmen. */
.u-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- Textblock über dem Foto ---- */
.hero__inner {
  position: relative; z-index: 3;
  width: 100%; max-width: var(--container);
  display: flex; flex-direction: column; align-items: center;
  padding-bottom: clamp(40px, 7vh, 90px);
  text-align: center; color: var(--white);
}
/* Beide Headlines in derselben Rasterzelle — die höhere bestimmt die Höhe,
   dadurch springt beim Wechsel nichts. */
.hero__heads { display: grid; place-items: center; }
.hero__head {
  grid-area: 1 / 1;
  font-size: clamp(28px, 3.5vw, 54px);
  line-height: 1.1; letter-spacing: -.03em; font-weight: 700; color: var(--white);
  text-shadow: 0 2px 24px rgba(10,10,20,.28);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.hero__head--revealed { opacity: 0; transform: translateY(16px); }
.hero.is-revealed .hero__head--initial { opacity: 0; transform: translateY(-16px); }
.hero.is-revealed .hero__head--revealed { opacity: 1; transform: none; }

.hero__sub {
  margin-top: 22px;
  font-size: clamp(15px, 1.2vw, 18px); letter-spacing: -.3px; color: rgba(255,255,255,.92);
  text-shadow: 0 2px 18px rgba(10,10,20,.3);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.hero.is-revealed .hero__sub { opacity: 0; transform: translateY(-10px); }

/* Im Initialzustand nicht sichtbar und nicht erreichbar — sonst landet man
   per Tab auf unsichtbaren Buttons. */
.hero__cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px;
  margin-top: 34px;
  opacity: 0; transform: translateY(18px); pointer-events: none;
  transition: opacity .5s var(--ease) .12s, transform .5s var(--ease) .12s;
}
.hero.is-revealed .hero__cta { opacity: 1; transform: none; pointer-events: auto; }

/* ---- Kennzahlkacheln, links und rechts neben dem Foto ---- */
.statcards { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.statcard {
  position: absolute; display: flex; align-items: center; justify-content: space-between;
  gap: 14px; width: 268px; padding: 16px 18px; border-radius: 18px;
  background: var(--white);
  box-shadow: 0 18px 40px -18px rgba(16,16,45,.30), 0 2px 6px -2px rgba(16,16,45,.10);
  /* Fliegen gestaffelt ein: --in-delay kommt pro Kachel aus dem Markup. */
  opacity: 0; transform: translateY(26px) scale(.96); pointer-events: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.hero.is-revealed .statcard {
  opacity: 1; transform: none; pointer-events: auto;
  transition-delay: var(--in-delay, 0ms);
}
.statcard__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.statcard__value { font-size: 17px; line-height: 22px; letter-spacing: -.3px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.statcard__label { font-size: 16px; line-height: 21px; letter-spacing: -.3px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.statcard__sub { font-size: 15px; line-height: 20px; letter-spacing: -.28px; color: var(--muted); white-space: nowrap; }
.statcard__icon { display: flex; flex: none; color: var(--stat-green); }
.statcard__icon svg { width: 34px; height: 34px; flex: none; }
.statcard__logos { display: flex; gap: 4px; flex: none; }
.statcard__logos img { width: 34px; height: 34px; object-fit: contain; }

/* Zwei links, zwei rechts — das Foto bleibt in der Mitte frei. Von oben
   gemessen, damit sie unterhalb des Schriftzugs bleiben und ihn nicht
   verdecken. */
.statcard--4 { left: max(5vw, 28px);  top: 57%; }
.statcard--1 { left: max(5vw, 28px);  top: 72%; }
.statcard--2 { right: max(5vw, 28px); top: 57%; }
.statcard--3 { right: max(5vw, 28px); top: 72%; }

/* ---- Hero-Knöpfe ----
   Der Kontakt-Knopf trägt auf der ganzen Seite den stärksten Kontrast zu
   seinem eigenen Grund: schwarz auf hellem, weiß auf dunklem. Navigation,
   „Über mich" und die Kontakt-Sektion folgen dieser Regel schon; hier stand
   als einzige Ausnahme ein blauer Knopf — die einzige Farbe im sonst
   einfarbigen Hero und ohne Bezug zum goldenen Akzent der Seite.

   Der Grund wechselt hier allerdings mit der Fensterbreite: ab 1024px liegen
   die Knöpfe auf dem dunklen Pullover, darunter auf dem hellen Verlauf. Sie
   nehmen deshalb je Breite den Satz, den die passende Sektion ohnehin führt —
   auf dunklem Grund den aus „Kontakt", auf hellem den aus „Über mich". */
.hero__cta .btn--lead  { --btn-bg: var(--white); --btn-fg: var(--ink);
  box-shadow: var(--shadow-btn); }
.hero__cta .btn--lead:hover { --btn-bg: #F0F0F0; }
/* Der stille Knopf liegt auf dem dunklen Pullover — ohne feinen Lichtrand
   verschwände seine Kante darin. */
.hero__cta .btn--quiet { --btn-bg: var(--ink-3); --btn-fg: var(--white);
  box-shadow: 0 0 0 1px rgba(255,255,255,.22), var(--shadow-btn); }
.hero__cta .btn--quiet:hover { --btn-bg: #2A2A2A; }

/* ---------- Marquee ---------- */
.marquee { width: 100%; overflow: hidden; display: flex; align-items: center;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12.5%, #000 87.5%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 12.5%, #000 87.5%, transparent 100%); }
.marquee__track { display: flex; align-items: center; gap: var(--mq-gap, 12px); width: max-content;
  animation: mq-left var(--mq-dur, 40s) linear infinite; }
.marquee--rtl .marquee__track { animation-name: mq-right; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee li { flex: 0 0 auto; }
.marquee img { border-radius: var(--r-md); object-fit: cover; }
@keyframes mq-left  { from { transform: translateX(0); }  to { transform: translateX(calc(-50% - (var(--mq-gap, 12px) / 2))); } }
@keyframes mq-right { from { transform: translateX(calc(-50% - (var(--mq-gap, 12px) / 2))); } to { transform: translateX(0); } }


/* ---------- Services (dark) ---------- */
.split { display: flex; align-items: flex-start; gap: 40px; }
.split__aside { flex: 0 0 540px; max-width: 600px; display: flex; flex-direction: column;
  align-items: flex-start; gap: 32px; }
/* Original pinnt die linke Spalte nur bei "What I Do" und "How it Works" (top: 120px) */
.split--sticky .split__aside { position: sticky; top: 120px; align-self: flex-start; }
.split__main  { flex: 1 1 auto; min-width: 0; }
.section--dark .t-h2, .section--dark .t-card { color: var(--white); }
.section--dark .muted { color: var(--muted-2); }

.services { display: flex; flex-direction: column; gap: 8px; }
.service {
  display: flex; flex-direction: column; align-items: flex-start; gap: 32px;
  padding: 24px; background: var(--ink);
  border: 1px solid var(--line-dark); border-radius: var(--r-xl);
}
.service__badge {
  width: 48px; height: 48px; border-radius: 10px; box-shadow: var(--shadow-tile);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.service__badge svg { width: 32px; height: 32px; }
.service__body { display: flex; flex-direction: column; gap: 20px; max-width: 600px; }
.service__copy { display: flex; flex-direction: column; gap: 12px; }
.tags { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.tag {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 5px 10px; border-radius: var(--r-pill); border: 1px solid var(--line-dark);
  font-size: 14px; line-height: 18.2px; letter-spacing: -.56px; color: var(--muted-2);
}
/* =========================================================================
   Spotlight-Kacheln
   Nachbau der Kokonut-UI-Komponente „spotlight-cards" (MIT, dorianbaffier) in
   der Sprache dieses Projekts. Das Original ist React mit Motion; übernommen
   sind alle Werte und alle fünf Lagen:
     ::before        ruhiger Grundton in der Leitfarbe   (Farbe bei  8%)
     ::after         Lichtschein beim Überfahren         (Farbe bei 18%)
     .spot__shimmer  Lichtband, das quer durchzieht      (Weiß bei 4.5%)
     Inhalt
     .spot__line     Akzentlinie, zieht unten von links auf
   Neigung und Schein laufen als echte Federn in main.js und schreiben --rx,
   --ry und --glow; deshalb liegt hier bewusst keine Transition auf transform.
   Das Zurücktreten der Nachbarn nutzt die eigenständige scale-Eigenschaft, die
   sich unabhängig von transform überblenden lässt.
   ========================================================================= */
.spot {
  position: relative; isolation: isolate; overflow: hidden;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  scale: 1;
  /* 180 ms ease-out — die Werte des Originals für das Abblenden. */
  transition: opacity .18s cubic-bezier(0, 0, .58, 1),
              scale .18s cubic-bezier(0, 0, .58, 1),
              border-color .3s var(--ease);
}
.spot:hover { will-change: transform; }
.spot::before, .spot::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
}
.spot::before {
  z-index: -3;
  background: radial-gradient(ellipse at 20% 20%,
              rgba(var(--spot, 255, 255, 255), .08), transparent 65%);
}
.spot::after {
  z-index: -2;
  background: radial-gradient(ellipse at 20% 20%,
              rgba(var(--spot, 255, 255, 255), .18), transparent 65%);
  opacity: var(--glow, 0);
}
/* Lichtband: 55% breit, um 12° geschert, wandert von -100% auf 280%. */
.spot__shimmer {
  position: absolute; top: 0; bottom: 0; left: 0; width: 55%; z-index: -1;
  pointer-events: none;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, .045), transparent);
  transform: translateX(-100%) skewX(-12deg);
  transition: transform .7s cubic-bezier(0, 0, .2, 1);
}
.spot:hover .spot__shimmer, .spot:focus-within .spot__shimmer {
  transform: translateX(280%) skewX(-12deg);
}
/* Akzentlinie: 2px, wächst von 0 auf volle Breite. */
.spot__line {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  border-radius: var(--r-pill); pointer-events: none;
  background: linear-gradient(to right, rgba(var(--spot, 255, 255, 255), .5), transparent);
  transition: width .5s cubic-bezier(.4, 0, .2, 1);
}
.spot:hover .spot__line, .spot:focus-within .spot__line { width: 100%; }
/* Die übrigen Kacheln der Gruppe treten zurück. */
[data-spotlight].is-hovering .spot:not(:hover):not(:focus-within) {
  opacity: .5; scale: .96;
}

/* Rahmen hellt beim Überfahren auf — im Original white/6 → white/14. */
.service.spot:hover, .service.spot:focus-within { border-color: rgba(255, 255, 255, .14); }
/* Auf hellem Grund trägt Weiß den Schein: Prozess- und Werkzeug-Karten haben
   keine Leitfarbe, ein dunkler Schein läse sich als Schatten. Der Grundton
   entfällt dort — Weiß auf #F7F7F7 wäre ohnehin nicht zu sehen. */
.step.spot, .skill-card.spot { --spot: 255, 255, 255; }
.step.spot::before, .skill-card.spot::before { background: none; }
.step.spot .spot__line,
.skill-card.spot .spot__line { background: linear-gradient(to right, var(--muted), transparent); }
.step.spot:hover, .step.spot:focus-within,
.skill-card.spot:hover, .skill-card.spot:focus-within { border-color: #D0D0D6; }

/* Ohne Zeigegerät gibt es kein Verlassen — die zuletzt berührte Kachel bliebe
   geneigt und beleuchtet stehen. Dort bleibt alles ruhig. */
@media (hover: none) {
  .spot { transform: none; }
  .spot::after, .spot__shimmer, .spot__line { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .spot { transform: none; transition: opacity .18s linear, border-color .3s linear; }
  .spot__shimmer { display: none; }
  .spot__line { transition: none; }
  [data-spotlight].is-hovering .spot:not(:hover):not(:focus-within) { scale: 1; }
}

/* ---------- Process ---------- */
.process { display: flex; flex-direction: column; gap: 16px; }
.step {
  display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
  padding: 24px; background: var(--surface); overflow: hidden;
  border: 1px solid var(--line-surface); border-radius: var(--r-xl);
}
.step__icon {
  width: 48px; height: 48px; border-radius: var(--r-sm); background: var(--white);
  box-shadow: var(--shadow-tile); display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.step__icon svg { width: 32px; height: 32px; color: var(--muted); }
.step__body { display: flex; flex-direction: column; gap: 10px; }
.step__body p.t-lg { max-width: 450px; }

.contra { display: flex; flex-direction: column; gap: 20px; padding-top: 16px; max-width: 540px; }
.contra__text { font-size: 24px; line-height: 28.8px; letter-spacing: -.96px; color: var(--ink); }
.avatars { display: flex; align-items: center; gap: 8px; }
.avatars__stack { display: flex; }
.avatars__stack img {
  width: 40px; height: 40px; border-radius: var(--r-sm); object-fit: cover;
  border: 2px solid var(--white); margin-left: -10px; box-shadow: var(--shadow-tile);
}
.avatars__stack img:first-child { margin-left: 0; }
.avatars__count { font-size: 14px; line-height: 18.2px; letter-spacing: -.56px; color: var(--ink); }

/* ---------- Testimonials ---------- */
.testi-wrap { width: 100%; overflow: hidden; }
.testi-cols { display: flex; align-items: center; justify-content: center; gap: 12px; height: 1419px; }
.testi-col { flex: 1 1 0; display: flex; flex-direction: column; gap: 12px; will-change: transform; }
.testi {
  display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between;
  padding: 24px; background: var(--white); border-radius: var(--r-xl); gap: 24px;
  aspect-ratio: 365 / 450;
}
.testi__ava { width: 48px; height: 48px; border-radius: var(--r-sm); box-shadow: var(--shadow-tile); overflow: hidden; flex: 0 0 auto; }
.testi__ava img { width: 100%; height: 100%; object-fit: cover; }
.testi__body { width: 100%; display: flex; flex-direction: column; gap: 20px; }
.testi__who { display: flex; align-items: center; gap: 8px; font-size: 16px; line-height: 20.8px; letter-spacing: -.64px; }
.testi__who i { width: 4px; height: 4px; border-radius: 50%; background: var(--muted); display: block; flex: 0 0 auto; }
.testi--feature { background: var(--ink); padding: 0; overflow: hidden; align-items: stretch; gap: 0; }
.testi--feature img.cover { width: 100%; aspect-ratio: 349 / 231; object-fit: cover; }
.testi--feature .testi__body { padding: 24px; }
.testi--feature .t-quote { color: var(--white); }
.testi--feature .testi__who span:first-child { color: var(--white); }
.testi--feature .testi__who span:last-child { color: var(--muted-2); }

/* ---------- Blog cards ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: 100%; }
.post { display: flex; flex-direction: column; gap: 8px; }
.post__media { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 360 / 220; }
.post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.post:hover .post__media img { transform: scale(1.05); }
.post__body { display: flex; flex-direction: column; gap: 16px; padding: 20px; background: var(--surface); border-radius: var(--r-lg); }
.post__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 5px 10px; border-radius: var(--r-pill); background: var(--white);
  font-size: 14px; line-height: 18.2px; letter-spacing: -.56px; color: var(--ink);
}
.post__date { font-size: 14px; line-height: 18.2px; letter-spacing: -.56px; color: var(--muted); }

/* ---------- Accordion (FAQ / work) ---------- */
.acc { display: flex; flex-direction: column; gap: 12px; }
.acc__item { background: var(--white); border-radius: var(--r-lg); overflow: hidden; padding: 24px; }
.section:not(.section--grey) .acc__item { background: var(--surface); }
.acc__head {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
}
.acc__head > span { flex: 1 1 auto; }
.acc__icon { width: 24px; height: 24px; flex: 0 0 auto; color: var(--muted-2);
  transform: rotate(-45deg); transition: transform .4s var(--ease); }
.acc__item.is-open .acc__icon { transform: rotate(0deg); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__panel p { padding: 8px 36px 0 0; }

/* ---------- CTA + Footer ---------- */
.footer { background: var(--ink); color: var(--white); padding: 120px var(--page-x);
  display: flex; justify-content: center; }
.footer__inner { width: 100%; max-width: var(--container); display: flex; flex-direction: column; gap: 96px; }
.footer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; }
.footer__brand { display: flex; flex-direction: column; gap: 32px; max-width: 480px; }
.footer__id { display: flex; flex-direction: column; gap: 20px; }
.footer__copy { display: flex; flex-direction: column; gap: 10px; }
.footer__copy h3 { color: var(--white); }
.footer__copy p { color: var(--muted-2); }
.footer__cta { display: flex; align-items: center; gap: 12px; }
.footer__nav { display: flex; align-items: flex-start; gap: 60px; }
.footer__col { display: flex; flex-direction: column; gap: 16px; }
.footer__col a { font-size: 16px; line-height: 20.8px; letter-spacing: -.64px; color: var(--white);
  transition: color .25s var(--ease); }
.footer__col a:hover { color: var(--muted-2); }
/* Seit die Template-Nennung raus ist, steht hier nur noch die Copyright-Zeile. */
.footer__bar { border-top: 1px solid var(--line-dark); padding: 24px 0 18px;
  font-size: 14px; line-height: 18.2px; letter-spacing: -.56px; color: var(--muted); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  padding: 160px var(--page-x) 80px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.page-hero h1 { text-align: center; max-width: 800px; }
.page-hero p { text-align: center; max-width: 560px; }

/* „Über mich" ist der kürzeste Block der Seite: links nur die Überschrift,
   rechts drei Absätze und zwei Knöpfe. Mit dem vollen Sektionsrhythmus stünde
   darunter eine halbe Bildschirmhöhe Leere — der Block bekommt deshalb ein
   eigenes, engeres Maß, das mit dem Token mitwächst. Nach unten braucht er
   echtes Weiß: dort beginnt die schwarze Fokus-Sektion, deren eigene Polsterung
   schon dunkel ist und den Abstand daher nicht mittragen kann. */
#ueber-mich { padding-block: calc(var(--section-y) * .8); }

.about-intro__paras { display: flex; flex-direction: column; gap: 16px; }
/* In der Onepager-Sektion steht der Fließtext in der rechten Spalte des
   .split — Abstand zu den Knöpfen darunter. */
.split__main > .about-intro__paras + .about-intro__cta { margin-top: 32px; }
.about-intro__cta { display: flex; align-items: center; gap: 12px; }

/* ---------- Reste des Templates ---------- */
.dmedia { width: 100%; height: calc(100vh - 84px); border-radius: var(--r-2xl);
  overflow: hidden; background: var(--ink); }
.dmedia img { width: 100%; height: 100%; object-fit: cover; }

.dpaper { padding: 60px 40px; background: var(--surface); border-radius: var(--r-2xl);
  display: flex; justify-content: center; }
.dpaper__inner { width: 100%; max-width: 600px; display: flex; flex-direction: column; gap: 40px; }
.dpaper__head { display: flex; flex-direction: column; gap: 24px; }
.article__meta { display: flex; align-items: center; gap: 16px; }
.article__meta .chip { background: var(--white); }
.article__date { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 18.2px;
  letter-spacing: -.56px; color: var(--ink-3); }
.article__date svg { width: 16px; height: 16px; }

.prose > * + * { margin-top: 28px; }
.prose h3 { font-size: 28px; line-height: 39.2px; letter-spacing: -1.12px; font-weight: 500; color: var(--ink); }
.prose > h3 + p { margin-top: 16px; }
.prose > p + h3 { margin-top: 40px; }
.prose p { font-size: 18px; line-height: 23.4px; letter-spacing: -.72px; color: var(--muted); }
.prose em { font-style: italic; }

/* Emoji in einer Überschrift. Die enge Laufweite der Headline (−1,4px) zöge es
   an das „t" heran, deshalb hier zurück auf null und ein eigener Abstand.
   Für die Vorlesefunktion ist es ausgeblendet — „Hi" sagt bereits dasselbe. */
.wave {
  /* `inline`, nicht `inline-block`: Letzteres eröffnet eine Umbruchstelle, und
     auf schmalen Fenstern stand das Zeichen dann allein auf einer Zeile. */
  display: inline; margin-right: .18em;
  letter-spacing: normal; font-style: normal;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.blog-grid--tight { gap: 12px; }

/* ---------- Appear animation ---------- */
[data-appear] { opacity: 0; transform: translateY(20px); }
[data-appear].is-in { opacity: 1; transform: none;
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }

/* 3D-Tilt-Variante (Hero-Device, "Now Working On"-Panel) */
[data-appear="tilt"] { transform: perspective(900px) translateY(20px) rotateX(10deg); }
[data-appear="tilt"].is-in { transform: perspective(900px) translateY(0) rotateX(0deg); }
[data-appear="tilt-center"] { transform: translate(-50%, -50%) perspective(900px) translateY(20px) rotateX(10deg); }
[data-appear="tilt-center"].is-in { transform: translate(-50%, -50%) perspective(900px) translateY(0) rotateX(0deg); }

/* Testimonial-Spalten: einmaliges Versetzen der Außenspalten um -100px beim Einblenden */
[data-rise] { transform: translateY(0); transition: transform 1.2s var(--ease-out); }
[data-rise].is-in { transform: translateY(-100px); }
@media (prefers-reduced-motion: reduce) {
  [data-appear], [data-appear].is-in,
  [data-rise], [data-rise].is-in { opacity: 1; transform: none; transition: none; }
  .marquee__track { animation: none; }
  html { scroll-behavior: auto; }
}

/* =========================================================
   Tablet   810 – 1199
   ========================================================= */
@media (max-width: 1199px) {
  .t-h1 { font-size: 56px; line-height: 56px; letter-spacing: -2.8px; }
  .t-h2 { font-size: 40px; line-height: 48px; letter-spacing: -2px; }

  .split--sticky .split__aside { position: static; }


  .split { flex-direction: column; }
  .split__aside { flex: 0 0 auto; width: 100%; max-width: none; }

  .dmedia { height: auto; }
  .dmedia img { aspect-ratio: 16 / 10; }

  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .testi-cols { height: 1100px; }
}

/* =========================================================
   Mobile   ≤ 809
   ========================================================= */
@media (max-width: 809px) {
  :root { --page-x: 20px; --section-y: 100px; }
  .t-h1 { font-size: 40px; line-height: 40px; letter-spacing: -2px; }
  .t-h2 { font-size: 32px; line-height: 33.6px; letter-spacing: -1.28px; }
  .t-h3 { font-size: 24px; line-height: 28.8px; letter-spacing: -.96px; }

  .nav { inset: 8px 0 auto 0; }
  .menu__panel { width: min(280px, calc(100vw - 40px)); }


  .sec-head { flex-direction: column; align-items: flex-start; gap: 32px; }
  /* .sec-head wird hier zur Spalte — die 600px flex-basis wäre sonst eine Höhe */
  .sec-head > .sec-head__text { flex: 0 1 auto; }

  .blog-grid { grid-template-columns: 1fr; }

  .testi-wrap { overflow: visible; }
  .testi-cols { display: flex; flex-direction: column; height: auto; gap: 12px; }
  .testi-col { transform: none !important; transition: none; }
  .testi { aspect-ratio: auto; min-height: 240px; }
  .testi--feature { min-height: 0; }


  .acc__panel p { padding: 0 24px 24px; }

  .footer { padding: 80px var(--page-x); }
  .footer__inner { gap: 60px; }
  .footer__top { flex-direction: column; gap: 48px; }
  .footer__nav { flex-wrap: wrap; gap: 32px 40px; }
  .page-hero { padding: 120px var(--page-x) 60px; }
  .dpaper { padding: 32px 20px; }

  .article__body { padding: 24px; }
  .prose h3 { font-size: 22px; line-height: 26.4px; letter-spacing: -.88px; }
  .more-head { font-size: 32px; line-height: 33.6px; letter-spacing: -1.28px; }
}

/* =========================================================================
   Ergänzungen für gabrielshabo.de
   Neue Bausteine, die das Original-Template nicht hatte: Sprachumschalter,
   Enterprise-/Markenwand (ersetzt die Testimonials), Skills-Raster,
   Kennzahlen und Rollenliste auf den Projektseiten, Rechtstexte.
   ========================================================================= */

/* Footer: Spaltenüberschriften */
.footer__col-title {
  font-size: 14px; line-height: 18.2px; letter-spacing: -.28px;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: 4px;
}

/* Skills */
.skills-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.skill-card {
  display: flex; flex-direction: column; gap: 20px;
  padding: 28px; background: var(--surface); border-radius: var(--r-xl);
  /* Haarlinie wie bei den Prozess-Kacheln — ohne sie hätte das Aufhellen
     beim Überfahren keine Kante, an der es sichtbar würde. */
  border: 1px solid var(--line-surface);
}
/* Der weiße Schein des Spotlights ist auf #F7F7F7 kaum zu sehen. Deshalb hebt
   sich die Karte hier zusätzlich vom Grund ab: Fläche auf Weiß, dazu ein
   Schatten. Das ist der Teil, den man auch ohne Neigung wahrnimmt. */
.skill-card.spot {
  transition: opacity .18s cubic-bezier(0, 0, .58, 1),
              scale .18s cubic-bezier(0, 0, .58, 1),
              border-color .3s var(--ease),
              background-color .3s var(--ease),
              box-shadow .3s var(--ease);
}
/* Nur mit Zeigegerät: Ohne Verlassen bliebe die zuletzt berührte Karte weiß
   und erhöht stehen — dieselbe Überlegung wie beim Spotlight weiter oben,
   hier aber an einer Änderung, die man nicht übersehen kann. */
@media (hover: hover) {
  .skill-card.spot:hover { background: var(--white); box-shadow: var(--shadow-tile); }
  .skill-card.spot:hover .tag--light { color: var(--ink); border-color: var(--line-surface); }
}
.skill-card.spot:focus-within {
  background: var(--white); box-shadow: var(--shadow-tile);
}
/* Die Plaketten ziehen nach, gestaffelt in der Reihenfolge, in der das
   Lichtband über sie hinwegzieht. Sie bleiben dabei liegen: Sie sind keine
   Schaltflächen, und ein Anheben verspräche einen Klick, den es nicht gibt. */
.skill-card .tag--light {
  transition: color .3s var(--ease), border-color .3s var(--ease);
  transition-delay: calc(var(--i, 0) * 25ms);
}
.skill-card.spot:focus-within .tag--light {
  color: var(--ink); border-color: var(--line-surface);
}
.tag--light { border-color: var(--line); color: var(--muted); background: var(--white); }

/* ---------- Verfügbarkeits-Plakette ---------- */
/* Schwebt unten links, blendet sich beim Scrollen ein und wechselt die
   Schriftfarbe je nach Helligkeit des Abschnitts dahinter (`main.js`).
   Der Hintergrund ist als Glas gebaut: Unschärfe plus Sättigungsanhebung —
   das ist die „Linsenwirkung", die Apples Liquid Glass ausmacht — dazu eine
   helle Kante oben als Reflex und ein weicher Schlagschatten als Abstand. */
.avail {
  position: fixed; left: var(--page-x); bottom: 28px; z-index: 40;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 20px 12px 16px;
  border-radius: var(--r-pill);
  isolation: isolate; text-decoration: none;
  color: var(--ink);
  /* Ausgangszustand: unsichtbar, leicht tiefer und kleiner. */
  opacity: 0; transform: translateY(18px) scale(.96);
  pointer-events: none;
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out),
              color .45s var(--ease);
}
.avail.is-in { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.avail.is-in:hover { transform: translateY(-3px) scale(1.02); }
.avail.is-in:active { transform: translateY(-1px) scale(.99); }
.avail:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; }

/* Die Glasscheibe liegt als eigene Ebene darunter, damit Unschärfe und
   Reflexe die Schrift nicht mitnehmen. */
.avail__glass {
  position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
          backdrop-filter: blur(22px) saturate(180%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .45),
    inset 0 1px 1px rgba(255, 255, 255, .85),
    inset 0 -1px 1px rgba(255, 255, 255, .25),
    0 12px 32px rgba(20, 20, 30, .14),
    0 2px 8px rgba(20, 20, 30, .07);
  transition: background .45s var(--ease), box-shadow .45s var(--ease);
}
/* Der Glanz: hell in der oberen linken Ecke, ein zweiter Schimmer unten
   rechts. Ohne ihn wirkt die Fläche wie Milchglas statt wie Glas. */
.avail__glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, .28) 100%);
  pointer-events: none;
  transition: opacity .45s var(--ease);
}
.avail:hover .avail__glass { background: rgba(255, 255, 255, .68); }

/* Auf dunklem Grund kehrt sich das Glas um: kaum Weiß in der Füllung, dafür
   eine hellere Kante — sonst verschwindet die Scheibe im Schwarz. */
.avail.is-dark { color: var(--white); }
.avail.is-dark .avail__glass {
  background: rgba(255, 255, 255, .10);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .16),
    inset 0 1px 1px rgba(255, 255, 255, .30),
    0 14px 36px rgba(0, 0, 0, .45),
    0 2px 8px rgba(0, 0, 0, .25);
}
.avail.is-dark .avail__glass::after { opacity: .5; }
.avail.is-dark:hover .avail__glass { background: rgba(255, 255, 255, .16); }

.avail__dot {
  position: relative; flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: #2FB457; box-shadow: 0 0 0 3px rgba(47, 180, 87, .18);
}
/* Der Ring läuft nach außen und verschwindet — ein Puls, kein Blinken. */
.avail__dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: #2FB457;
  animation: avail-pulse 2.6s var(--ease-out) infinite;
}
@keyframes avail-pulse {
  0%   { transform: scale(1); opacity: .55; }
  70%, 100% { transform: scale(2.8); opacity: 0; }
}

.avail__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.avail__title {
  font-size: 14px; line-height: 18px; letter-spacing: -.28px; font-weight: 500;
}
.avail__sub {
  font-size: 13px; line-height: 17px; letter-spacing: -.26px; opacity: .6;
}

/* Ohne Backdrop-Filter gäbe es nur eine halbdurchsichtige Fläche, auf der die
   Schrift stellenweise nicht mehr trägt — dann lieber deckend. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .avail__glass { background: rgba(255, 255, 255, .94); }
  .avail.is-dark .avail__glass { background: rgba(28, 28, 32, .92); }
}

@media (max-width: 640px) {
  /* Auf dem Handy bleibt die Plakette weg. Sie schwebt fest über dem unteren
     Bildrand und verdeckte dort die letzte Zeile der Karussell-Karte — die
     Karte endet bei 641px, die Plakette begänne bei 613px. Kürzer machen half
     nicht, der Konflikt ist geometrisch. Die Aussage steht weiterhin im
     Kontakt-Knopf der Navigation und im Fußbereich. */
  .avail { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .avail { transform: none; transition: opacity .3s linear, color .3s linear; }
  .avail.is-in, .avail.is-in:hover, .avail.is-in:active { transform: none; }
  .avail__dot::after { animation: none; }
}

/* Impressum / Datenschutz */
.page-hero--legal { padding-bottom: 20px; }
.prose--legal { max-width: 720px; }
.prose--legal h2 {
  font-size: 24px; line-height: 28.8px; letter-spacing: -.72px;
  font-weight: 500; color: var(--ink); margin-top: 40px;
}
.prose--legal > *:first-child { margin-top: 0; }
.prose--legal h2 + p, .prose--legal h2 + ul { margin-top: 12px; }
.prose--legal p + ul { margin-top: 14px; }
.prose--legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* Die Listen im Datenschutztext brauchen ihre Punkte zurück — der Reset in
   Zeile 102 nimmt sie global weg, weil sie überall sonst Layout-Listen sind. */
.prose--legal ul {
  display: flex; flex-direction: column; gap: 10px;
  padding-left: 22px; list-style: disc;
}
.prose--legal li {
  font-size: 18px; line-height: 23.4px; letter-spacing: -.72px; color: var(--muted);
}
.prose--legal li::marker { color: var(--muted-2); }
/* Fließtext bleibt grau; hervorgehobene Begriffe treten ins Schwarz vor. */
.prose--legal strong { color: var(--ink); font-weight: 500; }
.prose--legal .lead { color: var(--ink); }
.prose--legal .legal-date {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line);
  font-size: 16px; line-height: 20.8px; letter-spacing: -.64px; color: var(--muted-2);
}

@media (max-width: 900px) {
  .skills-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .langswitch { min-width: 48px; }
}

/* Kennzahlen: Zahl und Einheit dürfen nie umbrechen. Der vierte Wert ist Text
   statt Zähler und läuft bei 60px über — deshalb eine eigene Stufe. */

/* =========================================================================
   Navigation: Breakpoints und Zugänglichkeit
   ========================================================================= */

/* Sprungziele der Inline-Navigation dürfen nicht unter der Leiste landen.
   `#ueber-mich` und `#case-studies` fehlten hier — ihre Überschrift landete
   beim Sprung hinter der Leiste. `#projects` gibt es seit dem Wegfall der
   Projekt-Sektion nicht mehr. */
#ueber-mich, #fokus, #prozess, #case-studies, #skills, #kontakt {
  scroll-margin-top: 96px;
}

/* Ab hier ist Platz für alle sechs Links; darunter übernimmt das Menü-Panel. */
@media (min-width: 1180px) {
  .navlinks { display: flex; }
  .menu { display: none; }
}
@media (max-width: 1179px) {
  .navlinks { display: none; }
}
@media (max-width: 809px) {
  .nav__inner { padding: 7px 7px 7px 16px; gap: 10px; }
  .nav__cta { display: none; }          /* „Kontakt" steht im Menü-Panel */
  .brand__mark svg { width: 26px; }
  .langtoggle__opt { min-width: 38px; padding: 7px 9px; }
}
/* Erst wenn Wortmarke, Sprachwahl und Menü sonst kollidieren, weicht der Name —
   das Logo trägt die Marke dann allein. */
@media (max-width: 379px) {
  .brand__name { display: none; }
}

/* Weniger Transparenz gewünscht: das Material wird deckend statt frostig —
   aber weiterhin erst, sobald die Leiste überhaupt sichtbar wird. */
@media (prefers-reduced-transparency: reduce) {
  .nav.is-scrolled .nav__inner {
    background: var(--white);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .nav__inner::before { display: none; }
}
/* Mehr Kontrast gewünscht: deckende Fläche mit klarer Kante, kräftigerer Text. */
@media (prefers-contrast: more) {
  .nav.is-scrolled .nav__inner {
    background: var(--white);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: 0 0 0 1px var(--ink);
  }
  .navlink { color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  /* Der Zustandswechsel bleibt, aber ohne Weg dorthin. */
  .nav__inner, .nav__inner::before { transition: none; }
  .navlink, .langtoggle__opt, .menu__btn { transition: none; }
  .navlink:active, .langtoggle__opt:active, .menu__btn:active { transform: none; }
}

/* =========================================================================
   Hero: schmale Bildschirme und Bewegungsempfindlichkeit
   ========================================================================= */
@media (max-width: 1023px) {
  /* Ohne Sticky-Strecke: scrollgebundene Effekte wirken auf Mobilgeräten
     hakelig, außerdem rechnet die Adressleiste in die Höhe hinein. Der Hero
     ist hier ein normaler Abschnitt in einer Spalte. */
  .hero-track { height: auto; }
  .hero {
    position: static; height: auto; min-height: 0;
    padding: 116px var(--page-x) 0; justify-content: flex-start;
    background: linear-gradient(180deg, #FFFFFF 0%, #F2F2F5 22%, #E3E3E8 62%, #D5D5DB 100%);
  }
  /* Der Schriftzug muss ganz ins Bild passen — ein abgeschnittenes „GABRIE"
     liest sich als Fehler, nicht als Gestaltung. */
  .hero__wordmark { position: static; margin-bottom: -6%; }
  .hero__word {
    font-size: min(13.2vw, 96px); letter-spacing: .06em;
    /* Etwas kräftiger als der Anteil auf dem Desktop: bei 96px statt 340px
       trägt eine 40 % deckende Linie sonst nicht mehr. */
    -webkit-text-stroke-width: 3px;
  }
  .hero__cutout {
    position: relative; left: auto; bottom: auto;
    transform: scaleX(-1); margin: 0 auto;
    height: min(46vh, 380px);
    /* Der Freisteller endet auf dem Handy mitten auf der Seite. Ohne
       Ausblendung steht dort eine harte, gerade Kante — auf dem Desktop
       fällt sie aus dem Bild, hier nicht. */
    -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  }

  /* Kein Zwei-Zustands-Aufbau auf dem Handy: alles steht sofort. Sichtbar
     bleibt die Fassung „initial" — die trägt die Aussage; die zweite Fassung
     wäre hier eine stumme Dopplung. */
  .hero__word--revealed, .hero__head--revealed { display: none; }
  .hero__word--initial, .hero__head--initial { opacity: 1; transform: none; }
  .hero__sub { opacity: 1; transform: none; }
  .hero__cta { opacity: 1; transform: none; pointer-events: auto; }
  .statcard { opacity: 1; transform: none; pointer-events: auto; }

  /* Unter dem Foto liegt heller Grund — weißer Text wäre dort unlesbar. */
  .hero__inner { padding-bottom: 28px; color: var(--ink); }
  .hero__head { color: var(--ink); text-shadow: none; font-size: clamp(25px, 5.9vw, 38px); }
  .hero__sub { color: var(--muted); text-shadow: none; margin-top: 16px; }
  .hero__cta { margin-top: 26px; }
  /* Heller Grund: dieselben beiden Knöpfe wie in „Über mich". */
  .hero__cta .btn--lead  { --btn-bg: var(--ink);     --btn-fg: var(--white); }
  .hero__cta .btn--lead:hover { --btn-bg: var(--ink-3); }
  .hero__cta .btn--quiet { --btn-bg: var(--surface); --btn-fg: var(--ink-2);
    box-shadow: none; }
  .hero__cta .btn--quiet:hover { --btn-bg: #EFEFEF; }

  /* Kacheln als Raster darunter, nur Fade-in statt Fly-in. */
  .statcards {
    position: static; display: grid; grid-template-columns: 1fr 1fr;
    gap: 12px; width: 100%; max-width: var(--container); padding-bottom: 72px;
  }
  .statcards .statcard {
    position: static; width: auto; inset: auto;
    transform: none; transition: opacity .45s var(--ease);
  }
  .hero.is-revealed .statcard { transform: none; }
}
@media (max-width: 640px) {
  .statcards { grid-template-columns: 1fr; padding-bottom: 56px; }
  .hero__cutout { height: min(40vh, 320px); }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  /* Kein Zwei-Zustands-Aufbau: der vollständige Zustand steht sofort. */
  .hero-track { height: auto; }
  .hero { position: static; }
  .hero__word, .hero__head, .hero__sub, .hero__cta, .statcard { transition: none; }
  .hero__word--initial, .hero__head--initial, .hero__sub { opacity: 0; }
  .hero__word--revealed, .hero__head--revealed { opacity: 1; transform: none; }
  .hero__cta { opacity: 1; transform: none; pointer-events: auto; }
  .statcard { opacity: 1; transform: none; pointer-events: auto; }
}

/* =========================================================================
   Disziplinen — schmales Laufband direkt unter dem Hero
   ========================================================================= */
/* Weißes Band zwischen dem Hero und „Über mich". Die Sektion darunter ist
   ebenfalls weiß — ohne die Haarlinie unten hätte das Band keine Kante mehr
   und liefe in den Text darunter aus. */
.disciplines {
  display: flex; justify-content: center;
  padding: 26px var(--page-x);
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.disciplines__inner {
  width: 100%; max-width: var(--container);
  display: flex; align-items: center;
}
/* `min-width: 0` ist nötig, damit das Laufband im Flex-Container schrumpfen
   darf statt seine Spurbreite durchzudrücken. Der Verlauf an beiden Enden
   kommt aus `.marquee` — ohne die Beschriftung davor darf er symmetrisch sein. */
.disciplines .marquee { flex: 1 1 auto; min-width: 0; }
.disciplines__item {
  display: inline-block;
  font-size: 15px; line-height: 20px; letter-spacing: -.3px;
  color: var(--muted); white-space: nowrap;
  transition: color .3s var(--ease);
}
.disciplines__item:hover { color: var(--ink); }

@media (max-width: 640px) {
  .disciplines { padding: 20px var(--page-x); }
}

/* =========================================================================
   Werdegang — Coverflow-Karussell
   Alle Karten liegen in derselben Rasterzelle; die Höhe ergibt sich aus der
   höchsten. Bewegt wird nur über transform und opacity, also auf der GPU.
   ========================================================================= */
.deck-section { display: flex; flex-direction: column; gap: 56px; }
.deck-section > .container { align-self: center; }

.deck__viewport {
  /* `clip` statt `hidden`: erzeugt keinen eigenen Scroll-Container. */
  overflow-x: clip;
  padding: 12px 0;
  perspective: 1600px;
  /* Die Nachbarkarten ragen über den Bildrand hinaus; `clip` schnitte sie dort
     hart ab. Die Maske blendet sie stattdessen aus. Ihre Breite ist der freie
     Platz neben der 1000px breiten Bühne, gedeckelt auf 180px — so erreicht der
     Verlauf die vordere Karte nie.
     `100%` und nicht `100vw`: Der Seitenrand der Sektion gehört nicht zu diesem
     Kasten, und `100vw` zählt zusätzlich die Bildlaufleiste mit. Mit `100vw`
     fiel der Verlauf zwischen 1024 und 1400px bis zu 50px zu breit aus und
     wusch die linke und rechte Kante der vorderen Karte aus. */
  --deck-fade: min(180px, max(0px, (100% - 1000px) / 2));
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--deck-fade),
                      #000 calc(100% - var(--deck-fade)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--deck-fade),
                      #000 calc(100% - var(--deck-fade)), transparent 100%);
  /* Eine Maske beschneidet standardmäßig auf den Rahmenkasten. Der endet 12px
     unter der Karte — der Kartenschatten wurde dort abgeschnitten, und was
     man unter der Karte sah, war nicht sein Auslaufen, sondern die Kante des
     Kastens. `no-clip` hebt die Beschneidung auf; der Verlauf läuft waagerecht
     und gilt oben und unten unverändert weiter. Browser ohne `no-clip` zeigen
     weiterhin den beschnittenen Schatten — den bisherigen Stand. */
  -webkit-mask-clip: no-clip;
          mask-clip: no-clip;
}
.deck__stage {
  display: grid;
  width: 100%; max-width: 1000px; margin: 0 auto;
  transform-style: preserve-3d;
  cursor: grab;
  /* Senkrecht scrollt die Seite, waagerecht gehört die Geste dem Karussell.
     Ohne diese Ansage entscheidet der Browser das selbst, nimmt den Zeiger
     mitten im Ziehen an sich und der Wisch kommt hier nie an.
     `pinch-zoom` bleibt ausdrücklich stehen — Aufziehen zum Vergrößern darf
     eine Karte nicht verhindern. */
  touch-action: pan-y pinch-zoom;
}
.deck__stage:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 8px; border-radius: var(--r-2xl); }
.deck.is-dragging .deck__stage { cursor: grabbing; }

.deck__card {
  grid-area: 1 / 1;
  transform-origin: 50% 50%;
  transition: transform .6s var(--ease), opacity .6s var(--ease);
  will-change: transform, opacity;
}
.deck.is-dragging .deck__card--front { transition-duration: 0ms; }
.deck__card--side { cursor: pointer; }
/* --shadow-card wirft 40px nach rechts unten. Auf der vorderen Karte ist das
   Lichteinfall; auf einer um 34° weggedrehten Nachbarkarte wird derselbe Wurf
   zu einem großen, schräg stehenden Fleck, den der weiße Kartenkörper an
   seiner Kante hart abschneidet — die Kante, die neben und unter der vorderen
   Karte zu sehen ist. Die Nachbarn tragen deshalb einen mittigen, kleineren
   Schatten: Er bleibt unter der Karte, statt sich von ihr zu lösen. */
.deck__card--side .station {
  box-shadow: 0 2px 6px rgba(0, 0, 0, .05), 0 14px 30px -12px rgba(0, 0, 0, .12);
}
/* Beim Wechsel nach vorn wächst der Schatten mit der Karte mit, statt zu
   springen — dieselbe Dauer wie die Drehung darüber. */
.station { transition: box-shadow .6s var(--ease); }

.station {
  height: 100%;
  /* 1,2fr links: Der längste Titel („CRO & UX/UI Specialist, DRIP Agency")
     braucht 450px; bei 1,25fr stehen ihm 488 zur Verfügung. Mit weniger
     Vorsprung bräche „DRIP Agency" schon bei leicht anderer Schriftlage um. */
  display: grid; grid-template-columns: 1.25fr 1fr;
  padding: 32px; border-radius: var(--r-2xl);
  background: var(--white); box-shadow: var(--shadow-card);
}
/* Linke Spalte: Pille, Titel, Kurztext — und ganz unten der Knopf, wo einer
   steht. Die Eckdaten sind entfallen: „Agentur: DRIP Agency" wiederholte den
   Titel, „Bereich" die Pille darüber. */
.station__main {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  padding-right: 32px;
}
.station__eyebrow {
  padding: 7px 14px;
  font-size: 13px; line-height: 17px; letter-spacing: .06em;
  font-weight: 500; text-transform: uppercase;
}
.station__main .t-h3 { margin-top: 4px; }
.station__link {
  /* Nur `margin-top: auto` — der Knopf wird ans Spaltenende geschoben.
     Hier stand zusätzlich `padding-top: 8px`. Das war als Luft darüber
     gedacht, wirkte aber nicht so: `.btn` hat eine feste Höhe von 48px und
     `box-sizing: border-box`, der Kasten wächst also nicht. Stattdessen
     schrumpfte der Inhaltsbereich oben und die Beschriftung rutschte um die
     halbe Differenz zu 12px nach oben — auf dem Handy, wo der Wert auf 0
     stand, um volle 6px. Der Abstand über dem Knopf kommt aus `margin-top`
     und der `gap` der Spalte, nicht aus seinem eigenen Innenrand. */
  margin-top: auto;
  /* Vollständig wiederholt, weil die Kurzschreibweise von `.btn` sonst
     überschrieben würde — die drei Werte dort bleiben, `opacity` kommt dazu. */
  transition: transform .3s var(--ease), background-color .3s var(--ease),
              box-shadow .3s var(--ease), opacity .45s var(--ease);
}
/* Der schwarze Knopf ist die dunkelste Fläche der Karte. Auf einer
   Nachbarkarte steht er an der Bildkante und wird dort von der Maske
   angeschnitten: ein harter dunkler Block, der nach Zeichenfehler aussieht und
   nicht nach Karte. Auf den Nachbarn bleibt er deshalb aus — bedienbar ist er
   dort ohnehin nicht, ihr Inhalt ist `inert`. */
.deck__card--side .station__link { opacity: 0; }

/* Rechte Spalte: keine graue Tafel und kein Symbolkästchen mehr, sondern eine
   Haarlinie als Trennung. Das nimmt der Karte zwei Kästen und zwei goldene
   Flächen — übrig bleibt die Liste selbst. */
.station__side {
  display: flex; flex-direction: column; gap: 18px; min-width: 0;
  padding-left: 32px; border-left: 1px solid var(--line);
}
.station__label {
  font-size: 13px; line-height: 17px; letter-spacing: .06em;
  font-weight: 500; text-transform: uppercase; color: var(--muted);
}
.station__tasks { display: flex; flex-direction: column; gap: 14px; }
.station__tasks li {
  display: flex; gap: 12px;
  font-size: 16px; line-height: 22.4px; letter-spacing: -.64px; color: var(--ink);
}
.station__check { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--accent-deep); }

/* Marken über die volle Breite, durch eine Haarlinie abgesetzt statt durch
   einen zweiten Kasten. */
.station__brands {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line);
}
.station__brands .tags { gap: 6px; }
.tag--brand {
  padding: 7px 12px; border-color: var(--line); color: var(--ink);
  font-size: 14px; letter-spacing: -.28px;
}

/* ---- Statuszeile: Zähler, Titel, Punkte. Reine Anzeige. ---- */
.deck__status {
  width: 100%; max-width: var(--container); margin: 0 auto;
  padding: 0 var(--page-x);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.deck__meta { display: flex; align-items: center; gap: 16px; min-width: 0; }
.deck__count { font-size: 15px; letter-spacing: -.3px; color: var(--muted); font-variant-numeric: tabular-nums; }
.deck__count b { font-weight: 500; color: var(--ink); }
.deck__dots { display: flex; align-items: center; gap: 8px; flex: none; }
.deck__dots span {
  width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--line);
  transition: width .4s var(--ease), background-color .4s var(--ease);
}
.deck__dots span.is-on { width: 24px; background: var(--accent-deep); }

@media (max-width: 1023px) {
  /* Einspaltig: die Zeilen richten sich nach ihrem Inhalt, der Rest der
     Kartenhöhe sammelt sich unten statt zwischen den Blöcken. */
  .station { grid-template-columns: 1fr; gap: 24px; padding: 24px; align-content: start; }
  /* Derselbe Schatten wie oben, nur flacher: --shadow-card reicht 60px nach
     unten, was unter einer 1000px breiten Karte richtig aussieht und unter
     einer 350px breiten zu schwer wirkt. */
  .station {
    box-shadow:
      0 1px 2px rgba(0,0,0,.04),
      0 6px 12px -4px rgba(0,0,0,.06),
      0 18px 32px -10px rgba(0,0,0,.10);
  }
  .station__main { padding-right: 0; }
  .station__link { margin-top: 0; }
  /* Die Trennlinie liegt jetzt zwischen den Blöcken statt neben ihnen. */
  .station__side {
    padding-left: 0; padding-top: 24px;
    border-left: 0; border-top: 1px solid var(--line);
  }
  .station__brands { margin-top: 0; padding-top: 24px; }
  .deck__stage { max-width: min(680px, calc(100vw - 2 * var(--page-x))); }
  /* 56px sind auf dem Handy zu viel, 28px zu wenig: Der Abstand zwischen
     Überschrift und Karte darf nicht enger wirken als der Rand der Sektion. */
  .deck-section { gap: 40px; }
  /* Die Sektion legt --page-x Seitenrand an; das Karussell bricht hier daraus
     aus. Ohne den Ausbruch endet der Beschneidungsrahmen von .deck__viewport
     genau an der Kartenkante: der Schatten wird als harte senkrechte Linie
     abgeschnitten, und die Zählerzeile — die ihren eigenen Seitenrand
     mitbringt — stünde 20px weiter innen als die Karte, an der sie sich
     ausrichten soll. */
  .deck { margin-inline: calc(-1 * var(--page-x)); }
  .deck__viewport {
    padding: 8px 0;
    /* Jetzt ist neben der Bühne wieder Platz, also greift auch die Maske:
       Schatten und die angeschnittene Nachbarkarte laufen weich aus, statt an
       der Bildkante abzureißen. */
    --deck-fade: var(--page-x);
  }
}

/* Neben der Karte bleiben auf dem Handy nur die 20px Seitenrand. So wenig
   reicht nicht, damit eine angeschnittene Nachbarkarte als Karte zu erkennen
   wäre — sichtbar sind zerschnittene Textzeilen, die wie ein Zeichenfehler
   aussehen. Ab 780px ist der Streifen breit genug für die abgerundete Kante;
   darunter bleiben die Nachbarn aus dem Bild. Wo man steht und wie viele es
   sind, sagen Zähler und Punkte darunter. */
@media (max-width: 779px) {
  .deck__card--side { opacity: 0 !important; pointer-events: none; }
}

@media (max-width: 640px) {
  /* Vierzehn Plaketten sind auf dem Handy fünf Reihen und allein 247px hoch —
     damit passte die Karte nicht mehr auf einen Bildschirm. Als Aufzählung
     sind es drei Zeilen. Der Rahmen fällt weg, das Komma kommt dazu. */
  .station__brands .tags { display: block; }
  .station__brands .tag--brand {
    display: inline; padding: 0; border: 0; background: none;
    font-size: 15px; line-height: 21px; letter-spacing: -.3px; color: var(--ink);
  }
  .station__brands .tag--brand:not(:last-child)::after { content: ","; }
}
@media (max-width: 560px) {
  /* Kompaktstufe. Die Karte soll auf ein Handy-Bild passen, ohne dass man
     scrollen muss — und zwar auf die tatsächlich sichtbare Höhe, nicht auf die
     des Geräts: Safari nimmt mit seinen Leisten rund 180px weg. Deshalb sind
     hier Schriftgrade, Abstände und Innenränder eine Stufe enger. */
  .station { padding: 18px; gap: 16px; }
  .station__side, .station__brands { padding-top: 16px; }
  .station__main { gap: 12px; }
  .station__main .t-h3 { font-size: 22px; line-height: 26.4px; letter-spacing: -.88px; margin-top: 2px; }
  .station__main .t-md { font-size: 15px; line-height: 20px; letter-spacing: -.45px; }
  .station__eyebrow { padding: 5px 12px; font-size: 12px; line-height: 16px; }
  .station__side { gap: 12px; }
  .station__tasks { gap: 10px; }
  .station__tasks li { font-size: 15px; line-height: 20px; letter-spacing: -.45px; }
  .station__check { width: 16px; height: 16px; margin-top: 2px; }
  .station__brands { gap: 10px; }
  .station__brands .tag--brand { font-size: 14px; line-height: 19px; }
  .deck__status { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .deck__card { transition: opacity .2s linear; }
}