/* =========================================================================
   sitterberg.com, modern dark/technical redesign
   Handcrafted, dependency-free stylesheet (no Bootstrap, no jQuery).
   ========================================================================= */

/* ---------- Design tokens ------------------------------------------------ */
:root {
  --bg:          #0a0c11;
  --bg-1:        #0d1017;
  --surface:     #12161f;
  --surface-2:   #161b26;
  --surface-3:   #1b212e;
  --line:        rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .16);

  --text:        #eceef4;
  --text-muted:  #9aa3b4;
  /* #6b7385 kam auf dem dunklen Grund nur auf 4.1:1 und fiel damit unter
     die WCAG-AA-Schwelle von 4.5:1 (Kopfzeilen-Tagline, Footer, Meta-Labels). */
  --text-dim:    #7d859a;

  --accent:      #5eead4;   /* teal */
  --accent-soft: rgba(94, 234, 212, .12);
  --accent-line: rgba(94, 234, 212, .30);
  --accent-ink:  #04231f;   /* dark text on accent */
  --amber:       #ffca63;   /* sparing highlight */

  --radius:      18px;
  --radius-sm:   11px;
  --radius-pill: 999px;

  --maxw:        1140px;
  --gutter:      clamp(20px, 5vw, 44px);
  --nav-h:       68px;      /* Höhe der Kopfzeile bzw. ihrer ersten Zeile */

  --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Space Grotesk", var(--font-sans);
  --font-mono:    "Space Mono", ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, monospace;

  --shadow-lg: 0 30px 80px -30px rgba(0, 0, 0, .7);
  --shadow-md: 0 18px 50px -24px rgba(0, 0, 0, .65);

  --ease: cubic-bezier(.22, .7, .2, 1);
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: .1px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Ambient background: fine grid + soft accent glows, purely CSS */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60% 55% at 78% -5%, rgba(94, 234, 212, .10), transparent 60%),
    radial-gradient(55% 45% at 8% 8%,  rgba(120, 140, 255, .07), transparent 60%),
    radial-gradient(50% 60% at 50% 115%, rgba(255, 202, 99, .05), transparent 60%);
  pointer-events: none;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .022) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 40%, transparent 100%);
  pointer-events: none;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--accent); color: var(--accent-ink); }

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

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

.section {
  position: relative;
  padding-block: clamp(64px, 9vw, 128px);
  /* Sprungziele nicht unter der fixierten Kopfzeile parken */
  scroll-margin-top: 84px;
}
.section + .section { padding-top: 0; }

.section-head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 60px); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--accent-line);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0;
  color: #fff;
}

.section-title {
  font-size: clamp(30px, 4.4vw, 48px);
  margin-bottom: 18px;
}
.section-intro {
  color: var(--text-muted);
  font-size: clamp(16px, 1.6vw, 19px);
  max-width: 64ch;
  margin: 0;
}

.accent { color: var(--accent); }
.muted  { color: var(--text-muted); }

/* ---------- Buttons ------------------------------------------------------ */
.btn {
  --pad-y: 13px;
  --pad-x: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: var(--pad-y) var(--pad-x);
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .25s var(--ease), background .25s var(--ease),
              border-color .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; }
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 12px 30px -12px rgba(94, 234, 212, .55);
}
.btn-primary:hover {
  background: #7bf0dd;
  box-shadow: 0 18px 40px -14px rgba(94, 234, 212, .7);
}

.btn-ghost {
  background: rgba(255, 255, 255, .03);
  border-color: var(--line-strong);
  color: var(--text);
}
.btn-ghost:hover {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: #fff;
}

/* ---------- Navigation --------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(10, 12, 17, .72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* min-height statt height: das Mobil-Panel klappt innerhalb der Leiste auf
     und darf sie wachsen lassen. */
  min-height: var(--nav-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.01em;
  font-size: 16px;
  color: #fff;
  min-width: 0;
}
.brand .mono-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(145deg, var(--surface-3), var(--surface));
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}
/* Der Markenname darf nie umbrechen, sonst wächst die Kopfzeile auf
   schmalen Geräten auf zwei bis drei Zeilen an. */
.brand .brand-name { white-space: nowrap; }
.brand .brand-name small {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 400;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  display: inline-block;
  /* Ein umbrechender Menüpunkt ("KI im Frontend", "AI in the Frontend")
     macht die Kopfzeile zweizeilig und schiebt die Marke in die Links. */
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 14.5px;
  color: var(--text-muted);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav-links a:hover { color: #fff; }
.nav-links a.active { color: var(--accent); }

.nav-cta { margin-left: 14px; }

/* ---------- Sprachumschalter ---------------------------------------------
   Beide Sprachen stehen nebeneinander, die aktuelle als hervorgehobener
   Text statt als Verweis auf sich selbst. Die Kürzel bleiben bewusst kurz;
   die Einordnung übernimmt das aria-label des nav-Elements. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  flex: none;
  margin-left: 14px;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .03);
}
.ls-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Mindestens 24 x 24 px, damit die Fläche auch mit Touch sicher zu
     treffen ist (WCAG 2.5.8). */
  min-width: 36px;
  min-height: 26px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--text-muted);
  transition: color .2s var(--ease), background .2s var(--ease);
}
a.ls-item:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.ls-item.current { background: var(--accent-soft); color: var(--accent); }

