/*
  base.css — strukturelles Grundgerüst, identisch über alle drei Richtungen.
  Alles Visuelle kommt aus Custom Properties, die tokens.css (Farbe/Typo) und
  direction.css (Layout-Rhythmus, Matrix-Behandlung) je Richtung definieren.
  Erwartete Custom Properties (siehe tokens.css jeder Richtung):
    --color-bg, --color-bg-alt, --color-text, --color-text-muted, --color-border,
    --color-accent, --color-accent-text,
    --matrix-q1..q4, --matrix-grid-line,
    --mentoring-bg, --mentoring-text, --mentoring-text-muted, --mentoring-accent,
    --font-display, --font-text
*/

:root {
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 6rem;
  --space-8: 9rem;

  --measure: 42rem; /* 16.07.2026: einheitliche Textspalten-Breite site-weit (war 65ch, kollidierte mit den separat gepflegten 40rem/42rem-Werten von Hero/Signatur/CTA-Blöcken). 31.07.2026, Konsistenzpass: von 40rem auf 42rem angehoben – neuer Grundraster-Zielbereich Lesespalte 42–44rem, Modulbreite bleibt bei --container-width (71rem, schon im Zielbereich 68–72rem). */
  /* 18.07.2026, Sammelauftrag X Teil 3a (Option C, Heiko-Freigabe): von 72rem auf 71rem
     verengt, um die Linkslastigkeit auf breiten Viewports abzumildern. Wert exakt ermittelt:
     die Hauptnav (Playwright-Bisektion bei 1920px Viewportbreite) bricht bei ≤69rem in zwei
     Zeilen um, bleibt ab 69.5rem einzeilig – 71rem lässt ca. 1,5rem Sicherheitsabstand zu
     diesem Umbruchpunkt. Rest-Linkslastigkeit bewusst akzeptiert (Heiko), wird später über
     den Über-mich-Porträt-Split bzw. einen Hero-Split gefüllt, nicht durch weiteres Verengen. */
  --container-width: 71rem;

  /* direction.css darf diese überschreiben (Layout-Persönlichkeit) */
  --radius: 0.25rem;
  --card-border: 1px solid var(--color-border);
  --card-shadow: none;
  /* Konsistenzpass 04.08.2026: von --space-7 (6rem) auf --space-6 (4.5rem) gesenkt –
     ~25% weniger Luft zwischen dem Ende einer Sektion und der Überschrift der
     nächsten (Summe aus beidseitigem padding-block). Gilt einheitlich für alle
     Breiten (rem-basiert, keine separate Mobile-Ausnahme nötig). */
  --section-rhythm: var(--space-6);
  /* Neuer zweiter Rhythmus-Schritt (Konsistenzpass 04.08.2026): enger Abstand
     zwischen einer Einleitung und dem unmittelbar folgenden Inhalt derselben
     Sektion (Matrix, Kartenraster, Belegblock) – ersetzt die bisher uneinheitlich
     zwischen --space-4 und --space-5 schwankenden Einzelwerte (s. .matrix-intro,
     .paths-lede, .proof-intro). */
  --gap-tight: var(--space-4);
}

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

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

/* Sticky Footer (04.08.2026, letzter Layout-/Inhaltsnachzug): body als Flex-Spalte
   über die volle Viewporthöhe, #main wächst (flex-grow) und füllt den Rest –
   Header/Footer behalten ihre natürliche Höhe. Damit steht der Footer auf kurzen
   Seiten (Impulse ohne Posts, Impressum/Datenschutz als Platzhalter) am unteren
   Viewportrand, ohne feste Höhen pro Seite. Gilt site-weit inkl. body.mentoring
   (eigenes Template, aber dieselbe body>header/main>footer-Struktur). */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-text);
  font-size: 1.125rem; /* 18px – innerhalb 16–20px-Vorgabe */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1 0 auto;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 var(--space-3);
  letter-spacing: var(--tracking-display, 0);
  color: var(--color-text);
}

/* Typ-Skala geschärft (30.07.2026, Designpass B): H1/H2 vorher zu nah beieinander
   (H1 max 56px, H2 max 38px) und auf mobilen/schmalen Breiten zu klein für eine klare
   Hierarchie. H1 hier ist die SUBPAGE-Größe (Seitenköpfe F&L/Zusammenarbeit/Über
   mich/Kontakt) – der Hero auf der Startseite bekommt eine eigene, größere Regel
   weiter unten (.hero h1), direction.css überschreibt dieses h1 sonst site-weit. */
h1 { font-size: clamp(2.25rem, 1.9rem + 1.5vw, 3rem); font-weight: 500; }
h2 { font-size: clamp(1.75rem, 1.5rem + 0.9vw, 2rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); }

p {
  margin: 0 0 var(--space-3);
  max-width: var(--measure);
}

p:last-child { margin-bottom: 0; }

a {
  color: var(--color-accent);
  text-underline-offset: 0.15em;
}

ul { margin: 0; padding: 0; }
li { list-style: none; }

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

/* -- Fokus & Bewegung (Barrierefreiheit) ------------------------------- */

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

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

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -3rem;
  background: var(--color-accent);
  color: var(--color-accent-text);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  transition: top 0.15s ease;
  z-index: 100;
}
.skip-link:focus { top: var(--space-2); }

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

.container {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

section {
  padding-block: var(--section-rhythm);
}

.prose { max-width: var(--measure); }

/* Listen in Fließtext-Inhalten (12.08.2026, Heiko-Feedback): die site-weiten
   Resets `ul { margin:0; padding:0; }` / `li { list-style:none; }` (s. o.)
   sind für UI-Listen gedacht (Nav, Footer-Links, Karten-Grids), nicht für
   echte Inhaltslisten. Ein Blog-Post mit einer im Editor eingegebenen
   Aufzählung erschien dadurch ohne Bullets, ohne Einrückung und ohne Abstand
   zwischen den Punkten – reine Absatzoptik. Diese Klasse+Element-Selektoren
   (Spezifität 0,1,1) stechen die reinen Element-Selektoren (0,0,1) automatisch,
   kein !important nötig. Gilt für .prose allgemein (Impulse-Artikel UND
   generische Seiten wie /datenschutz/, die ebenfalls Listen im Content haben
   können), nicht nur für Blog-Posts. */
.prose ul,
.prose ol {
  margin: 0 0 var(--space-3);
  padding-left: 1.375em;
}
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li {
  list-style: inherit;
  margin-bottom: var(--space-2);
}
.prose li:last-child { margin-bottom: 0; }

/* -- Kopfzeile ----------------------------------------------------------*/

.site-header {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-2);
}

.brand {
  display: flex;
  align-items: center;
}

