/* ------------------------------------------------------------------
   Portfolio David Kruizenga – KI-Management Use-Cases
   Plakativ, mobile-first, keine externen Ressourcen.
   Farben: Seitenhintergrund #efefed, Text/Menü/Fuß #1a1a1a,
   Überschriften/Buttons #c95124, dazu helle Flächenfarben.
------------------------------------------------------------------- */

@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-SemiBold.woff") format("woff");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Display";
  src: url("fonts/InterDisplay-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #efefed;        /* Seitenhintergrund */
  --ink: #1a1a1a;          /* Fließtext, Logo, Menü, Fußbereich */
  --orange: #c95124;       /* Überschriften, Schaltflächen */
  --orange-light: #ff9a6e; /* Orange auf dunklen Flächen */
  --white: #ffffff;
  --peach: #f5d7c8;
  --on-peach: #4a1a05;
  --teal: #cbe6e4;         /* Kontrastfarbe Petrol (hell) */
  --on-teal: #0b3336;
  --teal-strong: #1e6b70;
  --sand: #dddbd4;
  --muted: #4a4a47;
  --placeholder: #ffd60a;

  --pad: clamp(1.25rem, 5vw, 3rem);
  --band: clamp(3rem, 10vw, 6.5rem);
  --measure: 62ch;

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Inter Display", "Inter", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
[id] { scroll-margin-top: 1.5rem; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: var(--pad);
  top: -4rem;
  background: var(--orange);
  color: var(--white);
  padding: .7rem 1.1rem;
  font-weight: 700;
  z-index: 10;
}
.skip:focus { top: .75rem; }

/* ---------- Typografie ---------- */

.display {
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: .98;
  margin: 0;
  text-wrap: balance;
  overflow-wrap: break-word;
}

h1.display { font-size: clamp(2.5rem, 10.5vw, 6.25rem); }
h2.display { font-size: clamp(2rem, 7.5vw, 3.75rem); }

/* Überschriften auf hellem Grund: Orange (nur große Schrift, 3,9:1 bzw. 4,5:1) */
.band--paper h2.display,
.band--white h2.display { color: var(--orange); }

h3 {
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 600;
  margin: 0 0 .35rem;
  letter-spacing: -0.01em;
}

p { margin: 0 0 1rem; }

.prose { max-width: var(--measure); }
.prose p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.1rem, 3.5vw, 1.4rem);
  line-height: 1.5;
  max-width: 44ch;
  margin-top: clamp(1.5rem, 5vw, 2.5rem);
}

/* ---------- Layout-Grundlagen ---------- */

.wrap {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--pad);
}

.band { padding-block: var(--band); }

.band--orange { background: var(--orange); color: var(--white); }
.band--ink    { background: var(--ink);    color: var(--paper); }
.band--paper  { background: var(--paper);  color: var(--ink); }
.band--white  { background: var(--white);  color: var(--ink); }
.band--peach  { background: var(--peach);  color: var(--on-peach); }
.band--teal   { background: var(--teal);   color: var(--on-teal); }
.band--sand   { background: var(--sand);   color: var(--ink); }

.band .stack-gap { margin-top: clamp(1.75rem, 5vw, 3rem); }

/* ---------- Kopfzeile + Burger-Menü ---------- */

.site-header {
  position: relative;
  z-index: 20;
  background: var(--ink);
  color: var(--paper);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
}
.brand {
  font-weight: 700;
  text-decoration: none;
  letter-spacing: -0.01em;
}

.menu summary {
  position: relative;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(239, 239, 237, .12);
  cursor: pointer;
  list-style: none;
  transition: background-color .15s;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover { background: rgba(239, 239, 237, .22); }

.bars,
.bars::before,
.bars::after {
  display: block;
  width: 1.35rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .2s, background-color .2s;
}
.bars { position: relative; }
.bars::before,
.bars::after { content: ""; position: absolute; left: 0; }
.bars::before { top: -6px; }
.bars::after  { top: 6px; }
.menu[open] .bars { background: transparent; }
.menu[open] .bars::before { transform: translateY(6px) rotate(45deg); }
.menu[open] .bars::after  { transform: translateY(-6px) rotate(-45deg); }

.menu-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--ink);
  border-top: 1px solid rgba(239, 239, 237, .2);
  padding-bottom: 1.25rem;
  box-shadow: 0 28px 40px rgba(0, 0, 0, .35);
}
.menu-panel a {
  display: flex;
  align-items: center;
  min-height: 4.25rem;
  padding-inline: max(var(--pad), calc((100vw - 72rem) / 2 + var(--pad)));
  border-bottom: 1px solid rgba(239, 239, 237, .15);
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.75rem, 7vw, 2.75rem);
  letter-spacing: -0.03em;
  text-decoration: none;
}
.menu-panel a:hover { color: var(--orange-light); }

/* ---------- Buttons & Links (runde Material-Buttons) ---------- */

.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 3.5rem;
  padding: .8rem 1.75rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 1.2rem;   /* 19 px fett = „große Schrift“ nach WCAG */
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}
.btn svg { width: 1.4rem; height: 1.4rem; flex: none; }

/* Zustandsebene (Hover/Druck) wie bei Material 3 */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}
.btn:hover::before { opacity: .1; }
.btn:active::before { opacity: .16; }

.btn--orange  { background: var(--orange); color: var(--white); }
.btn--light   { background: var(--paper);  color: var(--ink); }
.btn--dark    { background: var(--ink);    color: var(--paper); }
.btn--outline { border-color: currentColor; color: inherit; }
.btn--ph      { background: var(--placeholder); color: var(--ink); }

.cta-row {
  display: grid;
  gap: .75rem;
  margin-top: clamp(1.75rem, 5vw, 2.75rem);
}
@media (min-width: 32rem) {
  .cta-row { grid-template-columns: repeat(2, max-content); gap: 1rem; }
}

/* Textbutton „Zurück“ */
.crumb {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 3rem;
  margin-bottom: clamp(1rem, 4vw, 1.75rem);
  font-weight: 700;
  text-decoration: none;
}
.crumb svg { width: 1.4rem; height: 1.4rem; }
.crumb:hover { text-decoration: underline; text-underline-offset: .2em; }

.ph {
  background: var(--placeholder);
  color: var(--ink);
  padding: 0 .3em;
  text-decoration: none;
}

/* ---------- Status (Label unter der Headline) ---------- */

.status {
  display: inline-flex;
  align-items: center;
  border: 2px solid currentColor;
  border-radius: 8px;
  padding: .15rem .75rem;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.5;
}

/* ---------- Startseite: Hero mit Einblend-Animation ---------- */

