/* ==========================================================================
   Entwurf C „Fadenlauf“
   Ein einziger roter Faden zieht sich über die ganze Seite: oben noch ein
   Knäuel (Chaos), dann in ruhiger werdenden Schwüngen durch alle Abschnitte,
   bis er gerade in den Kontakt-Knopf läuft (Struktur).
   ========================================================================== */

/* Schriften – selbst gehostet (SIL Open Font License) */
@font-face { font-family: "Literata"; font-style: normal; font-weight: 500; font-display: swap; src: url("../../assets/fonts/literata-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 600; font-display: swap; src: url("../../assets/fonts/literata-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../assets/fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url("../../assets/fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../../assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  --weiss: #FFFFFF;
  --papier: #F6F7F9;
  --tinte: #1B2433;
  --grau: #5E616B;
  --linie: #D9DDE4;
  --rot: #C0282D;
  --rot-dunkel: #A21F24;
  --rot-zart: #F6E3E3;
  --rot-hauch: #FBF1F1;

  --serif: "Literata", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --kopf-h: 4rem;
  --rinne: 2.25rem;        /* Spalte für den Faden (mobil) */
  --spur: 1.125rem;        /* x-Position des Fadens (mobil: Mitte der Rinne) */
}
@media (min-width: 48rem) { :root { --kopf-h: 4.75rem; } }

/* Grundlagen */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-h) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--weiss); color: var(--tinte); font: 400 1.0625rem/1.65 var(--sans); overflow-x: hidden; }
@media (min-width: 48rem) { body { font-size: 1.125rem; } }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: var(--rot); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--rot-dunkel); }
:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.12; margin: 0; text-wrap: balance; }
p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
strong { font-weight: 600; }