.nav-toggle {
  display: none;
  flex: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
  color: #fff;
  cursor: pointer;
  align-items: center; justify-content: center;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.nav-toggle svg { width: 20px; height: 20px; display: block; }
.nav-toggle .nt-close { display: none; }
.nav.menu-open .nav-toggle {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}
.nav.menu-open .nav-toggle .nt-open { display: none; }
.nav.menu-open .nav-toggle .nt-close { display: block; }

/* ---------- Hero --------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: clamp(120px, 17vh, 190px);
  padding-bottom: clamp(60px, 8vw, 110px);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.35fr .85fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero-availability {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px 7px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .02);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin-bottom: 26px;
}
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(94, 234, 212, .7);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(94, 234, 212, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(94, 234, 212, 0); }
  100% { box-shadow: 0 0 0 0 rgba(94, 234, 212, 0); }
}

.hero h1 {
  font-size: clamp(38px, 6.6vw, 76px);
  line-height: 1.02;
  letter-spacing: -.035em;
  margin-bottom: 24px;
}
.hero h1 .grad {
  background: linear-gradient(100deg, var(--accent) 10%, #b9f5e9 55%, var(--amber) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub {
  font-size: clamp(16px, 1.8vw, 20px);
  color: var(--text-muted);
  max-width: 56ch;
  margin: 0 0 34px;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 40px; }

.hero-stack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.hero-stack .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.hero-stack .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tech-chip {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-muted);
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .015);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.tech-chip:hover { color: var(--accent); border-color: var(--accent-line); }

/* Portrait card */
.hero-portrait {
  position: relative;
  justify-self: end;
  width: min(340px, 100%);
}
.portrait-frame {
  position: relative;
  border-radius: 22px;
  padding: 10px;
  background: linear-gradient(160deg, rgba(94, 234, 212, .35), rgba(255, 255, 255, .04) 45%, rgba(255, 202, 99, .18));
  box-shadow: var(--shadow-lg);
}
.portrait-frame::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  pointer-events: none;
}
.portrait-frame img {
  border-radius: 14px;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: saturate(.92) contrast(1.02);
  transition: filter .5s var(--ease);
}
.portrait-frame:hover img { filter: saturate(1.08) contrast(1.03); }

.portrait-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 11px 15px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--surface), var(--bg-1));
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-md);
}
.portrait-badge .pb-icon {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--accent-soft); color: var(--accent);
}
.portrait-badge .pb-icon svg { width: 18px; height: 18px; }
.portrait-badge b { font-family: var(--font-display); font-size: 14px; color: #fff; display: block; }
.portrait-badge span { font-size: 12px; color: var(--text-muted); font-family: var(--font-mono); }

/* ---------- Marquee / credentials strip ---------------------------------- */
.credbar {
  border-block: 1px solid var(--line);
  background: rgba(255, 255, 255, .012);
}
.credbar .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 22px 40px;
  padding-block: 30px;
}
.cred {
  display: flex;
  align-items: center;
  gap: 13px;
}
.cred .c-icon {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--accent);
  flex: none;
}
.cred .c-icon svg { width: 19px; height: 19px; }
.cred b { font-family: var(--font-display); font-size: 15px; color: #fff; display: block; line-height: 1.2; }
.cred span { font-size: 12.5px; color: var(--text-dim); }

/* ---------- Cards -------------------------------------------------------- */
.card {
  position: relative;
  background: linear-gradient(180deg, var(--surface), var(--bg-1));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, var(--accent-line), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}
.card:hover::before { opacity: 1; }

.card-icon {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 13px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  margin-bottom: 20px;
}
.card-icon svg { width: 23px; height: 23px; }
.card h3 { font-size: 21px; margin-bottom: 10px; }
.card p { margin: 0; color: var(--text-muted); font-size: 15.5px; }

/* Grids */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }

/* ---------- Profil (about) ---------------------------------------------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr .8fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: start;
}
.about-body p { color: var(--text-muted); margin: 0 0 18px; font-size: 17px; }
.about-body p strong { color: var(--text); font-weight: 600; }

.cred-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.cred-chips .chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, .02);
  font-size: 13.5px;
  color: var(--text);
}
.cred-chips .chip svg { width: 15px; height: 15px; color: var(--accent); }

.about-side {
  position: sticky;
  top: 96px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface), var(--bg-1));
  padding: 26px;
}
.about-side h4 {
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 400; margin-bottom: 18px;
}
.factlist { list-style: none; margin: 0; padding: 0; }
.factlist li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
}
.factlist li:first-child { border-top: none; padding-top: 0; }
.factlist .k { color: var(--text-dim); }
.factlist .v { color: var(--text); text-align: right; font-weight: 500; }

/* ---------- Skills / Schwerpunkte --------------------------------------- */
.skill-col h3 {
  display: flex; align-items: center; gap: 12px;
  font-size: 17px; margin-bottom: 18px;
}
.skill-col h3 .s-ico {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent-line);
}
.skill-col h3 .s-ico svg { width: 16px; height: 16px; }
.skill-list { display: flex; flex-wrap: wrap; gap: 9px; }
.skill-list span {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 7px 13px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .015);
  color: var(--text-muted);
  transition: color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.skill-list span:hover { color: var(--accent); border-color: var(--accent-line); transform: translateY(-2px); }

