/* ============================================================
   RStudios – Werkbank
   Gebürstetes Aluminium als Gehäuse, dunkle Screens, ein Chrom-Badge.
   Bedienelemente liegen flach auf dem Gehäuse: ruhige Flächen, eine
   feine Kontur, keine Verläufe, keine Glanzeffekte. Drei Stufen:
   primär (gefüllt), sekundär (Kontur), Textlink.
   ============================================================ */

:root {
  --alu:        #cfd3d8;   /* Gehäuse */
  --alu-light:  #e4e7eb;   /* Fläche, hell */
  --alu-deep:   #b8bdc4;   /* Fläche, gedrückt / aktiv */
  --graphite:   #1d2025;   /* Text und Screens */
  --graphite-2: #2a2e34;
  --ink-muted:  #4a5058;   /* 5.4:1 auf Alu */
  --ink-faint:  #52585f;   /* 4.8:1 auf Alu, für Beschriftungen */
  --led:        #2fb56b;   /* Status: läuft (3.1:1 auf Alu, nur als Punkt neben Text) */
  --led-amber:  #d9a021;
  --led-off:    #8d939b;

  /* Oberflächen – im Dark Mode unten neu belegt */
  --surface:      #e1e4e8;                 /* Karten, Konsolen, Kontur-Knöpfe */
  --surface-2:    #d8dce1;                 /* gedrückt */
  --line:         rgba(0,0,0,.16);         /* Konturen und Trennlinien */
  --line-strong:  rgba(0,0,0,.3);          /* Kontur von Knöpfen */
  --wash:         rgba(255,255,255,.45);   /* Hover-Aufhellung flacher Elemente */
  --tray:         rgba(0,0,0,.05);         /* leicht abgesetzte Fläche (Hinweiskasten) */
  --top-bg:       rgba(211,215,220,.94);
  --light-a:      rgba(255,255,255,.5);    /* großflächiges Licht oben links */
  --light-b:      rgba(40,46,54,.16);      /* Schatten unten rechts */
  --solid-bg:       #1d2025;
  --solid-bg-hover: #2f343b;
  --solid-bg-active:#0f1114;
  --solid-fg:       #eef0f3;
  --shadow-sm:      0 1px 2px rgba(0,0,0,.08);
  --float-shadow:   0 12px 28px rgba(0,0,0,.18);
  /* Eingelassene Flächen: ins Gehäuse gefräst statt aufgesetzt (Typenschild, Ablaufschiene).
     Hell eloxiert – die Schattenkante oben und die Lichtkante unten machen die Vertiefung,
     nicht die Flächenfarbe. So bleibt der Text darauf kontrastreicher als auf dem Gehäuse. */
  --inset-bg:   rgba(255,255,255,.34);
  --inset-lo:   rgba(0,0,0,.17);        /* Schattenkante oben */
  --inset-hi:   rgba(255,255,255,.75);  /* Lichtkante unten */
  --rivet:      rgba(0,0,0,.26);        /* Schraubenkopf */
  --engrave:    rgba(0,0,0,.09);        /* gefräste Rille */

  --font-display: 'Unbounded', 'Arial Black', sans-serif;
  --font-body:    'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --gutter: clamp(1rem, 5vw, 5.5rem);
  --sec:    clamp(4rem, 8vw, 6.5rem);        /* Abstand zwischen Abschnitten */
  --ease:   cubic-bezier(.22, 1, .36, 1);
  --fast:   .15s;
  --dur:    .3s;
  --slow:   .5s;

  /* Radien: klein für Knöpfe und Chips, groß für Screens und Karten */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  color-scheme: light;
}

/* ---------- Dark Mode: dunkles Graphit, silberne Schrift.
   Gilt bei Systemeinstellung „dunkel“ (solange nicht ausdrücklich „hell“ gewählt) und bei manueller Wahl. ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --alu:        #22262c;
    --alu-light:  #2f343b;
    --alu-deep:   #3a4048;
    --graphite:   #e3e6ea;   /* Text: Silber */
    --graphite-2: #cfd3d8;
    --ink-muted:  #aab1ba;   /* 7.9:1 auf Graphit */
    --ink-faint:  #929aa3;   /* 5.3:1, 4.7:1 auf Flächen */
    --led:        #3fc97a;
    --led-amber:  #e8b23a;
    --led-off:    #7b828b;
    --surface:      #2a2f36;
    --surface-2:    #343a42;
    --line:         rgba(255,255,255,.12);
    --line-strong:  rgba(255,255,255,.26);
    --wash:         rgba(255,255,255,.06);
    --tray:         rgba(255,255,255,.04);
    --top-bg:       rgba(30,34,40,.92);
    --light-a:      rgba(255,255,255,.06);
    --light-b:      rgba(0,0,0,.3);
    --solid-bg:       #dfe3e8;   /* der eine kräftige Knopf wird silbern */
    --solid-bg-hover: #f2f4f6;
    --solid-bg-active:#c9ced5;
    --solid-fg:       #15181c;
    --shadow-sm:      0 1px 2px rgba(0,0,0,.35);
    --float-shadow:   0 12px 28px rgba(0,0,0,.5);
    --inset-bg:   rgba(0,0,0,.26);
    --inset-lo:   rgba(0,0,0,.48);
    --inset-hi:   rgba(255,255,255,.07);
    --rivet:      rgba(255,255,255,.17);
    --engrave:    rgba(255,255,255,.08);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --alu:        #22262c;
  --alu-light:  #2f343b;
  --alu-deep:   #3a4048;
  --graphite:   #e3e6ea;
  --graphite-2: #cfd3d8;
  --ink-muted:  #aab1ba;
  --ink-faint:  #929aa3;
  --led:        #3fc97a;
  --led-amber:  #e8b23a;
  --led-off:    #7b828b;
  --surface:      #2a2f36;
  --surface-2:    #343a42;
  --line:         rgba(255,255,255,.12);
  --line-strong:  rgba(255,255,255,.26);
  --wash:         rgba(255,255,255,.06);
  --tray:         rgba(255,255,255,.04);
  --top-bg:       rgba(30,34,40,.92);
  --light-a:      rgba(255,255,255,.06);
  --light-b:      rgba(0,0,0,.3);
  --solid-bg:       #dfe3e8;
  --solid-bg-hover: #f2f4f6;
  --solid-bg-active:#c9ced5;
  --solid-fg:       #15181c;
  --shadow-sm:      0 1px 2px rgba(0,0,0,.35);
  --float-shadow:   0 12px 28px rgba(0,0,0,.5);
  --inset-bg:   rgba(0,0,0,.26);
  --inset-lo:   rgba(0,0,0,.48);
  --inset-hi:   rgba(255,255,255,.07);
  --rivet:      rgba(255,255,255,.17);
  --engrave:    rgba(255,255,255,.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* Grid- und Flex-Kinder dürfen schmaler werden als ihr Inhalt – sonst schiebt langer Text die Seite breit */
.service > *, .case > *, .console > *, .console__meta > *, .plist__item > *, .contact__inner > *, .hero > * { min-width: 0; }
.result, .stage__action, .plist__summary, .case__benefit, .console__hint { overflow-wrap: anywhere; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--graphite);
  background-color: var(--alu);
  /* Bürstung: 64x3px-Kachel (hell, dunkel, neutral). Bewusst 64 px breit statt 1 px – eine 1 px schmale Kachel
     läuft beim Rastern in einen langsamen Pfad und kostete rund ein Fünftel der Zeichenzeit beim Scrollen */
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAADCAYAAAAjpQkcAAAAGklEQVR42mP8//+/EMMIBiyMjIy/GEbByAUANqoEEn3MMioAAAAASUVORK5CYII=");
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
svg { flex-shrink: 0; }
::selection { background: var(--graphite); color: var(--alu-light); }

:focus-visible { outline: 2px solid var(--graphite); outline-offset: 3px; }
main:focus, section:focus { outline: none; }
main > section { scroll-margin-top: 4.5rem; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Sprunglink: unsichtbar, bis er per Tab den Fokus bekommt */
.skip {
  position: fixed; top: .6rem; left: var(--gutter); z-index: 60;
  padding: .6rem 1rem; border-radius: var(--r-md); font-weight: 600;
  background: var(--graphite); color: var(--alu-light);
  transform: translateY(-200%); opacity: 0;
}
.skip:focus-visible { transform: none; opacity: 1; outline-color: var(--alu-light); outline-offset: -4px; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; }

/* Großflächiges Licht und Mausglanz liegen als feste Ebenen HINTER dem Seiteninhalt (z-index -1).
   Lägen sie bei z-index 0 unter Abschnitten mit z-index 1, müsste der Browser den gesamten Seiteninhalt
   in eine eigene, seitenhohe Compositing-Ebene heben (über 10 Millionen Pixel) – das war die Hauptursache
   für Ruckler beim Scrollen. */
.light {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 8% -10%, var(--light-a), transparent 60%),
    radial-gradient(90% 70% at 100% 100%, var(--light-b), transparent 60%);
}

/* Trennlinie: eine feine Linie, mehr nicht */
:root { --groove: 1px solid var(--line); }
.rule { border-top: var(--groove); }

/* ---------- Platten: ruhige Fläche mit feiner Kontur (Typenschild, Projektkarten, Konsolen) ---------- */
.plate {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

/* ---------- Abschnitte langsam einblenden (einmalig, 16 px, 500 ms).
   Ohne JS und bei „Bewegung reduzieren“ ist alles sofort da. ---------- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Knöpfe: drei Stufen ----------
   .btn--solid  primäre Aktion (gefüllt, eine pro Bereich)
   .btn--plate  sekundäre Aktion (Kontur auf der Fläche)
   .link-arrow  Textlink mit Pfeil
   Zustände: Hover hellt bzw. dunkelt die Fläche, Aktiv geht eine Stufe weiter, Fokus zeigt den Ring. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: .65rem 1.15rem; border: 1px solid transparent; border-radius: var(--r-md);
  font-weight: 600; font-size: .95rem; line-height: 1.2; text-align: center;
  cursor: pointer; white-space: nowrap;
  transition: background var(--fast), color var(--fast), border-color var(--fast);
}
.btn--sm { min-height: 38px; padding: .45rem .9rem; font-size: .88rem; }
.btn--lg { min-height: 50px; padding: .8rem 1.5rem; font-size: 1rem; }
.btn--icon { padding-left: .8rem; padding-right: .8rem; }
.btn--solid { background: var(--solid-bg); color: var(--solid-fg); border-color: var(--solid-bg); }
.btn--solid:hover { background: var(--solid-bg-hover); border-color: var(--solid-bg-hover); }
.btn--solid:active { background: var(--solid-bg-active); border-color: var(--solid-bg-active); }
.btn--plate { background: var(--surface); color: var(--graphite); border-color: var(--line-strong); }
.btn--plate:hover { background: var(--alu-light); }
.btn--plate:active { background: var(--surface-2); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn svg { width: 1.05em; height: 1.05em; }
/* Auf schmalen Bildschirmen dürfen lange Beschriftungen umbrechen statt die Seite zu verbreitern */
@media (max-width: 560px) { .btn { white-space: normal; } }

/* Textlink mit Pfeil */
.link-arrow {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: 0 .1rem;
  border: 0; background: none; cursor: pointer; font-weight: 600; font-size: .95rem; color: var(--ink-muted);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .2em;
  transition: color var(--fast), text-decoration-color var(--fast);
}
.link-arrow:hover { color: var(--graphite); text-decoration-color: currentColor; }
.link-arrow svg { width: 1em; height: 1em; }

/* Werkzeug-Knöpfe: Sprache, Design, Musik – flach, ein Symbol, Hover hellt auf, aktiv (Musik läuft) ist gefüllt */
.tool, .theme, .lang__btn {
  height: 36px; min-width: 36px; padding: 0 .55rem; border: 0; border-radius: var(--r-md); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  color: var(--ink-muted); background: transparent;
  transition: background var(--fast), color var(--fast);
}
.tool:hover, .theme:hover, .lang__btn:hover { color: var(--graphite); background: var(--wash); }
.tool:active, .theme:active, .lang__btn:active { background: var(--alu-deep); }
.tool[aria-pressed="true"], .lang__btn[aria-expanded="true"] { color: var(--graphite); background: var(--alu-deep); }
.lang__btn { font: 600 .82rem/1 var(--font-body); }
.theme .ic-moon { display: none; }
.is-dark .theme .ic-sun { display: none; }
.is-dark .theme .ic-moon { display: block; }

/* Status-Zeile: Punkt plus Text, normale Schreibweise */
.status {
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.1rem;
  font-size: .9rem; font-weight: 500; color: var(--ink-muted);
}
.led { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--led); vertical-align: middle; flex-shrink: 0; }
.led--amber { background: var(--led-amber); }
.led--off { background: var(--led-off); }

/* ---------- Kopfzeile ---------- */
.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 1rem;
  padding: .75rem var(--gutter);
  transition: background .35s, box-shadow .35s;
}
.top.is-scrolled {
  background: var(--top-bg);
  box-shadow: 0 1px 0 var(--line);
}
.brand { display: flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-weight: 600; font-size: 1rem; min-height: 44px; }
.brand img { width: 36px; height: auto; }

