/* ===========================================================================
   MaHop.Net · Design "Aurora"
   Dunkle Glasflächen über einem farbigen Gradient-Mesh. Helles Theme inklusive.
   Reines CSS, keine Abhängigkeiten.
   =========================================================================== */

/* ----------------------------------------------------------------- Tokens */
:root {
  color-scheme: dark;

  /* Neutrale Töne leicht warm, damit sie zum Orange passen */
  --ink: #f4efe9;
  --ink-2: #c0b3a8;
  --ink-3: #8a7d72;
  --bg: #0b0806;
  --bg-2: #13100d;
  --surface: rgba(255, 238, 225, 0.04);
  --surface-hi: rgba(255, 238, 225, 0.075);
  --line: rgba(255, 232, 214, 0.1);
  --line-hi: rgba(255, 232, 214, 0.2);

  /* ---- Markenskala: das Orange der alten Website (#d23c01) ausgebaut ----
     von hellem Bernstein über das Markenorange bis in ein tiefes Rotbraun. */
  --brand-200: #ffc247;
  --brand-300: #ffb020;
  --brand-400: #ff8c2b;
  --brand-500: #fe6a08;
  --brand-600: #e9540b;
  --brand-700: #d23c01;
  --brand-800: #a82d00;
  --brand-900: #7a1f00;

  --accent: var(--brand-500);   /* interaktiv: helles Orange */
  --accent-2: var(--brand-700); /* Marke: dunkles Orange Richtung Rot */
  --accent-3: var(--brand-300); /* Akzent: Bernstein */
  --warm: var(--brand-300);

  --radius: 20px;
  --radius-s: 13px;
  --radius-l: 28px;

  --shell: 1680px;
  --gutter: clamp(18px, 4vw, 56px);

  /* App-Bar und gemeinsamer Footer (shared/mahop-apps.js) laufen auf
     demselben Raster wie der Seiteninhalt. Ohne diese beiden Zeilen hätten
     sie ihr eigenes (1800px) und säßen je nach Fensterbreite mal enger,
     mal weiter als das Logo darunter. Die Werte werden in deren Shadow-DOM
     vererbt und folgen den --shell-Stufen in den Media Queries unten. */
  --mh-shell: var(--shell);
  --mh-gutter: var(--gutter);

  --t-fast: 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
  --t: 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html[data-theme="light"] {
  color-scheme: light;
  --ink: #1d1410;
  --ink-2: #5d4f46;
  --ink-3: #8a7a6e;
  --bg: #fbf7f3;
  --bg-2: #f3ece5;
  --surface: rgba(60, 30, 12, 0.04);
  --surface-hi: rgba(60, 30, 12, 0.07);
  --line: rgba(60, 30, 12, 0.12);
  --line-hi: rgba(60, 30, 12, 0.24);
  /* Auf Weiß braucht es die dunkleren Stufen, sonst fehlt der Kontrast */
  --accent: var(--brand-700);
  --accent-2: var(--brand-900);
  --accent-3: var(--brand-800);
  --warm: var(--brand-800);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: clamp(15px, 0.52vw + 13.4px, 17.5px);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 620;
  letter-spacing: -0.028em;
  line-height: 1.1;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }

/* ----------------------------------------------------------------- Aurora */
.aurora {
  position: fixed;
  inset: -25vh -15vw;
  z-index: -1;
  pointer-events: none;
  filter: blur(100px);
  opacity: 0.3;
  contain: strict;
}
.aurora span {
  position: absolute;
  border-radius: 50%;
  animation: drift 32s ease-in-out infinite alternate;
  will-change: transform;
}
/* Auf hellem Papier wirken dieselben Flächen viel kräftiger – deutlich
   zurücknehmen, sonst liegt ein Pfirsichschleier über der ganzen Seite. */
html[data-theme="light"] .aurora { opacity: 0.13; filter: blur(130px); }

/* Glut statt Nordlicht: Bernstein, Markenorange, tiefes Rotbraun */
.aurora span:nth-child(1) { width: 40vw; height: 40vw; left: -6vw;  top: -8vh;   background: #b83400; animation-duration: 28s; }
.aurora span:nth-child(2) { width: 32vw; height: 32vw; right: -4vw; top: -4vh;   background: #8a4a00; animation-duration: 36s; animation-delay: -8s; }
.aurora span:nth-child(3) { width: 30vw; height: 30vw; left: 30vw;  top: 52vh;   background: #7a1f00; animation-duration: 33s; animation-delay: -15s; }
.aurora span:nth-child(4) { width: 22vw; height: 22vw; right: 16vw; bottom: -10vh; background: #c76a00; animation-duration: 40s; animation-delay: -4s; opacity: .8; }

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(4vw, 6vh, 0) scale(1.14); }
}

/* Weicher Verlauf über dem Mesh, damit Text überall ruhig steht */
.veil {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg) 42%, transparent) 0%,
    color-mix(in srgb, var(--bg) 66%, transparent) 42%,
    color-mix(in srgb, var(--bg) 88%, transparent) 100%);
}
html[data-theme="light"] .veil {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg) 62%, transparent) 0%,
    color-mix(in srgb, var(--bg) 84%, transparent) 40%,
    color-mix(in srgb, var(--bg) 97%, transparent) 100%);
}
html[data-theme="light"] .grain { opacity: 0.02; }