.brand-logo {
  height: 2.5rem;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.main-nav ul {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.main-nav a {
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.95rem;
}
.main-nav a:hover { color: var(--color-accent); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-text);
  border-radius: 1px;
}

/* Ohne JS bleibt die Nav wie bisher sichtbar (flex-wrap) – der Toggle-Button
   existiert dann gar nicht erst (siehe .js-Gate unten), kein totes Element. */
@media (max-width: 47.9375rem) {
  .js .nav-toggle { display: flex; }

  .js .main-nav ul {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-3);
    gap: var(--space-3);
  }

  .js .main-nav ul.is-open { display: flex; }

  .js .site-header .container { position: relative; }
}

/* -- Buttons / CTA -------------------------------------------------------*/

/* display:inline-flex statt inline-block (31.07.2026, Konsistenzpass): einheitliche
   Text-/Icon-Ausrichtung für alle Buttons site-weit, insbesondere die jetzt fünf
   externen Termin-CTAs mit .external-link-icon danach – verhält sich für reine
   Text-Buttons identisch zu inline-block, macht .kontakt-cta als separate
   Alignment-Klasse überflüssig (dort belassen, keine Ghost-Content-Änderung nötig). */
.btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  padding: 0.85em 1.6em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-accent-text);
}

.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-accent);
}

.btn-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-accent);
  font-weight: 600;
}
.btn-link::after { content: " →"; }

/* -- Block 1: Hero --------------------------------------------------------*/

.hero .container {
  display: grid;
  gap: var(--space-5); /* 30.07.2026, Designpass C: etwas mehr Luft zwischen Text- und Bildspalte */
}

/* Textbreite direkt auf den Elementen begrenzt, nicht auf .container (17.07.2026-Fix,
   s. direction.css) – .hero-sub hat mit 42ch bereits ihre eigene, etwas engere Grenze. */
#hero-title,
.hero-eyebrow,
.hero-authority,
.hero-cta {
  max-width: var(--measure);
}

.hero-eyebrow {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-2);
}

/* .kicker – generische Label-Überschrift (Sammelauftrag VI Block A/B4, 16.07.2026):
   Versal-Kicker-Optik kommt aus direction.css (font-family/uppercase/letter-spacing),
   hier nur die richtungsunabhängigen Basiseigenschaften. */
.kicker {
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.hero-sub {
  font-size: 1.25rem;
  color: var(--color-text-muted);
  max-width: 42ch;
}

.hero-authority {
  margin-top: var(--space-4);
  font-size: 0.95rem;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-2);
  display: inline-block;
}

.hero-cta { margin-top: var(--space-4); }

/* -- Block 2: Diagnose -----------------------------------------------------*/

.diagnose-list li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: var(--space-2);
  max-width: var(--measure);
}
.diagnose-list li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--color-accent);
}

.diagnose-people {
  margin-top: var(--space-5);
  font-size: 1.15rem;
}

/* -- Block 3: Matrix --------------------------------------------------------*/

.matrix-intro { max-width: var(--measure); margin-bottom: var(--gap-tight); }

/* Korrektur 30.07.2026 (Raster-Vereinheitlichung nach Designpass B): die erste
   Designpass-B-Fassung hatte hier 46rem gesetzt ("breiter als die Textspalte") –
   das war eine dritte, unsystematische Zwischen-Breite, weder Lesespalte (--measure,
   40rem) noch volle Modulfläche (Container-Innenbreite, ~68rem). Per Vermessung
   (Playwright bounding_box, 1440px) bestätigt: Karten/Fakten-Band/Testimonials/
   Belege-Grid liegen alle exakt auf der vollen Modulfläche, nur die Matrix wich ab.
   Jetzt gilt: Matrix zählt zu den „breiten Modulflächen" (PLAN-WEBSITE Grundraster-
   Regel) wie Karten/Testimonials/Belege – kein eigener max-width mehr, sie füllt
   dieselbe Breite wie diese.
   Revidiert 04.08.2026 (Konsistenzpass Punkt 6): auf Desktop wirkte die Matrix
   gegenüber Diagnose-Liste/Karten/Belegblock überdimensioniert. Ab 60rem Breite
   jetzt ein eigener max-width (~22.5% schmaler als die volle Modulfläche, innerhalb
   der geforderten 20–25%-Spanne), linksbündig wie alles andere (keine Zentrierung).
   Die SVG-Labels würden mit der Grafik sonst unkontrolliert mitschrumpfen (Größe
   ist an den viewBox-Maßstab gekoppelt) – deshalb werden die drei Label-Schriftgrößen
   im selben Breakpoint gegenläufig hochskaliert (Faktor 71/55 ≈ 1.29), damit die
   Beschriftung in Pixeln genauso groß bleibt wie vorher, nur die Grafik selbst
   schrumpft. Mobile bleibt unverändert (volle Breite, ursprüngliche Schriftgrößen). */
.matrix-figure {
  margin: 0 0 var(--space-5);
}

@media (min-width: 60rem) {
  .matrix-figure { max-width: 55rem; }
}

.matrix-outro { max-width: var(--measure); }

.matrix-svg .quadrant-label {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 15px;
  fill: var(--color-text);
}

.matrix-svg .axis-label {
  font-family: var(--font-text);
  font-size: 12px;
  letter-spacing: 0.03em;
  fill: var(--color-text-muted);
}

.matrix-svg .axis-endpoint {
  font-family: var(--font-text);
  font-size: 10.5px;
  fill: var(--color-text-muted);
}

/* Kompensations-Regel muss NACH allen drei Basis-Deklarationen stehen (gleiche
   Spezifität, Kaskaden-Reihenfolge entscheidet) – sonst gewinnt fälschlich die
   unconditional .axis-endpoint-Basisregel auf Desktop. */
@media (min-width: 60rem) {
  .matrix-svg .quadrant-label { font-size: 19px; }
  .matrix-svg .axis-label { font-size: 15.5px; }
  .matrix-svg .axis-endpoint { font-size: 13.5px; }
}

.matrix-svg .axis-line { stroke: var(--matrix-grid-line); stroke-width: 1; }
.matrix-svg .outer-line { stroke: var(--color-border); stroke-width: 1; fill: none; }
/* Akzent-Quadrant ("Handlungsfähig") sitzt auf der Akzentfarbe – helle statt
   dunkler Textfarbe für Kontrast (Masterkonzept §1.4: ein Akzentquadrant) */
.matrix-svg .quadrant-label.on-accent { fill: var(--color-accent-text); }

/* -- Block 4: Zwei Pfade -----------------------------------------------------*/

.paths-lede { margin-bottom: var(--gap-tight); }

/* Randbündig mit der Selfcheck-Kachel darunter (04.08.2026): die Selfcheck-Kachel
   (.selfcheck-teaser .container) trägt Karten-Optik direkt auf dem Container, ihre
   Außenkante ist deshalb die volle .container-Randbreite. Die Pfad-Karten hier sitzen
   dagegen als Kind-Element INNERHALB des gepolsterten .container-Inhaltsbereichs und
   liegen dadurch beidseitig um --space-3 (die Container-Innenpolsterung) enger als die
   Selfcheck-Kachel. Negative margin-inline im exakten Gegenwert von --space-3 gleicht
   das aus – dieselbe Technik wie .kg-width-wide/.kg-width-full, nur bis zur
   Container-Kante statt bis zur Viewport-Kante. */