.hero { padding-block: clamp(3rem, 12vw, 7.5rem) clamp(3.5rem, 12vw, 8rem); }
.hero h1 { max-width: 16ch; font-size: clamp(2.3rem, 10.5vw, 6rem); hyphens: manual; }
.hero .lead { margin-top: clamp(1.5rem, 5vw, 2.5rem); max-width: 40rem; }

/* Headline: gleiches Einblenden wie der Rest */
.js .hero-title { opacity: 0; }
.js.go .hero-title { animation: fade .9s ease-out .2s forwards; }

/* Subline und CTAs: leichtes Einblenden nach der Headline */
.js .hero .lead, .js .hero .cta-row { opacity: 0; }
.js.go .hero .lead { animation: fade .9s ease-out .7s forwards; }
.js.go .hero .cta-row { animation: fade .9s ease-out 1.2s forwards; }
@keyframes fade { to { opacity: 1; } }

/* Absätze unterhalb des Headers: Einblenden beim Scrollen */
.js .reveal { opacity: 0; transition: opacity .8s ease-out; }
.js .reveal.in { opacity: 1; }

/* Notfall: nach 6 s ist alles sichtbar, falls das Skript ausfällt */
.js .hero-title, .js .hero .lead, .js .hero .cta-row, .js .reveal { animation-fill-mode: forwards; }
@media (prefers-reduced-motion: reduce) {
  .js .hero-title, .js .hero .lead, .js .hero .cta-row, .js .reveal {
    opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important;
  }
}

/* ---------- Startseite: Use-Case-Flächen ---------- */

.icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
}
.icon svg { width: 1.6rem; height: 1.6rem; }

.uc { padding-block: clamp(2.5rem, 8vw, 4.5rem); }
.uc .wrap { display: grid; gap: 1.75rem; }
.uc-head { display: grid; gap: 1rem; justify-items: start; align-content: start; }
.uc-head h2 { max-width: 16ch; }
@media (min-width: 52rem) { .uc-head h2.display { font-size: 3.25rem; } }
.uc-body { display: grid; gap: 1.5rem; justify-items: start; align-content: start; }
.uc-body p { max-width: 46ch; margin: 0; font-size: 1.125rem; }

@media (min-width: 52rem) {
  .uc .wrap {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    column-gap: 3rem;
    align-items: start;
  }
  .uc-head h2 { max-width: none; }
  .uc-body { padding-top: 4.25rem; }
}

/* ---------- Listen mit Trennlinien ---------- */

.rows { margin: 0; padding: 0; list-style: none; }
.rows > * {
  border-top: 3px solid currentColor;
  padding-block: 1.25rem 1.5rem;
}
.rows > *:last-child { border-bottom: 3px solid currentColor; }
.rows dt, .rows h3 { font-size: 1.35rem; font-weight: 600; margin: 0 0 .25rem; }
.rows dd { margin: 0; max-width: 54ch; }
.rows--muted dd { color: var(--muted); }

@media (min-width: 52rem) {
  .rows--cols > * {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    column-gap: 3rem;
  }
  .rows--cols dt, .rows--cols h3 { margin: 0; }
}

/* ---------- Unterseiten: Kopfbereich ---------- */

.page-hero { padding-block: clamp(2.75rem, 10vw, 6rem) clamp(3rem, 10vw, 6rem); }
.page-hero h1.display { max-width: 20ch; font-size: clamp(1.85rem, 7.8vw, 5.5rem); }
.page-hero .lead { max-width: 44ch; }
.page-hero .icon { margin-bottom: 1.25rem; }
.page-hero .status { margin-top: 1.25rem; }
.page-hero .lead { margin-top: 1.25rem; }

/* ---------- Unterseiten: Abschnitte ---------- */

.section-grid { display: grid; gap: 1.25rem; }
@media (min-width: 52rem) {
  .section-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    column-gap: 4rem;
  }
}

/* Reihenfolge = echte Sequenz, daher nummeriert */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}
.steps > li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3.1rem minmax(0, 1fr);
  column-gap: 1rem;
  padding-block: 1.4rem;
  border-top: 3px solid currentColor;
}
.steps > li:last-child { border-bottom: 3px solid currentColor; }
.steps > li::before {
  content: counter(step);
  font-family: var(--display);
  font-weight: 900;
  font-size: 2.75rem;
  line-height: .95;
  letter-spacing: -0.04em;
}
.band--paper .steps > li::before,
.band--white .steps > li::before { color: var(--orange); }
.band--ink .steps > li::before { color: var(--orange-light); }
.steps p { margin: 0; max-width: 56ch; }
.band--paper .steps p,
.band--white .steps p { color: var(--muted); }

@media (min-width: 52rem) {
  .steps > li { grid-template-columns: 5rem minmax(0, 1fr); }
  .steps > li::before { font-size: 3.75rem; }
}