/* ---------- Schulungen --------------------------------------------------- */
.training-card { display: flex; flex-direction: column; gap: 14px; }
.training-card .t-top { display: flex; align-items: center; justify-content: space-between; }
.training-num {
  font-family: var(--font-mono);
  font-size: 12px; color: var(--text-dim);
  letter-spacing: .1em;
}
.training-card h3 { font-size: 20px; }
.training-tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
  padding: 4px 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--accent-line); background: var(--accent-soft);
}

/* ---------- Publikationen / Links --------------------------------------- */
.link-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.link-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  min-height: 150px;
}
.link-card .lc-head { display: flex; align-items: center; justify-content: space-between; }
.link-card .lc-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  letter-spacing: -.01em;
}
.link-card .lc-arrow {
  color: var(--text-dim);
  transition: color .25s var(--ease), transform .25s var(--ease);
}
.link-card:hover .lc-arrow { color: var(--accent); transform: translate(3px, -3px); }
.link-card .lc-kind {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
}
.link-card p { margin: 0; color: var(--text-muted); font-size: 14.5px; }

/* ---------- Contact ------------------------------------------------------ */
.contact-wrap {
  position: relative;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 6px);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(94, 234, 212, .10), transparent 55%),
    linear-gradient(180deg, var(--surface), var(--bg-1));
  padding: clamp(34px, 5vw, 60px);
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(32px, 5vw, 60px);
  align-items: center;
  overflow: hidden;
}
.contact-wrap h2 { font-size: clamp(28px, 3.6vw, 42px); margin-bottom: 16px; }
.contact-wrap p { color: var(--text-muted); margin: 0 0 28px; max-width: 46ch; }

.contact-card {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(10, 12, 17, .5);
  padding: 26px;
}
.contact-card .cc-row { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; }
.contact-card .cc-row + .cc-row { border-top: 1px solid var(--line); }
.contact-card .cc-ico {
  flex: none;
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent-line);
}
.contact-card .cc-ico svg { width: 18px; height: 18px; }
.contact-card .cc-k {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 3px;
}
.contact-card .cc-v { color: var(--text); font-size: 15px; line-height: 1.5; }
.contact-card a.cc-v:hover { color: var(--accent); }

.socials { display: flex; gap: 10px; margin-top: 22px; }
.socials a {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, .02);
  color: var(--text-muted);
  transition: color .25s var(--ease), border-color .25s var(--ease),
              background .25s var(--ease), transform .25s var(--ease);
}
.socials a:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); transform: translateY(-2px); }
.socials a svg { width: 20px; height: 20px; }

/* ---------- Footer ------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--line);
  padding-block: 48px 30px;
  margin-top: clamp(48px, 8vw, 100px);
}
.footer-top {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px;
  padding-bottom: 30px; border-bottom: 1px solid var(--line);
}
.footer .brand { margin-bottom: 12px; }
.footer-blurb { color: var(--text-dim); font-size: 14px; max-width: 40ch; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-nav a { color: var(--text-muted); font-size: 14.5px; }
.footer-nav a:hover { color: var(--accent); }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  padding-top: 24px;
  color: var(--text-dim); font-size: 13px;
  font-family: var(--font-mono);
}

/* ---------- Scroll reveal ------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }

/* ---------- Scroll to top ------------------------------------------------ */
.to-top {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 90;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(13, 16, 23, .85);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line-strong);
  color: var(--accent);
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top svg { width: 20px; height: 20px; }

/* ---------- Responsive --------------------------------------------------- */
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-portrait { justify-self: start; order: -1; width: min(280px, 70%); margin-bottom: 8px; }
  .about-grid { grid-template-columns: 1fr; }
  .about-side { position: static; }
  .grid-3, .link-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-wrap { grid-template-columns: 1fr; }
}

/* ---------- Kopfzeile: Umschlagpunkt zum Menü ----------------------------
   Der Umschlagpunkt lag bei 720px, obwohl die waagerechte Navigation schon
   deutlich früher nicht mehr passte: Ab etwa 1000px überlappten Marke und
   Menüpunkte, "KI im Frontend" brach um und die Schaltfläche lief aus dem
   Bild. Mit dem Sprachumschalter kommt weitere Breite hinzu, und die
   englischen Beschriftungen sind länger als die deutschen.

   Der Wert ist gemessen, nicht geraten: Ab 1161px passen Marke, Menüpunkte,
   Sprachumschalter und Schaltfläche in beiden Sprachen nebeneinander,
   darunter überlappen sie. Er steht in js/site.js noch einmal (matchMedia),
   um ein offenes Panel beim Wechsel auf die Desktop-Breite zu schließen --
   beide Stellen gehören zusammen. */