.two-paths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-4);
  margin-inline: calc(-1 * var(--space-3));
}

.path-card {
  background: var(--color-bg-alt);
  border: var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: var(--space-4);
}

.path-eyebrow {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

/* -- Block 5: Selbstcheck-Teaser ---------------------------------------------*/

.selfcheck-teaser {
  background: var(--color-bg-alt);
  border: var(--card-border);
  border-radius: var(--radius);
}

.selfcheck-teaser .container {
  padding-block: var(--space-5);
  text-align: center;
}

/* Textbreite auf den Elementen, nicht auf .container (17.07.2026-Fix, s. direction.css
   und Hero-Kommentar dort) – sonst sitzt der Block flush an der wahren Seitenkante
   statt an der Kante des zentrierten Standard-Containers. */
.selfcheck-teaser h2,
.selfcheck-teaser p {
  max-width: var(--measure);
  margin-inline: 0;
}

/* -- Block 6: Proof ---------------------------------------------------------*/

.proof-intro { max-width: var(--measure); margin-bottom: var(--gap-tight); }

/* Randbündig mit der Selfcheck-Kachel (04.08.2026): dieselbe Begründung/Technik wie
   bei .two-paths oben – gleicht die --space-3-Innenpolsterung des umgebenden
   .container aus, damit die vier Belege-Spalten links/rechts exakt so breit
   auslaufen wie die Selfcheck-Kachel darüber im Layout. */
.facts-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  margin-bottom: var(--space-5);
  margin-inline: calc(-1 * var(--space-3));
}

.facts-band dt {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: 0.3em;
}

.facts-band dd { margin: 0; font-size: 0.98rem; }

/* Testimonial-Vorspann (11.08.2026, finaler Copy-Pass; 12.08.2026 auf
   Heiko-Wunsch von fett auf normal geändert): kurze Einleitungszeile
   direkt vor der Testimonial-Reihe. */
.testimonials-intro {
  margin-bottom: var(--space-3);
}

.testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--space-4);
}

.testimonial blockquote {
  margin: 0 0 var(--space-2);
  font-style: italic;
  color: var(--color-text-muted);
}

.testimonial cite {
  font-style: normal;
  font-size: 0.9rem;
}

/* -- Block 7: Signatur-Zeile --------------------------------------------------*/
/* 31.07.2026, Konsistenzpass: eigenständiges dunkles Band (Mentoring-Palette), damit
   es sich klar vom folgenden hellen Footer-CTA-Band absetzt (vorher beide identisch
   hell – wirkten als eine zusammenhängende Fläche). H2 "90 Tage Executive Mentoring"
   ist hartkodiert im Template (s. home.hbs), Ghost-Text/Link unverändert. */
.signature {
  background: var(--mentoring-bg);
  color: var(--mentoring-text);
}

.signature .container {
  text-align: center;
}

.signature h2 { color: var(--mentoring-text); }

.signature p {
  max-width: var(--measure);
  margin-inline: 0;
  font-size: 1.25rem;
  color: var(--mentoring-text-muted);
}

.signature a { color: var(--mentoring-accent); }

/* -- Block 8: Footer-CTA + Footer ----------------------------------------------*/

.footer-cta {
  background: var(--color-bg-alt);
  text-align: center;
}

.footer-cta h2,
.footer-cta p {
  max-width: var(--measure);
  margin-inline: 0;
}

/* Footer-CTA-Band auf alle Unterseiten ausgeweitet (18.07.2026, Sammelauftrag X Teil 3b,
   Heiko-Freigabe): derselbe --color-bg-alt-Bandton wie hier auf der Startseite, angewendet
   auf den jeweils letzten Abschnitt jeder Unterseite – schließt das fehlende Abschluss-
   Signal, das diese Seiten bis dahin nicht hatten. Linksbündig (nicht text-align: center
   wie .footer-cta), da die Unterseiten site-weit der Linksbündig-Regel folgen. */
.fl-beat6,
.za-beat6,
.um-block5,
.kontakt-content {
  background: var(--color-bg-alt);
}

.site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-4);
  font-size: 0.9375rem; /* 15px – Lesbarkeits-Floor für Footertext, Designpass B (war 14.4px) */
  color: var(--color-text-muted);
}

.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  justify-content: space-between;
  align-items: center;
}

.footer-legal ul { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.footer-legal a { color: var(--color-text-muted); }

/* Trackerfrei-Zeile (23.07.2026, Sammelauftrag XIII Teil 3): Satz und Rechtslinks
   in einer Zeile, kein eigener Block – .footer-legal-row ist der gemeinsame
   Flex-Layout-Baustein im EINEN globalen Footer-Partial (31.07.2026, Konsistenz-
   pass Punkt 6 – vorher zwei komplett getrennte Footer-Markups). Auf Mobile darf
   der Satz über die Links umbrechen (flex-wrap), der Trennpunkt bleibt am
   Nav-Element (::before), damit er nie isoliert umbricht. */
.footer-legal-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
}

.footer-trackerfrei { margin: 0; }

.footer-legal-row .footer-legal {
  display: flex;
  align-items: baseline;
}

.footer-legal-row .footer-legal::before {
  content: "·";
  margin-right: var(--space-3);
}

/* Alleinstehender Trenner auf schmalen Viewports entfernt (04.08.2026, letzter
   Layout-/Inhaltsnachzug): sobald .footer-legal auf eine eigene Zeile umbricht,
   stand der „·" isoliert am Zeilenanfang. Rein über CSS gelöst – der bestehende
   `gap` auf .footer-legal-row übernimmt den Zeilenabstand, keine JS-Erkennung
   nötig. Breakpoint identisch zum bestehenden Mobile-Nav-Umbruch. */
@media (max-width: 47.9375rem) {
  .footer-legal-row .footer-legal::before {
    content: none;
    margin-right: 0;
  }
}

.gernperdu { width: 100%; margin-top: var(--space-2); }

/* -- /leistungsfaehigkeit: Angebotsseite Säule 2 (page-leistungsfaehigkeit.hbs) --*/

/* Zentrierung zurückgebaut, 16.07.2026 (Sammelauftrag VI Block C2, vorgezogen für die
   B5-Preview): Teil derselben Linksbündig-Regel wie die Startseite. */
.fl-page-header { padding-bottom: var(--space-3); }
.fl-page-header h1 { max-width: var(--measure); }

/* .beat-title: generische Alias-Klasse für sichtbare Satz-Überschriften auf anderen
   Angebotsseiten (17.07.2026, Auftrag IX) – .fl-beat-title bleibt unverändert, damit
   das laufende F&L-Template nicht angefasst werden muss. */
.fl-beat-title,
.beat-title {
  max-width: var(--measure);
  margin-bottom: var(--space-3);
}

.fl-symptom-list li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: var(--space-2);
}
.fl-symptom-list li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--color-accent-secondary);
}

