/* ==========================================================================
   Design-System „Mensch im Mittelpunkt“ – ZENTRALE MASTERDATEI
   Quelle aller Werte: Mensch-im-mittelpunkt/DESIGN_SYSTEM.md
   Wiederverwendbare Komponenten: Mensch-im-mittelpunkt/MASTER_TEMPLATE.md

   Jede Website bekommt eine eigene, unveränderte KOPIE dieser Datei unter
   website/css/design-system.css. Änderungen werden hier vorgenommen und
   dann in jede Kopie übertragen (siehe MASTER_TEMPLATE.md Abschnitt 3).

   Stand: 2026-09-28 (nach Referenzseite „Leuchtturm-Gespräch“ und
   zweiter Seite „Monatliches Online-Seminar“). Alle Werte, die auch in
   Leuchtturms eigener (unverändert bleibender) Kopie stehen, sind hier
   bewusst NICHT verändert worden – nur ergänzt.

   Grundprinzip: Alle Größen sind in „em“ bzw. als Vielfaches der
   Basisschrift angegeben (15,75 px Desktop/Tablet, 14 px Mobile).
   ========================================================================== */

/* ---------- 1. Design-Tokens ---------- */
:root {
  /* Farben */
  --color-primary:          #CD2519;  /* Akzent: Buttons, Links, Linien */
  --color-link-hover:       #E63F33;
  --color-secondary:        #EDD9B6;  /* eingefärbte Section-Hintergründe (siehe .section--tan) */
  --color-accent-muted:     #F9D4D2;  /* rosé Hinweisboxen, Label */
  --color-callout-icon:     #881911;

  --color-background:       #F5EFE9;  /* Seiten-/Section-Hintergrund */
  --color-background-mask:  rgba(245, 239, 233, 0.85);
  --color-surface-subtle:   #EBE0D5;  /* Info-Boxen, Chevrons, FAQ-Kopf */

  --color-heading:          #4A4A4A;
  --color-text:             #4A4A4A;
  --color-text-strong:      #000000;  /* Text in rosé Boxen */

  --color-button-bg:        var(--color-primary);
  --color-button-text:      #FFFFFF;

  --color-border:           #D1C6BB;
  --color-divider:          rgba(74, 74, 74, 0.5);

  /* Schriften */
  --font-heading: "Playfair Display SC", Georgia, serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --font-size-base: 15.75px;          /* Desktop & Tablet */
  --line-height-heading: 1.25;
  --line-height-body: 1.6;

  --font-size-h1: 2.5em;
  --font-size-h2: 2em;
  --font-size-h3: 1.5em;
  --font-size-h4: 1.25em;
  --font-size-lead: 1.25em;
  --font-size-small: 0.8em;

  /* Display-Überschrift (größer als H1, eigener Block-Typ) */
  --font-size-display-lg: 5em;
  --font-size-display-md: 3.45em;

  /* Layout */
  --container-width: 73.714em;        /* 1161 px */
  --section-padding-y: 4.75em;        /* 74,81 px */
  --section-padding-x: 4em;           /* 63 px */
  --column-gap: 2.4375em;             /* 38,4 px – Abstand zwischen Text-/Bildspalten */

  /* Abstände.
     WICHTIG: bewusst calc(Faktor * var(--font-size-base)) statt „em“, damit
     der Abstand unabhängig von der Schriftgröße des jeweiligen Elements
     bleibt (siehe PAGE_SPEC_ONLINE_SEMINAR.md Abschnitt 14.9). Für Text in
     Basisgröße ist das Ergebnis identisch mit den früheren em-Werten. */
  --space-paragraph: calc(1.125 * var(--font-size-base));         /* 17,72 px – Absatzabstand */
  --space-paragraph-compact: calc(0.9 * var(--font-size-base));   /* 14,18 px – Absätze in Spalten */
  --space-grid: 1em;                  /* 15,75 px – Abstand in Rastern (bewusst em: Raster liegen immer in Basisgröße-Kontext) */
  --space-callout-first: var(--font-size-base); /* erster Block in einer Hinweisbox */
  --space-divider-top: calc(1.125 * var(--font-size-base) + 4.3px);    /* 22 px über Trennlinie */
  --space-divider-bottom: calc(1.125 * var(--font-size-base) + 3.3px); /* 21 px unter Trennlinie */
  --space-list-item: calc(0.35 * var(--font-size-base));          /* Abstand zwischen Listenpunkten */

  /* Formen */
  --radius-button: 0.375em;           /* 5,9 px */
  --radius-card:   0.35em;            /* 5,51 px */
  --radius-label:  0.28em;            /* 4,41 px */

  /* Buttons */
  --button-height: 2.75em;            /* 43,3 px = 2 × 0,575em + Zeilenhöhe 1,6em */
  --button-padding: 0.575em 1em;

  /* Kopfzeile */
  --nav-height: 75px;
  --nav-logo-size: 55px;
  --nav-breakpoint: 991px;            /* darunter: Hamburger-Menü statt Inline-Nav */
}