.top__nav { display: flex; gap: .2rem; }
.top__nav a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 .85rem; border-radius: var(--r-md); font-weight: 500; font-size: .95rem; color: var(--ink-muted);
  transition: color var(--fast), background var(--fast);
}
.top__nav a:hover { color: var(--graphite); background: var(--wash); }
.top__nav a.is-active { color: var(--graphite); background: var(--alu-deep); }

.top__right { display: flex; justify-content: flex-end; align-items: center; gap: .7rem; }

/* Werkzeuggruppe: Sprache, Design, Musik nebeneinander, ohne eigenen Rahmen */
.tools { display: flex; align-items: center; gap: 2px; }
.lang { position: relative; }

/* Musik: ein Knopf; läuft Musik, ist er gefüllt und zeigt Pause. Titel nur beim Abspielen und nur auf breiten Bildschirmen. */
.deck { display: flex; align-items: center; }
.deck__btn .ic-pause { display: none; }
.deck.is-playing .deck__btn .ic-play { display: none; }
.deck.is-playing .deck__btn .ic-pause { display: block; }
.deck__track { display: none; font-size: .8rem; color: var(--ink-faint); max-width: 140px; padding-inline: .4rem .5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1200px) { .deck.is-playing .deck__track { display: block; } }

.burger { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; flex-direction: column; justify-content: center; gap: 6px; align-items: center; border-radius: var(--r-md); }
.burger:hover { background: var(--wash); }
.burger span { width: 22px; height: 2px; background: var(--graphite); transition: transform var(--dur) var(--ease); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* Mobiles Menü: Links oben, Zusatzfunktionen unten */
.drawer {
  position: fixed; inset: 0; z-index: 40; background: var(--alu);
  display: none; flex-direction: column; justify-content: center; align-items: center; gap: 2.5rem;
  padding: 5rem var(--gutter) 2rem;
  transform: translateY(-102%); visibility: hidden;
  transition: transform var(--slow) var(--ease), visibility 0s linear var(--slow);
}
.drawer.is-open { transform: none; visibility: visible; transition-delay: 0s; }
.drawer__links { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.drawer__links a { display: inline-flex; align-items: center; min-height: 52px; font-family: var(--font-display); font-size: 1.6rem; padding: 0 1.2rem; border-radius: var(--r-md); }
.drawer__links a:focus-visible { outline-offset: 0; }
.drawer__tools { display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.drawer__label { font-size: .9rem; color: var(--ink-faint); }
.drawer .tools { gap: .5rem; }
.drawer .tool, .drawer .theme, .drawer .lang__btn { height: 48px; min-width: 48px; font-size: .9rem; border: 1px solid var(--line-strong); background: var(--surface); }
.drawer .tool svg, .drawer .theme svg { width: 20px; height: 20px; }

/* ---------- Abschnitte ---------- */
main > section { padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---------- Start ---------- */
.hero {
  min-height: 100svh;
  display: grid; grid-template-columns: 1.05fr .95fr; grid-template-rows: 1fr auto;
  align-items: center; column-gap: clamp(2rem, 5vw, 6rem);
  padding-top: 6.25rem; padding-bottom: 2rem;
  position: relative;
}
.hero__copy { max-width: 640px; }
.hero h1 { font-size: clamp(2.1rem, 4.7vw, 4.2rem); line-height: 1.04; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
/* Zeilen bewusst gruppiert: die Sinneinheiten „Wir bauen“, „die Technik“, „hinter deiner“, „Community.“
   brechen nie innerhalb, nur zwischen sich – so entstehen je nach Breite zwei, drei oder vier saubere Zeilen */
.hero__l { display: inline-block; }
.hero__lead { margin-top: 1.4rem; max-width: 46ch; color: var(--ink-muted); font-size: clamp(1.05rem, 1.4vw, 1.2rem); text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

/* Badge: das Bild überbrückt die kurze Initialisierung, dann blendet die 3D-Münze ein. */
.hero__badge { position: relative; height: min(66svh, 520px); display: grid; place-items: center; }
.hero__badge canvas { width: 100%; height: 100%; display: block; position: absolute; inset: 0; z-index: 2; touch-action: pan-y; opacity: 0; transition: opacity .6s ease; max-width: 100%; }
.hero__badge.has-3d canvas { opacity: 1; }
/* Der Knopf ist nur während der Initialisierung bedienbar; danach übernimmt das Canvas. */
.hero__badge-trigger { display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: default; position: relative; z-index: 1; border-radius: var(--r-lg); }
.hero__badge.can-3d .hero__badge-trigger { cursor: pointer; }
.hero__badge-trigger:focus-visible { outline-offset: -2px; }
.hero__badge.has-3d .hero__badge-trigger { pointer-events: none; }
.hero__badge-fallback { display: block; width: 60%; max-width: 320px; height: auto; max-height: 100%; object-fit: contain; filter: drop-shadow(0 14px 22px rgba(0,0,0,.28)); transition: opacity .6s ease, transform .6s var(--ease); position: relative; }
.hero__badge.can-3d .hero__badge-trigger:hover .hero__badge-fallback { transform: translateY(-3px); }
.hero__badge.has-3d .hero__badge-fallback { opacity: 0; }
.hero__badge-shadow {
  position: absolute; left: 50%; bottom: 8%; width: 48%; height: 12%;
  transform: translateX(-50%); border-radius: 50%; z-index: 0;
  background: radial-gradient(ellipse at center, rgba(20,24,30,.4), rgba(20,24,30,.14) 45%, transparent 70%);
}
.hero__badge-hint { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); font-size: .8rem; color: var(--ink-faint); white-space: nowrap; opacity: 0; transition: opacity .6s ease; }
.hero__badge.has-3d .hero__badge-hint { opacity: 1; }

/* ---------- Typenschild ----------
   Kein Kennzahlen-Band über die volle Breite, sondern ein Gegenstand: ins Gehäuse eingelassen,
   an vier Ecken verschraubt, links unter dem Text. Gelesen wird es wie an einer Maschine –
   Feldbezeichnung links, Wert rechts, dazwischen eine gefräste Rille. */
.nameplate {
  grid-column: 1 / -1; align-self: end; justify-self: start;
  width: fit-content; max-width: 100%;
  margin-top: 1.75rem; padding: .9rem 1.5rem;
  border-radius: var(--r-md);
  background-color: var(--inset-bg);
  /* vier Schraubenköpfe in den Ecken */
  background-image:
    radial-gradient(circle at center, var(--rivet) 0 1.7px, transparent 2.2px),
    radial-gradient(circle at center, var(--rivet) 0 1.7px, transparent 2.2px),
    radial-gradient(circle at center, var(--rivet) 0 1.7px, transparent 2.2px),
    radial-gradient(circle at center, var(--rivet) 0 1.7px, transparent 2.2px);
  background-size: 5px 5px;
  background-position: left .5rem top .5rem, right .5rem top .5rem, left .5rem bottom .5rem, right .5rem bottom .5rem;
  background-repeat: no-repeat;
  box-shadow: inset 0 1px 0 var(--inset-lo), inset 0 -1px 0 var(--inset-hi);
  display: grid; grid-template-columns: auto; column-gap: 2.6rem;
}
.nameplate__row { display: grid; grid-template-columns: 5.8rem minmax(0, 1fr); align-items: baseline; gap: .1rem .9rem; padding: .42rem 0; }
.nameplate__row + .nameplate__row { border-top: 1px solid var(--engrave); }
.nameplate dt { font-size: .82rem; line-height: 1.45; color: var(--ink-faint); }
/* Wert und Zusatz stehen in einer Zeile; der Abstand kommt aus dem gap, nicht aus einem Leerzeichen
   im Markup – so lässt er sich für Sprachen ohne Wortabstand (unten) auf null setzen */
.nameplate dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .42em; font-size: .9rem; line-height: 1.45; color: var(--ink-muted); }
.nameplate dd span { min-width: 0; text-wrap: pretty; }
.nameplate dd b { font-family: var(--font-display); font-weight: 600; font-size: 1rem; white-space: nowrap; letter-spacing: -.01em; color: var(--graphite); }
/* Breiter Schreibtisch: zwei Spalten, die Rille läuft nur zwischen den beiden Reihen */
@media (min-width: 1180px) {
  .nameplate { grid-template-columns: auto auto; }
  .nameplate__row:nth-child(2) { border-top: 0; }
}

/* ---------- Leistungen ---------- */
.services { padding-top: var(--sec); padding-bottom: 2rem; position: relative; }
.services__head, .work__head { max-width: 62ch; margin-bottom: 2.5rem; }
.services__head h2, .work__head h2, .studio h2 { font-size: clamp(1.7rem, 3.3vw, 2.6rem); line-height: 1.12; text-wrap: balance; }
.services__head p, .work__head p { margin-top: .7rem; color: var(--ink-muted); text-wrap: pretty; }

.service {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center; padding: 3rem 0;
  border-top: var(--groove);
}
.service--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.service--flip .service__text { order: 2; }
.service__text h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-bottom: .8rem; }
.service__text > p { color: var(--ink-muted); max-width: 48ch; text-wrap: pretty; }
.perks { list-style: none; margin-top: 1.2rem; display: grid; gap: .6rem; max-width: 46ch; }
.perks li { display: grid; grid-template-columns: 24px 1fr; gap: .6rem; align-items: start; font-size: .98rem; }
.perks svg { width: 24px; height: 24px; padding: 3px; color: var(--graphite); }
.service__stack { margin-top: 1.3rem; font-size: .88rem; color: var(--ink-faint); }
.service__stack span:first-child::after { content: ': '; }
.service__stack span:last-child { font-family: var(--font-mono); font-size: .8rem; }

/* ---------- Konsolen: ein Metallrahmen für alle drei Vorschauen ----------
   Oben die Bedienleiste (Segmentwahl links, Etikett und Aktionen rechts), darunter die dunkle Fläche,
   darunter je nach Konsole Beschriftung, Vorschaubilder oder Projektangaben. */
.console { padding: .6rem; border-radius: var(--r-lg); display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; min-width: 0; }
.console:focus { outline: none; }
.console:focus-visible { outline: 2px solid var(--graphite); outline-offset: 4px; }
.console__bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .1rem .1rem 0; min-height: 40px; min-width: 0; }
/* Etikett der Konsole: schlichter Text („Live-Demo“, „Bot-Ergebnis“) */
.console__tag { margin-left: auto; font-size: .85rem; color: var(--ink-faint); white-space: nowrap; }
.console__action {
  width: 36px; height: 36px; border: 0; border-radius: var(--r-md); cursor: pointer; display: grid; place-items: center;
  color: var(--ink-muted); background: transparent; transition: background var(--fast), color var(--fast);
}
.console__action:hover { color: var(--graphite); background: var(--wash); }
.console__action:active { background: var(--alu-deep); }

/* Segmentwahl (Tabs): eine Reihe mit Kontur, der aktive Eintrag ist gefüllt */
.seg {
  display: flex; gap: 2px; padding: 3px; border-radius: var(--r-md); min-width: 0; max-width: 100%;
  border: 1px solid var(--line-strong);
  overflow-x: auto; scrollbar-width: none;
}
.seg::-webkit-scrollbar { display: none; }
.seg button {
  flex-shrink: 0; min-height: 34px; padding: 0 .8rem; border: 0; border-radius: var(--r-sm); cursor: pointer;
  font: 600 .86rem/1 var(--font-body); color: var(--ink-muted); background: transparent; white-space: nowrap;
  transition: background var(--fast), color var(--fast);
}
.seg button:hover { color: var(--graphite); background: var(--wash); }
.seg button:active { background: var(--alu-deep); }
.seg button.is-active { color: var(--solid-fg); background: var(--solid-bg); }
.seg button:focus-visible { outline: 2px solid var(--graphite); outline-offset: -2px; }
.seg button.is-active:focus-visible { outline-color: var(--solid-fg); }
.seg--icons button { padding: 0; width: 36px; display: grid; place-items: center; }

/* Die dunkle Fläche */
.console__screen {
  position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-md); overflow: hidden; width: 100%;
  background: #14161a; color: #dbdee1; box-shadow: 0 0 0 1px rgba(0,0,0,.35);
}
.console__screen :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.console__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem .8rem; background: #1b1e24; border-top: 1px solid rgba(255,255,255,.06); }
.console__hint { font-size: .82rem; color: #9aa0a8; text-wrap: pretty; }
.console__meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .3rem .4rem .2rem; }
.console__meta b { font-family: var(--font-display); font-size: .95rem; font-weight: 600; }
/* Technische Angabe (Adresse, Ressourcenname): Monospace als schlichter Text */
.console__meta code, .gallery__caption code { font: 500 .8rem/1 var(--font-mono); color: var(--ink-faint); margin-left: .5rem; vertical-align: baseline; }
.console__meta p { margin-top: .25rem; font-size: .9rem; color: var(--ink-muted); text-wrap: pretty; }

/* --- Konsole 1: Bot-Ergebnis (ruhig) und Demo-Dialog --- */
.console__screen--result { aspect-ratio: auto; min-height: 18rem; padding: 1rem; display: grid; align-content: start; }
.result-wrap { max-width: 44rem; }
.result-card { margin: 0; display: grid; gap: .5rem; }
.result-card img { width: 100%; height: auto; max-width: 44rem; border-radius: 8px; display: block; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.result-card figcaption { font-size: .8rem; color: #9aa0a8; }
.console__meta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; flex-shrink: 0; }
.gallery__title { display: flex; align-items: center; gap: .4rem; min-width: 0; flex: 1; }
.gallery__title b { font-family: var(--font-display); font-size: .92rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gallery__text { padding: 0 .4rem; font-size: .9rem; color: var(--ink-muted); text-wrap: pretty; }
.demo { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 1rem; border: 0; background: rgba(8,10,14,.9); overflow: auto; }
.demo[open] { display: grid; place-items: center; animation: lbIn .25s ease-out; }
.demo::backdrop { background: transparent; }
.demo__box { width: min(100%, 52rem); padding: .6rem; display: grid; gap: .6rem; grid-template-columns: minmax(0, 1fr); box-shadow: var(--float-shadow); }
.demo .console__screen--demo { min-height: 24rem; }

.console__screen--demo { display: grid; grid-template-rows: auto 1fr auto; aspect-ratio: auto; min-height: 30rem; max-height: calc(100dvh - 8rem); }
.flow { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; padding: .7rem 1rem; background: #1b1e24; border-bottom: 1px solid rgba(0,0,0,.35); font-size: .82rem; font-weight: 500; color: #6f7680; }
.flow__step { display: flex; align-items: center; gap: .45rem; transition: color var(--dur); }
.flow__step i { width: 8px; height: 8px; border-radius: 50%; background: #3a3f47; transition: background var(--dur); }
.flow__step.is-done { color: #b5bac1; }
.flow__step.is-done i { background: #9aa0a8; }
.flow__step.is-current { color: #f2f3f5; }
.flow__step.is-current i { background: var(--led); }
.stage { position: relative; padding: 1rem 1.1rem; overflow-y: auto; min-height: 0; max-height: 30rem; scrollbar-width: thin; scrollbar-color: #2b2d31 transparent; display: grid; align-content: start; gap: .8rem; }
.stage__action { display: inline-flex; align-items: center; gap: .6rem; max-width: 100%; padding: .55rem .8rem; border-radius: 8px; background: #22252b; border: 1px solid #33373f; color: #dbdee1; font-size: .82rem; }
.stage__action code { font: 500 .78rem/1.3 var(--font-mono); color: #f2f3f5; background: #15181c; padding: .15rem .4rem; border-radius: 4px; }
.stage__action small { color: #9aa0a8; }
.stage__loading { display: grid; gap: .6rem; padding: .9rem 1rem; border-radius: 8px; background: #1b1e24; border: 1px solid #2b2f36; }
.stage__loading > span { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: #9aa0a8; }
.stage__loading > span::before { content: ''; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #3a3f47; border-top-color: #dbdee1; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.stage__loading i { display: block; height: 10px; border-radius: 4px; background: linear-gradient(90deg, #262a31 0%, #333841 50%, #262a31 100%); background-size: 200% 100%; animation: shimmer 1.1s linear infinite; }
.stage__loading i:nth-child(3) { width: 70%; } .stage__loading i:nth-child(4) { width: 45%; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* Ergebnis: eine große, ruhige Karte statt Chat-Dekoration */
.result { border-radius: 10px; background: #1e2127; border: 1px solid #2b2f36; border-left: 4px solid #9aa0a8; padding: .9rem 1rem 1rem; display: grid; gap: .55rem; }
.result--green { border-left-color: var(--led); }
.result--grey { border-left-color: #6f7680; }
.result--val { border-left-color: #b489c4; }
.result--long { border-left-color: #1fbf75; }
.result__from { display: flex; align-items: center; gap: .45rem; font-size: .74rem; color: #9aa0a8; }
.result__from b { color: #f2f3f5; font-weight: 600; }
.result__from em { font-style: normal; background: #5865f2; color: #fff; font-size: .58rem; font-weight: 700; padding: .08rem .3rem; border-radius: 3px; letter-spacing: .04em; }
.result__title { color: #f2f3f5; font-weight: 700; font-size: 1rem; }
.result p { color: #dbdee1; font-size: .86rem; }
.result__fields { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem .9rem; }
.result__field { min-width: 0; }
.result__field > b { display: block; color: #f2f3f5; font-size: .76rem; font-weight: 600; margin-bottom: .15rem; }
.result__field p { white-space: pre-line; font-size: .82rem; }
.result__field--wide { grid-column: 1 / -1; }
.result__foot { color: #9aa0a8; font-size: .72rem; }
.result__btns { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .2rem; }
.result__btns button, .result__btns span { background: #4e5058; color: #fff; padding: .45rem .7rem; min-height: 34px; border-radius: 4px; font: 500 .76rem var(--font-body); border: 0; }
.result__btns button { cursor: pointer; transition: background var(--fast), transform var(--fast); }
.result__btns button:hover { background: #6d6f78; }
.result__btns button:active { transform: translateY(1px); }
.result__btns .is-red { background: #da373c; }
.result__btns .is-grey { opacity: .55; }
.dc__bar { font-family: var(--font-mono); font-size: .74rem; background: #15181c; padding: .05rem .3rem; border-radius: 3px; }
/* Components-V2-Container der RealCity-Helfer: Banner oben, darunter Zitatzeilen wie in Discord */
.result--status { border-left-color: #b8bdc4; }
.result--frak   { border-left-color: #8d939b; }
.result--alert  { border-left-color: #b03a3a; }
.result__banner { width: 100%; height: auto; border-radius: 6px; display: block; }
.result__quote { display: grid; gap: .18rem; border-left: 4px solid #4e5058; padding-left: .7rem; }
.result__quote p { font-size: .82rem; }
.result__code { background: #15181c; border-radius: 4px; padding: .5rem .6rem; font: 500 .76rem/1.5 var(--font-mono); color: #dbdee1; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Aufbau: erst die Aktion, dann das Ergebnis mit gestaffelten Feldern */
.stage > * { animation: stageIn .35s var(--ease) both; }
.result > * { animation: stageIn .3s var(--ease) both; }
.result > :nth-child(2) { animation-delay: .05s; } .result > :nth-child(3) { animation-delay: .1s; } .result > :nth-child(4) { animation-delay: .15s; } .result > :nth-child(5) { animation-delay: .2s; } .result > :nth-child(6) { animation-delay: .25s; } .result > :nth-child(n+7) { animation-delay: .3s; }
@keyframes stageIn { from { opacity: 0; transform: translateY(8px); } }

/* --- Konsole 2: Galerie --- */
.gallery__main { display: block; padding: 0; border: 0; cursor: zoom-in; }
.gallery__main img { width: 100%; height: 100%; object-fit: contain; display: block; background: #14161a; transition: opacity var(--dur) ease; }
.gallery__main img.is-swapping { opacity: 0; }
.gallery__main:focus-visible { outline: 2px solid var(--graphite); outline-offset: 3px; }
.gallery__caption { padding: .1rem .4rem 0; }
.gallery__caption b { font-family: var(--font-display); font-size: .95rem; font-weight: 600; }
.gallery__caption p { margin-top: .25rem; font-size: .9rem; color: var(--ink-muted); text-wrap: pretty; }
.thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .45rem; padding: 0 .1rem .1rem; }
.thumbs button {
  padding: 0; border: 0; background: transparent; cursor: pointer; text-align: left; border-radius: 8px; color: var(--ink-muted);
  display: grid; gap: .35rem; transition: color var(--fast);
}
.thumbs img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; border-radius: var(--r-sm); box-shadow: 0 0 0 1px var(--line); opacity: .75; transition: opacity var(--fast), box-shadow var(--fast); }
.thumbs span { font-size: .8rem; line-height: 1.3; font-weight: 500; padding: 0 .1rem; }
.thumbs button:hover img { opacity: 1; }
.thumbs button:hover { color: var(--graphite); }
.thumbs button.is-active { color: var(--graphite); }
.thumbs button.is-active img { opacity: 1; box-shadow: 0 0 0 2px var(--graphite); }
.thumbs button:focus-visible { outline: none; }
.thumbs button:focus-visible img { box-shadow: 0 0 0 2px var(--graphite), 0 0 0 4px var(--alu-light); }

/* --- Konsole 2: Script-Oberflächen live --- */
.nui { background: #101216; aspect-ratio: 4 / 3; display: grid; place-items: stretch; }
.nui__frame { position: absolute; inset: 0; overflow: hidden; }
.nui__frame.is-parked, .site__frame.is-parked { display: none; }   /* außerhalb des Bildes: keine Bildwiederholungen im Iframe */
.nui__frame iframe { width: 100%; height: 100%; border: 0; display: block; background: transparent; transform-origin: 0 0; opacity: 0; transition: opacity var(--dur) ease; }
.nui__frame iframe.is-loaded { opacity: 1; }

/* --- Konsole 3: Websites live --- */
.site { display: grid; place-items: stretch; background: #0f1114; }
.site__shot { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #14161a; cursor: zoom-in; }
.site__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.site__shot:focus-visible { outline: 2px solid var(--graphite); outline-offset: 3px; }
.site.is-live.is-phone .site__frame { left: 50%; right: auto; width: 390px; transform: translateX(-50%); border-radius: 14px; border: 3px solid #2b2e35; top: .8rem; bottom: .8rem; }
.site.is-live.is-desktop .site__frame { inset: 0; }
.site__frame { position: absolute; inset: 0; background: #fff; overflow: hidden; transition: left var(--slow) var(--ease), right var(--slow) var(--ease), border-radius var(--slow) var(--ease); }
.site__frame iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; opacity: 0; transition: opacity var(--dur) ease; }
.site__frame iframe.is-loaded { opacity: 1; }
/* Hinweis, wenn die Vorschau nicht lädt: Leiste unter dem Ersatzbild mit Link zum Öffnen; ohne Bild füllt er die Fläche */
.site__note { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .3rem 1rem; padding: .8rem 1rem; text-align: center; color: #dbdee1; font-size: .9rem; background: rgba(20,22,26,.92); border-top: 1px solid rgba(255,255,255,.1); }
.site__note--full { inset: 0; flex-direction: column; border: 0; background: #14161a; color: #9aa0a8; }
.site__note a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; min-height: 44px; display: inline-flex; align-items: center; }
.site__note a:hover { text-decoration-thickness: 2px; }
.site__loading {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .7rem;
  color: #eef0f3; font-size: .85rem; background-color: #14161a; background-size: cover; background-position: center top;
  pointer-events: none; transition: opacity var(--dur);
}
.site__loading.is-hidden { opacity: 0; }
.site__loading::before { content: ''; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #7e858f; border-top-color: #eef0f3; animation: spin .8s linear infinite; }
.site__loading span { display: block; padding: .3rem .6rem; border-radius: var(--r-sm); background: rgba(15,17,20,.78); text-align: center; }

/* ---------- Womit wir arbeiten ----------
   Eine Werkstattliste: Zeichen, Name, ein gefräster Balken, rechts die Zahl. Der Balken misst den
   Anteil am meistgenutzten Eintrag – er behauptet kein Können, sondern zeigt Gewicht. */
.tech { padding-top: var(--sec); padding-bottom: 2rem; position: relative; }
.tech__intro { max-width: 62ch; margin-bottom: 2.5rem; }
.tech__intro h2 { font-size: clamp(1.7rem, 3.3vw, 2.6rem); line-height: 1.12; text-wrap: balance; }
.tech__intro p { margin-top: .7rem; color: var(--ink-muted); text-wrap: pretty; }
.tech__groups { display: grid; grid-template-columns: 1fr; gap: 2.2rem 3.5rem; }
@media (min-width: 780px) { .tech__groups { grid-template-columns: 1fr 1fr; } }
.tech__head { font-family: var(--font-body); font-size: .92rem; font-weight: 600; color: var(--ink-muted); padding-bottom: .5rem; border-bottom: var(--groove); }
.tech__list { list-style: none; }
.tech__item {
  display: grid; grid-template-columns: auto minmax(6rem, auto) minmax(2rem, 1fr) auto;
  align-items: center; gap: .75rem; padding: .6rem 0;
}
.tech__item + .tech__item { border-top: 1px solid var(--engrave); }
.tech__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--inset-bg); box-shadow: inset 0 1px 0 var(--inset-lo), inset 0 -1px 0 var(--inset-hi); color: var(--graphite); }
.tech__name { font-weight: 500; font-size: .95rem; min-width: 0; overflow-wrap: anywhere; }
/* Der Balken liegt in einer Rille und ist gefüllt, soweit die Technik trägt */
.tech__bar { height: 4px; border-radius: 2px; background: var(--engrave); overflow: hidden; }
.tech__bar i { display: block; height: 100%; background: var(--ink-faint); border-radius: 2px; }
.tech__n { font-size: .82rem; color: var(--ink-faint); white-space: nowrap; }

/* ---------- Projekte ---------- */
.work { padding-top: var(--sec); padding-bottom: var(--sec); position: relative; }
.cases { display: grid; gap: 1.5rem; }
.case {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1rem, 2.5vw, 2.5rem);
  padding: 1rem;
}
.case__media { position: relative; }
.case__shot {
  display: block; width: 100%; aspect-ratio: 16 / 10; padding: 0; border: 0; border-radius: var(--r-md); overflow: hidden;
  background: #14161a; color: #dbe0e8; box-shadow: 0 0 0 1px rgba(0,0,0,.35); cursor: zoom-in; position: relative;
}
.case__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: filter var(--dur); }
.case__shot:hover img { filter: brightness(1.05); }
.case__shot:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
/* Hinweis auf die Großansicht, unten rechts im Bild */
.case__shot-hint {
  position: absolute; right: .7rem; bottom: .7rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .65rem; border-radius: var(--r-sm);
  background: rgba(0,0,0,.7); color: #fff; font: 500 .8rem/1 var(--font-body);
}
.case__shot--demo { cursor: pointer; display: grid; place-items: center; background: #313338; }
.case__demo { display: grid; justify-items: center; gap: .6rem; padding: 2rem; text-align: center; max-width: 34ch; color: #dbdee1; font-size: .92rem; }
.case__demo svg { color: #5865f2; margin-bottom: .2rem; }
.case__demo b { color: #f2f3f5; font-size: 1rem; text-wrap: balance; }
.case__demo > span:not(.btn) { color: #b5bac1; }
.case__body { display: flex; flex-direction: column; padding: .6rem 1rem .6rem 0; min-width: 0; }
.case__kind { display: flex; flex-wrap: wrap; gap: .1rem 1.4rem; font-size: .88rem; color: var(--ink-faint); margin-bottom: .5rem; }
.case__body h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
/* Stand rechts in der Kopfzeile, wie auf einem Laufzettel */
.case__state { margin-inline-start: auto; display: inline-flex; align-items: center; gap: .1rem .5rem; flex-wrap: wrap; }
.case__state em { font-style: normal; color: var(--ink-faint); }
/* Technik als Chips: kurze Marken, nebeneinander, statt einer Textzeile */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin-top: 1.1rem; }
.chips li {
  font: 500 .76rem/1 var(--font-mono); color: var(--ink-muted);
  padding: .38rem .55rem; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--inset-bg);
}
.case__benefit { margin-top: .7rem; color: var(--ink-muted); text-wrap: pretty; }
.case__facts { margin-top: 1.1rem; display: grid; font-size: .9rem; }
.case__facts div { display: grid; grid-template-columns: 7.5rem 1fr; gap: .6rem; padding: .38rem 0; }
.case__facts div + div { border-top: 1px solid var(--engrave); }
.case__facts dt { color: var(--ink-faint); }
.case__facts dd { font-weight: 500; }
.case__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin-top: auto; padding-top: 1.4rem; }

/* Weitere ausgewählte Arbeiten: kleiner, zu zweit nebeneinander, ohne Screenshot */
.cases__small { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 820px) { .cases__small { grid-template-columns: 1fr 1fr; } }
.case--small { grid-template-columns: minmax(0, 1fr); padding: 1.1rem 1.25rem; }
.case--small .case__body { padding: 0; }
.case--small .case__body h3 { font-size: 1.25rem; }
.case--small .case__benefit { margin-top: .5rem; font-size: .95rem; }
.case--small .chips { margin-top: .9rem; }
.case--small .case__actions { padding-top: 1rem; }

/* Projektgruppen: in Entwicklung, live & betreut, Archiv */
.work__groups { margin-top: 2.5rem; display: grid; gap: 2.5rem; }
.pgroup__title { display: flex; align-items: baseline; gap: .4rem; font-family: var(--font-body); font-size: 1rem; font-weight: 600; color: var(--graphite); margin-bottom: .6rem; }
.pgroup__count { font-weight: 500; color: var(--ink-faint); }
.plist { list-style: none; }
.plist__item {
  display: grid; grid-template-columns: minmax(12rem, 1fr) 2.2fr auto; grid-template-areas: 'head summary status' 'head meta status' 'head links status'; gap: .3rem 1.5rem; align-items: start;
  padding: 1rem 0; border-top: var(--groove); min-width: 0;
}
.plist__item:last-child { border-bottom: var(--groove); }
.plist__head { grid-area: head; display: grid; gap: .2rem; min-width: 0; }
.plist__name { font-family: var(--font-display); font-weight: 600; font-size: .92rem; text-wrap: balance; }
.plist__name:hover { text-decoration: underline; text-underline-offset: .15em; }
.plist__kind { font-size: .85rem; color: var(--ink-faint); }
.plist__summary { grid-area: summary; color: var(--ink-muted); font-size: .95rem; text-wrap: pretty; min-width: 0; }
.plist__meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: .2rem 1rem; font-size: .85rem; color: var(--ink-faint); min-width: 0; }
.plist__meta code { font: 500 .78rem/1.5 var(--font-mono); overflow-wrap: anywhere; }
.plist__status { grid-area: status; white-space: nowrap; font-size: .9rem; }
.plist__links { grid-area: links; display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.pstatus { display: inline-flex; align-items: center; gap: .45rem; }
.work__noscript { color: var(--ink-muted); }
/* Archiv zum Aufklappen: die Überschrift ist der Schalter */
details.pgroup { interpolate-size: allow-keywords; }
details.pgroup > summary { cursor: pointer; list-style: none; width: fit-content; }
details.pgroup > summary::-webkit-details-marker { display: none; }
details.pgroup > summary:hover { text-decoration: underline; text-underline-offset: .2em; }
details.pgroup > summary:focus-visible { outline: 2px solid var(--graphite); outline-offset: 4px; border-radius: 2px; }
.pgroup__chev { align-self: center; color: var(--ink-faint); transition: transform var(--dur) var(--ease); }
details.pgroup[open] .pgroup__chev { transform: rotate(90deg); }
[dir="rtl"] .pgroup__chev { transform: scaleX(-1); }
[dir="rtl"] details.pgroup[open] .pgroup__chev { transform: rotate(90deg); }
.case__body h3 a:hover { text-decoration: underline; text-underline-offset: .15em; }

/* ---------- Projektseite ---------- */
.project { max-width: 62rem; padding-left: var(--gutter); padding-right: var(--gutter); padding-top: 3rem; padding-bottom: 5rem; position: relative; }
.project h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.1; margin-top: .3rem; text-wrap: balance; }
.project__status { margin-top: .7rem; font-size: .95rem; }
.project__lead { margin-top: 1rem; font-size: 1.15rem; color: var(--ink-muted); max-width: 60ch; text-wrap: pretty; }
.pgal { margin-top: 2rem; display: grid; gap: .6rem; }
.pgal__main { display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; }
.pgal__main img { width: 100%; height: 100%; object-fit: contain; display: block; background: #14161a; }
.pgal__main:focus-visible { outline: 2px solid var(--graphite); outline-offset: 3px; }
.pgal__caption { font-size: .9rem; color: var(--ink-muted); }
.pgal__caption code { font: 500 .8rem/1 var(--font-mono); color: var(--ink-faint); }
.thumbs--page { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.project__facts { margin-top: 2rem; max-width: 60ch; }
.project__facts div { grid-template-columns: 9rem 1fr; }
.pdetail { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; padding-top: 2rem; border-top: var(--groove); }
.pdetail h2 { font-size: 1rem; font-family: var(--font-body); color: var(--graphite); font-weight: 600; margin-bottom: .4rem; }
.pdetail p { color: var(--ink-muted); text-wrap: pretty; }
.project__actions { margin-top: 2rem; }
.project__nav { margin-top: 3rem; display: flex; justify-content: space-between; gap: 1rem; padding-top: 1.2rem; border-top: var(--groove); }
.project__nav a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; color: var(--ink-muted); font-weight: 600; font-size: .92rem; }
.project__nav a:hover { color: var(--graphite); }
.project__missing { color: var(--ink-muted); }

/* ---------- Stückliste: woraus ein Projekt besteht ----------
   Gleiche Ablesung wie das Typenschild – Bezeichnung, Ressourcenname, darunter der Satz, rechts,
   was es davon zu sehen gibt. Die gefräste Rille gliedert. Module, die bisher nur benannt sind,
   stehen unten und bleiben zurückgenommen, statt eine Vorschau vorzutäuschen. */
.mods { margin-top: 2.5rem; padding-top: 2rem; border-top: var(--groove); }
.mods__title { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .6rem; font-family: var(--font-body); font-size: 1rem; font-weight: 600; margin-bottom: .3rem; }
.mods__count { font-weight: 500; font-size: .92rem; color: var(--ink-faint); }
.mods__list { list-style: none; }
.mods__item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem 1.5rem;
  padding: .85rem 0; border-top: 1px solid var(--engrave);
}
.mods__item:first-child { border-top: 0; }
.mods__head { grid-column: 1; grid-row: 1; display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .6rem; min-width: 0; }
.mods__head b { font-family: var(--font-display); font-weight: 600; font-size: .95rem; }
.mods__head code { font: 500 .78rem/1.5 var(--font-mono); color: var(--ink-faint); overflow-wrap: anywhere; }
.mods__text { grid-column: 1; grid-row: 2; color: var(--ink-muted); font-size: .92rem; text-wrap: pretty; min-width: 0; }
.mods__actions { grid-column: 2; grid-row: 1 / -1; align-self: start; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; }
.mods__actions .link-arrow { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
/* Noch ohne Vorschau: benannt, mehr nicht */
.mods__item--bare { padding: .5rem 0; }
.mods__item--bare .mods__head b { font-family: var(--font-body); font-weight: 500; color: var(--ink-muted); }

/* ---------- Studio ---------- */
.studio {
  padding-top: var(--sec); padding-bottom: var(--sec); position: relative; border-top: var(--groove);
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start;
}
.studio__text p { color: var(--ink-muted); margin-top: 1rem; max-width: 50ch; text-wrap: pretty; }
.studio__text h2 + p { margin-top: 1.2rem; }
.studio__text p:last-child { border-left: 2px solid var(--line-strong); padding-left: 1rem; margin-top: 1.5rem; }
/* Ablauf als Schiene statt als Kreise: eine gefräste Rille läuft durch alle vier Schritte,
   jeder sitzt als Marke darauf, der letzte ist gesetzt – dort ist der Ablauf zu Ende.
   Die Rille trägt die Gliederung, deshalb keine Trennlinien zusätzlich. */
.steps { list-style: none; display: grid; }
.steps li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 1.2rem; padding: 1.15rem 0; position: relative; }
/* Das Stück Schiene von dieser Marke zur nächsten – 1.85rem ist die Höhe der Markenmitte,
   die Höhe 100% führt genau bis zur Mitte der folgenden. Der letzte Schritt hat keins mehr. */
.steps li:not(:last-child)::before {
  content: ''; position: absolute; left: 6px; top: 1.85rem; height: 100%; width: 2px;
  background: var(--engrave);
}
.steps b {
  position: relative; align-self: start; padding-left: 1.3rem; margin-top: .05rem;
  font-family: var(--font-display); font-size: .82rem; font-weight: 600; color: var(--ink-faint);
}
.steps b::before {
  content: ''; position: absolute; left: 0; top: .3em; width: 13px; height: 13px; border-radius: 50%;
  background: var(--alu); border: 1px solid var(--line-strong); box-sizing: border-box;
}
.steps li:last-child b::before { background: var(--graphite); border-color: var(--graphite); }
.steps h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.steps p { color: var(--ink-muted); font-size: .95rem; }

/* ---------- Fragen ----------
   Gleiches Raster wie das Studio: links Überschrift, rechts die Liste. Jede Frage ist eine Zeile
   zwischen zwei Rillen; das Plus wird beim Aufklappen zum Strich. Kein Kasten, keine Symbole davor. */
.faq {
  padding-top: var(--sec); padding-bottom: var(--sec); position: relative; border-top: var(--groove);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(2rem, 6vw, 6rem); align-items: start;
}
.faq__intro h2 { font-size: clamp(1.7rem, 3.3vw, 2.6rem); line-height: 1.12; text-wrap: balance; }
.faq__intro p { margin-top: .7rem; color: var(--ink-muted); max-width: 40ch; text-wrap: pretty; }
@media (min-width: 1001px) { .faq__intro { position: sticky; top: 6rem; } }
.faq__item { border-top: var(--groove); }
.faq__item:last-child { border-bottom: var(--groove); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.1rem 0; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 1.05rem; color: var(--graphite); text-wrap: pretty;
  transition: color var(--fast);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--ink-muted); }
.faq__item summary:focus-visible { outline: 2px solid var(--graphite); outline-offset: 4px; border-radius: 2px; }
/* Plus aus zwei Strichen; offen dreht sich der senkrechte weg */
.faq__item summary i { position: relative; flex: 0 0 14px; height: 14px; }
.faq__item summary i::before, .faq__item summary i::after {
  content: ''; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; border-radius: 1px;
  background: currentColor; transition: transform var(--dur) var(--ease);
}
.faq__item summary i::after { transform: rotate(90deg); }
.faq__item[open] summary i::after { transform: rotate(0deg); }
.faq__item p { padding: 0 2.5rem 1.3rem 0; color: var(--ink-muted); max-width: 62ch; text-wrap: pretty; }
/* Weiches Aufklappen, wo der Browser es kann (Chromium); sonst klappt es einfach auf */
@supports (interpolate-size: allow-keywords) {
  .faq__item { interpolate-size: allow-keywords; }
  .faq__item::details-content, details.pgroup::details-content {
    height: 0; overflow: clip; transition: height var(--dur) var(--ease), content-visibility var(--dur) allow-discrete;
  }
  .faq__item[open]::details-content, details.pgroup[open]::details-content { height: auto; }
}
@media (max-width: 1000px) { .faq { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .faq__item p { padding-right: 0; } .faq__item summary { font-size: 1rem; } }

/* ---------- Kontakt ---------- */
.contact {
  padding-top: var(--sec); padding-bottom: var(--sec); position: relative;
  border-top: var(--groove);
}
.contact__inner { max-width: 76rem; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.contact h2 { font-size: clamp(1.7rem, 3.6vw, 2.8rem); line-height: 1.15; text-wrap: balance; }
.contact__sub { margin-top: .9rem; color: var(--ink-muted); max-width: 40ch; text-wrap: pretty; }
/* Reihenfolge: Discord (primär), E-Mail kopieren (sekundär), die Adresse selbst als Textlink */
.contact__actions { display: flex; flex-direction: column; align-items: stretch; gap: .75rem; width: 100%; }
.contact__mail { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .25rem 1rem; }
.contact__mail .btn .ic-check { display: none; }
.contact__mail .btn.is-done .ic-copy { display: none; }
.contact__mail .btn.is-done .ic-check { display: block; color: var(--led); }
.contact__addr { min-width: 0; }
.contact__addr span { font-family: var(--font-mono); font-weight: 500; font-size: .95rem; overflow-wrap: anywhere; }
.contact__copied { grid-column: 1 / -1; font-size: .88rem; color: var(--ink-muted); }
.contact__copied:empty { display: none; }
.contact__brief {
  margin-top: 1.25rem; padding: 1rem 1.2rem; border-radius: var(--r-lg); width: 100%;
  border: 1px solid var(--line);
}
.contact__brief p { font-size: .95rem; font-weight: 600; color: var(--graphite); margin-bottom: .6rem; }
.contact__brief ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: .35rem 1.2rem; font-size: .92rem; color: var(--ink-muted); }
.contact__brief li { display: flex; gap: .5rem; align-items: baseline; }
.contact__brief li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-faint); flex-shrink: 0; transform: translateY(-2px); }

.foot {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
  padding: 1.4rem var(--gutter); font-size: .88rem; color: var(--ink-muted);
  border-top: var(--groove);
  position: relative;
}
.foot nav { display: flex; gap: .4rem; flex-wrap: wrap; }
.foot a, .foot nav span { display: inline-flex; align-items: center; gap: .3rem; min-height: 40px; padding: 0 .4rem; border-radius: var(--r-sm); }
.foot a:hover { color: var(--graphite); text-decoration: underline; text-underline-offset: .2em; }

/* ---------- Großansicht (Lightbox) ---------- */
.lightbox {
  position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: rgba(8,10,14,.985); color: #e6e9ee; overflow: hidden;
}
.lightbox[open] { display: grid; grid-template-rows: 1fr auto; animation: lbIn .25s ease-out; }
.lightbox::backdrop { background: transparent; }   /* der Dialog selbst füllt den Bildschirm */
@keyframes lbIn { from { opacity: 0; } }
.lightbox__frame { display: grid; place-items: center; min-height: 0; padding: 4rem 4.5rem 0; }
.lightbox__frame img {
  max-width: 100%; max-height: calc(100dvh - 9.5rem); width: auto; height: auto; border-radius: var(--r-md);
  box-shadow: 0 30px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); transition: opacity var(--fast) ease;
}
.lightbox__frame img.is-swapping { opacity: 0; }
.lightbox__bar { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding: 1rem 4.5rem 1.5rem; }
.lightbox__caption { font-size: .95rem; text-wrap: pretty; }
.lightbox__count { font: 500 .85rem/1 var(--font-mono); color: #9aa0a8; white-space: nowrap; }
.lightbox__btn {
  position: fixed; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); cursor: pointer;
  display: grid; place-items: center; color: #fff; background: rgba(30,33,38,.9);
  transition: background var(--fast);
}
.lightbox__btn:hover { background: rgba(70,75,82,.95); }
.lightbox__btn:active { background: rgba(110,115,122,.95); }
.lightbox__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.lightbox__btn--prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__btn--next { right: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__btn--close { top: 1rem; right: 1rem; }
body.has-lightbox { overflow: hidden; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .top { grid-template-columns: auto 1fr; column-gap: .5rem; }
  .top__nav { display: none; }
  .top .tools { display: none; }     /* die Werkzeuge liegen dann im Menü (script.js verschiebt sie) */
  .burger { display: flex; }
  .drawer { display: flex; }
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 5.5rem; grid-template-rows: auto auto auto; }
  /* Mobil zuerst Headline, Text und Knöpfe – das Badge folgt kleiner darunter */
  .hero__badge { height: min(36svh, 290px); order: 0; margin-top: 1.25rem; }
  .hero__badge-fallback { max-width: 220px; }
  .hero__badge-hint { display: none; }
  .plist__item { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'head status' 'summary summary' 'meta meta' 'links links'; }
  .pdetail { grid-template-columns: 1fr; }
  .nameplate { grid-column: 1 / -1; }
  .service, .service--flip { grid-template-columns: minmax(0, 1fr); }
  .service--flip .service__text { order: 0; }
  .console { margin-top: .5rem; }
  .case { grid-template-columns: 1fr; padding: .75rem; }
  .case__body { padding: .6rem .5rem .4rem; }
  .studio { grid-template-columns: 1fr; }
  .contact__inner { grid-template-columns: 1fr; gap: 1.75rem; }
  .contact__sub { max-width: 48ch; }
  .lightbox__frame { padding: 4rem 1rem 0; }
  .lightbox__bar { padding: .8rem 4rem 1rem 1rem; flex-direction: column; gap: .3rem; align-items: flex-start; }
  .lightbox__frame img { max-height: calc(100dvh - 11rem); }
  .lightbox__btn--prev, .lightbox__btn--next { top: auto; bottom: 1rem; transform: none; }
  .lightbox__btn--prev { left: auto; right: 4.5rem; }
}
@media (max-width: 560px) {
  .services__head, .work__head { margin-bottom: 1.5rem; }
  .service { padding: 2.25rem 0; }
  .work__groups { margin-top: 2rem; gap: 2rem; }
  .tech__item { grid-template-columns: auto minmax(0, 1fr) auto; gap: .6rem; }
  .tech__bar { display: none; }
  .nameplate { padding: .8rem 1.1rem; }
  .nameplate__row { grid-template-columns: 5.4rem minmax(0, 1fr); gap: .1rem .7rem; }
  .hero__actions .btn { flex: 1 1 auto; }
  /* Segmentleiste scrollt seitlich; der weiche Rand zeigt, dass rechts mehr kommt */
  .console__bar > .seg:first-child { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); padding-right: 1.5rem; }
  /* Auf schmalen Displays bleibt die Projektkarte eine Übersicht; der volle Umfang steht auf der Projektseite. */
  .case__facts { display: none; }
  .case__actions { flex-direction: column; align-items: stretch; }
  .case__actions .btn { width: 100%; }
  .console { padding: .5rem; }
  .console__bar > .seg:first-child, .console__bar > .gallery__title { flex-basis: 100%; }
  .console__meta-actions { width: 100%; }
  .console__meta-actions .btn { flex: 1 1 auto; }
  .demo { padding: .5rem; }
  .plist__item { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'head status' 'summary summary' 'meta meta' 'links links'; gap: .35rem .75rem; padding: 1.1rem 0; }
  .plist__name { font-size: .98rem; }
  .plist__status { white-space: normal; text-align: end; font-size: .82rem; max-width: 8rem; }
  .plist__meta code { display: none; }
  .project__facts div { grid-template-columns: 1fr; }
  .console__screen--demo { min-height: 26rem; }
  .thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .console__meta { flex-direction: column; align-items: flex-start; }
  .console__meta .btn { width: 100%; }
  .result__fields { grid-template-columns: 1fr; }
  .console__foot { flex-direction: column; align-items: stretch; }
  .contact__brief ul { grid-template-columns: 1fr; }
  .contact__mail { grid-template-columns: 1fr; gap: .25rem; }
  .contact__mail .btn, .contact__addr { width: 100%; }
  .contact__addr { min-height: 44px; }
}
@media (max-width: 700px) {
  .mods__item { grid-template-columns: minmax(0, 1fr); }
  .mods__actions { grid-column: 1; grid-row: auto; align-self: start; margin-top: .3rem; }
  /* schmal: es gibt nur die eine, echte Ansicht – höher, damit die Handy-Ansicht Platz hat */
  [data-web-devices] { display: none !important; }
  .site.is-live { aspect-ratio: 4 / 5; }
  .site.is-live.is-phone .site__frame { inset: 0; width: auto; transform: none; border: 0; border-radius: 0; }
}
/* Schmale Handys: Marke, Anfrage-Knopf und Menü müssen nebeneinander passen */
@media (max-width: 480px) {
  .top { padding-top: .5rem; padding-bottom: .5rem; }
  .top__right { gap: .3rem; }
  .top__cta { padding-left: .7rem; padding-right: .7rem; font-size: .82rem; }
  .brand { gap: .4rem; }
  .brand img { width: 30px; }
}
@media (max-width: 360px) {
  .brand span { display: none; }
}
@media (pointer: coarse) {
  .tool, .theme, .lang__btn { height: 40px; min-width: 40px; }
  .btn--sm { min-height: 40px; }
  .seg button { min-height: 40px; }
  .console__action { width: 40px; height: 40px; }
  .seg--icons button { width: 40px; }
  .thumbs img { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .drawer { transition: none; }
  .hero__badge-hint { display: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .stage > *, .result > * { animation: none; }
  .hero__badge-fallback { transform: none !important; }
}

/* Eingebettete Vorschau (die Seite zeigt sich selbst im Browser-Fenster) */
.is-embed .deck, .is-embed .light { display: none; }
.is-embed .reveal { opacity: 1; transform: none; transition: none; }

/* ---------- Unterseiten (Impressum, Datenschutz) ---------- */
.sub .top { position: sticky; }
.sub .top { grid-template-columns: auto 1fr; }
.sub__nav { display: flex; justify-content: flex-end; align-items: center; gap: .3rem; }
.sub__nav > a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 .85rem; border-radius: var(--r-md); font-weight: 500; font-size: .95rem; color: var(--ink-muted); margin-inline-end: .4rem; }
.sub__nav > a:hover { color: var(--graphite); background: var(--wash); }
.legal { max-width: 68ch; padding-top: 3rem; padding-bottom: 5rem; position: relative; }
.legal h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.1; margin-bottom: 1rem; }
.legal h2 { font-size: 1.1rem; margin-top: 2.2rem; margin-bottom: .6rem; }
.legal p, .legal li { color: var(--ink-muted); }
.legal p + p { margin-top: .8rem; }
.legal ul { padding-left: 1.2rem; margin: .6rem 0; display: grid; gap: .4rem; }
.legal a { color: var(--graphite); text-decoration: underline; text-underline-offset: .15em; }
.legal a:hover { text-decoration-thickness: 2px; }
.legal__lead { font-size: 1.12rem; color: var(--graphite) !important; }
.legal__todo {
  margin: 1.4rem 0; padding: .8rem 1rem; border-radius: var(--r-md); color: var(--graphite) !important;
  background: #f7e3a2; border: 1px solid rgba(0,0,0,.15);
}
mark.todo { background: #f7e3a2; color: #3a2e05; padding: .05rem .35rem; border-radius: 4px; font-style: italic; }
.legal__stand { margin-top: 2.5rem; font-size: .88rem; color: var(--ink-faint) !important; }

/* ---------- 404 ---------- */
.notfound { min-height: 60vh; display: grid; align-content: center; }
.notfound__code { font-family: var(--font-display); font-weight: 700; font-size: clamp(5rem, 18vw, 11rem); line-height: 1; letter-spacing: -.04em; color: var(--alu-deep); margin-bottom: .5rem; }
.notfound__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.legal .notfound__actions a { text-decoration: none; }
.legal .notfound__actions .btn--solid { color: var(--solid-fg); }

/* ---------- Sprachen ---------- */
/* Bis die Übersetzung geladen ist, bleibt der Text kurz unsichtbar (i18n.js hebt das nach spätestens 1,2 s auf) */
/* Nur die übersetzbaren Texte und die aus projects.js gebauten Listen bleiben kurz unsichtbar – Layout, Bilder und Logo stehen sofort */
html[data-i18n-pending] [data-i18n], html[data-i18n-pending] [data-featured], html[data-i18n-pending] [data-groups] { visibility: hidden; }

.lang__menu {
  position: absolute; top: calc(100% + .5rem); right: 0; z-index: 70;
  min-width: 15rem; max-height: min(60vh, 26rem); overflow-y: auto; overscroll-behavior: contain;
  padding: .35rem; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--float-shadow);
  display: grid; gap: 1px;
}
.lang__menu button {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%;
  padding: .5rem .7rem; border: 0; border-radius: var(--r-sm); background: none; cursor: pointer; text-align: left;
  font: 500 .92rem/1.2 var(--font-body); color: var(--ink-muted);
}
.lang__menu button small { font-size: .78rem; font-weight: 500; color: var(--ink-faint); }
.lang__menu button:hover, .lang__menu button:focus-visible { color: var(--graphite); background: var(--wash); outline: none; }
.lang__menu button:focus-visible { box-shadow: inset 0 0 0 2px var(--graphite); }
.lang__menu button.is-active { color: var(--graphite); background: var(--alu-deep); }
.lang__menu button.is-active::after { content: '✓'; font-size: .8rem; margin-left: auto; order: 1; }
.lang__menu button.is-active small { order: 2; }
.legal__lang { padding: .7rem .9rem; border-radius: var(--r-md); border: 1px solid var(--line); color: var(--graphite) !important; margin-bottom: 1rem; }

/* Schriftsysteme ohne eigene Web-Font-Subsets: gute Systemschriften vorziehen */
html:lang(ja) { --font-body: 'Hanken Grotesk', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Meiryo', 'Noto Sans JP', 'Noto Sans CJK JP', sans-serif; --font-display: 'Unbounded', 'Hiragino Sans', 'Yu Gothic UI', 'Meiryo', 'Noto Sans JP', 'Noto Sans CJK JP', sans-serif; }
html:lang(ko) { --font-body: 'Hanken Grotesk', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', 'Noto Sans CJK KR', sans-serif; --font-display: 'Unbounded', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', 'Noto Sans CJK KR', sans-serif; }
html:lang(zh) { --font-body: 'Hanken Grotesk', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans CJK SC', sans-serif; --font-display: 'Unbounded', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans CJK SC', sans-serif; }
html:lang(ar) { --font-body: 'Hanken Grotesk', 'Segoe UI', 'Noto Sans Arabic', 'Noto Naskh Arabic', Tahoma, system-ui, sans-serif; --font-display: 'Unbounded', 'Segoe UI', 'Noto Sans Arabic', 'Noto Kufi Arabic', system-ui, sans-serif; }
html:lang(hi) { --font-body: 'Hanken Grotesk', 'Segoe UI', 'Noto Sans Devanagari', 'Nirmala UI', 'Kohinoor Devanagari', system-ui, sans-serif; --font-display: 'Unbounded', 'Segoe UI', 'Noto Sans Devanagari', 'Nirmala UI', system-ui, sans-serif; }
html:lang(el) { --font-body: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif; --font-display: 'Unbounded', 'Arial Black', Arial, sans-serif; }
html:lang(ja) h1, html:lang(ja) h2, html:lang(ja) h3, html:lang(ko) h1, html:lang(ko) h2, html:lang(ko) h3, html:lang(zh) h1, html:lang(zh) h2, html:lang(zh) h3, html:lang(ar) h1, html:lang(ar) h2, html:lang(ar) h3, html:lang(hi) h1, html:lang(hi) h2, html:lang(hi) h3 { letter-spacing: 0; font-weight: 700; }
html:lang(ja) body, html:lang(ko) body, html:lang(zh) body, html:lang(ar) body, html:lang(hi) body { line-height: 1.75; }
html:lang(ja) .nameplate dd, html:lang(ko) .nameplate dd, html:lang(zh) .nameplate dd { gap: 0; }
html:lang(ja), html:lang(ko), html:lang(zh) { word-break: normal; overflow-wrap: anywhere; }

/* Rechts-nach-links (Arabisch): Flex/Grid dreht sich von selbst, hier nur die festen Seiten */
[dir="rtl"] .lang__menu { right: auto; left: 0; }
[dir="rtl"] .lang__menu button { text-align: right; }
[dir="rtl"] .lang__menu button.is-active::after { margin-left: 0; margin-right: auto; }
[dir="rtl"] .skip { left: auto; right: var(--gutter); }
[dir="rtl"] .case__shot-hint { right: auto; left: .7rem; }
[dir="rtl"] .legal ul { padding-left: 0; padding-right: 1.2rem; }
[dir="rtl"] .console__tag { margin-left: 0; margin-right: auto; }
[dir="rtl"] .console__meta code, [dir="rtl"] .gallery__caption code { margin-left: 0; margin-right: .5rem; }
[dir="rtl"] .dc__bar, [dir="rtl"] .stage__action code, [dir="rtl"] .console__meta code, [dir="rtl"] .gallery__caption code, [dir="rtl"] .contact__addr span, [dir="rtl"] .lang__btn, [dir="rtl"] .lang__menu small { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .link-arrow svg, [dir="rtl"] .case__actions .btn svg:last-of-type, [dir="rtl"] .project__nav svg { transform: scaleX(-1); }

@media (max-width: 480px) {
  .lang__btn svg { width: 15px; height: 15px; }
}
@media (pointer: coarse) { .lang__menu button { min-height: 44px; } }
/* Schmale Bildschirme und im Menü: Sprachliste über die volle Breite, sonst wird sie abgeschnitten */
@media (max-width: 640px) {
  .lang__menu, [dir="rtl"] .lang__menu { position: fixed; top: 64px; left: var(--gutter); right: var(--gutter); min-width: 0; max-height: min(70vh, 30rem); grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1000px) {
  .drawer .lang__menu, [dir="rtl"] .drawer .lang__menu { position: fixed; top: 5rem; left: var(--gutter); right: var(--gutter); min-width: 0; max-height: min(70vh, 30rem); grid-template-columns: 1fr 1fr; }
}

/* ---------- Urheberrechtshinweis (copyright.js): Fenster in der Bildmitte ---------- */
.cr {
  position: fixed; inset: 0; margin: auto; height: fit-content; max-height: calc(100dvh - 32px); overflow: auto;
  width: min(440px, calc(100vw - 32px)); padding: 30px 28px 26px; border: 1px solid var(--line-strong); border-radius: 18px;
  text-align: center; color: var(--graphite); background: var(--alu-light);
  box-shadow: inset 0 1px 0 var(--edge-hi, rgba(255,255,255,.5)), 0 40px 90px -20px rgba(0,0,0,.55);
}
.cr::backdrop { background: rgba(15, 17, 20, .6); }
.cr[open] { animation: cr-in .45s var(--ease); }
.cr[open]::backdrop { animation: cr-fade .3s ease; }
.cr.is-out { opacity: 0; transform: translateY(10px) scale(.97); transition: opacity .25s, transform .25s; }
@keyframes cr-in { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@keyframes cr-fade { from { opacity: 0; } }
.cr__icon {
  width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center;
  font: 600 1.6rem/1 var(--font-display); color: #15181c;
  background: linear-gradient(160deg, #f6f8fa, #9aa2ac); box-shadow: inset 0 1px 0 #fff, 0 8px 22px rgba(0,0,0,.3);
}
.cr__title { margin: 0; font: 600 1.2rem/1.25 var(--font-display); letter-spacing: -.01em; }
.cr__text { margin: 10px 0 0; font-size: .92rem; line-height: 1.6; color: var(--ink-muted); }
.cr__actions { display: flex; gap: 10px; margin-top: 22px; }
.cr__actions .btn { flex: 1; justify-content: center; }
@media (max-width: 420px) { .cr { padding: 26px 20px 20px; } .cr__actions { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .cr[open], .cr[open]::backdrop { animation: none; } }