.fl-closing {
  margin-top: var(--space-5);
  font-size: 1.15rem;
  max-width: var(--measure);
}

.fl-haltung-item {
  max-width: var(--measure);
  margin-bottom: var(--space-2);
}

.fl-schlusssatz {
  margin-top: var(--space-4);
  max-width: var(--measure);
}

.fl-arbeitsweise-list {
  max-width: var(--measure);
  padding-left: 1.4em;
}
.fl-arbeitsweise-list li {
  list-style: decimal;
  margin-bottom: var(--space-3);
  padding-left: 0.3em;
}

.fl-offers { margin-top: var(--space-2); }

.fl-offer-card {
  background: var(--color-bg-alt);
  border: var(--card-border);
  border-top: 4px solid var(--color-accent-secondary); /* 3px→4px, Designpass B */
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: var(--space-4);
}

.fl-offer-audit {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.fl-offer-addon {
  background: var(--color-bg-alt);
  border: var(--card-border);
  border-top: none;
  border-radius: var(--radius);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: 0.9375rem; /* 15px – Karten-Lesbarkeits-Floor, Designpass B (war 14.4px) */
  color: var(--color-text-muted);
}

/* Übergangszeile zwischen Anhang-Karte und Folgekarten-Reihe (18.07.2026, Sammelauftrag
   X Teil 2c): bewusst UNKARTIERT, damit sie als Überleitung liest, nicht als Karteninhalt. */
.fl-offer-transition {
  font-weight: 600;
  margin: var(--space-3) 0;
}

.fl-offer-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.fl-offer-row .fl-offer-card h3 { margin-bottom: var(--space-2); }

/* Auffangkategorie "Workshops und Formate nach Maß" (11.08.2026, finaler Copy-Pass +
   neue Angebotsarchitektur Säule 2) – analoge Technik zu .za-format-custom auf
   /zusammenarbeit (schmale Trennregel statt Kartenrahmen, damit die Auffangkategorie
   optisch nicht als drittes gleichrangiges Format neben Hebel-Workshop/10-Wochen-
   Begleitung auftritt), hier in der Kennfarbe Salbeigrün statt Blau, da Säule 2. */
.fl-format-custom {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 2px solid var(--color-accent-secondary);
}
.fl-format-custom h3 { margin-bottom: var(--space-2); }
.fl-format-custom p { max-width: var(--measure); }

.fl-offer-coaching {
  margin-top: var(--space-5); /* Abstand zur Kartenreihe darüber, analog zum Abstand zwischen Audit- und Anhang-Absatz (11.08.2026); seit 12.08.2026 sitzt die Zeile direkt unter den beiden Formatkarten, vor dem grünen Trennstrich zu "Workshops und Formate nach Maß" */
  font-size: 0.95rem;
  color: var(--color-text-muted);
  max-width: var(--measure);
}

.fl-proof-intro, .fl-proof-honesty { max-width: var(--measure); }
.fl-proof-honesty { color: var(--color-text-muted); margin-top: var(--space-2); }

.fl-cta-primary { margin-bottom: var(--space-3); }
.fl-cta-secondary { color: var(--color-text-muted); max-width: var(--measure); }

/* -- Gemeinsamer Seitenkopf (Zusammenarbeit/Über-mich/Kontakt, 17.07.2026, Auftrag IX) -----*/
/* Gleiches Muster wie .fl-page-header (dort nicht umbenannt, um das laufende
   F&L-Template nicht unnötig anzufassen) – neue Seiten nutzen die gemeinsame
   Klasse statt einer eigenen Kopie je Seite. */
.page-header { padding-bottom: var(--space-3); }
.page-header h1 { max-width: var(--measure); }

/* Vertikaler Rhythmus (30.07.2026, Designpass B): Beat 2 ("Es geht auch anders.")
   setzt Beat 1 unmittelbar fort – Problem und Wunschzustand sind eine Denkbewegung,
   kein Kapitelwechsel. Weniger Abstand nach oben; nach unten bleibt der volle
   Rhythmus, weil dort ein echter Themenwechsel folgt (Haltung/Arbeitsweise). */
.fl-beat2, .za-beat2 { padding-top: var(--space-4); }

/* -- /zusammenarbeit: Angebotsseite Säule 1 (page-zusammenarbeit.hbs, 17.07.2026) ----------*/

.za-symptom-list li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: var(--space-2);
}
.za-symptom-list li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--color-accent);
}

.za-closing {
  margin-top: var(--space-5);
  font-size: 1.15rem;
  max-width: var(--measure);
}

.za-arbeitsweise-list {
  max-width: var(--measure);
  padding-left: 1.4em;
}
.za-arbeitsweise-list li {
  list-style: decimal;
  margin-bottom: var(--space-3);
  padding-left: 0.3em;
}

.za-formats { margin-top: var(--space-2); }

.za-format-card {
  background: var(--color-bg-alt);
  border: var(--card-border);
  border-top: 4px solid var(--color-accent); /* 3px→4px, Designpass B */
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: var(--space-4);
}

.za-format-shadowing {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.za-format-addon {
  background: var(--color-bg-alt);
  border: var(--card-border);
  border-top: none;
  border-radius: var(--radius);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: 0.9375rem; /* 15px – Karten-Lesbarkeits-Floor, Designpass B (war 14.4px) */
  color: var(--color-text-muted);
}

/* Vier gleichrangige Tagesformate (30.07.2026, Designpass B: explizites 2×2-Raster
   auf normalen Desktopbreiten statt vier schmalen auto-fit-Spalten – bei 71rem
   Containerbreite hätten vier Spalten à min. 14rem bequem nebeneinander gepasst,
   das wirkte als "vier schmale Spalten" statt als geordnetes Raster). Mobil/schmal:
   eine Spalte gestapelt. */
.za-format-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
@media (min-width: 48rem) {
  .za-format-row { grid-template-columns: repeat(2, 1fr); }
}

.za-format-row .za-format-card h3 { margin-bottom: var(--space-2); }

/* „Klausuren und Workshops nach Maß“ (17.07.2026, Zusammenarbeit-Nachtrag, Masterkonzept
   §2.1): bewusst KEINE Karte (kein Hintergrund/Schatten/Radius wie .za-format-card) – die
   Auffangkategorie „Maßarbeit“ soll optisch nicht als fünftes gleichrangiges Format
   auftreten. Trennung über eine schmale Regel in der Kennfarbe Blau statt Kartenrahmen. */
.za-format-custom {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 2px solid var(--color-accent);
}
.za-format-custom h3 { margin-bottom: var(--space-2); }
.za-format-custom p { max-width: var(--measure); }

.za-cases-list li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: var(--space-3);
  max-width: var(--measure);
}
.za-cases-list li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--color-accent);
}

.za-cases-closing {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  max-width: var(--measure);
}

.za-cta-primary { margin-bottom: var(--space-3); }
.za-cta-secondary { color: var(--color-text-muted); max-width: var(--measure); }

/* -- /ueber-mich: Personen-Seite (page-ueber-mich.hbs, 17.07.2026, Auftrag VIII) -----------*/