.springen { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--tinte); color: #fff; padding: 0.6rem 1rem; border-radius: 4px; text-decoration: none; }
.springen:focus { top: 1rem; color: #fff; }

/* Platzhalter – gut sichtbar */
.platzhalter {
  background: var(--rot-zart); color: var(--rot-dunkel);
  font-family: var(--mono); font-size: 0.8em; font-weight: 400;
  padding: 0.05em 0.35em; border-radius: 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* Entwurfsleiste (nur Entwurf) */
.entwurfsleiste {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.25rem 1rem;
  background: var(--tinte); color: #fff; font: 400 0.8rem/1.4 var(--mono); padding: 0.45rem 1rem;
}
.entwurfsleiste nav { display: flex; gap: 0.9rem; }
.entwurfsleiste a { color: #fff; text-decoration-color: rgba(255,255,255,.4); }
.entwurfsleiste a:hover { color: #fff; text-decoration-color: #EF5A5F; }
.entwurfsleiste a[aria-current="page"] { text-decoration-color: #EF5A5F; text-decoration-thickness: 2px; }

/* Kleine Auszeichnung in Mono */
.marke-klein { font: 500 0.78rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--rot); }

/* --------------------------------------------------------------------------
   Kopfzeile
   -------------------------------------------------------------------------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--linie);
}
.kopf__innen {
  position: relative; max-width: 78rem; margin-inline: auto;
  min-height: var(--kopf-h); padding: 0.35rem 1.25rem 0.35rem 0.75rem;
  display: flex; align-items: center; gap: 0.5rem;
}
@media (min-width: 64rem) { .kopf__innen { padding-inline: 2rem; } }
.marke { margin-right: auto; margin-left: -0.3rem; flex: none; }
.marke img { height: 2.9rem; width: auto; }
@media (min-width: 48rem) { .marke img { height: 3.4rem; } }

.hauptnav { display: flex; flex-wrap: wrap; gap: 0.15rem 1.35rem; font-size: 0.98rem; }
.hauptnav a { text-decoration: none; color: var(--grau); padding-block: 0.35rem; }
.hauptnav a:hover, .hauptnav a.ist-aktiv { color: var(--rot-dunkel); }
.hauptnav a.ist-aktiv { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.45em; }
@media (min-width: 62rem) { .hauptnav { margin-right: 1rem; } }

@media (max-width: 61.99rem) {
  .kopf__innen { flex-wrap: wrap; }
  .hauptnav { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.35rem; }
  .hauptnav a { white-space: nowrap; }
  .js .kopf__innen { flex-wrap: nowrap; }
  .js .hauptnav {
    position: absolute; left: 0; right: 0; top: 100%;
    display: none; flex-direction: column; gap: 0;
    background: var(--weiss); border-bottom: 2px solid var(--rot);
    padding: 0.5rem 1.25rem 1rem calc(0.75rem + var(--rinne));
  }
  .js .hauptnav.ist-offen { display: flex; }
  .js .hauptnav a { font: 600 1.25rem/1.3 var(--serif); color: var(--tinte); padding: 0.75rem 0; border-bottom: 1px solid var(--linie); }
  .js .hauptnav a:last-child { border-bottom: 0; }
  .js .menue-knopf { display: inline-flex; }
}
.menue-knopf {
  display: none; align-items: center; min-height: 2.75rem; padding: 0 0.9rem;
  font: 500 0.8rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tinte); background: transparent; border: 1.5px solid var(--tinte); border-radius: 2px; cursor: pointer;
}
.menue-knopf[aria-expanded="true"] { background: var(--tinte); color: #fff; }

/* --------------------------------------------------------------------------
   Knöpfe
   -------------------------------------------------------------------------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.7rem 1.35rem;
  font: 600 1rem/1.2 var(--sans); text-decoration: none; text-align: center;
  border-radius: 2px; border: 2px solid var(--rot);
}
.knopf--haupt { background: var(--rot); color: #fff; }
.knopf--haupt:hover { background: var(--rot-dunkel); border-color: var(--rot-dunkel); color: #fff; }
.knopf--rahmen { color: var(--tinte); border-color: var(--tinte); }
.knopf--rahmen:hover { border-color: var(--rot); color: var(--rot-dunkel); }
.knopf--gross { font-size: 1.12rem; min-height: 3.6rem; padding-inline: 2rem; }
.knopf--kopf { min-height: 2.75rem; width: 2.75rem; padding: 0; }
.knopf--kopf .knopf__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 62rem) {
  .knopf--kopf { width: auto; padding: 0.5rem 1.1rem; }
  .knopf--kopf .icon { display: none; }
  .knopf--kopf .knopf__text { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}

/* --------------------------------------------------------------------------
   Der Faden
   -------------------------------------------------------------------------- */
.lauf {
  position: relative;
  max-width: 78rem; margin-inline: auto;
  padding-inline: 0.75rem 1.25rem;
  counter-reset: station;
}
@media (min-width: 64rem) { .lauf { padding-inline: 2rem; } }
.faden {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none; z-index: 0;
}
.faden__pfad { fill: none; stroke: var(--rot); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 64rem) { .faden__pfad { stroke-width: 2.75; } }

.anker { position: absolute; left: var(--spur); width: 0; height: 0; pointer-events: none; }
.anker--oben { top: 1rem; }
.anker--unten { bottom: 1rem; }
.anker--nur-desktop { display: none; }

/* --------------------------------------------------------------------------
   Stationen (Abschnitte)
   -------------------------------------------------------------------------- */
.station { position: relative; z-index: 1; padding-block: 3.75rem; counter-increment: station; }
.station__inhalt { padding-left: var(--rinne); display: grid; gap: 1.5rem; }
.station__kopf { display: grid; gap: 0.7rem; }
.station__nr::before {
  content: counter(station, decimal-leading-zero);
  display: block;
  font: 600 clamp(3rem, 2.2rem + 4vw, 5.75rem)/0.85 var(--serif);
  color: var(--rot-zart); letter-spacing: -0.03em;
  margin-bottom: 0.25rem;
}
.station h2 { font-size: clamp(1.9rem, 1.3rem + 2.5vw, 3.1rem); letter-spacing: -0.02em; }
.einleitung { color: var(--grau); font-size: 1.08rem; }

/* Hero */
.station--hero { counter-increment: none; padding-top: 1.25rem; padding-bottom: 3rem; }
.knaeuel { width: 6.5rem; height: 6.5rem; margin-bottom: 0.5rem; }
.hero__text { gap: 1.35rem; }
.station--hero h1 { font-size: clamp(2.35rem, 1.45rem + 3.9vw, 4.3rem); letter-spacing: -0.025em; line-height: 1.04; }
.lead { font-size: 1.15rem; color: var(--grau); max-width: 38rem; }
@media (min-width: 48rem) { .lead { font-size: 1.22rem; } }
.lead--betont { font: 500 1.22rem/1.45 var(--serif); color: var(--tinte); }
@media (min-width: 48rem) { .lead--betont { font-size: 1.4rem; } }
.aktionen { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.25rem; }
.fakten { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; font: 400 0.8rem/1.5 var(--mono); color: var(--grau); text-transform: uppercase; letter-spacing: 0.06em; }
.fakten li::before { content: "— "; color: var(--rot); }

/* Leistungen */
.leistungen { display: grid; gap: 2.75rem; margin-top: 0.75rem; }
.leistung { display: grid; gap: 0.75rem; }
.leistung h3 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem); }
.leistung__unterzeile { font: 400 0.85rem/1.5 var(--mono); color: var(--grau); margin-top: -0.3rem; }
.punkte { display: grid; border-top: 2px solid var(--tinte); margin-top: 0.4rem; }
.punkte > div { display: grid; gap: 0.15rem; padding: 0.9rem 0; border-bottom: 1px solid var(--linie); }
@media (min-width: 48rem) { .punkte > div { grid-template-columns: 13rem minmax(0, 1fr); gap: 1.5rem; } }
.punkte dt { font: 500 0.8rem/1.9 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--rot); }
.punkte dd { color: var(--tinte); }

.grundsatz { display: grid; gap: 0.85rem; margin-top: 2rem; padding: 1.75rem 1.5rem; background: var(--rot-hauch); border-radius: 2px; }
@media (min-width: 48rem) { .grundsatz { padding: 2.5rem 2.5rem; } }
.grundsatz__satz { font: 500 clamp(1.35rem, 1.05rem + 1.4vw, 2rem)/1.35 var(--serif); letter-spacing: -0.01em; text-wrap: balance; }
.grundsatz__text { color: var(--grau); }

/* Für wen */
.situationen { display: grid; gap: 2rem 2.5rem; margin-top: 0.5rem; }
@media (min-width: 40rem) { .situationen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.situation { display: grid; gap: 0.6rem; align-content: start; padding-top: 1.1rem; border-top: 2px solid var(--tinte); }
.situation h3 { font-weight: 500; font-size: 1.2rem; line-height: 1.35; }
.situation p { color: var(--grau); }

/* Ablauf */
.schritte { list-style: none; padding: 0; display: grid; gap: 2rem; margin-top: 0.5rem; }
.schritt { position: relative; }
.schritt__nr {
  position: absolute; left: calc(var(--rinne) * -1); top: -0.1rem;
  width: var(--rinne); height: var(--rinne); border-radius: 50%;
  display: grid; place-items: center;
  background: var(--weiss); border: 2px solid var(--rot);
  font: 600 0.95rem/1 var(--serif); color: var(--tinte); z-index: 2;
}
.schritt__text { display: grid; gap: 0.4rem; padding-left: 0.75rem; }
.schritt h3 { font-size: 1.3rem; }
.schritt p { color: var(--grau); }

/* Über mich */
.person__text { display: grid; gap: 1rem; }
.person__intro { font: 500 1.22rem/1.5 var(--serif); }
@media (min-width: 48rem) { .person__intro { font-size: 1.35rem; } }
.person__text p:not(.person__intro) { color: var(--grau); }
.werdegang__titel { font-size: 1.2rem; margin-top: 1rem; }
.werdegang { list-style: none; padding: 0; border-top: 2px solid var(--tinte); }
.werdegang li { display: grid; gap: 0.2rem; padding: 0.9rem 0; border-bottom: 1px solid var(--linie); }
@media (min-width: 40rem) { .werdegang li { grid-template-columns: 8rem minmax(0, 1fr); gap: 1.25rem; } }
.werdegang__zeit { font: 400 0.82rem/1.9 var(--mono); color: var(--grau); }
.werdegang__inhalt { color: var(--grau); }
.werdegang__inhalt strong { display: block; color: var(--tinte); }

.bildplatzhalter {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.4rem;
  text-align: center; padding: 1.5rem;
  background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(192, 40, 45, 0.07) 10px 11px), var(--weiss);
  color: var(--grau);
}
.bildplatzhalter__titel { font: 500 0.78rem/1.3 var(--mono); color: var(--rot-dunkel); }
.bildplatzhalter__text { font-size: 0.8rem; line-height: 1.4; max-width: 15rem; }

/* Mobil: Porträt nach der Überschrift, neben dem Faden */
@media (max-width: 63.99rem) {
  .station--person { display: flex; flex-direction: column; gap: 1.5rem; }
  .station--person .station__inhalt { display: contents; }
  .station--person .station__inhalt > * { margin-left: var(--rinne); order: 3; }
  .station--person .station__kopf { order: 1; }
  .station--person .portrait { order: 2; margin-left: var(--rinne); }
  .station--person .werdegang__titel { margin-top: 0.5rem; }
}
.portrait__kreis {
  width: 11rem; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid var(--tinte); box-shadow: 0 0 0 8px var(--weiss);
  position: relative; z-index: 2;
}

/* Kundenstimmen */
.stimmen { list-style: none; padding: 0; display: grid; gap: 1rem; }
.stimme { display: grid; gap: 0.75rem; background: var(--rot-hauch); padding: 1.5rem 1.5rem 1.35rem; border-radius: 2px; position: relative; }
.stimme::before { content: "„"; position: absolute; top: 0.55rem; right: 1.1rem; font: 600 3.5rem/1 var(--serif); color: var(--rot-zart); }
.stimme blockquote { font: 500 1.15rem/1.5 var(--serif); padding-right: 2.5rem; }
.stimme__quelle { font: 400 0.82rem/1.5 var(--mono); color: var(--grau); }

/* Vorträge */
.vortraege { list-style: none; padding: 0; border-top: 2px solid var(--tinte); }
.vortraege li { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: 0.2rem 1rem; padding: 1rem 0; border-bottom: 1px solid var(--linie); }
.vortraege__jahr { grid-row: span 2; font: 400 0.85rem/1.9 var(--mono); }
.vortraege__titel { font: 500 1.12rem/1.4 var(--serif); }
.vortraege__anlass { color: var(--grau); }

/* Häufige Fragen */
.faq { border-top: 2px solid var(--tinte); }
.faq details { border-bottom: 1px solid var(--linie); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 1.05rem 0; font-weight: 600; font-size: 1.06rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 500 1.25rem/1 var(--mono); color: var(--rot); flex: none; transition: transform 0.25s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--rot-dunkel); }
.faq details p { color: var(--grau); padding: 0 2rem 1.25rem 0; }

