/* Layout: Schnittplatz. Linksbündiges Raster, echte Frames statt Deko, Signalgelb nur als Funktionsfarbe (Marker, Button, Fokus). */
:root {
  --paper: #ffffff;
  --ink: #0b0b0b;
  --ink-soft: #5b5853;
  --rule: #e3e1dd;
  --plate: #f2f1ee;
  --signal: #ffaa00;
  --signal-text: #9a5800;
  --on-signal: #0b0b0b;
  --glass-ink: #ffffff;
  --signal-glow: rgba(255, 170, 0, .55);
  --logo-filter: brightness(0);
  --font-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --wrap: 1240px;
  --gap: clamp(16px, 2.25vw, 32px);
  --section: clamp(64px, 9vw, 120px);
  --tick: linear-gradient(var(--signal), var(--signal)) left top / 48px 3px no-repeat, linear-gradient(var(--rule), var(--rule)) left top / 100% 1px no-repeat;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0c0c0b;
    --ink: #f3f2ef;
    --ink-soft: #a29f99;
    --rule: #2a2927;
    --plate: #1a1917;
    --signal: #ffb320;
    --signal-text: #ffb320;
    --on-signal: #0b0b0b;
    --signal-glow: rgba(255, 179, 32, .6);
    --logo-filter: brightness(0) invert(1);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0c0c0b;
  --ink: #f3f2ef;
  --ink-soft: #a29f99;
  --rule: #2a2927;
  --plate: #1a1917;
  --signal: #ffb320;
  --signal-text: #ffb320;
  --on-signal: #0b0b0b;
  --signal-glow: rgba(255, 179, 32, .6);
  --logo-filter: brightness(0) invert(1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--signal); color: var(--on-signal); }
/* Auf oranger Fläche wäre Orange als Markierung unsichtbar: dort Weiß mit schwarzer Schrift */
.contact ::selection, .contact::selection, .skip::selection, .btn-solid:hover::selection,
.dock-btn:hover ::selection, .dock-btn[aria-expanded="true"] ::selection { background: #ffffff; color: #0b0b0b; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }
img, video { display: block; max-width: 100%; }
h1, h2, h3, h4, p, dl, dd, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
section[id] { scroll-margin-top: 16px; }
article[id] { scroll-margin-top: 64px; }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
}
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 50;
  background: var(--signal); color: var(--on-signal); padding: 10px 14px; font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