/* Chips / Kriterien */
.criteria {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.criteria li {
  border-top: 3px solid currentColor;
  padding-block: 1rem 1.1rem;
  font-weight: 600;
  font-size: 1.15rem;
}
@media (min-width: 40rem) {
  .criteria { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
}

/* Beispieldialog */
.chat { display: grid; gap: .75rem; max-width: 34rem; margin: 0; }
.bubble {
  padding: .85rem 1.1rem;
  max-width: 88%;
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}
.bubble--bot {
  background: var(--white);
  color: var(--ink);
  border-radius: 1.2rem 1.2rem 1.2rem .25rem;
  justify-self: start;
}
.bubble--me {
  background: var(--ink);
  color: var(--paper);
  border-radius: 1.2rem 1.2rem .25rem 1.2rem;
  justify-self: end;
}
.caption { font-size: .95rem; color: var(--muted); margin-top: .9rem; max-width: 50ch; }
.band--ink .caption,
.band--orange .caption { color: rgba(255, 255, 255, .85); }
.band--peach .caption { color: var(--on-peach); }
.band--teal .caption { color: var(--on-teal); }

/* Code */
.code {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: .85rem;
  line-height: 1.65;
  padding: 1.25rem 1.4rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: 40rem;
}

/* Schema-Grafik */
.figure { margin: 0; max-width: 34rem; }
.figure svg { width: 100%; height: auto; }
.figure text { font-family: var(--sans); font-size: 12.5px; fill: var(--ink); }
.figure .axis { stroke: var(--ink); stroke-width: 2.5; fill: none; }
.figure .limit { stroke: var(--teal-strong); stroke-width: 2.5; stroke-dasharray: 7 6; }
.figure .zone { fill: var(--teal); }
.figure .dot { fill: var(--white); stroke: var(--ink); stroke-width: 2.5; }
.figure .dot--out { fill: var(--paper); stroke: var(--muted); stroke-dasharray: 3 3; }
.figure .dot--pick { fill: var(--orange); stroke: var(--ink); stroke-width: 3; }
.figure .t-strong { font-weight: 700; }
.figure .t-limit { fill: var(--teal-strong); font-weight: 600; }
.figure .t-muted { fill: var(--muted); }

/* Weiter-Navigation */
.pager { display: grid; }
.pager a {
  display: block;
  text-decoration: none;
  padding: 1.75rem var(--pad);
}
.pager small { display: block; font-size: .95rem; font-weight: 600; }
.pager span {
  display: block;
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-size: clamp(1.5rem, 5.5vw, 2.25rem);
  margin-top: .3rem;
}
.pager a:hover span { text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .12em; }
@media (min-width: 52rem) {
  .pager { grid-template-columns: 1fr 1fr; }
  .pager a { padding-block: 3rem; }
  .pager a:first-child { padding-left: max(var(--pad), calc((100vw - 72rem) / 2 + var(--pad))); }
  .pager a:last-child  { padding-right: max(var(--pad), calc((100vw - 72rem) / 2 + var(--pad))); }
}

/* Hinweise / Rechtliches */
.notice {
  border: 3px solid var(--ink);
  background: var(--placeholder);
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  max-width: var(--measure);
  font-weight: 600;
}
.legal h2 { font-size: 1.35rem; font-weight: 600; margin: 2rem 0 .5rem; letter-spacing: -0.01em; }
.legal p { max-width: var(--measure); }

/* ---------- Fußzeile ---------- */

.site-footer { padding-block: 2rem; font-size: .975rem; }
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.75rem;
  justify-content: space-between;
}
.site-footer nav { display: flex; gap: 1.5rem; }
.site-footer a { text-underline-offset: .2em; }

/* ---------- Bewegung ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .strike { animation: none; }
  .btn::before, .menu summary, .bars, .bars::before, .bars::after { transition: none; }
}

/* Code-Block auf dunkler Fläche abgrenzen */
.band--ink .code { background: #000; border: 2px solid rgba(239, 239, 237, .6); }

/* Footer bleibt auch auf kurzen Seiten am unteren Rand */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }

/* ---------- Bewerbungsworkflow: animierter Ablauf ---------- */
.flow { list-style: none; margin: 0; padding: 0; }
.flow-step {
  position: relative;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  column-gap: 1.1rem;
  padding-bottom: 2.5rem;
}
.flow-step:last-child { padding-bottom: 0; }
.flow-node {
  position: relative; z-index: 1;
  width: 3.25rem; height: 3.25rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink); color: var(--paper);
  font-family: var(--display); font-weight: 900; font-size: 1.4rem;
}
.flow-step::before {
  content: "";
  position: absolute; left: 1.625rem; top: 3.25rem; bottom: 0;
  width: 3px; margin-left: -1.5px;
  background: var(--ink);
}
.flow-step:last-child::before { display: none; }
.flow-body h3 { margin: .45rem 0 .8rem; font-size: 1.6rem; }
.who { margin: 0 0 .7rem; max-width: 52ch; }
.tag {
  display: inline-block; margin-right: .55rem;
  padding: .12rem .65rem; border-radius: 999px;
  font-size: .85rem; font-weight: 700; line-height: 1.5;
  border: 2px solid var(--ink);
}
.tag--ai { background: transparent; color: var(--ink); }
.tag--me { background: var(--ink); color: var(--paper); }
.verdicts { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: .1rem 0 .9rem; padding: 0; }
.verdicts li {
  padding: .3rem .95rem; border-radius: 999px;
  font-weight: 700; font-size: .95rem; color: var(--ink);
  border: 2px solid var(--ink);
}
.verdicts .v1 { background: var(--teal); }
.verdicts .v2 { background: var(--peach); }
.verdicts .v3 { background: var(--sand); }
.verdicts .v4 { background: transparent; }

.note { margin: 2rem 0 0; max-width: 52ch; font-weight: 600; }
.band--paper .note { color: var(--ink); }

