/* ========================================================================= Design_Final — Design_6 „Ordination" als Basis, ergänzt um die Elemente aus Design_5, die der Kundin dort besser gefallen haben. BASIS BLEIBT DESIGN_6: - warmes Off-White als Grund, weiße Karten, wechselnde helle Bänder - TAUPE als gleichberechtigte zweite Markenfarbe: Sekundärbuttons, Fußband, Infiltrationsband, zweite Zeile der Hauptüberschrift - zweifarbige Überschriften, Versalien mit weiter Sperrung - Fotos, die zum Seitenrand auslaufen, mit überlagerten Textspalten AUS DESIGN_5 ÜBERNOMMEN: - Primärbuttons tragen den roten Logoverlauf statt Volltonfarbe - deutlich stärker abgerundete Ecken (Buttons 12 px statt 8, Karten 18 px statt 8, Bildrahmen 22 px statt 14) - der Button „Befunde abrufen" im Seitenkopf - Logo als Bildmarke mit Wortmarke rechts daneben ZUR LESBARKEIT — zwei Punkte, die den Farbwerten zugrunde liegen: 1. TAUPE: #77685A — warm, aber weder rot noch braun. Der Weg dorthin: #938173 Vorlage Farbton 26°, Sättigung 13 % — für Schrift zu hell #80594D Runde 1 Farbton 14°, Sättigung 25 % — zu rot #7C6250 Runde 2 Farbton 25°, Sättigung 22 % — noch zu braun #77685A jetzt Farbton 29°, Sättigung 14 % Sättigung wie die Vorlage, Farbton etwas weiter vom Rot weg, und dunkel genug für Schrift. Lesbarkeit: auf Grund #FAF9F7 5,1:1 auf hellem Band #F4F1ED 4,8:1 Weiß darauf 5,4:1 Die Grenze für Fließtext liegt bei 4,5:1. Viel heller darf der Ton deshalb nicht werden, sonst leidet die gesperrte Kleinschrift. Eine Abstufung genügt also. Die Namen --taupe-dunkel, --taupe-text und --taupe-tief bleiben als Verweise bestehen, damit keine Regel angepasst werden muss. 2. ROTER VERLAUF. Das helle Ende des Logoverlaufs (#F13835) trägt weißen Text nur mit 3,9:1 — zu wenig für einen Button. Deshalb gibt es wie in Design_5 zwei Verläufe: --verlauf-text dunkel genug für weiße Schrift (5,1:1 bis 8,5:1) --verlauf-deko der volle Logoverlauf, ausschließlich für Dekoration Hinter Text steht nie --verlauf-deko. ========================================================================= */ :root { /* --- Marke ------------------------------------------------------------ */ --rot-grad-hell: #F13835; /* nur Dekoration */ --rot-grad-dunkel: #961B20; --rot: #C62828; /* Icons, Striche — 5,3:1 auf Grund */ --rot-dunkel: #A81F23; /* roter Text */ --rot-tint: #FBEEEC; /* --- Taupe: die zweite Markenfarbe der Seite ------------------------- Texte und Flächen tragen denselben Ton. --taupe-hell ist dessen sehr helle Tönung für Hover-Flächen und Platzhalter, im selben Farbton. */ --taupe: #77685A; /* Texte und Flächen — 5,1:1 auf Grund, Weiß darauf 5,4:1 */ --taupe-dunkel: var(--taupe); --taupe-hell: #F1EDE8; /* helle Tönung desselben Farbtons */ /* Beibehaltene Namen, damit die Regeln unverändert greifen. */ --taupe-text: var(--taupe-dunkel); /* Sperrschrift, Sublines */ --taupe-tief: var(--taupe-dunkel); /* Sekundärbuttons, Fußband */ /* --- Neutrale --------------------------------------------------------- */ --tinte: #161D30; /* Überschriften — 15,9:1 */ --fliesstext: #4A4640; /* Fließtext, warm — 8,9:1 */ --linie: #E6E1DA; --grund: #FAF9F7; /* Seitengrund */ --grund-alt: #F4F1ED; /* wechselndes Band */ --weiss: #FFFFFF; --gruen: #4F6B52; /* Nachhaltigkeit */ /* --- Rollen ----------------------------------------------------------- */ --bg: var(--grund); --bg-alt: var(--grund-alt); --bg-karte: var(--weiss); --text: var(--fliesstext); --text-leise: var(--taupe-text); --akzent: var(--rot); --akzent-text: var(--rot-dunkel); /* --- Verläufe (aus Design_5) ------------------------------------------ --verlauf-text : dunkel genug, um weiße Schrift zu tragen --verlauf-deko : voller Logoverlauf, nie hinter Text --verlauf-linie : für Striche und schmale Kanten --verlauf-flaeche: kaum sichtbarer Verlauf auf hellen Flächen */ --verlauf-text: linear-gradient(135deg, #D02E2C 0%, var(--rot-grad-dunkel) 100%); --verlauf-text-hover: linear-gradient(135deg, #B82725 0%, #7F171B 100%); --verlauf-deko: linear-gradient(135deg, var(--rot-grad-hell) 0%, var(--rot-grad-dunkel) 100%); --verlauf-linie: linear-gradient(90deg, var(--rot-grad-hell), var(--rot-grad-dunkel)); --verlauf-flaeche: linear-gradient(180deg, var(--weiss) 0%, #FDFBF9 100%); /* --- Schrift ---------------------------------------------------------- */ --font-display: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --font-text: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --h1: clamp(2.1rem, 1.4rem + 2.8vw, 3.6rem); --h2: clamp(1.5rem, 1.2rem + 1.4vw, 2.3rem); --h3: clamp(1.02rem, 0.98rem + 0.3vw, 1.15rem); --fliess: 1rem; --klein: 0.9375rem; --mikro: 0.75rem; --lh-eng: 1.15; --lh-text: 1.7; --masz: 62ch; /* Sperrung der Versalien — die Handschrift der Vorlage */ --sperr-weit: 0.22em; --sperr-mit: 0.14em; /* --- Raster ----------------------------------------------------------- */ --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4.5rem; --s9: 6rem; --breite: 1200px; --breite-eng: 740px; --rand: clamp(1.25rem, 5vw, 3rem); /* --- Form: die Rundungen aus Design_5 -------------------------------- Design_6 war hier bewusst ruhig (Buttons und Karten 8 px). Auf Wunsch der Kundin gelten jetzt die weicheren Werte aus Design_5. Bilder bekommen den größten Radius — große Flächen vertragen mehr Rundung als kleine. */ --radius-btn: 12px; /* Design_6: 8 px · Design_5: 12 px */ --radius-klein: 8px; /* Chips, Menüschalter */ --radius: 18px; /* Karten, Bänder — Design_6: 8 px */ --radius-bild: 22px; /* Bildrahmen und Platzhalterflächen */ --radius-groß: 26px; /* Hero-Foto, große Bänder */ --radius-tile: 14px; /* die roten Icon-Kacheln der Vorlage */ --schatten: 0 1px 2px rgb(22 29 48 / 0.04); --schatten-hoch: 0 2px 6px rgb(22 29 48 / 0.06), 0 14px 32px -16px rgb(22 29 48 / 0.16); /* Der weiche Farbschatten unter den Verlaufsbuttons — aus Design_5. */ --schatten-rot: 0 6px 18px -8px rgb(150 27 32 / 0.45); --schatten-rot-hoch: 0 12px 26px -8px rgb(150 27 32 / 0.55); --fokus: var(--rot-dunkel); --tempo: 200ms; --kurve: cubic-bezier(0.2, 0.7, 0.3, 1); }