.label, .meta, .via, .facts dt, .pending, .nav a, .proto, .dur {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.textlink {
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  font-weight: 500;
}
.textlink:hover { text-decoration-color: currentColor; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 600 15px/1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: var(--signal); border-color: var(--signal); color: var(--on-signal); }
.btn-line:hover { background: var(--ink); color: var(--paper); }
.btn-sm { min-height: 40px; padding: 0 16px; }
.btn[disabled] { opacity: .45; cursor: default; }
.btn[disabled]:hover { background: transparent; color: var(--ink); }
.tri { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; flex: none; }

/* Header */
.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-block: 20px;
}
.brand {
  font: 800 1.25rem/1 var(--font-display);
  font-stretch: 92%;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.nav a { text-decoration: none; }
.nav a:hover { text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* Hero: Name und Claim, darunter das Reel, darunter Text und Verfügbarkeit */
.hero { padding-block: clamp(24px, 4vw, 56px) 24px; }
.hero-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 16px clamp(32px, 4.5vw, 64px);
  margin-bottom: clamp(20px, 2.6vw, 32px);
}
.hero-avail { display: grid; gap: 4px; max-width: 24rem; padding-bottom: 4px; color: var(--ink-soft); }
.hero-avail p { display: flex; align-items: center; gap: 8px; }
/* Remote und Vor Ort gleich aufgebaut: Symbol, Bezeichnung, Angabe. Haken = ab sofort, Uhr = ab einem Datum */
.avail-list { display: grid; gap: 4px; }
.avail-list li { display: flex; align-items: flex-start; gap: 8px; }
.avail-list strong { color: var(--ink); font-weight: 600; }
.av-ico { width: 16px; height: 16px; flex: none; margin-top: .22em; color: var(--signal); }
.hero-avail .hero-avail-main { color: var(--ink); font-weight: 600; margin-bottom: 4px; }
.hero h1 { display: grid; gap: 16px; }
.h1-name {
  font: 800 clamp(1.2rem, 2.2vw, 1.5rem)/1.1 var(--font-display);
  font-stretch: 95%;
  letter-spacing: -0.01em;
  display: inline-flex; align-items: center; gap: 12px;
}
.h1-name::before { content: ""; width: 28px; height: 4px; background: var(--signal); flex: none; }
.h1-claim {
  font: 850 clamp(2.5rem, 4.6vw, 4.6rem)/0.95 var(--font-display);
  font-stretch: 90%;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.h1-claim > span { display: block; }
/* Das Reel passt mit Name und Claim auf den ersten Bildschirm */
.hero-media, .hero-foot { width: clamp(min(100%, 560px), calc((100vh - 285px) * 16 / 9), 100%); }
@supports (height: 100svh) {
  .hero-media, .hero-foot { width: clamp(min(100%, 560px), calc((100svh - 285px) * 16 / 9), 100%); }
}
.hero-foot { margin-top: clamp(20px, 2.6vw, 32px); }
.lede { font-size: clamp(1.15rem, 1.5vw, 1.3rem); line-height: 1.5; max-width: 44ch; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--signal); flex: none; }

.hero-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  background: #0b0b0b;
  overflow: hidden;
}
.hero-video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
/* Keine Wiedergabe-Symbole des Browsers über dem Reel (z. B. iOS im Stromsparmodus) */
.hero-video::-webkit-media-controls,
.hero-video::-webkit-media-controls-start-playback-button,
.hero-video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }
/* Fortschrittsbalken unter dem Reel */
.reel-bar { display: grid; padding-top: 8px; }
.reel-track { display: flex; gap: 4px; }
.reel-seg {
  position: relative; flex: 1 1 0; min-width: 6px; height: 15px; padding: 0; border: 0; cursor: pointer;
  background: linear-gradient(var(--rule), var(--rule)) center / 100% 3px no-repeat;
}
.reel-fill {
  position: absolute; left: 0; top: 6px; height: 3px; width: 0;
  background: var(--signal);
  box-shadow: 0 0 10px var(--signal-glow), 0 0 3px var(--signal-glow);
}
.reel-seg:focus-visible { outline-offset: 1px; }
/* Liquid-Glass-Einblendung */
.glass {
  position: absolute; left: clamp(10px, 2.2%, 22px); bottom: clamp(10px, 3.4%, 24px); z-index: 2;
  display: flex; align-items: center; gap: 14px;
  max-width: calc(100% - 80px);
  padding: 11px 16px 11px 14px;
  border-radius: 14px;
  color: var(--glass-ink);
  background: rgba(14, 14, 14, .52);
  -webkit-backdrop-filter: blur(22px) saturate(160%) brightness(.85);
  backdrop-filter: blur(22px) saturate(160%) brightness(.85);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(255, 255, 255, .05), 0 12px 32px rgba(0, 0, 0, .35);
  opacity: 0; transform: translateY(8px);
  transition: opacity .32s ease, transform .32s ease;
  pointer-events: none;
}
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,0) 42%);
}
.glass.on { opacity: 1; transform: none; }
.glass-logos { display: flex; align-items: center; gap: 10px; flex: none; position: relative; }
.glass-logos .x { font: 500 14px/1 var(--font-mono); opacity: .8; }
.lg { height: 20px; width: auto; }
.lg-white { filter: brightness(0) invert(1); }
.lg-hd { height: 13px; }
.lg-il { height: 24px; border-radius: 2px; }
.lg-enocoo { height: 22px; }
.lg-skatewiz { height: 20px; }
.glass-text { position: relative; border-left: 1px solid rgba(255,255,255,.28); padding-left: 14px; min-width: 0; }
.glass-title { font: 650 15px/1.25 var(--font-display); font-stretch: 96%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.glass-meta { font: 500 11px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; opacity: .82; }

/* Kunden */
.clients { padding-block: 24px; }
.clients-inner { border-top: 1px solid var(--rule); padding-block: 24px; display: grid; gap: 12px; }
.clients .label { color: var(--ink-soft); }
.clients ul { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.clients li { font: 700 clamp(1.25rem, 2vw, 1.5rem)/1.3 var(--font-display); font-stretch: 95%; }

/* Bänder: jeder zweite große Abschnitt liegt auf einer eigenen Fläche über die volle Breite.
   So sieht man, wo ein Abschnitt endet und der nächste beginnt (Gestaltgesetz der gemeinsamen Region). */
.band {
  background: var(--plate);
  box-shadow: 0 0 0 100vmax var(--plate);
  clip-path: inset(0 -100vmax);
}
.statement.band, .quotes.band, .about.band { padding-block: var(--section); }

/* Mitlaufende Abschnittsleiste oben, erscheint erst, wenn die eigene Überschrift weggescrollt ist */
.spy {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  transform: translateY(-110%);
  transition: transform .28s ease;
}
.spy.on { transform: none; }
.spy-top { position: relative; background: var(--paper); border-bottom: 1px solid var(--rule); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .spy-top { background: color-mix(in srgb, var(--paper) 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
}
.spy-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 46px; padding-block: 4px; }
.spy-label { display: flex; align-items: baseline; gap: 12px; min-width: 0; white-space: nowrap; overflow: hidden; }
.spy-title { font: 700 15px/1.2 var(--font-display); font-stretch: 96%; }
.spy-sub { font: 700 15px/1.2 var(--font-display); font-stretch: 96%; }
.spy.has-sub .spy-title { color: var(--ink-soft); font-weight: 500; }
.spy.has-sub .spy-title::after { content: "/"; margin-left: 10px; color: var(--rule); }
.spy-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; }
.spy-fill { display: block; height: 100%; width: 0; background: var(--signal); box-shadow: 0 0 10px var(--signal-glow), 0 0 3px var(--signal-glow); }
/* Hamburger-Button, wird beim Öffnen zum X */
.spy-menu-btn { flex: none; display: inline-flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; margin-right: -12px; border: 0; background: transparent; cursor: pointer; font: 600 15px/1 var(--font-body); }
.burger, .burger::before, .burger::after { display: block; width: 20px; height: 2px; background: currentColor; transition: transform .2s ease, background-color .2s ease; }
.burger { position: relative; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -6px; }
.burger::after { top: 6px; }
.spy.menu-open .burger { background: transparent; }
.spy.menu-open .burger::before { transform: translateY(6px) rotate(45deg); }
.spy.menu-open .burger::after { transform: translateY(-6px) rotate(-45deg); }
/* Abschnittsliste */
.spy-menu { background: var(--paper); border-bottom: 1px solid var(--rule); box-shadow: 0 18px 40px rgba(0, 0, 0, .28); max-height: calc(100vh - 47px); overflow-y: auto; }
.spy-menu > ul { padding-block: 16px 24px; display: grid; gap: 4px; }
.spy-menu a { display: flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; font: 700 1.15rem/1.2 var(--font-display); font-stretch: 96%; }
.spy-menu ul ul { padding-left: 22px; margin-bottom: 4px; }
.spy-menu ul ul a { min-height: 38px; font-size: 1rem; font-weight: 600; color: var(--ink-soft); }
.spy-menu a::before { content: ""; width: 0; height: 3px; background: var(--signal); transition: width .2s ease; }
.spy-menu a:hover::before, .spy-menu a[aria-current="true"]::before { width: 18px; }
.spy-menu a[aria-current="true"] { color: var(--ink); }
.group[id] { scroll-margin-top: 64px; }

/* Aussage */
.statement { padding-block: var(--section) 0; }
.statement p {
  font: 700 clamp(1.5rem, 3vw, 2.35rem)/1.18 var(--font-display);
  font-stretch: 94%;
  letter-spacing: -0.02em;
  max-width: 30ch;
  text-wrap: balance;
}
.statement em {
  font-style: normal;
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-decoration-thickness: 0.14em;
  text-underline-offset: 0.12em;
  text-decoration-skip-ink: none;
}

/* Abschnittsköpfe */
.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: clamp(32px, 4vw, 48px);
}
.sec-head h2, .about-text h2, .contact h2 {
  font: 800 clamp(2rem, 4.4vw, 3.4rem)/1 var(--font-display);
  font-stretch: 92%;
  letter-spacing: -0.025em;
}

/* Arbeiten */
.work { padding-block: var(--section); }
.groups { display: grid; gap: clamp(56px, 8vw, 104px); }
.group-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-top: 16px;
  margin-bottom: 24px;
  background: var(--tick);
}
.group-head h3 { font: 800 clamp(1.25rem, 2vw, 1.5rem)/1.2 var(--font-display); font-stretch: 94%; }

