/* ══════════════════════════════════════════════════════════════════════════ teil-zf-dichte.css — Flaechen, die nicht gefuellt sind. Angelegt 04.10.2026. Laedt alphabetisch nach allen anderen teil-*.css. AUFTRAG (Christopher, 04.10.2026): „Es gibt immer noch Flaechen, die nicht gefuellt sind." WAS DIESE DATEI DARF: Raster, Groessen, Abstaende, Hintergruende, Farben, Rundungen, Schatten, Schriftgroessen, max-width. Keine transform, keine animation, keine transition — die gehoeren der Datei, die gleichzeitig an der Bewegung arbeitet. Hier steht keine einzige dieser drei Eigenschaften; nachzaehlbar mit grep -c 'transform\|animation\|transition' → 0 Treffer ausser in diesem Satz. DREI NETZE (wirkung.js 12 s · @media scripting:none · prefers-reduced- motion): hier nicht noetig und deshalb nicht eingebaut. Diese Datei macht nichts unsichtbar — kein opacity:0, kein visibility, kein display:none, keine Startzustaende. Jede Regel hier ist sofort und dauerhaft sichtbar, mit Skript wie ohne, mit Bewegung wie ohne. Die einzigen hinzugefuegten Pseudo-Elemente sind leer (content:"") und rein schmueckend. ────────────────────────────────────────────────────────────────────────── GEMESSEN 04.10.2026 auf brillen-voigt.de, Fenster 1850 px, Deckung ueber ein 20-px-Raster aus Text-, Bild- und Kachelrechtecken: Startseite — Inhaltsbahn 1448 px (.bahn 1560 − 2 × 56 px Gasse): Jede der sieben .kopfzeile ist 734 px breit (72ch, teil-start.css 42). 714 px, also 49 % der Bahnbreite, bleiben links und rechts leer. Deckung je Abschnitt: buehne 50 · laufband 37 · leistungen 55 · brillen 53 · sehen 59 · hoeren 73 · ablauf 63 · filialen 73 · vertrauen 54 · termin 74 · fuss 14 (Prozent). (1) #ablauf .kopfzeile.mitte 734 × 177 px — nur .marke und h2, kein Absatz. Danach 51,2 px Abstand und das Schritte-Raster. (2) #vertrauen .kopfzeile.mitte 734 × 111 px — ebenfalls nur .marke und h2. Die flachste Flaeche der ganzen Seite. Die uebrigen fuenf Kopfzeilen tragen einen Absatz und sind 209 bis 347 px hoch; sie werden hier NICHT angefasst. /augenoptik/ (jede Leistungsseite): (3) section.leistung-aufruf 1799 × 340 px, Deckung 24 %. Darin die Platte .leistung-aufruf-innen 694 × 193 px (68ch), und darin die Knopfreihe 377 × 56 px. 16 % der Platte tragen Inhalt — der Rest ist Polster. (4) header.leistung-buehne 1799 × 355 px, Deckung 12 %. Der Textblock ist 694 × 165 px (68ch); 190 px der Hoehe sind reine Polsterung (130 px oben, 60 px unten). GEFUNDEN UND BEWUSST NICHT ANGEFASST — damit niemand sie zweimal sucht: (5) vier section.sammel-teil auf /augenoptik/, 1799 px breit, Deckung 36–38 %. Das ist die 68ch-Lesespalte in einer 1448-px-Bahn. 68ch ist die gemessene Zeilenlaenge des Hauses (teil-z1-lesbarkeit.css 248); sie zu verbreitern waere Leserlichkeit gegen Optik getauscht. (6) footer.fuss 1835 × 635 px, Deckung 14 %. Das Raster misst 407 + 291 + 291 + 291 px und alle vier Spalten sind 360 px hoch — die Spalten sind gefuellt, die 14 % sind das grobe Mass an Linklisten, kein Loch. Nichts zu tun. (7) .leistung-sprung 691 px breit in 1448 px Bahn. Eine Sprungleiste soll schmal sein; sie klebt und darf die Bahn nicht fuellen. KEIN WAAGERECHTES WACHSTUM: jede Flaeche hier ist entweder ein Hintergrund des bestehenden Kastens oder ein absolut gesetztes, leeres Pseudo-Element, dessen Breite ueber clamp() nie 100 % der Bahn erreicht. Der einzige Abschnitt mit einem mittig gesetzten Pseudo-Element bekommt zusaetzlich overflow:clip. Geprueft bei 1850, 1660, 1280, 940, 430 und 375 px. ══════════════════════════════════════════════════════════════════════════ */ /* ── 1. Die Blume des Lebens als Flaeche ───────────────────────────────── Das Haus hat sie schon: bv_blume() in functions.php zeichnet 19 Kreise mit Radius 13 in einem 100 × 100-Feld — einen Mittelkreis und drei Ringe zu je sechs. Die Funktion gibt sie aber nur EINMAL je Seite aus (statischer Zaehler, Zeile 178), und diese Ausgabe steht in der Fusszeile. Ein zweites Signet kann CSS nicht anfordern. Darum hier dieselbe Geometrie als Hintergrund, aus denselben Zahlen gerechnet: Mittelpunkt (50|50), Ring 1 bei Abstand 13, Ring 2 bei 13·√3 = 22,52 um 30° gedreht, Ring 3 bei 26. Jeder Kreis ist eine Lage radial-gradient mit einem 1,1 px breiten Ring am Rand der Form; der Rest der Lage ist durchsichtig. „ellipse 13% 13%" und nicht „circle 13%": ein Kreis braucht in CSS eine Laenge als Radius, Prozent sind nur bei der Ellipse erlaubt. Auf einem quadratischen Kasten ist beides dasselbe — jedes Pseudo-Element unten ist darum quadratisch, sonst wuerden aus den Kreisen Eier. Die Farbe steht fest in den Lagen statt in einer eigenen Variablen: ein var() INNERHALB einer Variablen wird schon beim Rechnen auf :root ersetzt, ein Nachfahre koennte es nicht mehr aendern. Eine Staerke fuer alle Stellen ist ohnehin das, was „sehr zurueckgenommen" heisst. rgba(169,143,95,.13) ist --gold-tief (#A98F5F) auf 13 %. Ausgerechnet, nicht geschaetzt: ueber --grund (#FBF7F0) ergibt das #EFE8DC, ein Unterschied von 11/15/20 in R/G/B — eine Linie, die man sieht, wenn man hinsieht, und die man sonst nicht bemerkt. Der erste Versuch stand auf 9 % (Unterschied 7/9/13) und waere hinter der Platte aus 3c gar nicht mehr angekommen; siehe dort. */ :root{ --bv-blume: radial-gradient(ellipse 13% 13% at 50.0% 50.0%, transparent calc(100% - 1.1px), rgba(169,143,95,.13) calc(100% - 1.1px), rgba(169,143,95,.13) 100%, transparent 100%), radial-gradient(ellipse 13% 13% at 63.0% 50.0%, transparent calc(100% - 1.1px), rgba(169,143,95,.13) calc(100% - 1.1px), rgba(169,143,95,.13) 100%, transparent 100%), radial-gradient(ellipse 13% 13% at 56.5% 61.26%, transparent calc(100% - 1.1px), rgba(169,143,95,.13) calc(100% - 1.1px), rgba(169,143,95,.13) 100%, transparent 100%), radial-gradient(ellipse 13% 13% at 43.5% 61.26%, transparent calc(100% - 1.1px), rgba(169,143,95,.13) calc(100% - 1.1px), rgba(169,143,95,.13) 100%, transparent 100%), radial-gradient(ellipse 13% 13% at 37.0% 50.0%, transparent calc(100% - 1.1px), rgba(169,143,95,.13) calc(100% - 1.1px), rgba(169,143,95,.13) 100%, transparent 100%), radial-gradient(ellipse 13% 13% at 43.5% 38.74%, transparent calc(100% - 1.1px), rgba(169,143,95,.13) calc(100% - 1.1px), rgba(169,143,95,.13) 100%, transparent 100%), radial-gradient(ellipse 13% 13% at 56.5% 38.74%, transparent calc(100% - 1.1px), rgba(169,143,95,.13) calc(100% - 1.1px), rgba(169,143,95,.13) 100%, transparent 100%), radial-gradient(ellipse 13% 13% at 69.5% 61.26%, transparent calc(100% - 1.1px), rgba(169,143,95,.13) calc(100% - 1.1px), rgba(169,143,95,.13) 100%, transparent 100%), radial-gradient(ellipse 13% 13% at 50.0% 72.52%, transparent calc(100% - 1.1px), rgba(169,143,95,.13) calc(100% - 1.1px), rgba(169,143,95,.13) 100%, transparent 100%), radial-gradient(ellipse 13% 13% at 30.5% 61.26%, transparent calc(100% - 1.1px), rgba(169,143,95,.13) calc(100% - 1.1px), rgba(169,143,95,.13) 100%, transparent 100%), radial-gradient(ellipse 13% 13% at 30.5% 38.74%, transparent calc(100% - 1.1px), rgba(169,143,95,.13) calc(100% - 1.1px), rgba(169,143,95,.13) 100%, transparent 100%), radial-gradient(ellipse 13% 13% at 50.0% 27.48%, transparent calc(100% - 1.1px), rgba(169,143,95,.13) calc(100% - 1.1px), rgba(169,143,95,.13) 100%, transparent 100%), radial-gradient(ellipse 13% 13% at 69.5% 38.74%, transparent calc(100% - 1.1px), rgba(169,143,95,.13) calc(100% - 1.1px), rgba(169,143,95,.13) 100%, transparent 100%), radial-gradient(ellipse 13% 13% at 76.0% 50.0%, transparent calc(100% - 1.1px), rgba(169,143,95,.13) calc(100% - 1.1px), rgba(169,143,95,.13) 100%, transparent 100%), radial-gradient(ellipse 13% 13% at 63.0% 72.52%, transparent calc(100% - 1.1px), rgba(169,143,95,.13) calc(100% - 1.1px), rgba(169,143,95,.13) 100%, transparent 100%), radial-gradient(ellipse 13% 13% at 37.0% 72.52%, transparent calc(100% - 1.1px), rgba(169,143,95,.13) calc(100% - 1.1px), rgba(169,143,95,.13) 100%, transparent 100%), radial-gradient(ellipse 13% 13% at 24.0% 50.0%, transparent calc(100% - 1.1px), rgba(169,143,95,.13) calc(100% - 1.1px), rgba(169,143,95,.13) 100%, transparent 100%), radial-gradient(ellipse 13% 13% at 37.0% 27.48%, transparent calc(100% - 1.1px), rgba(169,143,95,.13) calc(100% - 1.1px), rgba(169,143,95,.13) 100%, transparent 100%), radial-gradient(ellipse 13% 13% at 63.0% 27.48%, transparent calc(100% - 1.1px), rgba(169,143,95,.13) calc(100% - 1.1px), rgba(169,143,95,.13) 100%, transparent 100%); } /* ══ 2. Die beiden nackten Abschnittskoepfe der Startseite ═══════════════ Fund (1) und (2): #ablauf 734 × 177 px, #vertrauen 734 × 111 px, beide ohne Absatz, beide mittig in einer 1448-px-Bahn. Getroffen wird nicht ueber die beiden Kennungen, sondern ueber das, was sie ausmacht: eine mittige Kopfzeile OHNE Absatz. Kaeme morgen ein dritter solcher Kopf dazu, bekaeme er dieselbe Behandlung; bekaeme #ablauf einen Absatz, fiele er von selbst wieder heraus. SPEZIFITAET, nachgezaehlt (Falle 2): grund.css 239 .kopfzeile (0,1,0) grund.css 240 .kopfzeile.mitte (0,2,0) teil-start.css 42 body.home .kopfzeile (0,2,1) hier body.home .kopfzeile.mitte:not(:has(p)) (0,3,2) Der Rumpf von :not() zaehlt mit seinem staerksten Argument, :has(p) also mit (0,0,1). (0,3,2) schlaegt (0,2,1) auch ohne Ladereihenfolge. :has() ist in Safari seit 15.4 da. Fehlt es, wirft der Browser die ganze Regel weg und es bleibt beim heutigen Zustand — es geht nichts kaputt und nichts verschwindet. GEMESSEN 04.10.2026 am laufenden brillen-voigt.de, und es war ein Fehler: der Abschnitt hiess zuerst section:has(> .bahn > .kopfzeile.mitte:not(:has(p))) und querySelectorAll antwortete darauf mit „is not a valid selector". :has() darf nicht in :has() stehen — das verbietet die Spezifikation ausdruecklich, und der Browser wirft die ganze Regel weg, ohne dass man es sieht. Die beiden Pruefungen stehen jetzt NEBENeinander: section:has(> .bahn > .kopfzeile.mitte):not(:has(.kopfzeile p)) Danach gemessen: trifft genau #ablauf und #vertrauen, sonst nichts. Spezifitaet dieser Fassung (0,5,3) — unstrittig. (:has() IN :not() ist dagegen erlaubt; 2a und 2b wurden ebenfalls am laufenden Dienst geprueft und treffen dieselben zwei Abschnitte.) */ /* 2a — Luft nach INNEN, nicht nach aussen. teil-start.css 42 setzt padding:0, weil der Unterseiten-Kopf aus bau.css hier nicht hingehoert. Fuer einen Kopf, der nur aus zwei Zeilen besteht, ist das zu wenig: die 111 px von #vertrauen stehen sonst ohne jede eigene Hoehe in der Bahn. clamp(1.4rem,3vw,2.4rem) = 38,4 px oben und unten bei 1850 px. Gemessen danach: #ablauf 177 → 254 px, #vertrauen 111 → 188 px. Der Aussenabstand bleibt unveraendert bei 51,2 px (grund.css 239), es kommt nichts dazu. NUR senkrecht. Der erste Versuch hatte zusaetzlich padding-inline:clamp(.8rem,2vw,1.6rem); gemessen am laufenden Dienst war die Folge: box-sizing ist border-box, die 2 × 25,6 px gehen also von der Textbreite ab (734 → 683 px), und beide Ueberschriften brachen eine Zeile mehr um — #ablauf 349 statt 254 px, #vertrauen 283 statt 188 px. Genau die Umbrueche, die teil-start.css 42 mit 72ch gerade beseitigt hat (dort gemessen: 321 px gespart). Waagerecht bleibt die Kopfzeile darum unberuehrt. */ body.home .kopfzeile.mitte:not(:has(p)){ padding-block:clamp(1.4rem,3vw,2.4rem); } /* 2b — Eine goldene Haarlinie unter dem Kopf, 320 px breit und mittig. Dasselbe Mittel, mit dem die Rechtsseiten ihren Kopf abschliessen (seiten.css 561). Sie liegt im Hintergrund des Kastens, braucht also kein weiteres Element und kann nichts verschieben. */ body.home .kopfzeile.mitte:not(:has(p)){ background: linear-gradient(90deg, transparent, rgba(203,176,130,.72) 28%, rgba(203,176,130,.72) 72%, transparent) 50% 100% / min(100%, 320px) 1px no-repeat; } /* 2c — Die Flaeche, die den Abschnitt zusammenhaelt: ein sehr weicher Schein aus --grund und einem Hauch --blau-zart, mittig ueber dem Kopf. --grund (#FBF7F0) ist heller als der Seitengrund --creme-2 (#F1E9DB, grund.css 44), der Abschnitt hebt sich also auf, statt sich abzusetzen. Keine Kante, kein Rahmen — die beiden .warm-Flaechen von #hoeren und #filialen bleiben die einzigen echten Tafeln der Startseite, der Wechsel hell/warm/hell bleibt erhalten. isolation:isolate, damit das Pseudo-Element aus 2d mit z-index:-1 im Abschnitt bleibt und nicht hinter dessen eigenen Hintergrund oder gar ueber die warme Tafel des vorigen Abschnitts rutscht. */ body.home section:has(> .bahn > .kopfzeile.mitte):not(:has(.kopfzeile p)){ isolation:isolate; background: radial-gradient(46% 300px at 50% 150px, color-mix(in oklab, var(--grund) 92%, transparent), transparent 70%), radial-gradient(30% 190px at 50% 118px, color-mix(in oklab, var(--blau-zart) 48%, transparent), transparent 74%); } /* 2d — Die Blume des Lebens dahinter. 420 px bei 1850 px, quadratisch, mittig, am oberen Rand des Abschnitts beginnend. Sie laeuft nach unten ueber eine Maske aus — genau die Technik, mit der der Buehnengrund einer Leistungsseite ohne Kante in die Seite uebergeht (seiten.css 410). Dadurch beruehrt sie die Glaskacheln von #vertrauen nicht mehr sichtbar: der Deckel der Maske liegt bei 52 % von 420 px = 218 px, die erste Kachelreihe beginnt bei 206 px und steht da schon im Auslauf. 420 px ist bei jeder gemessenen Fensterbreite kleiner als die Bahn und kleiner als der Abschnitt (#vertrauen ist nach 2a 659 px hoch) — es kann weder waagerecht wachsen noch in den Nachbarabschnitt lecken. GEMESSEN 04.10.2026 am laufenden Dienst, mit und ohne diese Datei im selben Fenster (1850 px, Startseite): #ablauf Kopf 177 → 283 px, Abschnitt 1031 → 1137 px #vertrauen Kopf 111 → 216 px, Abschnitt 553 → 659 px h2 beider Koepfe unveraendert bei 133 bzw. 67 px — kein zusaetzlicher Umbruch, die Kopfbreite bleibt bei 734 px. Die fuenf Koepfe MIT Absatz unveraendert: 332 · 266 · 200 px. scrollWidth 1835 px vorher wie nachher, Seite 9971 → 10182 px. Die 106 px sind 76,8 px Polster plus 29 px, die vorher als Aussen- abstand der h2 durch die Kopfzeile hindurchgefallen sind und jetzt in ihr stehen. Der Abstand zum Inhalt bleibt bei 51,2 px. */ body.home section:has(> .bahn > .kopfzeile.mitte):not(:has(.kopfzeile p))::before{ content:""; position:absolute; top:0; left:0; right:0; margin-inline:auto; z-index:-1; width:clamp(220px,26vw,420px); height:clamp(220px,26vw,420px); background-image:var(--bv-blume); background-repeat:no-repeat; -webkit-mask-image:linear-gradient(180deg,#000 0 52%,transparent 88%); mask-image:linear-gradient(180deg,#000 0 52%,transparent 88%); pointer-events:none; } /* ══ 3. Der Abschluss einer Leistungsseite — ein Schlusswort ═════════════ Fund (3): section.leistung-aufruf 1799 × 340 px bei 24 % Deckung, darin eine Platte von 694 × 193 px, darin eine Knopfreihe von 377 × 56 px. 16 % der Platte tragen Inhalt. Die Platte ist eine Insel auf blankem Seitengrund, und genau so sieht sie aus: wie ein Rest, nicht wie ein Schluss. Drei Schritte, in dieser Reihenfolge gedacht: a) der ABSCHNITT bekommt eine eigene, ueber die volle Breite laufende Flaeche — dann steht die Platte nicht mehr allein; b) die PLATTE wird breiter und innen grosszuegiger, und sie wird halbdurchsichtig, damit die Blume dahinter durch sie hindurch weiterlaeuft statt an ihrer Kante abzureissen; c) der goldene Faden waechst mit, sonst verliert er sich. */ /* 3a — Die Flaeche des Abschnitts. Von --creme-2 (dem Seitengrund) nach --grund und zurueck: eine helle Welle ohne Naht an den Enden, dazu links ein Hauch Blau, rechts ein Hauch Gold — die Hausfarben in der Reihenfolge, in der sie auch die Buehne traegt. Oben eine goldene Naht genau auf Bahnbreite: min(100 % − 2 Gassen, 1560 px − 2 Gassen), also 1448 px bei 1850 px und sauber mitlaufend bei jeder anderen Breite. padding-block waechst von clamp(2.6rem,6vw,4.6rem) auf clamp(3rem,7vw,5.6rem) — 89,6 px statt 73,6 px bei 1850 px. Das ist die „Luft INNEN statt aussen": der Abschnitt wird hoeher, weil er etwas traegt, nicht weil er leer ist. overflow:clip haelt das Pseudo-Element aus 3b sicher im Abschnitt. Im Abschnitt steht nichts Klebendes und nichts, was ueber seinen Rand hinauswirken muesste — der naechste Schatten (die Platte) endet 89,6 px vor der Kante. */ .leistung-aufruf{ padding-block:clamp(3rem,7vw,5.6rem); isolation:isolate; overflow:clip; background: linear-gradient(90deg, transparent, rgba(203,176,130,.46) 22%, rgba(203,176,130,.46) 78%, transparent) 50% 0 / min(calc(100% - var(--gasse) * 2), calc(var(--breite) - var(--gasse) * 2)) 1px no-repeat, radial-gradient(38% 78% at 10% 46%, color-mix(in oklab, var(--blau-zart) 58%, transparent), transparent 72%), radial-gradient(38% 78% at 90% 46%, color-mix(in oklab, var(--gold-zart) 66%, transparent), transparent 72%), linear-gradient(180deg, var(--creme-2) 0%, var(--grund) 46%, var(--creme-2) 100%); } /* 3b — Die Blume des Lebens, mittig hinter der Platte. 360 px bei 1850 px; der Abschnitt ist nach 3a und 3c rund 400 px hoch, sie passt also ganz hinein. inset:0 mit margin:auto und fester Groesse zentriert sie in beiden Richtungen, ohne transform. */ .leistung-aufruf::before{ content:""; position:absolute; inset:0; margin:auto; z-index:-1; width:clamp(220px,24vw,360px); height:clamp(220px,24vw,360px); background-image:var(--bv-blume); background-repeat:no-repeat; pointer-events:none; } /* 3c — Die Platte. 694 px (68ch aus seiten.css 391) waren fuer zwei Knoepfe gerade so viel, dass nichts darauf stand; 960 px (60rem) sind so viel, dass die Blume dahinter die Flaeche traegt. Die Fuellung wird von deckend auf halbdurchsichtig gestellt (color-mix mit transparent), damit genau das auch sichtbar wird: die Kreise laufen unter der Platte durch statt an ihr abzubrechen. WIE DURCHSICHTIG GENAU: ausgerechnet, nicht geschaetzt. Der erste Versuch stand auf 84/68/76 % Deckung. Hinter 84 % Weiss kommt vom Grund nur noch 16 % an; aus dem Unterschied der Blumenlinie (11/15/20) waeren 2/2/3 geworden — unsichtbar, die Platte haette das Muster abgeschnitten, genau das, was sie nicht soll. Jetzt 74/56/64 %, im Mittel 63 %, also fast genau das Hausglas --glas (62 %). Durch die Platte bleiben 37 % von 11/15/20 = 4/6/7 — ein Hauch, der die Kreise weiterlaufen laesst, ohne die Platte truebe zu machen. Spezifitaet: seiten.css 391 und 519 greifen mit .leistung-aufruf-innen (0,1,0). Hier (0,2,0) — gewinnt unabhaengig von der Ladereihenfolge. Rundung von clamp(22px,3vw,38px) auf --r-xl (42 px), weil die Platte gewachsen ist; Schatten tiefer, weil sie jetzt auf einer eigenen Flaeche liegt und sich sonst nicht mehr von ihr abhebt. GEMESSEN 04.10.2026 am laufenden Dienst, mit und ohne diese Datei im selben Fenster (1850 px, /augenoptik/): section.leistung-aufruf 1799 × 340 → 1799 × 435 px Platte 694 × 193 → 960 × 255 px Innenpolster 48/38,4 → 70,4/54,4 px Faden 72 → 187 px breit Rundung 38 → 42 px Blume — → 360 × 360 px, z-index −1 scrollWidth 1835 → 1835 px (unveraendert) */ .leistung-aufruf .leistung-aufruf-innen{ max-width:min(100%, 60rem); padding:clamp(2.6rem,6vw,4.4rem) clamp(1.6rem,5vw,3.4rem); gap:clamp(.9rem,2.4vw,1.5rem); border-radius:var(--r-xl); border:1px solid color-mix(in oklab, var(--gold) 38%, transparent); background:linear-gradient(148deg, color-mix(in oklab, var(--weiss) 74%, transparent), color-mix(in oklab, var(--creme) 56%, transparent) 54%, color-mix(in oklab, var(--gold-zart) 64%, transparent)); box-shadow: 0 22px 64px color-mix(in oklab, var(--blau) 10%, transparent), 0 2px 10px color-mix(in oklab, var(--blau) 6%, transparent); } /* 3d — Der Faden. 72 px (teil-leistung.css 248) auf einer 694 px breiten Platte war schon knapp; auf 960 px waere er ein Strich. 22 % der Platte, gedeckelt auf 240 px, bleibt in jedem Fenster dasselbe Verhaeltnis. Spezifitaet (0,2,0) gegen (0,1,0). */ .leistung-aufruf .leistung-faden{ width:clamp(104px, 22%, 240px); height:2px; margin-bottom:clamp(1.2rem,3vw,1.9rem); background:linear-gradient(90deg, transparent, var(--gold-tief) 22%, var(--gold) 50%, var(--gold-tief) 78%, transparent); } /* ══ 4. Der Kopf einer Leistungsseite ═══════════════════════════════════ Fund (4): header.leistung-buehne 1799 × 355 px bei 12 % Deckung. Der groesste Teil davon ist Polsterung, die dort hingehoert — 130 px oben halten die feste Kopfleiste frei. Das Einzige, was hier gemessen falsch ist, ist das Mass des Textblocks: 694 px (68ch), waehrend dieselbe Rolle auf der Startseite 734 px (72ch) traegt (teil-start.css 42). Zwei Masse fuer dieselbe Sache. Angeglichen, mehr nicht. Eine groessere max-width kann keinen zusaetz- lichen Umbruch erzeugen — ein Titel wird dadurch nie hoeher. Spezifitaet (0,2,0) gegen (0,1,0) aus seiten.css 391. Gemessen 04.10.2026, /augenoptik/ bei 1850 px: der Textblock wird 694 → 734 px breit und dabei 165 → 129 px HOCH. Der Leitsatz brauchte auf 68ch zwei Zeilen und kommt auf 72ch mit einer aus — 36 px weniger Hoehe bei mehr Text je Zeile. */ .leistung .leistung-buehne-text{ max-width:min(100%, 72ch) } /* ══ 5. Haltepunkte 1660 · 940 · 430 ════════════════════════════════════ Unterhalb von rund 1670 px ist die Bahn ohnehin schmaler als 1560 px; bis dahin tragen die clamp() alles allein, gemessen bei 1660 und 1280 px. Erst darunter stehen zwei Dinge im Weg. */ /* Unter 940 px steht die Blume hinter einem Kopf, der jetzt umbricht und damit hoeher ist als die Flaeche darueber. Sie wird kleiner und rueckt mit dem Kopf nach unten, statt ueber den Abschnittsanfang zu ragen. Die Platte des Schlussworts verliert ihre 60rem — bei 940 px sind das mehr als die Bahn, min(100 %, …) faengt es ab, aber die Innenpolsterung soll schon hier zurueckgehen, sonst steht der Knopf in 70 px Rand. */ @media (max-width:940px){ body.home section:has(> .bahn > .kopfzeile.mitte):not(:has(.kopfzeile p))::before{ width:clamp(200px,34vw,300px); height:clamp(200px,34vw,300px); } body.home section:has(> .bahn > .kopfzeile.mitte):not(:has(.kopfzeile p)){ background: radial-gradient(70% 240px at 50% 130px, color-mix(in oklab, var(--grund) 92%, transparent), transparent 72%), radial-gradient(46% 160px at 50% 104px, color-mix(in oklab, var(--blau-zart) 44%, transparent), transparent 76%); } .leistung-aufruf .leistung-aufruf-innen{ padding:clamp(2rem,5vw,2.8rem) clamp(1.3rem,4vw,2rem); } .leistung-aufruf::before{ width:clamp(200px,32vw,290px); height:clamp(200px,32vw,290px); } } /* Ab 430 px abwaerts (geprueft bis 375 px): die Rundung geht auf --r-m zurueck, damit die Platte am Telefon nicht wie eine Pille aussieht, und die Haarlinie unter dem Kopf wird so breit wie der Kopf selbst. Die Blume bleibt bei 200 px — bei 375 px Fenster sind das 53 % der Bahn, also deutlich innerhalb; waagerecht waechst nichts. */ @media (max-width:430px){ body.home .kopfzeile.mitte:not(:has(p)){ background: linear-gradient(90deg, transparent, rgba(203,176,130,.72) 24%, rgba(203,176,130,.72) 76%, transparent) 50% 100% / min(100%, 220px) 1px no-repeat; } .leistung-aufruf{ padding-block:clamp(2.4rem,9vw,3rem) } .leistung-aufruf .leistung-aufruf-innen{ padding:clamp(1.7rem,7vw,2.2rem) clamp(1.1rem,5vw,1.5rem); border-radius:var(--r-m); } .leistung-aufruf .leistung-faden{ width:min(72%, 160px) } }