/* ==========================================================================
   Entwurf A „Manuskript“
   Schmale Lesespalte wie ein Manuskript, der rote Faden links mit Knoten an
   jedem Kapitel, Nummerierung wie eine Gliederung, Randnotizen rechts.
   ========================================================================== */

/* 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 {
  --papier: #F6F7F9;
  --blatt: #FFFFFF;
  --tinte: #1B2433;
  --grau: #5E616B;
  --linie: #D9DDE4;
  --rot: #C0282D;
  --rot-dunkel: #A21F24;
  --rot-zart: #F6E3E3;

  --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;

  --rand: 2rem;          /* Randspalte, in der der Faden läuft */
  --spalte: 42rem;       /* Lesespalte */
  --notiz: 12rem;        /* Randnotizen rechts (Desktop) */
  --kopf-h: 4rem;
}
@media (min-width: 48rem) {
  :root { --rand: 4.5rem; --kopf-h: 4.75rem; }
}

/* Grundlagen */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-h) + 1.5rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font: 400 1.0625rem/1.65 var(--sans);
  font-kerning: normal;
}
@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.2; margin: 0; text-wrap: balance; }
p, ol, ul, dl, 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.82em; 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; }

/* --------------------------------------------------------------------------
   Kopfzeile
   -------------------------------------------------------------------------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246, 247, 249, 0.94);
  -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: 64rem; margin-inline: auto;
  min-height: var(--kopf-h);
  padding: 0.35rem 1rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.marke { margin-right: auto; margin-left: -0.55rem; flex: none; }
.marke img { height: 2.9rem; width: auto; }
@media (min-width: 48rem) { .marke img { height: 3.4rem; } }

.hauptnav { display: flex; gap: 0.15rem 1.25rem; flex-wrap: wrap; font-size: 0.98rem; }
.hauptnav a { text-decoration: none; color: var(--grau); padding-block: 0.35rem; border-bottom: 2px solid transparent; }
.hauptnav a:hover, .hauptnav a.ist-aktiv { color: var(--tinte); border-bottom-color: var(--rot); }

/* Ohne JavaScript: Navigation als Zeile unter dem Logo */
@media (max-width: 61.99rem) {
  .kopf__innen { flex-wrap: wrap; }
  .hauptnav { order: 3; width: 100%; padding-bottom: 0.35rem; overflow-x: auto; flex-wrap: nowrap; }
  .hauptnav a { white-space: nowrap; }
  /* Mit JavaScript: aufklappbares „Inhalt“-Menü */
  .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(--papier); border-bottom: 1px solid var(--linie);
    padding: 0.5rem 1rem 1rem calc(1rem + var(--rand));
    counter-reset: menue;
  }
  .js .hauptnav.ist-offen { display: flex; }
  .js .hauptnav a {
    font-family: var(--serif); font-size: 1.2rem; color: var(--tinte);
    padding: 0.7rem 0; border-bottom: 1px solid var(--linie);
  }
  .js .hauptnav a:last-child { border-bottom: 0; }
  .js .menue-knopf { display: inline-flex; }
}
@media (min-width: 62rem) {
  .hauptnav { margin-right: 0.75rem; }
}

.menue-knopf {
  display: none; align-items: center; gap: 0.5rem;
  font: 600 0.95rem/1 var(--sans); color: var(--tinte);
  background: transparent; border: 1px solid var(--linie); border-radius: 4px;
  min-height: 2.75rem; padding: 0 0.8rem; cursor: pointer;
}
.menue-knopf[hidden] { display: none !important; }
.menue-knopf__linien, .menue-knopf__linien::before, .menue-knopf__linien::after {
  display: block; width: 1rem; height: 2px; background: var(--rot); border-radius: 1px; position: relative;
}
.menue-knopf__linien::before, .menue-knopf__linien::after { content: ""; position: absolute; left: 0; }
.menue-knopf__linien::before { top: -5px; width: 0.7rem; }
.menue-knopf__linien::after { top: 5px; width: 0.85rem; }
.menue-knopf[aria-expanded="true"] { border-color: var(--rot); }

