/* ============================================================================= DESIGN-KONVENTIONEN — Hausarztcenter Albstadt Single Source of Truth fuer das visuelle Erscheinungsbild. Hier — und NUR hier — werden Farben, Schriften, Schriftgroessen (je nach Position: H1/H2/H3/Text/Lead) und Abstaende definiert. Alle Stylesheets benutzen ausschliesslich diese Variablen (Tokens). So bleibt das Design konsistent und an EINER Stelle aenderbar (z.B. Akzentfarbe einmal anpassen -> wirkt ueberall). Regel fuer den Code in style.css: KEINE festen Farb-/Groessen-/Abstandswerte direkt schreiben — immer var(--token) verwenden. Neue Werte hier ergaenzen. ========================================================================== */ :root { /* =========================================================================== 1. FARBEN ========================================================================= */ /* -- Marke (aus Logo/Theme der Praxis) -- */ --farbe-primaer: #0e536d; /* Petrol — Hauptfarbe (Links, Akzente) */ --farbe-primaer-dunkel: #0a3d50; /* dunkler — Ueberschriften in Karten */ --farbe-primaer-hell: #1466a2; /* heller — Verlaeufe, Fokus */ --farbe-navy: #0d1724; /* fast schwarz-blau — Hero, Footer, H1-H4 */ --farbe-akzent: #2bbf8a; /* Tuerkis-Gruen — Buttons, Marker */ --farbe-akzent-dunkel: #25a878; /* Button-Hover */ /* -- Text & Flaechen -- */ --farbe-text: #243240; /* Standard-Fliesstext */ --farbe-text-leise: #5a6b78; /* Nebensaechliches, Beschriftungen */ --farbe-bg: #ffffff; /* Standard-Hintergrund */ --farbe-bg-leise: #f4f6f8; /* abgesetzte Abschnitte/Karten */ --farbe-rand: #e1e8ec; /* Linien, Kartenraender */ --farbe-text-invers: #ffffff; /* Text auf dunklem Grund */ --farbe-text-invers-leise: #e9f1f4; /* gedaempfter Text auf dunklem Grund */ /* -- Schleier ueber den Hero-Bildern -- Liegt als Verlauf UEBER dem Foto, damit weisse Schrift lesbar bleibt. Heller = Bildstruktur tritt staerker hervor, dunkler = mehr Kontrast. Die Werte sind gemessen: mit dem aktuellen Hero-Bild bleibt der Kontrast weisser Schrift bei ~6:1 und damit klar ueber der WCAG-AA-Schwelle (4.5). Wer hier heller dreht, sollte den Kontrast neu pruefen. */ --hero-schleier: linear-gradient(110deg, rgba(12, 72, 95, .80) 0%, rgba(17, 95, 125, .64) 60%, rgba(24, 115, 180, .46) 100%); /* Unterseiten-Koepfe: etwas dichter, da dort weniger Bildflaeche sichtbar ist */ --page-hero-schleier: linear-gradient(110deg, rgba(10, 61, 80, .94) 0%, rgba(14, 83, 109, .88) 55%, rgba(20, 102, 162, .80) 100%); /* =========================================================================== 2. SCHRIFT ========================================================================= */ /* -- Schriftfamilien (selbst gehostet, siehe fonts.css) -- */ --font-text: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-headline: "Montserrat", var(--font-text); /* alle Ueberschriften */ /* -- Schriftgroessen je nach Position -- clamp(min, fluid, max) = skaliert sanft mit der Fensterbreite. */ --groesse-h1: clamp(1.9rem, 4vw, 2.6rem); /* Seitentitel (1x pro Seite) */ --groesse-h2: clamp(1.45rem, 2.6vw, 1.9rem); /* Abschnitts-Ueberschrift */ --groesse-h3: 1.2rem; /* Karten-/Block-Titel */ --groesse-h4: 1rem; /* Unter-Ueberschrift */ --groesse-lead: clamp(1.05rem, 2vw, 1.25rem); /* Einleitungs-Absatz (Hero) */ --groesse-text: 1.05rem; /* Standard-Fliesstext */ --groesse-klein: .9rem; /* Fussnoten, Badges, Datum */ /* -- Schriftstaerken -- */ --staerke-text: 400; --staerke-halbfett: 600; --staerke-fett: 700; /* -- Zeilenhoehen -- */ --zeilenhoehe: 1.65; /* Fliesstext (luftig, gut lesbar) */ --zeilenhoehe-eng: 1.2; /* Ueberschriften */ /* =========================================================================== 3. ABSTAENDE (eine einzige Skala — Schritte ~ x1.5) Ueberall NUR diese Stufen benutzen, damit Abstaende einheitlich sind. ========================================================================= */ --raum-1: .25rem; --raum-2: .5rem; --raum-3: .75rem; --raum-4: 1rem; --raum-5: 1.5rem; --raum-6: 2rem; --raum-7: 3rem; --raum-8: 4rem; /* -- Abgeleitete, benannte Abstaende (fuer einheitliche Rhythmik) -- */ --abschnitt-y: clamp(1.6rem, 3.2vw, 2.4rem); /* Innenabstand oben/unten JEDES Abschnitts */ --hoehe-page-hero: 260px; /* EINHEITLICHE Hoehe der Unterseiten-Koepfe */ --hoehe-header: 74px; /* Kopfzeile. WICHTIG: render.js setzt den Header erst per JS ein; style.css reserviert diesen Platz vorab, damit der Inhalt nicht springt. Beide Stellen lesen diesen einen Wert. */ --container-x: 1.25rem; /* seitlicher Rand des Inhalts-Containers */ --titel-abstand: var(--raum-4); /* Ueberschrift -> Folgetext */ --absatz-abstand: var(--raum-4); /* Abstand zwischen Absaetzen */ --block-abstand: var(--raum-5); /* Abstand zwischen groesseren Bloecken */ /* =========================================================================== 4. FORM (Breiten, Rundungen, Schatten) ========================================================================= */ --breite-max: 1140px; /* maximale Layout-Breite */ --breite-text: 68ch; /* optimale Lesebreite fuer Fliesstext */ --radius: 12px; /* Karten */ --radius-s: 8px; /* Buttons, kleine Flaechen */ --radius-pill: 999px; /* Badges */ --schatten: 0 4px 18px rgba(13, 23, 36, 0.08); --schatten-stark: 0 10px 30px rgba(13, 23, 36, 0.14); /* =========================================================================== 5. EINGABEHILFEN — Marker-Farben ("Links/Ueberschriften hervorheben") ========================================================================= */ --eh-marker-bg: #ffe14d; /* gelbe Hervorhebung */ --eh-marker-text: #111111; /* dunkler Text auf der Hervorhebung */ } /* ============================================================================= EINGABEHILFEN-FARBSCHEMATA — js/eingabehilfen.js setzt diese Klassen auf . Sie ueberschreiben NUR Token-Werte; die Regeln in style.css bleiben unveraendert und uebernehmen die neuen Werte automatisch. ========================================================================== */ /* "Dunkler Kontrast": dunkles Schema, helle Schrift, hellere Linkfarben. --farbe-navy bleibt bewusst unveraendert (Hero/Footer behalten ihren dunklen Grund mit heller Schrift); Ueberschriften werden in style.css nachgezogen. */ html.eh-dunkel { --farbe-text: #f2f6f9; --farbe-text-leise: #c3cfd8; --farbe-bg: #0d1724; --farbe-bg-leise: #13212f; --farbe-rand: #31465a; --farbe-primaer: #8fd0ee; --farbe-primaer-dunkel: #b5e0f4; --farbe-primaer-hell: #8fd0ee; } /* "Heller Kontrast": maximaler Hell-Kontrast (schwarz auf weiss). */ html.eh-hell { --farbe-text: #000000; --farbe-text-leise: #1f1f1f; --farbe-bg: #ffffff; --farbe-bg-leise: #f2f2f2; --farbe-rand: #555555; --farbe-navy: #000000; --farbe-primaer: #003a5c; --farbe-primaer-dunkel: #002741; --farbe-primaer-hell: #003a5c; }