.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ Layout */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { position: relative; padding-block: clamp(64px, 8vw, 150px); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 50%; top: 8px; transform: translate(-50%, -200%);
  z-index: 100; padding: 10px 18px; border-radius: 99px;
  background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none;
  transition: transform var(--t);
}
.skip:focus { transform: translate(-50%, 0); }

/* ----------------------------------------------------------------- Header */
.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t);
}
/* Die Glasfläche liegt bewusst auf einem Pseudo-Element: ein backdrop-filter
   direkt auf .site-head würde für position:fixed-Kinder (das mobile Menü)
   einen eigenen Bezugsrahmen aufspannen – das Menü klebte dann am Header
   statt am Viewport. */
.site-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  transition: opacity var(--t);
}
.site-head.is-stuck::before { opacity: 1; }
.site-head.is-stuck { border-bottom-color: var(--line); }
.head-row {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  min-height: 70px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  font-weight: 680;
  font-size: 1rem;
  letter-spacing: -0.02em;
  flex: none;
}
/* Die Bildmarke: Ring mit vier Pfeilen, die auf einen Punkt zulaufen.
   Als Inline-SVG, damit sie die Markenfarben als CSS-Variablen erbt. */
.logo .mark {
  width: 40px; height: 40px; flex: none;
  overflow: visible;
  transition: transform var(--t);
}
.logo:hover .mark { transform: scale(1.07) rotate(-8deg); }
/* Die Pfeile rücken beim Überfahren ein Stück näher an den Punkt */
.logo .mark .arrows path { transition: transform var(--t); transform-origin: 32px 32px; }
.logo:hover .mark .arrows path { transform: scale(0.9); }
.logo .mark .ring { transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); transform-origin: 32px 32px; }
.logo:hover .mark .ring { transform: rotate(45deg); }
.logo small {
  display: block;
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
}

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.site-nav a {
  position: relative;
  padding: 9px 13px;
  border-radius: 10px;
  font-size: 0.86rem;
  font-weight: 520;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap; /* "Über mich" darf nie umbrechen */
  transition: color var(--t-fast), background var(--t-fast);
}
.site-nav a:hover { color: var(--ink); background: var(--surface); }
.site-nav a.active { color: var(--ink); }
.site-nav a.active::after {
  content: "";
  position: absolute; left: 13px; right: 13px; bottom: 4px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.head-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.icon-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 11px;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.icon-btn:hover { background: var(--surface-hi); border-color: var(--line-hi); transform: translateY(-1px); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn .sun { display: none; }
html[data-theme="light"] .icon-btn .sun { display: block; }
html[data-theme="light"] .icon-btn .moon { display: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 22px;
  border-radius: 99px;
  border: 1px solid transparent;
  font-size: 0.9rem; font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--t), box-shadow var(--t), background var(--t), border-color var(--t), color var(--t);
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn-primary {
  color: #fff;
  background: linear-gradient(130deg, var(--accent), var(--accent-2));
  box-shadow: 0 14px 34px -16px var(--accent);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 44px -16px var(--accent); }
.btn-ghost { color: var(--ink); border-color: var(--line); background: var(--surface); }
.btn-ghost:hover { border-color: var(--line-hi); background: var(--surface-hi); transform: translateY(-2px); }
.btn-sm { padding: 9px 16px; font-size: 0.82rem; }

.nav-toggle { display: none; }

/* ------------------------------------------------------------------- Hero */
.hero { padding-block: clamp(48px, 7vw, 110px) clamp(56px, 7vw, 120px); }
.hero-grid {
  display: grid;
  gap: clamp(36px, 4vw, 72px);
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 15px 7px 11px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.74rem; font-weight: 640; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-2);
}
.eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand-300);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-300) 22%, transparent);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--brand-300) 6%, transparent); } }

