/* ==========================================================================
   Design-System „Mensch im Mittelpunkt“
   Quelle aller Werte: Mensch-im-mittelpunkt/DESIGN_SYSTEM.md
   Diese Datei ist seitenübergreifend wiederverwendbar.

   Grundprinzip: Alle Größen sind in „em“ angegeben, bezogen auf die
   Basisschrift (15,75 px Desktop/Tablet, 14 px Mobile). Dadurch skaliert
   die gesamte Seite auf Mobile automatisch – genau wie bei Gamma.
   ========================================================================== */

/* ---------- 1. Design-Tokens ---------- */
:root {
  /* Farben */
  --color-primary:          #CD2519;  /* Akzent: Buttons, Links, Linien */
  --color-link-hover:       #E63F33;
  --color-secondary:        #EDD9B6;  /* im Theme definiert, hier ungenutzt */
  --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;

  /* Layout */
  --container-width: 73.714em;        /* 1161 px */
  --section-padding-y: 4.75em;        /* 74,81 px */
  --section-padding-x: 4em;           /* 63 px */

  /* Abstände (Vielfache der Basisschrift) */
  --space-paragraph: 1.125em;         /* 17,72 px – Absatzabstand */
  --space-paragraph-compact: 0.9em;   /* 14,18 px – Absätze in Spalten */
  --space-grid: 1em;                  /* 15,75 px – Abstand in Rastern */
  --space-callout-first: var(--font-size-base); /* erster Block in einer Hinweisbox */
  --space-divider-top: calc(1.125em + 4.3px);    /* 22 px über Trennlinie */
  --space-divider-bottom: calc(1.125em + 3.3px); /* 21 px unter Trennlinie */

  /* 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;
}

@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;
    --section-padding-y: 2.5em;       /* 35 px */
    --section-padding-x: 1.714em;     /* 24 px */
    --space-paragraph: 0.8em;         /* 11,2 px */
    --space-paragraph-compact: 0.8em;
    --space-callout-first: calc(0.8 * var(--font-size-base));
    --space-divider-top: calc(0.8em + 1.8px);
    --space-divider-bottom: calc(0.8em + 2.8px);
  }
}

/* ---------- 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“ */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--line-height-heading);
  color: var(--color-heading);
}
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. Wiederkehrende Komponenten ---------- */

/* Button (einziger Button-Stil des Designs, 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);
}

/* Kleines Etikett über Überschriften */
.label {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.5em;
  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; }
.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 0.35em;
  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;
}