/* --------------------------------------------------------------------------
   Knöpfe
   -------------------------------------------------------------------------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.9rem; padding: 0.65rem 1.3rem;
  font: 600 1rem/1.2 var(--sans); text-decoration: none; text-align: center;
  border-radius: 4px; 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); background: transparent; }
.knopf--rahmen:hover { background: var(--rot-zart); color: var(--tinte); }
.knopf--gross { font-size: 1.1rem; min-height: 3.4rem; padding-inline: 1.75rem; }
.knopf--kopf { min-height: 2.75rem; padding: 0.5rem 0.75rem; }
.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 { padding-inline: 1rem; }
  .knopf--kopf .icon { display: none; }
  .knopf--kopf .knopf__text { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}

/* --------------------------------------------------------------------------
   Manuskript: Lesespalte mit Faden links
   -------------------------------------------------------------------------- */
.manuskript {
  position: relative;
  max-width: 64rem; margin-inline: auto;
  padding: 0 1.25rem 2rem calc(1rem + var(--rand));
  counter-reset: kapitel;
}
@media (min-width: 72rem) {
  .manuskript { padding-right: calc(var(--notiz) + 3rem + 1rem); }
}
.manuskript > * { max-width: var(--spalte); }

/* Der Faden */
.faden {
  position: absolute; top: 0; bottom: 0;
  left: calc(1rem + var(--rand) / 2 - 1px);
  width: 2px; background: var(--linie);
}
.faden__fortschritt {
  position: absolute; inset: 0;
  background: var(--rot); border-radius: 2px;
  transform-origin: top center; transform: scaleY(var(--p, 1));
}

/* Hero */
.hero { position: relative; padding: 3rem 0 3.5rem; display: grid; gap: 1.25rem; }
@media (min-width: 48rem) { .hero { padding: 5.5rem 0 5rem; gap: 1.5rem; } }
.hero::before { /* Anfangsknoten */
  content: ""; position: absolute; top: 3.35rem;
  left: calc(var(--rand) / -2 - 7px);
  width: 14px; height: 14px; border-radius: 50%; background: var(--rot);
  box-shadow: 0 0 0 5px var(--papier);
}
@media (min-width: 48rem) { .hero::before { top: 5.85rem; } }
.kicker { font: 500 0.8rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--rot); }
.hero h1 { font-size: clamp(2.15rem, 1.4rem + 3.6vw, 3.6rem); letter-spacing: -0.015em; line-height: 1.12; }
.lead { font-size: 1.15rem; color: var(--grau); max-width: 38rem; }
@media (min-width: 48rem) { .lead { font-size: 1.25rem; } }
.lead--betont { color: var(--tinte); font-family: var(--serif); font-weight: 500; font-size: 1.2rem; line-height: 1.5; }
@media (min-width: 48rem) { .lead--betont { font-size: 1.35rem; } }
.aktionen { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }
.fakten { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0; font: 400 0.82rem/1.5 var(--mono); color: var(--grau); }
.fakten li + li::before { content: "·"; color: var(--rot); margin-inline: 0.6rem; }

/* --------------------------------------------------------------------------
   Kapitel mit Knoten und Gliederungsnummern
   -------------------------------------------------------------------------- */
.kapitel {
  position: relative;
  padding-block: 3.25rem;
  border-top: 1px solid var(--linie);
  display: grid; gap: 1.25rem;
  counter-increment: kapitel; counter-reset: unter;
}
@media (min-width: 48rem) { .kapitel { padding-block: 4.75rem; gap: 1.5rem; } }
.kapitel::before { /* Knoten auf dem Faden */
  content: ""; position: absolute; top: calc(3.25rem + 0.15rem);
  left: calc(var(--rand) / -2 - 7px);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--rot); border: 2px solid var(--rot);
  box-shadow: 0 0 0 5px var(--papier);
  transition: background-color 0.4s ease, transform 0.4s ease;
}
@media (min-width: 48rem) { .kapitel::before { top: calc(4.75rem + 0.15rem); } }
.js .kapitel::before { background: var(--papier); transform: scale(0.85); }
.js .kapitel.ist-erreicht::before { background: var(--rot); transform: scale(1); }