.hero h1 {
  margin-top: 26px;
  font-size: clamp(2.3rem, 4.6vw, 4.5rem);
  font-weight: 680;
  letter-spacing: -0.038em;
  line-height: 1.03;
}
.hero h1 .grad {
  /* durchgehend hell nach dunkel: Bernstein -> Orange -> Rotbraun */
  background: linear-gradient(104deg, var(--brand-200) 2%, var(--brand-500) 48%, var(--brand-800) 98%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* Auf hellem Papier beginnt der Verlauf dunkler, sonst fehlt dem Bernstein
   der Kontrast zum Hintergrund. */
html[data-theme="light"] .hero h1 .grad {
  background: linear-gradient(104deg, var(--brand-600) 2%, var(--brand-700) 48%, var(--brand-900) 98%);
  -webkit-background-clip: text; background-clip: text;
}
.hero-lead {
  margin-top: 24px;
  max-width: 54ch;
  font-size: clamp(1rem, 0.4vw + 0.92rem, 1.2rem);
  color: var(--ink-2);
}
.hero-roles {
  margin-top: 20px;
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--mono);
  font-size: 0.86rem;
  color: var(--ink-3);
}
.hero-roles .rot {
  color: var(--accent-3);
  font-weight: 500;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-3) 40%, transparent);
}
.hero-roles .caret {
  width: 8px; height: 1.05em;
  background: var(--accent-3);
  display: inline-block;
  animation: blink 1.1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.hero-cta { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }

.hero-stats {
  margin-top: clamp(38px, 4vw, 56px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 26px);
  border-top: 1px solid var(--line);
  padding-top: clamp(22px, 2.4vw, 32px);
}
.hero-stats b {
  display: block;
  font-size: clamp(1.4rem, 1.5vw + 0.9rem, 2.1rem);
  font-weight: 660; letter-spacing: -0.035em;
}
.hero-stats span { display: block; margin-top: 5px; font-size: 0.78rem; color: var(--ink-3); line-height: 1.45; }

/* Architektur-Karte im Hero */
.stack-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: color-mix(in srgb, var(--bg-2) 62%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}
.stack-card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(520px 260px at 82% -10%, color-mix(in srgb, var(--accent-2) 26%, transparent), transparent 70%);
  pointer-events: none;
}
.stack-head {
  display: flex; align-items: center; gap: 11px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 0.74rem; color: var(--ink-3);
  letter-spacing: 0.06em;
}
.stack-head .tag {
  width: 9px; height: 9px; flex: none; border-radius: 3px; display: block;
  background: linear-gradient(135deg, var(--brand-300), var(--brand-700));
}
.stack-head .meta { margin-left: auto; opacity: 0.72; }