.feature {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
  margin-bottom: 48px;
}
.feature-body { display: grid; align-content: start; }
.feature h4 { font: 700 clamp(1.25rem, 2vw, 1.5rem)/1.15 var(--font-display); font-stretch: 94%; letter-spacing: -0.015em; text-wrap: balance; }
.via { color: var(--ink-soft); }
.links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px var(--gap); }
.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { display: grid; align-content: start; min-width: 0; }
.card .slides { margin-bottom: 16px; }
.card .meta + h4, .feature-body .meta + h4 { margin-top: 4px; }
.card h4 + .desc, .feature-body h4 + .desc { margin-top: 12px; }
.card h4 { font: 700 1.2rem/1.2 var(--font-display); font-stretch: 96%; }
.meta { color: var(--signal-text); }
.desc { font-size: 16px; line-height: 1.55; color: var(--ink-soft); }
.pending { color: var(--ink-soft); border-bottom: 1px dashed currentColor; justify-self: start; }
.dur { opacity: .7; }

/* Slideshow */
.slides { position: relative; aspect-ratio: 16 / 9; max-width: 100%; background: var(--plate); overflow: hidden; }
.feature .slides.cine { aspect-ratio: 16 / 9; }
.slides-track {
  display: flex; height: 100%;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.slides-track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; height: 100%; scroll-snap-align: start; position: relative; background: #0b0b0b; }
.slide img, .slide video { width: 100%; height: 100%; object-fit: cover; }
.slide.contain img, .slide.contain video { object-fit: contain; }
.slides::after {
  --l: 22px; --t: 3px; --c: var(--signal);
  content: ""; position: absolute; inset: 22px; pointer-events: none; opacity: 0; z-index: 2;
  transition: opacity .2s, inset .25s;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) top left / var(--t) var(--l),
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) top right / var(--t) var(--l),
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) bottom left / var(--t) var(--l),
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) bottom right / var(--t) var(--l);
  background-repeat: no-repeat;
}
/* Mit Maus: Ecken beim Drüberfahren oder Anwählen.
   Am Handy (site.js setzt dann .touch am html-Element): nur die Slideshow, die gerade im Blick ist */
