/* * Ad Astra Lab 2026 – Design-Ergänzungen zu theme.json. */ /* ── Eckenradien ── Die Skala steht in theme.json unter settings.border.radiusSizes und kommt hier als --wp--preset--border-radius--* an. Nicht settings.custom nehmen: radiusSizes (WP 6.9+) füttert zusätzlich den Radius-Regler im Block-Editor, der damit stufenweise rastet, statt frei px/rem/em laufen zu lassen. Keine festen Zahlen mehr im Stylesheet: 10 0,375rem Submenü-Einträge 20 0,5rem Verbands-Badges 30 0,625rem Footer-Logo, Submenü-Karte 40 0,75rem FAQ-Items, Inhaltsbilder (is-style-rounded-soft) 50 1rem Kacheln, Therapiekarten 60 1,5rem Hero-Porträt – der weichste Radius, dem Leitbild vorbehalten pill 999px Buttons, Chips 60 ist zusätzlich in theme.json der Standard für core/image. Der Wert steht dort als `:root :where(.wp-block-image img, …)`, also mit Spezifität 0 – jede Regel hier im Stylesheet schlägt ihn, ohne !important. Deshalb bleiben Footer-Logo (30) und Inhaltsbilder (40) unverändert eckiger. Die 0,25rem am Fokusring unten gehören bewusst nicht zur Skala: Das ist die Ecke eines Indikators, keine Fläche. */ /* ── Basis ── */ html { scroll-behavior: smooth; } ::selection { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--contrast); } /* ── Lange Wörter ── Deutsch baut Komposita, und die Rechtstexte enthalten volle URLs. „Verbraucherschlichtung/Universalschlichtungsstelle" schob das Impressum bei 320px um 252px aus dem Bild – als H2 mit 32px umso deutlicher. break-word greift erst, wenn ein Wort sonst nicht passt, ändert an normalem Textumbruch also nichts. Auf schmalen Schirmen zusätzlich echte Silben- trennung für Überschriften: ein Trennstrich liest sich besser als ein harter Bruch mitten im Wort. Grundlage ist das lang="de" am . */ body { overflow-wrap: break-word; } @media (max-width: 599px) { .wp-block-heading, h1, h2, h3 { -webkit-hyphens: auto; hyphens: auto; } } /* ── Fokus-Indikator ── Gold-dark (#c4994a) erreicht auf Weiß nur 2,62:1 und verfehlt damit die 3:1 aus WCAG 2.2 (1.4.11 Non-text Contrast). Petrol-deep liegt bei 15,08:1 auf Weiß, 13,74:1 auf Creme und 7,62:1 auf dem Gold-Button; der weiße Halo sorgt zusätzlich für Kontrast auf den dunklen Petrol-Flächen. Reihenfolge ist Absicht: :focus zuerst als Fallback, weil Safari 15.0–15.3 :focus-visible noch nicht kennt und eine gruppierte Regel mit unbekanntem Selektor komplett verwirft. */ a:focus, button:focus, summary:focus, input:focus, select:focus, textarea:focus, [tabindex]:focus { outline: 3px solid var(--wp--preset--color--petrol-deep); outline-offset: 2px; box-shadow: 0 0 0 5px #fff; border-radius: 0.25rem; } /* Wo :focus-visible unterstützt wird: Ring nur für Tastatur, nicht für Maus. */ a:focus:not(:focus-visible), button:focus:not(:focus-visible), summary:focus:not(:focus-visible), [tabindex]:focus:not(:focus-visible) { outline: none; box-shadow: none; } /* ── Adminleiste (nur für angemeldete Benutzer) ── WordPress schiebt das Dokument per html { margin-top } nach unten und legt die Leiste darüber. Jedes fest oder klebend positionierte Element im Theme muss diese Höhe kennen, sonst verschwindet es darunter. Die Höhe wechselt bei 783px von 32 auf 46px – nicht bei einem der Theme-Breakpoints. Deshalb eine eigene Grenze, die WordPress' Wert spiegelt. */ /* Grundwerte auf :root, die Umschaltung auf body – „admin-bar" ist eine Body-Klasse. So sind die Variablen auch für Elemente außerhalb von definiert; sonst wäre dort jedes calc() damit ungültig und fiele auf 0. */ :root { --alab-admin-h: 0px; /* Höhe der Topbar, wenn sie sichtbar ist – unter 600px ist sie ausgeblendet. Der klebende Header schiebt sich um genau diesen Betrag nach oben aus dem Bild (siehe „Header: sticky mit Blur"), damit dauerhaft nur die Navigationszeile Platz kostet. Rechenweg: Zeile (0,8125rem × 1,7) + Innenabstand (2 × 0,5rem) = 38,1px. Beide Faktoren sind festgeschrieben – die Zeilenhöhe unten auf `.site-topbar`, der Innenabstand im Pattern `patterns/header.php`. Wer einen davon ändert, muss diesen Wert nachziehen, sonst bleibt entweder ein Streifen Topbar stehen oder die Navigation wird oben angeschnitten. */ --alab-topbar-h: 0px; /* Höhe der dauerhaft klebenden Navigationszeile plus etwas Luft – Grundlage für Sprungziele. Gemessen: 89px unter 600px, 87px darüber. Die Topbar zählt nicht mehr mit, sie ist beim Scrollen weggeklappt; deshalb ein Wert für alle Breiten statt der früheren drei Stufen (6 / 8,5 / 11,25rem). 112px lassen rund 24px Luft unter der Leiste – nachgemessen. */ --alab-sticky-h: 7rem; /* Motion-Tokens (animations.dev): ease-out Enter, ease Hover-Farbe, ease-in-out für Bewegung auf dem Schirm. Nur transform/opacity. */ --alab-ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* out-quint */ --alab-ease-move: cubic-bezier(0.645, 0.045, 0.355, 1); /* in-out-cubic */ --alab-ease-hover: ease; --alab-dur-micro: 150ms; --alab-dur-ui: 220ms; --alab-dur-move: 400ms; /* FAQ-Klappe: Chevron (CSS) und Panelhöhe (alab-motion.js) gehören zu einer Geste und laufen deshalb gleich lang. Der Zahlwert steht als FAQ_DUR_OPEN auch in assets/js/src/alab-motion.mjs – beim Ändern beide Stellen nachziehen. */ --alab-dur-faq: 260ms; /* Elevation-Rang: portrait ≈ header > card hover > FAQ open > card rest; Rating = null. Petrol-getönte Schatten, nie reines Schwarz. */ --alab-elev-rest: 0 1px 2px rgba(6, 42, 54, 0.04), 0 8px 20px -14px rgba(6, 42, 54, 0.10); --alab-elev-hover: 0 12px 28px -14px rgba(6, 42, 54, 0.16); --alab-elev-faq-open: 0 12px 28px -14px rgba(6, 42, 54, 0.12); --alab-elev-portrait: 0 20px 40px -18px rgba(6, 42, 54, 0.22); --alab-elev-header: 0 10px 28px -18px rgba(6, 42, 54, 0.28); /* Primär-CTA (Design-Vorgabe): Pill, Gold als Fläche, leises Licht von links, weicher Schatten – ruhig genug für eine Praxis, klar genug für Conversion. Kein flaches Flat, kein hartes Metall. */ --alab-btn-gold: linear-gradient( 108deg, #e2c58f 0%, #dbb26f 40%, #d4ab62 72%, #cfa65c 100% ); --alab-btn-gold-hover: linear-gradient( 108deg, #dbb26f 0%, #cda65a 42%, #c4994a 100% ); --alab-btn-gold-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 6px 18px -8px rgba(6, 42, 54, 0.22), 0 1px 3px rgba(6, 42, 54, 0.08); --alab-btn-gold-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 24px -10px rgba(6, 42, 54, 0.26), 0 2px 4px rgba(6, 42, 54, 0.08); --alab-btn-gold-shadow-active: inset 0 1px 2px rgba(6, 42, 54, 0.1), 0 2px 6px -2px rgba(6, 42, 54, 0.16); } body.admin-bar { --alab-admin-h: 46px; } @media (min-width: 600px) { :root { --alab-topbar-h: calc(0.8125rem * 1.7 + 1rem); /* 38,1px – Rechenweg oben */ } } @media (min-width: 783px) { body.admin-bar { --alab-admin-h: 32px; } } /* Unter 783px setzt WordPress die Leiste auf position: absolute – sie scrollt dann weg. Für Burger und Schließen-Kreuz heißt das: Der Burger säße bei Scrollposition 0 auf y=84, gescrollt auf y=38. Eine feste Position für das Kreuz kann beides nicht treffen, und genau davon lebt die Ausrichtung. Mit fixed ist die Geometrie konstant – und die Leiste bleibt beim Scrollen erreichbar, so wie auf dem Desktop auch. */ @media (max-width: 782px) { .admin-bar #wpadminbar { position: fixed; } } /* Die klebende Kopfzeile verdeckt sonst jedes Sprungziel – inkl. dem Skip-Link-Ziel. Bei angemeldeten Benutzern kommt die Adminleiste dazu. */ :target, #wp--skip-link--target, [id] { scroll-margin-top: calc(var(--alab-sticky-h) + var(--alab-admin-h)); } /* ── Reduzierte Bewegung ── Relevant für die Zielgruppe: Angst- und Traumapatienten reagieren überdurchschnittlich oft empfindlich auf Bewegung. alab-motion.js startet bei reduce gar nicht; CSS killt trotzdem alle Transitionen/Transforms. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .wp-block-button__link:hover, .wp-block-button__link:active, .wp-block-group.is-style-kachel:hover, .wp-block-group.is-style-kachel:focus-within, .alab-tile:hover, .alab-tile:focus-within, .therapy-card:hover, .therapy-card:focus-within, .therapy-card:hover .wp-block-cover__image-background, .therapy-card:focus-within .wp-block-cover__image-background, .site-header .nav-cta > a.wp-block-navigation-item__content:hover, .site-header .nav-cta > a.wp-block-navigation-item__content:active, .wp-block-navigation .nav-cta > a.wp-block-navigation-item__content:hover, .wp-block-navigation .nav-cta > a.wp-block-navigation-item__content:active { transform: none; } .alab-will-reveal { opacity: 1 !important; transform: none !important; } } /* Motion.js-Reveal: will-change nur während der Animation (Klasse setzt JS). Kein dauerhaftes opacity:0 im CSS – Progressive Enhancement ohne FOUC. */ .alab-will-reveal { will-change: transform, opacity; } .alab-revealed { will-change: auto; } /* Boot-Verstecken gegen den Hero-Flicker: `js-alab-motion-boot` setzt ein Inline-Skript im Head vor dem ersten Paint (functions.php) – nur mit JS und nur ohne prefers-reduced-motion. Die Selektoren spiegeln exakt die Sequenz, die initHero() in alab-motion.js einsammelt (Kinder der ersten Spalte plus die zweite Spalte). alab-motion.js löst die Klasse beim Start im selben synchronen Task, in dem es die Inline-Startwerte setzt; bleibt das Skript aus, räumt der Timeout im Head nach 2,5 s ab. Ohne JS existiert die Klasse nie – Crawler und No-JS-Besucher sehen den Hero sofort. */ @media screen { html.js-alab-motion-boot .home-hero .wp-block-columns > .wp-block-column:first-child > *, html.js-alab-motion-boot .home-hero .wp-block-columns > .wp-block-column:nth-child(2) { opacity: 0; } } /* ── Layout-Korrekturen zu Core ── Core setzt :where(.wp-site-blocks) > * { margin-block-start: 1.25rem }.

ist erstes Kind und bekommt 0,

erbt die 1,25rem – dadurch klaffte zwischen Header-Trennlinie und farbigem Hero eine weiße Lücke. Jedes Template steuert seinen oberen Abstand ohnehin über eigenes Padding. */ .wp-site-blocks > main { margin-block-start: 0; } /* Dieselbe 1,25rem trifft den Footer – nur sitzt sie auf