.layers { position: relative; padding: clamp(18px, 2vw, 26px); display: grid; gap: 10px; }
.layer {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface);
  transition: transform var(--t), border-color var(--t), background var(--t);
}
.layer:hover { transform: translateX(6px); border-color: color-mix(in srgb, var(--c, var(--accent)) 55%, transparent); background: var(--surface-hi); }
.layer .n {
  flex: none;
  width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 0.68rem; font-weight: 600;
  color: #fff;
  background: linear-gradient(140deg, var(--c), color-mix(in srgb, var(--c) 55%, #000));
}
.layer b { display: block; font-size: 0.88rem; font-weight: 600; letter-spacing: -0.01em; }
.layer em {
  display: block; font-style: normal;
  font-family: var(--mono); font-size: 0.7rem; color: var(--ink-3); margin-top: 3px;
}
.layer .arrow {
  margin-left: auto; flex: none;
  color: var(--ink-3); opacity: 0.5;
}
.stack-foot {
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 7px;
}
.stack-foot code {
  font-family: var(--mono); font-size: 0.7rem;
  padding: 4px 9px; border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
}

/* --------------------------------------------------------- Section heading */
.sec-head { max-width: 62ch; margin-bottom: clamp(32px, 4vw, 58px); }
.sec-head .kicker {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-3);
}
.sec-head .kicker::before {
  content: ""; width: 26px; height: 1px; background: currentColor; opacity: 0.6;
}
.sec-head h2 {
  margin-top: 16px;
  font-size: clamp(1.75rem, 2.5vw + 0.8rem, 3.1rem);
  letter-spacing: -0.035em;
}
.sec-head p { margin-top: 16px; color: var(--ink-2); font-size: clamp(0.96rem, 0.3vw + 0.9rem, 1.1rem); }

/* ----------------------------------------------------------------------- KI */
.ai-band {
  position: relative;
  display: grid;
  gap: clamp(26px, 3vw, 58px);
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: start;
  padding: clamp(26px, 3vw, 46px) 0;
  border-block: 1px solid var(--line);
}
.ai-band::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: linear-gradient(90deg, var(--brand-700), var(--brand-300) 45%, transparent 85%);
}
.ai-intro .kicker {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-3);
  margin: 0;
}
.ai-intro .kicker::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: 0.6; }
.ai-intro h2 {
  margin-top: 16px;
  font-size: clamp(1.5rem, 1.9vw + 0.8rem, 2.4rem);
  letter-spacing: -0.035em;
}
.ai-intro > p { margin-top: 18px; color: var(--ink-2); font-size: clamp(0.96rem, 0.3vw + 0.9rem, 1.08rem); max-width: 46ch; }

.ai-list { margin: 0; padding: 0; list-style: none; counter-reset: ai; display: grid; gap: 2px; }
.ai-list li {
  counter-increment: ai;
  position: relative;
  display: flex; gap: 16px; align-items: flex-start;
  padding: clamp(16px, 1.6vw, 22px) clamp(14px, 1.4vw, 20px);
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  transition: background var(--t), border-color var(--t), transform var(--t);
}
.ai-list li:hover {
  background: var(--surface);
  border-color: var(--line);
  transform: translateX(4px);
}
.ai-list .ic {
  flex: none;
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  color: var(--brand-400);
  border: 1px solid color-mix(in srgb, var(--brand-500) 32%, transparent);
  background: color-mix(in srgb, var(--brand-700) 14%, transparent);
}
.ai-list .ic svg { width: 20px; height: 20px; }
.ai-list h3 {
  font-size: 1.02rem; font-weight: 620;
  display: flex; align-items: baseline; gap: 10px;
}
.ai-list h3::before {
  content: "0" counter(ai);
  font-family: var(--mono); font-size: 0.7rem; font-weight: 400; color: var(--ink-3);
}
.ai-list li p { margin-top: 8px; color: var(--ink-2); font-size: 0.91rem; }