.kapitel__kopf { display: grid; gap: 0.6rem; }
.kapitel__label { font: 500 0.8rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--rot); }
.kapitel__label::before { content: counter(kapitel) "\2003"; }
.kapitel h2 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.3rem); letter-spacing: -0.01em; }
.einleitung { color: var(--grau); }
.kapitel h3 { font-size: 1.2rem; }
@media (min-width: 48rem) { .kapitel h3 { font-size: 1.3rem; } }

/* Randnotizen */
.randnotiz {
  font: 400 0.8rem/1.55 var(--mono); color: var(--grau);
  padding-left: 0.85rem; border-left: 2px solid var(--rot-zart);
}
.randnotiz--bild { display: none; }
@media (min-width: 72rem) {
  .randnotiz {
    position: absolute; top: calc(4.75rem + 2.1rem);
    left: calc(100% + 3rem); width: var(--notiz);
  }
  .hero .randnotiz--bild { display: block; top: 5.5rem; padding-left: 0; border-left: 0; }
}
.randnotiz--bild figcaption { margin-top: 0.6rem; font: 400 0.78rem/1.4 var(--mono); color: var(--grau); }

/* Leistungen als Inhaltsverzeichnis */
.leistung { display: grid; gap: 0.75rem; counter-increment: unter; counter-reset: punkt; margin-top: 1rem; }
.leistung h3::before, .situation h3::before, .schritt h3::before {
  content: counter(kapitel) "." counter(unter);
  display: block; margin-bottom: 0.35rem;
  font: 500 0.8rem/1 var(--mono); letter-spacing: 0.04em; color: var(--rot);
}
.leistung__unterzeile { font-family: var(--mono); font-size: 0.85rem; color: var(--grau); margin-top: -0.35rem; }

