/* ==========================================================================
   builtbyselimi.ch — handgeschriebenes CSS, kein Framework, kein Build.
   Klima: Tiefschwarz als Bühne, warmes Gold als einziges Licht
   (Entscheid 20.08.2026: Orange verworfen, Gold zurück — Schwarz bleibt).
   Signatur: das Licht wandert — Hero-Auftritt, Zeiger-Lichtschein,
   Spotlights, Marquee.
   ========================================================================== */

/* ---------- Schriften (self-hosted, keine Fremd-Quellen) ---------- */
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/clash-display-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/clash-display-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/general-sans-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/general-sans-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/general-sans-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2019, U+2013, U+2014;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-400-ext.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F;
}

/* ---------- Tokens ---------- */
:root {
  --bg:        #060606;   /* Seitengrund — neutrales Tiefschwarz */
  --bg-2:      #0b0b0b;   /* abgesetzte Flaechen */
  --panel:     #121110;   /* Karten (hauchwarm) */
  --panel-2:   #191715;   /* Karten-Hover / erhabene Flaechen */
  --ink:       #f4f2ee;   /* Haupttext (warmweiss) */
  --ink-2:     #b8b3ab;   /* Sekundaertext */
  --muted:     #837e76;   /* Nebentext */
  --linie:     rgba(244, 242, 238, .1);
  --akzent:    #e8a623;   /* warmes Gold — einziger Akzent */
  --akzent-2:  #f2bb4d;   /* Hover/Verlauf-Partner */
  --akzent-tinte: #14100a; /* Text AUF Gold */
  --ok:        #34c07c;
  --fehler:    #e5484d;
  --ease:      cubic-bezier(.16, 1, .3, 1);

  --schrift:      'General Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --schrift-disp: 'Clash Display', 'General Sans', system-ui, sans-serif;
  --schrift-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;

  --radius:    14px;
  --radius-s:  9px;
  --wrap:      1160px;
  --nav-hoehe: 72px;
}

/* ---------- Reset & Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  color-scheme: dark;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--schrift);
  font-size: 1.0625rem;           /* 17px */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; } /* width/height-Attribute dienen nur der Platzreservierung */
input, button, textarea, select { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; }
p a, li a { color: var(--akzent-2); text-underline-offset: 3px; }
p a:hover, li a:hover { text-decoration: underline; }

::selection { background: var(--akzent); color: var(--akzent-tinte); }

:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Typografie ---------- */
h1, h2, h3 {
  font-family: var(--schrift-disp);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 6.4vw, 4.3rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.35rem); letter-spacing: -0.008em; }

.vorzeile {
  font-family: var(--schrift);
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: 1rem;
}

.lauftext { color: var(--ink-2); max-width: 62ch; }
.mono { font-family: var(--schrift-mono); }
.akzent { color: var(--akzent); }

/* ---------- Struktur ---------- */
.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.skiplink {
  position: absolute; left: -9999px; top: 0;
  background: var(--akzent); color: var(--akzent-tinte);
  padding: .8rem 1.4rem; border-radius: 0 0 var(--radius-s) 0;
  font-weight: 600; z-index: 100;
}
.skiplink:focus { left: 0; }

/* ---------- Knoepfe ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.9rem;
  border: 0; border-radius: 999px;
  font-weight: 600; font-size: 1rem;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn svg { width: 18px; height: 18px; }

.btn-primary {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--akzent) 0%, var(--akzent-2) 100%);
  color: var(--akzent-tinte);
  box-shadow: 0 8px 28px rgba(232, 166, 35, .28);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(232, 166, 35, .42); }
.btn-primary:active { transform: translateY(0); }
/* Glanz-Sweep beim Darueberfahren */
.btn-primary::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -45%; width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-20deg) translateX(-130%);
  transition: transform .65s ease;
  pointer-events: none;
}
.btn-primary:hover::after { transform: skewX(-20deg) translateX(400%); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--linie);
}
.btn-ghost:hover { box-shadow: inset 0 0 0 1px rgba(232, 166, 35, .55); color: var(--akzent-2); }

/* ---------- Navigation ---------- */
.topnav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(6, 6, 6, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background .3s ease;
}
.topnav.kompakt {
  background: rgba(6, 6, 6, .88);
  border-bottom-color: var(--linie);
}
.topnav-innen {
  height: var(--nav-hoehe);
  display: flex; align-items: center; gap: 2rem;
  transition: height .3s var(--ease);
}
.topnav.kompakt .topnav-innen { height: 60px; }

.wortmarke {
  font-family: var(--schrift-disp);
  font-weight: 600; font-size: 1.32rem; letter-spacing: -0.01em;
  white-space: nowrap;
}
.wortmarke span { color: var(--akzent); }

.topnav-links {
  display: flex; align-items: center; gap: 1.9rem;
  margin-left: auto;
  list-style: none; padding: 0;
}
.topnav-links a:not(.btn) {
  color: var(--ink-2); font-weight: 500; font-size: .98rem;
  transition: color .15s ease;
}
.topnav-links a:not(.btn):hover { color: var(--ink); }
.topnav-links .btn { padding: .62rem 1.35rem; font-size: .95rem; }

.sprachwahl {
  font-family: var(--schrift); font-size: .85rem;
  color: var(--muted) !important;
  border: 1px solid var(--linie); border-radius: 999px;
  padding: .34rem .85rem;
  transition: border-color .15s ease, color .15s ease;
}
.sprachwahl:hover { border-color: rgba(232, 166, 35, .55); color: var(--akzent-2) !important; }

.nav-burger {
  display: none;
  margin-left: auto;
  background: none; border: 1px solid var(--linie); border-radius: var(--radius-s);
  padding: .55rem .65rem; cursor: pointer; color: var(--ink);
}
.nav-burger svg { width: 22px; height: 22px; }

@media (max-width: 860px) {
  .nav-burger { display: inline-flex; }
  .topnav-links {
    display: none;
    position: absolute; left: 0; right: 0; top: var(--nav-hoehe);
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-2);
    border-bottom: 1px solid var(--linie);
    padding: .6rem 1.25rem 1.25rem;
  }
  .topnav-links.offen { display: flex; }
  .topnav-links li { border-top: 1px solid var(--linie); }
  .topnav-links li:first-child { border-top: 0; }
  .topnav-links a:not(.btn) { display: block; padding: .95rem .25rem; font-size: 1.05rem; }
  .topnav-links .btn { margin-top: .9rem; width: 100%; }
  .topnav-links .sprachwahl { display: inline-block; margin-top: .9rem; text-align: center; }
}