/* Foto-Platzhalter, solange kein Shooting-Porträt vorliegt (textsprint-uebermich.md Block 1:
   „Fallback-Crop aus Vorhang-Serie, später Shooting-Porträt 3:2“) – bewusst als sichtbarer,
   beschrifteter Platzhalter statt eines erfundenen Bildpfads, damit die Layout-Lücke im
   Review sichtbar bleibt statt als kaputtes <img> zu erscheinen. */
.um-portrait-placeholder {
  max-width: 16rem;
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text-muted);
  font-size: 0.85rem;
  text-align: center;
  padding: var(--space-2);
  margin-bottom: var(--space-4);
}

.um-role-statement {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  max-width: var(--measure);
}

.um-conviction {
  margin-bottom: var(--space-3);
  max-width: var(--measure);
}

/* 30.07.2026, Designpass B: Belege auf Desktop klarer gliedern – drei
   gleichrangige Gruppen (Ausbildungen/Publikationen/Vorträge) nebeneinander
   statt gestapelt, sobald genug Breite da ist. Mobil bleibt es eine Spalte. */
.um-belege-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
@media (min-width: 60rem) {
  .um-belege-grid { grid-template-columns: repeat(3, 1fr); }
}

.um-belege-group { margin-bottom: var(--space-4); }
.um-belege-group h3 { margin-bottom: var(--space-1); }
.um-belege-group p { max-width: var(--measure); }
.um-belege-grid .um-belege-group { margin-bottom: 0; }

.um-belege-closing {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  max-width: var(--measure);
}

/* -- /kontakt (page-kontakt.hbs, 17.07.2026, Auftrag IX) -----------------------------------*/

/* Einstieg als Bild-Text-Split (04.08.2026, Bild-/Layoutpass): DOM-Reihenfolge ist
   Figure-zuerst/Text-danach, damit Mobil ohne Zusatzregel "Foto, dann Text" zeigt
   (die Seiten-H1 sitzt bereits separat in .page-header davor). Ab 60rem schiebt
   .kontakt-content-text per order:-1 in die linke, schmalere Spalte (34rem, wie
   Hero/Über-mich/F&L), das Foto bleibt unverändert an Position 1 und landet dadurch
   in der rechten, breiteren 1fr-Spalte. align-items:start wie bei den übrigen
   Foto-Splits – die Karte "Was Sie nicht erwartet" etc. kann länger sein als das Bild. */
.kontakt-content .container {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 60rem) {
  .kontakt-content .container {
    grid-template-columns: minmax(0, 34rem) 1fr;
    align-items: start;
    gap: var(--space-6);
  }
  .kontakt-content-text { order: -1; }
}
.kontakt-media { margin: 0; }
.kontakt-media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
}

/* /termin/-Link-Button (30.07.2026, Sammelauftrag XV: meetergo-iFrame wieder
   entfernt, s. CHANGELOG cp – nur noch Abstand, kein Embed-Layout nötig).
   inline-flex + align-items, damit Text und External-Link-Icon (s. u.) nie
   getrennt umbrechen und optisch sauber auf einer Grundlinie sitzen. */
.kontakt-cta {
  margin: var(--space-3) 0 var(--space-4);
  display: inline-flex;
  align-items: center;
}

/* External-Link-Icon (30.07.2026, Auftrag "Termin-CTAs als externe Links";
   Geltungsbereich erweitert 31.07.2026, Konsistenzpass Punkt 4) – einheitliche
   Kennzeichnung für externe Links, jetzt auf allen fünf Standard-„Gespräch
   vereinbaren"-Buttons site-weit (alle verlinken direkt auf /termin/), s.
   theme/CONTENT-PFLEGE.md. Ausnahme: /mentoring/s „Erstgespräch anfragen"
   bleibt auf /kontakt/, bekommt dieses Icon nicht. */
.external-link-icon {
  width: 1em;
  height: 1em;
  max-width: 16px;
  max-height: 16px;
  margin-left: 0.4em;
  flex-shrink: 0;
}

/* -- /mentoring: eigene, stillere Design-Stimmung (page-mentoring.hbs, PLAN-WEBSITE §3.5) --*/

body.mentoring {
  background: var(--mentoring-bg);
  color: var(--mentoring-text);
}

/* Schmale, zentrierte .container-Sonderbreite entfernt (04.08.2026, Bild-/Layoutpass):
   Mentoring nutzt jetzt dieselbe äußere Modulbreite (--container-width, 71rem) und
   dieselbe linke Textachse wie die übrigen Hauptseiten – vorher zentrierte
   `max-width:var(--measure)` die gesamte Seite als eigene, schmale Spalte in der
   Bildschirmmitte, "weiter rechts" wirkend als der linksbündige Rest der Site. Die
   Lesebreite selbst bleibt gleich, sitzt jetzt aber wie überall sonst über
   max-width+margin-inline:0 auf den einzelnen Textelementen (s. u.), nicht mehr auf
   dem Container. Betrifft automatisch auch .mentoring-header (dieselbe Regel), was
   gewollt ist – Logo/Header fluchten jetzt mit dem Hauptinhalt und dem Rest der Site.
   Der eigenständige, dunkle Charakter (body.mentoring-Scoping, eigene Typo-/Farbregeln
   unten) bleibt unverändert. */

.mentoring-header { padding-block: var(--space-3); }

.mentoring main { padding-block: var(--space-6); }

.mentoring h1, .mentoring h2, .mentoring h3 { color: var(--mentoring-text); }
.mentoring p { color: var(--mentoring-text-muted); }

/* H1-Container jetzt ein eigenständiger Block ohne umgebendes <section> (04.08.2026,
   letzter Layout-/Inhaltsnachzug – Mentoring nutzt keine <section>-Tags, deshalb kein
   automatisches section{padding-block:...}). Abstand zum folgenden Split analog zu
   Über-mich Block 1 (dort `padding-top:var(--space-4)` auf dem Split selbst). */
.mentoring-page-header { padding-bottom: var(--space-4); }

