:root {
  /* Marke — gedecktes Blau aus dem Flyer, passend zu Logo und Raumfotos;
     dazu eine warme Koralle als Akzent */
  --farbe-primaer:        #2a6383;
  --farbe-primaer-dunkel: #1d4a63;
  --farbe-primaer-hell:   #dcebf3;
  --farbe-akzent:         #b67e6f;
  --farbe-akzent-hell:    #f8ece8;
  /* Der Akzent hat auf dem Hintergrund nur 3,01:1 und taugt damit für
     Flächen und Kanten, nicht für Text. Diese dunklere Fassung: 6,26:1. */
  --farbe-akzent-text:    #8a4535;

  /* Flächen & Text — Text im Rotbraun des Flyers statt in Schwarz */
  --farbe-hintergrund:    #eaf3f8;
  --farbe-flaeche:        #ffffff;
  --farbe-flaeche-alt:    #e3eff6;
  --farbe-text:           #3f2025;
  --farbe-text-leise:     #5c4448;   /* 7,86:1 auf Hintergrund — trägt fast allen Sekundärtext */
  --farbe-rahmen:         #c9dde8;

  /*
     Semantische Tokens für Kopf, Fuß und die getönte Sektion. Die Komponenten
     lesen nur diese Tokens, nicht die allgemeinen Farben - so lässt sich das
     Erscheinungsbild von Kopf und Fuß an einer Stelle ändern. Kopf und Fuß
     stehen im Flyerblau (#72aac5). Fließtext steht nie auf diesem Blau
     (Weiß darauf hätte nur 2,54:1), sondern auf dem hellen Grund; auf dem
     Blau stehen Rotbraun-Texte (5,73:1).
  */
  --farbe-kopf-hintergrund: #72aac5;
  --farbe-kopf-rahmen:      rgb(63 32 37 / .25);
  --farbe-kopf-text:        var(--farbe-text);
  --farbe-kopf-umschalter-rahmen: var(--farbe-text);
  /* Navigation: Hover und aktive Seite teilen sich Fläche und Textfarbe.
     Weiße Tönung statt Blau auf Blau; sie liegt auch im aufgeklappten
     Mobilmenü (selbes Blau) richtig. Die aktive Seite trägt zusätzlich eine
     Unterstreichung, damit sie nicht allein an einem Helligkeitsunterschied
     hängt. */
  --farbe-nav-zustand-hintergrund: rgb(255 255 255 / .35);
  --farbe-nav-zustand-text:        var(--farbe-text);
  --nav-aktiv-dekoration:          underline;
  --farbe-kopf-logo-hover:         var(--farbe-text);
  --kopf-logo-hover-dekoration:    underline;
  --farbe-nav-menue-hintergrund:   var(--farbe-kopf-hintergrund);

  --farbe-fuss-hintergrund: #72aac5;
  --farbe-fuss-rahmen:      rgb(63 32 37 / .25);
  --farbe-fuss-text:        var(--farbe-text);
  --farbe-fuss-titel:       var(--farbe-text);
  --farbe-fuss-link:        var(--farbe-text);

  --farbe-sektion-getoent:  #a6cade;
  /* Hover-Farbe von Textlinks. Die Markenfarbe hätte auf der getönten Sektion
     (#a6cade) nur 3,78:1; dieses dunklere Blau hält den Hover sichtbar. */
  --farbe-link-hover:       #14384c;

  /* Signale */
  --farbe-erfolg:  #2f6f4e;
  --farbe-fehler:  #a3352b;
  --farbe-hinweis: #8a5b13;

  /*
     Typografie - beide Schriften selbst gehostet (@font-face in base.css),
     die Stapel dahinter sind reine Rückfallebene für die Sekunde vor dem
     Laden. Die Rückfallschriften sind bewusst derselben Gattung wie die
     jeweilige Hauptschrift, damit der Austausch die Seite nicht umbaut.
  */
  --font-text: "Alegreya Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-headline: "Alegreya", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --schrift-basis: 1.0625rem;   /* 17px */
  --zeilenhoehe: 1.65;
  --scale-h1: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem);
  --scale-h2: clamp(1.5rem, 1.15rem + 1.3vw, 2.1rem);
  --scale-h3: 1.375rem;
  --scale-h4: 1.0625rem;

  /* Raster & Abstände (4px-Basis) */
  --abstand-1: .25rem; --abstand-2: .5rem;  --abstand-3: .75rem;
  --abstand-4: 1rem;   --abstand-6: 1.5rem; --abstand-8: 2rem;
  --abstand-12: 3rem;  --abstand-16: 4rem;
  --breite-inhalt: 68rem;
  --breite-text: 42rem;

  /* Lichtbox (Bildergalerie im Overlay) — kein reines Schwarz, sondern ein
     abgedunkeltes Blau aus der Markenfarbe: das Overlay bleibt Teil der
     Seite statt eines Fremdkörpers. */
  --farbe-overlay:         rgb(14 36 50 / .94);
  --farbe-overlay-rahmen:  rgb(255 255 255 / .25);
  --farbe-overlay-flaeche: rgb(255 255 255 / .12);
  --schatten-gross:        0 12px 40px rgb(14 36 50 / .45);

  /*
     Symbole der Hinweisboxen als SVG-Pfade. Sie werden ausschliesslich als
     Maske verwendet, die Farbe kommt aus den Tokens oben - "black" im SVG
     ist deshalb keine Designfarbe, sondern nur volle Deckkraft der Maske.
     Als Maske ist das Symbol nie Text und wird von Screenreadern nicht
     vorgelesen; die Bedeutung steht dort in role="status"/"alert".
  */
  --symbol-hinweis: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm-1 5h2v2h-2V7zm0 4h2v6h-2v-6z"/></svg>');
  --symbol-erfolg:  url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M9.6 17.2L4.4 12l1.4-1.4 3.8 3.8L18.2 5.4l1.4 1.4z"/></svg>');
  --symbol-fehler:  url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M12 2l10 18H2L12 2zm-1 7h2v5h-2V9zm0 7h2v2h-2v-2z"/></svg>');

  /* Form */
  --radius: .5rem; --radius-gross: 1rem;
  --schatten: 0 1px 2px rgb(0 0 0 / .06), 0 4px 12px rgb(0 0 0 / .06);
  --fokus-ring: 3px solid var(--farbe-akzent);
  /* Auf Flyerblau (Kopf, Fuß) hätte der Koralle-Ring nur 1,33:1. Dort setzt
     layout.css diesen rotbraunen Ring (5,73:1 auf Blau). */
  --fokus-ring-auf-blau: 3px solid var(--farbe-text);
  /* Der Akzent-Ring hat gegen die Markenblau-Flächen nur 1,93:1. Der helle Halo
     dahinter macht den Fokus auf jedem Grund sichtbar. */
  --fokus-halo: 0 0 0 6px rgb(234 243 248 / .95);
}