html:not(.touch) .slides:hover::after, html:not(.touch) .slides:focus-within::after { opacity: 1; inset: 14px; }
.touch .slides.in-focus::after { opacity: 1; inset: 14px; }
.sl-btn {
  position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
  width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%;
  background: rgba(12,12,12,.45); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: grid; place-items: center; opacity: 0; transition: opacity .2s;
}
.sl-btn::before { content: ""; width: 9px; height: 9px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; }
.sl-prev { left: 12px; } .sl-prev::before { transform: translateX(2px) rotate(-135deg); }
.sl-next { right: 12px; } .sl-next::before { transform: translateX(-2px) rotate(45deg); }
.slides:hover .sl-btn, .slides:focus-within .sl-btn { opacity: 1; }
.sl-btn[disabled] { opacity: 0 !important; pointer-events: none; }
@media (hover: none) { .sl-btn { opacity: .85; } }
.touch .sl-btn { opacity: .85; }

/* Player */
.player {
  border: 0; padding: 0; background: transparent; color: #fff;
  width: min(1200px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px);
  overflow: visible;
}
.player::backdrop { background: rgba(6, 6, 6, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.player-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 0 10px; }
.player-title { font: 700 1.05rem/1.25 var(--font-display); font-stretch: 96%; }
.player-close {
  width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: rgba(255,255,255,.06);
  cursor: pointer; color: #fff; position: relative; flex: none;
}
.player-close::before, .player-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; background: currentColor; }
.player-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.player-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.player video { width: 100%; aspect-ratio: 16 / 9; background: #000; max-height: calc(100dvh - 110px); }
.player.is-vertical { width: min(460px, calc(100vw - 32px)); }
.player.is-vertical video { aspect-ratio: 9 / 16; }
.player-hint { margin-top: 8px; font: 500 12px/1.4 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.7); }

/* Leistungen */
.skills { padding-block: var(--section); }
.skill-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 5vw, 56px) clamp(28px, 5vw, 64px); }
.skill { display: grid; gap: 12px; align-content: start; padding-top: 16px; background: var(--tick); }
.skill h3 { font: 700 clamp(1.25rem, 2vw, 1.5rem)/1.15 var(--font-display); font-stretch: 94%; }
.skill p { max-width: 52ch; color: var(--ink-soft); }
.skill strong, .about-text strong { color: var(--ink); font-weight: 600; }