/* --------------------------------------------------------------- Leistungen */
.cards {
  display: grid;
  gap: clamp(14px, 1.4vw, 22px);
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.card {
  position: relative;
  padding: clamp(22px, 2vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  transition: transform var(--t), border-color var(--t), background var(--t), box-shadow var(--t);
}
.card::after {
  content: "";
  position: absolute; inset: -60% 50% 60% -60%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--c, var(--accent)), transparent 66%);
  opacity: 0;
  transition: opacity var(--t);
  pointer-events: none;
}
.card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--c, var(--accent)) 50%, transparent);
  background: var(--surface-hi);
  box-shadow: 0 26px 54px -30px color-mix(in srgb, var(--c, var(--accent)) 60%, transparent);
}
.card:hover::after { opacity: 0.14; }
.card .ic {
  width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center;
  color: #fff;
  background: linear-gradient(140deg, var(--c, var(--accent)), color-mix(in srgb, var(--c, var(--accent)) 45%, #1a0a02));
  box-shadow: 0 12px 26px -14px var(--c, var(--accent));
}
.card .ic svg { width: 23px; height: 23px; }
.card h3 { margin-top: 20px; font-size: 1.07rem; font-weight: 620; }
.card p { margin-top: 10px; color: var(--ink-2); font-size: 0.92rem; }
.card .num {
  position: absolute; top: clamp(18px, 2vw, 26px); right: clamp(18px, 2vw, 26px);
  font-family: var(--mono); font-size: 0.7rem; color: var(--ink-3); opacity: 0.6;
}

/* ----------------------------------------------------------------- Projekte */
.projects {
  display: grid;
  gap: clamp(14px, 1.4vw, 22px);
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}
.project {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(22px, 2vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: transform var(--t), border-color var(--t), background var(--t), box-shadow var(--t);
}
.project:hover {
  transform: translateY(-4px);
  border-color: var(--line-hi);
  background: var(--surface-hi);
  box-shadow: 0 26px 54px -30px rgba(0, 0, 0, 0.7);
}
.project-top { display: flex; align-items: flex-start; gap: 15px; }
.project-top img {
  width: 48px; height: 48px; flex: none;
  border-radius: 13px;
  padding: 7px;
  border: 1px solid var(--line);
  background: var(--surface-hi);
}
.project-top h3 { font-size: 1.07rem; font-weight: 620; }
.project-top .role {
  display: block; margin-top: 4px;
  font-family: var(--mono); font-size: 0.72rem; color: var(--ink-3);
}
.project ul {
  margin: 20px 0 0; padding: 0; list-style: none;
  display: grid; gap: 9px;
}
.project li {
  position: relative;
  padding-left: 20px;
  font-size: 0.89rem;
  color: var(--ink-2);
  line-height: 1.5;
}
.project li::before {
  content: "";
  position: absolute; left: 2px; top: 0.6em;
  width: 7px; height: 7px; border-radius: 2px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  opacity: 0.85;
}
.project .link {
  margin-top: auto;
  padding-top: 22px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.85rem; font-weight: 580;
  color: var(--accent-3);
  text-decoration: none;
  width: fit-content;
}
.project .link svg { width: 15px; height: 15px; transition: transform var(--t-fast); }
.project .link:hover svg { transform: translate(3px, -3px); }
.project .tags { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 6px; }
.project .tags span {
  font-family: var(--mono); font-size: 0.68rem;
  padding: 4px 8px; border-radius: 6px;
  border: 1px solid var(--line);
  color: var(--ink-3);
}

/* --------------------------------------------------------------- Eigene Apps */
.apps-band {
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent-2) 9%, transparent));
  padding: clamp(24px, 3vw, 46px);
  overflow: hidden;
  position: relative;
}
.apps-band::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, var(--line-hi) 1px, transparent 0);
  background-size: 26px 26px;
  opacity: 0.4;
  mask-image: radial-gradient(70% 70% at 70% 20%, #000, transparent);
  pointer-events: none;
}
.apps-band-head {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; justify-content: space-between;
  margin-bottom: clamp(22px, 2.4vw, 34px);
}
.apps-band-head h2 { font-size: clamp(1.4rem, 1.6vw + 0.8rem, 2.1rem); }
.apps-band-head p { margin-top: 10px; color: var(--ink-2); max-width: 48ch; font-size: 0.95rem; }
.app-tiles {
  display: grid;
  gap: clamp(12px, 1.2vw, 18px);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.app-tile {
  display: flex; gap: 13px; align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: color-mix(in srgb, var(--bg) 42%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  text-decoration: none;
  transition: transform var(--t), border-color var(--t), background var(--t), box-shadow var(--t);
}
.app-tile:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--c) 60%, transparent);
  box-shadow: 0 20px 40px -24px var(--c);
}
.app-tile .ic {
  width: 40px; height: 40px; flex: none;
  border-radius: 12px;
  display: grid; place-items: center;
  color: #fff;
  background: linear-gradient(140deg, var(--c), color-mix(in srgb, var(--c) 50%, #1a0a02));
}
.app-tile .ic svg { width: 21px; height: 21px; }
.app-tile b { display: block; font-size: 0.92rem; font-weight: 600; }
.app-tile span { display: block; font-size: 0.78rem; color: var(--ink-3); margin-top: 2px; }

/* -------------------------------------------------------------- Technologien */
.tech { display: flex; flex-wrap: wrap; gap: 9px; }
.tech span {
  font-family: var(--mono);
  font-size: 0.8rem;
  padding: 8px 14px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  transition: transform var(--t-fast), border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.tech span:hover {
  transform: translateY(-2px);
  color: var(--ink);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: var(--surface-hi);
}

/* --------------------------------------------------------------- Über mich */
.about-grid {
  display: grid;
  gap: clamp(30px, 4vw, 66px);
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
}
.portrait { position: relative; }
.portrait img {
  width: 100%;
  border-radius: var(--radius-l);
  border: 1px solid var(--line);
  filter: grayscale(0.18) contrast(1.04);
}
.portrait::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: var(--radius-l);
  background: linear-gradient(170deg, transparent 52%, color-mix(in srgb, var(--accent-2) 24%, transparent));
  pointer-events: none;
}
.portrait .badge {
  position: absolute; left: 18px; bottom: 18px; z-index: 1;
  padding: 11px 16px;
  border-radius: 14px;
  border: 1px solid var(--line-hi);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.portrait .badge b { display: block; font-size: 0.9rem; font-weight: 640; }
.portrait .badge span { display: block; font-size: 0.74rem; color: var(--ink-3); margin-top: 2px; }

.timeline { margin: clamp(26px, 3vw, 38px) 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.timeline li {
  position: relative;
  padding: 16px 0 16px 30px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline;
}
.timeline li:last-child { border-bottom: 1px solid var(--line); }
.timeline li::before {
  content: "";
  position: absolute; left: 4px; top: 23px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
}
.timeline b { font-family: var(--mono); font-size: 0.78rem; color: var(--accent-3); font-weight: 500; min-width: 4.5em; }
.timeline span { color: var(--ink-2); font-size: 0.93rem; }
.about-body p { margin-top: 18px; color: var(--ink-2); font-size: clamp(0.96rem, 0.3vw + 0.9rem, 1.08rem); }
.about-body p:first-child { margin-top: 0; }
.about-body strong { color: var(--ink); font-weight: 600; }

/* ----------------------------------------------------------------- Kontakt */
.contact-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: clamp(28px, 4vw, 64px);
  background: color-mix(in srgb, var(--bg-2) 62%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  overflow: hidden;
}
.contact-card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(760px 340px at 12% -20%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%);
  pointer-events: none;
}
.contact-grid {
  position: relative;
  display: grid;
  gap: clamp(26px, 3vw, 54px);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
}
.contact-grid h2 { font-size: clamp(1.7rem, 2.3vw + 0.8rem, 2.9rem); }
.contact-grid > div > p { margin-top: 16px; color: var(--ink-2); max-width: 46ch; }
/* Hinweis, dass derzeit keine neuen Projekte angenommen werden */
.status-note {
  display: flex; align-items: flex-start; gap: 11px;
  margin-top: 20px !important;
  padding: 13px 16px;
  border-radius: var(--radius-s);
  border: 1px solid color-mix(in srgb, var(--brand-500) 34%, transparent);
  background: color-mix(in srgb, var(--brand-700) 13%, transparent);
  color: var(--ink) !important;
  font-size: 0.93rem;
  max-width: 46ch;
}
.status-note .dot {
  flex: none; margin-top: 0.48em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-400);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-400) 20%, transparent);
}
.contact-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.contact-list a,
.contact-list div {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface);
  text-decoration: none;
  transition: transform var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.contact-list a:hover { transform: translateX(4px); border-color: var(--line-hi); background: var(--surface-hi); }
