/* ==========================================================================
   Gesundheit & Vitalität – Marco Burger
   Eine Datei, keine Abhängigkeiten. Farben stammen aus dem Logo.
   ========================================================================== */

/* --- Schrift ------------------------------------------------------------ */
/* Manrope Variable, Latin-Subset von Fontsource, selbst gehostet.
   format("woff2") statt des veralteten "woff2-variations": moderne Browser
   lesen die Achsen ohnehin, ältere Schreibweisen werden teils ignoriert. */
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens ------------------------------------------------------------- */
:root {
  --navy: #1D1D45;
  --blau: #4760DA;
  --blau-hell: #506EF8;
  /* Exakte Farbe aus der Logodatei. Nur dekorativ verwendet: auf Weiss
     erreicht sie mit weisser Schrift keinen AA-Kontrast, dafür ist --blau da. */
  --blau-marke: #5271FF;
  --flaeche: #F7F8FC;
  --weiss: #FFFFFF;
  --text: #1A1A2E;
  --text-leise: #5A5A72;

  --schrift: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --breite-inhalt: 46rem;
  --breite-seite: 72rem;

  --abstand-s: 0.75rem;
  --abstand-m: 1.5rem;
  --abstand-l: 3rem;
  --abstand-xl: clamp(3.5rem, 8vw, 6rem);

  --radius: 0.5rem;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--weiss);
  color: var(--text);
  font-family: var(--schrift);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
  line-height: 1.2;
  text-wrap: balance;
  margin: 0 0 var(--abstand-m);
}
h1 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem); font-weight: 700; margin-top: var(--abstand-l); }

p { margin: 0 0 var(--abstand-m); }
p:last-child { margin-bottom: 0; }

a { color: var(--blau); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--blau-hell); }

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

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

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--navy);
  color: var(--weiss);
  padding: var(--abstand-s) var(--abstand-m);
  z-index: 10;
}
.skip-link:focus { left: var(--abstand-m); top: var(--abstand-m); }

/* --- Struktur ----------------------------------------------------------- */
.inhalt {
  width: min(100% - 2.5rem, var(--breite-seite));
  margin-inline: auto;
}

.sektion {
  padding-block: var(--abstand-xl);
}
.sektion .inhalt > * {
  max-width: var(--breite-inhalt);
}
.sektion--flaeche { background: var(--flaeche); }
.sektion--dunkel {
  background: var(--navy);
  color: var(--weiss);
}
.sektion--dunkel a:not(.knopf) { color: var(--weiss); }

/* --- Kopf --------------------------------------------------------------- */
.kopf {
  background: var(--navy);
  padding-block: var(--abstand-m);
}
.kopf__reihe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-m);
}
.kopf__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-m);
}
.kopf__nav a {
  color: var(--weiss);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}
.kopf__nav a:hover { text-decoration: underline; }

/* --- Hero --------------------------------------------------------------- */
/* Foto mit Navy-Verlauf darüber. Die Deckkraft ist nicht geschätzt, sondern
   gegen das Bild gerechnet: Beim hellsten Sonnenuntergangs-Pixel unter dem
   Text bleibt der Kontrast zu weisser Schrift bei 5,1:1 und damit über der
   WCAG-AA-Schwelle von 4,5:1. */
.hero {
  padding-block: clamp(4rem, 10vw, 7rem);
  background-image:
    linear-gradient(100deg, rgba(29, 29, 69, 0.86) 0%, rgba(29, 29, 69, 0.72) 45%, rgba(29, 29, 69, 0.45) 100%),
    url("/assets/img/hero-1200.webp?v=20260817");
  background-size: cover;
  background-position: center 45%;
  background-repeat: no-repeat;
}
@media (min-width: 48rem) {
  .hero {
    background-image:
      linear-gradient(100deg, rgba(29, 29, 69, 0.86) 0%, rgba(29, 29, 69, 0.72) 45%, rgba(29, 29, 69, 0.45) 100%),
      url("/assets/img/hero-2000.webp?v=20260817");
    min-height: 60vh;
    display: flex;
    align-items: center;
  }
}
/* Weiss statt des früheren gedämpften #C9CCE8: über dem Hero-Foto käme das
   nur auf 3,3:1 und damit unter die AA-Schwelle. Die Hierarchie trägt hier
   die Schriftgrösse, nicht die Farbe. */
.hero__unterzeile {
  font-size: 1.15em;
  color: var(--weiss);
  max-width: 34rem;
}

