/* Lokale Schriften (ersetzt Google Fonts CDN) */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/bricolage-grotesque-700.woff2") format("woff2");}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/bricolage-grotesque-800.woff2") format("woff2");}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/instrument-sans-400.woff2") format("woff2");}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/instrument-sans-500.woff2") format("woff2");}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/instrument-sans-600.woff2") format("woff2");}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/instrument-sans-700.woff2") format("woff2");}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/jetbrains-mono-400.woff2") format("woff2");}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/jetbrains-mono-500.woff2") format("woff2");}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/jetbrains-mono-700.woff2") format("woff2");}
@font-face{font-family:"Caveat";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/caveat-600.woff2") format("woff2");}

/* ============================================================
   NIKLAS TITGEMEYER · niklastitgemeyer.de
   Design-System: "Glass & Marker"
   Farben: Violett #7e0dff · Gold #ffc20d · Ink · Paper
   Schrift: Bricolage Grotesque (Display) · Instrument Sans (Body)
            JetBrains Mono (Labels, Daten, Demo)
   ============================================================ */

:root {
  /* Farben */
  --ink: #0a0612;
  --ink-2: #120a20;
  --ink-3: #1a0f2e;
  --text: #f3effc;
  --text-dim: #ffffff;
  --line: rgba(243, 239, 252, 0.10);
  --violet: #7e0dff;
  --violet-2: #9b4dff;
  --violet-soft: #c9a4ff;
  --gold: #ffc20d;
  --gold-deep: #e6ad00;
  --paper: #f5f2fb;
  --paper-2: #ffffff;
  --ink-on-paper: #170b28;
  --dim-on-paper: #000000;
  --line-on-paper: rgba(23, 11, 40, 0.12);

  /* Kontext-Tokens (werden pro Theme umgeschaltet) */
  --bg: var(--ink);
  --fg: var(--text);
  --fg-dim: var(--text-dim);
  --rule: var(--line);
  --card-bg: rgba(255, 255, 255, 0.04);
  --card-border: rgba(255, 255, 255, 0.09);
  --eyebrow: var(--gold);
  --link-accent: var(--violet-soft);

  /* Typo */
  --font-display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --font-body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  /* Maße */
  --radius: 18px;
  --radius-lg: 26px;
  --header-h: 76px;
  --container: 1180px;
  --pad-x: clamp(20px, 5vw, 48px);
}

/* ---------- Reset & Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  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; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

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

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

body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: var(--ink); }
body::-webkit-scrollbar-thumb { background: var(--ink-3); border-radius: 99px; border: 2px solid var(--ink); }
body::-webkit-scrollbar-thumb:hover { background: var(--violet); }

.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 200;
  padding: 10px 18px;
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
  border-radius: 10px;
  transition: top .2s ease;
}
.skip-link:focus { top: 14px; }

/* ---------- Typografie ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0 0 .5em;
  color: var(--fg);
  hyphens: auto;
  overflow-wrap: break-word;
}

.display-xl { font-size: clamp(2.5rem, 6.4vw, 4.7rem); font-weight: 800; }
.display-lg { font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 800; }
.display-md { font-size: clamp(1.55rem, 3vw, 2.15rem); font-weight: 700; }
.display-sm { font-size: clamp(1.2rem, 2.2vw, 1.45rem); font-weight: 700; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--eyebrow);
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.lead {
  font-size: clamp(1.08rem, 1.6vw, 1.28rem);
  line-height: 1.6;
  color: var(--fg-dim);
  max-width: 56ch;
}

.muted { color: var(--fg-dim); }

/* Marker-Highlight (Textmarker-Effekt) */
.mk {
  background-image: linear-gradient(transparent 58%, var(--gold) 58%, var(--gold) 94%, transparent 94%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 1s cubic-bezier(.2, .7, .2, 1) .25s;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 .06em;
}
.is-in .mk, .mk.is-in { background-size: 100% 100%; }
.theme-paper .mk {
  background-image: linear-gradient(transparent 58%, rgba(126, 13, 255, .22) 58%, rgba(126, 13, 255, .22) 94%, transparent 94%);
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.container--wide { max-width: 1340px; }

.section {
  position: relative;
  padding-block: clamp(76px, 11vw, 130px);
  background: var(--bg);
  color: var(--fg);
}
.section--tight { padding-block: clamp(54px, 7vw, 84px); }

.theme-paper {
  --bg: var(--paper);
  --fg: var(--ink-on-paper);
  --fg-dim: var(--dim-on-paper);
  --rule: var(--line-on-paper);
  --card-bg: var(--paper-2);
  --card-border: rgba(23, 11, 40, 0.10);
  --eyebrow: var(--violet);
  --link-accent: var(--violet);
}

.section-head { max-width: 760px; margin-bottom: clamp(34px, 5vw, 56px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .lead { margin-inline: auto; }

.grid { display: grid; gap: clamp(18px, 2.4vw, 28px); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 99px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .01em;
  background: var(--gold);
  color: var(--ink);
  border: 1.5px solid var(--gold);
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s ease, background .2s ease;
  will-change: transform;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px -8px rgba(255, 194, 13, .45);
  background: #ffd147;
  border-color: #ffd147;
}
.btn:active { transform: translateY(0); }

.btn .arr { transition: transform .25s ease; }
.btn:hover .arr { transform: translateX(4px); }

.btn--ghost {
  background: transparent;
  color: var(--fg);
  border: 1.5px solid var(--rule);
}
.btn--ghost:hover {
  background: rgba(126, 13, 255, .14);
  border-color: var(--violet-2);
  box-shadow: 0 10px 32px -10px rgba(126, 13, 255, .5);
}
.theme-paper .btn--ghost { border-color: rgba(23, 11, 40, .25); }
.theme-paper .btn--ghost:hover { background: rgba(126, 13, 255, .08); }

.btn--violet {
  background: var(--violet);
  border-color: var(--violet);
  color: #fff;
}
.btn--violet:hover {
  background: var(--violet-2);
  border-color: var(--violet-2);
  box-shadow: 0 10px 34px -8px rgba(126, 13, 255, .6);
}

.btn--sm { padding: 10px 20px; font-size: .92rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--link-accent);
}
.link-arrow .arr { transition: transform .25s ease; }
.link-arrow:hover .arr { transform: translateX(5px); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---------- Scroll-Fortschritt ---------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  z-index: 130;
  background: linear-gradient(90deg, var(--violet), var(--gold));
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 120;
  height: var(--header-h);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), background .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(10, 6, 18, .72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--line);
}
.site-header.is-hidden { transform: translateY(calc(-100% - 4px)); }

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.18rem;
  letter-spacing: -.01em;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
}
.brand .dot { color: var(--gold); margin-left: 2px; }

.main-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.main-nav a {
  position: relative;
  padding: 10px 14px;
  font-size: .96rem;
  font-weight: 600;
  color: var(--text-dim);
  border-radius: 10px;
  transition: color .2s ease;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 5px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.main-nav a:hover { color: var(--text); }
.main-nav a:hover::after { transform: scaleX(1); }
.main-nav a[aria-current="page"] { color: var(--text); }
.main-nav a[aria-current="page"]::after { transform: scaleX(1); }

.header-cta { margin-left: 10px; }

/* Hamburger */
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 46px; height: 46px;
  border-radius: 12px;
  border: 1px solid var(--line);
  position: relative;
  z-index: 150;
}
.nav-toggle span {
  position: absolute;
  left: 12px; right: 12px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .3s ease, top .3s ease, opacity .2s ease;
}
.nav-toggle span:nth-child(1) { top: 17px; }
.nav-toggle span:nth-child(2) { top: 26px; }
body.nav-open .nav-toggle span:nth-child(1) { top: 21px; transform: rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { top: 21px; transform: rotate(-45deg); }

/* Mobile-Navigation (Vollbild) */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 140;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(126, 13, 255, .28), transparent 60%),
    var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 100px var(--pad-x) 48px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}
body.nav-open .mobile-nav { opacity: 1; visibility: visible; }
body.nav-open { overflow: hidden; }

.mobile-nav a.mnav-link {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 7.5vw, 2.6rem);
  padding: 10px 0;
  color: var(--text);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .4s ease, transform .45s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i, 0) * 60ms + 80ms);
}
.mobile-nav a.mnav-link:hover { color: var(--gold); }
.mobile-nav a.mnav-link[aria-current="page"] { color: var(--gold); }
body.nav-open .mobile-nav a.mnav-link { opacity: 1; transform: none; }

.mnav-foot {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  opacity: 0;
  transition: opacity .4s ease .45s;
}
body.nav-open .mnav-foot { opacity: 1; }

/* ---------- Social-Icons ---------- */
.socials { display: flex; gap: 10px; }
.socials a {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--rule);
  color: var(--fg-dim);
  transition: all .25s ease;
}
.socials a:hover {
  color: var(--ink);
  background: var(--gold);
  border-color: var(--gold);
  transform: translateY(-2px);
}
.socials svg { width: 19px; height: 19px; fill: currentColor; }

/* ---------- Hero (Startseite) ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-h) + 44px);
  padding-bottom: 70px;
  overflow: hidden;
  isolation: isolate;
}
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(820px 560px at 14% 8%, rgba(126, 13, 255, .30), transparent 62%),
    radial-gradient(640px 460px at 88% 86%, rgba(255, 194, 13, .10), transparent 60%),
    radial-gradient(520px 420px at 78% 12%, rgba(126, 13, 255, .14), transparent 60%);
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(243, 239, 252, .12) 1px, transparent 1.4px);
  background-size: 34px 34px;
  mask-image: radial-gradient(900px 620px at 30% 30%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(900px 620px at 30% 30%, #000 0%, transparent 75%);
  opacity: .55;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

.hero h1 { margin-bottom: .55em; }
.hero .lead { margin-bottom: 1.9rem; }

.hero-proof {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .92rem;
  color: var(--text-dim);
}
.hero-proof .pulse {
  width: 9px; height: 9px;
  border-radius: 99px;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(255, 194, 13, .55);
  animation: pulse 2.4s infinite;
  flex: none;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 194, 13, .55); }
  70% { box-shadow: 0 0 0 12px rgba(255, 194, 13, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 194, 13, 0); }
}

/* ---------- Token-Widget (Signature) ---------- */
.token-widget {
  position: relative;
  background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025));
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-lg);
  padding: 22px 22px 18px;
  box-shadow:
    0 30px 80px -30px rgba(126, 13, 255, .45),
    inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.token-widget::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(126, 13, 255, .65), transparent 38%, transparent 64%, rgba(255, 194, 13, .5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.tw-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 16px;
}
.tw-dot {
  width: 8px; height: 8px;
  border-radius: 99px;
  background: var(--gold);
  animation: pulse 2.4s infinite;
}
.tw-controls { margin-left: auto; display: flex; gap: 6px; }
.tw-controls button {
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid var(--line);
  color: var(--text-dim);
  transition: all .2s ease;
}
.tw-controls button:hover { color: var(--gold); border-color: var(--gold); }
.tw-controls svg { width: 14px; height: 14px; fill: currentColor; }

.tw-sentence {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.18rem, 1.7vw, 1.42rem);
  line-height: 1.4;
  min-height: 4.4em;
  margin: 0 0 16px;
}
.tw-word {
  display: inline;
  animation: wordIn .4s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes wordIn {
  from { opacity: 0; filter: blur(4px); }
  to { opacity: 1; filter: blur(0); }
}
.tw-caret {
  display: inline-block;
  width: 3px;
  height: 1em;
  margin-left: 4px;
  background: var(--gold);
  vertical-align: -0.12em;
  animation: blink 1s steps(1) infinite;
  border-radius: 2px;
}
@keyframes blink { 50% { opacity: 0; } }
.token-widget.is-done .tw-sentence { color: var(--gold); transition: color .4s ease; }

.tw-options { display: grid; gap: 7px; min-height: 280px; align-content: start; }
.tw-option {
  display: grid;
  grid-template-columns: minmax(118px, auto) 1fr 46px;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, .035);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
  animation: optIn .35s ease both;
  animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes optIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.tw-option:hover {
  border-color: rgba(126, 13, 255, .6);
  background: rgba(126, 13, 255, .12);
}
.tw-option.is-picked {
  border-color: var(--gold);
  background: rgba(255, 194, 13, .12);
  transform: scale(1.015);
}
.tw-token {
  font-family: var(--font-mono);
  font-size: .88rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tw-bar {
  height: 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
}
.tw-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--violet), var(--violet-2));
  transform-origin: 0 50%;
  transition: width .55s cubic-bezier(.2, .7, .2, 1);
}
.tw-option.is-picked .tw-fill { background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }
.tw-prob {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--text-dim);
  text-align: right;
}

.tw-temp {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.tw-temp-label {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.tw-temp-label output { color: var(--gold); }
.tw-temp input[type="range"] {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  height: 5px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--violet), var(--gold));
  outline-offset: 6px;
  cursor: pointer;
}
.tw-temp input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 19px; height: 19px;
  border-radius: 99px;
  background: var(--text);
  border: 4px solid var(--ink);
  box-shadow: 0 0 0 1.5px var(--gold);
  cursor: grab;
}
.tw-temp input[type="range"]::-moz-range-thumb {
  width: 13px; height: 13px;
  border-radius: 99px;
  background: var(--text);
  border: 3px solid var(--ink);
  box-shadow: 0 0 0 1.5px var(--gold);
  cursor: grab;
}
.tw-temp-scale {
  display: flex;
  justify-content: space-between;
  font-size: .74rem;
  color: var(--text-dim);
  margin-top: 7px;
}
.tw-caption {
  margin-top: 14px;
  font-size: .85rem;
  color: var(--text-dim);
  line-height: 1.5;
}

/* ---------- Stat-Band ---------- */
.stats {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(126, 13, 255, .10), transparent 36%, transparent 64%, rgba(255, 194, 13, .06)),
    var(--ink-2);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat {
  padding: clamp(11px, 1.6vw, 18px) clamp(16px, 2.4vw, 32px);
  border-left: 1px solid var(--line);
}
.stat:first-child { border-left: 0; }
.stat-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  color: var(--text);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.stat-num .suffix { color: var(--gold); }
.stat-label {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ---------- Karten ---------- */
.card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 2.6vw, 34px);
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), border-color .3s ease, box-shadow .3s ease;
}
a.card { display: flex; flex-direction: column; }
.card:hover {
  transform: translateY(-6px);
  border-color: rgba(126, 13, 255, .55);
  box-shadow: 0 26px 60px -28px rgba(126, 13, 255, .5);
}
.theme-paper .card { box-shadow: 0 1px 2px rgba(23, 11, 40, .05); }
.theme-paper .card:hover { box-shadow: 0 26px 56px -28px rgba(126, 13, 255, .35); }

/* Spotlight folgt dem Cursor */
.spot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(126, 13, 255, .16), transparent 65%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.spot:hover::after { opacity: 1; }
.theme-paper .spot::after {
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(126, 13, 255, .09), transparent 65%);
}

.card-tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--violet);
  background: rgba(126, 13, 255, .10);
  border: 1px solid rgba(126, 13, 255, .25);
  border-radius: 99px;
  padding: 5px 12px;
  margin-bottom: 18px;
}
.card-tag--gold {
  color: var(--gold-deep);
  background: rgba(255, 194, 13, .12);
  border-color: rgba(255, 194, 13, .4);
}
.card h3 { margin-bottom: .4em; }
.card p { color: var(--fg-dim); font-size: .99rem; }
.card .link-arrow { margin-top: auto; padding-top: 20px; font-size: .96rem; }

/* ---------- Über-mich ---------- */
.about-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}
.frame {
  position: relative;
  border-radius: var(--radius-lg);
}
.frame img {
  width: 100%;
  border-radius: inherit;
  border: 1px solid var(--line);
  position: relative;
  z-index: 1;
}
.frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.5px solid var(--gold);
  transform: translate(-14px, 14px);
  z-index: 0;
}
.frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px 300px at 70% 0%, rgba(126, 13, 255, .35), transparent 70%);
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
}
.frame-caption {
  position: absolute;
  z-index: 3;
  left: 18px;
  bottom: 18px;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(10, 6, 18, .65);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 7px 14px;
}

.about-facts { margin-top: 26px; display: grid; gap: 12px; }
.about-facts li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--fg-dim);
}
.about-facts .tick { flex: none; margin-top: 5px; }

.tick {
  width: 20px; height: 20px;
  border-radius: 99px;
  display: inline-grid;
  place-items: center;
  background: rgba(255, 194, 13, .14);
  color: var(--gold);
}
.tick svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.theme-paper .tick { background: rgba(126, 13, 255, .12); color: var(--violet); }

/* ---------- Marquee (Gold-Band) ---------- */
.marquee-band {
  position: relative;
  padding-block: 26px;
  background: var(--ink);
  overflow: hidden;
}
.marquee {
  background: var(--gold);
  color: var(--ink);
  transform: rotate(-1.4deg) scale(1.04);
  padding-block: 16px;
  overflow: hidden;
  white-space: nowrap;
  box-shadow: 0 18px 50px -18px rgba(255, 194, 13, .35);
}
.marquee-track {
  display: inline-flex;
  gap: 0;
  animation: marquee 36s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee-track span {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding-inline: 26px;
  display: inline-flex;
  align-items: center;
  gap: 26px;
}
.marquee-track span::after { content: "✦"; font-size: .8em; }

/* ---------- Prinzipien / Werte ---------- */
.value-row {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(20px, 4vw, 56px);
  padding-block: clamp(30px, 4vw, 44px);
  border-top: 1px solid var(--rule);
}
.value-row:last-of-type { border-bottom: 1px solid var(--rule); }
.value-row h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
.value-kicker {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--eyebrow);
  margin-bottom: 8px;
  display: block;
}
.value-row p { color: var(--fg-dim); max-width: 64ch; }

