/* Timur Store – im oezdek-design gebaut.
   Nachtblau und Glas. Eine mittige Achse, Schriftskala 1,25, Abstände in 8-px-Schritten.
   Effekte dosiert, jeder genau einmal: der Name baut sich Buchstabe für Buchstabe auf, die Handys
   im Blob fächern beim Scrollen leicht auf, Wörter laufen die Welle entlang, Karten steigen beim
   ersten Sichtbarwerden sanft auf, die ASCII-Signatur am Ende. Schriften liegen selbst gehostet. */

@font-face {
  font-family: "Geist";
  src: url("fonts/geist.woff2") format("woff2");
  font-weight: 300 800;
  font-display: optional;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/geist-mono.woff2") format("woff2");
  font-weight: 400 600;
  font-display: optional;
}

:root {
  /* ── Thema: nur diese sechs Farben pro Projekt anpassen (Hero-Farbe, Tinte darauf, Akzent) ── */
  --sky: #8da89b;       /* flache Hero-Farbe; Helligkeit (L) zwischen 0,30 und 0,55 (#98b4db war „zu hellblau“) */
  --sky-ink: #0b1426;   /* dunkle Tinte auf --sky: Kicker, Text, Knöpfe im Hero */
  --accent: #b9ee78;    /* der Punkt hinter dem Namen, Quadrat im Knopf, Fokus */
  --accent-2: #dcf6bc;  /* hellere Stufe für Links, Hover und Text auf Dunkel */
  --accent-rgb: 185, 238, 120;
  --paper: #f2f4f8;     /* gebrochenes Weiß für den großen Namen */

  /* ── fest: die Nacht ── */
  --bg: #05070d;
  --text: #f4f6fa;
  --text-2: #aeb7c7;
  --text-3: #8e98ac;   /* 6:1 auf den Karten, AA auch für die kleinen Mono-Labels */
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.12);
  --ok: #30d158;
  --danger: #ff6b61;

  /* Schriftskala, Verhältnis 1,25 */
  --t-xs: 0.8125rem;   /* 13 */
  --t-sm: 0.9375rem;   /* 15 */
  --t-md: 1.0625rem;   /* 17 */
  --t-lg: 1.3125rem;   /* 21 */
  --t-xl: 1.625rem;    /* 26 */
  --t-2xl: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);    /* 40 */
  --t-3xl: clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem);   /* 60 */

  --sans: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Abstände in 8er-Schritten, Ränder und Sektionen fließend */
  --gutter: clamp(20px, 4vw, 48px);
  --max: 1120px;
  --pad: clamp(24px, 4.4vw, 56px);   /* innen in großen Karten */
  --gap: 24px;
  --section: clamp(96px, 11vw, 144px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  /* Überziehen oben zeigt den Himmel, unten die dunkle Seite. Der Verlauf darf sich nicht wiederholen
     (sonst steht seine dunkle Hälfte über der Seite); main.js setzt data-tone, damit die Farbe rund um
     die Seite dem Abschnitt folgt. */
  background: linear-gradient(var(--sky) 50%, var(--bg) 50%) no-repeat var(--bg);
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
html[data-tone="sky"] { background-color: var(--sky); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-2);
  font: 400 var(--t-md)/1.65 var(--sans);
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
p, h1, h2, h3, dl, dd, figure, pre { margin: 0; }
h1, h2, h3 { color: var(--text); font-weight: 600; text-wrap: balance; }
p { text-wrap: pretty; }

a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-decoration-thickness: 1px; text-underline-offset: 0.25em; transition: color 0.15s, text-decoration-color 0.15s; }
a:hover { color: var(--accent-2); text-decoration-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--accent); color: #fff; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--text); color: var(--bg); padding: 8px 14px; border-radius: 8px; }
.skip:focus { top: 12px; }

/* Milchglas: helle Oberkante, kaum Füllung, der Hintergrund dahinter verschwimmt */
.glass {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 40px 80px -48px rgba(0, 0, 0, 0.9);
}

/* ── Navigation: eine Glas-Pille, die oben schwebt ── */
/* Die Nav selbst ist nur das 16-px-Band über der Pill, deckend in der Farbe des Abschnitts darunter:
   Hero-Farbe über dem Hero, danach dunkel (main.js setzt data-tone). Über der Pill scrollt nichts
   sichtbar, und Safari 26+ (ignoriert theme-color) färbt die Statusleiste mit der eigenen
   Hintergrundfarbe dieses Bands. Das muss die Farbe des Elements selbst sein, mindestens 16 px hoch,
   ohne Maske und ohne Blur, sonst folgt Safari dem Umschalten nicht. Kein Blur-Streifen, kein Schimmer
   (Daniel, 2026-10-17: „diesen glow will ich nicht“). */
