/* ===================================================== VARIANTE 36 - Farbvariante 6 Ozean-Petrol + Sonnengold + Aqua (Kinderpraxis) Leitgedanke: das helle Aqua #e9f5fd der Referenzgrafik als Abschnittshintergrund, dunkles Petrol statt Marine, Gold der Grafik (#b78520) sonniger in die Flaeche gestellt (gold-dunkel auf #cc962b nachgehellt: Hover-Fläche braucht >=4,5:1 fuer die dunkle Button-Schrift koenigsblau-tief). Nur Farbueberschreibungen - KEIN Layout! WCAG-Kontraste (rechnerisch geprueft, 10.09.2026): text auf weiss 13,93:1 / auf creme 12,57:1 (soll >= 7:1) text-hell auf weiss 6,74:1 / auf creme 6,08:1 (soll >= 4,5:1) gold-text auf weiss 5,52:1 / auf creme 4,98:1 (soll >= 4,5:1) koenigsblau auf weiss 8,99:1 / auf creme 8,11:1 (soll >= 4,5:1) weiss auf koenigsblau 8,99:1 (soll >= 4,5:1) gold auf koenigsblau 4,19:1 (soll >= 3:1) Zusatz: koenigsblau-tief auf gold 5,82:1, auf gold-dunkel(Hover) 4,74:1, gold-dunkel auf koenigsblau 3,41:1 ===================================================== */ :root { --farbe-koenigsblau: #0d5061; --farbe-koenigsblau-tief: #083945; --farbe-koenigsblau-hell: #1a7085; --farbe-gold: #e3a63a; --farbe-gold-hell: #f2c266; --farbe-gold-dunkel: #cc962b; --farbe-gold-text : #8a6116; /* Gold als Schriftfarbe, >=4,5:1 auf creme */ --farbe-creme: #e9f5fd; --farbe-creme-dunkel: #d5ecfa; --farbe-weiss: #ffffff; --farbe-text: #123039; --farbe-text-hell: #42606b; --farbe-grau-hell: #f2f9fd; --farbe-grau-mittel: #c6e1ef; --farbe-linie: #cde4f1; --farbe-fehler: #c0392b; /* RGB-Kanäle — passend zu den obigen Hex-Farben */ --farbe-koenigsblau-rgb: 13, 80, 97; --farbe-koenigsblau-tief-rgb: 8, 57, 69; --farbe-gold-rgb: 227, 166, 58; --farbe-creme-rgb: 233, 245, 253; --farbe-fehler-rgb: 192, 57, 43; } /* ===================================================== ANPASSUNGEN NUR FUER DIESEN AUFTRITT (10.09.2026) ===================================================== Diese Datei traegt sonst nur Farbwerte. Hier stehen zusaetzlich ein paar Regeln, die ueber reine Variablen hinausgehen. Das ist Absicht: die Wuensche betreffen ausschliesslich die Kinderpraxis, und main36.css wird von fuenf Auftritten geteilt - darunter die live geschaltete Gelnhausener Seite. Die Variantendatei wird NACH main36.css geladen, deshalb genuegt hier gleiche Spezifitaet. Wer diese Regeln spaeter fuer alle Auftritte haben will, verschiebt sie nach main36.css und loescht sie hier. ===================================================== */ /* --- Kopfbereich hell, Brotkrumenleiste dunkel --------------------------- Wunsch: "header und menue in der hellen farbe - breadcrump in der dunklen". Hell ist das Aqua der Referenzgrafik (--farbe-creme), die Schrift darauf die dunkle Leitfarbe: 8,11:1. Die Brotkrumenleiste dreht das um. */ .header-topbar { background-color: var(--farbe-creme); } .topbar-inner, .topbar-inner a { color: var(--farbe-koenigsblau); } .topbar-inner a:hover { color: var(--farbe-gold-text); } /* Die Adresse steht in einem mit eigener Farbe - cremefarben, also fuer den frueher dunklen Streifen gedacht. Auf dem hellen Grund war sie unsichtbar. Dasselbe bei den Trennstrichen und den kleinen Symbolen. */ .topbar-inner span { color: var(--farbe-koenigsblau); } .topbar-inner i { color: var(--farbe-gold-text); } .topbar-trenner { background-color: rgba(var(--farbe-koenigsblau-rgb), 0.3); } /* Die goldenen Trennlinien standen auf dunklem Grund. Auf dem hellen Aqua braucht es den dunkleren Goldton, sonst verschwinden sie. */ .header-topbar::after { background: linear-gradient(to right, transparent 0%, var(--farbe-gold-dunkel) 20%, var(--farbe-gold-dunkel) 80%, transparent 100%); } .header-nav-row { background-color: var(--farbe-creme); } .header-nav-row::before { background: linear-gradient(to right, transparent 0%, var(--farbe-gold-dunkel) 15%, var(--farbe-gold-dunkel) 85%, transparent 100%); } .header-nav-desktop > ul > li > a { color: var(--farbe-koenigsblau); } .header-nav-desktop > ul > li > a:hover, .header-nav-desktop > ul > li.aktiv > a { color: var(--farbe-gold-text); } .header-nav-desktop > ul > li > a::before { background-color: var(--farbe-gold-text); } /* Burgerknopf: die drei Balken waren cremefarben fuer den dunklen Grund. */ .burger-btn span { background-color: var(--farbe-koenigsblau); } /* Brotkrumenleiste in der dunklen Farbe */ .breadcrumb { background-color: var(--farbe-koenigsblau); border-bottom-color: var(--farbe-koenigsblau-tief); } .breadcrumb ol { color: rgba(255, 255, 255, 0.85); } .breadcrumb a { color: #ffffff; } .breadcrumb a:hover { color: var(--farbe-gold-hell); } .breadcrumb li + li::before { color: var(--farbe-gold-hell); } /* --- Bilder ohne Abdunklung, Schrift mit Kontur ------------------------- Wunsch: "da ist ein overlay, das mal weg, aber die schrift dann mit kontur damit sie lesbar ist. hero auch." Ueber einem Foto laesst sich kein Kontrastwert berechnen - das Bild ist an jeder Stelle anders hell. Die Kontur loest das anders: eine dunkle Umrandung direkt am Buchstaben sorgt dafuer, dass immer ein starker Hell-Dunkel-Sprung an der Schriftkante liegt, egal was dahinter ist. Vier versetzte Schatten bilden die Umrandung, der fuenfte ist ein weicher Schlagschatten, der die Schrift zusaetzlich vom Bild abhebt. */ .slider-folie::after, .seite-header::after { /* 10.09.2026, zweiter Anlauf: die Abdunklung war zuerst ganz weg, auf Wunsch kommt eine leichte zurueck - 10% der Leitfarbe, gleichmaessig. Vorher lag hier ein Verlauf von 82% auf 15%, der die Fotos regelrecht zugedeckt hat. Zum Nachjustieren genuegt die eine Zahl. Die Lesbarkeit der Schrift haengt NICHT an diesem Wert, sondern an der Kontur weiter unten - 10% helfen rechnerisch kaum, sie beruhigen nur das Bild. */ background: rgba(var(--farbe-koenigsblau-rgb), 0.1); } .slider-inhalt h1, .slider-inhalt h2, .seite-header h1, .seite-header .container h1 { color: #ffffff; /* 10.09.2026 feiner gestellt: vorher 2px Umrandung bei 75% Deckkraft - das wirkte wie ein aufgemalter Rand. Jetzt 1px bei 50%, dafuer traegt die weiche Abstufung darunter mehr. Zusammen mit der 10%-Abdunklung reicht das; die Kante bleibt, faellt aber nicht mehr auf. */ text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5), 1px -1px 0 rgba(0, 0, 0, 0.5), -1px 1px 0 rgba(0, 0, 0, 0.5), 1px 1px 0 rgba(0, 0, 0, 0.5), 0 2px 14px rgba(0, 0, 0, 0.55); } .slider-inhalt p, .seite-header p, .seite-header .container p { color: #ffffff; text-shadow: -0.5px -0.5px 0 rgba(0, 0, 0, 0.6), 0.5px -0.5px 0 rgba(0, 0, 0, 0.6), -0.5px 0.5px 0 rgba(0, 0, 0, 0.6), 0.5px 0.5px 0 rgba(0, 0, 0, 0.6), 0 1px 9px rgba(0, 0, 0, 0.6); } /* Der helle Umriss-Knopf hatte nur einen duennen weissen Rahmen und keine Flaeche. Solange die Abdunklung darunter lag, war das lesbar; direkt auf dem Foto nicht mehr. Er bekommt eine leichte dunkle Flaeche - der Umriss-Charakter bleibt, die Schrift steht aber immer auf dunklem Grund. */ .slider-inhalt .btn-hell, .seite-header .btn-hell { background-color: rgba(0, 0, 0, 0.3); border-color: #ffffff; color: #ffffff; /* Auch hier die Kontur statt eines festen Kontrastwerts: eine dunkle Flaeche allein muesste 55% Deckkraft haben, um ueber JEDEM Foto 4,5:1 zu sichern - das waere ein fast schwarzer Klotz. Die Umrandung am Buchstaben leistet dasselbe, ohne den hellen Charakter des Knopfes zu zerstoeren. */ text-shadow: -0.5px -0.5px 0 rgba(0, 0, 0, 0.7), 0.5px -0.5px 0 rgba(0, 0, 0, 0.7), -0.5px 0.5px 0 rgba(0, 0, 0, 0.7), 0.5px 0.5px 0 rgba(0, 0, 0, 0.7), 0 1px 6px rgba(0, 0, 0, 0.6); } .slider-inhalt .btn-hell:hover, .seite-header .btn-hell:hover { background-color: rgba(0, 0, 0, 0.55); } .slider-label { color: var(--farbe-gold-hell); text-shadow: -0.5px -0.5px 0 rgba(0, 0, 0, 0.75), 0.5px -0.5px 0 rgba(0, 0, 0, 0.75), -0.5px 0.5px 0 rgba(0, 0, 0, 0.75), 0.5px 0.5px 0 rgba(0, 0, 0, 0.75), 0 1px 6px rgba(0, 0, 0, 0.6); } /* Ab der zweiten Folie ist die Ueberschrift ein

(je Seite darf es nur EINE h1 geben). main36.css faerbt nur .slider-inhalt h1 weiss - die Folien 2 bis 4 standen deshalb in der dunklen Textfarbe auf dem dunklen Overlay. Genau die Stelle, die gemeldet wurde ("Entspannt zum Zahnarzt"). Oben mit abgedeckt; derselbe Fehler steckt in allen fuenf Auftritten. */