/* ---------- Checkliste ---------- */
.checklist { display: grid; gap: 13px; }
.checklist li { display: flex; gap: 13px; align-items: flex-start; color: var(--fg-dim); }
.checklist .tick { margin-top: 4px; flex: none; }
.checklist strong { color: var(--fg); font-weight: 700; }

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  font-family: var(--font-mono);
  font-size: .8rem;
  padding: 9px 16px;
  border-radius: 99px;
  border: 1px solid var(--rule);
  color: var(--fg-dim);
  background: var(--card-bg);
  transition: all .25s ease;
}
.chip:hover {
  border-color: var(--violet);
  color: var(--fg);
  transform: translateY(-2px);
}

/* ---------- Ablauf-Schritte (echte Sequenz) ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
  counter-reset: step;
}
.step {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .86rem;
  color: var(--ink);
  background: var(--gold);
  border-radius: 99px;
  padding: 6px 13px;
  display: inline-block;
  margin-bottom: 18px;
}
.step h3 { font-size: 1.18rem; }
.step p { color: var(--fg-dim); font-size: .97rem; }

/* ---------- Akkordeon ---------- */
.acc { display: grid; gap: 12px; }
.acc-item {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .25s ease;
}
.acc-item.is-open { border-color: rgba(126, 13, 255, .5); }
.acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  color: var(--fg);
}
.acc-meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .08em;
  color: var(--eyebrow);
  white-space: nowrap;
}
.acc-icon {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 99px;
  border: 1.5px solid var(--rule);
  display: grid;
  place-items: center;
  transition: transform .3s ease, background .25s ease, border-color .25s ease, color .25s ease;
}
.acc-icon svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2.6; fill: none; stroke-linecap: round; }
.acc-item.is-open .acc-icon {
  transform: rotate(45deg);
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}
.acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.2, .7, .2, 1);
}
.acc-item.is-open .acc-body { grid-template-rows: 1fr; }
.acc-inner { overflow: hidden; }
.acc-inner > div {
  padding: 0 22px 24px;
  color: var(--fg-dim);
  border-top: 1px dashed var(--rule);
  padding-top: 18px;
  margin-inline: 0;
}

/* ---------- Newsletter / CTA-Panels ---------- */
.panel {
  position: relative;
  border-radius: clamp(22px, 3vw, 34px);
  padding: clamp(36px, 6vw, 72px);
  background:
    radial-gradient(680px 380px at 12% 0%, rgba(255, 194, 13, .14), transparent 60%),
    linear-gradient(135deg, #5a06bd, var(--violet) 55%, #9b3dff);
  border: 1px solid rgba(255, 255, 255, .16);
  overflow: hidden;
  color: #fff;
}
.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .25) 1px, transparent 1.4px);
  background-size: 26px 26px;
  opacity: .18;
  pointer-events: none;
}
.panel > * { position: relative; z-index: 1; }
.panel h2 { color: #fff; }
.panel .lead { color: rgba(255, 255, 255, .82); }
.panel .eyebrow { color: var(--gold); }

.cta-final { text-align: center; }
.cta-final .display-xl { max-width: 18ch; margin-inline: auto; }
.cta-final .lead { margin-inline: auto; margin-bottom: 2.2rem; }
.cta-final .btn-row { justify-content: center; }

/* ---------- Formulare ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
.field label {
  display: block;
  font-weight: 600;
  font-size: .92rem;
  margin-bottom: 7px;
  color: var(--fg);
}
.field label .opt { color: var(--fg-dim); font-weight: 400; }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 14px 16px;
  border-radius: 13px;
  border: 1.5px solid var(--rule);
  background: var(--card-bg);
  color: var(--fg);
  font: inherit;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 4px rgba(126, 13, 255, .15);
}
.form-note {
  display: none;
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: 13px;
  background: rgba(255, 194, 13, .12);
  border: 1px solid rgba(255, 194, 13, .45);
  color: var(--fg);
  font-size: .95rem;
}
.form-note.is-visible { display: block; animation: optIn .35s ease both; }

/* ---------- Quellen ---------- */
.q-toolbar { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 30px; }
.q-search {
  flex: 1;
  min-width: 240px;
  position: relative;
}
.q-search input {
  width: 100%;
  padding: 15px 18px 15px 48px;
  border-radius: 99px;
  border: 1.5px solid var(--rule);
  background: var(--card-bg);
  color: var(--fg);
  font: inherit;
}
.q-search input:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 4px rgba(126, 13, 255, .15);
}
.q-search svg {
  position: absolute;
  left: 18px; top: 50%;
  transform: translateY(-50%);
  width: 17px; height: 17px;
  stroke: var(--fg-dim);
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
}
.q-item h3 { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.q-item .q-date {
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--eyebrow);
  letter-spacing: .08em;
}
.q-item ul { display: grid; gap: 8px; margin-top: 12px; }
.q-item li a {
  color: var(--link-accent);
  font-size: .95rem;
  word-break: break-word;
  border-bottom: 1px dashed transparent;
}
.q-item li a:hover { border-bottom-color: currentColor; }
.empty-state {
  text-align: center;
  padding: clamp(40px, 7vw, 80px) 20px;
  border: 1.5px dashed var(--rule);
  border-radius: var(--radius-lg);
  color: var(--fg-dim);
}
.empty-state strong { color: var(--fg); }

/* ---------- Rechtstexte ---------- */
.legal { max-width: 800px; }
.legal h1 { margin-bottom: .8em; }
.legal h2 { font-size: 1.45rem; margin-top: 2.2em; }
.legal h3 { font-size: 1.12rem; margin-top: 1.8em; }
.legal p, .legal li { color: var(--fg-dim); font-size: .99rem; }
.legal ul { list-style: disc; padding-left: 22px; display: grid; gap: 8px; margin-bottom: 1em; }
.legal a { color: var(--link-accent); text-decoration: underline; text-underline-offset: 3px; }
.legal strong { color: var(--fg); }

/* ---------- Subpage-Hero ---------- */
.page-hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(56px, 9vw, 110px));
  padding-bottom: clamp(50px, 7vw, 90px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  isolation: isolate;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(720px 420px at 80% -20%, rgba(126, 13, 255, .26), transparent 62%),
    radial-gradient(440px 320px at 6% 110%, rgba(255, 194, 13, .07), transparent 60%);
}
.page-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(32px, 5vw, 70px);
  align-items: center;
}
.page-hero .lead { margin-bottom: 1.6rem; }
.page-hero h1 { max-width: 16ch; }
.page-hero--center { text-align: center; }
.page-hero--center h1 { margin-inline: auto; }
.page-hero--center .lead { margin-inline: auto; }
.page-hero--center .eyebrow { justify-content: center; }
.page-hero--center .btn-row { justify-content: center; }

.hero-chips { margin-top: 28px; }

/* ---------- Footer ---------- */
.site-footer {
  background: #070410;
  border-top: 1px solid var(--line);
  padding-top: clamp(56px, 7vw, 84px);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(30px, 4vw, 60px);
  padding-bottom: 48px;
}
.footer-brand .brand { font-size: 1.35rem; }
.footer-brand p {
  margin-top: 14px;
  color: var(--text-dim);
  max-width: 36ch;
  font-size: .97rem;
}
.footer-brand .socials { margin-top: 22px; }
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.footer-col ul { display: grid; gap: 11px; }
.footer-col a {
  color: var(--text-dim);
  font-size: .97rem;
  transition: color .2s ease;
}
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-block: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  font-size: .88rem;
  color: var(--text-dim);
}
.footer-bottom .tag {
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .08em;
}
.footer-bottom .tag b { color: var(--gold); font-weight: 500; }

.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 110;
  width: 48px; height: 48px;
  border-radius: 99px;
  background: var(--violet);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 14px 34px -10px rgba(126, 13, 255, .65);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all .3s ease;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--violet-2); transform: translateY(-3px); }