/* Kontakt */
.station--kontakt { padding-bottom: 6rem; }
.kontakt__aktion { margin-top: 0.25rem; }
.hinweis { font-size: 0.95rem; color: var(--grau); }
.kontaktliste { border-top: 2px solid var(--tinte); margin-top: 0.5rem; }
.kontaktliste > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 1rem; padding: 0.8rem 0; border-bottom: 1px solid var(--linie); }
.kontaktliste > div[hidden] { display: none; }
.kontaktliste dt { font: 500 0.78rem/1.6 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--grau); min-width: 8rem; }
.kontaktliste dd { font-weight: 600; }

/* --------------------------------------------------------------------------
   Desktop: Inhalte wechseln die Seite, der Faden schwingt dazwischen
   -------------------------------------------------------------------------- */
@media (min-width: 64rem) {
  .station {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem;
    padding-block: 8rem;
  }
  .station__inhalt { padding-left: 0; grid-row: 1; }
  .anker--oben { top: 1.5rem; }
  .anker--unten { bottom: 5rem; }
  .anker--nur-mobil { display: none; }
  .anker--nur-desktop { display: block; }

  .station--links { --spur: 84%; }
  .station--links .station__inhalt { grid-column: 1 / span 8; }
  .station--rechts { --spur: 16%; }
  .station--rechts .station__inhalt { grid-column: 5 / span 8; }
  .station--spur-1 { --spur: 23%; }
  .station--spur-2 { --spur: 29%; }
  .station--spur-3 { --spur: 33.5%; }
  .station--spur-4 { --spur: 36.5%; }
  .station--spur-1 .station__inhalt, .station--spur-2 .station__inhalt,
  .station--spur-3 .station__inhalt, .station--spur-4 .station__inhalt { grid-column: 6 / span 7; }

  /* Hero: Text links, Knäuel rechts */
  .station--hero { padding-top: 4.5rem; padding-bottom: 5rem; align-items: center; min-height: min(46rem, calc(100vh - var(--kopf-h) - 2rem)); }
  .station--hero .hero__text { grid-column: 1 / span 7; }
  .knaeuel { grid-column: 8 / span 5; grid-row: 1; justify-self: center; width: min(100%, 22rem); height: auto; aspect-ratio: 1; margin: 0; }

  /* Ablauf: Zeitleiste in der Mitte */
  .station--ablauf .station__inhalt {
    grid-column: 1 / -1;
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem;
  }
  .station--ablauf .station__kopf { grid-column: 7 / span 6; margin-bottom: 2rem; }
  .station--ablauf .schritte { grid-column: 1 / -1; gap: 1rem; }
  .schritt { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; min-height: 8.5rem; }
  .schritt__nr { left: 47%; top: 0; transform: translateX(-50%); width: 3.25rem; height: 3.25rem; font-size: 1.2rem; }
  .schritt:nth-child(even) .schritt__nr { left: 53%; }
  .schritt__text { grid-column: 1 / span 5; text-align: right; padding: 0.6rem 0 0; }
  .schritt:nth-child(even) .schritt__text { grid-column: 8 / span 5; text-align: left; }

  /* Über mich: Porträt im Kreis, der Faden läuft hindurch */
  .station--person .portrait { display: block; grid-column: 1 / span 4; grid-row: 1; justify-self: center; align-self: start; position: relative; }
  .station--person .station__inhalt { grid-column: 6 / span 7; }
  .portrait__kreis { width: min(100%, 17rem); box-shadow: 0 0 0 14px var(--weiss); }
  .anker--vor, .anker--nach { left: 50%; }
  .anker--vor { top: -4rem; }
  .anker--nach { bottom: -4rem; }

  .stimmen { gap: 1.25rem; }
}

/* --------------------------------------------------------------------------
   Fußzeile
   -------------------------------------------------------------------------- */
.fuss { border-top: 1px solid var(--linie); position: relative; z-index: 1; background: var(--weiss); }
.fuss__innen {
  max-width: 78rem; margin-inline: auto;
  padding: 2.25rem 1.25rem 2.75rem calc(0.75rem + var(--rinne));
  display: grid; gap: 0.75rem; font-size: 0.92rem; color: var(--grau);
}
@media (min-width: 64rem) { .fuss__innen { padding-inline: 2rem; } }
.fuss__logo { height: 3rem; width: auto; margin-left: -0.55rem; }
.fuss nav { display: flex; gap: 1.25rem; }
.fuss nav a { color: var(--tinte); }
.fuss__hinweis { font: 400 0.75rem/1.4 var(--mono); }

/* Bewegung */
@media (prefers-reduced-motion: no-preference) {
  .knopf, .faq summary { transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
}