@media (max-width: 1160px) {
  /* Das Menü klappt als Teil der Kopfzeile auf, nicht als absolut
     positioniertes Element daneben. Dadurch erbt es Hintergrund und
     Weichzeichner der Leiste, es gibt keine fest verdrahtete Höhe von 68px,
     und der Umschalter bleibt immer sichtbar und bedienbar. */
  .nav-inner {
    flex-wrap: wrap;
    /* Kein Zeilenabstand: das Panel bringt seine eigenen Abstände mit. Ein
       row-gap würde die Leiste im geschlossenen Zustand um die Gap-Höhe
       wachsen lassen, weil die zweite (leere) Zeile trotzdem existiert. */
    row-gap: 0;
    /* Zeilen nicht auf die Mindesthöhe strecken. Sonst verteilt der Browser im
       geschlossenen Zustand den freien Platz auf beide Flex-Zeilen und die
       erste Zeile rutscht beim Aufklappen wieder nach oben. */
    align-content: flex-start;
  }
  .brand       { order: 1; }
  .nav-toggle  { order: 2; display: inline-flex; }
  .nav-main    { order: 3; flex-basis: 100%; }
  .nav-cta     { order: 4; flex-basis: 100%; }
  /* Der Sprachumschalter wandert mit ins Panel. In der geschlossenen Leiste
     ist neben Marke und Umschalter kein Platz, ohne dass der Markenname auf
     schmalen Geräten umbricht. */
  .lang-switch { order: 5; flex-basis: 100%; }

  /* Die erste Flex-Zeile bekommt über die Marke eine feste Höhe. Damit steht
     die Kopfzeile in beiden Zuständen exakt gleich -- ohne das springt sie
     beim Aufklappen um wenige Pixel. */
  .brand { min-height: var(--nav-h); }

  .nav-links, .nav-cta, .lang-switch { display: none; }

  .nav.menu-open,
  .nav.menu-open.scrolled {
    background: rgba(10, 12, 17, .97);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom-color: var(--line);
  }
  /* Auf niedrigen Geräten (Querformat) muss das Panel selbst scrollen
     können, statt unten aus dem Bild zu laufen. */
  .nav.menu-open .nav-inner {
    max-height: 100dvh;
    overflow-y: auto;
    padding-bottom: 22px;
  }
  .nav.menu-open .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding-top: 10px;
    margin-top: 8px;
    border-top: 1px solid var(--line);
  }
  .nav.menu-open .nav-links a { padding: 13px 12px; font-size: 16px; }
  .nav.menu-open .nav-links a.active { background: var(--accent-soft); }
  .nav.menu-open .nav-cta {
    display: inline-flex;
    justify-content: center;
    margin-top: 14px;
  }
  .nav.menu-open .lang-switch {
    display: inline-flex;
    justify-content: center;
    margin: 14px 0 0;
    padding: 4px;
  }
  .nav.menu-open .ls-item { min-height: 40px; flex: 1; font-size: 14px; }

  /* Hintergrund nicht mitscrollen lassen, solange das Menü offen ist */
  html.nav-locked, html.nav-locked body { overflow: hidden; }
}

@media (max-width: 720px) {
  .grid-3, .grid-2, .link-grid { grid-template-columns: 1fr; }
  .credbar .container { justify-content: flex-start; }
}

@media (max-width: 420px) {
  body { font-size: 16px; }
  .card { padding: 22px; }

  /* Schaltflächen sind per Voreinstellung nicht umbrechbar (white-space:
     nowrap). Auf sehr schmalen Geräten ragten längere Beschriftungen damit
     über den Viewport hinaus, deshalb hier volle Breite statt Überlauf. */
  .btn { white-space: normal; text-align: center; }
  .hero-cta .btn,
  .subhero-cta .btn,
  .cta-band .cta-actions .btn { width: 100%; justify-content: center; }

  .brand { font-size: 15px; gap: 10px; }
}

/* ---------- Reduced motion ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================================
   Multi-page components (subpages, teasers, CTA band, KI-Frontend)
   ========================================================================= */

/* ---------- Subpage hero ------------------------------------------------- */
.subhero {
  position: relative;
  padding-top: clamp(122px, 16vh, 184px);
  padding-bottom: clamp(20px, 4vw, 44px);
}
.subhero-inner { max-width: 820px; }
.subhero h1 {
  font-size: clamp(34px, 5.6vw, 62px);
  line-height: 1.04;
  letter-spacing: -.03em;
  margin-bottom: 22px;
}
.subhero h1 .grad {
  background: linear-gradient(100deg, var(--accent) 10%, #b9f5e9 55%, var(--amber) 130%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.subhero-intro {
  color: var(--text-muted);
  font-size: clamp(16px, 1.75vw, 20px);
  max-width: 62ch;
  margin: 0;
}
.subhero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.subhero-meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 30px;
}

/* ---------- Teaser cards (landing) -------------------------------------- */
.teaser-card { display: flex; flex-direction: column; gap: 12px; min-height: 190px; }
.teaser-card .tc-top { display: flex; align-items: center; justify-content: space-between; }
.teaser-card h3 { font-size: 20px; }
.teaser-card p { margin: 0; color: var(--text-muted); font-size: 15px; flex: 1; }
.tc-more {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .04em;
  color: var(--accent); margin-top: 4px;
}
.tc-more svg { width: 15px; height: 15px; flex: none; transition: transform .25s var(--ease); }
.card:hover .tc-more svg { transform: translateX(4px); }