/* Einstieg als Bild-Text-Split, überarbeitet 04.08.2026 (letzter Layout-/
   Inhaltsnachzug): H1 sitzt jetzt in einem eigenen Container OBERHALB dieses
   Splits (s. page-mentoring.hbs) – vereinheitlicht mit /ueber-mich, wo die H1
   ebenfalls in einem eigenen .page-header über dem Bild-Text-Split steht.
   `align-items:start` (Folgeauftrag 04.08.2026 – vorher `center`) richtet den
   Text an der Bild-Oberkante aus statt ihn vertikal zu zentrieren, analog
   /ueber-mich. Der bestehende <h2>90 Tage für Ihre Themen</h2> in
   .mentoring-format bleibt als Zwischenüberschrift im Fließtext unverändert
   stehen.
   Einstiegslayout verdichtet (05.08.2026, Auftrag „Einstiegslayout verdichten",
   per Nachtrag korrigiert – s. u.): .mentoring-opening UND beide
   .mentoring-resonance-Absätze bilden jetzt gemeinsam die linke Spalte, direkt
   untereinander gestapelt neben dem Foto, statt (wie vorher) komplett unterhalb
   des Fotos zu stehen.
   Korrektur (05.08.2026, Nachtrag – erster Versuch zeigte live keinen sichtbaren
   Unterschied): eine reine Spaltenbreiten-Änderung auf .mentoring-resonance
   reichte NICHT aus. Grund: CSS Grid sizt eine Zeile immer auf ihr höchstes
   Element – solange das Foto (hoch) allein schon Zeile 1 belegt, bleibt Zeile 1
   so hoch wie das Foto, egal wie kurz .mentoring-opening daneben ist. Die
   Resonance-Absätze landeten dadurch zwar in der schmalen linken Spalte, aber
   erst in Zeile 2/3 – die immer noch unterhalb der (fotohohen) Zeile 1 beginnen,
   optisch also weiterhin komplett unter dem Foto statt daneben. Behoben, indem
   `.mentoring-media` jetzt explizit `grid-row: 1 / span 3` über alle drei
   Text-Zeilen spannt (statt nur Zeile 1) und `grid-auto-rows: min-content` auf
   dem Grid verhindert, dass diese drei Zeilen dadurch künstlich aufgebläht
   werden (ohne dieses Detail würde die für das Foto benötigte Extra-Höhe
   gleichmäßig auf alle drei Zeilen verteilt und unnötig große Lücken zwischen
   die Absätze reißen). Ergebnis: die drei Textabsätze stapeln sich eng
   nebeneinander mit dem Foto, wachsen bei Bedarf über die Bildhöhe hinaus,
   „90 Tage für Ihre Themen" (.mentoring-format) fällt weiterhin per
   automatischer Grid-Platzierung in die erste Zeile, in der beide Spalten
   wieder frei sind (also erst unterhalb des gesamten Splits), über die volle
   Breite.
   {{content}} wird bewusst NICHT in einen Wrapper-Div gepackt – seine Wurzel-
   Elemente (.mentoring-opening, .mentoring-resonance, .mentoring-format, ...)
   werden dadurch direkte Grid-Kinder von .mentoring-intro-grid und lassen sich
   einzeln platzieren, ohne die Ghost-Page selbst in mehrere Blöcke aufzuteilen
   (keine Content-Refaktorierung).
   Mobil (kein Grid-Split, einspaltig): DOM-Reihenfolge ergibt automatisch
   „Bild mit Credit, dann der ganze Text" direkt nach der H1 (s. o.) – dieselbe
   Reihenfolge wie auf /ueber-mich, unverändert durch diesen Auftrag. */
.mentoring-intro-grid {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 60rem) {
  .mentoring-intro-grid {
    grid-template-columns: minmax(0, 34rem) 1fr;
    grid-auto-rows: min-content;
    column-gap: var(--space-6);
    align-items: start;
  }
  .mentoring-intro-grid > .mentoring-opening {
    grid-column: 1;
    grid-row: 1;
  }
  .mentoring-intro-grid > .mentoring-resonance {
    grid-column: 1;
  }
  .mentoring-intro-grid > .mentoring-media {
    grid-column: 2;
    grid-row: 1 / span 3;
  }
  .mentoring-intro-grid > .mentoring-format,
  .mentoring-intro-grid > .mentoring-approach,
  .mentoring-intro-grid > .mentoring-access {
    grid-column: 1 / -1;
  }
}
.mentoring-media { margin: 0; }
.mentoring-media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
}

/* Lesebreite + linke Achse (04.08.2026): ersetzt die vorher auf dem ganzen .container
   sitzende Breitenbegrenzung – dieselbe Technik wie .prose/.diagnose-list etc. auf den
   übrigen Hauptseiten. Bei ≥60rem sitzen .mentoring-opening zusätzlich in der 34rem-
   Grid-Spalte (s. o.), diese Regel bleibt dort ein harmloses No-op (die Spalte ist
   ohnehin schmaler als --measure). */
.mentoring-opening,
.mentoring-resonance,
.mentoring-format,
.mentoring-approach,
.mentoring-access {
  max-width: var(--measure);
  margin-inline: 0;
}

.mentoring-opening {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--mentoring-text);
}

.mentoring-format {
  padding-block: var(--space-4);
  margin-bottom: var(--space-5);
}
.mentoring-format h2 { margin-bottom: var(--space-2); }

.mentoring-approach { margin-bottom: var(--space-5); }
.mentoring-approach p { margin-bottom: var(--space-3); }

.mentoring-access p { margin-bottom: var(--space-3); }
.mentoring-access .btn-primary { margin-top: var(--space-2); }

.mentoring .btn-primary {
  background: var(--mentoring-accent);
  color: var(--mentoring-bg);
}

/* Globaler Footer, dunkle Variante (31.07.2026, Konsistenzpass Punkt 6 – ersetzt
   die vorherige, komplett duplizierte .mentoring-footer-Regel: EIN Footer-Partial
   site-weit, s. partials/footer.hbs, nur diese Farb-Overrides sind
   richtungs-/kontextspezifisch). Der eigene Breiten-Override auf .site-footer .container
   entfiel 04.08.2026 (Bild-/Layoutpass) – seit die schmale .mentoring .container-Regel
   weg ist (s. o.), erbt der Footer ohnehin schon dieselbe --container-width wie der
   Rest der Seite, der Override war identisch und damit redundant. */
.mentoring .site-footer {
  border-top: 1px solid oklch(30% 0.02 250);
  color: var(--mentoring-text-muted);
}
.mentoring .footer-legal a,
.mentoring .mentoring-back a { color: var(--mentoring-text-muted); }

/* -- Preview-only: Mentoring-Stimmungsprobe (nicht Teil der echten Startseite) */

.preview-note {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius);
  margin: var(--space-6) auto;
  max-width: var(--container-width);
}

.preview-note > .preview-note-label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3) 0;
}

.mentoring-swatch {
  background: var(--mentoring-bg);
  color: var(--mentoring-text);
  padding: var(--space-5) var(--space-3);
  margin: var(--space-2);
  border-radius: var(--radius);
}

.mentoring-swatch h3 { color: var(--mentoring-text); }
.mentoring-swatch p { color: var(--mentoring-text-muted); max-width: 42ch; }
.mentoring-swatch a { color: var(--mentoring-accent); }

.font-note {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  padding: 0 var(--space-3) var(--space-2);
}

@media (max-width: 40rem) {
  .hero-authority { display: block; }
}

/* -- Designpass C (30.07.2026): Editoriale Bild-Text-Kompositionen -------- */
/* Kein neues Farb-/Schrift-/Komponentensystem – nur Layout (Grid/Split) für
   die editorial ausgewählten Fotos. Bildunterschriften site-weit einheitlich
   über .photo-credit (Nachweis-Pflicht, PLAN-WEBSITE §4d/Impressum). */