/* ---------- Footer ---------- */
.fuss {
  border-top: 1px solid var(--linie);
  background: var(--bg-2);
  margin-top: clamp(4rem, 9vw, 7rem);
  padding: clamp(2.5rem, 6vw, 4rem) 0 2rem;
  color: var(--ink-2); font-size: .97rem;
}
.fuss-raster {
  display: flex; flex-wrap: wrap; gap: 2.2rem 4rem;
  justify-content: space-between; align-items: flex-start;
}
.fuss .wortmarke { font-size: 1.15rem; }
.fuss-block { display: grid; gap: .45rem; }
.fuss-titel {
  font-family: var(--schrift); font-size: .78rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
  margin-bottom: .35rem;
}
.fuss a:hover { color: var(--akzent-2); }
.fuss-unten {
  margin-top: 2.6rem; padding-top: 1.4rem;
  border-top: 1px solid var(--linie);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  color: var(--muted); font-size: .88rem;
}

/* ---------- Formulare ---------- */
.formular { display: grid; gap: 1.15rem; }

.feld { display: grid; gap: .4rem; }
.feld-zeile {
  display: grid; gap: 1.15rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.feld label, .feld-label {
  font-weight: 500; font-size: .93rem; color: var(--ink-2);
}

.feld input, .feld select, .feld textarea {
  background: var(--bg-2);
  border: 1px solid var(--linie);
  border-radius: var(--radius-s);
  padding: .8rem 1rem;
  color: var(--ink);
  min-height: 48px;
  transition: border-color .15s ease, background .15s ease;
}
.feld textarea { min-height: auto; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none; border-color: var(--akzent);
  background: var(--panel);
}
.feld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 21px) 55%, calc(100% - 15px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }

.feld-fehler { color: var(--fehler); font-size: .88rem; }

.wahl-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.wahl-chip input { position: absolute; opacity: 0; pointer-events: none; }
.wahl-chip span {
  display: inline-flex; align-items: center;
  padding: .62rem 1.2rem; min-height: 44px;
  border: 1px solid var(--linie); border-radius: 999px;
  color: var(--ink-2); cursor: pointer; font-size: .95rem;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.wahl-chip input:checked + span {
  border-color: var(--akzent); color: var(--akzent-2);
  background: rgba(232, 166, 35, .09);
}
.wahl-chip input:focus-visible + span { outline: 2px solid var(--akzent); outline-offset: 2px; }

.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.erfolg {
  display: flex; gap: 1rem; align-items: flex-start;
  background: rgba(52, 192, 124, .1);
  border: 1px solid rgba(52, 192, 124, .35);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  color: var(--ink);
}
.erfolg svg { width: 26px; height: 26px; color: var(--ok); flex-shrink: 0; margin-top: .15rem; }
.erfolg p { color: var(--ink-2); margin-top: .2rem; }

button.sendet { opacity: .6; pointer-events: none; }

/* ---------- Sektionen ---------- */
.sektion { padding-block: clamp(3.8rem, 8.5vw, 7rem); }
.sektion-abgesetzt { background: var(--bg-2); border-block: 1px solid var(--linie); }

.sek-kopf { max-width: 46rem; margin-bottom: clamp(2.4rem, 5vw, 3.8rem); }
.sek-kopf .lauftext { margin-top: 1rem; font-size: 1.12rem; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: clip; }
.hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(244, 242, 238, .09) 1px, transparent 1.4px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse 90% 70% at 30% 20%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 30% 20%, black 0%, transparent 70%);
}
.hero-glow {
  position: absolute; width: 760px; height: 760px; border-radius: 50%;
  right: -240px; top: -260px; pointer-events: none;
  background: radial-gradient(circle, rgba(232, 166, 35, .16) 0%, rgba(232, 166, 35, 0) 66%);
}
.hero .akzent { text-shadow: 0 0 38px rgba(232, 166, 35, .45); }
.hero-innen {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .9fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
  padding-block: clamp(4rem, 9vw, 7.5rem);
}
.hero-lead { margin-top: 1.6rem; font-size: 1.16rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; }
.hero-fakten {
  display: grid; grid-template-columns: repeat(3, minmax(0, auto));
  gap: 1.2rem 2.6rem; justify-content: start;
  margin-top: 2.8rem; padding-top: 1.8rem;
  border-top: 1px solid var(--linie);
}
.hero-fakt { display: grid; gap: .15rem; }
.hero-fakt b {
  font-family: var(--schrift-disp); font-weight: 600;
  font-size: 1.55rem; color: var(--akzent); line-height: 1;
}
.hero-fakt span {
  font-family: var(--schrift); font-size: .74rem;
  letter-spacing: .04em; color: var(--muted);
}
@media (max-width: 420px) { .hero-fakten { gap: 1rem 1.4rem; } }
.hero-fakten b { color: var(--akzent); font-weight: 400; }

/* Bis zum 21.08.2026 stand der Browserrahmen hier um 1.6 Grad gedreht und das
   Handy um 2.4 Grad gegen - das las sich wie ein schief aufgeklebter Sticker,
   nicht wie ein Geraet. Jetzt gerade, mit derselben Komposition wie im Showcase
   und auf den Case Studies: das Handy haengt zur Haelfte ueber die Kante.
   Tiefe kommt aus dem Schatten, nicht aus einer Schraeglage. */
.hero-visual { position: relative; min-height: 420px; --tel: 168px; }
.hero-visual .browser {
  box-shadow: 0 34px 80px rgba(0, 0, 0, .5);
}
.hero-visual .telefon {
  position: absolute; right: calc(var(--tel) / -2); bottom: -9%;
  width: var(--tel);
  box-shadow: 0 28px 64px rgba(0, 0, 0, .66);
}
@media (max-width: 1000px) {
  .hero-innen { grid-template-columns: 1fr; padding-block: clamp(3.4rem, 8vw, 5rem); }
  .hero-visual { display: none; }
}

/* ---------- Geräte-Rahmen ---------- */
.browser {
  background: var(--panel);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
}
.browser-bar {
  display: flex; align-items: center; gap: .45rem;
  padding: .65rem .9rem;
  border-bottom: 1px solid var(--linie);
  background: var(--bg-2);
}
.browser-bar i {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--muted); opacity: .5;
}
.browser-bar i:first-child { background: var(--akzent); opacity: .85; }
.browser-url {
  margin-left: .6rem;
  font-family: var(--schrift-mono); font-size: .72rem; color: var(--muted);
}
.browser img { width: 100%; }