/* ---------- Feature band (KI highlight on landing) ---------------------- */
.feature {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 5vw, 62px);
  align-items: center;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 6px);
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(94, 234, 212, .12), transparent 55%),
    radial-gradient(90% 120% at 0% 100%, rgba(255, 202, 99, .06), transparent 60%),
    linear-gradient(180deg, var(--surface), var(--bg-1));
  padding: clamp(30px, 4.6vw, 58px);
  overflow: hidden;
}
.feature h2 { font-size: clamp(27px, 3.4vw, 40px); margin-bottom: 16px; letter-spacing: -.025em; }
.feature > .f-copy p { color: var(--text-muted); margin: 0 0 24px; max-width: 52ch; }

.f-panel {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(10, 12, 17, .55);
  padding: 24px;
  box-shadow: var(--shadow-md);
}
.f-panel .fp-head {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-dim);
  padding-bottom: 16px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.f-panel .fp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* ---------- Check list --------------------------------------------------- */
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.check-list li {
  display: flex; align-items: flex-start; gap: 12px;
  color: var(--text-muted); font-size: 15px; line-height: 1.5;
}
.check-list li b { color: var(--text); font-weight: 600; }
.check-list li .cl-ico {
  flex: none; margin-top: 2px;
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 7px;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent-line);
}
.check-list li .cl-ico svg { width: 13px; height: 13px; }

/* ---------- Process steps (KI page) ------------------------------------- */
.process { display: grid; gap: 16px; }
.step {
  display: flex; gap: 22px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface), var(--bg-1));
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.step:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.step .s-num {
  flex: none;
  font-family: var(--font-mono);
  font-size: 15px; font-weight: 700;
  color: var(--accent);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}
.step h3 { font-size: 19px; margin-bottom: 8px; }
.step p { margin: 0; color: var(--text-muted); font-size: 15px; }

/* ---------- CTA band ----------------------------------------------------- */
.cta-band {
  position: relative;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 6px);
  background:
    radial-gradient(100% 140% at 50% 0%, rgba(94, 234, 212, .12), transparent 60%),
    linear-gradient(180deg, var(--surface), var(--bg-1));
  padding: clamp(40px, 6vw, 76px) clamp(24px, 5vw, 60px);
  overflow: hidden;
}
.cta-band .eyebrow { justify-content: center; }
.cta-band .eyebrow::before { display: none; }
.cta-band h2 { font-size: clamp(28px, 4vw, 46px); margin-bottom: 16px; letter-spacing: -.025em; }
.cta-band p { color: var(--text-muted); max-width: 52ch; margin: 0 auto 30px; }
.cta-band .cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* Simple section lead used on subpages */
.lead-narrow { max-width: 64ch; }

/* ---------- Timeline (Vorträge) ----------------------------------------- */
.timeline { position: relative; list-style: none; margin: 0; padding: 0 0 0 38px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 7px; top: 10px; bottom: 10px;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent-line), rgba(255, 255, 255, .10) 65%, transparent);
}
.tl-item { position: relative; margin-bottom: 22px; }
.tl-item::before {
  content: "";
  position: absolute;
  left: -38px; top: 26px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 5px rgba(94, 234, 212, .10);
}
.tl-year {
  font-family: var(--font-mono);
  font-size: 12.5px; letter-spacing: .18em;
  color: var(--accent);
  margin-bottom: 10px;
}
.tl-card { display: block; }
.tl-card h3 { font-size: 20px; margin-bottom: 14px; }
.tl-talks { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.tl-talks li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  color: var(--text-muted); font-size: 15px; line-height: 1.45;
  padding-left: 16px; position: relative;
}
.tl-talks li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent-line);
}
.tl-talks li b { color: var(--text); font-weight: 600; }
.tl-talks li .tl-ev {
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim);
}

/* ---------- Talk detail (Jahresseiten) ---------------------------------- */
.talk { margin-bottom: 22px; }
.talk-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.talk-meta span {
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--radius-pill);
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}
.talk-meta span.plain {
  border-color: var(--line); background: rgba(255, 255, 255, .02); color: var(--text-dim);
}
.talk h2 { font-size: clamp(21px, 2.5vw, 28px); margin-bottom: 14px; letter-spacing: -.02em; }
.talk p { color: var(--text-muted); margin: 0 0 14px; font-size: 15.5px; }
.talk p:last-child { margin-bottom: 0; }
.talk-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.talk-tags span {
  font-family: var(--font-mono); font-size: 12px;
  padding: 5px 11px; border-radius: 9px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .015);
  color: var(--text-muted);
}

/* ---------- Pager (Jahr zurück / vor) ----------------------------------- */
.pager {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--line);
}
.pager .spacer { flex: 1; }

/* ---------- Bilder: Band, Galerie, Porträt ------------------------------ */
.media {
  position: relative;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.media img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  /* Die Quellfotos sind Querformat 4:3. Der Bildausschnitt wird oben
     angesetzt, damit in den flachen Bändern die Köpfe im Bild bleiben. */
  object-position: center 38%;
  filter: saturate(.95) contrast(1.02);
}
/* 16/6.5 schnitt bei 4:3-Vorlagen 46 % des Bildes weg und köpfte auf breiten
   Bildschirmen die abgebildeten Personen. */