.nav-band { position: fixed; z-index: 40; top: 0; left: 0; right: 0; height: calc(16px + env(safe-area-inset-top)); background-color: var(--bg); pointer-events: none; transition: background-color 0.3s; }
.nav { position: fixed; z-index: 40; top: calc(16px + env(safe-area-inset-top)); left: 0; right: 0; display: flex; justify-content: center; padding-inline: var(--gutter); pointer-events: none; }
.nav-band[data-tone="sky"] { background-color: var(--sky); }
/* Band und Nav sind Geschwister: steckt die Glas-Pill im farbigen Band, zeichnet Safari am Mac das Glas beim Runterziehen falsch */
/* Die Pill ist klares Glas: halbe dunkle Tönung (helle Schrift bleibt auf der Hero-Farbe lesbar),
   starker Blur und Sättigung, helle Kante oben, leichter Glanz. Das Menü am Handy ist aus demselben Glas.
   (.nav-menu ohne :popover-open, sonst verwirft ein alter Browser die ganze Regel samt Pill.) */
.nav-pill, .nav-menu {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 60%), rgba(10, 14, 24, 0.5);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top-color: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 28px -18px rgba(0, 0, 0, 0.7);
}
.nav-pill { pointer-events: auto; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 6px 0 20px; border-radius: 999px; }
.brand { margin-right: 16px; color: var(--text); text-decoration: none; font: 600 var(--t-sm)/1 var(--sans); letter-spacing: -0.015em; white-space: nowrap; }
.brand:hover { color: var(--text); }
.nav-links { display: flex; }
.nav-links a, .nav-key { padding: 8px 12px; border-radius: 999px; color: #d0d6e1; font: 400 0.875rem/1 var(--sans); text-decoration: none; transition: color 0.15s, background-color 0.15s; }
.nav-links a:hover, .nav-key:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.nav-key { margin-left: 4px; font-weight: 500; color: var(--text); background: rgba(255, 255, 255, 0.06); }
.menu-btn { display: none; place-items: center; width: 36px; height: 36px; margin-left: 4px; padding: 0; border: 0; border-radius: 999px; color: var(--text); background: rgba(255, 255, 255, 0.06); cursor: pointer; }
.menu-btn:hover { background: rgba(255, 255, 255, 0.12); }
.menu-btn .i-close, .nav:has(.nav-menu:popover-open) .menu-btn .i-open { display: none; }
.nav:has(.nav-menu:popover-open) .menu-btn .i-close { display: block; }
.nav-menu { display: none; }
.nav-menu:popover-open { display: grid; position: fixed; inset: calc(16px + 48px + 8px + env(safe-area-inset-top)) auto auto 50%; translate: -50% 0; width: min(420px, 100vw - 2 * var(--gutter)); margin: 0; padding: 8px 20px; border-radius: 24px; color: var(--text); pointer-events: auto; }
.nav-menu::backdrop { background: rgba(5, 7, 13, 0.4); }
.nav-menu a { padding: 16px 0; color: var(--text); font: 500 var(--t-md)/1.2 var(--sans); letter-spacing: -0.015em; text-decoration: none; }
.nav-menu a + a { border-top: 1px solid var(--line); }
.nav-menu a:hover { color: var(--accent-2); }

/* ── Hero: flaches Himmelblau, der Name riesig über die ganze Breite, ein dunkler Blob in der
   Farbe der restlichen Seite mit dem Bild darin, und eine Welle, wo die Seite dunkel wird ── */
.hero { position: relative; isolation: isolate; overflow: hidden; padding-top: clamp(104px, 10vw, 136px); background: linear-gradient(var(--sky) calc(100% - 48px), var(--bg) 0); color: var(--sky-ink); text-align: center; }
.hero-inner {
  --hw: min(100vw - 2 * var(--gutter), 1280px);
  /* der Name füllt die Breite: --chars = Zeichen inkl. Leerzeichen und Punkt (setzt new_site.py) */
  --ns: min(calc(var(--hw) / (var(--chars, 13) * 0.585)), calc(var(--hw) / 4.4));
  width: 100%;
  max-width: calc(1280px + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.name { position: relative; z-index: 2; font-size: var(--ns); font-weight: 800; line-height: 0.8; letter-spacing: -0.04em; text-transform: uppercase; color: var(--paper); white-space: nowrap; }
/* die Buchstaben sind höher als die Zeile (line-height 0.8); das Padding hält Ö-, Ä-, Ü-Punkte und
   Akzente im Kasten, sonst schneidet die Animation sie ab und sie ploppen am Ende auf */
.name .l { display: inline-block; padding-top: 0.24em; margin-top: -0.24em; }
.name .dot { color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  /* die Buchstaben steigen nacheinander weich an ihren Platz, der Punkt fällt zuletzt hinein. Nur
     transform und opacity bewegen sich, das läuft auf der Grafikkarte und bleibt flüssig (der
     frühere Pixel-Scan mit clip-path und steps() ruckelte, „die laggt“, 2026-10-17) */
  .name .l { animation: rise 0.9s var(--ease) both; animation-delay: calc(var(--i) * 35ms + 100ms); }
  .name .dot { animation: drop 0.7s var(--ease) both; animation-delay: calc(var(--chars, 13) * 35ms + 160ms); }
  .hero-copy, .hero .actions { animation: fade 1s var(--ease) 0.7s both; }
  .blob { animation: blob-in 1.3s var(--ease) 0.3s both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(0.2em); } }
@keyframes drop { from { opacity: 0; transform: translateY(-0.4em); } }
@keyframes fade { from { opacity: 0; transform: translateY(16px); } }
@keyframes blob-in { from { opacity: 0; transform: translateY(60px) scale(0.94); } }

.hero-stage { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 40px; margin-top: calc(var(--ns) * -0.3); }
.hero-copy { padding-bottom: 56px; text-align: left; }
.kicker { font: 500 0.75rem/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sky-ink); }
.lead { max-width: 15em; margin-top: 12px; font-size: clamp(1.25rem, 0.95rem + 0.9vw, 1.625rem); font-weight: 600; line-height: 1.25; letter-spacing: -0.025em; color: var(--sky-ink); text-wrap: balance; }
.actions { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; padding-bottom: 56px; }
.actions .btn { min-width: 232px; justify-content: space-between; }

/* Knöpfe: Platten mit abgestuften Pixel-Ecken, Mono-Beschriftung und Pixel-Pfeil. Beim Drüberfahren
   wird die Fläche heller und der Pfeil springt einen Schritt (kein Gleiten, kein Glow); gedrückt sinkt
   der Knopf 2 px ein. */
.btn {
  --s: 4px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 52px;
  padding: 0 20px 0 22px;
  border: 0;
  font: 500 0.8125rem/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  clip-path: polygon(0 calc(var(--s) * 2), var(--s) calc(var(--s) * 2), var(--s) var(--s), calc(var(--s) * 2) var(--s), calc(var(--s) * 2) 0,
    calc(100% - var(--s) * 2) 0, calc(100% - var(--s) * 2) var(--s), calc(100% - var(--s)) var(--s), calc(100% - var(--s)) calc(var(--s) * 2), 100% calc(var(--s) * 2),
    100% calc(100% - var(--s) * 2), calc(100% - var(--s)) calc(100% - var(--s) * 2), calc(100% - var(--s)) calc(100% - var(--s)), calc(100% - var(--s) * 2) calc(100% - var(--s)), calc(100% - var(--s) * 2) 100%,
    calc(var(--s) * 2) 100%, calc(var(--s) * 2) calc(100% - var(--s)), var(--s) calc(100% - var(--s)), var(--s) calc(100% - var(--s) * 2), 0 calc(100% - var(--s) * 2));
  box-shadow: inset 0 calc(var(--s) * -1) 0 rgba(0, 0, 0, 0.16);
  transition: background-color 0.2s, color 0.2s;
}
.btn:active { transform: translateY(2px); box-shadow: none; }
.btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.btn-primary { background: #eef2f8; color: #070a12; }
.btn-primary:hover { background: #fff; color: #070a12; }
.btn-ghost { background: rgba(255, 255, 255, 0.08); color: var(--text); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.14); color: var(--text); }
.btn-icon { display: grid; place-items: center; width: 16px; height: 16px; }
.btn-icon svg { display: block; transition: transform 0.2s steps(2, end); }
.btn-primary .btn-icon { color: var(--accent); }
.btn-ghost .btn-icon { color: var(--text-2); }
.btn:hover .btn-icon svg { transform: translateX(4px); }
.btn:hover .btn-icon.is-down svg { transform: translateY(4px); }
.btn:hover .btn-icon.is-out svg { transform: translate(4px, -4px); }
.btn-label { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .btn-icon svg { transition: none; } }
/* die kleinere Platte für Links in den Projektkarten: alle Knöpfe sind Pixel-Platten */
.btn-sm { height: 44px; gap: 12px; padding: 0 16px 0 18px; }
.btn-sm.btn-ghost { background: rgba(255, 255, 255, 0.1); }
.btn-sm.btn-ghost:hover { background: rgba(255, 255, 255, 0.16); }

/* die Knöpfe auf dem Himmel: dunkle Tinte statt hell */
.hero .btn-primary { background: var(--sky-ink); color: #fff; box-shadow: inset 0 calc(var(--s) * -1) 0 rgba(0, 0, 0, 0.45); }
.hero .btn-primary:hover { background: color-mix(in srgb, var(--sky-ink) 80%, #000); color: #fff; }
.hero .btn-primary .btn-icon { color: color-mix(in srgb, var(--accent) 70%, #fff); }
.hero .btn-ghost { background: rgba(255, 255, 255, 0.22); color: var(--sky-ink); box-shadow: inset 0 calc(var(--s) * -1) 0 color-mix(in srgb, var(--sky-ink) 12%, transparent); }
.hero .btn-ghost:hover { background: rgba(255, 255, 255, 0.34); color: var(--sky-ink); }
.hero .btn-ghost .btn-icon { color: var(--sky-ink); }

/* der dunkle Blob: ein Fenster in die restliche Seite, drei Handys darin (fächern beim Scrollen auf) */
.blob { --bw: clamp(300px, 42vw, 600px); position: relative; width: var(--bw); aspect-ratio: 1.18; overflow: hidden; border-radius: 64% 36% 44% 56% / 46% 58% 42% 54%; background: radial-gradient(55% 50% at 50% 38%, rgba(var(--accent-rgb), 0.14), transparent 70%), var(--bg); rotate: -5deg; }
.fan { --p: 0; position: absolute; inset: 0; rotate: 5deg; }
.fan .iphone { position: absolute; left: 50%; }
.fan .fan-c { --w: calc(var(--bw) * 0.33); top: 13%; z-index: 2; translate: -50% calc(var(--p) * -16px); }
.fan .fan-l, .fan .fan-r { --w: calc(var(--bw) * 0.29); top: 21%; filter: brightness(0.7); }
.fan .fan-l { translate: calc(-50% - var(--w) * 0.84 - var(--p) * 16px) 0; rotate: calc(-10deg - var(--p) * 3deg); }
.fan .fan-r { translate: calc(-50% + var(--w) * 0.84 + var(--p) * 16px) 0; rotate: calc(10deg + var(--p) * 3deg); }
/* statt Handys ein einzelnes Foto im Blob (Restaurant, Produkt, Person) */
.blob-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; rotate: 5deg; scale: 1.12; }

/* die Welle, wo der Himmel auf die dunkle Seite trifft; Wörter laufen sie entlang (main.js) */
.wave { display: block; width: 100%; height: 180px; margin-top: -20px; overflow: visible; }
.wave-fill { fill: var(--bg); }
.wave-line { fill: none; }
.wave-text { font: 700 28px var(--sans); letter-spacing: -0.01em; fill: var(--paper); }
.wave-text .sep { fill: var(--accent); }

/* ── Sektionen ── */
.section { padding-top: var(--section); }
.section-head { max-width: 40rem; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.section-head h2 { font-size: var(--t-3xl); line-height: 1.05; letter-spacing: -0.045em; }
/* einzeilig mittig unter der Überschrift, sobald er umbricht linksbündig */
.section-lead { width: fit-content; max-width: 100%; margin: 16px auto 0; font-size: var(--t-lg); line-height: 1.5; letter-spacing: -0.015em; color: var(--text-2); text-align: left; }
.card { position: relative; border-radius: 32px; }
.reveal { opacity: 0; transform: translateY(40px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity 0.9s var(--ease), transform 1s var(--ease); }

/* ── Projektkarten: Text links, das Bild steigt rechts aus der Unterkante ── */
.cards { display: grid; gap: var(--gap); }
.project {
  --tint: var(--accent-rgb);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "text visual" "specs visual";
  grid-template-rows: auto 1fr;
  column-gap: var(--pad);
  padding: var(--pad);
}
/* ein weiches Licht in der eigenen Farbe des Projekts hinter dem Bild */
.project::before { content: ""; position: absolute; inset: 0; background: radial-gradient(45% 50% at 75% 88%, rgba(var(--tint), 0.12), transparent 70%); pointer-events: none; }
.project > * { position: relative; }
.card-text { grid-area: text; }
.card-icon { width: 64px; height: 64px; border-radius: 22.4%; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 12px 24px -10px rgba(0, 0, 0, 0.8); }
/* Platzhalter-Icon: Anfangsbuchstabe auf der Projektfarbe, bis ein echtes Icon da ist */
.card-mark { display: grid; place-items: center; font: 700 1.75rem/1 var(--sans); letter-spacing: -0.04em; color: #fff; background: linear-gradient(160deg, rgba(var(--tint), 1), rgba(var(--tint), 0.45) 70%, #0b0e16); }
.project h3 { display: inline; font-size: var(--t-2xl); line-height: 1.1; letter-spacing: -0.04em; }
.card-icon + h3::before { content: ""; display: block; height: 24px; }
.badge { display: inline-flex; align-items: center; margin-left: 12px; padding: 5px 9px; border-radius: 6px; vertical-align: 0.55em; font: 500 0.75rem/1 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-2); background: rgba(var(--accent-rgb), 0.1); border: 1px solid rgba(var(--accent-rgb), 0.24); white-space: nowrap; }
.card-short { margin-top: 8px; font-size: var(--t-lg); line-height: 1.35; letter-spacing: -0.015em; color: var(--text); }
.card-meta { margin-top: 12px; font: 400 0.8125rem/1.6 var(--mono); letter-spacing: 0.02em; color: var(--text-3); }
.card-desc { margin-top: 24px; max-width: 34em; font-size: var(--t-sm); line-height: 1.7; color: var(--text-2); }
.card-links { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }
.card-specs { grid-area: specs; align-self: start; margin-top: 32px; }
.card-specs div { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.card-specs div:last-child { border-bottom: 1px solid var(--line); }
.card-specs dt { font: 400 0.8125rem/1.8 var(--mono); letter-spacing: 0.02em; color: var(--text-3); }
.card-specs dd { font-size: var(--t-sm); line-height: 1.5; color: var(--text); }
.card-visual { grid-area: visual; align-self: end; justify-self: center; display: flex; justify-content: center; margin-bottom: calc(var(--pad) * -1 - var(--bleed, 120px)); }
.card-visual .iphone { --w: clamp(200px, 23vw, 284px); }

/* breite Bilder: Text und Details nebeneinander, das Fenster darunter */
.project.is-wide { grid-template-areas: "text specs" "visual visual"; grid-template-rows: auto auto; }
.is-wide .card-specs { margin-top: 88px; }
.is-wide .card-visual { --bleed: 72px; width: 100%; margin-top: clamp(40px, 5vw, 56px); }
.is-wide::before { background: radial-gradient(60% 45% at 50% 100%, rgba(var(--tint), 0.22), transparent 70%); }
/* mittig: ein Fenster in der Mitte seiner Seite statt aus der Unterkante */
.project.is-centered .card-visual { align-self: center; margin-bottom: 0; width: 100%; }
.is-centered::before { background: radial-gradient(45% 55% at 75% 50%, rgba(var(--tint), 0.2), transparent 70%); }

/* Handys: echte Screenshots in maßstabsgetreuen Rahmen. Jedes Maß ist ein Anteil der
   Gerätebreite --w, abgenommen vom iPhone Pro und einem Pixel mit Punch-Hole-Kamera. */
.iphone, .pixel {
  --w: clamp(190px, 18vw, 250px);
  --metal: linear-gradient(90deg, #26282b, #5d6066 45%, #8a8d92 55%, #2c2e31);
  position: relative;
  flex: none;
  width: var(--w);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 0 0 0 2px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.7),
    0 50px 80px -38px rgba(0, 0, 0, 0.95),
    0 22px 36px -22px rgba(0, 0, 0, 0.8);
}
.iphone {
  padding: calc(var(--w) * 0.016);
  border-radius: calc(var(--w) * 0.182);
  background: linear-gradient(155deg, #7b7e83 0%, #2d2f33 9%, #4a4d52 30%, #1e2023 55%, #3b3e43 80%, #85888d 100%);
}
.pixel {
  padding: calc(var(--w) * 0.012);
  border-radius: calc(var(--w) * 0.13);
  background: linear-gradient(155deg, #5f6267 0%, #26282b 12%, #3a3d41 40%, #222427 70%, #5a5d62 100%);
}
.screen { position: relative; padding: calc(var(--w) * 0.024); border-radius: calc(var(--w) * 0.166); background: #000; }
.screen img { width: 100%; border-radius: calc(var(--w) * 0.142); }
.pixel .screen { padding: calc(var(--w) * 0.03); border-radius: calc(var(--w) * 0.118); }
.pixel .screen img { border-radius: calc(var(--w) * 0.088); }
.screen::before {
  content: "";
  position: absolute;
  inset: calc(var(--w) * 0.024);
  z-index: 1;
  border-radius: calc(var(--w) * 0.142);
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.03) 26%, transparent 40%);
  pointer-events: none;
}
.pixel .screen::before { inset: calc(var(--w) * 0.03); border-radius: calc(var(--w) * 0.088); }
.screen::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%;
  top: calc(var(--w) * 0.049);
  width: calc(var(--w) * 0.288);
  height: calc(var(--w) * 0.086);
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(circle at 83% 50%, #1d2638 0, #0b0e15 calc(var(--w) * 0.012), #000 calc(var(--w) * 0.02));
}
.pixel .screen::after {
  top: calc(var(--w) * 0.063);
  width: calc(var(--w) * 0.042);
  height: calc(var(--w) * 0.042);
  background: radial-gradient(circle at 40% 38%, #2a3346 0, #05070b 55%, #000);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.iphone::before, .iphone::after, .pixel::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: max(2px, calc(var(--w) * 0.013));
  background: var(--metal);
}
.iphone::before {
  right: 100%;
  border-radius: 2px 0 0 2px;
  -webkit-mask-image: linear-gradient(transparent 17.5%, #000 17.5% 21%, transparent 21% 25.5%, #000 25.5% 31.5%, transparent 31.5% 33.5%, #000 33.5% 39.5%, transparent 39.5%);
  mask-image: linear-gradient(transparent 17.5%, #000 17.5% 21%, transparent 21% 25.5%, #000 25.5% 31.5%, transparent 31.5% 33.5%, #000 33.5% 39.5%, transparent 39.5%);
}
.iphone::after, .pixel::after { left: 100%; border-radius: 0 2px 2px 0; }
.iphone::after {
  -webkit-mask-image: linear-gradient(transparent 26.5%, #000 26.5% 37.5%, transparent 37.5%);
  mask-image: linear-gradient(transparent 26.5%, #000 26.5% 37.5%, transparent 37.5%);
}
.pixel::after {
  -webkit-mask-image: linear-gradient(transparent 22%, #000 22% 29%, transparent 29% 33%, #000 33% 46%, transparent 46%);
  mask-image: linear-gradient(transparent 22%, #000 22% 29%, transparent 29% 33%, #000 33% 46%, transparent 46%);
}
/* iPhone vorne, Android-Version einen Schritt dahinter */
.device-pair { display: flex; align-items: flex-start; }
.device-pair .iphone { z-index: 1; }
.device-pair .pixel { --w: clamp(180px, 20.5vw, 252px); margin: calc(var(--w) * 0.22) 0 0 calc(var(--w) * -0.22); filter: brightness(0.78); }

/* Platzhalter-Bildschirm, bis echte Screenshots (640 px breit, .webp) da sind */
.ph { position: relative; aspect-ratio: 640 / 1391; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 6%; padding: 30% 8% 0; border-radius: calc(var(--w) * 0.142); background: radial-gradient(70% 28% at 50% 18%, rgba(var(--ph, var(--accent-rgb)), 0.38), transparent 70%), linear-gradient(#0e121c, #06080e); }
.ph b { grid-column: 1 / -1; height: calc(var(--w) * 0.2); margin: 0 18% 8%; border-radius: 8px; background: rgba(255, 255, 255, 0.82); }
.ph i { aspect-ratio: 1.1; border-radius: calc(var(--w) * 0.05); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.05); }
.ph i:first-of-type { background: rgba(var(--ph, var(--accent-rgb)), 0.22); }

/* ein Mac-Fenster mit Tabelle (Datenquellen, Preise, Öffnungszeiten …) */
.mac-window { width: 100%; max-width: 480px; margin-inline: auto; border-radius: 14px; overflow: hidden; background: rgba(8, 11, 18, 0.85); border: 1px solid var(--line-2); box-shadow: 0 30px 60px -30px #000; }
.mac-bar { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-bottom: 1px solid var(--line); font-size: var(--t-xs); color: var(--text-3); }
.mac-bar i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.mac-bar span { flex: 1; margin-right: 54px; text-align: center; }
.table { width: 100%; border-collapse: collapse; font-size: var(--t-xs); }
.table caption { caption-side: bottom; text-align: left; padding: 10px 16px 12px; color: var(--text-3); border-top: 1px solid var(--line); }
.table th, .table td { padding: 8px 16px; text-align: left; }
.table thead th { font-weight: 400; color: var(--text-3); border-bottom: 1px solid var(--line); }
.table tbody th { font: 500 var(--t-xs)/1.5 var(--mono); color: var(--accent-2); white-space: nowrap; }
.table tbody td { color: var(--text-2); }
.table tbody tr + tr { border-top: 1px solid var(--line); }

/* ein echtes Programmfenster als Bild */
.window { width: 100%; max-width: 960px; margin-inline: auto; border-radius: 12px; box-shadow: 0 0 0 1px var(--line-2), 0 40px 80px -40px #000; }

/* Webseite: Browserfenster, die iPhone-Ansicht überlappt seine Ecke */
.web-shot { position: relative; width: 100%; max-width: 860px; margin-inline: auto; }
.browser { border-radius: 12px; overflow: hidden; background: var(--bg); box-shadow: 0 0 0 1px var(--line-2), 0 40px 80px -40px #000; }
.browser-bar { position: relative; padding: 9px 64px; font-size: var(--t-xs); line-height: 1.4; color: var(--text-3); text-align: center; border-bottom: 1px solid var(--line); }
.browser-bar::before { content: ""; position: absolute; left: 14px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); box-shadow: 16px 0 rgba(255, 255, 255, 0.14), 32px 0 rgba(255, 255, 255, 0.14); }
.card-visual .web-phone { --w: clamp(110px, 15vw, 176px); position: absolute; right: clamp(-12px, -2vw, -32px); bottom: 24px; }
/* Platzhalter-Webseite im Browser: ein kleiner Hero (Name, Blob, Welle) und zwei Karten */
.ph-web {
  --paper-bar: linear-gradient(rgba(242, 244, 248, 0.92), rgba(242, 244, 248, 0.92));
  --glass-bar: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05));
  aspect-ratio: 1960 / 1225;
  background:
    var(--paper-bar) 50% 14% / 64% 9% no-repeat,
    radial-gradient(closest-side, var(--bg) 96%, transparent) 50% 52% / 30% 42% no-repeat,
    var(--glass-bar) 22% 92% / 34% 14% no-repeat,
    var(--glass-bar) 78% 92% / 34% 14% no-repeat,
    linear-gradient(var(--sky) 66%, var(--bg) 66%);
}
.ph-web.is-phone {
  aspect-ratio: 640 / 1391;
  border-radius: calc(var(--w) * 0.142);
  background:
    var(--paper-bar) 50% 10% / 76% 5% no-repeat,
    radial-gradient(closest-side, var(--bg) 96%, transparent) 50% 28% / 80% 22% no-repeat,
    var(--glass-bar) 50% 62% / 84% 12% no-repeat,
    var(--glass-bar) 50% 80% / 84% 12% no-repeat,
    linear-gradient(var(--sky) 44%, var(--bg) 44%);
}

/* ── Über mich: Aussage links, Fakten rechts ── */
.about { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--pad); padding: var(--pad); }
.about::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(50% 70% at 0% 0%, rgba(var(--accent-rgb), 0.12), transparent 70%); pointer-events: none; }
.about > * { position: relative; }
.big { font-size: var(--t-xl); line-height: 1.35; letter-spacing: -0.025em; color: var(--text); }
.about-text p + p { margin-top: 20px; color: var(--text-2); }
.about .card-specs { grid-area: auto; margin-top: 4px; }

/* ── Arbeitsweise: drei Glaskarten mit Pixel-Icons ── */
.work { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.work .card { padding: 32px; border-radius: 24px; }
.px { display: block; width: 40px; height: 40px; color: var(--accent-2); filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.45)); }
.work h3 { margin-top: 24px; font-size: var(--t-lg); line-height: 1.3; letter-spacing: -0.02em; }
.work p { margin-top: 8px; font-size: var(--t-sm); line-height: 1.65; color: var(--text-2); }

/* ── Fragen ── */
.faq { max-width: 760px; margin-inline: auto; padding: 8px 32px; border-radius: 24px; }
.faq details + details { border-top: 1px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 0;
  font: 500 var(--t-md)/1.4 var(--sans);
  letter-spacing: -0.015em;
  color: var(--text);
  transition: color 0.15s;
}
.faq summary::-webkit-details-marker { display: none; }
/* das Plus aus zwei Balken sitzt genau mittig im Kreis (das Zeichen „+“ tat es nicht) */
.faq summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(currentColor, currentColor) center / 10px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 10px no-repeat, rgba(255, 255, 255, 0.06); color: var(--text-2); transition: transform 0.3s var(--ease), background-color 0.15s, color 0.15s; }
.faq details[open] summary::after { transform: rotate(45deg); background-color: rgba(var(--accent-rgb), 0.18); color: var(--accent-2); }
.faq summary:hover { color: var(--accent-2); }
.faq details p { padding: 0 44px 24px 0; color: var(--text-2); }
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size 0.35s var(--ease), content-visibility 0.35s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }

/* ── Kontakt ── */
.contact-form { max-width: 640px; margin-inline: auto; padding: clamp(24px, 4vw, 40px); }
.contact-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.contact-fields label { display: flex; flex-direction: column; gap: 8px; }
.contact-fields label > span { font-size: var(--t-xs); color: var(--text-2); }
.contact-message { grid-column: 1 / -1; }
.contact-fields input, .contact-fields textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 12px 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.contact-fields textarea { resize: vertical; min-height: 144px; line-height: 1.5; }
.contact-fields textarea::placeholder { color: var(--text-3); }
.contact-fields input:focus, .contact-fields textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.18); }
.contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-send { width: 100%; margin-top: 24px; padding-left: 50px; }
.contact-send .btn-label { margin-inline: auto; }
.contact-send:disabled { opacity: 0.6; cursor: progress; }
.contact-status { margin-top: 12px; min-height: 1.5em; font-size: var(--t-sm); text-align: center; }
.contact-status[data-kind="error"] { color: var(--danger); }
.contact-status[data-kind="ok"] { color: var(--text); font-weight: 500; }

/* ── ASCII-Signatur und Fußzeile ── */
.foot-wrap { padding-top: var(--section); }
.ascii-sign { max-width: 640px; margin-inline: auto; font: 400 var(--as, 9px)/1 var(--mono); letter-spacing: 0; color: color-mix(in srgb, var(--accent-2) 34%, transparent); white-space: pre; overflow: hidden; text-align: center; user-select: none; }
.ascii-sign b { font-weight: inherit; color: var(--accent); }
.foot { margin-top: 40px; padding: 24px 0 calc(32px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: 0.875rem; color: var(--text-3); border-top: 1px solid var(--line); }
.foot a { color: var(--text-2); }
.foot-links { display: flex; gap: 20px; }

/* Tablet */
@media (max-width: 960px) {
  .hero-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "blob blob" "copy actions"; align-items: start; row-gap: 40px; }
  .blob { --bw: min(72vw, 560px); grid-area: blob; justify-self: center; }
  .hero-copy { grid-area: copy; padding-bottom: 0; }
  .hero .actions { grid-area: actions; padding-bottom: 0; }
  .project, .project.is-wide { grid-template-columns: 1fr; grid-template-areas: "text" "specs" "visual"; grid-template-rows: auto; }
  .is-wide .card-specs { margin-top: 32px; }
  .card-visual { margin-top: 48px; }
  .project.is-centered .card-visual { margin-bottom: 0; }
  .project::before { background: radial-gradient(70% 40% at 50% 100%, rgba(var(--tint), 0.22), transparent 70%); }
  .about { grid-template-columns: 1fr; }
  .work { grid-template-columns: 1fr; }
  .nav-links a { padding-inline: 9px; }
}
@media (max-width: 800px) { .nav-links { display: none; } .menu-btn { display: grid; } .brand { margin-right: auto; } .nav-pill { width: 100%; max-width: 420px; } }

/* Handy: ruhig, nichts läuft in Schleife, der Name darf umbrechen */
@media (max-width: 680px) {
  .hero { padding-top: 104px; }
  /* --word = Zeichen des längsten Worts inkl. Punkt (setzt new_site.py) */
  .hero-inner { --ns: min(calc(var(--hw) / (var(--word, 7) * 0.64)), calc(var(--hw) / 3.2)); }
  .name { white-space: normal; line-height: 0.98; }
  .hero-stage { grid-template-columns: 1fr; grid-template-areas: "blob" "copy" "actions"; row-gap: 32px; }
  .blob { --bw: 88vw; }
  .hero-copy { text-align: center; }
  .lead { margin-inline: auto; }
  .hero .actions { align-items: stretch; width: 100%; max-width: 360px; margin-inline: auto; }
  .actions .btn { padding-left: 50px; }
  .actions .btn-label { margin-inline: auto; }
  .wave { height: 120px; margin-top: 16px; }
  .wave-text { font-size: 18px; }
  .card { border-radius: 24px; }
  .card-specs div { grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr); }
  /* in Projektkarten: Label oben, Wert darunter in voller Breite */
  .project .card-specs div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .card-visual .iphone { --w: 58vw; }
  .card-visual .device-pair .iphone { --w: 45vw; }
  .device-pair .pixel { --w: 39vw; }
  .is-wide .card-visual { --bleed: 40px; }
  .card-visual .web-phone { --w: 26vw; right: -8px; bottom: 12px; }
  .browser-bar { padding-inline: 50px; font-size: 0.6875rem; }
  .faq { padding: 4px 20px; }
  .contact-fields { grid-template-columns: 1fr; }
  .ascii-sign { --as: 6px; }
}