/* Geraeterahmen — eine Quelle fuer alle Seiten. Masse in Prozent, damit
   die Blende bei 96px genauso aussieht wie bei 310px. */
.telefon {
  /* Das Geraet ist sein eigener Container. Nur so beziehen sich die Masse
     der Blende auf SEINE Breite - prozentuale Innenabstaende wuerden sich
     auf das Elternelement beziehen und die Blende auf jeder Seite anders
     gross machen (gemessen: 7.9% im Showcase gegen 20% auf der Case Study). */
  container-type: inline-size;
  border: 1px solid rgba(244, 242, 238, .18);
  border-radius: 11% / 5.1%;
  overflow: hidden;
  background: linear-gradient(158deg, #262320, #0c0b0a);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}
.telefon img {
  display: block;
  width: calc(100% - 6.4cqw);
  margin: 3.2cqw;
  border-radius: 9% / 4.1%;
}

/* ---------- Referenzleiste (Endlos-Marquee, direkt verlinkt) ---------- */
.referenzen {
  border-block: 1px solid var(--linie);
  background: var(--bg-2);
  padding-block: 1.15rem;
  overflow: hidden;
}
.referenzen-innen {
  display: flex; align-items: center; gap: 2.2rem;
  font-family: var(--schrift); font-size: .84rem; color: var(--muted);
}
.ref-label { flex-shrink: 0; white-space: nowrap; }
.marquee {
  display: flex; min-width: 0; flex: 1;
  mask-image: linear-gradient(90deg, transparent 0, black 7%, black 93%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 7%, black 93%, transparent 100%);
}
.marquee-gruppe {
  display: flex; align-items: center;
  gap: clamp(2.4rem, 6vw, 4.2rem); padding-right: clamp(2.4rem, 6vw, 4.2rem);
  flex-shrink: 0; min-width: max-content;
  animation: marquee-lauf 30s linear infinite;
}
.referenzen:hover .marquee-gruppe { animation-play-state: paused; }
.marquee a {
  display: inline-flex; align-items: center; gap: .55rem;
  white-space: nowrap; transition: color .15s ease;
}
.marquee a::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--akzent); opacity: .65;
}
.marquee a:hover { color: var(--akzent-2); }
@keyframes marquee-lauf { to { transform: translateX(-100%); } }
@media (max-width: 640px) { .ref-label { display: none; } }

/* ---------- Leistungs-Karten ---------- */
.karten-raster {
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.karte {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.1rem);
  display: flex; flex-direction: column; gap: 1rem;
  transition: transform .25s var(--ease), border-color .25s ease;
}
.karte:hover { transform: translateY(-5px); border-color: rgba(232, 166, 35, .45); }
/* Spotlight: folgt dem Zeiger (Position via --mx/--my aus site.js) */
.karte::before, .kontakt-panel::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 0;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
              rgba(232, 166, 35, .13), transparent 65%);
  opacity: 0; transition: opacity .35s ease;
}
.karte:hover::before, .kontakt-panel:hover::before { opacity: 1; }
.karte-ikone {
  width: 48px; height: 48px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(232, 166, 35, .11);
  color: var(--akzent);
}
.karte-ikone svg { width: 23px; height: 23px; }
.karte p { color: var(--ink-2); font-size: .99rem; }
.karte ul { list-style: none; padding: 0; display: grid; gap: .55rem; margin-top: auto; }
.karte li { display: flex; gap: .6rem; align-items: flex-start; color: var(--ink-2); font-size: .95rem; }
.karte li svg { width: 16px; height: 16px; color: var(--akzent); flex-shrink: 0; margin-top: .3rem; }
.karte-ref {
  font-family: var(--schrift); font-size: .78rem; color: var(--muted);
  border-top: 1px solid var(--linie); padding-top: .9rem;
}

/* ---------- Projekt-Showcase ---------- */
.show-karte {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(1.8rem, 4.5vw, 4rem); align-items: center;
  padding-block: clamp(2.2rem, 5vw, 3.4rem);
}
.show-karte + .show-karte { border-top: 1px solid var(--linie); }
.show-karte:nth-child(even) .show-bild { order: 2; }
/* Das Handy haengt bewusst zur HAELFTE ueber die Kante des Browserrahmens —
   knapp daneben zu stehen wirkt wie ein Versehen, deutlich darueber wie eine
   Entscheidung. Es haengt immer nach INNEN, zur Textspalte hin: nach aussen
   wuerde es bei der zweiten und vierten Karte ueber den Seitenrand ragen. */
.show-bild { position: relative; --tel: clamp(104px, 23%, 164px); }
.show-bild .telefon {
  position: absolute; bottom: -11%; width: var(--tel);
  box-shadow: 0 28px 62px rgba(0, 0, 0, .66);
}
.show-karte:nth-child(odd) .show-bild .telefon { right: calc(var(--tel) / -2); }
.show-karte:nth-child(even) .show-bild .telefon { left: calc(var(--tel) / -2); right: auto; }
.show-typ {
  font-family: var(--schrift); font-size: .78rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--akzent);
}
.show-text h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: .7rem; }
.show-text .lauftext { margin-top: .9rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.chip {
  font-family: var(--schrift); font-size: .76rem;
  color: var(--ink-2);
  border: 1px solid var(--linie); border-radius: 999px;
  padding: .34rem .8rem;
}
.show-link {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1.5rem; font-weight: 600; color: var(--akzent-2);
}
.show-link svg { width: 17px; height: 17px; transition: transform .18s ease; }
.show-link:hover svg { transform: translateX(4px); }
@media (max-width: 880px) {
  .show-karte { grid-template-columns: 1fr; }
  .show-karte:nth-child(even) .show-bild { order: 0; }
  /* Untereinander gestapelt fuellt das Bild die ganze Breite — ein halber
     Ueberhang wuerde die Seite seitlich aufschieben. Deshalb hier innen. */
  .show-bild { --tel: clamp(92px, 25%, 132px); }
  .show-karte:nth-child(odd) .show-bild .telefon,
  .show-karte:nth-child(even) .show-bild .telefon { right: 3%; left: auto; bottom: -7%; }
}

/* ---------- Prozess ---------- */
.prozess-raster {
  display: grid; gap: 2rem 1.6rem;
  grid-template-columns: repeat(4, 1fr);
}
.schritt { position: relative; padding-top: 1.2rem; }
/* Linie waechst von links, sobald der Schritt erscheint (Fallback: sichtbar) */
.schritt::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, var(--akzent) 0%, var(--linie) 60%);
  transform-origin: left;
  transition: transform 1s var(--ease) .15s;
}
@media (prefers-reduced-motion: no-preference) {
  .schritt.reveal:not(.sichtbar)::before { transform: scaleX(0); }
}
.schritt-nr {
  font-family: var(--schrift-disp); font-weight: 600;
  font-size: 2rem; color: var(--akzent);
}
.schritt h3 { margin-top: .5rem; font-size: 1.12rem; }
.schritt p { margin-top: .5rem; color: var(--ink-2); font-size: .95rem; }
@media (max-width: 960px) { .prozess-raster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .prozess-raster { grid-template-columns: 1fr; } }

