/* ============================================================================ ICKE-FAMILIE · Komponenten + Base — token-only (public/styles/tokens.css). Ziel-Layout: brandbook-v1/web-header-hero-mockup.html. Mobile-First. 🔴 Keine Hardcode-Hexe: alle Farben/Maße aus Tokens → Spur-B-Flip bleibt Token-Wechsel. ============================================================================ */ /* ---- Reset / Base ---- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text-muted); font-family: var(--font-serif); /* Fließtext = Serif (Board 03) */ font-size: var(--fs-body); line-height: var(--lh-body); /* 🔴 SCHRIFTZEICHNUNG — Nicos Entscheidung vom 31.08.2026, Fassung B. ANLASS, woertlich: „Die sehen sonst an den Raendern leicht verwaschen und unscharf aus. Gleiches gilt fuer die Raender von Buttons und auch die Texte auf den Buttons." ⚠️ ZUERST GEMESSEN, OB ES AM KONTRAST LIEGT — tut es nicht, ausser im Hero: 40 von 40 Text-Farbkombinationen auf Flaechen ueber ihrer Schwelle (schlechtester 6,46 gegen 4,5) · alle Knopfbeschriftungen ueber 6,2 · genau EIN Rahmen darunter (Einwilligungs-Banner, 1,22 -> in #340 repariert) · der Hero lag bei 1,01 (#337). 🔴 UND: `-webkit-font-smoothing` stand vorher NIRGENDS. Die naheliegende Vermutung, jemand habe die Zeichnung umgestellt, war falsch. 🔑 WARUM DAS UEBERHAUPT WIRKT: Der Bau ist ueberwiegend HELL AUF DUNKEL. Auf Apple-Geraeten zeichnet der Browser helle Schrift auf dunklem Grund dabei fetter, als sie gesetzt ist — der Buchstabe „laeuft zu". `antialiased` nimmt das zurueck. Das ist das uebliche Mittel gegen genau diesen Eindruck. ⚠️ WAS ES NICHT IST: eine Kontrastaenderung. Die Farben bleiben, nur die Kantenglaettung wechselt. Nachgemessen an den 15 Hero-Kombinationen: identische Werte. ⚠️ UND NICHT MESSBAR VON HIER: Wie das Ergebnis aussieht, entscheidet der Bildschirm. Der Browser, mit dem wir messen, glaettet ohnehin in Graustufen — eine Zahl dazu waere eine Aussage ueber das Werkzeug. Deshalb hat NICO entschieden, an drei Fassungen nebeneinander (A: so wie vorher · B: diese · C: mit Textschatten). 🔑 Ein Textschatten war die naheliegende Idee und macht Schrift SCHWERER, nicht schaerfer. Auf dem Foto im Hero hilft er (dort hebt er den Kontrast oertlich an, siehe .hero-full); auf einer ruhigen Flaeche legt er einen weichen Saum um jeden Buchstaben. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } a { color: var(--accent-ink); } code { background: var(--surface); padding: .1em .35em; border-radius: var(--radius-xs); font-size: .9em; } /* Überschriften: editoriale Serif-Display (Signal-Ton). Label-Headings (Card-Titel/Footer-H4) setzen Grotesk selbst. */ h1, h2, h3, h4 { font-family: var(--font-display); color: var(--signal); line-height: var(--lh-snug); } /* ---- Layout-Helfer ---- */ .wrap { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); } /* ---- a11y ---- */ a, button, input, select, textarea, label, [role="button"], summary { min-height: var(--tap-min); } button, [role="button"], input[type="submit"], input[type="button"], .btn { min-height: var(--tap-min); min-width: var(--tap-min); touch-action: manipulation; } :where(a, button, [role="button"]) { -webkit-tap-highlight-color: transparent; } .skip-link { position: absolute; left: .5rem; top: -3rem; z-index: 100; background: var(--accent); color: var(--on-accent); padding: .5rem .9rem; border-radius: var(--radius-btn); text-decoration: none; transition: top var(--dur) var(--ease); } .skip-link:focus { top: .5rem; } :where(a, button, summary, [role="button"], input, select, textarea):focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-grotesk); font-weight: var(--fw-semibold); font-size: .95rem; border-radius: var(--radius-btn); padding: 12px 22px; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: filter var(--dur) var(--ease), border-color var(--dur) var(--ease); } .btn--primary { background: var(--accent-2); color: var(--on-accent-2); } /* Akzent-2-Fill (Ocker ICKE / Grün AXT) — kontrastierender Text je Marke */ .btn--holz { background: var(--cta); color: var(--on-cta); border-color: var(--cta-border); } /* HAUPT-CTA = Neon-Pop (ICKE/AXT) bzw. Grün (Physio) */ .btn--ghost { background: var(--cta2); border-color: transparent; color: var(--on-cta2); } /* FOLLOW-CTA = Creme-Fill + Anthrazit-Text (Physio: Anthrazit-Fill) */ .btn--primary:hover, .btn--holz:hover, .btn--ghost:hover { filter: brightness(1.06); } /* ---- Header ---- */ .site-header { position: sticky; top: 0; z-index: 40; border-bottom: var(--hairline); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: saturate(120%) blur(8px); } .site-header__inner { max-width: var(--content-max); margin-inline: auto; /* 🔴 Eigener Seitenabstand statt --gutter (28.08.): Der Kopf traegt in einer Zeile, was der Inhalt auf viele verteilt. Mit dem vollen --gutter (bis 64px je Seite) lief er quer. Der Inhalt darunter behaelt --gutter unveraendert. */ padding: 14px clamp(1rem, 3vw, 2.5rem); display: flex; align-items: center; gap: var(--space-4); } .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; } /* Marken-Tick (Ocker ICKE / Grün AXT) — Wortmarken-Signatur statt Signet */ /* 20.09.2026, Nico an zwei Logo-Ausschnitten (ICKE brauner Balken, AXT gruener): „Lass uns mal das gruen auch bei ICKE nehmen." NUR der Balken — deshalb ein eigener Token statt --accent-2 (der haengt an .btn--primary, .card .ic, ArtikelCTA- Rand, einer SVG und bleibt je Marke, wie er ist). --wortmarke-balken steht in tokens.css fuer beide Marken auf Gruen. */ .brand::before { content: ""; align-self: stretch; width: 5px; min-height: 1.35em; background: var(--wortmarke-balken, var(--accent-2)); border-radius: 2px; } .site-footer__brand { position: relative; } .logo-chip { background: var(--icke-creme); border-radius: var(--radius-chip); padding: 6px; display: inline-flex; } .logo-chip img { width: 34px; height: 34px; } .brand .wordmark { font-family: var(--font-grotesk); font-weight: var(--fw-black); font-size: 1.375rem; letter-spacing: .06em; color: var(--signal); } /* Mobile-Toggle: Burger (Label) + verstecktes Checkbox — Nav via :checked ~ nav. 🔴 DAS CHECKBOX WAR `hidden`, UND DAMIT WAR DAS MENUE PER TASTATUR GAR NICHT ZU OEFFNEN. Gemeldet war „kein sichtbarer Fokus-Ring am Burger" (Site-Audit, 04.09.2026). Am Gegenstand gemessen ist es mehr: `hidden` erzeugt `display:none`, und ein solches Element nimmt keinen Fokus an — `nav-toggle.focus()` liess `document.activeElement` auf `BODY` stehen. Das Label ist ohnehin nicht fokussierbar (kein `tabindex`). 🔑 Es fehlte also nicht der RING, sondern der FOKUS. Ein Ring auf einem Element, das nie fokussiert wird, waere die Erfuellung der Meldung und nicht die Behebung des Fehlers. 👉 Bauform ohne JavaScript: das Checkbox bleibt im Tab-Fluss, ist aber unsichtbar geclippt; den Ring zeigt das LABEL, ueber `:focus-visible + .nav-burger`. ⚠️ `clip-path`/`opacity` halten den Fokus, `display:none` und `visibility:hidden` nehmen ihn. ⚠️ Ab dem Umschaltpunkt (seit 22.09.2026: 1260px, vorher 1120), wo der Burger `display:none` ist, wird auch das Checkbox ausgeblendet — sonst steht dort eine unsichtbare Station im Tab-Fluss, die nichts tut. */ .nav-burger { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--text); cursor: pointer; min-height: var(--tap-min); min-width: var(--tap-min); } .nav-toggle { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; pointer-events: none; } /* GEMESSEN, nicht angenommen: die Box wird 1x44 statt 1x1 — als absolut positioniertes Flex-Kind wird sie in der Querachse gestreckt und liegt damit ueber dem Wortmarken-Link. Sie faengt trotzdem keinen Klick ab: clip-path wirkt auch auf die Trefferpruefung, elementFromPoint in ihrer Mitte liefert .brand. Das pointer-events: none oben ist die zweite Sicherung fuer den Fall, dass jemand das Clipping spaeter anders loest — auf den Tastaturfokus hat es keine Wirkung. */ .nav-toggle:focus-visible + .nav-burger { outline: 3px solid currentColor; outline-offset: 2px; border-radius: 4px; } .site-nav { display: none; } .nav-toggle:checked ~ .site-nav { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-bottom: var(--hairline); padding: var(--gutter); } .site-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); } .site-nav a { font-family: var(--font-label); font-weight: var(--fw-semibold); font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); text-decoration: none; } .site-nav a:hover { color: var(--accent-ink); } .site-header .headcta { display: none; } /* Theme-Umschalter (Light/Dark) — immer sichtbar, token-basiert. Icon per effektivem Theme. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; margin-left: var(--space-3); min-height: var(--tap-min); min-width: var(--tap-min); padding: 0 .55rem; background: transparent; color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-btn); cursor: pointer; font-size: 1.05rem; line-height: 1; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .theme-toggle:hover { color: var(--accent-ink); border-color: var(--accent-ink); } .theme-toggle__icon::before { content: "\2600"; } /* ☀ — Default dunkel-first (icke/axt): „zu hell wechseln" */ [data-brand="physio"] .theme-toggle__icon::before, [data-brand="spaetform"] .theme-toggle__icon::before { content: "\263E"; } /* ☾ — Default creme */ [data-theme="light"] .theme-toggle__icon::before { content: "\263E"; } /* ☾ — im Hellen: „zu dunkel wechseln" */ [data-theme="dark"] .theme-toggle__icon::before { content: "\2600"; } /* ☀ */ /* Gruppierte Nav (AXT) — CSS-only Dropdown, KEIN
(Paint-Falle). Mobile: Untermenü eingerückt, immer sichtbar. */ .site-nav .caret { font-size: .7em; opacity: .65; } .subnav { list-style: none; margin: .35rem 0 0; padding: 0 0 0 .9rem; display: grid; gap: .5rem; border-left: 1px solid var(--border); } .subnav a { font-size: .72rem; color: var(--text-faint); } /* 🔴 1120, nicht 960 (28.08.2026). Bei 960 schaltete der Desktop-Nav an, BEVOR er hineinpasste — gemessen lief jede Seite quer: ICKE 960px 89px Ueberstand · 1000px 51px AXT 1060px 172px · 1200px 39px · 1280px 3px ← auch auf 1280er-Laptops Zwei Aenderungen zusammen, einzeln reichte keine: (1) Der Kopf bekommt einen eigenen, schmaleren Seitenabstand (der Inhalt behaelt --gutter) und eine mitwachsende Nav-Luecke statt fester 32px. (2) Der Umschaltpunkt liegt jetzt dort, wo die BREITERE der beiden Marken passt. AXT traegt sieben Punkte mit 609px reiner Textbreite und passt ab 1120; ICKE haette ab ~1000 gereicht. Bewusst EINE Zahl fuer beide statt marken-eigener Umschaltpunkte: zwei Zahlen driften auseinander, und die zweite pflegt niemand mit. Nachgemessen ueber beide Marken: 375/768/900/1119 = Burger, 0 Ueberstand; 1120/1200/1280/1440 = Desktop-Nav, 0 Ueberstand. 🔵 22.09.2026 PARITAET B2 (web#1116): ICKE traegt jetzt NEUN Punkte (Personal Training als eigener Punkt wie bei AXT), AXT acht (Team). Dieselbe Regel, neu gemessen (scrollWidth gegen innerWidth, headless): ICKE ueberlaeuft bei 1120 um 81px, bei 1240 um 1px, passt ab 1260; AXT ueberlaeuft bei 1120 um 54px, passt ab 1200. Umschaltpunkt deshalb 1260 — dort, wo die BREITERE Marke passt; 1259 = Burger. */ @media (min-width: 1260px) { .nav-burger { display: none; } /* 🔴 MIT dem Burger verschwindet auch seine Station im Tab-Fluss. Ohne diese Zeile fokussiert die Tabulatortaste auf dem Desktop ein unsichtbares Bedienelement, das eine Navigation oeffnet, die dort ohnehin ausgeklappt ist. */ .nav-toggle { display: none; } .site-nav { display: block; margin-left: var(--space-3); } /* Luecke mitwachsend statt fest 32px — AXT traegt sieben Punkte mit 609px reiner Textbreite und passte sonst erst ab ~1283px, also nicht einmal auf 1280er-Laptops. */ .site-nav ul { display: flex; flex-wrap: nowrap; width: max-content; gap: clamp(1.1rem, 1.7vw, 2rem); } .site-header .headcta { display: inline-flex; margin-left: auto; } /* Desktop-Dropdown: nur bei :hover/:focus-within (fokussierbares Gruppen-Label = Keyboard-fähig). */ .site-nav .has-sub { position: relative; } .site-nav .subnav { position: absolute; top: 100%; left: -.4rem; margin: 0; padding: .4rem; min-width: 14rem; display: none; grid-auto-flow: row; gap: 0; border-left: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: 0 14px 40px rgba(0,0,0,.30); z-index: 60; } .site-nav .has-sub:hover > .subnav, .site-nav .has-sub:focus-within > .subnav { display: grid; } .site-nav .subnav a { display: block; padding: .5rem .7rem; border-radius: 8px; color: var(--text-muted); white-space: nowrap; } .site-nav .subnav a:hover { color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 12%, transparent); } } /* ---- Hero ---- */ .hero { padding-block: clamp(3rem, 6vw, 6rem) clamp(3.5rem, 7vw, 6.5rem); /* Warmer Radial-Glow (Holz→Ocker) über der Anthrazit-Fläche — NICHT kalt-schwarz (C/K). */ background: radial-gradient(120% 90% at 84% -10%, rgba(217,190,139,.16), rgba(154,86,34,.06) 30%, transparent 60%); } .hero__grid { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); display: grid; gap: var(--space-8); align-items: center; } /* 🔴 Rasterkinder duerfen schrumpfen — siehe den Block bei `.hero h1`. Ohne dies setzt `min-width: auto` die Spalte auf die min-content-Breite des laengsten Wortes. */ .hero__grid > * { min-width: 0; } .eyebrow { font-family: var(--font-grotesk); font-size: var(--fs-h2); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent-ink); font-weight: var(--fw-bold); } /* Design-System: Eyebrows tragen --accent (Holz auf Anthrazit / Grün auf Physio-Creme — beide AA). */ /* 🔴 `overflow-wrap: break-word` — GEGEN EIN GEMESSENES LOCH, nicht vorsorglich. Auf /team-icke/ lief die Seite bei 375px Ansichtsbreite um 99px waagerecht ueber; die Ueberschrift war rechts abgeschnitten. Ursache: das Wort „Physiotherapeuten*Innen" ist in dieser Schriftgroesse 460px breit, verfuegbar sind 327px (375 minus 2x24 Innenabstand). Die Rasterspalte loest deshalb auf 450,25px auf: 450,25 + 24 = 474 = der gemessene scrollWidth. 🔑 NICHT MEINS — mit ausgeblendetem Teamraster blieb der Ueberlauf unveraendert bei 99px. Und die Verursacherliste log: in einem ueberlaufenden Dokument wird JEDES vollbreite Element mitgezogen und sieht wie die Ursache aus. Erst „eine Groesse aendern" trennte das. 🔴 MEINE ERSTE FASSUNG WAR `overflow-wrap: break-word` ALLEIN — UND SIE WIRKTE NICHT. Gemessen nach dem Bau: vorher 99, nachher 99. `break-word` verhindert den SICHTBAREN Ueberlauf innerhalb einer Box, veraendert aber die MIN-CONTENT-Breite nicht — und genau die bestimmt hier die Groesse der Rasterspalte. 🔑 Ohne die Messung haette ich eine wirkungslose Aenderung als Reparatur gemeldet; sie sieht im Diff genauso aus wie eine, die wirkt. Wo der erwartete Ausgang „keine Aenderung" waere, ist die Gegenprobe der einzige Beweis, dass ueberhaupt etwas passiert ist. 👉 Die Ursache ist die automatische Mindestbreite von Rasterkindern (`min-width: auto` = min-content). `min-width: 0` hebt sie auf; `break-word` bricht dann das Wort, statt es ueberlaufen zu lassen. Beide zusammen, jedes fuer sich unvollstaendig. ⚠️ BEIDE Regeln sind wirkungslos, wo nichts zu breit ist — sie koennen keine Seite verschlechtern, die heute in Ordnung ist. Deshalb brauchte die Reparatur keine vollstaendige Zaehlung aller 160 Seiten vorab. ⚠️ Und die Zaehlung waere ohnehin danebengegangen: Ich hatte die laengsten h1-Woerter erhoben und die Top-Kandidaten geprueft — /ultraschalltherapie-…/, /datenschutzerklaerung/, /karpaltunnelsyndrom-uebungen/ haben gar kein `.hero h1`. Die Zeichenzahl war ein Stellvertretermerkmal fuer die Breite UND fuer das Layout, und in beidem falsch. 👉 `hyphens: auto` kommt dazu, weil der Bruch sonst mitten im Wort steht („Physiotherapeute| n*Innen") und wie ein Tippfehler aussieht. Es setzt einen Trennstrich an einer erlaubten Stelle. ⚠️ Es wirkt NUR, weil das Dokument `lang="de"` traegt — gemessen im gebauten HTML, nicht angenommen. Ohne die Sprachauszeichnung waere die Regel still wirkungslos. */ .hero h1 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: -.01em; color: var(--signal); margin: 16px 0 0; overflow-wrap: break-word; } /* 🔴 SILBENTRENNUNG NUR DORT, WO SIE GEBRAUCHT WIRD — Korrektur meiner eigenen Regression vom selben Tag. Ich hatte `hyphens: auto` ungefiltert auf alle Hero-Ueberschriften gesetzt, um den 99px-Ueberlauf auf /team-icke/ bei 375px lesbar zu machen. ⚠️ `hyphens: auto` trennt aber an JEDER Zeilenumbruchstelle, nicht nur wenn ein Wort sonst nicht passt. Folge, gesehen auf /physiotherapie/ bei 1280px: „Physiotherapie-Pra-xis in Berlin Schoene-berg" — dreimal getrennt, obwohl Platz da war. 🔑 Ein Wort mitten durchgeschnitten liest sich als Fehler. Nico hat die Seite an dem Tag als „billig" bezeichnet; genau so entsteht dieser Eindruck, und ich hatte ihn selbst eingebaut. 👉 Deshalb an die Breite gebunden: Der gemessene Ueberlauf trat bei 375px auf, bei 768px nicht. Unterhalb 700px wird getrennt, darueber nicht. `overflow-wrap: break-word` und `min-width: 0` bleiben unbeschraenkt — sie wirken nur im Notfall und veraendern sonst nichts. 🔑 NACHGEMESSEN, und es praezisiert die Begruendung: Bei 375px ist der Ueberlauf AUCH OHNE Trennung 0 — `min-width: 0` und `overflow-wrap` allein tragen ihn. `hyphens` ist also REIN KOSMETISCH: es setzt einen Trennstrich, wo sonst ein Wort ohne Strich bricht („Physiotherapeute|n*Innen"). Damit ist die Begrenzung auf schmale Breiten auch strukturell unbedenklich — sie nimmt nichts weg, was einen Ueberlauf verhindert. */ @media (max-width: 700px) { .hero h1 { hyphens: auto; } } /* Mockup-Signatur: letztes Wort als Holz-Kursiv-Akzent (per im Markup). */ .hero h1 em { font-style: italic; font-weight: inherit; color: var(--accent-em); } /* theme-abhängig: Holz (dunkel) / tiefes Ocker (hell) */ .hero .sub { font-family: var(--font-serif); font-size: 1.25rem; line-height: var(--lh-body); color: var(--text-muted); margin: 20px 0 0; max-width: 46ch; } .hero .cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: 28px; } .hero__note { font-size: .78rem; color: var(--text-faint); margin-top: 16px; } /* Hero-Art = bewusst dunkle Foto-/Akzentfläche (auch im Creme-Register) — „dunkel nur als Akzent". */ /* Interim-Bildstrategie (bis Fotoproduktion, Board 7): warme BRAND-FLÄCHE statt leerer Gradient — Holz-Glow (oben-links) + feines diagonales Struktur-Raster über dem Anthrazit. Kein Stock, CSS-only. 🔁 Drop-in: sobald echte (duotone-gegradete) Fotos da sind, hostet derselbe Rahmen das . */ .hero__art { position: relative; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--icke-line); aspect-ratio: 4 / 3; background: repeating-linear-gradient(135deg, transparent 0 21px, rgba(217,190,139,.035) 21px 22px), radial-gradient(120% 90% at 18% 4%, rgba(217,190,139,.16), transparent 55%), linear-gradient(150deg, var(--icke-panel) 0%, var(--icke-anthrazit) 100%); } .hero__art img { width: 100%; height: 100%; object-fit: cover; filter: var(--bild-grade); } .hero__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(35,40,43,.15) 30%, rgba(35,40,43,.78) 100%), linear-gradient(90deg, rgba(35,40,43,.35), transparent 40%); } .hero__art .cap { position: absolute; left: 18px; bottom: 16px; z-index: 2; font-family: var(--font-grotesk); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--icke-cream-dim); } @media (min-width: 960px) { .hero__grid { grid-template-columns: 1.15fr .85fr; gap: var(--space-10); } } /* Creme-Register (Physio/Spätform): Serif-geführte, klinisch-ruhige Headlines + warmer Art-Verlauf */ [data-brand="physio"] .hero h1, [data-brand="spaetform"] .hero h1 { font-family: var(--font-serif); font-weight: var(--fw-semibold); letter-spacing: -.01em; } [data-brand="physio"] .hero__art, [data-brand="spaetform"] .hero__art { background: linear-gradient(150deg, var(--surface) 0%, var(--icke-holz) 80%, var(--icke-gruen) 140%); } [data-brand="physio"] .hero .eyebrow, [data-brand="spaetform"] .hero .eyebrow { color: var(--icke-gruen); } [data-brand="physio"] .section__head h2, [data-brand="physio"] .article h2 { font-family: var(--font-serif); font-weight: var(--fw-semibold); } /* ---- Statband (dunkle Akzentfläche — ICKE-Energie; „dunkel nur als Akzent") ---- */ .statband { background: var(--accent); } /* Holz-Band (warme Zweitfläche, Regler 26 %) */ .statband__inner { max-width: var(--content-max); margin-inline: auto; padding: var(--space-6) var(--gutter); display: grid; gap: var(--space-5); grid-template-columns: 1fr; } .stat { display: flex; align-items: baseline; gap: .6rem; } .stat b { font-family: var(--font-grotesk); font-weight: var(--fw-black); font-size: clamp(1.9rem, 4vw, 2.6rem); color: var(--health); line-height: 1; } /* Grün-Zahlen auf Holz-Band (großer Text, ≥3:1) */ /* 26.08.: „--icke-holz Mini-Touch" auf .stat:nth-child(2) b ENTFERNT — --accent ist bei icke UND axt =--icke-holz, die Zahl war holz-auf-holz = unsichtbar (Standorte-Kennzahl fehlte). Alle Zahlen bleiben --health (kontrastgeprüft). */ .stat span { font-family: var(--font-grotesk); font-size: .9rem; color: var(--on-accent); line-height: 1.2; } /* Anthrazit-Labels auf Holz-Band */ @media (min-width: 720px) { .statband__inner { grid-template-columns: repeat(3, 1fr); } } /* ---- Sektion / Eyebrow-Titel ---- */ .section { padding-block: var(--section-y); } .section__head { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); margin-bottom: var(--space-6); } .section__head h2 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: clamp(1.6rem, 3.2vw, 2.1rem); letter-spacing: -.01em; color: var(--signal); margin: 8px 0 0; } /* ---- Feature 3-up ---- */ .cards { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); display: grid; gap: var(--space-5); grid-template-columns: 1fr; } /* Variante C: Feature-Karten grün gefüllt · Holz-Icon-Kacheln · Creme-Text (Creme/Grün 5,8:1 AA). */ /* Design-System: Feature-Karten = Panel-Fläche + Border · Icon-Kacheln zyklen die 3 Akzente (Grün/Holz/Ocker). */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--space-6); color: var(--text); } .card .ic { width: 46px; height: 46px; border-radius: var(--radius-md); background: var(--health); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; color: var(--icke-neon); margin-bottom: var(--space-4); } .card:nth-child(2) .ic { background: var(--accent); color: var(--on-accent); } /* Holz-Kachel, Anthrazit-Glyph */ .card:nth-child(3) .ic { background: var(--accent-2); color: var(--on-accent-2); } /* Ocker/Grün-Kachel */ .card h3 { font-family: var(--font-label); font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text); font-weight: var(--fw-black); margin: 0 0 8px; } /* Inter 800 uppercase (C/K) */ .card p { font-family: var(--font-body); font-size: 17px; line-height: var(--lh-body); color: var(--text-muted); margin: 0; } /* Newsreader 17px (C/K) */ @media (min-width: 640px) { .cards { grid-template-columns: 1fr 1fr; } } @media (min-width: 960px) { .cards { grid-template-columns: 1fr 1fr 1fr; } } /* ---- Editorial-Band (Serif/Wissen-Brücke) ---- */ .band { background: var(--surface-2); border-block: var(--hairline); padding-block: var(--space-10); } .band__grid { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); display: grid; gap: var(--space-8); align-items: center; } .band .eyebrow { color: var(--accent-ink); } .band h2 { font-family: var(--font-serif); font-weight: var(--fw-semibold); font-size: clamp(1.7rem, 3.5vw, 2.3rem); line-height: 1.12; color: var(--signal); margin: 14px 0 0; } .band h2 em { font-style: italic; color: var(--accent-ink); } .band p { font-family: var(--font-serif); font-size: 1.1rem; line-height: 1.55; color: var(--text-muted); margin-top: 16px; } .band .quote { border-left: 2px solid var(--accent-ink); padding-left: var(--space-5); } .band .quote p.q { font-size: 1.35rem; color: var(--text); font-family: var(--font-serif); } .band .quote p.by { color: var(--text-faint); font-family: var(--font-grotesk); font-size: .82rem; letter-spacing: var(--tracking-wide); margin-top: 12px; } @media (min-width: 800px) { .band__grid { grid-template-columns: 1fr 1fr; } } /* ---- CTA-Band (dezenter Holz-Creme-Verlauf — creme-dominant, KEIN Ocker/keine dunkle Fläche) ---- */ /* Variante C: unteres CTA-Band = Holz-Fläche (Anthrazit/Holz 8:1), Grün-CTA poppt darauf. */ .cta-band { background: var(--band-cta); padding-block: var(--space-10); text-align: center; } .cta-band h2 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: clamp(1.7rem, 3.5vw, 2.35rem); color: var(--on-band-cta); letter-spacing: -.01em; } .cta-band p { font-family: var(--font-serif); font-size: 1.1rem; color: #3B4A3D; margin: 12px auto 24px; max-width: 46ch; } /* Grün-CTA mit Creme-Kante — poppt auf der Holz-Fläche. */ /* Auf dem Holz-Band: dunkler Button (Anthrazit-Fill + Neon-Text) = dark-on-light-Pop. */ .cta-band .cta-knopf, .cta-band .btn--holz, .cta-band .btn--primary { background-color: var(--icke-anthrazit); color: var(--icke-neon); border-color: transparent; } .cta-band .btn--ghost { color: var(--on-band-cta); border-color: rgba(35,40,43,.4); } /* ---- Footer (Anthrazit-Struktur-Fläche — C/K-Rebalance: „Struktur-26"; data-register=dark → helle Schrift) ---- */ /* ============================================================================ 🔴 ABSTAND FUER SPRUNGZIELE — sonst landet das Ziel hinter der klebenden Kopfleiste. ANLASS (31.08.2026): Auf drei Seiten sprangen die Links korrekt und zeigten trotzdem die falsche Stelle. Gemessen am gerenderten Dokument: Kopfleiste 73 px, Ziel bei y = 0. 🔑 Ein Sprung, der funktioniert und die falsche Stelle zeigt, ist kaum besser als keiner. WARUM ES DIE REGEL VORHER SCHON GAB UND SIE TROTZDEM FEHLTE: Sie stand nur in `src/components/Inhaltsverzeichnis.astro` als `:global(.article :is(h2,h3)[id])` — und Astro liefert die Stile einer Komponente nur dort aus, wo die Komponente BENUTZT wird. Die drei Seiten benutzen sie nicht, also gab es die Regel dort gar nicht. 🔑 Eine Regel, die nur existiert, wo eine Komponente eingebunden ist, ist keine Seitenregel. Das gilt fuer JEDE Stilregel, die in einer Komponente abgelegt wird. ⚠️ `:target` statt einer Aufzaehlung von Tags: Das Sprungziel ist nicht immer eine Ueberschrift — auf /physiotherapie/ ist es ein Absatz (`p#leistungen`). `:target` trifft genau das Element, auf das die Adresse zeigt, und nichts sonst. 🔵 Am gerenderten Dokument geprueft, nicht angenommen: Ueberschrift UND Absatz landen danach bei y = 80 gegen eine Kopfunterkante von 73. */ :target { scroll-margin-top: 5rem; } .site-footer { background: var(--bg); border-top: 1px solid var(--border); padding: var(--space-10) 0 var(--space-6); color: var(--text-muted); } .site-footer__cols { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); display: grid; gap: var(--space-6); grid-template-columns: 1fr; } .site-footer__brand .wordmark { display: block; font-family: var(--font-grotesk); font-weight: var(--fw-black); font-size: 1.25rem; letter-spacing: .06em; color: var(--signal); margin: 12px 0 8px; } .site-footer__brand p { font-size: .82rem; line-height: 1.6; margin: 0; max-width: 34ch; } /* 🔴 h2, NICHT h4 (31.08.2026). Die Fusszeile setzte `h4` direkt unter das `h2` bzw. `h1` der Seite und uebersprang damit eine Ebene — gemessen auf 99 von 161 Seiten (86x h2->h4, 13x h1->h4). 🔑 Der Defekt lag in EINER Datei und erschien auf fast jeder Seite; kein Pruefer meldet so etwas, weil jede Seite fuer sich betrachtet in Ordnung aussieht. ⚠️ Das AUSSEHEN bleibt unveraendert — nur die Ebene wandert. Deshalb musste der Selektor mitwandern: Tag und Regel gehoeren zusammen, sonst verliert die Fusszeile ihre Form. */ .site-footer h2 { font-family: var(--font-grotesk); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); margin: 0 0 12px; } /* 🔴 TREFFERFLAECHE 44px (04.09.2026, Site-Audit + eigene Nachmessung bei 390px). Gemeldet war „12 von 24 eigenstaendigen Bedienelementen unter 44px auf der Startseite". Nachgemessen ueber fuenf Seitentypen: es sind NICHT zwoelf verstreute Stellen, sondern EINE Komponente — diese elf Links plus der Cookie-Knopf, alle 342x27 bzw. 141x27, und sie stehen auf JEDER Seite. Eine Regel behebt alle. ⚠️ `min-height: 0` STAND HIER UND WIRD UEBERSCHRIEBEN — mit Grund, weil keiner dabeistand. Es gibt keinen Test darauf und keinen Kommentar; die wahrscheinlichste Lesart ist ein Reset, damit der