/* Referenzen */
.quotes { padding-block: var(--section) 0; }
.quote { display: grid; gap: 16px; padding-top: 24px; background: var(--tick); max-width: 62rem; }
.quote blockquote { margin: 0; position: relative; }
.quote blockquote p { font: 700 clamp(1.5rem, 3vw, 2.35rem)/1.18 var(--font-display); font-stretch: 94%; letter-spacing: -0.015em; text-wrap: balance; }
.quote blockquote p::before { content: "„"; color: var(--signal); }
.quote blockquote p::after { content: "“"; color: var(--signal); }
.quote figcaption { display: grid; gap: 4px; }
.quote-name { font-weight: 600; }
.quote-role { font: 500 12.5px/1.5 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.quote-full summary { cursor: pointer; list-style: none; width: fit-content; font-weight: 500; text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.quote-full summary::-webkit-details-marker { display: none; }
.quote-full summary::after { content: " +"; color: var(--signal-text); }
.quote-full[open] summary::after { content: " −"; }
.quote-text { display: grid; gap: 12px; margin-top: 16px; max-width: 68ch; color: var(--ink-soft); }

/* Über mich */
.about { padding-block: var(--section); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.portrait { aspect-ratio: 4 / 5; max-width: 100%; overflow: hidden; background: var(--plate); }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.about-text { display: grid; gap: 16px; }
.about-text h2 { margin-bottom: 16px; }
.about-text p { max-width: 60ch; color: var(--ink-soft); }
.about-text .lead { font-size: clamp(1.15rem, 1.5vw, 1.3rem); line-height: 1.45; color: var(--ink); }
.facts { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); margin-top: 16px; border-top: 1px solid var(--rule); }
.facts dt, .facts dd { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.facts dt { color: var(--ink-soft); padding-right: 16px; padding-top: 14px; }
.facts dd { font-size: 16px; }

/* Kontakt */
.contact { background: var(--signal); color: var(--on-signal); }
.contact :focus-visible { outline-color: var(--on-signal); }
.contact-inner { padding-block: var(--section); display: grid; gap: 16px; }
.contact .label { opacity: .75; }
.contact-lede { max-width: 46ch; font-size: clamp(1.15rem, 1.5vw, 1.3rem); }
.mail {
  font: 850 clamp(1.5rem, 6.8vw, 5.8rem)/1 var(--font-display);
  font-stretch: 88%;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
  user-select: all;
  -webkit-user-select: all;
  margin-top: 8px;
}
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.btn-ink { background: var(--on-signal); color: var(--signal); border-color: var(--on-signal); }
.btn-ink:hover { background: transparent; color: var(--on-signal); }
.btn-ink-line { border-color: var(--on-signal); color: var(--on-signal); }
.btn-ink-line:hover { background: var(--on-signal); color: var(--signal); }
.contact-links { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 16px; font-weight: 500; }
.contact-links a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.contact-links a:hover { text-decoration-thickness: 3px; }
.mail { user-select: all; -webkit-user-select: all; cursor: text; }
.placeholder { text-decoration: none; border-bottom: 1px dashed currentColor; }

/* Footer */
.foot-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  padding-block: 24px 40px;
  font-size: 14px;
  color: var(--ink-soft);
}
.foot-bar nav { display: flex; gap: 20px; }

/* Schwebender Kontakt */
.dock {
  position: fixed;
  right: calc(24px + env(safe-area-inset-right, 0px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 20;
  transition: opacity .2s, transform .2s, visibility .2s;
}
.dock.is-away { opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none; }
/* Im Stil der oberen Leiste: ruhige, leicht durchscheinende Fläche, nur das Symbol in Orange */
.dock-btn {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 0 20px;
  background: var(--paper); color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); border-radius: 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
  font: 600 14px/1 var(--font-body); letter-spacing: .01em; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .dock-btn { background: color-mix(in srgb, var(--paper) 84%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
}
.dock-btn .mail-icon { color: var(--signal-text); transition: color .15s; }
.dock-btn:hover, .dock-btn[aria-expanded="true"] { background: var(--signal); border-color: var(--signal); color: var(--on-signal); }
.dock-btn:hover .mail-icon, .dock-btn[aria-expanded="true"] .mail-icon { color: currentColor; }
.dock-btn:focus-visible { outline-color: var(--signal); }
.mail-icon { display: block; width: 18px; height: 14px; flex: none; }
.dock-panel {
  position: absolute; right: 0; bottom: calc(100% + 12px);
  width: min(330px, calc(100vw - 48px));
  background: var(--paper); color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
  padding: 16px;
  display: grid; gap: 12px;
}
.dock-mail { font: 700 1.35rem/1.1 var(--font-display); font-stretch: 92%; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.dock-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Rechtliches */
.legal { padding-block: clamp(40px, 6vw, 80px) var(--section); display: grid; gap: 18px; max-width: 760px; }
.legal h1 { font: 800 clamp(2rem, 4.4vw, 3rem)/1.05 var(--font-display); font-stretch: 92%; letter-spacing: -0.02em; }
.legal h2 { font: 700 1.25rem/1.3 var(--font-display); margin-top: 18px; }
.legal .todo { background: var(--plate); border-left: 4px solid var(--signal); padding: 12px 16px; }

/* Responsiv */
@media (max-width: 899px) {
  .feature { grid-template-columns: 1fr; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards > :last-child { grid-column: 1 / -1; }
  .about { grid-template-columns: 1fr; }
  .portrait { max-width: 360px; }
}
@media (max-width: 680px) {
  .skill-grid { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  body { font-size: 16px; padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .cards { grid-template-columns: 1fr; }
  .cards > :last-child { grid-column: auto; }
  .facts { grid-template-columns: 1fr; }
  .facts dt { border-bottom: 0; padding-bottom: 0; }
  .glass { gap: 10px; padding: 8px 12px 8px 10px; border-radius: 12px; max-width: calc(100% - 64px); }
  .glass-title { font-size: 13px; }
  .glass-meta { font-size: 10px; }
  .lg { height: 15px; } .lg-hd { height: 10px; } .lg-il { height: 18px; } .lg-enocoo { height: 16px; }
  .glass-text { padding-left: 10px; }
  .dock { right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .btn-sm { min-height: 44px; }
  .spy-menu-btn { height: 44px; }
  .dock-btn { padding: 0 16px; }
  .dock-panel { width: min(330px, calc(100vw - 32px)); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .slides-track { scroll-behavior: auto; }
}

.nowrap { white-space: nowrap; }

/* ---------- Bewegung beim Scrollen ----------
   Greift nur, wenn das kleine Skript im Kopf der Seite .js-motion gesetzt hat
   (nicht bei "Bewegung reduzieren"). Ohne JavaScript ist alles sofort sichtbar. */

/* Abschnittsköpfe, Projektkarten und Leistungen blenden einmal sanft ein */
.js-motion .rv { opacity: 0; transform: translateY(12px); transition: opacity .35s ease, transform .35s ease; transition-delay: var(--d, 0ms); }
.js-motion .rv.is-in { opacity: 1; transform: none; }

/* Kundennamen erscheinen nacheinander, unter jedem zieht ein oranger Strich durch */
.js-motion .clients li { position: relative; opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; transition-delay: calc(var(--i, 0) * 55ms); }
.js-motion .clients li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: var(--signal); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.js-motion .clients.is-in li { opacity: 1; transform: none; }
.js-motion .clients.is-in li::after { animation: mh-wipe .6s cubic-bezier(.6, 0, .2, 1) both; animation-delay: calc(var(--i, 0) * 55ms + 80ms); }
@keyframes mh-wipe {
  0% { transform: scaleX(0); transform-origin: left; }
  50% { transform: scaleX(1); transform-origin: left; }
  50.1% { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}

/* Zahlenzeile: Zahlen zählen hoch, danach zieht sich der Unterstrich */
.js-motion .statement em {
  text-decoration: none;
  background: linear-gradient(var(--signal), var(--signal)) 0 calc(100% - 0.02em) / 0% 0.14em no-repeat;
  transition: background-size .55s cubic-bezier(.6, 0, .2, 1);
}
.js-motion .statement em.drawn { background-size: 100% 0.14em; }
.statement .num { font-variant-numeric: tabular-nums; }
.statement .num.counting { display: inline-block; text-align: right; }