/* ---------- Warum ---------- */
.warum-raster {
  display: grid; gap: 1.9rem 2.4rem;
  grid-template-columns: repeat(3, 1fr);
}
.warum-punkt { display: grid; gap: .55rem; align-content: start; }
.warum-punkt svg { width: 24px; height: 24px; color: var(--akzent); }
.warum-punkt h3 { font-size: 1.06rem; font-family: var(--schrift); font-weight: 600; letter-spacing: 0; }
.warum-punkt p { color: var(--ink-2); font-size: .95rem; }
@media (max-width: 960px) { .warum-raster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .warum-raster { grid-template-columns: 1fr; } }

/* ---------- Kontakt ---------- */
.kontakt-panel {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 3.6rem);
  background: var(--panel);
  border: 1px solid var(--linie); border-radius: 20px;
  padding: clamp(1.7rem, 4.5vw, 3.2rem);
}
.kontakt-wege { display: grid; gap: .9rem; margin-top: 1.8rem; align-content: start; }
.kontakt-weg {
  display: flex; gap: .85rem; align-items: center;
  color: var(--ink); font-weight: 500;
}
.kontakt-weg svg { width: 20px; height: 20px; color: var(--akzent); flex-shrink: 0; }
.kontakt-weg small { display: block; color: var(--muted); font-weight: 400; font-size: .85rem; }
@media (max-width: 880px) { .kontakt-panel { grid-template-columns: 1fr; } }

/* ---------- Erscheinen beim Scrollen (mit Unschaerfe + Stagger) ---------- */
html.js .reveal { opacity: 0; transform: translateY(26px); filter: blur(6px); }
html.js .reveal.sichtbar {
  opacity: 1; transform: none; filter: none;
  transition: opacity .85s var(--ease), transform .85s var(--ease), filter .85s var(--ease);
  transition-delay: var(--verzug, 0s);
}
/* Kinder in Rastern erscheinen versetzt */
.karten-raster  .reveal:nth-child(2),
.prozess-raster .reveal:nth-child(2),
.warum-raster   .reveal:nth-child(2) { --verzug: .08s; }
.karten-raster  .reveal:nth-child(3),
.prozess-raster .reveal:nth-child(3),
.warum-raster   .reveal:nth-child(3) { --verzug: .16s; }
.prozess-raster .reveal:nth-child(4),
.warum-raster   .reveal:nth-child(4) { --verzug: .24s; }
.warum-raster   .reveal:nth-child(5) { --verzug: .32s; }
.warum-raster   .reveal:nth-child(6) { --verzug: .4s; }

/* ---------- Hero-Auftritt beim Laden ---------- */
/* html.js kommt inline vor dem ersten Paint, html.geladen zwei Frames spaeter —
   faellt JS aus, bleibt alles sichtbar. Verzoegerung pro Element via --d. */
@media (prefers-reduced-motion: no-preference) {
  html.js .auftritt, html.js .auftritt-visual { opacity: 0; }
  html.geladen .auftritt { animation: auftauchen .95s var(--ease) var(--d, 0s) both; }
  html.geladen .auftritt-visual { animation: einschweben 1.25s var(--ease) .4s both; }
  @keyframes auftauchen {
    from { opacity: 0; transform: translateY(30px); filter: blur(8px); }
    to   { opacity: 1; transform: none; filter: none; }
  }
  @keyframes einschweben {
    from { opacity: 0; transform: translateY(48px) scale(.965); filter: blur(10px); }
    to   { opacity: 1; transform: none; filter: none; }
  }
  /* Glut im Hero driftet langsam, das Telefon schwebt nach dem Auftritt */
  .hero-glow { animation: glut-drift 14s ease-in-out infinite alternate; }
  @keyframes glut-drift { to { transform: translate(-110px, 70px) scale(1.08); } }
  html.geladen .hero-visual .telefon { animation: schwebe 5s ease-in-out 1.8s infinite alternate; }
  @keyframes schwebe {
    from { transform: translateY(0); }
    to { transform: translateY(-12px); }
  }
}

/* ---------- Signatur: wanderndes Licht (folgt dem Zeiger, site.js) ---------- */
/* Der Schein waechst mit dem Fenster. Bei fester Groesse von 880px wirkt er
   auf einem grossen Bildschirm wie eine Scheibe, die dem Zeiger nachlaeuft,
   statt wie Licht. Der Verlauf faellt jetzt ausserdem weiter aussen ab, damit
   der Rand nicht sichtbar wird. */
.lichtschein {
  --schein: clamp(720px, 66vw, 1720px);
  position: fixed; left: 0; top: 0;
  width: var(--schein); height: var(--schein);
  margin: calc(var(--schein) / -2) 0 0 calc(var(--schein) / -2);
  border-radius: 50%;
  pointer-events: none; z-index: 3;
  background: radial-gradient(circle, rgba(232, 166, 35, .055) 0%, rgba(232, 166, 35, .02) 34%, transparent 72%);
  mix-blend-mode: screen;
  opacity: 0; transition: opacity .8s ease;
  will-change: transform;
}
html.hat-licht .lichtschein { opacity: 1; }

/* ---------- Film-Korn (Materialitaet auf dem Schwarz) ---------- */
body::after {
  content: ''; position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
  opacity: .05; pointer-events: none; z-index: 60;
  mix-blend-mode: overlay;
}

