/* ═══════════════════════════════════════════════════════════════
   base.css — Design-Tokens + Reset (Heegbach Apotheke / Videosprechstunde)
   Nur Grundlagen. Layout/Komponenten entstehen im Design-Schritt
   (Skill: website-designstandards).
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── CI aus dem Heegbach-Logo ──────────────────────────────────
     Logo-Originaltöne: Türkis #2E9BBE · Grün #7C9314 · Rot #DC0014.
     Für Fließtext/Buttons jeweils so weit abgedunkelt, dass weiße
     Schrift bzw. Text auf Weiß WCAG AA (≥ 4.5:1) erreicht.
     Grundfläche bleibt neutral (Weiß/Kaltgrau) — Farbe nur als Akzent. */
  --farbe-primaer:        #1e7e9e;   /* Türkis — Marke, Struktur, Icons */
  --farbe-primaer-dunkel: #0e5771;
  --farbe-primaer-hell:   #e9f3f7;
  --farbe-tief:           #08303c;   /* tiefes Petrol — Footer, dunkle Flächen */
  --farbe-tief-mittel:    #0b3b4a;
  --farbe-akzent:         #6b7f11;   /* Grün — ausschließlich Handlungen (CTA) */
  --farbe-akzent-dunkel:  #566a0b;
  --farbe-akzent-hell:    #b9d14a;   /* Grün auf dunklem Grund */
  --farbe-signal:         #c8102e;   /* Rot — nur Notruf/Fehler, sonst nie */
  --farbe-text:           #16232b;
  --farbe-text-leise:     #566773;
  --farbe-bg:             #ffffff;
  --farbe-bg-sanft:       #f4f7f9;
  --farbe-rand:           #dde5ea;
  --farbe-fehler:         #c8102e;
  --farbe-erfolg:         #566a0b;

  /* envital — Anbieter des Angebots. Ton aus dem Original-Logo (envital.care)
     ausgemessen; wird nur für Anbieter-Kennzeichnungen verwendet, nicht als
     Flächenfarbe, damit die Apotheken-CI die Seite weiterhin trägt. */
  --farbe-envital:        #4a4a43;
  --farbe-envital-hell:   #f2f1ec;

  /* Typografie — Fonts lokal via fonts.css (@font-face), kein CDN */
  --font-serif:  "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-sans:   "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-basis:  var(--font-sans);

  /* Animation */
  --ease-spring: cubic-bezier(.2,.8,.2,1);
  --ease-out:    cubic-bezier(.2,.7,.2,1);

  /* Maße — bewusst großzügig: Text soll über die Fläche atmen,
     nicht in einer schmalen Spalte kleben. */
  --breite-max:   1360px;   /* Standard-Container */
  --breite-weit:  1560px;   /* Full-Bleed-nahe Bänder */
  --breite-lese:  78ch;     /* Lesemaß für Fließtext-Blöcke */
  --rand-seite:   clamp(1.25rem, 5vw, 4rem);

  --radius-klein: 10px;
  --radius:       18px;
  --radius-gross: 28px;

  --schatten:       0 18px 40px rgba(8, 48, 60, .09);
  --schatten-hoch:  0 30px 60px rgba(8, 48, 60, .14);
  --schatten-weich: 0 2px 8px rgba(8, 48, 60, .04);

  --abstand-sektion: clamp(4.5rem, 9vw, 9rem);
}

/* ── Reset (minimal, modern) ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-basis);
  color: var(--farbe-text);
  background: var(--farbe-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3 { line-height: 1.14; font-weight: 700; text-wrap: balance; letter-spacing: -.018em; }
p { text-wrap: pretty; }

/* Barrierefreiheit */
:focus-visible { outline: 3px solid var(--farbe-primaer); outline-offset: 2px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}