.media-wide img { aspect-ratio: 16 / 7.6; }
.media-top img { aspect-ratio: 16 / 7.6; object-position: center 40%; }
.media-high img { object-position: center 28%; }
.media-portrait img { aspect-ratio: 3 / 4; }
.media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8, 10, 15, .88), rgba(8, 10, 15, .15) 45%, transparent 70%);
  pointer-events: none;
}
.media figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: clamp(18px, 3vw, 30px);
  color: var(--text-muted);
  font-size: 14.5px;
}
.media figcaption b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(17px, 2vw, 22px);
  color: #fff;
  letter-spacing: -.01em;
  margin-bottom: 4px;
}
.media figcaption .cap-kind {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

.shot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.shot-grid .shot { height: 100%; }
.shot-tall { grid-row: span 2; }
.shot-tall img { aspect-ratio: auto; height: 100%; object-position: center 25%; }
.shot-wide { grid-column: span 2; }
.shot-wide img { aspect-ratio: 16 / 6; }
.shot {
  position: relative; margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.shot:hover { border-color: var(--accent-line); transform: translateY(-3px); }
.shot img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  filter: saturate(.92) contrast(1.02);
  transition: transform .6s var(--ease), filter .4s var(--ease);
}
.shot:hover img { transform: scale(1.05); filter: saturate(1.05) contrast(1.03); }
.shot::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8, 10, 15, .9), rgba(8, 10, 15, .1) 55%, transparent 75%);
  pointer-events: none;
}
.shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 18px;
  font-size: 14px; color: var(--text);
  font-weight: 500; line-height: 1.35;
}
.shot figcaption span {
  display: block;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 5px; font-weight: 400;
}

/* Porträt neben der Seiten-Einleitung */
.subhero-photo { max-width: 340px; margin-left: auto; }
.subhero-photo img { object-position: center 32%; }
.subhero-photo figcaption { font-size: 14px; color: var(--text); font-weight: 500; }