@media (max-width: 767px) {
  :root {
    --font-size-base: 14px;
    --font-size-h1: 2em;
    --font-size-h2: 1.5em;
    --font-size-h3: 1.25em;
    --font-size-h4: 1.1em;
    --font-size-display-lg: 2.5em;    /* Gamma-eigene Mobile-Größe, kein einfaches Halbieren */
    --font-size-display-md: 2.25em;
    --section-padding-y: 2.5em;       /* 35 px */
    --section-padding-x: 1.714em;     /* 24 px */
    --space-paragraph: calc(0.8 * var(--font-size-base));         /* 11,2 px */
    --space-paragraph-compact: calc(0.8 * var(--font-size-base));
    --space-callout-first: calc(0.8 * var(--font-size-base));
    --space-divider-top: calc(0.8 * var(--font-size-base) + 1.8px);
    --space-divider-bottom: calc(0.8 * var(--font-size-base) + 2.8px);
  }
}

/* SVG-Icon-Sprite (Symbole am Seitenanfang, per <use> referenziert) */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---------- 2. Basis ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: var(--line-height-body);
  overflow-wrap: break-word;  /* lange E-Mail-Adressen umbrechen wie im Original */
  -webkit-font-smoothing: antialiased;
}

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

/* Überschriften: Kapitälchen kommen allein aus der Schrift „Playfair Display SC“
   Gamma-Überschriften sind auf die Textbreite geschrumpft (nicht blockbreit),
   mit einer Mindestbreite von 10 × eigener Schriftgröße – exakt an der
   Live-Seite gemessen (H2 „heading-lg“: 315px = 10 × 31,5px; H4 in Boxen:
   196,875px = 10 × 19,6875px; H1 „display--md“: ~543px = 10 × 54,37px). */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--line-height-heading);
  color: var(--color-heading);
  width: fit-content;
  min-width: min(100%, 10em);
}
h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }

p {
  margin: var(--space-paragraph) 0;
}

strong, b {
  font-weight: 700;
}

a {
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: underline;
}
a:hover {
  color: var(--color-link-hover);
}

/* ---------- 3. Grundgerüst (Section, Fluss, Spalten, Raster) ---------- */
/* Übernommen von der Leuchtturm-Seite (dort unverändert weiter in
   leuchtturm.css definiert) – ab der zweiten Seite hier zentral. */

.section__inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: var(--section-padding-y) var(--section-padding-x);
  display: flow-root; /* eigener Block-Formatierungskontext, damit gefloatete Bilder (siehe .pillar__image) die Höhe korrekt mitbestimmen */
}

/* Vertikaler Fluss: Absätze, Bilder, Buttons usw. untereinander */
.flow > p,
.flow > .button-row,
.flow > .callout,
.flow > .media,
.flow > .quote { margin-block: var(--space-paragraph); }

.section__inner.flow > :first-child,
.hero__text > :first-child { margin-top: 0; }
.section__inner.flow > :last-child,
.hero__text > :last-child { margin-bottom: 0; }

/* In Spalten sind Absätze etwas enger (0,9 × Basis) */
.flow--compact > p,
.flow--compact .callout p { margin-block: var(--space-paragraph-compact); }
.flow--compact > h3 { margin-block: var(--font-size-base); }

/* Überschriften-Abstände nach unten */
.heading-lg { margin-bottom: calc(2 * var(--font-size-base)); }   /* 31,5 px */
.heading-md { margin-bottom: calc(1.5 * var(--font-size-base)); } /* 23,6 px */
h4 { margin-bottom: calc(0.6 * var(--font-size-base)); }