/* 31.07.2026, Konsistenzpass Punkt 5: Schriftgröße leicht angehoben (0.8rem→0.85rem)
   und mehr Abstand zum Bild – auf Mobil war der vorherige Wert an der unteren
   Lesbarkeitsgrenze. */
.photo-credit {
  margin: var(--space-2) 0 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* Block 1: Hero-Split (Startseite) – Text/CTA immer zuerst im Markup, daher
   automatisch "Text zuerst" auf Mobil (eine Spalte); ab 60rem zwei Spalten,
   Text links / Bild rechts. Textspalte 31.07.2026 (Konsistenzpass Punkt 5,
   "Herobild geringfügig größer") von var(--measure) auf 34rem verengt, Bild
   bekommt dadurch mehr vom verbleibenden 1fr-Platz. */
@media (min-width: 60rem) {
  .hero .container {
    grid-template-columns: minmax(0, 34rem) 1fr;
    align-items: center;
    gap: var(--space-6);
  }
}
.hero-media { margin: 0; }
.hero-media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
}

/* Über-mich Block 1: Porträt-Split (ersetzt den 30.07.2026 nur dokumentierten,
   noch nicht gebauten Plan aus Designpass B – jetzt mit echtem Foto). Bild
   LINKS/Text RECHTS (Startseite macht es umgekehrt, für eigenen Seitencharakter
   je Seite, Akzeptanzkriterium Designpass C).
   Mobil-Reihenfolge vereinheitlicht mit /mentoring (04.08.2026, letzter Layout-/
   Inhaltsnachzug): DOM ist jetzt Figure-zuerst/Text-danach (vorher umgekehrt) –
   Mobil zeigt dadurch site-weit einheitlich "Bild mit Credit, dann Text" direkt
   nach der Seiten-H1. Da das Foto dadurch bereits das erste DOM-Element ist,
   fällt es ab 60rem ohne `order` von selbst in die linke 1fr-Spalte (Bild links) –
   das vorherige `order:-1` auf `.um-block1-media` ist dadurch entfallen. */
/* Abstand H1→Intro-Split verringert (31.07.2026, Konsistenzpass Punkt 5) – Block 1
   folgt der Seitenüberschrift unmittelbar, kein eigener Kapitelwechsel dazwischen. */
.um-block1 { padding-top: var(--space-4); }
/* Text an Bild-Oberkante statt vertikal zentriert (Folgeauftrag 04.08.2026,
   `align-items:start` statt `center`), analog /mentoring. */

.um-block1 .container {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 60rem) {
  .um-block1 .container {
    /* Textspalte 31.07.2026 von var(--measure) auf 34rem verengt ("Hauptporträt
       größer"), Bild bekommt mehr vom verbleibenden 1fr-Platz. */
    grid-template-columns: 1fr minmax(0, 34rem);
    align-items: start;
    gap: var(--space-6);
  }
}
.um-block1-media { margin: 0; }
.um-block1-media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
}

/* Über-mich Block 2: "Zwei Spuren" – editoriales Begleitbild neben dem
   gesamten Ghost-Content-Block (keine Aufsplittung der Ghost-Page in
   Einzelabsätze, um die Content-Pflege nicht zu verkomplizieren). Die
   Zuordnung "klar der zweiten Spur" kommt über das Bildmotiv selbst
   (Training/Regeneration, eindeutig nicht Projektarbeit) und den Alt-Text,
   nicht über pixelgenaue Ausrichtung an einem einzelnen Absatz. Schmaler
   Zweispalter: Text in Lesespalten-Breite, Bild schmal daneben. */
/* 31.07.2026, Konsistenzpass Punkt 5 ("stärker mit dem Textblock verzahnen"):
   Bild etwas breiter (17rem→19.5rem), enger am Text (Gap space-4→space-3) und
   vertikal zentriert statt oben ausgerichtet – wirkt als ein zusammengehöriger
   Block statt als angehängtes Beiwerk. */
.um-spur-zwei {
  display: grid;
  gap: var(--space-3);
  align-items: center;
}
@media (min-width: 48rem) {
  .um-spur-zwei {
    grid-template-columns: minmax(0, var(--measure)) 19.5rem;
  }
}
.um-spur-zwei-media { margin: 0; }
.um-spur-zwei-media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
}

/* Zusammenarbeit Beat 5 ("Woher diese Arbeit kommt"): breites Bühnenbild
   über der vollen Modulfläche, oberhalb des Fließtexts. */
.za-beat5-media { margin: 0 0 var(--space-4); }
.za-beat5-media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
}

/* F&L Beat 5 ("Woher diese Arbeit kommt"): asymmetrischer Split, Text links/
   Bild rechts (wie die Startseite – beide Angebots-Säulen teilen sich diese
   Grundfigur, im Unterschied zu Über-mich mit Bild links). align-items:start
   richtet das Bild oben an Überschrift/Text aus (bleibt unverändert –
   31.07.2026, Konsistenzpass Punkt 5 bestätigt diese Ausrichtung explizit). */
.fl-beat5-split {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 48rem) {
  .fl-beat5-split {
    /* Textspalte 31.07.2026 von var(--measure) auf 34rem verengt ("Sportbild
       größer"), Bild bekommt mehr vom verbleibenden 1fr-Platz. */
    grid-template-columns: minmax(0, 34rem) 1fr;
    align-items: start;
    gap: var(--space-6);
  }
}
.fl-beat5-media { margin: 0; }
.fl-beat5-media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
}

/* -- Generische Seiten (page.hbs/post.hbs) + Impulse-Index (31.07.2026,
   Konsistenzpass Punkt 6/7) -------------------------------------------- */
/* .page-generic braucht keine eigene Regel für .prose/.page-header – beide
   Klassen sind schon site-weit definiert (s. o.), reguläre --measure-Lesespalte
   bleibt dort Standard. .post-full weicht seit 12.08.2026 davon ab (s. u.). */

/* Einzelner Impulse-Artikel (12.08.2026, Heiko-Feedback): Textspalte auf
   --container-width statt der site-weiten --measure-Lesespalte verbreitert,
   analog zur Breite der Post-Karten auf /impulse/ (.impulse-index .post-feed,
   ebenfalls --container-width) – Heikos ausdrücklicher Wunsch, „Kachelbreite"
   und Artikel-Textbox sollen sich entsprechen. Titel (.page-header h1) auf
   dieselbe Breite gebracht, sonst wirkt er schmaler als der Fließtext darunter. */
.post-full .page-header h1,
.post-full .prose {
  max-width: var(--container-width);
}

/* Bugfix, direkt im Anschluss (12.08.2026, Heiko-Feedback): die Regel oben
   verbreitert nur den .prose-CONTAINER – die site-weite Basisregel
   `p { max-width: var(--measure); }` (s. o., gilt für jeden <p> überall,
   auch innerhalb von {{content}}) hielt einzelne Absätze trotzdem auf 42rem
   fest. Dadurch wirkten nur H1 und das Beitragsbild (kein <p>, keine eigene
   Breitenbegrenzung) verbreitert, der Fließtext blieb schmal. Aufgehoben nur
   für Absätze innerhalb von .post-full .prose – Überschriften (h2/h3 etc.)
   im Content hatten nie eine eigene max-width und waren nicht betroffen. */