/* ---------- Freisteller mit Akzent-Glow --------------------------------- */
.subhero-split {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: end;
}
.cutout {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin: 0;
  min-height: 300px;
}
.cutout::before {
  content: "";
  position: absolute;
  left: 50%; bottom: -10px;
  width: 120%; height: 88%;
  transform: translateX(-50%);
  background:
    radial-gradient(58% 62% at 50% 92%, rgba(94, 234, 212, .30), rgba(94, 234, 212, .07) 55%, transparent 76%),
    radial-gradient(42% 46% at 50% 100%, rgba(255, 202, 99, .12), transparent 70%);
  filter: blur(2px);
}
.cutout::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -6px;
  width: 74%; height: 26px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(94, 234, 212, .35), transparent 78%);
}
.cutout img {
  position: relative;
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 430px;
  filter: drop-shadow(0 26px 44px rgba(0, 0, 0, .65)) contrast(1.03);
  -webkit-mask-image: linear-gradient(to bottom, #000 74%, rgba(0, 0, 0, .55) 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 74%, rgba(0, 0, 0, .55) 90%, transparent 100%);
}

/* ---------- Responsive (multi-page) ------------------------------------- */
@media (max-width: 940px) {
  .feature { grid-template-columns: 1fr; }
  .shot-grid { grid-template-columns: repeat(2, 1fr); }
  /* Beide Selektoren nennen, sonst gewinnt .media-top allein durch seine
     spätere Position in der Datei und das Bild bleibt im 16/7.6-Streifen. */
  .media-wide img,
  .media-top img { aspect-ratio: 16 / 9; }
  .subhero-split { grid-template-columns: 1fr; }

  /* Freisteller und Porträt waren hier bisher komplett ausgeblendet – auf
     dem Telefon fehlten damit auf zwei Seiten sämtliche Bilder. Sie werden
     jetzt verkleinert und zentriert weiter gezeigt. */
  .subhero-split { justify-items: center; }
  .cutout { min-height: 0; margin-top: 8px; width: 100%; }
  .cutout img { max-height: min(46vh, 340px); }
  /* Der Glow ist auf dem Desktop 120 % breit; in der einspaltigen Ansicht
     füllt der Freisteller die volle Spalte und der Überstand erzeugte einen
     waagerechten Scrollbalken. */
  .cutout::before { width: 100%; }
  .subhero-photo { max-width: 320px; margin-inline: auto; margin-top: 8px; }
}
@media (max-width: 620px) {
  .shot-grid { grid-template-columns: 1fr; }
  .shot-tall, .shot-wide { grid-row: auto; grid-column: auto; }
  /* Die Quelldatei ist ein sehr hohes Hochformat (575x1270, 0.45). In einem
     3/4-Rahmen fielen 40 % des Bildes weg, unter anderem das Speaker-Badge.
     3/5 kommt dem Original deutlich näher und bleibt trotzdem handlich. */
  .shot-tall img { aspect-ratio: 3 / 5; height: auto; object-position: center 30%; }
  .shot-wide img { aspect-ratio: 4 / 3; }
  .media-wide img,
  .media-top img { aspect-ratio: 4 / 3; }
}
@media (max-width: 720px) {
  .step { flex-direction: column; gap: 14px; }
  .timeline { padding-left: 28px; }
  .tl-item::before { left: -28px; width: 13px; height: 13px; }
  .timeline::before { left: 6px; }
}

/* =========================================================================
   Druck / Print
   Das Bildschirm-Design ist dunkel, animiert und arbeitet mit fixierten
   Elementen, Verläufen und Overlays. Auf Papier ergibt das nichts Lesbares,
   deshalb hier ein eigenständiges, tintensparendes Schwarz-auf-Weiß-Layout.
   Es funktioniert bewusst auch dann, wenn der Browser Hintergrundgrafiken
   nicht mitdruckt (Standardeinstellung).
   ========================================================================= */
@media print {

  /* ---------- Seite ------------------------------------------------------ */
  @page {
    size: A4;
    margin: 16mm 14mm;
  }

  /* Farbtokens auf ein helles Schema umstellen: greift überall dort,
     wo die Komponenten die Variablen benutzen. */
  :root {
    --bg:          #fff;
    --bg-1:        #fff;
    --surface:     #fff;
    --surface-2:   #fff;
    --surface-3:   #fff;
    --line:        #c2c7d0;
    --line-strong: #8d94a1;

    --text:        #14161b;
    --text-muted:  #33383f;
    --text-dim:    #5b626e;

    --accent:      #0a6153;
    --accent-soft: transparent;
    --accent-line: #0a6153;
    --accent-ink:  #000;
    --amber:       #7a5200;

    --radius:      6px;
    --radius-sm:   5px;

    --shadow-lg:   none;
    --shadow-md:   none;
  }

  html { scroll-behavior: auto; }

  body {
    background: #fff !important;
    color: var(--text);
    font-size: 10.5pt;
    line-height: 1.5;
    overflow: visible;
    -webkit-font-smoothing: auto;
  }

  /* Ambient-Grid und Glows entfernen */
  body::before,
  body::after { display: none !important; }

  /* Keine Animationen, keine Transitions, keine Hover-Reste */
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Scroll-Reveal: ohne diese Regel bleibt fast die gesamte Seite
     unsichtbar, weil der IntersectionObserver beim Drucken nie auslöst. */
  .reveal,
  .reveal.in {
    opacity: 1 !important;
    transform: none !important;
    transition-delay: 0s !important;
    will-change: auto;
  }

  /* ---------- Nur für den Bildschirm gedachte Elemente ------------------- */
  .nav nav,
  .nav-links,
  .nav-cta,
  .nav-toggle,
  .to-top,
  .btn,
  .hero-cta,
  .subhero-cta,
  .cta-actions,
  .tc-more,
  .pager,
  .socials,
  .lc-arrow { display: none !important; }

  /* Die Kopfzeile bleibt als schlichter Dokumentkopf mit Namen erhalten */
  .nav {
    position: static !important;
    background: none !important;
    border-bottom: 1px solid var(--line);
  }
  .nav-inner { height: auto; padding-block: 0 10pt; }

  .brand,
  .brand .brand-name,
  h1, h2, h3, h4,
  .cred b,
  .portrait-badge b,
  .link-card .lc-logo,
  .media figcaption b,
  .shot figcaption,
  .tl-talks li b,
  .check-list li b { color: var(--text); }

  .brand .mono-mark {
    background: none;
    border: 1px solid var(--line-strong);
    color: var(--text);
  }

  /* Farbverlaufs-Text (-webkit-background-clip: text) druckt sonst
     als unsichtbarer, transparenter Text. */
  .grad {
    background: none !important;
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
  }

  /* ---------- Abstände / Layout ----------------------------------------- */
  .container {
    max-width: none;
    padding-inline: 0;
  }

  .hero,
  .subhero {
    padding-top: 14pt;
    padding-bottom: 10pt;
  }
  .section { padding-block: 16pt; }
  .section + .section { padding-top: 0; }
  .section-head { margin-bottom: 12pt; }

  .hero h1 { font-size: 24pt; margin-bottom: 8pt; }
  .subhero h1 { font-size: 21pt; margin-bottom: 8pt; }
  .section-title { font-size: 15pt; margin-bottom: 6pt; }
  .feature h2,
  .cta-band h2,
  .contact-wrap h2 { font-size: 14pt; margin-bottom: 6pt; }
  .talk h2 { font-size: 12.5pt; }
  .card h3,
  .step h3,
  .teaser-card h3,
  .training-card h3,
  .tl-card h3 { font-size: 11.5pt; }

  .hero-sub,
  .subhero-intro,
  .section-intro { font-size: 11pt; }

  /* Drei Spalten sind auf A4 zu schmal für Fließtext */
  .grid-3,
  .link-grid { grid-template-columns: repeat(2, 1fr); gap: 10pt; }
  .grid-2 { gap: 10pt; }
  .shot-grid { grid-template-columns: repeat(2, 1fr); gap: 10pt; }
  .shot-tall { grid-row: auto; }
  .shot-wide { grid-column: auto; }

  .hero-grid,
  .about-grid,
  .feature,
  .contact-wrap,
  .subhero-split { gap: 16pt; }

  .about-side { position: static; }

  /* ---------- Flächen entschärfen --------------------------------------- */
  .card,
  .step,
  .f-panel,
  .contact-card,
  .contact-wrap,
  .feature,
  .cta-band,
  .about-side,
  .media,
  .shot,
  .portrait-badge,
  .credbar {
    background: none !important;
    border-color: var(--line);
  }
  .card::before,
  .media::after,
  .shot::after,
  .portrait-frame::after,
  .cutout::before,
  .cutout::after { display: none !important; }

  .card,
  .step,
  .f-panel,
  .contact-card { padding: 12pt; }
  .contact-wrap,
  .feature,
  .cta-band { padding: 14pt; }

  .card-icon,
  .cred .c-icon,
  .step .s-num,
  .contact-card .cc-ico,
  .check-list li .cl-ico,
  .skill-col h3 .s-ico,
  .portrait-badge .pb-icon {
    background: none !important;
    border: 1px solid var(--line);
    color: var(--text);
  }
  .card-icon { width: 30px; height: 30px; margin-bottom: 8pt; }
  .card-icon svg { width: 16px; height: 16px; }

  .tech-chip,
  .skill-list span,
  .cred-chips .chip,
  .talk-tags span,
  .talk-meta span,
  .training-tag,
  .hero-availability {
    background: none !important;
    border-color: var(--line);
    color: var(--text-muted);
  }

  /* Rein dekorative Statuspunkte; ohne Füllfarbe bleibt sonst ein
     verirrtes „o“ vor dem Text stehen. */
  .dot,
  .f-panel .fp-dot { display: none !important; }

  .teaser-card,
  .link-card { min-height: 0; }

  /* ---------- Bilder ----------------------------------------------------- */
  .portrait-frame {
    padding: 0;
    background: none !important;
    border: 1px solid var(--line);
    border-radius: 6px;
  }
  .portrait-frame img { border-radius: 5px; }
  .hero-portrait { width: 45mm; }

  .cutout { min-height: 0; }
  .cutout img { max-height: 70mm; }

  .subhero-photo { max-width: 50mm; }

  /* Vollformatige Bilder belegen sonst je eine komplette Seite */
  .media-portrait { max-width: 68mm; }
  .media-wide img { aspect-ratio: 16 / 7; }
  .shot img { aspect-ratio: 4 / 3; height: auto; }

  /* Bildunterschriften liegen am Bildschirm als Overlay im Bild, dort mit
     hellem Text auf abgedunkeltem Verlauf. Ohne den Verlauf wären sie
     unlesbar, also unter das Bild setzen. */
  .media,
  .shot { overflow: visible; }
  .media figcaption,
  .shot figcaption {
    position: static;
    padding: 6pt 0 0;
    color: var(--text-muted);
    font-size: 9pt;
  }
  .media figcaption b { font-size: 10.5pt; }
  .media figcaption .cap-kind,
  .shot figcaption span { color: var(--text-dim); }
  .media img,
  .shot img { height: auto; }

  /* ---------- Timeline --------------------------------------------------- */
  .timeline::before {
    background: none;
    border-left: 1px solid var(--line);
    width: 0;
  }
  .tl-item::before {
    background: #fff !important;
    border-color: var(--text-dim);
  }
  .tl-talks li::before { background: var(--text-dim); }

  /* ---------- Links ------------------------------------------------------ */
  a { color: inherit; }

  /* Externe Ziele sind auf Papier sonst nicht nachvollziehbar */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-family: var(--font-mono);
    font-size: 8pt;
    font-weight: 400;
    color: var(--text-dim);
    word-break: break-all;
  }

  /* ---------- Umbrüche --------------------------------------------------- */
  h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }

  p, li { orphans: 3; widows: 3; }

  .card,
  .step,
  .cred,
  .link-card,
  .f-panel,
  .contact-card,
  .feature,
  .talk,
  .factlist li,
  .check-list li,
  .skill-col,
  figure,
  img { break-inside: avoid; page-break-inside: avoid; }

  /* Jahres-Karten der Timeline sind zu hoch für „nicht umbrechen“ –
     sonst landet jedes Jahr auf einer eigenen, halbleeren Seite.
     Umbrochen wird stattdessen zwischen den einzelnen Vorträgen. */
  .tl-item,
  .tl-card { break-inside: auto; page-break-inside: auto; }
  .tl-talks li { break-inside: avoid; page-break-inside: avoid; }
  .tl-year { break-after: avoid; page-break-after: avoid; }

  /* Überschriftenblock nicht vom folgenden Inhalt trennen – und vor allem
     nicht in sich selbst umbrechen (Eyebrow unten, H2 auf der Folgeseite). */
  .section-head {
    break-inside: avoid; page-break-inside: avoid;
    break-after: avoid; page-break-after: avoid;
  }

  /* ---------- Footer ----------------------------------------------------- */
  .footer {
    margin-top: 16pt;
    padding-block: 10pt 0;
    border-top: 1px solid var(--line);
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .footer-top { padding-bottom: 8pt; }
  .footer-nav { display: none; }
  .footer-bottom { padding-top: 8pt; font-size: 9pt; }
}