.button-row { display: flex; }
.button-row--center { justify-content: center; }

.label { display: flex; width: fit-content; align-items: center; gap: 0.5em; }

.media { width: 100%; height: auto; }

.cols {
  display: grid;
  column-gap: var(--column-gap);
  align-items: start;
}
/* 60/40 bzw. 40/60 wie bei Gamma: 60 % der (Breite + Abstand) minus Abstand */
.cols--60-40 { grid-template-columns: calc(60% - 0.4 * var(--column-gap)) minmax(0, 1fr); }
.cols--40-60 { grid-template-columns: calc(40% - 0.6 * var(--column-gap)) minmax(0, 1fr); }
.cols--50-50 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-grid);
}

/* Dreispaltiges Karten-/Box-Raster
   Live-Messung: Der Abstand zwischen vorausgehendem Absatz und Box-Reihe
   folgt dem normalen Absatzrhythmus (--space-paragraph, 18px), nicht dem
   größeren --column-gap (38px) – konsistent in zwei unabhängigen Sections
   (Familienaufstellungen, Gemeinschaft im Fokus) gemessen. */
.boxes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-grid);
  margin: var(--space-paragraph) 0 var(--space-paragraph);
}

/* Zweispaltige, kartenlose Liste (z. B. Terminliste) */
.list-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--column-gap);
  row-gap: calc(1.25 * var(--font-size-base));
  margin: var(--column-gap) 0 var(--space-paragraph);
}

@media (max-width: 767px) {
  .cols,
  .cols--60-40,
  .cols--40-60,
  .cols--50-50,
  .grid-2,
  .list-columns,
  .boxes {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- 4. Wiederkehrende Komponenten ---------- */

/* Button (Grundstil, kein Hover-Effekt wie im Original) */
/* Zu lange Beschriftungen werden wie bei Gamma mit „…“ gekürzt. */
.button {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  padding: var(--button-padding);
  border-radius: var(--radius-button);
  background: var(--color-button-bg);
  color: var(--color-button-text);
  font-family: var(--font-body);
  font-size: 1em;
  font-weight: 600;
  line-height: var(--line-height-body);
  text-decoration: none;
  white-space: nowrap;
}
.button:hover {
  color: var(--color-button-text);
}

/* Sekundärer Button: Kontur statt Füllung */
.button--outline {
  background: var(--color-background);
  color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}
.button--outline:hover {
  color: var(--color-primary);
}

@media (max-width: 767px) {
  .button-row .button { width: 100%; }
}

/* Kleines Etikett über Überschriften */
.label {
  padding: 0.375em 0.75em;
  border-radius: var(--radius-label);
  font-size: var(--font-size-small);
  line-height: 1.15;
  text-transform: uppercase;
}
.label svg {
  width: 0.889em;
  height: 0.889em;
  flex: none;
}
.label--plain  { color: var(--color-text-strong); }
.label--accent { background: var(--color-accent-muted); color: var(--color-text); }

/* Rosé Hinweisbox (Callout) */
.callout {
  display: flex;
  gap: 1em;
  padding: 0.25em 1em;
  border-radius: var(--radius-card);
  background: var(--color-accent-muted);
  color: var(--color-text-strong);
}
.callout__icon {
  flex: none;
  width: 1.25em;
  height: 1em;
  margin-top: 1.3em; /* auf Höhe der ersten Textzeile */
  fill: var(--color-callout-icon);
}
.callout__body { flex: 1; }
.callout__body p { margin: var(--space-paragraph-compact) 0; font-size: var(--font-size-base); }
.callout__body > :first-child { margin-top: var(--space-callout-first); }
.callout__body > :last-child  { margin-bottom: var(--space-paragraph-compact); }
.callout h4 { color: var(--color-text-strong); }

/* Trennlinie */
.divider {
  height: 2px;
  margin: var(--space-divider-top) 0 var(--space-divider-bottom);
  border: 0;
  border-radius: 1px;
  background: var(--color-divider);
}

/* Listen */
.list {
  margin: 0;
  padding-left: 1.143em;  /* 18 px */
}
.list li {
  margin: 0 0 var(--space-list-item);
  padding-left: 0.4em;
}

/* Blockquote mit rotem Balken */
.quote {
  display: flow-root;
  position: relative;
  margin: var(--space-paragraph) 0;
  padding-left: 1.5em;
}
.quote::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  border-radius: 1px;
  background: var(--color-primary);
}

/* Abgerundete Bilder */
.rounded {
  border-radius: var(--radius-card);
  overflow: hidden;
}

/* Info-Box (gefüllt, dünner Rahmen) */
.box {
  padding: 1em;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface-subtle);
}
/* In Boxen: display:inline-block statt block, damit die (bereits über die
   allgemeine h1–h4-Regel geschrumpfte) Überschrift bei zentrierten Boxen
   (siehe .section--accent) über text-align:center der Box mittig sitzt. */