.to-top svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Reveal-Animationen ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1060px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero { min-height: 0; padding-bottom: 84px; }
  .token-widget { max-width: 620px; }
  .page-hero-grid { grid-template-columns: 1fr; }
  .page-hero-grid .frame { max-width: 520px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .about-grid { grid-template-columns: 1fr; }
  .about-grid .frame { max-width: 480px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(odd) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
}

@media (max-width: 880px) {
  .main-nav, .header-cta { display: none; }
  .nav-toggle { display: block; }
  .grid-3 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .value-row { grid-template-columns: 1fr; gap: 10px; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .grid-2, .grid-4 { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .tw-option { grid-template-columns: minmax(96px, auto) 1fr 42px; gap: 9px; }
  .tw-options { min-height: 238px; }
  .btn { width: 100%; }
  .btn-row .btn { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; }
  .frame::before { transform: translate(-9px, 9px); }
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .mk { background-size: 100% 100%; }
  .marquee-track { animation: none; transform: none; }
  .tw-caret { animation: none; }
}

/* ============================================================
   ERGÄNZUNGEN (Hero-Umbau, Pulse-Buttons, grüne Ticks,
   Ressourcen-Liste, Guide-Cover)
   ============================================================ */

/* Hero: feste Zeilenumbrüche ohne Silbentrennung */
.hero-title {
  font-size: clamp(2.15rem, 4.5vw, 3.4rem);
  line-height: 1.08;
  hyphens: none;
  overflow-wrap: normal;
}

/* Hero: Porträt rechts */
.hero-frame {
  width: 100%;
  max-width: 480px;
  justify-self: center;
}

/* Hero: hervorgehobene Follower-Zeile */
.hero-proof--big {
  margin-top: 28px;
  font-size: clamp(1.04rem, 1.6vw, 1.24rem);
  line-height: 1.55;
  font-weight: 600;
  color: var(--text);
  align-items: flex-start;
}
.hero-proof--big .pulse { margin-top: .55em; }
.hero-proof--big strong { color: var(--gold); font-weight: 800; }

/* Pulsierende CTA-Buttons (gelb, gelber Ripple) */
.btn--pulse {
  animation: pulseRippleGold 3s infinite cubic-bezier(.25, .8, .25, 1);
}
.btn--pulse:hover,
.btn--pulse:focus-visible { animation: none; }
@keyframes pulseRippleGold {
  0% {
    transform: scale(1);
    box-shadow:
      0 0 0 0 rgba(255, 194, 13, .6),
      0 0 0 0 rgba(255, 194, 13, .4),
      0 0 0 0 rgba(255, 194, 13, .2);
  }
  50% {
    transform: scale(1.06);
    box-shadow:
      0 0 0 8px rgba(255, 194, 13, 0),
      0 0 0 16px rgba(255, 194, 13, 0),
      0 0 0 24px rgba(255, 194, 13, 0);
  }
  100% {
    transform: scale(1);
    box-shadow:
      0 0 0 0 rgba(255, 194, 13, 0),
      0 0 0 0 rgba(255, 194, 13, 0),
      0 0 0 0 rgba(255, 194, 13, 0);
  }
}

/* Über mich: einspaltig ohne Bild */
.about-solo { max-width: 840px; }

/* Über mich: grüne Haken mit Scale-in */
.about-facts .tick {
  width: 22px;
  height: 22px;
  background: #1eaf55;
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(30, 175, 85, .6);
  transform: scale(.2);
  opacity: 0;
  transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), opacity .35s ease;
}
.about-facts .tick svg { width: 12px; height: 12px; }
.about-facts.is-in .tick { transform: scale(1); opacity: 1; }
.about-facts.is-in li:nth-child(1) .tick { transition-delay: .1s; }
.about-facts.is-in li:nth-child(2) .tick { transition-delay: .25s; }
.about-facts.is-in li:nth-child(3) .tick { transition-delay: .4s; }

/* Angebot: gelbe, größere Subline */
.lead--accent {
  color: var(--gold);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  letter-spacing: -.01em;
  max-width: none;
}

/* Ressourcen-Liste (Lernen, nachlesen, nachprüfen) */
.resource-list { border-top: 1.5px solid rgba(23, 11, 40, .15); }
.resource-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto 46px;
  align-items: center;
  gap: clamp(14px, 2.6vw, 34px);
  padding: clamp(20px, 3vw, 30px) clamp(4px, 1.2vw, 16px);
  border-bottom: 1.5px solid rgba(23, 11, 40, .15);
  transition: background .25s ease;
}
.resource-row:hover { background: rgba(126, 13, 255, .06); }
.resource-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .95rem;
  color: var(--violet);
}
.resource-title {
  display: block;
  font-weight: 800;
  font-size: clamp(1.25rem, 2.3vw, 1.65rem);
  letter-spacing: -.015em;
  color: var(--fg);
  transition: color .2s ease;
}
.resource-desc {
  display: block;
  margin-top: 5px;
  color: var(--fg-dim);
  line-height: 1.55;
  max-width: 56ch;
}
.resource-meta {
  justify-self: end;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg-dim);
  border: 1px solid rgba(23, 11, 40, .2);
  border-radius: 99px;
  padding: 7px 13px;
}
.resource-meta--gold {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  font-weight: 700;
}
.resource-arrow {
  width: 46px;
  height: 46px;
  border-radius: 99px;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(23, 11, 40, .22);
  color: var(--fg);
  font-size: 1.2rem;
  transition: transform .25s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.resource-row:hover .resource-title { color: var(--violet); }
.resource-row:hover .resource-arrow {
  background: var(--violet);
  border-color: var(--violet);
  color: #fff;
  transform: translateX(5px);
}

/* Guide: Cover in der Inhalt-Sektion */
.guide-cover {
  margin-top: 36px;
  max-width: 440px;
}

/* Responsive */
@media (max-width: 1060px) {
  .hero-frame { margin-inline: auto; }
}
@media (max-width: 640px) {
  .hero-title br,
  .hero-proof--big br { display: none; }
  .resource-row { grid-template-columns: 30px minmax(0, 1fr) 40px; }
  .resource-meta { display: none; }
  .resource-arrow { width: 40px; height: 40px; font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
  .btn--pulse { animation: none; }
  .about-facts .tick { transform: none; opacity: 1; transition: none; }
}

/* ============================================================
   ERGÄNZUNGEN 2 (Hero ohne Rahmen, Smartphone-Chat, Stat-Sub)
   ============================================================ */

/* Stats: Zusatzzeile unter dem Label */
.stat-sub {
  margin-top: 5px;
  font-size: .74rem;
  line-height: 1.4;
  color: var(--text-dim);
  opacity: .8;
}

/* Hero rechts: Bild oben, Caption zentriert, Phone darunter */
.hero-side {
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.hero-portrait {
  width: 100%;
  max-width: 330px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  display: block;
}
.hero-caption {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(10, 6, 18, .65);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 7px 14px;
  text-align: center;
}

/* Smartphone-Mockup */
.phone {
  position: relative;
  width: min(290px, 84vw);
  margin-top: 10px;
  background: #0c0c10;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 38px;
  padding: 12px;
  box-shadow:
    0 24px 60px -22px rgba(0, 0, 0, .8),
    0 0 0 1px rgba(255, 255, 255, .04) inset;
}
.phone-notch {
  position: absolute;
  top: 21px;
  left: 50%;
  transform: translateX(-50%);
  width: 78px;
  height: 17px;
  border-radius: 99px;
  background: #0c0c10;
  z-index: 2;
}
.phone-screen {
  background: #fff;
  border-radius: 27px;
  height: 440px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.chat-log {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 44px 12px 8px;
  scrollbar-width: thin;
}
.chat-msg {
  max-width: 86%;
  padding: 9px 12px;
  border-radius: 15px;
  font-size: .8rem;
  line-height: 1.45;
  color: #1c1426;
}
.chat-msg--bot {
  align-self: flex-start;
  background: #f0eef6;
  border-bottom-left-radius: 5px;
}
.chat-msg--user {
  align-self: flex-end;
  background: var(--violet);
  color: #fff;
  border-bottom-right-radius: 5px;
}
.chat-msg a {
  display: inline-block;
  margin-top: 6px;
  font-weight: 700;
  color: var(--violet);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.chat-typing {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 11px 13px;
}
.chat-typing i {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: #9a8fb3;
  animation: chatDot 1s infinite ease-in-out;
}
.chat-typing i:nth-child(2) { animation-delay: .15s; }
.chat-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chatDot {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50% { transform: translateY(-3px); opacity: 1; }
}
.chat-chips {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px 14px;
  border-top: 1px solid #eee9f6;
}
.chat-chip {
  font-family: inherit;
  font-size: .73rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  color: var(--violet);
  background: #fff;
  border: 1.5px solid rgba(126, 13, 255, .4);
  border-radius: 13px;
  padding: 8px 11px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, opacity .3s ease, transform .3s ease;
}
.chat-chip:hover { background: rgba(126, 13, 255, .08); border-color: var(--violet); }
.chat-chip[disabled] { opacity: .45; cursor: default; }
.chat-chips.is-hidden .chat-chip { opacity: 0; transform: translateY(6px); pointer-events: none; }

@media (max-width: 1060px) {
  .hero-side { margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-typing i { animation: none; }
}

/* ============================================================
   ERGÄNZUNGEN 3 (Porträt über dem Titel, Phone rechts + länger)
   ============================================================ */

/* Porträt: ohne Box, kompakt direkt über der Headline */
.hero-portrait {
  width: auto;
  max-width: 205px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  margin: 0 0 8px;
}

/* Rechte Spalte: nur das Phone, vertikal zentriert */
.hero-side {
  align-self: center;
  gap: 0;
}

/* Phone: ca. 30 % länger */
.phone { width: min(310px, 86vw); margin-top: 0; }
.phone-screen { height: 575px; }

/* ============================================================
   ERGÄNZUNGEN 4 (Über mich: lila Kasten, rechtsbündiger Text)
   ============================================================ */

/* Frame-Variante: lila Kasten statt gelbem */
.frame--violet::before { border-color: var(--violet); }

/* Über mich: Textspalte rechtsbündig */
.about-text-right { text-align: right; }
.about-text-right .eyebrow { flex-direction: row-reverse; }
.about-text-right .about-facts li {
  justify-content: flex-end;
  text-align: right;
}
.about-text-right .btn-row { justify-content: flex-end; }

/* Gestapelt (mobil) zur Lesbarkeit wieder linksbündig */
@media (max-width: 1060px) {
  .about-text-right { text-align: left; }
  .about-text-right .eyebrow { flex-direction: row; }
  .about-text-right .about-facts li {
    justify-content: flex-start;
    text-align: left;
  }
  .about-text-right .btn-row { justify-content: flex-start; }
}

/* ============================================================
   ERGÄNZUNGEN 5 (Hero: Text bündig mit Phone, Bild unten
   dazwischen; 3D-Tilt für Angebot-Karten)
   ============================================================ */

/* Headline: wieder groß (nur noch Text + Phone nebeneinander) */
.hero-title { font-size: clamp(2.15rem, 4.5vw, 3.4rem); }

@media (min-width: 1061px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(28px, 4vw, 64px);
    align-items: stretch;
  }
  .hero-grid > div:first-child { align-self: start; }
  .hero-side { align-self: start; }
}

/* 3D-Swivel auf den Angebot-Karten */
.card--tilt { will-change: transform; }
.card--tilt:hover {
  transition: transform .06s linear, border-color .3s ease, box-shadow .3s ease;
}

/* ============================================================
   ERGÄNZUNGEN 6 (Über mich: Gradient-Box, zentrierte Haken)
   ============================================================ */

/* Bild in solider Schwarz-Lila-Box mit dezentem dunklen Glow */
.about-pic {
  background: linear-gradient(155deg, #0a0612 0%, #24084d 55%, #5a06bd 100%);
  border-radius: var(--radius-lg);
  padding: clamp(14px, 1.8vw, 22px);
  box-shadow: 0 22px 56px -20px rgba(0, 0, 0, .65);
}
.about-pic img {
  display: block;
  width: 100%;
  border-radius: calc(var(--radius-lg) - 10px);
}

/* Drei Haken mittig unter dem Zweispalter */
.about-facts--center {
  margin-top: clamp(36px, 5vw, 56px);
  justify-items: center;
}
.about-facts--center li {
  justify-content: center;
  text-align: center;
}

@media (max-width: 1060px) {
  .about-pic { max-width: 520px; margin-inline: auto; }
}

/* ============================================================
   ERGÄNZUNGEN 7 (Porträt im Über-mich, Videokurs-Promo)
   ============================================================ */

/* Videokurs-Promo unter der Ressourcen-Liste */
.course-promo {
  margin-top: clamp(40px, 6vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}
.course-promo .about-pic { max-width: 620px; }
.course-promo-cta { display: flex; justify-content: center; }

@media (max-width: 860px) {
  .course-promo { grid-template-columns: 1fr; }
  .course-promo .about-pic { margin-inline: auto; width: 100%; }
}

/* ============================================================
   ERGÄNZUNGEN 8 (Hero-Headline ca. 30 % größer; Über mich:
   Text und Porträt oben bündig, direkt unter der Überschrift)
   ============================================================ */

/* Hero: Headline rund 30 % größer, feste Umbrüche bleiben */
.hero-title { font-size: clamp(2.8rem, 5.85vw, 4.42rem); }

/* Über mich: oben ausrichten statt vertikal zentriert.
   Text startet damit direkt unter der Überschrift,
   Porträt beginnt auf gleicher Höhe wie der Text. */
.about-grid { align-items: start; }

/* ============================================================
   ERGÄNZUNGEN 9 (Phone ca. 15 % kürzer; Chat-Chips in
   Dunkellila-Gradient mit Gold als Kontrastfarbe)
   ============================================================ */

/* Phone: Screen von 575px auf 490px (ca. 15 % weniger) */
.phone-screen { height: 490px; }

/* Chips: Lila-Verlauf (lila zu leicht dunklerem Lila),
   Schrift weiß, mehr Pop */
.chat-chip {
  background: linear-gradient(135deg, #7e0dff, #5f09c6);
  color: #fff;
  font-weight: 700;
  border-color: rgba(255, 255, 255, .28);
  box-shadow: 0 6px 16px -10px rgba(126, 13, 255, .7);
}
.chat-chip:hover {
  background: linear-gradient(135deg, #9b4dff, #7e0dff);
  border-color: #fff;
}

/* ============================================================
   ERGÄNZUNGEN 10 (Phone wieder 10 % länger; Porträt 25 %
   kleiner)
   ============================================================ */

/* Phone: 490px + 10 % = 540px */
.phone-screen { height: 540px; }

/* ============================================================
   ERGÄNZUNGEN 11 (Porträt: transparenten PNG-Leerraum oben
   wegschneiden, Kopf bündig mit Text; Über-mich-Überschrift
   ohne Silbentrennung auf voller Breite)
   ============================================================ */

/* Über-mich-Überschrift: volle Breite, keine Silbentrennung,
   damit die zwei festen Zeilen (br) erhalten bleiben */
.section-head--wide { max-width: 1080px; }
.section-head--wide .display-lg { hyphens: none; }
.section-head--wide .lead { max-width: none; }

/* ============================================================
   ERGÄNZUNGEN 12 (Hero: 2 Bulletpoints mit Gold-Haken unter
   dem Keynote-Button, jeweils einzeilig)
   ============================================================ */

.hero-points {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.hero-points li {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  font-size: .98rem;
  color: var(--text);
}
.hero-points .tick {
  flex: none;
  width: 22px;
  height: 22px;
  background: var(--gold);
  color: var(--ink);
  box-shadow: 0 4px 14px -4px rgba(255, 194, 13, .55);
}
.hero-points .tick svg { width: 12px; height: 12px; }

/* Unter 640px darf umgebrochen werden, sonst läuft der
   Text aus dem Viewport */
@media (max-width: 640px) {
  .hero-points li { white-space: normal; align-items: flex-start; }
  .hero-points .tick { margin-top: 2px; }
}

/* ============================================================
   ERGÄNZUNGEN 13 (Über mich neu: Porträt im Schwarz-Lila-
   Panel mit Glow und Handle-Chip, erster Absatz als Lead)
   ============================================================ */

/* Erster Absatz als größerer Lead mit violettem Initial */
.about-lead {
  font-size: 1.18rem;
  line-height: 1.6;
  font-weight: 500;
  color: var(--fg);
}
.about-lead::first-letter {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.1em;
  line-height: .85;
  float: left;
  padding: .04em .12em 0 0;
  color: var(--violet);
}

/* Box hinter dem Porträt: Dunkelgrau mit lila Rand und
   lila Glow, Bild mit Innenabstand und eigener Rundung. */
.about-stage {
  position: relative;
  width: 100%;
  max-width: 460px;
  justify-self: center;
  align-self: start;
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: clamp(14px, 1.8vw, 22px);
  background: linear-gradient(to top, #000 0%, #000 16%, #24084d 60%, #5a06bd 100%);
  border: 1.5px solid rgba(155, 77, 255, .55);
  box-shadow:
    0 0 46px -8px rgba(126, 13, 255, .5),
    0 26px 60px -24px rgba(23, 11, 40, .6);
}
.about-stage img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius-lg) - 8px);
}
.about-stage-tag {
  position: absolute;
  left: 28px;
  bottom: 26px;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(10, 6, 18, .55);
  border: 1px solid rgba(255, 194, 13, .35);
  padding: 7px 12px;
  border-radius: 99px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

@media (max-width: 1060px) {
  .about-stage { max-width: 440px; margin-inline: auto; }
}

/* ============================================================
   ERGÄNZUNGEN 14 (Über mich: oberer Abstand 75 % kleiner)
   ============================================================ */

/* Original .section: padding-block clamp(76px, 11vw, 130px).
   Oben auf 25 % reduziert, unten unverändert. */
.section--tight-top { padding-top: clamp(19px, 2.75vw, 33px); }

/* ============================================================
   ERGÄNZUNGEN 15 (Über mich: Themen-Chips unter dem Text)
   OBSOLET seit 2-22: Chips wieder aus index.html entfernt,
   Regeln dazu gelöscht. Blocknummer bleibt für die Zählung.
   ============================================================ */

/* ============================================================
   ERGÄNZUNGEN 16 (Über mich: Fokus-Liste mit Gold-Rauten;
   Ressourcen-Badges alle in Gold; Chat-Chips: Rand-Test)
   ============================================================ */

/* Über mich: Fokus-Liste, Rauten in Gold */
.about-focus {
  margin-top: 18px;
  display: grid;
  gap: 14px;
}
.about-focus li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  line-height: 1.6;
}
.about-focus .focus-star {
  color: var(--gold);
  font-size: 1em;
  line-height: 1.6;
}
.about-focus strong { color: var(--fg); }

/* Ressourcen: alle Meta-Badges in Gold (wie bisher nur "Kostenlos") */
.resource-meta {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  font-weight: 700;
}

/* Chat-Chips im Phone: finale Variante nach Test, alle drei
   Chips mit schwarzem Rand und schwarzem Inner-Glow. */
.chat-chips .chat-chip,
.chat-chips .chat-chip:hover {
  border-color: #000;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, .55), 0 6px 16px -10px rgba(126, 13, 255, .7);
}

/* ============================================================
   ERGÄNZUNGEN 17 (Mobile: Hero-Überlauf-Schutz)
   ============================================================ */

/* Grid-Spalten dürfen schmaler werden als ihr längstes Wort.
   Verhindert, dass der Hero auf Smartphones nach rechts aus
   dem Viewport geschoben wird. */
.hero-grid > * { min-width: 0; }

/* ============================================================
   ERGÄNZUNGEN 18 (Nur Mobile unter 640px: Hero-Titel mit den
   festen Desktop-Umbrüchen und kleinerer Schrift; Stats-
   Trennlinie exakt mittig)
   ============================================================ */

@media (max-width: 640px) {
  /* Feste Umbrüche ("Künstliche Intelligenz / verstehen, statt
     ihr / blind zu vertrauen.") auch mobil zeigen. Schrift so
     verkleinert, dass "Künstliche Intelligenz" in eine Zeile
     passt (bis runter zu 320px-Geräten). */
  .hero-title br { display: revert; }
  .hero-title { font-size: clamp(1.6rem, 8.4vw, 2.4rem); }

  /* Stats: beide Spalten exakt 50 %. minmax(0, 1fr) erlaubt
     Spalten schmaler als ihr längstes Wort; lange Wörter wie
     "plattformübergreifend" brechen dann innerhalb der Zelle um. */
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-label,
  .stat-sub { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   ERGÄNZUNGEN 19 (Chat-Chips skalieren beim Erscheinen herein;
   Stats mobil: kontrollierte Trenn-Umbrüche, Klammerzusatz bei
   +4 Jahre nur Desktop; Keynote-Bild als Lila-Glow-Karte)
   ============================================================ */

/* Chips poppen mit Scale-up herein, leicht gestaffelt.
   animation-delay statt transition-delay, damit Hover-
   Übergänge nicht verzögert werden. */
@keyframes chipIn {
  from { opacity: 0; transform: translateY(10px) scale(.68); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-chip { animation: chipIn .38s cubic-bezier(.2, .9, .3, 1.18) backwards; }
.chat-chips .chat-chip:nth-child(1) { animation-delay: .05s; }
.chat-chips .chat-chip:nth-child(2) { animation-delay: .16s; }
.chat-chips .chat-chip:nth-child(3) { animation-delay: .27s; }

/* Hilfsklasse: Inhalt nur auf Mobile (unter 640px) zeigen */
.only-m { display: none; }

@media (max-width: 640px) {
  .only-m { display: inline; }
  /* +4 Jahre: Klammerzusatz (Fernsehen, Zeitung und
     Wissenschaftskommunikation) mobil ausblenden */
  .stat-sub { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-chip { animation: none; }
}

/* Keynote-Hero: Bild ohne Gelb-Rahmen, stattdessen Karte mit
   lila Rand, lila Glow und Tiefenschatten (Werte wie beim
   Porträt-Panel im Über-mich), 3D-Tilt kommt per .card--tilt. */
.keynote-stage {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1.5px solid rgba(155, 77, 255, .55);
  box-shadow:
    0 0 46px -8px rgba(126, 13, 255, .5),
    0 26px 60px -24px rgba(23, 11, 40, .6);
}
.keynote-stage img {
  display: block;
  width: 100%;
  border-radius: inherit;
}
@media (max-width: 1060px) {
  .page-hero-grid .keynote-stage { max-width: 520px; }
}

/* ============================================================
   ERGÄNZUNGEN 20 (Keynotes: Proof-Zeile 25 % größer; Abstand
   zwischen Perspektiv-Boxen und CTA-Panel halbiert)
   ============================================================ */

/* Proof-Zeile im Keynote-Hero: .92rem * 1.25 = 1.15rem */
.hero-proof--lg { font-size: 1.15rem; }

/* Halbierte Sektionsabstände an der Naht Perspektive/CTA.
   Original: .section unten clamp(76px, 11vw, 130px),
   .section--tight oben clamp(54px, 7vw, 84px). */
.section--half-gap-bottom { padding-bottom: clamp(38px, 5.5vw, 65px); }
.section--half-gap-top { padding-top: clamp(27px, 3.5vw, 42px); }

/* ============================================================
   ERGÄNZUNGEN 21 (Keynotes: Themen als Aufklapp-Liste mit
   Plus-Symbol links, details/summary ohne JS; Linienfarben
   über var(--rule), funktioniert auf hellem wie dunklem Grund)
   ============================================================ */

.topic-list { border-top: 1.5px solid var(--rule); }
.topic-item { border-bottom: 1.5px solid var(--rule); }
.topic-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: clamp(14px, 2.6vw, 34px);
  padding: clamp(20px, 3vw, 30px) clamp(4px, 1.2vw, 16px);
  cursor: pointer;
  list-style: none;
}
.topic-row::-webkit-details-marker { display: none; }
.topic-row::marker { content: none; }
.topic-row h3 { margin: 0; transition: color .2s ease; }
.topic-row:hover h3 { color: var(--violet); }

/* Plus im Kreis, klappt bei [open] zum Minus */
.topic-plus {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 99px;
  border: 1.5px solid var(--rule);
}
.topic-plus::before,
.topic-plus::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: var(--violet);
  transition: transform .25s ease;
}
.topic-plus::before { width: 12px; height: 2px; }
.topic-plus::after { width: 2px; height: 12px; }
.topic-item[open] .topic-plus::after { transform: rotate(90deg); }

/* Ausklapp-Text, bündig mit dem Titel */
.topic-body {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: clamp(14px, 2.6vw, 34px);
  padding: 0 clamp(4px, 1.2vw, 16px) clamp(20px, 3vw, 28px);
}
.topic-body p {
  grid-column: 2;
  margin: 0;
  max-width: 70ch;
  line-height: 1.6;
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .topic-plus::before,
  .topic-plus::after { transition: none; }
}

/* ============================================================
   ERGÄNZUNGEN 22 (Keynotes: Anker-Sprung zum Formular landet
   mit Abstand unter dem fixierten Header)
   ============================================================ */

#anfrage-formular { scroll-margin-top: 90px; }

/* ============================================================
   ERGÄNZUNGEN 23 (Mobile/Tablet: Phone im Hero und Keynote-Bild
   sofort sichtbar, ohne auf die Scroll-Einblendung zu warten)
   ============================================================ */

/* Unter 1060px stehen Phone (Startseite) und Bühnenbild
   (Keynote-Seite) unterm Textblock und waren durch die
   .reveal-Logik (Opacity 0 bis zum Hereinscrollen) anfangs
   unsichtbar. Hier werden sie direkt eingeblendet; der Chat
   im Phone startet ohnehin schon beim Laden. */
@media (max-width: 1060px) {
  .hero-side.reveal,
  .keynote-stage.reveal { opacity: 1; transform: none; }
}

/* ============================================================
   ERGÄNZUNGEN 24: Logo-Marquee (Referenzen im Gold-Band)
   Ersetzt die Text-Begriffe im Band durch durchlaufende Logos.
   Wichtig: Abstand über margin (nicht padding/gap), damit der
   nahtlose Loop bei translateX(-50%) exakt aufgeht und die
   width/height-Attribute der Bilder nicht beschnitten werden.
   ============================================================ */
.marquee-track--logos { align-items: center; animation-duration: 54s; }
/* 54s wirkt länger als vorher 64s, die Spur ist aber durch die großen
   Abstände deutlich länger: effektiv läuft das Band 70 % schneller. */
.marquee-track--logos img {
  display: block;
  flex: 0 0 auto;
  margin-inline: 49px; /* Abstand zwischen den Logos (zuvor 65px, -25%) */
}
/* Logo-Band läuft dauerhaft, auch bei Hover (Text-Variante pausiert weiter) */
.marquee:hover .marquee-track--logos { animation-play-state: running; }
@media (max-width: 640px) {
  .marquee-track--logos img { margin-inline: 34px; }
}

/* ============================================================
   ERGÄNZUNGEN 25: Freiraum um Stats & Gold-Band reduziert (–65 %)
   1) .hero padding-bottom 70px → 24px (mobil 84px → 30px):
      weniger Luft zwischen Phone-Animation und Stats-Leiste.
   2) .marquee-band padding-block 26px → 9px: weniger dunkler
      Rahmen über/unter dem Band. Da das Band gedreht ist, braucht
      es vertikal Auslauf: overflow-y bleibt sichtbar (overflow-x
      clip), z-index hebt das Band über die Nachbar-Hintergründe.
      Effekt: Auf breiten Screens ragt das Band an den äußeren
      Ecken minimal über die Nahtlinien, wie echtes Klebeband.
   ============================================================ */
.hero { padding-bottom: 24px; }
@media (max-width: 1060px) {
  .hero { padding-bottom: 30px; }
}
.marquee-band {
  padding-block: 9px;
  overflow-x: clip;
  overflow-y: visible;
  z-index: 1;
}

/* ============================================================
   ERGÄNZUNGEN 26: Kontaktformular mit Direktversand
   Honeypot-Feld unsichtbar (nicht display:none, das überspringen
   manche Bots), Fehler-Variante der Hinweisbox, Button-Zustand
   während des Sendens.
   ============================================================ */
.hp-field {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.form-note--error {
  background: rgba(255, 73, 73, .10);
  border-color: rgba(255, 73, 73, .45);
}
.form-note a { color: var(--link-accent, var(--gold)); text-decoration: underline; }
button.btn[disabled] { opacity: .65; cursor: wait; transform: none; }

/* ============================================================
   ERGÄNZUNGEN 27: Newsletter-Seite (Brevo-Embed im Site-Design)
   Das Brevo-Formular kommt ohne Inline-Styles ins HTML, die
   komplette Optik liegt hier: Glas-Karte auf dunkler Sektion,
   Site-Fonts, Gold-Button (.btn am Button ergänzt). Funktions-
   klassen von Brevo bleiben unangetastet, nur Optik wird
   überschrieben. sib-styles.css ist VOR style.css eingebunden,
   damit diese Regeln gewinnen.
   ============================================================ */
:where(.sib-form-message-panel) { display: none; }
.sib-form { text-align: center; background: transparent; padding: 0; }
#sib-form-container { max-width: 560px; margin-inline: auto; }
#sib-container {
  background: var(--card-bg);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 4vw, 42px);
  text-align: left;
  backdrop-filter: blur(6px);
}
.sib-form-block { padding: 0; }
.sib-form-block--title p {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.6vw, 1.8rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--fg);
  margin: 0 0 12px;
}
.sib-form-block--text p {
  color: var(--fg-dim);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 22px;
}
.sib-form .entry__label {
  display: block;
  font-weight: 600;
  font-size: .92rem;
  margin-bottom: 7px;
  color: var(--fg);
}
.sib-form .input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 13px;
  border: 1.5px solid var(--rule);
  background: var(--card-bg);
  color: var(--fg);
  font: inherit;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.sib-form .input:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 4px rgba(126, 13, 255, .15);
}
.sib-form .input::placeholder { color: var(--fg-dim); opacity: .55; }
.sib-form .entry__specification {
  display: block;
  font-size: .82rem;
  color: var(--fg-dim);
  margin-top: 9px;
}
.sib-form .entry__specification a,
.sib-form-message-panel a { color: var(--link-accent); text-decoration: underline; }
.sib-form .entry__error {
  display: block;
  font-size: .88rem;
  color: #ff8a8a;
  margin-top: 8px;
}
.sib-form-block--button { margin-top: 22px; }
button.sib-form-block__button.btn { width: auto; }
.sib-form .sib-icon { width: 20px; height: 20px; }
.sib-form-message-panel {
  max-width: 560px;
  margin: 0 auto 16px;
  padding: 14px 18px;
  border-radius: 13px;
  font-size: .95rem;
  text-align: left;
}
#error-message {
  background: rgba(255, 73, 73, .10);
  border: 1px solid rgba(255, 73, 73, .45);
  color: var(--fg);
}
#success-message {
  background: rgba(19, 206, 102, .10);
  border: 1px solid rgba(19, 206, 102, .45);
  color: var(--fg);
}
.sib-form-message-panel__text { display: flex; align-items: center; gap: 10px; }
.sib-form-message-panel .sib-icon { flex: 0 0 auto; fill: currentColor; }

/* ============================================================
   ERGÄNZUNGEN 28: Marquee-Label + Workshop-Hero-Buttons
   1) .marquee-label: kleine Mono-Zeile über dem Gold-Band
      (index/workshops/keynotes), zentriert auf dem Ink-Grund.
      aria-hidden liegt jetzt auf .marquee statt auf der Band-
      Hülle, damit das Label für Screenreader lesbar bleibt.
   2) .btn--offset-r: minimaler Rechts-Versatz für den lila
      "Angebote ansehen"-Button im Workshop-Hero. Mobil (Buttons
      laufen 100 % Breite) wird der Versatz zurückgesetzt.
   ============================================================ */
.marquee-label {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  padding: 16px 20px 12px;
  margin: 0;
}
.btn--offset-r { margin-left: 8px; }
@media (max-width: 640px) {
  .btn--offset-r { margin-left: 0; }
}

/* ============================================================
   ERGÄNZUNGEN 29: Videokurs-Hero, dunkle USP-Karten,
   Nav-Dropdown "Bildungsarbeit"
   ============================================================ */

/* 1) Videokurs-Hero: Headline läuft über die volle Container-
   breite (16ch-Deckel der page-hero-h1 aufgehoben), darunter
   Grid mit Text links und Kursbild rechts. Schriftgröße leicht
   reduziert, damit "Sprachmodelle komplett verstehen." auf
   Desktopbreiten in einer Zeile bleibt. */
.vk-title {
  max-width: none;
  font-size: clamp(1.9rem, 4.9vw, 3.85rem);
  margin-bottom: clamp(18px, 3vw, 30px);
}
.vk-hero-grid { align-items: center; }
@media (max-width: 1060px) {
  .page-hero-grid.vk-hero-grid .keynote-stage { max-width: 520px; }
}

/* 2) USP-Karten ("Tiefes Verständnis, ohne Hürden"): Sektion
   ist jetzt weiß (theme-paper), die Karten behalten ihre dunkle
   Optik. Dafür werden die Kontext-Tokens auf der Karte zurück
   auf die Dunkel-Werte gesetzt; dazu dunkler Tiefenschatten.
   Swivel kommt per .card--tilt aus dem bestehenden JS. */
.vk-usps .card {
  --fg: var(--text);
  --fg-dim: var(--text-dim);
  background: var(--ink-2);
  border-color: rgba(255, 255, 255, .10);
  color: var(--text);
  box-shadow: 0 26px 56px -24px rgba(23, 11, 40, .55);
}
.vk-usps .card:hover {
  border-color: rgba(126, 13, 255, .55);
  box-shadow:
    0 30px 64px -24px rgba(23, 11, 40, .65),
    0 22px 56px -26px rgba(126, 13, 255, .45);
}
/* Spotlight wieder in der kräftigeren Dunkel-Variante */
.vk-usps .spot::after {
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(126, 13, 255, .16), transparent 65%);
}

/* 3) Nav-Dropdown "Bildungsarbeit": Button im Stil der Nav-
   Links, Menü als dunkle Karte darunter. Öffnet per Hover/
   Fokus (CSS) und per Klick (JS, synct aria-expanded). */
.nav-drop { position: relative; }
.nav-drop-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: .96rem;
  font-weight: 600;
  color: var(--text-dim);
  background: none;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: color .2s ease;
}
.nav-drop-btn::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 5px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.nav-drop-btn:hover,
.nav-drop.is-open .nav-drop-btn,
.nav-drop:focus-within .nav-drop-btn { color: var(--text); }
.nav-drop-btn.is-current { color: var(--text); }
.nav-drop-btn.is-current::after,
.nav-drop-btn:hover::after { transform: scaleX(1); }
.nav-drop-chev {
  width: 11px; height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s ease;
}
.nav-drop:hover .nav-drop-chev,
.nav-drop.is-open .nav-drop-chev,
.nav-drop:focus-within .nav-drop-chev { transform: rotate(180deg); }
.nav-drop-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 6px;
  min-width: 190px;
  display: grid;
  gap: 2px;
  padding: 8px;
  background: var(--ink-2);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 14px;
  box-shadow: 0 24px 56px -18px rgba(0, 0, 0, .6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  z-index: 130;
}
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu,
.nav-drop.is-open .nav-drop-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.main-nav .nav-drop-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: .94rem;
}
.main-nav .nav-drop-menu a::after { display: none; }
.main-nav .nav-drop-menu a:hover {
  background: rgba(126, 13, 255, .18);
  color: var(--text);
}
.main-nav .nav-drop-menu a[aria-current="page"] {
  background: rgba(126, 13, 255, .14);
}
@media (prefers-reduced-motion: reduce) {
  .nav-drop-menu { transition: none; }
}

/* ============================================================
   ERGÄNZUNGEN 30: Kontakt einspaltig, dunkle Boxen mit Lila-
   Glow (Workshops/Guide/Keynotes), Guide-Umbau
   ============================================================ */

/* 1) Kontakt: Formular-Grid sitzt jetzt mit im Hero-Abschnitt.
   Der Hero zentriert Text, das Grid braucht wieder Linksbündig-
   keit und etwas Abstand zur Lead-Zeile. */
.kontakt-grid {
  text-align: left;
  margin-top: clamp(36px, 6vw, 64px);
}

/* 2) Dunkle Karten mit leichtem Lila-Glow: gleiche Dunkel-Optik
   wie die USP-Karten auf der Videokurs-Seite (Kontext-Tokens
   zurück auf Dunkel-Werte), zusätzlich ein weicher violetter
   Schein. Gilt für die Zielgruppen-Karten im Guide und die
   Disziplin-Karten auf der Keynote-Seite. */
.cards-dark .card {
  --fg: var(--text);
  --fg-dim: var(--text-dim);
  background: var(--ink-2);
  border-color: rgba(255, 255, 255, .10);
  color: var(--text);
  box-shadow:
    0 0 38px -10px rgba(126, 13, 255, .35),
    0 26px 56px -24px rgba(23, 11, 40, .5);
}
.cards-dark .card p { color: #fff; }
.cards-dark .card:hover {
  border-color: rgba(126, 13, 255, .55);
  box-shadow:
    0 0 46px -8px rgba(126, 13, 255, .5),
    0 30px 64px -24px rgba(23, 11, 40, .6);
}
.cards-dark .spot::after {
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(126, 13, 255, .16), transparent 65%);
}

/* 2b) Workshop-Angebote: Accordion-Boxen in derselben Dunkel-
   Optik mit Lila-Glow, obwohl die Sektion hell (theme-paper)
   ist. Kontext-Tokens auf der Box zurückgesetzt, damit Kopf-
   zeile, Texte, Häkchen und Meta-Label die Dunkel-Farben nutzen. */
.acc--dark .acc-item {
  --fg: var(--text);
  --fg-dim: var(--text-dim);
  --eyebrow: var(--gold);
  --rule: var(--line);
  background: var(--ink-2);
  border-color: rgba(255, 255, 255, .10);
  color: var(--text);
  box-shadow:
    0 0 38px -10px rgba(126, 13, 255, .35),
    0 22px 48px -22px rgba(23, 11, 40, .5);
}
.acc--dark .acc-item.is-open { border-color: rgba(126, 13, 255, .55); }
.acc--dark .acc-item p { color: var(--text-dim); }
.acc--dark .acc-item p strong { color: var(--text); }
.acc--dark .tick {
  background: rgba(255, 194, 13, .14);
  color: var(--gold);
}

/* 3) Guide-Hero: Bild der Beispielseiten ohne Rahmen/Glow,
   bewusst „nackt“ neben der Überschrift. */
.guide-hero-img img {
  display: block;
  width: 100%;
}
@media (max-width: 1060px) {
  .page-hero-grid .guide-hero-img { max-width: 520px; }
  .guide-hero-img.reveal { opacity: 1; transform: none; }
}

/* 4) Guide-Inhalt: Token-Widget steht jetzt rechts neben Text
   und Checkliste; auf Mobile in voller Breite darunter. */
#inhalt .token-widget { max-width: 620px; }

/* ============================================================
   ERGÄNZUNGEN 31: Einzeilige Hero-Headlines (Videokurs/Guide),
   Token-Widget ohne Klick + Regler-Hinweis, Widget-Dunkelkarte
   ============================================================ */

/* 1) Erste Headline-Zeile bleibt garantiert einzeilig und läuft
   über die Breite nach rechts; .vk-title ist dafür in Block 29
   verkleinert (Cap 3.85rem). Auf Mobile darf wieder umbrochen
   werden, sonst läuft die Zeile aus dem Viewport. */
.vk-title .vk-line { white-space: nowrap; }
@media (max-width: 640px) {
  .vk-title .vk-line { white-space: normal; }
}

/* 2) Token-Widget im hellen Inhalt-Abschnitt des Guides: Die
   Innenfarben sind fest auf die Dunkel-Palette verdrahtet, nur
   Hintergrund/Rahmen waren transluzent. Hier als solide Dunkel-
   karte mit Lila-Glow, passend zu den anderen dunklen Boxen. */
.theme-paper .token-widget {
  background: var(--ink-2);
  border-color: rgba(255, 255, 255, .10);
  box-shadow:
    0 0 38px -10px rgba(126, 13, 255, .35),
    0 26px 56px -24px rgba(23, 11, 40, .5);
}

/* 3) Token-Optionen sind reine Anzeige: kein Klick, kein Hover.
   Die Demo wählt automatisch (JS rendert Spans statt Buttons). */
.tw-option { pointer-events: none; cursor: default; }

/* 4) Handschriftlicher Hinweis am Temperatur-Regler mit kleinem
   Pfeil Richtung Slider (Caveat wird nur auf guide.html geladen,
   Fallback cursive). */
.tw-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0 0 4px;
  font-family: "Caveat", "Comic Sans MS", cursive;
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--gold);
  transform: rotate(-1.5deg);
}
.tw-note-arrow {
  flex: none;
  width: 34px;
  height: 24px;
  margin-top: -8px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   ERGÄNZUNGEN 32: Quellen-Seite als Aufklapp-Liste
   Einträge nutzen die bestehende Accordion-Optik (dunkle Karte),
   öffnen aber unabhängig voneinander (JS delegiert in main.js).
   ============================================================ */
.q-acc-item .acc-head { gap: 14px; }
.q-acc-title { flex: 1; min-width: 0; }
.q-acc-item .acc-meta { font-size: .72rem; }
.q-list { display: grid; gap: 9px; list-style: none; padding: 0; margin: 0; }
.q-list li a {
  color: var(--link-accent);
  font-size: .95rem;
  word-break: break-word;
  border-bottom: 1px dashed transparent;
}
.q-list li a:hover { border-bottom-color: currentColor; }
.q-nolink { font-size: .95rem; color: var(--fg-dim); word-break: break-word; }
.q-share { margin-top: 18px; }
.q-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .02em;
  color: rgba(243, 239, 252, .66);
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.q-share-btn svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.q-share-btn:hover {
  color: var(--violet-2);
  border-color: rgba(126, 13, 255, .55);
  background: rgba(126, 13, 255, .10);
}
.q-share-btn.is-copied {
  color: var(--gold);
  border-color: rgba(255, 194, 13, .55);
  background: rgba(255, 194, 13, .10);
}
@media (max-width: 640px) {
  .q-acc-item .acc-head { flex-wrap: wrap; }
  .q-acc-item .acc-meta { margin-left: 44px; width: 100%; order: 3; }
}

/* ============================================================
   ERGÄNZUNGEN 33: Home-Hero-Lead in Weiß, einzeilige
   Abschnittsüberschrift
   ============================================================ */
/* Hero-Lead ("Ich helfe Menschen dabei, …") in Weiß statt dim */
.hero .lead { color: var(--text); }

/* "Lernen, nachlesen, nachprüfen" bleibt einzeilig; die
   section-head ist 760px breit, die Zeile darf darüber
   hinauslaufen. Auf sehr schmalen Screens wieder umbrechen. */
.nb-line { white-space: nowrap; }
@media (max-width: 560px) {
  .nb-line { white-space: normal; }
}

/* ============================================================
   ERGÄNZUNGEN 34: Finaler Durchgang Home & Keynotes
   ============================================================ */
/* Lead-Varianten: Tinte auf Papier (Lernmaterial-Abschnitt) und
   Weiß (Keynote-Hero) */
.theme-paper .lead--ink { color: var(--ink-on-paper); }
.lead--white { color: var(--text); }

/* Angebot-Karten ohne Miniboxen: rund 25 % flacher */
.card--slim { padding-block: clamp(18px, 2vw, 26px); }

/* Keynote-CTA-Panel mit Lila-Glow (Swivel kommt per .card--tilt) */
.panel--glow {
  box-shadow:
    0 0 46px -8px rgba(126, 13, 255, .5),
    0 26px 60px -24px rgba(23, 11, 40, .6);
}

/* ============================================================
   ERGÄNZUNGEN 35: Pfeil-Indikator auf den Angebot-Karten
   (zeigt Klickbarkeit, schiebt sich beim Hover nach rechts)
   ============================================================ */
.card--slim { position: relative; padding-right: clamp(56px, 6vw, 72px); }
.card-arrow {
  position: absolute;
  right: clamp(20px, 2.4vw, 28px);
  bottom: clamp(18px, 2vw, 24px);
  font-size: 1.5rem;
  color: var(--gold);
  transition: transform .25s ease;
}
.card--slim:hover .card-arrow { transform: translateX(6px); }

/* ============================================================
   ERGÄNZUNGEN 36: Kompakter Keynote-Hero
   Titel und Bild rücken nach oben, der Abstand zur Stats-Leiste
   schrumpft, damit die Zahlen schon beim Laden sichtbar sind.
   ============================================================ */
.page-hero--tight {
  padding-top: calc(var(--header-h) + clamp(30px, 5vw, 60px));
  padding-bottom: clamp(20px, 3vw, 36px);
}

/* ============================================================
   ERGÄNZUNGEN 37: Token-Widget-Fixes im hellen Guide-Abschnitt
   ============================================================ */
/* 1) Satzzeile und getippte Wörter hatten keine eigene Farbe und
   erbten im theme-paper-Kontext die dunkle Tinte (unsichtbar auf
   der Dunkelkarte). Farben im Widget fest verdrahten. */
.token-widget .tw-sentence { color: var(--text); }
.token-widget.is-done .tw-sentence { color: var(--gold); }

/* 2) Handschrift-Hinweis: rückt unter die Reglermitte und der
   längere Pfeil zeigt nach oben auf die Leiste. */
.tw-note { margin: 2px 0 0 clamp(40px, 22%, 150px); }
.tw-note-arrow {
  width: 28px;
  height: 36px;
  margin-top: -22px;
}

/* ============================================================
   ERGÄNZUNGEN 38: Hinweis-Pfeil zeigt auf die Slider-Mitte
   Der Regler startet bei Temperatur 1 = exakte Mitte (min=0,
   max=2); die Pfeilspitze sitzt per padding ebenfalls mittig.
   ============================================================ */
.tw-note {
  margin: 2px 0 0;
  padding-left: calc(50% - 4px);
}
@media (max-width: 480px) {
  .tw-note { padding-left: calc(50% - 60px); }
}

/* ============================================================
   ERGÄNZUNGEN 39: Stats-Leiste auf Smartphones kompakter
   (kleinere Schrift, Boxen rund ein Drittel flacher)
   ============================================================ */
@media (max-width: 600px) {
  .stat { padding: 17px 14px; }
  .stat-num { font-size: 1.45rem; }
  .stat-label {
    margin-top: 6px;
    font-size: .62rem;
    letter-spacing: .09em;
    line-height: 1.45;
  }
  .stat-sub { font-size: .6rem; margin-top: 4px; }
}

/* ============================================================
   ERGÄNZUNGEN 40: Panel-Lead immer hell
   (.panel hat stets violetten Hintergrund, daher Lead-Text auf
   helles --text-dim festlegen, sonst wird er in theme-paper-
   Sektionen dunkel und auf Violett unleserlich)
   ============================================================ */
.panel .lead { color: var(--text-dim); }

/* ============================================================
   ERGÄNZUNGEN 41: Workshops-Formular auf Dunkel-Abschnitt +
   Guide-Feinschliff (Hero-Bild, Lead-Umbruch, Anmelde-Abstand)
   ============================================================ */

/* 1) Workshops: Der Anfrage-Abschnitt ist dunkel (Ink, wie ganz
   oben im Seitenkopf). Ueberschrift und Labels stehen weiss auf
   dunklem Grund (Standard der Dunkel-Palette), die Eingabefelder
   bleiben weiss mit dunklem Text. */
#anfrage-formular .field input,
#anfrage-formular .field textarea {
  background: #fff;
  color: var(--ink-on-paper);
  border-color: rgba(23, 11, 40, .12);
}
#anfrage-formular .field input::placeholder,
#anfrage-formular .field textarea::placeholder {
  color: var(--dim-on-paper);
  opacity: .55;
}
#anfrage-formular .field input:focus,
#anfrage-formular .field textarea:focus {
  border-color: var(--violet);
  box-shadow: 0 0 0 4px rgba(126, 13, 255, .25);
}