/* ---------- Parallax-Traeger (Versatz via site.js) ---------- */
[data-parallax] { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal, .auftritt, .auftritt-visual { opacity: 1; transform: none; filter: none; }
  .lichtschein, body::after { display: none; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Case Studies (Aufgabe 8) — resources/views/projekt.blade.php
   Native Plattform-Technik, kein Framework: View Transitions beim
   Seitenwechsel, scroll-getriebene Animationen im Compositor, Container
   Queries fuer die Buehne. Wo ein Browser nicht mitmacht, greift jeweils
   der schlichte Grundzustand — nie eine kaputte Seite.
   ========================================================================== */

/* ---------- Seitenwechsel: das Bild wandert mit (View Transitions) ----------
   navigation: auto gilt nur fuer gleichnamige Herkunft und nur, wenn beide
   Seiten dieselbe Regel tragen — hier also die ganze Site. Die Namen
   (bild-<slug>, titel-<slug>) stehen im Blade und sind je Seite eindeutig. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  ::view-transition-old(root) { animation: vt-raus .26s var(--ease) both; }
  ::view-transition-new(root) { animation: vt-rein .42s var(--ease) both; }
  ::view-transition-group(*)  { animation-duration: .5s; animation-timing-function: var(--ease); }

  @keyframes vt-raus { to   { opacity: 0; } }
  @keyframes vt-rein { from { opacity: 0; transform: translateY(14px); } }
}

/* ---------- Kopf ---------- */
.cs-kopf { padding-block: clamp(2.6rem, 6vw, 4.5rem) clamp(1.8rem, 4vw, 2.8rem); }

.cs-zurueck {
  display: inline-flex; align-items: center; gap: .55rem;
  color: var(--muted); font-size: .92rem;
  transition: color .18s ease;
}
.cs-zurueck svg { width: 15px; height: 15px; transform: rotate(180deg); transition: transform .2s var(--ease); }
.cs-zurueck:hover { color: var(--akzent); }
.cs-zurueck:hover svg { transform: rotate(180deg) translateX(4px); }

.cs-kopf .vorzeile { margin-top: 2.2rem; }
.cs-kopf h1 {
  font-family: var(--schrift-disp); font-weight: 600;
  font-size: clamp(2.3rem, 6vw, 4.1rem); line-height: 1.03;
  letter-spacing: -.022em; margin-top: .55rem;
  text-wrap: balance;
}
.cs-lead { margin-top: 1.15rem; font-size: 1.14rem; max-width: 56ch; text-wrap: pretty; }

.cs-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.6rem; margin-top: 1.9rem; }
.cs-jahr {
  font-family: var(--schrift-mono); font-size: .86rem; color: var(--muted);
  padding: .3rem .7rem; border: 1px solid var(--linie); border-radius: 999px;
}
.cs-live { display: inline-flex; align-items: center; gap: .5rem; color: var(--akzent); font-weight: 500; }
.cs-live svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.cs-live:hover { color: var(--akzent-2); }
.cs-live:hover svg { transform: translate(2px, -2px); }

/* ---------- Buehne: Desktop gross, Handy versetzt davor ----------
   Die Spec verlangt echte Geraete-Rahmen. Das Handy bekommt deshalb eine
   Blende mit Tiefe statt einer Haarlinie. */
.cs-buehne { padding-bottom: clamp(3rem, 7vw, 5rem); }
.cs-buehne-innen { position: relative; container-type: inline-size; }
/* Nur Lage und Groesse — das Aussehen kommt aus der Basisklasse. */
.cs-buehne-innen { --tel: min(19%, 186px); }
.cs-buehne-innen .telefon {
  /* Der wrap traegt padding-inline; ohne Abzug haengt das Handy 72% statt 50% hinaus. */
  position: absolute; right: calc(var(--tel) / -2 + clamp(1.25rem, 4vw, 2.5rem)); bottom: -9%;
  width: var(--tel);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .66);
}
/* Auf schmalen Traegern ist der Desktop-Screenshot unlesbar klein. Dort wird
   getauscht: das Handybild gross statt beider Bilder winzig. */
@container (max-width: 660px) {
  .cs-buehne-innen {
    display: grid; place-items: center;
    padding-block: clamp(1.4rem, 6vw, 2.6rem);
  }
  /* Lichtschein hinter dem Geraet — sonst schwebt das Bild grundlos im Schwarz */
  .cs-buehne-innen::before {
    content: ''; position: absolute; inset: -4% 0;
    background: radial-gradient(58% 44% at 50% 36%, rgba(232, 166, 35, .15), transparent 72%);
    pointer-events: none;
  }
  .cs-buehne-innen .browser { display: none; }
  .cs-buehne-innen .telefon {
    position: relative; width: min(310px, 86%); margin-inline: auto;
    box-shadow: 0 26px 64px rgba(0, 0, 0, .6);
  }
}

/* ---------- Kennzahlen ---------- */
.cs-zahlen {
  padding-block: clamp(2.4rem, 5vw, 3.6rem);
  background: var(--bg-2); border-block: 1px solid var(--linie);
}
.cs-zahlen-raster {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 2rem clamp(1.5rem, 4vw, 3rem);
}
.cs-zahl dt {
  font-family: var(--schrift-disp); font-weight: 600;
  font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1;
  color: var(--akzent); font-variant-numeric: tabular-nums;
}
.cs-zahl dd { margin: .55rem 0 0; color: var(--ink-2); font-size: .97rem; max-width: 24ch; text-wrap: pretty; }

/* ---------- Aufgabe, Loesung, Technik, Ergebnis ---------- */
.cs-text { padding-block: clamp(3.4rem, 8vw, 6rem); }
.cs-kapitel {
  display: grid; grid-template-columns: 4.5rem 1fr;
  gap: clamp(1rem, 3vw, 2.4rem); align-items: start;
}
.cs-kapitel + .cs-kapitel {
  margin-top: clamp(2.4rem, 5vw, 3.8rem);
  padding-top: clamp(2.4rem, 5vw, 3.8rem);
  border-top: 1px solid var(--linie);
}
.cs-nummer { font-family: var(--schrift-mono); font-size: .9rem; color: var(--akzent); padding-top: .6rem; }
.cs-kapitel h2 {
  font-family: var(--schrift-disp); font-weight: 600;
  font-size: clamp(1.45rem, 3vw, 2.05rem); line-height: 1.15;
  text-wrap: balance;
}
.cs-kapitel .lauftext { margin-top: .85rem; font-size: 1.07rem; max-width: 66ch; text-wrap: pretty; }
@media (max-width: 640px) {
  .cs-kapitel { grid-template-columns: 1fr; gap: .35rem; }
  .cs-nummer { padding-top: 0; }
}