.contact-list svg { width: 19px; height: 19px; flex: none; color: var(--accent-3); }
.contact-list b { display: block; font-size: 0.93rem; font-weight: 580; }
.contact-list small { display: block; font-size: 0.74rem; color: var(--ink-3); margin-top: 2px; letter-spacing: 0.04em; text-transform: uppercase; }

/* ------------------------------------------------------- Reveal on scroll */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.in { opacity: 1; transform: none; transition: opacity 0.7s ease, transform var(--t-slow); }
.reveal-stagger > * { opacity: 0; transform: translateY(22px); }
.reveal-stagger.in > * { opacity: 1; transform: none; transition: opacity 0.65s ease, transform var(--t-slow); }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 0.07s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 0.14s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 0.21s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 0.28s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 0.35s; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: 0.42s; }

/* --------------------------------------------------------- Legal / Dokument */
.doc-head { padding-block: clamp(46px, 6vw, 92px) clamp(20px, 2vw, 32px); }
.doc-head h1 { font-size: clamp(2rem, 3vw + 1rem, 3.4rem); }
.doc-head p { margin-top: 14px; color: var(--ink-2); }
.doc-layout {
  display: grid;
  gap: clamp(24px, 3vw, 54px);
  grid-template-columns: 250px minmax(0, 1fr);
  align-items: start;
  padding-bottom: clamp(50px, 6vw, 110px);
}
.doc-toc { position: sticky; top: 96px; }
.doc-toc h2 {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 12px;
}
.doc-toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; counter-reset: toc; }
.doc-toc a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.88rem;
  color: var(--ink-2);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.doc-toc a:hover { color: var(--ink); background: var(--surface); }