/* 2) Guide-Hero: Bild der drei Beispielseiten rueckt etwas hoeher
   (nur in der zweispaltigen Desktop-Ansicht). */
@media (min-width: 1061px) {
  .guide-hero-img { margin-top: -28px; }
}

/* 3) Guide-Hero-Lead: bricht in der Desktop-Spalte nach
   "Verantwortungs-" um. Weiches Trennzeichen (­) sitzt im
   Wort, Schrift minimal kleiner und Breite folgt der Spalte. */
@media (min-width: 1061px) {
  .page-hero .lead.lead--break {
    font-size: clamp(1rem, 1.35vw, 1.12rem);
    max-width: none;
  }
}

/* 4) Guide-Anmeldung: Der Abstand zwischen den Zielgruppen-Boxen
   darueber und der Anmelde-Ueberschrift wird halbiert. Umgesetzt
   ueber section--half-gap-* am Zielgruppen- und Anmelde-Abschnitt
   direkt im HTML. */

/* ============================================================
   ERGÄNZUNGEN 42: Dankesseite (danke.html) nach Newsletter-
   Anmeldung. Zentrierter Hero mit Haken-Badge und Download.
   ============================================================ */
.thanks-badge {
  width: clamp(66px, 8vw, 92px);
  aspect-ratio: 1;
  margin: 0 auto clamp(18px, 3vw, 30px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 194, 13, .28), transparent 70%),
    var(--ink-2);
  border: 1.5px solid rgba(255, 194, 13, .55);
  box-shadow: 0 0 44px -8px rgba(255, 194, 13, .45);
}
.thanks-badge svg {
  width: 46%;
  height: 46%;
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   ERGÄNZUNGEN 43: Test-Variante des Marker-Highlights
   (mk--solid). Goldfläche sitzt vollflächig hinter dem Text
   statt als versetztes Band, weisse Schrift mit leichtem
   schwarzem Schatten für besseren Kontrast.
   ============================================================ */
.mk.mk--solid {
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: left calc(50% + 0.08em);
  background-size: 0% 0.62em;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .4);
  padding: 0 .12em;
}
.is-in .mk.mk--solid,
.mk.mk--solid.is-in { background-size: 100% 0.62em; }
/* Violette Variante in hellen Sektionen (theme-paper): gleiche
   Geometrie und Position wie mk--solid, aber violetter Ton,
   dunkler Text, kein Schatten. */