.post-full .prose p {
  max-width: none;
}

/* Abstand zwischen Beitragsbild und erstem Inhalts-Element (12.08.2026,
   Heiko-Feedback) – das Bild saß bisher direkt gegen die erste Überschrift.
   Zweite Anpassung, direkt im Anschluss (12.08.2026): Bild bekommt zusätzlich
   `width: 100%` statt nur des globalen `max-width: 100%` (img, svg-Regel,
   s. o.) – ohne explizite width bleibt ein <img> bei seiner NATÜRLICHEN
   Pixelbreite, wenn die kleiner ist als der Container (hier: Foto war
   schmaler als die auf --container-width verbreiterte Textspalte, wirkte
   dadurch schmaler als Titel/Fließtext). Jetzt füllt das Bild immer exakt
   dieselbe Breite wie .post-full .prose/h1 – Heikos Wunsch, dass die
   Bildbreite der gemeinsame Standard für Titel/Text ist, läuft technisch
   über denselben Container, das Bild wird nur nicht mehr durch seine
   Originalauflösung nach unten begrenzt. */
.post-feature-image {
  width: 100%;
  margin-bottom: var(--space-4);
}

/* Abstand zum Footer (12.08.2026, Heiko-Feedback): `p:last-child { margin-
   bottom: 0 }` (site-weite Regel, s. o. – verhindert doppelte Abstände am
   Ende von Karten/Komponenten) hob den Abstand nach dem letzten Absatz eines
   Artikels vollständig auf, direkt gegen den Footer. Fix auf Wrapper-Ebene
   (.post-full selbst, nicht der letzte Absatz), damit es unabhängig vom
   letzten Content-Element (Absatz, Bild, Liste, Zitat …) immer greift. */
.post-full {
  margin-bottom: var(--space-6);
}

/* "Impulse abonnieren" (12.08.2026, Heiko-Feedback): jetzt eine eigene, immer
   sichtbare Zeile oberhalb des Feeds statt nur im Leerzustand des foreach –
   die alte .post-feed > .btn-Regel (Leerzustand-Button war Kind von .post-feed,
   flex-column/align-items:stretch streckte ihn sonst auf volle Breite) entfällt
   damit, der Button lebt jetzt außerhalb von .post-feed. */
.impulse-subscribe { margin-bottom: var(--space-4); }

.impulse-index .post-feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: var(--container-width);
}

.post-card {
  background: var(--color-bg-alt);
  border: var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: var(--space-4);
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
}

/* Beitragsbild (12.08.2026, Heiko-Feedback; 12.08.2026 zweite Anpassung auf
   Thumbnail umgestellt): Thumbnail links neben dem Text statt volle
   Kartenbreite oben. Höhe folgt automatisch der Texthöhe (Titel + Excerpt in
   .post-card-content) über Flexbox-Stretch – bewusst KEINE aspect-ratio, die
   würde der variablen Texthöhe widersprechen. Breite reagiert responsiv
   (clamp) statt fester rem-Wert, damit auf schmalen Viewports genug Platz für
   den Text bleibt. Abstand zum Text kommt vom .post-card-Gap, Abstand zum
   Kartenrand ergibt sich automatisch aus dem bestehenden Card-Padding (kein
   Bleed mehr, kein negativer Margin nötig). */
.post-card-image-link { display: block; flex-shrink: 0; }
.post-card-image {
  display: block;
  width: clamp(5rem, 20vw, 9rem);
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}

.post-card-content { min-width: 0; }
.post-card h3 { margin-bottom: var(--space-1); }
.post-card p { margin-bottom: 0; color: var(--color-text-muted); }

.pagination {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-5);
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}
.pagination a { color: var(--color-accent); }

/* -- Koenig-Editor Card-Breiten (Pflicht ab Ghost 2.0, gscan) ------------- */
/* Betrifft Bilder/Karten in echten Blog-Posts (Impulse), nicht die
   HTML-Karten-Blöcke der Startseite, die alle in ihrer Container-Breite
   bleiben. */
.kg-width-wide {
  width: 85vw;
  min-width: 100%;
  margin-inline: calc(50% - 50vw);
  transform: translateX(calc(50vw - 50%));
}

.kg-width-full {
  width: 100vw;
  min-width: 100%;
  margin-inline: calc(50% - 50vw);
  transform: translateX(calc(50vw - 50%));
}

.kg-width-full img,
.kg-width-wide img {
  width: 100%;
}

/* -- Kontaktformular (Impressum, Formspark) -------------------------------
   05.08.2026, Auftrag „Kontaktformular im Impressum". Markup + der kleine
   Vanilla-JS-Progressive-Enhancement-Baustein (assets/js/kontaktformular.js)
   sitzen direkt im Ghost-Content der Impressum-Seite (kg-card HTML-Block,
   dasselbe Muster wie die übrigen eingebetteten Bausteine, z. B. der
   Termin-CTA auf /kontakt/) – kein eigenes page-impressum.hbs nötig, kein
   neues Ghost-Feld. Bewusst keine neue Formular-Designkomponente: nutzt
   bestehende Tokens (--color-border/-text-muted/-accent/-signal, --radius,
   --space-*) und die site-weite `:focus-visible`-Regel für Fokuszustände.
   --color-signal war seit dem 15.07.2026 exakt für diesen Zweck reserviert
   ("AUSSCHLIESSLICH Formularfehler/Validierung", s. tokens.css) – hier zum
   ersten Mal tatsächlich eingesetzt. Erfolg bekommt bewusst KEINE neue Farbe
   (Standardtext + Häkchen-Icon), wie beauftragt. */
.contact-form-wrap { margin-top: var(--space-4); margin-bottom: var(--space-5); }

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: var(--measure);
  margin-top: var(--space-3);
}

.form-field { display: flex; flex-direction: column; gap: var(--space-1); }

.form-field label {
  font-weight: 600;
  font-size: 0.9375rem;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-text-muted);
  border-radius: var(--radius);
  padding: 0.65em 0.85em;
}

.form-field textarea { resize: vertical; min-height: 8em; }

/* Honeypot: für Menschen unsichtbar (display:none, Formsparks eigenes
   Muster), zusätzlich tabindex="-1" auf dem Feld selbst, damit es auch bei
   versehentlich sichtbarem CSS nie in der Tab-Reihenfolge auftaucht. */
.form-honeypot { display: none; }

.contact-form-hint {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

.contact-form-submit { align-self: flex-start; }

.contact-form-status {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  font-weight: 600;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
}
.contact-form-status[hidden] { display: none; }
.contact-form-status--success { border: 1px solid var(--color-border); }
.contact-form-status--error { color: var(--color-signal); border: 1px solid var(--color-signal); }
.contact-form-status svg { flex-shrink: 0; margin-top: 0.15em; }