.doc-toc a.active { color: var(--ink); background: var(--surface); border-left-color: var(--accent); }

.doc {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: clamp(22px, 3vw, 48px);
  max-width: 82ch;
}
.doc > section { padding-block: 0; scroll-margin-top: 96px; }
.doc > section + section { margin-top: clamp(40px, 5vw, 76px); padding-top: clamp(34px, 4vw, 54px); border-top: 1px solid var(--line); }
.doc h2 {
  font-size: clamp(1.3rem, 1.2vw + 0.9rem, 1.85rem);
  letter-spacing: -0.03em;
  margin-top: 2.2em;
}
.doc > section > h2:first-child { margin-top: 0; }
.doc h3 { font-size: 1.05rem; margin-top: 2em; color: var(--ink); }
.doc h4 { font-size: 0.96rem; margin-top: 1.7em; color: var(--ink); font-weight: 600; }
.doc p, .doc li { color: var(--ink-2); font-size: 0.96rem; line-height: 1.72; }
.doc p { margin-top: 0.85em; }
.doc ul { margin: 0.9em 0 0; padding-left: 1.3em; display: grid; gap: 0.4em; }
.doc a { color: var(--accent-3); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent-3) 35%, transparent); overflow-wrap: anywhere; }
.doc a:hover { color: var(--ink); }
.doc table { border-collapse: collapse; margin-top: 0.9em; }
.doc td { padding: 4px 18px 4px 0; color: var(--ink-2); font-size: 0.96rem; vertical-align: top; }
.doc td:first-child { color: var(--ink-3); white-space: nowrap; }
.doc strong, .doc b { color: var(--ink); font-weight: 600; }
.doc .legal-note {
  padding: 14px 18px; border-radius: var(--radius-s);
  border: 1px solid color-mix(in srgb, var(--warm) 32%, transparent);
  background: color-mix(in srgb, var(--warm) 9%, transparent);
  font-size: 0.9rem;
}
.back-link {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.86rem; color: var(--ink-2); text-decoration: none;
  margin-bottom: 22px;
}
.back-link:hover { color: var(--ink); }
.back-link svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------- Responsive */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; }
  .ai-band { grid-template-columns: 1fr; gap: 24px; }
  .about-grid { grid-template-columns: 1fr; }
  .portrait { max-width: 420px; }
  .contact-grid { grid-template-columns: 1fr; }
  .doc-layout { grid-template-columns: 1fr; }
  .doc-toc { position: static; }
  .doc-toc ol { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding-bottom: 4px; }
  .doc-toc a { border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
  .doc-toc a.active { border-left-color: transparent; border-bottom-color: var(--accent); }
}