/* ---------- Fakten-Chips ---------- */
.cs-fakten { padding-block: clamp(3rem, 6vw, 4.5rem); }
.cs-fakten-titel {
  font-family: var(--schrift-disp); font-weight: 600;
  font-size: clamp(1.25rem, 2.4vw, 1.65rem); margin-bottom: 1.5rem;
}
.cs-fakten-chips { gap: .6rem; }
.cs-fakten-chips .chip { display: inline-flex; align-items: center; gap: .55rem; padding: .52rem .95rem; }
.cs-fakten-chips .chip svg { width: 13px; height: 13px; color: var(--akzent); flex-shrink: 0; }

/* ---------- Abschluss ---------- */
.cs-cta { padding-block: clamp(3.4rem, 7vw, 5.4rem); }
.cs-cta-panel {
  display: grid; grid-template-columns: 1fr auto;
  gap: 2rem clamp(2rem, 5vw, 4rem); align-items: center;
  padding: clamp(1.8rem, 4vw, 2.9rem);
  border: 1px solid var(--linie); border-radius: var(--radius);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(232, 166, 35, .09) 0%, transparent 55%),
    linear-gradient(140deg, var(--panel), var(--bg-2));
}
.cs-cta-panel h2 {
  font-family: var(--schrift-disp); font-weight: 600;
  font-size: clamp(1.45rem, 3vw, 2.05rem); text-wrap: balance;
}
.cs-cta-panel .lauftext { margin-top: .8rem; max-width: 52ch; text-wrap: pretty; }
.cs-cta-knoepfe { display: flex; flex-wrap: wrap; gap: .8rem; }
@media (max-width: 820px) { .cs-cta-panel { grid-template-columns: 1fr; } }

/* ---------- Naechstes Projekt ---------- */
.cs-weiter { border-top: 1px solid var(--linie); }
.cs-weiter-link {
  display: flex; align-items: center; gap: 1rem;
  padding-block: clamp(1.9rem, 4vw, 2.9rem);
  color: var(--ink);
}
.cs-weiter-label { font-family: var(--schrift); font-size: .84rem; color: var(--muted); }
.cs-weiter-name {
  font-family: var(--schrift-disp); font-weight: 600;
  font-size: clamp(1.35rem, 3vw, 1.95rem); margin-right: auto;
  transition: color .2s ease;
}
.cs-weiter-link svg { width: 21px; height: 21px; color: var(--akzent); transition: transform .22s var(--ease); }
.cs-weiter-link:hover .cs-weiter-name { color: var(--akzent); }
.cs-weiter-link:hover svg { transform: translateX(8px); }
@media (max-width: 520px) {
  .cs-weiter-link { flex-wrap: wrap; gap: .2rem 1rem; }
  .cs-weiter-label { width: 100%; }
}

/* ---------- Scroll-getriebene Bewegung (laeuft im Compositor, kein JS) ----------
   Nur dort, wo der Browser es kann. Ohne Unterstuetzung steht alles schlicht
   und vollstaendig sichtbar da — es gibt keinen versteckten Startzustand. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cs-buehne-innen .browser {
      animation: cs-auf linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 28%;
    }
    .cs-zahl {
      animation: cs-steigen linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 75%;
    }
    @keyframes cs-auf     { from { opacity: .45; transform: translateY(26px) scale(.978); } }
    @keyframes cs-steigen { from { opacity: 0;   transform: translateY(14px); } }
  }
}

/* ==========================================================================
   Eigenstaendige Unterseiten: /projekte, /leistungen, /kontakt
   Seit dem 21.08.2026 echte Adressen statt Anker auf der Startseite —
   in der Adresszeile soll keine Raute stehen. Die Startseite behaelt ihre
   Sektionen und verweist am Fuss jeder Sektion auf die ausfuehrliche Seite.
   ========================================================================== */

.seite-kopf { padding-block: clamp(2.6rem, 6vw, 4.4rem) 0; }
.seite-kopf h1 {
  font-family: var(--schrift-disp); font-weight: 600;
  font-size: clamp(2.1rem, 5.2vw, 3.5rem); line-height: 1.06;
  letter-spacing: -.02em; margin-top: .55rem;
  text-wrap: balance;
}
.seite-lead { margin-top: 1.1rem; font-size: 1.14rem; max-width: 58ch; text-wrap: pretty; }
.seite-inhalt { padding-top: clamp(2rem, 4.5vw, 3.2rem); }

/* Weiterfuehrender Link am Fuss einer Startseiten-Sektion */
.sektion-weiter { margin-top: clamp(1.8rem, 4vw, 2.6rem); }

/* ---------- Projektraster auf /projekte ---------- */
.proj-raster {
  display: grid; gap: clamp(1.3rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}
.proj-karte { display: grid; }
.proj-karte-link {
  display: grid; align-content: start; gap: 1.15rem; height: 100%;
  padding: clamp(.9rem, 2vw, 1.25rem);
  border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--panel); color: var(--ink);
  transition: border-color .22s ease, background .22s ease, transform .22s var(--ease);
}
.proj-karte-link:hover {
  background: var(--panel-2);
  border-color: rgba(232, 166, 35, .38);
  transform: translateY(-3px);
}
.proj-karte-link:focus-visible { transform: translateY(-3px); }

.proj-karte-typ {
  font-family: var(--schrift); font-size: .78rem; color: var(--akzent);
  letter-spacing: .07em; text-transform: uppercase;
}
.proj-karte-text h2 {
  font-family: var(--schrift-disp); font-weight: 600;
  font-size: clamp(1.28rem, 2.4vw, 1.65rem); margin-top: .4rem;
}
.proj-karte-text .lauftext { margin-top: .7rem; font-size: 1rem; }
.proj-karte-text .chips { margin-top: 1rem; }
.proj-karte-text .show-link { margin-top: 1.15rem; }
.proj-karte-link:hover .show-link svg { transform: translateX(4px); }

/* Auf sehr schmalen Traegern kostet der Innenabstand zu viel Breite */
@media (max-width: 420px) {
  .proj-karte-link { padding: .7rem; }
}

/* ==========================================================================
   Stand 21.08.2026: Grundschrift statt Mono, anklickbare Leistungskarten,
   Leistungs-Detailseiten, Ueber mich, und der Kontaktbereich auf dem Handy.
   ========================================================================== */

/* ---------- Nachwehen des Schriftwechsels ----------
   Ohne die Mono-Schrift verlieren die kleinen Beschriftungen ihren Charakter.
   Etwas Laufweite gibt ihn zurueck, ohne die Schrift zu wechseln. */