.theme-paper .mk.mk--solid {
  background-image: linear-gradient(rgba(126, 13, 255, .22), rgba(126, 13, 255, .22));
  color: inherit;
  text-shadow: none;
}

/* ============================================================
   ERGÄNZUNGEN 44: Kontaktseite. Rechte Karten-Spalte startet
   buendig mit dem ersten Eingabefeld links (in zweispaltiger
   Ansicht). Beide Karten erhalten dauerhaft lila Rand + Glow.
   ============================================================ */
@media (min-width: 601px) {
  .kontakt-grid > div { margin-top: calc(0.92rem * 1.65 + 3px); }
}
.kontakt-grid .card {
  border: 1.5px solid rgba(126, 13, 255, .6);
  box-shadow:
    0 0 42px -10px rgba(126, 13, 255, .5),
    0 24px 56px -30px rgba(126, 13, 255, .42);
}

/* ============================================================
   ERGÄNZUNGEN 45: Videokurs „Auf einen Blick" (vk-usps).
   Die drei Karten bekommen dauerhaft einen lila Rand und einen
   leichten lila Glow (auch ohne Hover).
   ============================================================ */
.vk-usps .card {
  border: 1.5px solid rgba(126, 13, 255, .6);
  box-shadow:
    0 0 40px -6px rgba(126, 13, 255, .5),
    0 22px 54px -28px rgba(126, 13, 255, .42);
}

/* ============================================================
   ERGÄNZUNGEN 46: Social-Media-Seite. Markenfarbene Buttons
   (Instagram orange, TikTok hellblau, YouTube rot, LinkedIn
   dunkelblau) ohne Puls. Plus großes Brain-Emoji unter dem
   Hero-Titel.
   ============================================================ */
.btn--ig, .btn--tt, .btn--yt, .btn--li {
  background: #fff;
  color: #0a0612;
  border-width: 2px;
}
.btn--ig { border-color: #f77737; box-shadow: 0 0 24px -6px rgba(247,119,55,.55), 0 8px 24px -12px rgba(247,119,55,.45); }
.btn--ig:hover { background: #fff; border-color: #f77737; box-shadow: 0 0 32px -4px rgba(247,119,55,.72), 0 10px 28px -12px rgba(247,119,55,.55); }
.btn--tt { border-color: #25f4ee; box-shadow: 0 0 24px -6px rgba(37,244,238,.55), 0 8px 24px -12px rgba(37,244,238,.45); }
.btn--tt:hover { background: #fff; border-color: #25f4ee; box-shadow: 0 0 32px -4px rgba(37,244,238,.72), 0 10px 28px -12px rgba(37,244,238,.55); }
.btn--yt { border-color: #ff0000; box-shadow: 0 0 24px -6px rgba(255,0,0,.5), 0 8px 24px -12px rgba(255,0,0,.42); }
.btn--yt:hover { background: #fff; border-color: #ff0000; box-shadow: 0 0 32px -4px rgba(255,0,0,.68), 0 10px 28px -12px rgba(255,0,0,.52); }
.btn--li { border-color: #0a66c2; box-shadow: 0 0 24px -6px rgba(10,102,194,.55), 0 8px 24px -12px rgba(10,102,194,.45); }
.btn--li:hover { background: #fff; border-color: #0a66c2; box-shadow: 0 0 32px -4px rgba(10,102,194,.72), 0 10px 28px -12px rgba(10,102,194,.55); }

.brainrot-emoji {
  font-size: clamp(5.3rem, 13.5vw, 10rem);
  line-height: 1;
  margin: 6px 0 2px;
}

/* ============================================================
   ERGÄNZUNGEN 47: Keynote „Drei Disziplinen" (#perspektive).
   Die drei Karten bekommen dauerhaft einen lila Rand, auch
   ohne Hover.
   ============================================================ */
#perspektive .card {
  border: 1.5px solid rgba(126, 13, 255, .55);
}

/* ============================================================
   ERGÄNZUNGEN 48: Keynote „Drei Disziplinen" Überschrift +
   Lead über die volle Breite (kein 760px-Limit, keine
   Auto-Silbentrennung). Plus Select-Styling im Keynote-
   Formular (weiße Felder wie die übrigen Eingaben).
   ============================================================ */
#perspektive .section-head { max-width: none; }
#perspektive .section-head .lead { max-width: none; color: #000; }
#perspektive .section-head h2 { hyphens: manual; -webkit-hyphens: manual; }

#anfrage-formular .field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: var(--ink-on-paper);
  border-color: rgba(23, 11, 40, .12);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237e0dff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px;
  padding-right: 44px;
  cursor: pointer;
}
#anfrage-formular .field select:focus {
  border-color: var(--violet);
  box-shadow: 0 0 0 4px rgba(126, 13, 255, .25);
}

/* ============================================================
   ERGÄNZUNGEN 49:
   a) .only-d  -> Inhalt nur auf Desktop (Gegenstück zu .only-m)
   b) Guide-Handschrift-Hinweis auf Mobile mittig stapeln,
      damit der Pfeil genau auf die Slider-Mitte zeigt
   c) Handschrift-Notiz + Pfeil unter dem Phone auf der Startseite
   ============================================================ */
.only-d { display: inline; }
@media (max-width: 640px) {
  .only-d { display: none; }
}

/* b) Guide: Notiz auf Mobile als zentrierte Spalte (Pfeil oben,
   zeigt nach oben auf die Reglermitte; Text darunter zentriert) */
@media (max-width: 640px) {
  .tw-note {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-left: 0;
    gap: 0;
  }
  .tw-note-arrow {
    margin: -14px 0 1px 12px;
  }
}

/* c) Startseite: handschriftliche Notiz mit Pfeil unter dem Phone,
   linksbündig, Pfeil zeigt nach oben auf die Chat-Boxen */
.phone-note {
  align-self: flex-start;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin: 2px 0 0 6px;
  font-family: "Caveat", "Comic Sans MS", cursive;
  font-size: 1.34rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--gold);
  transform: rotate(-2deg);
  pointer-events: none;
}
.phone-note-arrow {
  flex: none;
  width: 42px;
  height: 42px;
  margin-bottom: 2px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   ERGÄNZUNGEN 50: Home-About-Titel auf Mobile ~10% kleiner,
   damit "Journalist, Soziologe und" einzeilig bleibt.
   ============================================================ */
@media (max-width: 640px) {
  .home-about-title { font-size: 1.65rem; }
}
@media (max-width: 389px) {
  .home-about-title { font-size: 1.55rem; }
}

/* ============================================================
   ERGÄNZUNGEN 51: Mobiles Aufklappmenü "Bildungsarbeit"
   (Button im Stil der mnav-links, Untermenü klappt als
   Akkordeon auf). Quellen liegt mit darin.
   ============================================================ */
.mobile-nav { justify-content: safe center; overflow-y: auto; }

.mnav-drop {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .4s ease, transform .45s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i, 0) * 60ms + 80ms);
}
body.nav-open .mnav-drop { opacity: 1; transform: none; }

.mnav-drop-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 7.5vw, 2.6rem);
  line-height: 1.1;
  padding: 10px 0;
  color: var(--text);
  background: none;
  border: none;
  cursor: pointer;
}
.mnav-drop-btn:hover { color: var(--gold); }
.mnav-drop.is-active .mnav-drop-btn { color: var(--gold); }

.mnav-drop-chev {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .3s ease;
}
.mnav-drop.is-open .mnav-drop-chev { transform: rotate(180deg); }

.mnav-drop-menu {
  display: grid;
  gap: 4px;
  max-height: 0;
  overflow: hidden;
  padding-left: 20px;
  transition: max-height .35s ease;
}
.mnav-drop.is-open .mnav-drop-menu { max-height: 360px; }

.mnav-drop-menu a {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 5vw, 1.6rem);
  padding: 8px 0;
  color: var(--text-dim);
}
.mnav-drop-menu a:hover { color: var(--gold); }
.mnav-drop-menu a[aria-current="page"] { color: var(--gold); }

/* ============================================================
   ERGÄNZUNGEN 52: Cookie-Consent (vanilla-cookieconsent v3),
   iframemanager-Platzhalter und Footer-Link an das
   Markendesign angepasst (Violett #7e0dff, Gold #ffc20d,
   Schwarz, Weiß, lokale Schriften).
   ============================================================ */

/* --- Footer-Link "Cookie-Einstellungen" (öffnet Präferenzen) --- */
.cookie-prefs-link {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: color .2s ease;
}
.cookie-prefs-link:hover,
.cookie-prefs-link:focus-visible { color: var(--gold); }