.gains { list-style: none; margin: 0; padding: 0; display: grid; }
.gains li { border-top: 3px solid currentColor; padding-block: 1.1rem 1.3rem; }
.gains h3 { margin: 0 0 .4rem; font-size: 1.25rem; }
.gains p { margin: 0; max-width: 46ch; }
@media (min-width: 40rem) {
  .gains { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
}

/* Animation: erst mit JavaScript aktiv */
.js .flow-step .flow-node { opacity: 0; transform: scale(.6); transition: opacity .4s ease-out, transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.js .flow-step .flow-body { opacity: 0; transform: translateY(.6rem); transition: opacity .7s ease-out .2s, transform .7s ease-out .2s; }
.js .flow-step::before { transform: scaleY(0); transform-origin: top; }
.js .verdicts li { opacity: 0; }
.js .flow-step.in .flow-node { opacity: 1; transform: none; }
.js .flow-step.in .flow-body { opacity: 1; transform: none; }
.js .flow-step.in::before { transform: scaleY(1); transition: transform .9s ease-in-out .5s; }
.js .flow-step.in .verdicts li { animation: pop .45s cubic-bezier(.3, 1.4, .5, 1) forwards; animation-delay: calc(.7s + var(--k) * .18s); }
@keyframes pop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js .flow-step .flow-node, .js .flow-step .flow-body, .js .verdicts li {
    opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important;
  }
  .js .flow-step::before { transform: none !important; transition: none !important; }
}

/* ---------- Bewerbungsworkflow: Einleitung, Dashboard, Zeitvergleich ---------- */
.intro { margin: 1.25rem 0 0; max-width: 52ch; font-size: 1.15rem; }
.sub { margin: 2.5rem 0 .75rem; font-size: 1.35rem; }

.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.tile { border-radius: 1rem; padding: 1rem 1.1rem 1.1rem; display: grid; gap: .25rem; }
.tile:first-child { grid-column: 1 / -1; }
.tile .tl { font-weight: 700; font-size: .95rem; }
.tile strong { font-family: var(--display); font-weight: 900; font-size: 2.75rem; line-height: 1; letter-spacing: -0.03em; }
.tile--ink { background: var(--ink); color: var(--paper); }
.tile--white { background: var(--white); color: var(--ink); }
.tile--peach { background: var(--peach); color: var(--on-peach, var(--ink)); }
.tile--sand { background: var(--sand); color: var(--ink); }
@media (min-width: 52rem) {
  .tiles { grid-template-columns: repeat(5, 1fr); }
  .tile:first-child { grid-column: auto; }
}

.next { list-style: none; margin: 0; padding: 0; }
.next li {
  display: grid; gap: .35rem .9rem; align-items: start;
  padding-block: .9rem; border-top: 2px solid var(--ink);
}
.next li:last-child { border-bottom: 2px solid var(--ink); }
.next b { display: block; }
.next div span { display: block; }
.next em { font-style: normal; }
.jv { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .95rem; }
.dot { width: .9rem; height: .9rem; border-radius: 50%; border: 2px solid var(--ink); display: inline-block; }
.dot--ok { background: #35c24a; }
.dot--st { background: #8f7bf0; }
.dot--op { background: #f5d90a; }
@media (min-width: 52rem) {
  .next li { grid-template-columns: 8rem 1.2fr 1.6fr; align-items: center; }
}

.pipe { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.pipe li { display: grid; grid-template-columns: 6.8rem minmax(0, 1fr) 2rem; gap: .75rem; align-items: center; }
.pl { font-weight: 600; font-size: .9rem; }
.pn { font-weight: 700; font-size: .95rem; }
.bar { display: block; height: .9rem; }
.bar i { display: block; height: 100%; width: var(--w); min-width: .6rem; background: var(--orange); border-radius: 999px; transform-origin: left; }
.pipe .done .bar i { background: var(--ink); }
.js .pipe .bar i { transform: scaleX(0); transition: transform 1s cubic-bezier(.2, .7, .2, 1) calc(var(--r) * .09s); }
.js .pipe.in .bar i { transform: none; }

.vs { display: grid; gap: 1.5rem; max-width: 40rem; }
.vs-row { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .35rem 1rem; align-items: center; }
.vs-l { font-weight: 700; }
.slots { display: flex; gap: .5rem; }
.slot { display: block; width: 3.4rem; height: 1.6rem; border-radius: 999px; background: var(--ink); border: 2px solid var(--ink); }
.slot--opt { background: transparent; border-style: dashed; }
.vs-t { grid-column: 2; }
.js .slot { opacity: 0; transform: scale(.7); }
.js .vs.in .slot { animation: pop .45s cubic-bezier(.3, 1.4, .5, 1) forwards; animation-delay: calc(.2s + var(--k) * .2s); }

@media (prefers-reduced-motion: reduce) {
  .js .pipe .bar i { transform: none !important; transition: none !important; }
  .js .slot { opacity: 1 !important; transform: none !important; animation: none !important; }
}

.sub--gap { margin-top: 3.5rem; }
.sub--gap + .gains { margin-top: .5rem; }

/* ---------- Diese Website: Entscheidungen und Zeitbalken ---------- */
.decisions { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.decision { background: var(--white); color: var(--ink); border-radius: 1.25rem; padding: 1.25rem 1.3rem 1.4rem; }
.decision h3 { margin: 0 0 .9rem; font-size: 1.3rem; }
.decision dl { margin: 0; display: grid; gap: .15rem; }
.decision dt { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-top: .6rem; }
.decision dt:first-child { margin-top: 0; }
.decision dd { margin: 0; }
@media (min-width: 52rem) {
  .decisions { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
}

.tbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; max-width: 40rem; }
.tbars li { display: grid; gap: .45rem; }
.tbars .bar { height: 1.1rem; }
.tbars .bar i { background: var(--ink); }
.js .tbars .bar i { transform: scaleX(0); transition: transform 1.1s cubic-bezier(.2, .7, .2, 1) calc(var(--r) * .25s); }
.js .tbars.in .bar i { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .tbars .bar i { transform: none !important; transition: none !important; }
}

/* ---------- Startseite: Header in Schwarz mit Neon-Orange, Orb als Canvas ---------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--white);
  min-height: min(100svh, 58rem);
  display: flex;
  align-items: center;
  padding-top: calc(clamp(3rem, 12vw, 7.5rem) + 4.25rem);
  background: #030203;   /* etwa 70 % des Bildes bleiben Schwarz */
}
.hero-inner { position: relative; z-index: 2; }
.hero h1, .hero .lead { color: var(--white); }

/* Kopfzeile liegt auf dem Hero */
.home .site-header {
  position: absolute;
  inset: 0 0 auto 0;
  background: transparent;
  color: var(--white);
}

.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* Tiefe: Neon-Licht nur rechts oben, links unten tiefschwarz.
   Weiche Verläufe statt Blur-Filter, das ist deutlich leichter für den Browser. */
.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 78% 66% at 100% 0%, rgba(255, 88, 12, .66), rgba(255, 88, 12, 0) 70%),
    radial-gradient(ellipse 38% 32% at 92% 4%, rgba(255, 170, 60, .45), rgba(255, 170, 60, 0) 72%);
}
.blob {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
}
.blob--1 {
  width: 66vmax; height: 66vmax; max-width: 64rem; max-height: 64rem;
  top: -30%; right: -24%;
  background: radial-gradient(circle, rgba(255, 86, 10, .40), rgba(255, 86, 10, 0) 62%);
  animation: drift1 30s ease-in-out infinite alternate;
}
.blob--2 {
  width: 44vmax; height: 44vmax; max-width: 42rem; max-height: 42rem;
  bottom: -14%; right: -6%;
  background: radial-gradient(circle, rgba(255, 40, 80, .34), rgba(255, 40, 80, 0) 70%);
  animation: drift2 38s ease-in-out infinite alternate;
}
.blob--3 {
  width: 26vmax; height: 26vmax; max-width: 24rem; max-height: 24rem;
  top: 22%; right: 26%;
  background: radial-gradient(circle, rgba(255, 120, 40, .2), rgba(255, 120, 40, 0) 70%);
  animation: drift3 44s ease-in-out infinite alternate;
}
@keyframes drift1 { to { transform: translate3d(-8%, 10%, 0) scale(1.1); } }
@keyframes drift2 { to { transform: translate3d(-16%, -10%, 0) scale(.9); } }
@keyframes drift3 { to { transform: translate3d(-12%, 14%, 0) scale(1.15); } }

/* Orb: Partikel-Kugel auf Canvas, hinter Text und Buttons */
.orb {
  --orb: clamp(20rem, 92vw, 42rem);
  position: absolute;
  width: var(--orb);
  height: var(--orb);
  right: -20vw;
  top: 50%;
  margin-top: calc(var(--orb) / -2);
}
.orb canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
@media (max-width: 55.99rem) { .orb { top: 82%; right: -26vw; } }
@media (min-width: 56rem) { .orb { right: 2vw; } }

/* Transparente CTAs (Glas) */
.btn--glass {
  background: rgba(255, 255, 255, .14);
  color: var(--white);
  border-color: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

@media (prefers-reduced-motion: reduce) {
  .blob { animation: none !important; }
}

/* ---------- Startseite: Bento-Kacheln (Schwarz, Weiß, ein Orange) ---------- */

.home {
  --neon: #ff5a12;       /* einziger Akzent */
  --card: #171311;
  --card-2: #251d19;
  --card-line: #2b2420;
  --bento-ink: #0e0c0b;
  background: var(--bento-ink);
  color: var(--white);
}
.home .site-footer { background: var(--bento-ink); color: #a89f97; }

.btn--neon { background: var(--neon); color: var(--bento-ink); }
.btn--line { border-color: #6b5f57; color: var(--white); }
.btn--outline-dark { border-color: var(--bento-ink); color: var(--bento-ink); }
.home .btn--dark { background: var(--bento-ink); color: var(--white); }

.bento {
  display: grid;
  gap: .75rem;
  max-width: 44rem;
  margin-inline: auto;
  padding: .875rem var(--pad) 1rem;
}
.bento-h {
  margin: 1.5rem .5rem .125rem;
  font-family: var(--display);
  font-size: clamp(1.9rem, 7vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--white);
}
.card {
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: 1.75rem;
  padding: 1.375rem;
}
.card h3 {
  margin: 1.5rem 0 0;
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--white);
}
.card p { margin: .625rem 0 0; font-size: 1rem; line-height: 1.55; color: #b9afa7; max-width: none; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: .625rem; }
.ico {
  display: grid; place-items: center;
  width: 3rem; height: 3rem; border-radius: 1rem;
  background: var(--card-2); color: var(--neon);
}
.ico svg { width: 1.5rem; height: 1.5rem; }
.chip {
  background: var(--card-2); color: #e6ddd6;
  font-size: .8125rem; font-weight: 600; line-height: 1.2;
  padding: .45rem .75rem; border-radius: 999px; text-align: right;
}
.card-link {
  margin-top: 1.375rem;
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 700; font-size: 1.0625rem; color: var(--white); text-decoration: none;
}
.card-link .go {
  display: grid; place-items: center;
  width: 3.25rem; height: 3.25rem; border-radius: 50%;
  background: var(--neon); color: var(--bento-ink);
  transition: transform .15s;
}
.card-link .go svg { width: 1.375rem; height: 1.375rem; }
.card-link:hover .go { transform: translateX(3px); }

.prose-card { display: grid; gap: .875rem; font-size: 1rem; }
.prose-card p { margin: 0; line-height: 1.65; color: #d6ccc4; }

.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.stat { padding: 1.25rem; }
.card .stat-big {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.5rem, 7vw, 1.9rem);
  font-weight: 900; letter-spacing: -0.04em; line-height: 1;
  color: var(--neon);
}
.card .stat-sub { margin-top: .625rem; font-size: .875rem; line-height: 1.4; color: #c4bab2; }

.training { padding: 1.25rem 1.375rem; }
.card .label {
  margin: 0;
  font-family: var(--sans);
  font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #a89f97;
}
.training-item { margin-top: .875rem; }
.card .training-item p { margin: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; color: var(--white); }
.card .training-item .when { margin-bottom: .125rem; font-size: .875rem; font-weight: 500; color: #a89f97; }

.contact-card {
  margin-top: .5rem;
  background: var(--neon); border-color: var(--neon); color: var(--bento-ink);
  border-radius: 2rem; padding: 2rem 1.5rem 1.75rem;
}
.contact-card h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2rem, 8.5vw, 2.6rem);
  font-weight: 900; letter-spacing: -0.04em; line-height: 1.02;
  color: var(--bento-ink);
}
.card.contact-card .contact-lead { margin-top: .875rem; font-size: 1.1875rem; font-weight: 500; line-height: 1.4; color: var(--bento-ink); }
.contact-card .cta-row { margin-top: 1.75rem; }

@media (min-width: 56rem) {
  .bento { max-width: 64rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bento-h, .prose-card, .stat-grid, .training, .contact-card { grid-column: 1 / -1; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Dunkles Theme für alle Seiten: Schwarz, Karten, ein Orange ---------- */

.dark {
  --page: #030203;
  --neon: #ff5a12;
  --card: #171311;
  --card-2: #251d19;
  --card-line: #2b2420;
  --bento-ink: #0e0c0b;
  --soft: #c4bab2;
  background: var(--page);
  color: var(--white);
}
.dark .site-header { background: transparent; color: var(--white); }
.dark .site-footer { background: transparent; color: #a89f97; }
.dark .band { background: transparent; color: var(--white); padding-block: clamp(1.75rem, 6vw, 3.5rem); }
.dark .band.hero { padding-block: 0; }
.dark h2.display, .dark h1.display { color: var(--white); }
.dark .prose p, .dark .lead, .dark .intro { color: #d6ccc4; }
.dark .caption, .dark .note, .dark .legal p { color: var(--soft); }
.dark .legal h2 { color: var(--white); }
.dark .legal a, .dark .prose a { color: var(--white); text-decoration-color: var(--neon); }

/* Unterseiten-Kopf */
.dark .page-hero { padding-top: clamp(5.5rem, 16vw, 8rem); }
.dark .crumb { color: var(--soft); }
.dark .page-hero .icon { background: var(--card-2); color: var(--neon); border-radius: 1rem; width: 3rem; height: 3rem; }
.dark .page-hero .icon svg { width: 1.5rem; height: 1.5rem; }
.dark .status {
  border: 0; border-radius: 999px;
  background: var(--card-2); color: #e6ddd6;
  font-size: .8125rem; font-weight: 600; padding: .45rem .75rem;
}

/* Inhalte als Karten statt Linien */
.dark .steps > li,
.dark .criteria li,
.dark .gains li,
.dark .next li,
.dark .decision,
.dark .rows > * {
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: 1.75rem;
  padding: 1.25rem 1.375rem;
  color: var(--white);
}
.dark .steps > li:last-child,
.dark .next li:last-child,
.dark .rows > *:last-child { border-bottom: 1px solid var(--card-line); }
.dark .steps, .dark .criteria, .dark .gains, .dark .next, .dark .decisions { gap: .75rem; }
.dark .steps > li { margin-bottom: .75rem; }
.dark .steps > li:last-child { margin-bottom: 0; }
.dark .next li { margin-bottom: .75rem; }
.dark .next li:last-child { margin-bottom: 0; }
.dark .rows > * { margin-bottom: .75rem; }
.dark .steps > li::before { color: var(--neon); }
.dark .steps p, .dark .gains p, .dark .rows dd, .dark .rows--muted dd { color: var(--soft); }
.dark .criteria li { border-radius: 1.25rem; padding: 1rem 1.25rem; font-size: 1.0625rem; }
.dark .criteria { column-gap: .75rem; }
.dark .gains { column-gap: .75rem; }
.dark .decision dt { color: #a89f97; }
.dark .decision dd { color: var(--white); }
.dark .decision h3 { color: var(--white); }

/* Beispieldialog */
.dark .bubble--bot { background: var(--card-2); color: var(--white); }
.dark .bubble--me { background: var(--neon); color: var(--bento-ink); }

/* Code */
.dark .code, .dark .band--ink .code {
  background: var(--card); color: #e6ddd6;
  border: 1px solid var(--card-line); border-radius: 1.25rem; max-width: none;
}

/* Bewerbungsworkflow: Ablauf */
.dark .flow-node { background: var(--card-2); color: var(--neon); border: 1px solid var(--card-line); }
.dark .flow-step::before { background: #4a3f38; }
.dark .flow-body h3 { color: var(--white); }
.dark .tag { border-color: #6b5f57; color: var(--white); }
.dark .tag--ai { background: transparent; color: var(--white); }
.dark .tag--me { background: var(--neon); border-color: var(--neon); color: var(--bento-ink); }

/* Urteile und Status ohne Farbcode: Orange gefüllt, Orange-Umriss, Grau, gestrichelt */
.dark .verdicts li { color: var(--white); border-color: #6b5f57; }
.dark .verdicts .v1 { background: var(--neon); border-color: var(--neon); color: var(--bento-ink); }
.dark .verdicts .v2 { background: transparent; border-color: var(--neon); color: var(--white); }
.dark .verdicts .v3 { background: var(--card-2); border-color: var(--card-2); color: #e6ddd6; }
.dark .verdicts .v4 { background: transparent; border: 2px dashed #6b5f57; color: var(--soft); }
.dark .dot { border: 2px solid var(--neon); }
.dark .dot--ok { background: var(--neon); }
.dark .dot--st { background: transparent; }
.dark .dot--op { background: transparent; border: 2px dashed #8a7d74; }
.dark .jv { color: var(--white); }

/* Kennzahlen, Balken */
.dark .tile { border: 1px solid var(--card-line); }
.dark .tile--ink, .dark .tile--white, .dark .tile--peach, .dark .tile--sand { background: var(--card); color: var(--white); }
.dark .tile strong { color: var(--neon); }
.dark .bar { background: var(--card); border-radius: 999px; }
.dark .bar i, .dark .tbars .bar i { background: var(--neon); }
.dark .pipe .done .bar i { background: var(--white); }
.dark .slot { background: var(--neon); border-color: var(--neon); }
.dark .slot--opt { background: transparent; border-color: #6b5f57; }
.dark .pl, .dark .pn, .dark .vs-l { color: var(--white); }

/* Weiter-Navigation als zwei Karten */
.dark .pager { gap: .75rem; padding: 0 var(--pad) 1.5rem; max-width: 72rem; margin-inline: auto; width: 100%; }
.dark .pager a, .dark .pager a:first-child, .dark .pager a:last-child {
  background: var(--card); color: var(--white);
  border: 1px solid var(--card-line); border-radius: 1.75rem; padding: 1.375rem;
}
.dark .pager small { color: var(--soft); }
.dark .pager a:hover span { color: var(--neon); text-decoration: none; }

/* ---------- Vollbild-Menü (alle Seiten) ---------- */

.brand { position: relative; z-index: 3; }
.menu summary {
  z-index: 3;
  background: transparent;
  border: 2px solid var(--white);
}
.menu summary:hover { background: rgba(255, 255, 255, .12); }
.menu-panel {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .25rem;
  padding: 6rem max(var(--pad), calc((100vw - 72rem) / 2 + var(--pad))) 3rem;
  background: var(--page);
  border: 0;
  box-shadow: none;
  overflow-y: auto;
}
.menu-panel a {
  min-height: 0;
  padding: .35rem 0;
  border: 0;
  font-size: clamp(2.5rem, 12vw, 4.5rem);
  line-height: 1.05;
  color: var(--white);
}
.menu-panel a:hover, .menu-panel a:focus-visible { color: var(--neon); }
.menu[open] .menu-panel { animation: menuIn .35s ease-out both; }
.menu[open] .menu-panel a { animation: menuItem .5s ease-out both; }
.menu[open] .menu-panel a:nth-child(2) { animation-delay: .07s; }
.menu[open] .menu-panel a:nth-child(3) { animation-delay: .14s; }
@keyframes menuIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes menuItem { from { opacity: 0; transform: translateY(.75rem); } to { opacity: 1; transform: none; } }
html:has(.menu[open]) { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .menu[open] .menu-panel, .menu[open] .menu-panel a { animation: none; }
}

/* ---------- Startseite: weicher Übergang Hero → Inhalt ---------- */

.home { background: var(--page); }
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: clamp(6rem, 22vw, 10rem);
  background: linear-gradient(to bottom, rgba(3, 2, 3, 0), var(--page));
  z-index: 1;
  pointer-events: none;
}

/* ---------- Feedback: einzeilige Titel, gleich hohe Texte, besserer Kontrast ---------- */

.uc-card { display: flex; flex-direction: column; container-type: inline-size; }
.uc-card h3 {
  font-size: min(1.75rem, 9.2cqw);
  white-space: nowrap;
}
.card.uc-card p { min-height: calc(4 * 1.55em); }
.uc-card .card-link { margin-top: auto; padding-top: 1.375rem; }

/* Nebentexte: fast weiß statt Grau, damit die dünne Schrift auf Schwarz trägt */
.dark {
  --soft: #e9e2dc;
  --label: #d3c9c1;
}
.dark .prose p, .dark .lead, .dark .intro, .dark .legal p, .dark .caption, .dark .note { color: var(--soft); }
.dark .crumb { color: var(--soft); }
.dark .steps p, .dark .gains p, .dark .rows dd, .dark .rows--muted dd,
.dark .decision dd, .dark .next span, .dark .next em { color: var(--soft); }
.dark .steps p, .dark .gains p, .dark .decision dd { font-size: 1.0625rem; line-height: 1.55; }
.dark .decision dt, .dark .card .label, .dark .card .training-item .when, .dark .pager small { color: var(--label); }
.dark .decision dt { font-size: .8125rem; }
.dark .card p, .dark .prose-card p { color: var(--soft); }
.dark .card .stat-sub { color: var(--soft); font-size: .9375rem; }
.dark .chip, .dark .status { color: #f3ede8; }
.dark .site-footer, .dark .site-footer a { color: var(--label); }
.dark .code, .dark .band--ink .code { color: #f3ede8; }
.card.uc-card p { min-height: 0; }
@media (min-width: 56rem) {
  .bento { max-width: 72rem; }
  .card.uc-card p { min-height: calc(4 * 1.55em); }
}
.dark .card p.stat-big { color: var(--neon); }
.dark .card.contact-card p { color: var(--bento-ink); }
.dark .card .training-item p { color: var(--white); }
.dark .card .training-item p.when { color: var(--label); }

/* ---------- Bedarfsanalyse: neue Bausteine ---------- */

.duo { display: grid; gap: .75rem; }
.duo-card { border-radius: 1.75rem; padding: 1.25rem 1.375rem; border: 1px solid var(--card-line); background: var(--card); }
.duo-card small { display: block; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--label); }
.duo-card p { margin: .5rem 0 0; font-family: var(--display); font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; font-size: clamp(1.4rem, 5.5vw, 2rem); color: var(--white); }
.duo-card--no p { color: #b9afa7; text-decoration: line-through; text-decoration-color: #6b5f57; text-decoration-thickness: 2px; }
.duo-card--yes { background: var(--neon); border-color: var(--neon); }
.duo-card--yes small, .duo-card--yes p { color: var(--bento-ink); }
@media (min-width: 52rem) { .duo { grid-template-columns: 1fr 1fr; gap: 1rem; } }

.facts { margin: 0; display: grid; grid-template-columns: 1fr; gap: .75rem; }
.fact { background: var(--card); border: 1px solid var(--card-line); border-radius: 1.75rem; padding: 1.25rem 1.375rem; }
.fact dt { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--label); }
.fact dd { margin: .4rem 0 0; font-size: 1.125rem; font-weight: 600; line-height: 1.35; color: var(--white); }
@media (min-width: 40rem) { .facts { grid-template-columns: 1fr 1fr; } }

.shot { margin: 0; }
.shot + .shot { margin-top: 2rem; }
.shot a { display: block; border-radius: 1.5rem; overflow: hidden; border: 1px solid var(--card-line); background: #fff; }
.shot img { width: 100%; height: auto; }
.shot .caption { margin-top: .75rem; }

.callout { background: var(--card); border: 1px solid var(--card-line); border-left: 4px solid var(--neon); border-radius: 1.25rem; padding: 1.25rem 1.375rem; }
.callout h3 { margin: 0 0 .5rem; color: var(--white); }
.callout p { margin: 0; color: var(--soft); max-width: 62ch; }

.chain { list-style: none; margin: 0; padding: 0; counter-reset: ch; display: grid; gap: .5rem; grid-template-columns: 1fr; }
.chain li {
  counter-increment: ch; display: flex; align-items: center; gap: .875rem;
  background: var(--card); border: 1px solid var(--card-line); border-radius: 999px;
  padding: .7rem 1.25rem .7rem .75rem; font-weight: 600; color: var(--white);
}
.chain li::before {
  content: counter(ch); flex: none; display: grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 50%; background: var(--card-2); color: var(--neon);
  font-family: var(--display); font-weight: 900; font-size: 1rem;
}
@media (min-width: 40rem) { .chain { grid-template-columns: 1fr 1fr 1fr; } }

.demo-cta { background: var(--card); border: 1px solid var(--card-line); border-radius: 1.75rem; padding: 1.5rem 1.375rem; }
.demo-cta h3 { margin: 0 0 .5rem; font-size: 1.5rem; color: var(--white); }
.demo-cta p { margin: 0 0 1.25rem; max-width: 56ch; color: var(--soft); }

/* ---------- Layout-Überarbeitung: Überschrift oben, Inhalt darunter ---------- */
.section-grid { display: block; }
h1.display, h2.display { overflow-wrap: normal; word-break: normal; hyphens: manual; text-wrap: balance; }
h2.display { max-width: 24ch; }
.sub-h { margin: 3.5rem 0 0; font-size: clamp(1.35rem, 3.6vw, 1.75rem); color: var(--white); }
@media (min-width: 56rem) { .gains--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gains--3 p { max-width: none; } }
.band .intro, .band .prose { max-width: 62ch; }
.pair { display: grid; gap: 1.5rem; align-items: start; }
.pair .code { margin: 0; overflow-x: auto; }
@media (min-width: 56rem) {
  .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
}
@media (min-width: 56rem) {
  .criteria { display: flex; flex-wrap: wrap; gap: .75rem; }
  .criteria li { flex: 0 0 auto; padding-inline: 1.5rem; }
}
.band h2.display + .prose.stack-gap, .band h2.display + .intro { margin-top: 1.25rem; }

/* Bedarfsanalyse: Kacheln direkt unter dem Kopf, Phasen-Label im Ablauf */
.band:has(> .wrap > .facts:only-child) { padding-block: 0 2rem; }
.phase { display: block; margin-top: .45rem; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--neon); }
.phase + h3 { margin-top: .25rem; }
.flow-body p { max-width: 52ch; margin: 0; color: var(--soft); }

/* Über mich: eine Karte, Fortbildung unten */
.training-in { display: grid; gap: .25rem; margin-top: .5rem; padding-top: 1.25rem; border-top: 1px solid var(--card-line); }
.training-in .label { margin: 0 0 .25rem; }

/* Bedarfsanalyse: Dashboard, Vorher/Nachher */
.tiles--4 { grid-template-columns: 1fr 1fr; }
.tiles--4 .tile:first-child { grid-column: auto; }
@media (min-width: 52rem) { .tiles--4 { grid-template-columns: repeat(4, 1fr); } }
.cands { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.cands li { display: grid; gap: .35rem; padding: 1rem 1.25rem; background: var(--card); border: 1px solid var(--card-line); border-radius: 1.25rem; }
.cands b { display: block; color: var(--white); }
.cands span { display: block; color: var(--soft); font-size: .95rem; }
.cands em { font-style: normal; font-size: .85rem; color: var(--label); }
@media (min-width: 52rem) { .cands li { grid-template-columns: 1.6fr 1fr; align-items: center; } .cands em { text-align: right; } }
.cand-bars li { grid-template-columns: 1fr; gap: .4rem; }
.cand-bars .pl { display: grid; gap: .1rem; }
.cand-bars .pl b { font-weight: 600; }
.cand-bars .pl small { color: var(--label); font-size: .85rem; }
.cand-bars li { grid-template-columns: minmax(0, 1fr) 2.2rem; }
.cand-bars .pl { grid-column: 1 / -1; }
.cand-bars .bar { grid-column: 1; }
@media (min-width: 52rem) {
  .cand-bars li { grid-template-columns: 22rem minmax(0, 1fr) 2.2rem; align-items: center; }
  .cand-bars .pl, .cand-bars .bar { grid-column: auto; }
}
.ba { display: grid; gap: .75rem; }
@media (min-width: 52rem) { .ba { grid-template-columns: 1fr 1fr; } }
.ba-card { padding: 1.4rem 1.5rem; background: var(--card); border: 1px solid var(--card-line); border-radius: 1.75rem; }
.ba-card--after { border-color: var(--neon); }
.ba-card small { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--label); }
.ba-card--after small { color: var(--neon); }
.ba-card ul { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .5rem; font-size: 1.1rem; color: var(--white); }
.ba-card:not(.ba-card--after) li { color: var(--soft); }
.cand-bars + .note { font-weight: 400; }

/* ---------- Sections: dezente Bänder im Wechsel ---------- */
.dark { --band-bg: #0e0b0a; --card-on-band: #1b1613; }
.dark main > .band:not(.page-hero) { padding-block: clamp(2.5rem, 8vw, 4.5rem); }
.dark main > .band:nth-of-type(odd):not(:first-of-type) {
  background: var(--band-bg);
  border-top: 1px solid var(--card-line);
  --card: var(--card-on-band);
}
.dark .page-hero .facts { margin-top: 2.25rem; }
body { overflow-x: clip; }
.bento-band { display: contents; }

/* Pager: Abstand zum Band darüber, CTA orange */
.dark .pager { margin-top: 3rem; }
.dark .pager a.band--cta, .dark .pager a.band--cta:first-child, .dark .pager a.band--cta:last-child { background: var(--neon); border-color: var(--neon); color: var(--bento-ink); }
.dark .pager a.band--cta small { color: var(--bento-ink); }
.dark .pager a.band--cta:hover span { color: var(--bento-ink); text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .12em; }

/* Ablauf: Label links, Text in eigener Spalte, mehr Luft */
.who { display: grid; grid-template-columns: 1fr; column-gap: .9rem; align-items: baseline; margin: 0 0 1rem; max-width: 56ch; line-height: 1.55; }
.who .tag { margin: 0; justify-self: start; text-align: center; }
.flow-body h3 { margin-bottom: 1rem; }
.flow-body .who:last-child { margin-bottom: 0; }
@media (min-width: 40rem) { .who { grid-template-columns: 5.5rem minmax(0, 1fr); } }
.who { row-gap: .35rem; }
.flow-body .who { margin: 0 0 1.1rem; } .flow-body .who:last-child { margin-bottom: 0; }

/* Dot "klären" wie das Label: grau gefüllt */
.dark .dot--op { background: #6b5f57; border: 2px solid #6b5f57; }

/* Orb-Schein: Weichzeichner per CSS statt Canvas-Filter (iOS Safari) */
.orb .orb-glow { filter: blur(20px); -webkit-filter: blur(20px); }

/* ---------- Projekte ---------- */
.menu[open] .menu-panel a:nth-child(4) { animation-delay: .21s; }
.proj-grid { display: grid; gap: .75rem; }
@media (min-width: 48rem) { .proj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.proj-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; text-decoration: none; color: inherit; transition: border-color .25s; }
.proj-card:hover, .proj-card:focus-visible { border-color: var(--neon); }
.proj-card img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: #e9e9e9; }
.proj-body { display: grid; gap: .6rem; padding: 1.25rem 1.4rem 1.4rem; align-content: start; flex: 1; }
.proj-body .chip { justify-self: start; }
.proj-body h3 { margin: .15rem 0 0; font-size: 1.75rem; line-height: 1.1; color: var(--white); }
.proj-body p { margin: 0; color: var(--soft); }
.proj-body .card-link { margin-top: auto; padding-top: .9rem; display: flex; align-items: center; justify-content: space-between; font-weight: 600; color: var(--white); }

.anteil { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; max-width: 52rem; }
.anteil li { padding: 1.05rem 1.3rem; background: var(--card); border: 1px solid var(--card-line); border-left: 3px solid var(--neon); border-radius: 1.25rem; color: var(--white); line-height: 1.5; }

.chip--solo { display: inline-block; margin: 0 0 1rem; }
.gallery { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.g-item { margin: 0; }
.g-item a { display: block; border-radius: 1.25rem; overflow: hidden; border: 1px solid var(--card-line); background: #f1f1f1; }
.g-item img { width: 100%; height: auto; display: block; }
.g-wide { grid-column: 1 / -1; }
.g-item.portrait { justify-self: center; width: 100%; max-width: 15rem; }
.sub-h + .intro { margin-top: .6rem; }
.band .gallery + .sub-h { margin-top: 3.5rem; }

.video { margin: 2rem 0 0; }
.video-load { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--card-line); border-radius: 1.25rem; overflow: hidden; cursor: pointer; background: #111; aspect-ratio: 16 / 9; }
.video-load img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .85; transition: opacity .25s; }
.video-load:hover img, .video-load:focus-visible img { opacity: 1; }
.video-load:focus-visible { outline: 3px solid var(--neon); outline-offset: 3px; }
.video .play { position: absolute; inset: 0; margin: auto; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--neon); color: var(--bento-ink); display: grid; place-items: center; box-shadow: 0 6px 24px rgba(0,0,0,.45); }
.video .play svg { width: 1.9rem; height: 1.9rem; margin-left: .2rem; }
.video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 1.25rem; background: #000; }
.video .caption a { text-decoration-color: var(--neon); }
.chip--solo { margin: .9rem 0 1rem; }

/* Galerie als Karussell */
.gal { position: relative; }
.gal-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; border-radius: 1.25rem; border: 1px solid var(--card-line); background: var(--card); overscroll-behavior-x: contain; }
.gal-track::-webkit-scrollbar { display: none; }
.gal-track:focus-visible { outline: 3px solid var(--neon); outline-offset: 3px; }
.gal-slide { flex: 0 0 100%; scroll-snap-align: center; margin: 0; display: flex; align-items: center; justify-content: center; padding: .5rem; box-sizing: border-box; }
.gal-slide img { display: block; width: auto; height: auto; max-width: 100%; max-height: min(70vh, 34rem); border-radius: .9rem; -webkit-user-drag: none; user-select: none; }
.gal-bar { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: .9rem; }
.gal-count { min-width: 4.5rem; text-align: center; color: var(--label); font-size: .95rem; font-variant-numeric: tabular-nums; }
.gal-count b { color: var(--white); font-weight: 600; }
.gal-btn { width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid #6b5f57; background: transparent; color: var(--white); display: grid; place-items: center; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.gal-btn svg { width: 1.3rem; height: 1.3rem; }
.gal-btn:hover, .gal-btn:focus-visible { background: var(--neon); border-color: var(--neon); color: var(--bento-ink); }
.gal-btn:focus-visible { outline: 3px solid var(--neon); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) { .gal-track { scroll-behavior: smooth; } }

/* Projektkacheln: kräftigerer Hover-Rahmen */
.proj-card { border-width: 1px; }
.proj-card:hover, .proj-card:focus-visible { border-color: var(--neon); box-shadow: 0 0 0 3px var(--neon); outline: none; }
.video-btnlink { margin-top: .9rem; }
.video .video-yt { margin-top: .9rem; }