.vorzeile, .fuss-titel, .show-typ, .proj-karte-typ, .cs-weiter-label { letter-spacing: .1em; }
.chip, .karte-ref, .referenzen-innen { letter-spacing: .015em; }
.hero-fakt span { letter-spacing: .04em; }

/* ---------- Leistungskarten: vier statt drei, und anklickbar ----------
   Vier Karten nebeneinander werden zu schmal zum Lesen. Ab 900px deshalb
   zwei mal zwei statt vier in einer Reihe. */
@media (min-width: 900px) {
  .karten-raster { grid-template-columns: repeat(2, 1fr); }
}

/* Der Inhalt liegt neu in einem <a>, das die ganze Karte fuellt — das Layout
   wandert deshalb vom Karten-Kasten in den Verweis. */
.karte { padding: 0; display: block; }
.karte-link {
  display: flex; flex-direction: column; gap: 1rem; height: 100%;
  padding: clamp(1.6rem, 3vw, 2.1rem);
  color: var(--ink);
}
.karte h3 { transition: color .2s ease; }
.karte:hover h3 { color: var(--akzent); }
.karte-link ul { margin-top: .2rem; }

.karte-fuss {
  margin-top: auto;
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .5rem 1rem;
  border-top: 1px solid var(--linie); padding-top: .9rem;
}
.karte-fuss .karte-ref { border-top: 0; padding-top: 0; }
.karte-mehr {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--akzent); font-weight: 500; font-size: .9rem;
}
.karte-mehr svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.karte:hover .karte-mehr svg { transform: translateX(4px); }

/* ---------- Kontaktbereich auf dem Handy ----------
   Bis zum 21.08.2026 liefen Kontaktwege und Formular ohne Trennung
   ineinander — untereinander gestapelt las sich das als ein Block. */
@media (max-width: 880px) {
  .kontakt-panel { gap: 0; }
  .kontakt-panel > div + div {
    margin-top: clamp(1.6rem, 6vw, 2.2rem);
    padding-top: clamp(1.6rem, 6vw, 2.2rem);
    border-top: 1px solid var(--linie);
  }
  .kontakt-wege { margin-top: 1.5rem; gap: 1.15rem; }
}
@media (max-width: 520px) {
  .kontakt-panel { padding: 1.25rem; border-radius: 16px; }
  .kontakt-weg svg { width: 18px; height: 18px; }
}

/* ---------- Leistungs-Detailseiten ---------- */
.lst-vorzeile { display: inline-flex; align-items: center; gap: .55rem; }
.lst-vorzeile svg { width: 16px; height: 16px; }

.lst-raster {
  display: grid; align-items: start;
  gap: clamp(1.8rem, 4vw, 2.8rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}
.lst-block h2 {
  font-family: var(--schrift-disp); font-weight: 600;
  font-size: clamp(1.18rem, 2.2vw, 1.45rem); margin-bottom: .9rem;
  text-wrap: balance;
}
.lst-block .lauftext { font-size: 1.01rem; }

.lst-liste, .lst-schritte { list-style: none; padding: 0; display: grid; gap: .75rem; }
.lst-liste li, .lst-schritte li {
  display: flex; gap: .65rem; align-items: flex-start;
  color: var(--ink-2); font-size: .98rem;
}
.lst-liste li svg { width: 16px; height: 16px; color: var(--akzent); flex-shrink: 0; margin-top: .32rem; }
.lst-schritt-nr {
  font-family: var(--schrift-mono); font-size: .82rem; color: var(--akzent);
  flex-shrink: 0; padding-top: .14rem;
}

/* Der Beleg: kein Versprechen ohne ein Projekt, das es traegt */
.lst-beleg-innen {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(1.6rem, 4vw, 3rem);
}
.lst-beleg-text h2 {
  font-family: var(--schrift-disp); font-weight: 600;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-top: .45rem;
}
.lst-beleg-text .lauftext { margin-top: .9rem; }
.lst-beleg-text .show-link { margin-top: 1.2rem; }
@media (max-width: 860px) { .lst-beleg-innen { grid-template-columns: 1fr; } }

/* ---------- Ueber mich: das Portraet liegt im Hintergrund ----------
   Kein Bilderrahmen neben dem Text, sondern ein Portraet, das nach links ins
   Schwarz auslaeuft. Zwei Verlaufsflaechen in der Seitenfarbe legen sich
   darueber — das haelt den Text lesbar, ohne von mask-image abzuhaengen. */
.ueber-buehne {
  position: relative; overflow: clip;
  min-height: clamp(430px, 48vw, 620px);
  display: grid; align-items: center;
  padding-block: clamp(3rem, 7vw, 5rem);
}
.ueber-bild-hg {
  position: absolute; inset-block: 0; right: 0; z-index: 0;
  width: min(42%, 540px); height: 100%;
  object-fit: cover; object-position: 48% 18%;
  /* Die Maske am Bild selbst - der Verlauf darueber allein liess eine Kante stehen. */
  -webkit-mask-image: linear-gradient(to right, transparent 2%, #000 46%);
  mask-image: linear-gradient(to right, transparent 2%, #000 46%);
  /* Der helle Studiogrund wuerde sonst als Block im Schwarz stehen. */
  filter: grayscale(.32) brightness(.68) contrast(1.06);
}
/* Drei Verlaufsflaechen: von links ins Schwarz, oben und unten weich auslaufend.
   Ohne die beiden waagrechten haette das Bild eine sichtbare Kante. */
.ueber-buehne::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to right, var(--bg) 46%, rgba(6, 6, 6, .68) 66%, rgba(6, 6, 6, .1) 88%, transparent 100%),
    linear-gradient(to top, var(--bg) 0%, rgba(6, 6, 6, .7) 17%, transparent 46%),
    linear-gradient(to bottom, var(--bg) 0%, transparent 20%);
}
.ueber-kopf { position: relative; z-index: 2; width: 100%; }
.ueber-buehne .vorzeile, .ueber-buehne h1, .ueber-buehne .seite-lead { max-width: 44ch; }

/* Auf schmalen Traegern sitzt das Portraet OBEN RECHTS und der Text darunter —
   hinter dem Text sieht man weder vom Gesicht noch vom Text genug. Die Maske
   laeuft nach links unten aus, damit keine Kante stehen bleibt. */
@media (max-width: 820px) {
  .ueber-buehne { --portraet-h: clamp(200px, 52vw, 290px); min-height: auto; align-items: start; padding-block: 0 clamp(2rem, 6vw, 3rem); }
  .ueber-bild-hg {
    inset-block: 0 auto; right: 0;
    width: 62%; height: var(--portraet-h); max-height: none;
    object-position: 50% 10%;
    filter: grayscale(.28) brightness(.78) contrast(1.05);
    -webkit-mask-image: linear-gradient(to bottom left, #000 26%, transparent 84%);
    mask-image: linear-gradient(to bottom left, #000 26%, transparent 84%);
  }
  /* Der Text beginnt UNTER dem Portraet - beides aus derselben Groesse abgeleitet,
     damit sie sich nie ueberlappen. */
  .ueber-kopf { padding-top: calc(var(--portraet-h) + 1.1rem); }
  .ueber-buehne::after {
    background: linear-gradient(to bottom, transparent 0%, rgba(6, 6, 6, .5) 48%, var(--bg) 86%);
  }
}

/* ---------- Projektuebersicht: die vier Karten stapeln sich beim Scrollen ----------
   Jede Karte bleibt am oberen Rand stehen, die naechste schiebt sich darueber
   und laesst einen Streifen der vorigen sichtbar. Reines CSS. Unter 1000px
   bleibt das gewohnte Raster, weil dort kein Platz zum Stapeln ist. */
.proj-karte-nr {
  display: block; margin-bottom: .5rem;
  font-family: var(--schrift-mono); font-size: .78rem;
  color: var(--muted); letter-spacing: .1em;
}

@media (min-width: 1000px) {
  .proj-raster { display: block; }
  .proj-karte {
    position: sticky;
    top: calc(var(--nav-hoehe) + 1.6rem + (var(--i, 1) - 1) * 1.15rem);
  }
  .proj-karte + .proj-karte { margin-top: clamp(3rem, 7vh, 5.5rem); }
  /* Auslauf, damit die letzte Karte oben stehen bleiben kann */
  .proj-raster::after { content: ''; display: block; height: 26vh; }

  .proj-karte-link {
    grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.6rem, 3vw, 2.8rem);
    padding: clamp(1rem, 1.8vw, 1.4rem);
  }
  /* Eine gestapelte Karte darf nicht wandern — sonst wackelt der Stapel. */
  .proj-karte-link:hover { transform: none; }
  .proj-karte-bild { transition: transform .45s var(--ease); }
  .proj-karte-link:hover .proj-karte-bild { transform: scale(1.015); }

  .proj-karte-text h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); }
  .proj-karte-text .lauftext { font-size: 1.05rem; max-width: 44ch; }
}