.box h4 {
  display: inline-block;
  margin-bottom: calc(0.6 * var(--font-size-base));
}
.box p { margin: 0; font-size: var(--font-size-base); }
.box p + p { margin-top: var(--space-paragraph-compact); }

/* Rahmen-Box (Hintergrund = Seitenhintergrund, 2 px Kontur) */
.box--outline {
  background: var(--color-background);
  border: 2px solid var(--color-border);
}

/* Runder Farbkreis mit Icon (vor Kartentiteln) */
.icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3em;
  height: 3em;
  border-radius: 9999px;
  background: var(--color-primary);
  margin-bottom: 1em;
}
.icon-badge svg {
  width: 1.35em;
  height: 1.35em;
  color: #fff;
}

/* Display-Überschrift (größer als H1, eigener Block-Typ) */
.display {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--line-height-heading);
  color: var(--color-heading);
}
.display--lg { font-size: var(--font-size-display-lg); }
.display--md { font-size: var(--font-size-display-md); }
.display .text-accent { color: var(--color-primary); }

/* Vollflächiges Hintergrundbild mit Overlay (z. B. Hero oder Abschluss-Section).
   Bild per --bg-image auf dem jeweiligen Element setzen. */
.section--bg-image {
  position: relative;
  isolation: isolate;
}
.section--bg-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--radius-card);
  background:
    linear-gradient(var(--color-background-mask), var(--color-background-mask)),
    var(--bg-image) center / cover no-repeat;
}
@media (max-width: 767px) {
  .section--bg-image::before { border-radius: 0; }
}

/* Eingefärbte Section-Hintergründe */
.section--tan    { background: var(--color-secondary); }
.section--accent { background: var(--color-primary); }
.section--accent h1,
.section--accent h2,
.section--accent h3,
.section--accent h4,
.section--accent p,
.section--accent li { color: #fff; }
.section--accent .divider { background: rgba(255, 255, 255, 0.5); }
.section--accent .box--outline { background: var(--color-primary); color: #fff; text-align: center; }
/* Primär-Button auf der roten Section: Gamma invertiert ihn automatisch */
.section--accent .button:not(.button--outline) {
  background: #fff;
  color: #000;
}

/* ---------- 5. Kopfzeile ---------- */
.site-header__inner {
  width: min(var(--container-width), 100% - 20px);
  margin: 0 auto;
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  position: relative;
  z-index: 10;
}
.site-header__logo {
  width: var(--nav-logo-size);
  height: var(--nav-logo-size);
  object-fit: contain;
}

/* Inline-Nav (Link + Button), nur ≥ --nav-breakpoint sichtbar */
.site-header__nav {
  display: flex;
  align-items: center;
  gap: 2em;
}
.site-header__link {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text);
  text-decoration: none;
}
.site-header__link:hover { color: var(--color-text); text-decoration: underline; }

/* Hamburger-Menü, nur < --nav-breakpoint sichtbar (natives <details>, ohne JS) */
.site-header__toggle { display: none; }

@media (max-width: 991px) {
  .site-header__nav { display: none; }
  .site-header__toggle { display: block; }
}

.site-header__toggle-btn {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 24px;
  cursor: pointer;
  list-style: none;
}
.site-header__toggle-btn::-webkit-details-marker { display: none; }
.site-header__toggle-btn span {
  display: block;
  height: 2px;
  background: var(--color-text);
  border-radius: 1px;
}
.site-header__menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  padding: 1.25em var(--section-padding-x, 24px) 1.5em;
  background: var(--color-background);
}
.site-header__menu .site-header__link { font-size: 16px; }
.site-header__menu .button { width: 100%; }