/* --- vanilla-cookieconsent v3: Farbschema über CSS-Variablen --- */
#cc-main {
  --cc-font-family: var(--font-body, "Instrument Sans", system-ui, sans-serif);
  --cc-bg: #170b28;
  --cc-primary-color: #ffffff;
  --cc-secondary-color: #c9bce0;

  --cc-btn-primary-bg: #ffc20d;
  --cc-btn-primary-color: #0a0612;
  --cc-btn-primary-border-color: #ffc20d;
  --cc-btn-primary-hover-bg: #ffce3a;
  --cc-btn-primary-hover-color: #0a0612;
  --cc-btn-primary-hover-border-color: #ffce3a;

  --cc-btn-secondary-bg: rgba(255, 255, 255, .08);
  --cc-btn-secondary-color: #ffffff;
  --cc-btn-secondary-border-color: rgba(255, 255, 255, .18);
  --cc-btn-secondary-hover-bg: rgba(255, 255, 255, .16);
  --cc-btn-secondary-hover-color: #ffffff;
  --cc-btn-secondary-hover-border-color: rgba(255, 255, 255, .28);

  --cc-separator-border-color: rgba(255, 255, 255, .12);

  --cc-toggle-on-bg: #7e0dff;
  --cc-toggle-off-bg: #5a5570;
  --cc-toggle-on-knob-bg: #ffffff;
  --cc-toggle-off-knob-bg: #ffffff;
  --cc-toggle-readonly-bg: #3a3550;
  --cc-toggle-readonly-knob-bg: #c9bce0;
  --cc-toggle-readonly-knob-icon-color: #170b28;

  --cc-cookie-category-block-bg: rgba(255, 255, 255, .04);
  --cc-cookie-category-block-border: rgba(255, 255, 255, .10);
  --cc-cookie-category-block-hover-bg: rgba(255, 255, 255, .07);
  --cc-cookie-category-block-hover-border: rgba(126, 13, 255, .55);
  --cc-cookie-category-expanded-block-bg: rgba(255, 255, 255, .03);
  --cc-cookie-category-expanded-block-hover-bg: rgba(255, 255, 255, .08);

  --cc-overlay-bg: rgba(5, 3, 12, .72);
  --cc-modal-border-radius: 18px;
  --cc-btn-border-radius: 99px;

  --cc-link-color: #ffc20d;
}
#cc-main .cm__title,
#cc-main .pm__title {
  font-family: var(--font-display, "Bricolage Grotesque", sans-serif);
  font-weight: 800;
}
#cc-main a,
#cc-main .cm__footer a,
#cc-main .pm__body a { color: var(--gold); text-decoration: underline; }
#cc-main a:hover { color: #ffce3a; }
#cc-main .pm__badge,
#cc-main .section__toggle:checked + .toggle__icon { background: #7e0dff; }

/* --- iframemanager: YouTube-Platzhalter (Container + Inhalt) --- */
.yt-embed {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #0c0c10;
  border: 1px solid rgba(255, 255, 255, .12);
  color: #ffffff;
}
.yt-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Platzhalter-Text hell, Buttons im Markenstil (gold) */
.yt-embed .c-nt,
.yt-embed .cll,
.yt-embed p { color: #e9e3f5; }
.yt-embed .c-l-bn,
.yt-embed .c-la-bn,
.yt-embed button {
  font-family: var(--font-display, "Bricolage Grotesque", sans-serif);
  font-weight: 700;
  font-size: .95rem;
  background: #ffc20d;
  color: #0a0612;
  border: 0;
  border-radius: 99px;
  padding: 11px 20px;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.yt-embed .c-l-bn:hover,
.yt-embed .c-la-bn:hover,
.yt-embed button:hover { background: #ffce3a; }
.yt-embed .c-la-bn { background: rgba(255, 255, 255, .10); color: #ffffff; }
.yt-embed .c-la-bn:hover { background: rgba(255, 255, 255, .18); }

/* ============================================================
   ERGÄNZUNGEN 53: Newsletter-Formular (Brevo, natives HTML)
   ============================================================ */
.nl-form { max-width: 480px; margin-inline: auto; }
.nl-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none;
}
.nl-spec { font-size: .82rem; color: var(--text-dim); margin: 10px 0 0; }
.nl-spec a { color: var(--gold); }
.nl-error { color: #ff6b6b; font-size: .9rem; margin: 10px 0 0; }

/* ============================================================
   ERGÄNZUNGEN 54: Große Display-Titel nicht automatisch trennen
   (verhindert hässliche Worttrennung wie "Veranstal-tung";
   sie brechen stattdessen an Wortgrenzen um).
   ============================================================ */
.display-xl, .display-lg, .display-md {
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* ============================================================
   ERGÄNZUNGEN 55: Erfolgsmeldung Formular + Keynote-Hero-Spalten
   ============================================================ */
.nl-done {
  border: 1px solid rgba(255, 194, 13, .35);
  background: rgba(255, 194, 13, .07);
  border-radius: 18px;
  padding: clamp(22px, 4vw, 34px);
}

/* Keynote-Hero: Textspalte breiter, damit "Keynotes für Ihre" einzeilig passt */
.page-hero--wide-copy h1 { max-width: none; }
@media (min-width: 1061px) {
  .page-hero--wide-copy .page-hero-grid { grid-template-columns: 1.32fr .68fr; }
}

/* ============================================================
   ERGÄNZUNGEN 56: Guide. Temperatur-Widget nur auf Desktop,
   auf Smartphones ausgeblendet. Zielgruppen-Karten ohne Badge
   oben und vertikal um 15% kompakter (Padding oben/unten).
   ============================================================ */
/* Token-/Temperatur-Widget nur ab Tablet/Desktop zeigen */
@media (max-width: 640px) {
  #tokenWidget { display: none; }
}

/* Zielgruppen-Karten: oberes/unteres Padding 15% reduziert
   (Basis .card: clamp(24px, 2.6vw, 34px) -> x0.85) */
.card--tight { padding-block: clamp(20.4px, 2.21vw, 28.9px); }

/* ============================================================
   ERGÄNZUNGEN 57: Cookie-Präferenzen. Die aufklappbaren
   Kategorie-Kästen nutzten --cc-btn-border-radius (99px, für
   Buttons gedacht) und wurden dadurch zu stark gerundet.
   Buttons bleiben Pille, die Kästen bekommen moderaten Radius.
   Eingeklappte Toggle-Zeilen bleiben unverändert.
   ============================================================ */
/* "Weitere Informationen" und sonstige Nicht-Toggle-Abschnitte */
#cc-main .pm__section:not(.pm__section--toggle):not(:first-child) {
  border-radius: 14px;
}
/* Aufgeklappter Beschreibungsbereich: untere Ecken moderat statt 99px */
#cc-main .pm__section--toggle .pm__section-desc-wrapper {
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}
/* Aufgeklappte Titelzeile: obere Ecken passend reduzieren */
#cc-main .pm__section--toggle.is-expanded .pm__section-title {
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

/* ============================================================
   ERGÄNZUNGEN 58: Keynote-Hero. Titel etwas kleiner, alles in
   der linken Spalte neben dem Bild (kein Übergreifen aufs Bild).
   ============================================================ */
.page-hero--kn .kn-title {
  font-size: clamp(2rem, 4.4vw, 3.35rem);
}

/* ============================================================
   ERGÄNZUNGEN 59: Rechtliche Links (Impressum, Datenschutz,
   Cookie-Einstellungen) gruppiert in der Fußzeilen-Unterleiste.
   ============================================================ */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}
.footer-legal a,
.footer-legal .cookie-prefs-link {
  color: var(--text-dim);
  text-decoration: none;
  font-size: inherit;
  transition: color .2s ease;
}
.footer-legal a:hover,
.footer-legal a:focus-visible,
.footer-legal .cookie-prefs-link:hover,
.footer-legal .cookie-prefs-link:focus-visible {
  color: var(--gold);
}
@media (max-width: 560px) {
  .footer-legal { gap: 14px; row-gap: 8px; }
}

/* ============================================================
   ERGÄNZUNGEN 60: Fließtext-Blöcke auf den Leistungs- und
   Über-mich-Unterseiten. Angenehme Lesbarkeit, letzter Absatz
   ohne Abstand.
   ============================================================ */
.prose-block p {
  color: var(--fg-dim);
  font-size: 1.06rem;
}
.prose-block p:last-child { margin-bottom: 0; }
.prose-block p strong { color: var(--fg); font-weight: 600; }

/* ============================================================
   ERGÄNZUNGEN 61: Fallbeispiel-Karten (gestapelt) und
   ausklappbare Quellenliste auf den Keynote-Unterseiten.
   ============================================================ */
.case-card { margin-top: clamp(18px, 2.4vw, 28px); }
.case-card .card-tag { margin-bottom: 14px; }
.case-card h3 { margin-bottom: .55em; }

.src-details {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card-bg);
  padding: 4px clamp(16px, 2vw, 22px);
}
.src-details > summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-dim);
  padding: 14px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.src-details > summary::-webkit-details-marker { display: none; }
.src-details > summary::before {
  content: "+";
  font-size: 1.1rem;
  line-height: 1;
  color: var(--violet-2);
  transition: transform .25s ease;
}
.src-details[open] > summary::before { content: "\2013"; }
.src-details > summary:hover { color: var(--fg); }
.src-list {
  margin: 0 0 16px;
  padding: 0 0 0 2px;
  list-style: none;
}
.src-list li {
  font-size: .9rem;
  color: var(--fg-dim);
  line-height: 1.5;
  padding: 9px 0;
  border-top: 1px solid var(--rule);
  overflow-wrap: anywhere;
}
.src-list li a { color: var(--link-accent); }
.src-list li a:hover { color: var(--gold); }

/* ============================================================
   ERGÄNZUNGEN 62: Mechanismus-Karten mit nummerierten Markern
   (echte Reihenfolge) auf der Keynote-Unterseite zu kognitiven
   Fähigkeiten.
   ============================================================ */
.mech-list {
  display: grid;
  gap: clamp(18px, 2.4vw, 26px);
}
.mech-card { padding-top: clamp(28px, 3vw, 40px); }
.mech-card .mech-num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--violet-2);
  margin-bottom: 10px;
}
.theme-paper .mech-card .mech-num { color: var(--violet); }
.mech-card h3 { margin-bottom: .5em; }
.mech-card .prose-block p:last-child { margin-bottom: 0; }

/* ============================================================
   ERGÄNZUNGEN 63: Lebenslauf-Seite (ueber-mich). Kennzahlen,
   Bildungs-Karten und eine vertikale Timeline als Signatur.
   ============================================================ */

/* Kennzahlen-Band */
.cv-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2vw, 24px);
}
.cv-stat {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: clamp(20px, 2.4vw, 28px);
  text-align: center;
}
.cv-stat-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1;
  color: var(--gold);
  margin-bottom: 8px;
}
.cv-stat-label {
  font-size: .9rem;
  color: var(--fg-dim);
  line-height: 1.4;
}

/* Karten-Raster (Bildung, Ehrenamt) */
.cv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
}
.cv-org {
  font-family: var(--font-mono);
  font-size: .85rem;
  letter-spacing: .03em;
  color: var(--violet-2);
  margin: 0 0 .9em;
}
.theme-paper .cv-org { color: var(--violet); }
.cv-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.cv-points li {
  position: relative;
  padding-left: 22px;
  font-size: .98rem;
  color: var(--fg-dim);
  line-height: 1.5;
}
.cv-points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* Vertikale Timeline (Signatur-Element) */
.cv-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  gap: clamp(22px, 3vw, 34px);
}
.cv-timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, var(--violet) 0%, rgba(126, 13, 255, .15) 100%);
}
.cv-tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(20px, 3vw, 40px);
  padding-left: 34px;
}
.cv-tl-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--violet-2);
  box-shadow: 0 0 0 4px var(--ink), 0 0 18px -2px rgba(126, 13, 255, .7);
}
.cv-tl-period {
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--gold);
  padding-top: 2px;
}
.cv-tl-role {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  line-height: 1.2;
  margin: 0 0 .35em;
  color: var(--fg);
}
.cv-tl-body p { color: var(--fg-dim); }
.cv-tl-body p:last-child { margin-bottom: 0; }
.cv-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--violet-soft);
  background: rgba(126, 13, 255, .14);
  border: 1px solid rgba(126, 13, 255, .3);
  border-radius: 99px;
  padding: 3px 9px;
  margin-left: 8px;
  vertical-align: middle;
}

@media (max-width: 760px) {
  .cv-stats { grid-template-columns: repeat(2, 1fr); }
  .cv-grid { grid-template-columns: 1fr; }
  .cv-tl-item {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .cv-tl-period { padding-top: 0; }
}

/* ============================================================
   ERGÄNZUNGEN 64: Grafische Verlinkung zur Über-mich-Seite
   unter den drei Profil-Karten auf der Keynote-Seite.
   ============================================================ */
.about-cta {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 28px);
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 26px);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(126, 13, 255, .10), rgba(255, 194, 13, .06));
  border: 1px solid rgba(126, 13, 255, .28);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), border-color .3s ease, box-shadow .3s ease;
}
.about-cta:hover {
  transform: translateY(-5px);
  border-color: rgba(126, 13, 255, .55);
  box-shadow: 0 24px 54px -28px rgba(126, 13, 255, .5);
}
.about-cta-pic {
  flex: 0 0 auto;
  width: clamp(58px, 8vw, 76px);
  height: clamp(58px, 8vw, 76px);
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--violet-2);
  box-shadow: 0 0 20px -4px rgba(126, 13, 255, .6);
}
.about-cta-pic img { width: 100%; height: 100%; object-fit: cover; }
.about-cta-text { flex: 1 1 auto; display: block; }
.about-cta-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--violet);
  margin-bottom: 4px;
}
.about-cta-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.8vw, 1.28rem);
  line-height: 1.25;
  color: var(--ink-on-paper);
}
.about-cta-arrow {
  flex: 0 0 auto;
  font-size: 1.4rem;
  color: var(--violet);
  transition: transform .25s ease;
}
.about-cta:hover .about-cta-arrow { transform: translateX(6px); }
@media (max-width: 560px) {
  .about-cta { gap: 14px; padding: 16px; }
  .about-cta-arrow { display: none; }
}

/* ============================================================
   ERGÄNZUNGEN 65: Kennzahlen im Hero der Über-mich-Seite
   (kompakter, 2x2-Raster in der schmalen Heldenspalte).
   ============================================================ */
.cv-stats--hero {
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: clamp(26px, 3vw, 36px);
  max-width: 460px;
}
.cv-stats--hero .cv-stat {
  padding: clamp(14px, 1.6vw, 18px) clamp(16px, 1.8vw, 20px);
  text-align: left;
}
.cv-stats--hero .cv-stat-num {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin-bottom: 5px;
}
.cv-stats--hero .cv-stat-label { font-size: .84rem; }
@media (max-width: 1060px) {
  .cv-stats--hero { max-width: none; }
}
@media (max-width: 460px) {
  .cv-stats--hero { grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* ============================================================
   ERGÄNZUNGEN 66: Interaktive Laufbahn-Timeline (Über mich).
   Scroll-getriebener Lichtpunkt, der die violette Linie zieht
   und die Stationen nacheinander in Gold aufleuchten lässt.
   Ohne JS bleibt die vollständige Linie samt aller Punkte als
   Fallback erhalten.
   ============================================================ */
.cv-tl-wrap { position: relative; }

/* Schiene + Fortschrittsschicht (erst mit JS sichtbar) */
.cv-tl-line {
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  z-index: 0;
  display: none;
}
.cv-tl-wrap--js .cv-tl-line {
  display: block;
  background: rgba(126, 13, 255, .20);
  border-radius: 2px;
}
.cv-tl-line-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(var(--cv-p, 0) * 100%);
  background: linear-gradient(180deg, var(--violet-2) 0%, var(--violet) 100%);
  box-shadow: 0 0 12px -1px rgba(126, 13, 255, .65);
  border-radius: 2px;
}
.cv-tl-dot {
  position: absolute;
  left: 50%;
  top: calc(var(--cv-p, 0) * 100%);
  width: 17px;
  height: 17px;
  margin-left: -8.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, #c79bff 0%, var(--violet) 56%, var(--violet-2) 100%);
  border: 2px solid rgba(206, 170, 255, .92);
  box-shadow: 0 0 0 4px var(--ink), 0 0 22px 2px rgba(126, 13, 255, .85);
  transform: translateY(-50%);
  z-index: 4;
  animation: cvDotPulse 2.4s ease-in-out infinite;
}
@keyframes cvDotPulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--ink), 0 0 16px 1px rgba(126, 13, 255, .70); }
  50%      { box-shadow: 0 0 0 4px var(--ink), 0 0 28px 5px rgba(126, 13, 255, .95); }
}

/* Mit JS: statische Linie aus, Stationspunkte zunächst gedimmt */
.cv-tl-wrap--js .cv-timeline::before { display: none; }
.cv-tl-wrap--js .cv-tl-item::before {
  background: var(--ink);
  border-color: rgba(126, 13, 255, .32);
  box-shadow: 0 0 0 4px var(--ink);
  transition: border-color .45s ease, box-shadow .45s ease, transform .45s ease;
}
.cv-tl-wrap--js .cv-tl-item.is-on::before {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px var(--ink), 0 0 16px -1px rgba(255, 194, 13, .78);
  transform: scale(1.06);
}

/* Reduzierte Bewegung: kein Puls, kein wandernder Punkt */
@media (prefers-reduced-motion: reduce) {
  .cv-tl-dot { animation: none; }
}
.cv-tl-wrap--static .cv-tl-dot { display: none; }

/* ============================================================
   ERGÄNZUNGEN 67: Überschrift „Journalist, Soziologe und
   KI-Sprachmodell-Experte" ohne <br>. Der Umbruch entsteht
   rein per CSS, damit Suchmaschinen den Text durchgehend
   (ohne eingeschobenen Punkt) lesen.
   ============================================================ */
.home-about-title-pre { display: block; }
/* ============================================================
   ERGÄNZUNGEN 130 (ersetzt 68): Keynote-Hero-Bild ~25% kleiner.
   Die zuvor verbreiterte Bildspalte wird wieder verschmälert,
   sodass das Hochformat-Bild rund ein Viertel kleiner erscheint.
   Die Textspalte gewinnt entsprechend an Breite.
   ============================================================ */