/* ---------- Geraete-Glanz ----------
   Ein Lichtstreifen wandert ueber den Bildschirm, sobald das Geraet in den
   Blick kommt — auf jeder Seite gleich, weil er an .browser und .telefon
   selbst haengt. Scroll-getrieben, laeuft im Compositor, kein JavaScript. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .browser, .telefon { position: relative; }
    .browser::after, .telefon::after {
      content: ''; position: absolute; inset: 0; z-index: 2;
      pointer-events: none; border-radius: inherit;
      background: linear-gradient(104deg, transparent 38%, rgba(244, 242, 238, .13) 48%, transparent 58%);
      animation: geraet-glanz linear both;
      animation-timeline: view();
      animation-range: entry 12% cover 40%;
    }
    @keyframes geraet-glanz {
      from { transform: translateX(-135%); }
      to { transform: translateX(135%); }
    }
  }
}

.ueber-ausbildung { list-style: none; padding: 0; display: grid; gap: 1.05rem; max-width: 62ch; }
.ueber-ausbildung li {
  display: grid; gap: .22rem;
  padding-bottom: 1.05rem; border-bottom: 1px solid var(--linie);
}
.ueber-ausbildung li:last-child { border-bottom: 0; padding-bottom: 0; }
.ueber-aus-titel { font-weight: 600; color: var(--ink); }
.ueber-aus-sub { color: var(--muted); font-size: .92rem; }

/* ==========================================================================
   Aufgabe 9 und 10: Erstgespraech, Impressum, Datenschutz
   ========================================================================== */

/* ---------- Erstgespraech: Ablauf links, Formular rechts ---------- */
.eg-ablauf-titel {
  font-family: var(--schrift-disp); font-weight: 600;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
}
.eg-schritte {
  list-style: none; padding: 0; margin: 1.5rem 0 0;
  display: grid; gap: 1.15rem;
}
.eg-schritte li { display: flex; gap: .85rem; align-items: flex-start; }
.eg-nr {
  font-family: var(--schrift-mono); font-size: .8rem; color: var(--akzent);
  flex-shrink: 0; padding-top: .22rem; letter-spacing: .06em;
}
.eg-schritt-text { color: var(--ink-2); font-size: .98rem; }
.eg-schritt-text strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: .15rem; }
.eg .kontakt-wege {
  margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--linie);
}

/* ---------- Rechtsseiten: eine ruhige Lesespalte ----------
   Rechtstexte werden gelesen, nicht ueberflogen. Deshalb schmale Spalte,
   groessere Zeilenhoehe und klare Abstaende zwischen den Abschnitten. */
.recht-innen { max-width: 68ch; }
.recht-block + .recht-block {
  margin-top: clamp(2rem, 4vw, 2.8rem);
  padding-top: clamp(2rem, 4vw, 2.8rem);
  border-top: 1px solid var(--linie);
}
.recht-block h2 {
  font-family: var(--schrift-disp); font-weight: 600;
  font-size: clamp(1.18rem, 2.2vw, 1.45rem); margin-bottom: .85rem;
  text-wrap: balance;
}
.recht-block .lauftext { max-width: none; line-height: 1.72; }
.recht-block .lauftext + .lauftext { margin-top: .9rem; }

.recht-anschrift address {
  font-style: normal; color: var(--ink-2); line-height: 1.75;
}
.recht-anschrift address strong {
  display: block; color: var(--ink); font-weight: 600; margin-bottom: .15rem;
}

.recht-liste { list-style: none; padding: 0; margin: 1.1rem 0; display: grid; gap: .7rem; }
.recht-liste li {
  display: flex; gap: .65rem; align-items: flex-start;
  color: var(--ink-2); line-height: 1.62;
}
.recht-liste li svg { width: 16px; height: 16px; color: var(--akzent); flex-shrink: 0; margin-top: .32rem; }

.recht .kontakt-wege { margin-top: 0; }

.recht-stand {
  margin-top: clamp(2.4rem, 5vw, 3.4rem);
  padding-top: 1.4rem; border-top: 1px solid var(--linie);
  color: var(--muted); font-size: .88rem;
}