/* Der Header wird zwischen 900 und 1200 px eng: erst rückt die Navigation
   zusammen, dann fällt die Schaltfläche weg, erst darunter das Burger-Menü.
   Vorher riss die Zeile um und die Schaltfläche wurde abgeschnitten. */
@media (max-width: 1200px) {
  .site-nav a { padding: 9px 10px; font-size: 0.83rem; }
  .head-row { gap: 10px; }
}
@media (max-width: 1100px) {
  .head-actions .btn { display: none; }
}
@media (max-width: 900px) {
  .logo small { display: none; }
  .nav-toggle {
    display: grid; place-items: center;
    width: 38px; height: 38px;
    border: 1px solid var(--line); background: var(--surface);
    border-radius: 11px; cursor: pointer;
  }
  .nav-toggle svg { width: 19px; height: 19px; }
  .site-nav {
    position: fixed; inset: auto 0 0 0;
    flex-direction: column; align-items: stretch;
    gap: 4px;
    margin: 0;
    padding: 16px var(--gutter) calc(16px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg-2) 94%, transparent);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    border-top: 1px solid var(--line);
    transform: translateY(102%);
    transition: transform var(--t);
    z-index: 60;
  }
  .site-nav.open { transform: none; }
  .site-nav a { padding: 14px 16px; font-size: 1rem; border-radius: 12px; background: var(--surface); }
  .site-nav a.active::after { display: none; }
  .site-nav a.active { background: var(--surface-hi); }
  section { padding-block: clamp(52px, 10vw, 80px); }
}

@media (max-width: 700px) {
  .hero-stats { grid-template-columns: 1fr; gap: 18px; }
  .hero-stats li + li { padding-top: 18px; border-top: 1px solid var(--line); }
}

/* Sehr große Bildschirme: mehr Luft, größere Typo, mehr Spalten */
@media (min-width: 1700px) {
  :root { --shell: 1800px; }
  .cards { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
  .projects { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 2300px) {
  :root { --shell: 2100px; }
  body { font-size: 18.5px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; }
}

@media print {
  .aurora, .grain, .site-head, .doc-toc, #mahop-app-bar, #mahop-apps { display: none !important; }
  body { background: #fff; color: #000; }
  .doc { border: 0; padding: 0; background: none; }
  .doc p, .doc li, .doc td { color: #000; }
}