@media (min-width: 1061px) {
  .page-hero--kn .page-hero-grid { grid-template-columns: 1.32fr 0.66fr; }
}
/* ============================================================
   ERGÄNZUNGEN 69: Keynote-Titel minimal kleiner, damit die
   zweite Zeile „kritischen Blick auf KI" neben dem (jetzt
   breiteren) Bild auf einer Zeile bleibt und nicht umbricht.
   ============================================================ */
@media (min-width: 1061px) {
  .page-hero--kn .kn-title { font-size: clamp(2rem, 4.4vw, 3.05rem); }
}
/* ============================================================
   ERGÄNZUNGEN 70: Porträt in der „Mehr zu meiner Person"-Box
   (Keynotes) auf schwarzem Grund im Kreis, violetter Rand
   etwas dünner.
   ============================================================ */
.about-cta-pic {
  background: #000;
  border-width: 1.5px;
}
/* ============================================================
   ERGÄNZUNGEN 71: Hero-Kennzahlen (Über mich) vierspaltig in
   einer Reihe, mit leichtem violettem Rand und Glow. Beim
   Überfahren 3D-Swivel (per card--tilt) und Wechsel auf Gold.
   ============================================================ */
@media (min-width: 761px) {
  .cv-stats--hero {
    grid-template-columns: repeat(4, 1fr);
    max-width: none;
    gap: clamp(14px, 1.6vw, 22px);
    margin-top: clamp(36px, 4.5vw, 56px);
  }
}
.cv-stats--hero .cv-stat {
  border-color: rgba(155, 77, 255, .5);
  box-shadow: 0 0 22px -8px rgba(126, 13, 255, .5);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), border-color .3s ease, box-shadow .3s ease;
}
.cv-stats--hero .cv-stat:hover,
.cv-stats--hero .cv-stat:active {
  border-color: var(--gold);
  box-shadow: 0 0 28px -4px rgba(255, 194, 13, .5);
}

/* ============================================================
   ERGÄNZUNGEN 72: Boxen mit violettem Rand und Glow, beim
   Überfahren bzw. Antippen Wechsel auf Gold. Gilt für die
   beiden Boxen der akademischen Laufbahn (Über mich) und die
   drei Perspektiv-Boxen (Soziologie, Journalist, LLM-Experte)
   auf der Keynote-Seite. 3D-Swivel kommt per card--tilt.
   ============================================================ */
.theme-paper .cv-edu {
  border-color: rgba(126, 13, 255, .5);
  box-shadow: 0 0 26px -10px rgba(126, 13, 255, .45);
}
.theme-paper .cv-edu:hover,
.theme-paper .cv-edu:active {
  border-color: var(--gold);
  box-shadow: 0 0 30px -8px rgba(255, 194, 13, .5);
}
#perspektive .card {
  border-color: rgba(155, 77, 255, .5);
  box-shadow: 0 0 26px -10px rgba(126, 13, 255, .5);
}
#perspektive .card:hover,
#perspektive .card:active {
  border-color: var(--gold);
  box-shadow: 0 0 30px -8px rgba(255, 194, 13, .5);
}
/* ============================================================
   ERGÄNZUNGEN 133 (ersetzt 73): Videokurs-Vorschaubild (Home,
   Lernmaterialien). Kein lila Kästchen mehr (Verlauf + Padding
   entfernt). Stattdessen das Bild selbst mit lila Rahmen, lila
   Glow und 3D-Swivel (per card--tilt, wie beim Keynote-Bild).
   ============================================================ */
.course-promo .about-pic {
  background: none;
  padding: 0;
  overflow: hidden;
  border: 1.5px solid rgba(155, 77, 255, .55);
  box-shadow: 0 0 46px -8px rgba(126, 13, 255, .5), 0 26px 60px -24px rgba(23, 11, 40, .6);
  transition: transform .06s linear, box-shadow .3s ease;
}
.course-promo .about-pic img { border-radius: inherit; }
/* ============================================================
   ERGÄNZUNGEN 74: Scroll-Grafik Input → Sprachmodell → Output
   („Warum dieses Thema relevant ist", Sprachmodelle-Unterseite).
   Statischer Fallback ohne JS / bei reduzierter Bewegung, sonst
   wandert ein Chip beim Scrollen von links (orange „Input") in
   die Box und kommt rechts als rotes „Output" wieder heraus.
   ============================================================ */