/* --- Knöpfe ------------------------------------------------------------- */
.knopf-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-s);
  margin-top: var(--abstand-l);
}
.knopf {
  display: inline-block;
  padding: 0.8em 1.6em;
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
}
.knopf--primaer { background: var(--blau); color: var(--weiss); }
.knopf--primaer:hover { background: var(--blau-hell); color: var(--weiss); }
/* background explizit: sonst greift bei <button> der graue UA-Standard */
.knopf--sekundaer { background: transparent; border-color: currentColor; color: inherit; }
.knopf--sekundaer:hover { background: rgba(255,255,255,0.1); color: inherit; }
.sektion:not(.sektion--dunkel) .knopf--sekundaer:hover { background: rgba(71,96,218,0.08); }
.knopf--hell { background: var(--weiss); color: var(--navy); }
.knopf--hell:hover { background: #E8EAFB; color: var(--navy); }

/* --- Bausteine ---------------------------------------------------------- */
.karten {
  display: grid;
  gap: var(--abstand-m);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-block: var(--abstand-l);
}
.karte {
  background: var(--weiss);
  border: 1px solid #E2E4F0;
  border-radius: var(--radius);
  padding: var(--abstand-m);
}
.karte h3 { margin-top: 0; }
.karte ul { margin: 0; padding-left: 1.2em; }
.karte li { margin-bottom: 0.4em; }

.betont { font-weight: 700; font-size: 1.1em; }

.hinweis {
  font-size: 0.9rem;
  color: var(--text-leise);
  border-left: 3px solid var(--blau);
  padding-left: var(--abstand-m);
  margin-top: var(--abstand-l);
}

address {
  font-style: normal;
  margin-top: var(--abstand-l);
  line-height: 1.8;
}

/* Platzhalter, bis die echten Bilder da sind */
.platzhalter {
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(45deg, #EDEFF8, #EDEFF8 12px, #E4E7F5 12px, #E4E7F5 24px);
  color: var(--text-leise);
  border-radius: var(--radius);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: var(--abstand-l);
}
.platzhalter--hoch { aspect-ratio: 3 / 4; width: 18rem; max-width: 100%; }
.platzhalter--quer { aspect-ratio: 3 / 2; }

.bild { border-radius: var(--radius); margin-bottom: var(--abstand-l); }
.bild--hoch { width: 22rem; max-width: 100%; }
.bild--quer { width: 100%; }

/* --- Fuss --------------------------------------------------------------- */
.fuss {
  background: var(--navy);
  color: var(--weiss);
  padding-block: var(--abstand-l);
  font-size: 0.9rem;
}
.fuss__reihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-m);
  align-items: center;
  justify-content: space-between;
}
.fuss p { margin: 0; }
.fuss nav { display: flex; gap: var(--abstand-m); }
.fuss a { color: var(--weiss); }

/* --- Rechtliche Seiten -------------------------------------------------- */
.rechtstext h2 { margin-top: var(--abstand-l); }
.rechtstext ul { padding-left: 1.2em; }
.rechtstext li { margin-bottom: 0.4em; }
.rechtstext dl { margin: 0 0 var(--abstand-m); }
.rechtstext dt { font-weight: 700; margin-top: var(--abstand-m); }
.rechtstext dd { margin: 0; }

/* --- Logo --------------------------------------------------------------- */
.kopf__marke { display: block; line-height: 0; flex: 0 0 auto; }
/* max-width: none hebt die globale Bildregel auf — sonst schrumpft das Logo
   als Flex-Element auf die Breite null zusammen. */
.kopf__marke img {
  height: 3rem;
  width: auto;
  max-width: none;
  aspect-ratio: 368 / 105;
}

/* --- Einwilligung ------------------------------------------------------- */
.einwilligung {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 20;
  background: var(--navy);
  color: var(--weiss);
  border-top: 3px solid var(--blau-marke);
  padding: var(--abstand-m);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-m);
  box-shadow: 0 -8px 24px rgba(29, 29, 69, 0.25);
}
.einwilligung[hidden] { display: none; }
.einwilligung__text { max-width: 46rem; }
.einwilligung__text h2 {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}
.einwilligung__text h2:focus-visible { outline-offset: 4px; }
.einwilligung__text p {
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0;
}
.einwilligung__text a { color: var(--weiss); }
.einwilligung__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-s);
}
/* Beide Schaltflächen gleich gross und gleich erreichbar — Ablehnen darf
   nicht schwerer zu treffen sein als Zustimmen. */
.einwilligung .knopf {
  padding: 0.6em 1.4em;
  font-size: 0.95rem;
  cursor: pointer;
  font-family: inherit;
  min-width: 10rem;
  text-align: center;
}

/* Schaltfläche im Fuss, optisch ein Link */
.fuss__link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--weiss);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

/* Auf schmalen Geräten nimmt das Banner sonst fast den halben Bildschirm ein */
@media (max-width: 30rem) {
  .einwilligung {
    padding: var(--abstand-m);
    gap: var(--abstand-s);
  }
  .einwilligung__text h2 { font-size: 1rem; }
  .einwilligung__text p { font-size: 0.85rem; }
  .einwilligung__knoepfe { width: 100%; }
  .einwilligung .knopf { flex: 1 1 0; min-width: 0; }
}