/* ============================================================ * Stoll tokens.css — 1:1 aus dem Design-System-Export (Paket 2, * _ds/tokens/{colors,typography,spacing}.css). NIEMALS eigene * Werte erfinden — Aenderungen zuerst hier, dann Elementor-Globals * nachziehen (Handoff 01/09). Geladen VOR design-system.css; * die --pst-*-Aliase dort verweisen auf diese Quelle. * ============================================================ */ /* ————— Praxiskliniken Dr. Stoll & Kollegen — Color tokens ————— */ :root { /* Brand — gold (from Signet / logo) */ --gold-300: #E0CFA4; --gold-400: #D6BF88; --gold-500: #CBAE6B; /* Brand gold — Signet background */ --gold-600: #B3954F; /* Hover / pressed */ --gold-700: #93783D; /* Dekor-Gold dunkel (nur large text ≥24px / Deko) */ --gold-800: #7D6529; /* Text-Gold auf hellen Flaechen — WCAG AA 27.07.: 5,6:1 weiss / 5,3:1 sand50 / 4,9:1 sand100 */ /* 03.08.2026: Hover-/Pressed-Stufe fuer TEXT auf hellen Flaechen. * gold-600 (die bisherige Hover-Farbe) haelt als Text kein AA — gemessen * 2,87 weiss / 2,73 sand-50 / 2,52 sand-100 — und wurde trotzdem an ~10 * Stellen als Hover-Textfarbe benutzt. gold-900 haelt 8,12 / 7,72 / 7,15 * und ist von gold-800 (Ruhezustand) mit 1,46:1 sichtbar unterscheidbar, * der Hover bleibt also wahrnehmbar. gold-600 bleibt gueltig fuer FLAECHEN * (Button-Hover) und auf dunklem Grund. */ --gold-900: #5E4E20; /* gemessen 03.08.: 8,12 weiss / 7,72 sand50 / 7,15 sand100 */ /* Brand — charcoal (logo text) */ --ink-900: #262626; --ink-800: #333333; /* Brand charcoal — logo wordmark */ --ink-600: #55524B; /* 03.08.2026: neue Stufe fuer GEDAEMPFTEN TEXT. ink-400 haelt als Text auf * hellen Flaechen kein AA (gemessen 3,67 weiss / 3,49 sand-50 / 3,23 * sand-100) und wurde trotzdem an 14 Stellen als color: benutzt (Hinweise, * "(optional)", Platzhalter, Notizen). ink-500 ist der HELLSTE Wert, der auf * allen drei hellen Flaechen >= 4,5 bleibt (5,39 / 5,12 / 4,74) und dabei * klar heller als der Fliesstext ink-600 (7,79) — die Hierarchie stimmt * also weiter. ink-400 bleibt unveraendert fuer RAHMEN (--border-control, * dort genuegen 3:1) und darf nicht mehr als Textfarbe verwendet werden. */ --ink-500: #6E6A61; --ink-400: #8A857B; /* Warm neutrals */ --sand-50: #FBF9F5; /* Page-section background */ --sand-100: #F5F0E6; /* Gold-tinted panel */ --sand-200: #EAE3D3; /* Borders, dividers */ --white: #FFFFFF; /* Semantic aliases */ --surface-page: var(--white); --surface-section: var(--sand-50); --surface-panel: var(--sand-100); --surface-card: var(--white); --surface-inverse: var(--ink-800); --surface-accent: var(--gold-500); --text-heading: var(--ink-800); --text-body: var(--ink-600); --text-muted: var(--ink-500); --text-on-inverse: #F6F3EC; --text-on-accent: var(--white); --text-accent: var(--gold-800); --border-default: var(--sand-200); --border-strong: var(--gold-500); /* 17.2 (Handoff 01.08.2026, BINDING): dekorativ vs. funktional getrennt. * sand-200 auf Weiss = 1,17:1 und verletzt WCAG 1.4.11 an Bedienelementen — * Inputs/Selects/Textareas/Checkboxen/Dropzones/inaktive Chips MUESSEN * --border-control (3,2:1) tragen; sand-200 bleibt nur fuer Trennlinien * und Card-Konturen erlaubt. Fokus: gold-700 (4,6:1) + Ring. */ --border-decor: var(--sand-200); --border-control: var(--ink-400); --focus-border: var(--gold-700); --focus-ring: 0 0 0 3px rgba(147, 120, 61, 0.22); --link: var(--gold-800); /* 03.08.2026: war gold-600 = 2,87:1 auf Weiss — der GLOBALE Link-Hover * verletzte AA auf jeder hellen Seite. gold-900 haelt 8,12:1 und bleibt * von --link (gold-800) sichtbar unterscheidbar. */ --link-hover: var(--gold-900); /* Feedback (used sparingly — forms only) */ --success: #4E7A3A; --error: #A8442F; /* Gold gradients — nur für Icon-Flächen/-Füllungen, nie für Flächen-Backgrounds ganzer Sektionen */ --grad-gold: linear-gradient(135deg, #D6BF88 0%, #CBAE6B 55%, #B3954F 100%); /* @kind other */ --grad-gold-deep: linear-gradient(135deg, #CBAE6B 0%, #93783D 100%); /* @kind other */ --grad-ink: linear-gradient(135deg, #3D3D3D 0%, #262626 100%); /* @kind other */ } /* ————— Typography tokens — Carnas W03 ————— */ :root { --font-brand: "Carnas", "Segoe UI", system-ui, sans-serif; /* Scale (desktop, 1920 design width) */ --text-display: 800 clamp(40px, 4.5vw, 64px)/1.05 var(--font-brand); /* Hero H1 */ --text-h1: 800 44px/1.1 var(--font-brand); --text-h2: 800 32px/1.15 var(--font-brand); --text-h3: 700 22px/1.3 var(--font-brand); --text-eyebrow: 500 15px/1.2 var(--font-brand); /* + letter-spacing .14em, uppercase, gold */ --text-body-lg: 400 19px/1.65 var(--font-brand); --text-body: 400 17px/1.6 var(--font-brand); --text-small: 400 15px/1.5 var(--font-brand); --text-button: 700 16px/1 var(--font-brand); --text-quote: 500 24px/1.45 var(--font-brand); /* italic */ --tracking-eyebrow: 0.14em; --tracking-display: -0.01em; } /* D1.3 S-F GEFUNDEN+GEFIXT: die "body {"-Zeile fehlte seit Anlage dieser * Datei (git-log zeigt nur EINE Version, nie anders) — macht diesen ganzen * Block zu einer verwaisten Deklarationsliste mit ueberzaehliger `}`, was * den danach folgenden Spacing/Radius/Shadow/Motion-:root-Block komplett * unparsebar machte (computed --space-9/--radius-sm/--shadow-card etc. * waren ueberall LEER — u.a. .stoll-card:hover{box-shadow:var(--shadow- * card)} hatte dadurch STILLE keinen Schatten). 1:1 wiederhergestellt aus * der Quelle (_ds/tokens/typography.css) — Body-Basiswerte + h1-4/a/strong * sind spezifitaets-schwach (0,0,1) und werden von Elementor-Kit- bzw. * .elementor-element--Regeln ueberall ueberstimmt (verifiziert, * sichtbar NUR dort wirksam wo bislang gar keine Regel griff). */ body { margin: 0; font: var(--text-body); color: var(--text-body); background: var(--surface-page); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { color: var(--text-heading); margin: 0; } a { color: var(--link); text-decoration: none; } a:hover { color: var(--link-hover); } strong { color: var(--text-heading); font-weight: 700; } /* ————— Spacing, radius, shadow, motion ————— */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --section-pad-y: var(--space-9); /* Breiten-System (03.08.2026 — Joe: "1350 -> 1615 global"): * Inhalts-Wrapper (--content-max) und Elementor-Kit container_width * (Kit-Posts 934/14) laufen jetzt BEIDE auf 1615px — ein einziger * Layout-Rahmen statt der frueheren Zweistufigkeit (1320/1376 innen). * Fliesstext bleibt zusaetzlich bei der Measure-Grenze (13.1); * Full-Bleed-Ausnahme .stoll-fullbleed (components.css) unveraendert. */ --content-max: 1615px; /* Corners: rectilinear brand — sharp by default, soft only on small controls */ --radius-0: 0px; /* Cards, images, sections — the Stoll square */ --radius-sm: 4px; /* Inputs, tags */ --radius-pill: 999px; /* Pills / slider dots only */ --shadow-card: 0 1px 2px rgba(38, 38, 38, 0.06), 0 12px 32px rgba(38, 38, 38, 0.08); --shadow-float: 0 24px 64px rgba(38, 38, 38, 0.18); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */ --dur-fast: 150ms; /* @kind other */ --dur-med: 300ms; /* @kind other */ --dur-slow: 600ms; /* @kind other */ } /* Full-Bleed-Begleitregel (28.07.2026, Joe-Fund "Whitespace rechts mobil"): * width:100vw schliesst auf Desktop-Browsern die Scrollbar mit ein -> bis * ~15px horizontaler Ueberlauf bei schmalem Fenster. clip (nicht hidden: * clip erhaelt position:sticky) kappt genau diesen Rest. Horizontales * Seiten-Scrolling ist auf dieser Site nie gewollt (Link-/Layout-Audits * pruefen scrollWidth ohnehin auf 0 Ueberlauf). */ html { overflow-x: clip; } /* Bild-Fokuspunkt (Joe 27.07.2026): --pst-focal-x/-y auf einem beliebigen * Eltern-Element (Elementor Advanced-Tab "Bild-Fokuspunkt (Stoll)") steuert * den object-position-Ausschnitt aller cover-beschnittenen Bilder darunter. * Vars ungesetzt = 50%/50% = Browser-Default, Bestand rendert unveraendert. * Komponenten mit eigenem Default (z.B. Portrait-Karten "oben") setzen in * ihrer Regel dieselben Vars mit anderem Fallback. */ img { object-position: var(--pst-focal-x, 50%) var(--pst-focal-y, 50%); }