.io-anim {
  margin: clamp(30px, 4vw, 48px) 0;
  padding: clamp(28px, 3.4vw, 42px) clamp(20px, 3vw, 36px);
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
}
/* Statischer Fallback */
.io-static {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vw, 18px);
}
.io-pill {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(.82rem, 1.4vw, .98rem);
  letter-spacing: .02em;
  padding: clamp(12px, 1.6vw, 16px) clamp(16px, 2.2vw, 24px);
  border-radius: 14px;
  border: 1.5px solid;
  white-space: nowrap;
}
.io-pill--in { color: #ffd9b0; background: linear-gradient(135deg, rgba(255,138,43,.22), rgba(255,106,0,.12)); border-color: #ff8a2b; box-shadow: 0 0 22px -6px rgba(255,140,40,.6); }
.io-pill--out { color: #ffc9c9; background: linear-gradient(135deg, rgba(255,82,82,.22), rgba(225,29,29,.12)); border-color: #ff5252; box-shadow: 0 0 22px -6px rgba(255,70,70,.6); }
.io-pill--box { color: var(--fg); background: rgba(126,13,255,.12); border-color: rgba(155,77,255,.5); box-shadow: 0 0 22px -8px rgba(126,13,255,.5); }
.io-arrow { color: var(--fg-dim); font-size: 1.35rem; }
/* Animierte Spur (mit JS) */
.io-track { display: none; position: relative; height: clamp(98px, 16vw, 122px); }
.io-anim.io--js .io-static { display: none; }
.io-anim.io--js .io-track { display: block; }
.io-box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(140px, 24vw, 176px);
  height: clamp(84px, 14vw, 104px);
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(160deg, #160a2e, #0a0612);
  border: 1.5px solid rgba(155, 77, 255, .55);
  box-shadow: 0 0 40px -10px rgba(126, 13, 255, .55), inset 0 0 30px -16px rgba(155, 77, 255, .6);
  z-index: 3;
}
.io-box-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(.82rem, 1.5vw, 1rem);
  color: #cbb3ff;
  letter-spacing: .02em;
  text-align: center;
  padding: 0 8px;
}
.io-chip--move {
  position: absolute;
  top: calc(50% - 27px);
  left: 0;
  transform: translateX(var(--chip-x, 0px));
  will-change: transform;
  width: 108px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1.5px solid #ff8a2b;
  background: linear-gradient(135deg, #ff8a2b, #ff6a00);
  box-shadow: 0 0 26px -4px rgba(255, 140, 40, .7);
  z-index: 1;
  transition: background .45s ease, border-color .45s ease, box-shadow .45s ease;
}
.io-chip--move.is-output {
  border-color: #ff5252;
  background: linear-gradient(135deg, #ff5252, #e11d1d);
  box-shadow: 0 0 26px -4px rgba(255, 70, 70, .7);
}
.io-lbl {
  grid-area: 1 / 1;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .92rem;
  color: #fff;
  letter-spacing: .02em;
  transition: opacity .3s ease;
}
.io-lbl--out { opacity: 0; }
.io-chip--move.is-output .io-lbl--in { opacity: 0; }
.io-chip--move.is-output .io-lbl--out { opacity: 1; }
.io-caption {
  margin-top: clamp(18px, 2.4vw, 26px);
  text-align: center;
  color: var(--fg-dim);
  font-size: clamp(.9rem, 1.4vw, 1rem);
}
/* ============================================================
   ERGÄNZUNGEN 75: Verbindungslinien der Input→Output-Grafik.
   Dünne orange Linie zwischen Input und Box (wird kürzer, je
   näher der Chip kommt), dünne rote Linie zwischen Box und
   Output (wird länger, je weiter er herauswandert). Positionen
   und Breiten werden per JS gesetzt.
   ============================================================ */
.io-line {
  position: absolute;
  top: calc(50% - 1px);
  height: 2px;
  width: 0;
  border-radius: 2px;
  opacity: 0;
  z-index: 0;
  transition: opacity .2s ease;
}
.io-line--in {
  background: linear-gradient(90deg, rgba(255, 138, 43, .15), #ff8a2b);
  box-shadow: 0 0 10px -1px rgba(255, 140, 40, .85);
}
.io-line--out {
  background: linear-gradient(90deg, #ff5252, rgba(255, 82, 82, .15));
  box-shadow: 0 0 10px -1px rgba(255, 70, 70, .85);
}
/* ============================================================
   ERGÄNZUNGEN 76: Auf der Sprachmodelle-Unterseite den
   Fließtext der dunklen Abschnitte in Weiß statt im lila
   getönten Grau (nur diese Seite via .page-llm).
   ============================================================ */
.page-llm .prose-block p { color: var(--text); }
.page-llm .io-caption { color: var(--text); }
/* ============================================================
   ERGÄNZUNGEN 77: Erkennbarer Inline-Textlink (violett,
   unterstrichen) für Verweise innerhalb von Fließtext.
   ============================================================ */
.a-inline {
  color: var(--violet);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(126, 13, 255, .45);
  transition: color .2s ease, text-decoration-color .2s ease;
}
.a-inline:hover {
  color: #5a06bd;
  text-decoration-color: var(--violet);
}
/* ============================================================
   ERGÄNZUNGEN 78: Scroll-Aufbau-Grafik „Mis- vs. Desinformationen"
   (Desinformation-Unterseite). Zwei Häuser aus gestapelten
   Bausteinen. Beim Scrollen erscheinen die Bausteine von unten
   nach oben (fallen aus der Transparenz herab), zuletzt der
   weiße Hausrahmen. Ohne JS / bei reduzierter Bewegung steht
   alles fertig da.
   ============================================================ */
.houses-anim {
  margin: clamp(34px, 5vw, 56px) 0 clamp(8px, 1vw, 12px);
}
.houses-svg {
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
  margin: 0 auto;
  overflow: visible;
}
/* Bausteine */
.hb rect { stroke-width: 0; }
.hb--amber rect { fill: url(#gAmber); }
.hb--yellow rect { fill: url(#gYellow); }
.hb--red rect { fill: url(#gRed); stroke: #ff4d4d; stroke-width: 2; }
.hb--amber { filter: drop-shadow(0 0 5px rgba(245, 165, 30, .9)) drop-shadow(0 0 13px rgba(245, 165, 30, .45)); }
.hb--yellow { filter: drop-shadow(0 0 5px rgba(255, 232, 70, .9)) drop-shadow(0 0 14px rgba(255, 232, 70, .45)); }
.hb--red { filter: drop-shadow(0 0 5px rgba(255, 70, 70, .9)) drop-shadow(0 0 13px rgba(255, 70, 70, .45)); }
.hb-t {
  fill: #160d02;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  text-anchor: middle;
}
.hb-t--big { font-size: 16.5px; }
/* Hausrahmen + Beschriftung */
.hf polygon, .hf path {
  fill: none;
  stroke: var(--ink-on-paper);
  stroke-width: 4;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.hl {
  fill: var(--ink-on-paper);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18.5px;
  text-anchor: middle;
}
.hl-u { text-decoration: underline; }
/* Animations-Grundzustand: mit JS starten die Ebenen unsichtbar */
.houses-anim.houses--js .hb,
.houses-anim.houses--js .hf { opacity: 0; }
/* ============================================================
   ERGÄNZUNGEN 79: Desinformation-Unterseite. Hero und die zwei
   folgenden Textabschnitte (bis Ende Haus-Animation) bilden
   einen zusammenhängenden Block (.hero-block). Fließtext darin
   weiß. Abstand zwischen dem Abschnitt „Eine neue Qualität" und
   dem Titel „Aber was sind…" um 65% reduziert.
   ============================================================ */
.page-desinfo .page-hero { border-bottom: none; }
/* Häuser-Grafik ohne dunkles Panel: schwarzer Hausrahmen + schwarze Dachschrift auf hellem Abschnitt (ERGÄNZUNGEN 130) */
.houses-anim {
  background: none;
  padding: 0;
}

/* ============================================================
   ERGÄNZUNGEN 80: Use-Case-Grafik „Sprachmodelle als Alltags-
   werkzeug" (Sprachmodelle-Seite). Zwei Varianten: .usegfx--live
   (interaktiv, Hover + Animationen) und .usegfx--still (statisch).
   Glas-Panel-Stil, violett/gold, weißer Text auf dunkel.
   ============================================================ */
.usegfx {
  margin: clamp(26px, 3.6vw, 44px) 0;
  padding: clamp(26px, 3.4vw, 44px) clamp(18px, 3vw, 36px);
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
}
.usegfx-stat {
  text-align: center;
  color: var(--text);
  font-size: clamp(.92rem, 1.3vw, 1.08rem);
  margin-bottom: clamp(18px, 2.6vw, 28px);
}
.usegfx-stat strong {
  display: block;
  font-size: clamp(1.5rem, 4.6vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.01em;
  background: linear-gradient(92deg, var(--violet), var(--gold));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  margin-bottom: 4px;
}
.usegfx-cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.6vw, 18px);
}
.usegfx-case {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center;
  padding: clamp(16px, 2.2vw, 24px) clamp(8px, 1.2vw, 14px);
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font-weight: 600;
  font-size: clamp(.8rem, 1.05vw, .95rem);
  line-height: 1.3;
}
.usegfx-case svg { width: 30px; height: 30px; stroke: var(--violet); stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.usegfx-flow {
  display: flex; justify-content: center; gap: clamp(48px, 16vw, 150px);
  padding: clamp(12px, 1.8vw, 20px) 0 clamp(6px, 1vw, 12px);
}
.usegfx-flow span {
  position: relative;
  width: 2px; height: clamp(26px, 4.2vw, 44px);
  background: linear-gradient(var(--violet), rgba(126,13,255,.15));
  border-radius: 2px;
}
.usegfx-model {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  max-width: 380px; margin: 0 auto;
  padding: clamp(22px, 3vw, 34px) clamp(20px, 3vw, 34px);
  background: linear-gradient(180deg, rgba(126,13,255,.18), rgba(126,13,255,.05));
  border: 1px solid rgba(126,13,255,.42);
  border-radius: var(--radius-lg);
  text-align: center;
}
.usegfx-q { font-size: clamp(2rem, 5.5vw, 3rem); font-weight: 800; line-height: 1; color: var(--gold); }
.usegfx-model-label { color: var(--text); font-weight: 700; font-size: clamp(1rem, 1.4vw, 1.18rem); letter-spacing: .01em; }
.usegfx-cap {
  margin: clamp(18px, 2.6vw, 28px) auto 0; text-align: center;
  color: var(--text-dim); font-size: clamp(.9rem, 1.2vw, 1rem); max-width: 46ch;
}
/* --- interaktive Variante --- */
.usegfx--live .usegfx-case { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.usegfx--live .usegfx-case:hover {
  transform: translateY(-4px);
  border-color: rgba(126,13,255,.55);
  box-shadow: 0 12px 32px -14px rgba(126,13,255,.55);
}
.usegfx--live .usegfx-case svg { transition: stroke .25s ease, transform .25s ease; }
.usegfx--live .usegfx-case:hover svg { stroke: var(--gold); transform: scale(1.1); }
.usegfx--live .usegfx-q { animation: usegfxPulse 2.6s ease-in-out infinite; }
.usegfx--live .usegfx-flow span { overflow: hidden; }
.usegfx--live .usegfx-flow span::after {
  content: ""; position: absolute; left: 0; top: -34%;
  width: 2px; height: 34%; background: var(--gold); border-radius: 2px;
  animation: usegfxDrop 1.9s linear infinite;
}
.usegfx--live .usegfx-flow span:nth-child(2)::after { animation-delay: .55s; }
.usegfx--live .usegfx-flow span:nth-child(3)::after { animation-delay: 1.1s; }
@keyframes usegfxPulse { 0%,100% { opacity:.6; transform:scale(1); } 50% { opacity:1; transform:scale(1.1); } }
@keyframes usegfxDrop { 0% { top:-34%; opacity:0; } 18% { opacity:1; } 100% { top:100%; opacity:0; } }
@media (prefers-reduced-motion: reduce) {
  .usegfx--live .usegfx-q { animation: none; opacity: 1; }
  .usegfx--live .usegfx-flow span::after { display: none; }
}
@media (max-width: 540px) {
  .usegfx-cases { grid-template-columns: 1fr; }
  .usegfx-flow { gap: 0; }
  .usegfx-flow span:nth-child(n+2) { display: none; }
}

/* ============================================================
   ERGÄNZUNGEN 130: Desinformation-Seite. Abstand zwischen Hero
   ("…keine gute Nachricht.") und dem ersten Textabschnitt
   ("Desinformationen sind kein neues Phänomen…") um 50% reduziert
   (Hero-Unterkante und Abschnitt-Oberkante jeweils halbiert).
   ============================================================ */
.page-desinfo .page-hero--tight { padding-bottom: clamp(10px, 1.5vw, 18px); }
.page-desinfo .page-hero + .section { padding-top: clamp(38px, 5.5vw, 65px); }

/* ============================================================
   ERGÄNZUNGEN 135: Inline-Textlink für Fließtext (z. B. „hier"
   im Perspektive-Absatz der Keynote-Seite). Violett, dezent
   unterstrichen, beim Überfahren kräftigere Unterstreichung.
   ============================================================ */
.tlink {
  color: var(--violet);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(126, 13, 255, .5);
  transition: text-decoration-color .2s ease, color .2s ease;
}
.tlink:hover { text-decoration-color: var(--violet); }

/* ============================================================
   ERGÄNZUNGEN 136: Desinformation-Unterseite, die beiden
   Fallbeispiel-Boxen. Tags entfernt, deshalb oben weniger
   Polsterung. Dauerhaft violetter Rand und violetter Glow,
   3D-Swivel kommt per card--tilt. Beim Hovern wechseln Rand
   und Glow auf Gold. Zusätzlich schaltet ein Klick dauerhaft
   auf Gold (Toggle per JS, Klasse is-gold, für Touch ohne Hover).
   ============================================================ */
.case-card {
  padding-top: clamp(18px, 1.9vw, 24px);
  border-color: rgba(126, 13, 255, .5);
  box-shadow: 0 0 26px -10px rgba(126, 13, 255, .45);
}
.case-card:hover {
  border-color: var(--gold);
  box-shadow: 0 0 30px -8px rgba(255, 194, 13, .5);
}
.case-card.is-gold {
  border-color: var(--gold);
  box-shadow: 0 0 30px -8px rgba(255, 194, 13, .5);
}
.case-card.is-gold:hover {
  border-color: var(--gold);
  box-shadow: 0 0 34px -6px rgba(255, 194, 13, .56);
}

/* ============================================================
   ERGÄNZUNGEN 137: Über-mich-Laufbahn-Timeline. Zusätzlich zur
   mitlaufenden Kugel blendet jetzt der Stationsinhalt rechts
   (Zeitraum und Textkörper) weich ein. Stationen unterhalb der
   Kugel stehen bei 75% Transparenz, rücken beim Heranrücken der
   Kugel stufenlos auf volle Sichtbarkeit (per JS gesetzte
   Variable --cv-it-op). Die Marker-Punkte links bleiben davon
   unberührt und behalten ihr Dimmen/Gold-Verhalten.
   ============================================================ */
.cv-tl-wrap--js .cv-tl-period,
.cv-tl-wrap--js .cv-tl-body {
  opacity: var(--cv-it-op, .25);
  will-change: opacity;
}
.cv-tl-wrap--static .cv-tl-period,
.cv-tl-wrap--static .cv-tl-body {
  opacity: 1;
}

/* Rote Textmarker-Markierung (ersetzt fruehere Unterstreichung) fuer
   Schluesselbegriffe in der Des-/Misinformations-Definition. Dezentes
   Rot, Schrift bleibt gut lesbar. Wischt beim Reveal ein wie .mk. */
.mk-pen {
  background-image: linear-gradient(transparent 16%, rgba(229, 52, 42, .24) 16%, rgba(229, 52, 42, .24) 90%, transparent 90%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 1s cubic-bezier(.2, .7, .2, 1) .25s;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 .08em;
}
.is-in .mk-pen, .mk-pen.is-in { background-size: 100% 100%; }

/* ============================================================
   ERGÄNZUNGEN 138: Linktree-artige Bio-Link-Seite (links.html)
   im Website-Design (Glass & Marker). Zentrierte Spalte mit
   Avatar, Name, Bio, Social-Icons und Link-Buttons. Rand/Glow
   violett, beim Hovern auf Gold (wie die Fallbeispiel-Boxen).
   ============================================================ */
body.page-linkhub { background: var(--ink); }
.linkhub {
  min-height: 100svh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(52px, 9vw, 104px) var(--pad-x) clamp(36px, 6vw, 60px);
  position: relative;
  overflow: hidden;
}
.linkhub::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 38% at 50% -4%, rgba(126, 13, 255, .26), transparent 70%),
    radial-gradient(42% 26% at 84% 6%, rgba(255, 194, 13, .08), transparent 72%);
  pointer-events: none;
}
.linkhub-inner {
  position: relative;
  width: 100%;
  max-width: 500px;
  text-align: center;
}
.linkhub-avatar {
  width: clamp(98px, 24vw, 120px);
  height: clamp(98px, 24vw, 120px);
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(243, 239, 252, .16);
  box-shadow: 0 0 0 5px rgba(126, 13, 255, .16), 0 16px 44px -14px rgba(126, 13, 255, .6);
  margin: 0 auto 22px;
  display: block;
}
.linkhub-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.55rem, 5.4vw, 2.1rem);
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0 0 .5em;
}
.linkhub-name .dot { color: var(--violet); }
.linkhub-bio {
  color: rgba(243, 239, 252, .72);
  font-size: clamp(.96rem, 2.4vw, 1.06rem);
  line-height: 1.55;
  max-width: 40ch;
  margin: 0 auto clamp(24px, 4.5vw, 32px);
}
.linkhub-socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: clamp(28px, 5vw, 38px);
}
.linkhub-socials a {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(243, 239, 252, .16);
  background: rgba(243, 239, 252, .04);
  color: var(--text);
  transition: border-color .25s ease, background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.linkhub-socials a:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(255, 194, 13, .08);
  box-shadow: 0 0 24px -8px rgba(255, 194, 13, .55);
  transform: translateY(-2px);
}
.linkhub-socials svg { width: 20px; height: 20px; fill: currentColor; }
.linkhub-links {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.linkhub-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  padding: 17px 22px;
  border-radius: var(--radius);
  border: 1px solid rgba(126, 13, 255, .5);
  background: rgba(126, 13, 255, .06);
  box-shadow: 0 0 26px -14px rgba(126, 13, 255, .55);
  color: var(--text);
  transition: border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.linkhub-link:hover {
  border-color: var(--gold);
  background: rgba(255, 194, 13, .07);
  box-shadow: 0 0 30px -8px rgba(255, 194, 13, .5);
  transform: translateY(-2px);
}
.linkhub-link-title { font-weight: 600; font-size: 1.02rem; }
.linkhub-link-arrow {
  flex: none;
  color: var(--gold);
  font-size: 1.15rem;
  transition: transform .25s ease;
}
.linkhub-link:hover .linkhub-link-arrow { transform: translateX(4px); }
.linkhub-legal {
  margin-top: clamp(32px, 6vw, 46px);
  display: flex;
  justify-content: center;
  gap: 20px;
  font-size: .82rem;
}
.linkhub-legal a {
  color: rgba(243, 239, 252, .5);
  transition: color .2s ease;
}
.linkhub-legal a:hover { color: rgba(243, 239, 252, .88); }

/* ============================================================
   ERGÄNZUNGEN 139: Aktuelles-Beitrags-Titel. Etwas kompakter
   und auf einer Zeile (nowrap) im zweispaltigen Grid. Sobald
   das Grid einspaltig wird (<= 880px), darf wieder umbrochen
   werden, damit auf schmalen Screens nichts überläuft.
   ============================================================ */
.aktuelles-card-title {
  font-size: clamp(1.45rem, 2.7vw, 1.95rem);
  white-space: nowrap;
}
@media (max-width: 880px) {
  .aktuelles-card-title { white-space: normal; }
}

/* ============================================================
   ERGÄNZUNGEN 140: Intro-Text der Workshop-Angebote über die
   volle Container-Breite (statt der 760px-Begrenzung des
   section-head), damit der Text bis ganz rechts läuft.
   ============================================================ */
#angebote .section-head { max-width: none; }
#angebote .section-head .lead { max-width: none; }


/* ============================================================
   ERGÄNZUNGEN 141: Calendly-Einbettung (Discovery Call) auf
   danke-anfrage.html. Lädt über iframemanager erst nach Zu-
   stimmung (Kategorie „Externe Medien"), exakt wie YouTube.
   Platzhalter dunkel, Lade-Buttons im Markenstil (gold). Die
   feste Höhe ersetzt das 16:9-Seitenverhältnis von iframe-
   manager, damit der Buchungskalender vollständig passt.
   Selektoren mit [data-service] erhöhen die Spezifität, damit
   sie die iframemanager-Basisregeln (div[data-service]) sicher
   überschreiben.
   ============================================================ */
.calendly-wrap { max-width: 720px; margin-inline: auto; }
.calendly-frame[data-service] {
  position: relative;
  display: block;
  width: 100%;
  height: 720px;
  min-height: 720px;
  border-radius: 16px;
  overflow: hidden;
  background: #0c0c10;
  border: 1px solid rgba(255, 255, 255, .12);
  color: #ffffff;
}
/* iframemanager-Seitenverhältnis (:before) deaktivieren, feste Höhe nutzen */
.calendly-frame[data-service]::before { display: none !important; padding-top: 0 !important; }
.calendly-frame[data-service] iframe {
  width: 100%; height: 100%; border: 0; display: block; background: #ffffff;
}
/* Platzhalter-Text hell */
.calendly-frame[data-service] .c-nt,
.calendly-frame[data-service] .cll,
.calendly-frame[data-service] .c-n-t,
.calendly-frame[data-service] p { color: #e9e3f5; }
.calendly-frame[data-service] .c-n-t a { color: var(--gold); }
/* Lade-Buttons im Markenstil (gold), überschreibt iframemanager-Blau */
.calendly-frame[data-service] .cll .c-l-b,
.calendly-frame[data-service] .cll .c-la-b,
.calendly-frame[data-service] .cll button {
  font-family: var(--font-display, "Bricolage Grotesque", sans-serif);
  font-weight: 700;
  font-size: .95rem;
  background: #ffc20d;
  color: #0a0612;
  border: 0;
  border-radius: 99px;
  box-shadow: none;
  padding: 11px 20px;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.calendly-frame[data-service] .cll .c-l-b::before { display: none; }
.calendly-frame[data-service] .cll .c-l-b:hover,
.calendly-frame[data-service] .cll .c-la-b:hover,
.calendly-frame[data-service] .cll button:hover { background: #ffce3a; }
.calendly-frame[data-service] .cll .c-la-b {
  background: rgba(255, 255, 255, .10); color: #ffffff;
}
.calendly-frame[data-service] .cll .c-la-b:hover { background: rgba(255, 255, 255, .18); }
/* Auf schmalen Screens stapelt Calendly Datum und Uhrzeit: mehr Höhe */
@media (max-width: 640px) {
  .calendly-frame[data-service] { height: 1040px; min-height: 1040px; }
}

/* ============================================================
   ERGÄNZUNGEN 142: Dankesseite "Anfrage" (danke-anfrage.html)
   kompakter machen, damit der Discovery-Call-Abschnitt mit dem
   Calendly direkt im ersten Viewport sichtbar ist und seine
   Einblend-Animation schon beim Laden der Seite läuft (statt
   erst nach dem Scrollen). Wirkt nur auf dieser Seite über die
   Modifier .page-hero--thanks und .discovery-call--compact.
   ============================================================ */
.page-hero--thanks {
  padding-top: calc(var(--header-h) + clamp(10px, 1.4vw, 18px));
  padding-bottom: clamp(8px, 1.4vw, 16px);
  border-bottom: none;
}
.page-hero--thanks .thanks-badge {
  width: clamp(50px, 5vw, 62px);
  margin-bottom: clamp(10px, 1.6vw, 16px);
}
.page-hero--thanks h1 { font-size: clamp(2.3rem, 5.4vw, 3.9rem); }
.page-hero--thanks .lead { margin-bottom: .9rem; }
.page-hero--thanks p:last-child { margin-top: 10px !important; }

.discovery-call--compact {
  padding-top: clamp(10px, 1.6vw, 18px) !important;
}
.discovery-call--compact .section-head { margin-bottom: clamp(16px, 2.2vw, 24px); }
.discovery-call--compact .section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.45rem); }
/* Ab Desktop (genug Breite) die Headline in EINE Zeile und 15% groesser
   (2.82rem statt 2.45rem). Sie darf dafuer breiter werden als der schmale
   Text-/Kalendercontainer und bleibt ueber die 50%-Technik mittig. Auf
   schmalen Screens greift die Regel darueber, also normaler Umbruch. */
@media (min-width: 980px) {
  .discovery-call--compact .section-head h2 {
    font-size: 2.82rem;
    white-space: nowrap;
    width: max-content;
    margin-left: 50%;
    transform: translateX(-50%);
    line-height: 1.12;
  }
}
.discovery-call--compact .section-head .lead { margin-bottom: 0; }

/* ============================================================
   ERGÄNZUNGEN 143: Über-mich-Timeline NUR auf dem Handy.
   1) Listen-Reveal neutralisieren: Die einspaltige Timeline ist
      auf dem Handy sehr hoch (~3500px). Die reveal-Klasse blendet
      die ganze Liste erst bei 14% Sichtbarkeit ein, was erst nahe
      Station 2 passiert, sodass Station 1 viel zu spät erscheint.
      Auf dem Handy steuert daher allein die Kugel-Logik die
      Einblendung der einzelnen Stationen.
   2) Kugel und Fortschrittsbalken weicher nachziehen, damit die
      scroll-gebundene Bewegung nicht ruckelt/springt.
   Desktop bleibt unverändert.
   ============================================================ */
@media (max-width: 760px) {
  .cv-timeline.reveal { opacity: 1; transform: none; }
  /* Kugel und Fortschrittsbalken per transform statt top/height bewegen.
     transform laeuft auf dem Compositor und bleibt auch waehrend des
     Touch-Scrollings fluessig, waehrend top/height den Main-Thread
     belasten und auf dem Handy sichtbar ruckeln. */
  .cv-tl-wrap--js .cv-tl-dot {
    top: 0;
    transform: translateY(calc(var(--cv-dot-y, 0px) - 50%));
    transition: transform .08s linear;
    will-change: transform;
  }
  .cv-tl-wrap--js .cv-tl-line-fill {
    height: 100%;
    transform-origin: top;
    transform: scaleY(var(--cv-p, 0));
    transition: transform .08s linear;
    will-change: transform;
  }
}

/* ============================================================
   ERGÄNZUNGEN 144: Logo-Band NUR auf dem Handy.
   1) Logos proportional verkleinern (~72 % der Desktop-Hoehe,
      relative Groessenverhaeltnisse bleiben erhalten) und enger
      zusammenruecken (margin-inline 34px -> 15px).
   2) WDR mittig starten: negativer animation-delay (siehe unten,
      nach Vermessung der Spur ergaenzt).
   Desktop bleibt unveraendert.
   ============================================================ */
@media (max-width: 640px) {
  /* WDR (3. Logo) beim Laden mittig: Spur auf den entsprechenden Frame
     vorspulen (empirisch vermessen). Bei ~390px exakt mittig, ueber
     360-430px nahezu mittig. */
  .marquee-track--logos { animation-delay: -11.64s; }
  .marquee-track--logos img { margin-inline: 15px; width: auto; }
  .marquee-track--logos img[src*="wwu-muenster"]       { height: 30px; }
  .marquee-track--logos img[src*="uni-bielefeld"]      { height: 29px; }
  .marquee-track--logos img[src*="logo-wdr"]           { height: 29px; }
  .marquee-track--logos img[src*="logo-aas"]           { height: 35px; }
  .marquee-track--logos img[src*="neue-westfaelische"] { height: 35px; }
  .marquee-track--logos img[src*="stadt-wolfsburg"]    { height: 37px; }
  .marquee-track--logos img[src*="logo-verdent"]       { height: 29px; }
  .marquee-track--logos img[src*="logo-plaud"]         { height: 22px; }
}

/* ============================================================
   ERGÄNZUNGEN 145: Input/Output-Grafik NUR auf dem Handy.
   Die bewegliche kleine Box (Chip) 30% kleiner (108x54 -> 76x38),
   dazu Blackbox und Beschriftungen etwas kompakter. So ragt der
   Chip am Start nicht mehr in die Blackbox und die Symbole wirken
   nicht zu gross. Die Chip-Position kommt per transform aus dem JS
   (nutzt die tatsaechliche Chip-Breite), daher hier nur Groessen.
   Desktop bleibt unveraendert.
   ============================================================ */
@media (max-width: 640px) {
  .io-chip--move { width: 76px; height: 38px; top: calc(50% - 19px); }
  .io-lbl { font-size: .82rem; }
  .io-box { width: 124px; height: 74px; }
  .io-box-label { font-size: .82rem; }
}

/* ============================================================
   ERGÄNZUNGEN 146: Datenschutz-Seite NUR auf dem Handy.
   1) Titel "Datenschutzerklaerung" in eine Zeile: kleinere
      Schrift, damit das Wort nicht zeichenweise umbricht
      (sonst stand das "g" allein in Zeile 2).
   2) Weniger Freiraum oben: Hero-Abstand ueber/unter dem Titel
      reduziert, damit die Praeambel hoeher startet. Der
      Header-Freiraum (--header-h) bleibt erhalten.
   Desktop bleibt unveraendert (.page-legal nur auf dieser Seite).
   ============================================================ */
@media (max-width: 640px) {
  .page-legal .page-hero {
    padding-top: calc(var(--header-h) + 20px);
    padding-bottom: 24px;
  }
  .page-legal .page-hero h1 {
    font-size: 1.6rem;
  }
  .page-legal .page-hero + .section {
    padding-top: 30px;
  }
}