.verzeichnis { list-style: none; padding: 0; margin-top: 0.5rem; border-top: 1px solid var(--linie); }
.verzeichnis li {
  counter-increment: punkt;
  display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); column-gap: 0.25rem;
  padding: 0.8rem 0; border-bottom: 1px solid var(--linie);
}
.verzeichnis li::before {
  content: counter(kapitel) "." counter(unter) "." counter(punkt);
  grid-row: 1 / span 2;
  font: 400 0.8rem/1.9 var(--mono); color: var(--rot);
}
.verzeichnis__zeile { display: flex; align-items: baseline; gap: 0.6rem; min-width: 0; }
.verzeichnis__titel { font-weight: 600; }
.verzeichnis__punkte { flex: 1 1 1.5rem; min-width: 1.5rem; border-bottom: 2px dotted #B9BFCA; transform: translateY(-0.28em); }
.verzeichnis__phase { font: 400 0.78rem/1 var(--mono); color: var(--grau); white-space: nowrap; }
.verzeichnis__text { color: var(--grau); font-size: 0.98em; }

.grundsatz {
  margin-top: 1.25rem;
  background: var(--rot-zart); border-left: 3px solid var(--rot);
  padding: 1.25rem 1.4rem; border-radius: 0 4px 4px 0;
  display: grid; gap: 0.4rem;
}
.grundsatz__titel { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; }

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

/* Ablauf */
.schritte { list-style: none; padding: 0; display: grid; gap: 0; margin-top: 0.25rem; }
.schritt {
  counter-increment: unter;
  display: grid; gap: 0.4rem;
  padding: 1.25rem 0 1.25rem 1.25rem;
  border-left: 1px dashed #B9BFCA;
  position: relative;
}
.schritt::before { /* kleiner Knoten am Schritt */
  content: ""; position: absolute; left: -4px; top: 1.6rem;
  width: 7px; height: 7px; border-radius: 50%; background: var(--rot);
}
.schritt p { color: var(--grau); }

/* Über mich */
.person { display: grid; gap: 1.5rem; }
@media (min-width: 40rem) { .person { grid-template-columns: 13rem minmax(0, 1fr); gap: 2rem; align-items: start; } }
.person__text { display: grid; gap: 1rem; }
.portrait { max-width: 18rem; }

.bildplatzhalter {
  aspect-ratio: 4 / 5; width: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 0.4rem;
  padding: 1rem;
  background:
    repeating-linear-gradient(135deg, transparent 0 10px, rgba(192, 40, 45, 0.06) 10px 11px),
    var(--blatt);
  border: 1px dashed #B9BFCA; border-radius: 4px;
  color: var(--grau);
}
.bildplatzhalter__titel { font: 500 0.8rem/1.3 var(--mono); color: var(--rot-dunkel); }
.bildplatzhalter__text { font-size: 0.82rem; line-height: 1.45; }
.bildplatzhalter--klein .bildplatzhalter__text { font-size: 0.75rem; }

.werdegang__titel { margin-top: 1rem; }
.werdegang { list-style: none; padding: 0; border-top: 1px solid var(--linie); }
.werdegang li {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.2rem;
  padding: 0.85rem 0; border-bottom: 1px solid var(--linie);
}
@media (min-width: 40rem) { .werdegang li { grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; } }
.werdegang__zeit { font: 400 0.85rem/1.8 var(--mono); color: var(--grau); }
.werdegang__inhalt strong { display: block; }
.werdegang__inhalt { color: var(--grau); }
.werdegang__inhalt strong { color: var(--tinte); }

/* Kundenstimmen als Anmerkungen */
.stimmen { list-style: none; padding: 0; display: grid; gap: 1rem; }
.stimme {
  counter-increment: unter;
  position: relative;
  background: var(--blatt); border: 1px solid var(--linie); border-radius: 4px;
  padding: 1.25rem 1.25rem 1.1rem 3.25rem;
  display: grid; gap: 0.6rem;
}
.stimme::before {
  content: "[" counter(unter) "]";
  position: absolute; left: 1.1rem; top: 1.3rem;
  font: 500 0.85rem/1.4 var(--mono); color: var(--rot);
}
.stimme blockquote { font-family: var(--serif); font-weight: 500; font-size: 1.1rem; line-height: 1.5; }
.stimme__quelle { font-size: 0.9rem; color: var(--grau); }
.stimme__quelle::before { content: "— "; }

/* Vorträge als Literaturverzeichnis */
.vortraege { list-style: none; padding: 0; display: grid; gap: 0.9rem; }
.vortraege li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.75rem; align-items: baseline; }
.vortraege__jahr { justify-self: start; }

/* Häufige Fragen */
.faq { border-top: 1px solid var(--linie); }
.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: 1rem 0; font-weight: 600; font-size: 1.05rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 500 1.1rem/1 var(--mono); color: var(--rot); flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--rot-dunkel); }
.faq details p { color: var(--grau); padding: 0 2rem 1.25rem 0; }

/* Kontakt */
.kapitel--kontakt { padding-bottom: 5rem; }
.hinweis { font-size: 0.95rem; color: var(--grau); }
.kontaktliste { border-top: 1px solid var(--linie); margin-top: 0.5rem; }
.kontaktliste > div {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem;
  padding: 0.75rem 0; border-bottom: 1px solid var(--linie);
}
.kontaktliste > div[hidden] { display: none; }
.kontaktliste dt { font: 400 0.82rem/1.5 var(--mono); color: var(--grau); min-width: 7rem; }
.kontaktliste dd { margin: 0; font-weight: 600; }
.kontaktliste a { text-decoration-color: var(--rot); }

/* --------------------------------------------------------------------------
   Fußzeile
   -------------------------------------------------------------------------- */
.fuss { border-top: 1px solid var(--linie); background: var(--blatt); }
.fuss__innen {
  max-width: 64rem; margin-inline: auto;
  padding: 2rem 1.25rem 2.5rem calc(1rem + var(--rand));
  display: grid; gap: 0.75rem; font-size: 0.92rem; color: var(--grau);
}
.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: nur wenn erwünscht
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .knopf, .hauptnav a, .faq summary { transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
  .js .faden__fortschritt { will-change: transform; }
}
@media (prefers-reduced-motion: reduce) {
  .kapitel::before { transition: none; }
}