/* Decision-ID: pereta-nabe-bauteil-20260823, pereta-nabe-substrat-gemessen-20260823, pereta-nabe-kachelkontrast-20260823, pereta-startseite-sota-doppelabnahme-20260831. Farben laufen ueber `--ap-nabe-*`. Diese werden vom Plugin aus Divis Palette gesetzt (ap_nabe_farb_variablen), weil Divi gcid-FARBEN nur ausliefert, wenn ein Modul der Seite sie benutzt. Zahlen liefert Divi dagegen vollstaendig aus und werden hier referenziert. */ /* Die Spaltenzahl kommt aus der Zahl der Faecher, nicht aus einer festen 5. GEMESSEN 2026-08-23 an vertrauensweg (3 Faecher): mit fester 5 blieben zwei Spalten leer, die Kacheln fuellten nur rund 60 % der Breite. Der Vertrag §3 sah `var(--ap-nabe-spalten, 5)` von Anfang an vor — umgesetzt war es nicht. */ .ap-nabe { display: grid; grid-template-columns: repeat(var(--ap-nabe-spalten, 5), minmax(0, 1fr)); gap: var(--gvid-apf-gap-m); /* Auch hier ERBEN. `--ap-nabe-text` ist `gcid-apf-color-text-inverse`, also die helle Schrift fuer dunklen Grund — richtig in der Navy-Sektion der Produktionsseite, falsch auf dem cremefarbenen Grund der sieben Hubs. Gemessen 2026-08-23: mit dieser Farbe stand der Kopf bei Kontrast 1,0, Schrift und Grund waren identisch `rgb(250,247,239)`. Wer nur den Kopf auf `inherit` stellt, erbt genau diesen Wert von hier — die Wurzel sitzt eine Ebene hoeher als der sichtbare Fehler. */ color: inherit; } .ap-nabe--reihe { grid-template-columns: repeat(var(--ap-nabe-spalten, 5), minmax(0, 1fr)); } .ap-nabe--schritte { grid-template-columns: repeat(var(--ap-nabe-spalten, 5), minmax(0, 1fr)); } .ap-nabe__kopf { grid-column: 1 / -1; margin: 0; /* Der Kopf ist der einzige Text der Nabe, der auf dem ROHEN Sektionsgrund steht — die Kacheln bringen ihre eigene Flaeche mit. Er braucht deshalb eine Farbe, die zum Grund passt, und die Nabe muss ihren Grund kennen. `inherit` sieht wie die allgemeine Loesung aus und ist keine: gemessen 2026-08-23 an arnold-pereta.de erbt der Kopf bis zum `` durch und landet bei #3B4761 — die Navy-Sektion setzt nur ihren Grund, nicht ihre Textfarbe. Ergebnis 1,87 statt der vorherigen 11,17. Eine EINZIGE Farbe kann es nicht geben, das ist nachgerechnet: gegen Weiss verlangt AA eine Leuchtdichte <= 0,1833, gegen #0F1A2E >= 0,2326. Also entscheidet das Datenblatt (`"grund": "dunkel"`), und die Vorgabe ist der helle Grund. */ color: var(--ap-nabe-kachel-text); font-size: var(--gvid-ap-v2-lead); } /* Dunkler Grund: die Navy-Sektion der Startseite. `--ap-nabe-kopf` ist `gcid-c-navy-200` (#C1D0EB) und ergibt dort 11,17 — auf Weiss dagegen 1,56, weshalb die Klasse gesetzt werden MUSS und nicht die Vorgabe sein darf. */ .ap-nabe--auf-dunkel .ap-nabe__kopf { color: var(--ap-nabe-kopf); } .ap-nabe__schalter { position: absolute; opacity: 0; pointer-events: none; } /* Die Kacheln sind NAVIGATION, kein Inhalt (Operator 2026-08-24: „die kacheln hier muessen kleiner sein - das muss als navigation dienen"). Vorher trugen sie Lead-Schrift (24px) auf Button-Polster und wurden dadurch 227 px hoch — mehr als ein Drittel der Sektion, bevor der eigentliche Inhalt begann. Die Masse haengen an eigenen Variablen statt an harten Werten, damit ein spaeterer Groessenwunsch EIN Wert ist und keine Suche durch die Datei. */ .ap-nabe { --ap-nabe-kachel-py: clamp(0.55rem, 0.45rem + 0.35vw, 0.8rem); --ap-nabe-kachel-px: clamp(0.8rem, 0.6rem + 0.6vw, 1.15rem); --ap-nabe-kachel-radius: clamp(0.6rem, 0.5rem + 0.35vw, 0.9rem); } .ap-nabe__kachel { display: grid; grid-row: 2; gap: 0.15rem; /* Operator 2026-08-24: "die ueberschrift mitte mitte zentrieren". Zwei Angaben, weil zwei verschiedene Dinge mittig sollen — gemessen war die Label-BOX bereits ausgeglichen (15/15 oben/unten, 21/21 links/rechts), der TEXT darin aber oben und linksbuendig: als Rasterelement wurde das Label auf die volle Kachelhoehe gestreckt, und der Text sass an seinem oberen Rand. `align-content` nimmt die Streckung heraus und setzt den Inhalt in die Mitte; `text-align` zentriert auch die zweite Zeile, die sonst kuerzer und linksbuendig darunter stand. */ align-content: center; text-align: center; /* ── Innenabstand im goldenen Schnitt (Operator 2026-08-24) ────────────── Gemessen war das Verhaeltnis x:y = 1,49 und der Textanteil an der Kachelhoehe 0,431 — beides neben φ. Zwei Ebenen, damit es ueberall gilt: 1. Grundlage sind zwei Design-Tokens, die exakt im Verhaeltnis φ stehen (25,24 / 15,60 = 1,618 bei 1440 px). Sie liegen im Divi-Variablen- manager, nicht hier — dort sind sie im Builder sichtbar und aenderbar. 2. Wo die Einheit `lh` unterstuetzt wird, tritt die exakte Fassung an ihre Stelle: `0.618lh` oben und unten ergibt bei zweizeiliger Beschriftung Text : Hoehe = 1 : φ, und zwar unabhaengig von der Schriftgroesse — die Tokens sind in px und treffen φ nur bei einer Breite genau. Der Faktor faellt hier auf: 0,618 × φ = 1, deshalb steht seitlich schlicht `1lh`. */ padding: var(--gvid-apf-phi-pad-y) var(--gvid-apf-phi-pad-x); color: var(--ap-nabe-kachel-text); background: var(--ap-nabe-kachel-flaeche); border-color: var(--ap-nabe-rand); border-style: solid; /* Der Rand war bis heute 3 px — nicht gestaltet, sondern der Browser-Wert `medium`: das Token existierte nicht, die Deklaration war ungueltig und fiel lautlos durch. Jetzt ist es angelegt und traegt 1 px. */ border-width: var(--gvid-apf-border-default); /* Radius aus dem Button-Token statt eigener Kurve: die Kachel IST ein Schalter, und so heilt eine Aenderung am System auch sie. */ border-radius: var(--gvid-ap-v2-button-radius); cursor: pointer; transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; } .ap-nabe__schalter:focus-visible + .ap-nabe__kachel { outline-color: var(--ap-nabe-label); outline-style: solid; outline-width: var(--gvid-apf-border-strong); outline-offset: var(--gvid-apf-border-strong); } .ap-nabe--schritte .ap-nabe__kachel { position: relative; } .ap-nabe--schritte .ap-nabe__kachel:not(:last-child)::after { position: absolute; top: 50%; left: 100%; width: var(--gvid-apf-gap-m); height: var(--gvid-apf-border-default); content: ''; background: var(--ap-nabe-rand); } .ap-nabe__nummer { color: var(--ap-nabe-kachel-text); font-size: var(--gvid-ap-v2-eyebrow); font-weight: 700; margin: 0 0 var(--gvid-apf-gap-xs) 0; display: block; font-variant-numeric: tabular-nums; } /* Exakte Fassung, wo `lh` unterstuetzt wird (Chrome 109+, Firefox 120+, Safari 16.4+). Aeltere Browser behalten die Token-Fassung darueber. */ @supports (padding: 1lh) { .ap-nabe__kachel { /* Der Rand gehoert zur sichtbaren Kachel: mit `0.618lh` glatt lagen die gemessenen Anteile bei 0,595 statt 0,618 — die zwei Randpunkte oben und unten fehlten in der Rechnung. Sie werden hier abgezogen, und zwar am Token, damit die Proportion auch dann haelt, wenn der Rand einmal anders gesetzt wird. Seitlich derselbe Abzug mal φ, damit x : y = φ bleibt (0,618 × φ = 1, daher `1lh` als Ausgangswert). */ padding-block: calc(0.618lh - var(--gvid-apf-border-default, 1px)); padding-inline: calc(1lh - var(--gvid-apf-border-default, 1px) * 1.618); } /* Der Faktor haengt an der ZEILENZAHL, nicht an der Schriftgroesse: fuer Text : Hoehe = 1 : φ gilt Innenabstand = Zeilen × lh × 0,309. Bei zwei Zeilen sind das 0,618lh (oben), bei einer Zeile die Haelfte. Gemessen 2026-08-24: in der seitlichen Leiste ab 60rem sind die Kacheln 167 px schmal und durchweg zweizeilig; darunter steht die Leiste ueber der Buehne, die Kacheln sind breit und einzeilig — mit dem Zweizeilen-Faktor lag der Anteil dort bei 0,42 statt 0,618, also 19 % daneben. */ @media (width < 60rem) { .ap-nabe-buehne > .ap-nabe-leiste .ap-nabe__kachel { padding-block: calc(0.309lh - var(--gvid-apf-border-default, 1px)); padding-inline: calc(0.5lh - var(--gvid-apf-border-default, 1px) * 1.618); } } } /* Ruhige Anhebung beim Zeigen — die Kachel hebt sich einen Bildpunkt, mehr nicht. Wer Bewegung abbestellt hat, bekommt nur den Farbwechsel. */ .ap-nabe__kachel:hover { transform: translateY(-1px); border-color: var(--ap-nabe-label); } @media (prefers-reduced-motion: reduce) { .ap-nabe__kachel { transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease; } .ap-nabe__kachel:hover { transform: none; } } .ap-nabe__label { color: var(--ap-nabe-label); /* Als Navigation traegt der NAME die Kachel, nicht der beschreibende Halbsatz. Vorher war es umgekehrt: Eyebrow 12,6 px ueber Lead 24 px — der Blick fand zuerst den Nebensatz und musste den Namen suchen. */ font-size: var(--gvid-ap-v2-body); font-weight: 700; line-height: 1.25; } /* Lange Komposita muessen brechen duerfen. Gemessen 2026-08-23 an der Startseite: `Kundenbeziehungen` passt in keine Kachelspalte und schob den Textkasten 12 px (bei 1440) bis 46 px (bei 1024) ueber den Kachelrand — das Wort war sichtbar abgeschnitten. Der Ueberlauftest sah es nicht, weil er das FORMULAR auf `scrollWidth` prueft und die Kachel ihren Inhalt still beschneidet; gemessen werden muss der Text gegen SEINE Kachel. `hyphens` trennt nach Sprachregeln (die Seite ist `lang="de"`), aber NUR lange Woerter: ohne die Grenze zerlegte es auch `werden`, `trotzdem` und `passenden`, und drei Trennstriche in einer Vierzeilen-Kachel sehen schlechter aus als das Problem, das sie loesen. 14 Zeichen laesst `Doppelarbeit` (12) ganz und trennt `Kundenbeziehungen` (17). `overflow-wrap` ist der Notausgang, wo auch das nicht reicht — und die Rueckfallebene in Browsern ohne `hyphenate-limit-chars`. */ .ap-nabe__label, .ap-nabe__kopf { hyphens: auto; hyphenate-limit-chars: 14 6 4; overflow-wrap: break-word; } /* Die Buehne MUSS selbst das Raster aufspannen. Die Spezifikation ging davon aus, Divis Layout-Option erledige das — sie tut es fuer Sektionen NICHT: gemessen 2026-08-23 an arnold-pereta.de erzeugt Divi aus `{"display":"grid","gridColumnCount":"1"}` die Regel `.et_pb_section_2{--column-count:1;grid-template-columns:repeat(...);...}`, aber KEIN `display:grid`. Die Tafeln standen dadurch untereinander statt uebereinander: sichtbar 385 px, Sektion 1926 px, also rund 1500 px Leere. Der Hoehensprung-Test war dafuer blind — bei untereinander liegenden Tafeln ist die Gesamthoehe genauso konstant wie bei gestapelten. `messen_tafeln.py` prueft seither zusaetzlich, dass alle Tafeln dieselbe Oberkante haben. */ .ap-nabe-buehne { display: grid; } .ap-nabe-tafel { grid-area: 1 / 1; } @supports selector(:has(*)) { .ap-nabe-tafel { visibility: hidden; } /* Verborgene Tafeln liegen AUSSERHALB des Flusses. Vorher trugen sie ihre volle Hoehe zum Raster bei, also war die Buehne immer so hoch wie ihre laengste Tafel — gemessen 198 bis 335 px Leerraum unter den kuerzeren. Solange die Buehne keine Flaeche hatte, sah das nach Abstand aus; mit der Karte darunter sieht es nach Fehler aus, und zwar bei jedem Besucher. ZIELKONFLIKT, bewusst entschieden: die konstante Hoehe war ein frueheres Abnahmekriterium („Hoehensprung 0,000 px"). Sie ist damit aufgegeben — die Buehne waechst und schrumpft jetzt mit der gewaehlten Tafel. Die Leere sieht JEDER Besucher, das Springen nur, wer klickt. Umkehrbar in zwei Zeilen: `position: absolute` hier entfernen und `position: static` in `ap-nabe.php` (Zeile mit `visibility:visible`) mit streichen. Decision `nabe-buehne-hoehe-folgt-inhalt-20260824`. */ #page-container .ap-nabe-buehne { position: relative; } /* Auch hier der `#page-container`-Anker: `position: absolute` allein verlor gegen Divis `.et_pb_row{position:relative}` aus demselben spaeten Inline-Block — gemessen kam `relative` an, und die Buehne blieb so hoch wie ihre laengste Tafel. */ /* Operator 2026-08-24: KEINE Spruenge beim Kachelwechsel. Damit ist die Entscheidung `nabe-buehne-hoehe-folgt-inhalt-20260824` von heute frueh umgekehrt — dort waren die Tafeln absichtlich aus dem Fluss genommen, damit die Buehne mit der gewaehlten Tafel schrumpft. Der Zielkonflikt ist unveraendert und jetzt anders entschieden: aus dem Fluss Buehne folgt dem Inhalt, dafuer springt sie beim Klicken im Fluss Buehne ist konstant, dafuer bleibt unter kurzen Tafeln Platz Alle Tafeln liegen ohnehin in derselben Rasterzelle (`grid-area: 1 / 1` weiter oben). Es genuegt also, sie NICHT mehr aus dem Fluss zu nehmen: dann bestimmt die hoechste Tafel die Hoehe, und die bleibt beim Wechseln stehen. `visibility` schaltet weiter, also ist immer nur eine sichtbar und nur eine fuer Vorlesehilfen erreichbar. Der Platz unter kurzen Tafeln wird nicht unten angehaengt, sondern oben und unten verteilt — deshalb `align-content: center` auf der Spalte. */ #page-container .ap-nabe-tafel { position: static; inset-inline: 0; top: 0; margin-inline: auto; /* In der gemeinsamen Rasterzelle wuerde die Tafel sonst mittig sitzen, und ihr Anfang verschoebe sich je nach Laenge — genau der Sprung, der weg soll. `align-self: start` allein GENUEGT NICHT, und zwar nachweislich: die Tafel erbt von Divi senkrechte `auto`-Raender, und auto-Raender haben in einem Raster Vorrang vor jeder Ausrichtungsangabe. Gemessen an der 963-px-Tafel in einer 1913-px-Zeile: wie vorgefunden Abstand oben 475 px (also mittig) align-self: start 475 px — wirkungslos align-self: flex-start 475 px — wirkungslos margin-bottom: 0 950 px — unten, weil nur oben `auto` blieb margin-top: 0 0 px — oben, das ist das Ziel Irrefuehrend dabei: `getComputedStyle` meldet fuer beide Raender `0px`. Wer nur den gemeldeten Wert liest, sieht keinen Grund und sucht falsch. */ align-self: start; margin-block: 0; } } @media (width < 60rem) { /* ZWEI Spalten, nicht eine. Als die Kacheln noch Inhalt trugen, war eine Spalte richtig. Seit sie Navigation sind (2026-08-24) und die Buehne an den Bildschirm gebunden ist, entscheidet ihre Hoehe darueber, wie viel vom Inhalt uebrig bleibt: bei fuenf vollbreiten Kacheln waren es 420 px Leiste und nur noch 199 px Tafel — rund 5 % des Inhalts sichtbar. Zweispaltig sind es drei Reihen statt fuenf. */ .ap-nabe, .ap-nabe--reihe, .ap-nabe--schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Eine ungerade letzte Kachel nimmt die volle Breite, statt eine Luecke zu lassen. */ .ap-nabe__kachel:last-child:nth-child(odd) { grid-column: 1 / -1; } .ap-nabe__kachel { grid-row: auto; } .ap-nabe--schritte .ap-nabe__kachel:not(:last-child)::after { display: none; } } /* Die Leistungsnabe ist mobil nicht hoehenstabil, sondern inhaltsstabil: nur die aktive Tafel bleibt im Layout. Zuvor bestimmte die 1.386-px-Tafel auch bei der 741-px-Tafel die erste Rasterzeile; Navigation und aktiver Inhalt lagen dadurch 238 bis 349 px auseinander. Die Navigation steht als erste Zeile, die gewaehlte Tafel direkt darunter. */ @media (max-width: 47.9375rem) { @supports selector(:has(*)) { #page-container #ap-sektion-leistungen { grid-template-rows: auto auto auto; align-content: start; } #page-container #ap-sektion-leistungen > .et_pb_row.ap-nabe-leiste { grid-area: 1 / 1; } #page-container #ap-sektion-leistungen > .et_pb_row.ap-nabe-tafel { display: none; grid-area: 2 / 1; inline-size: 100% !important; margin-block: 0; } #page-container #ap-sektion-leistungen:has(#ap-nabe-leistungen-sales:checked) > .et_pb_row.ap-nabe-tafel--leistungen-sales, #page-container #ap-sektion-leistungen:has(#ap-nabe-leistungen-sales-detail:checked) > .et_pb_row.ap-nabe-tafel--leistungen-sales-detail, #page-container #ap-sektion-leistungen:has(#ap-nabe-leistungen-marketing:checked) > .et_pb_row.ap-nabe-tafel--leistungen-marketing, #page-container #ap-sektion-leistungen:has(#ap-nabe-leistungen-marketing-detail:checked) > .et_pb_row.ap-nabe-tafel--leistungen-marketing-detail, #page-container #ap-sektion-leistungen:has(#ap-nabe-leistungen-digitalisierung:checked) > .et_pb_row.ap-nabe-tafel--leistungen-digitalisierung, #page-container #ap-sektion-leistungen:has(#ap-nabe-leistungen-digitalisierung-detail:checked) > .et_pb_row.ap-nabe-tafel--leistungen-digitalisierung-detail { display: block; visibility: visible; } } } /* ============================================================ DIE BUEHNE — die Antwort auf die angeklickte Kachel ============================================================ Bis 2026-08-24 war hier NICHTS gestaltet. Der Inhalt trug vier Klassen (`ap-nabe__antwort`, `ap-nabe__paare`, `ap-nabe__blocktitel`, `ap-nabe__liste`), zu denen nie ein Stylesheet geschrieben wurde — gemessen 0 Regeln in ALLEN Stylesheets. Ergebnis live: rohe 14-px-Grundschrift ueber die volle Spaltenbreite, `

` in Browser-Einrueckung, keine Flaeche, kein Polster. Die Bauteilmessungen waren dabei durchgehend gruen, weil sie Mechanik pruefen und nicht Gestaltung. Die Bühne ist die ANTWORT auf die Kachel darueber. Sie bekommt deshalb eine eigene Flaeche — nicht die beige Kartenfarbe der Sektionen darueber, sondern Weiss mit feiner Kante, damit sie als eigenstaendige Tafel lesbar ist und nicht mit den Karten konkurriert. */ #page-container .ap-nabe-buehne > .et_pb_row.ap-nabe-tafel { max-width: 60rem; padding: var(--gvid-ap-v2-card-padding, clamp(1.35rem, 1rem + 1.25vw, 2.25rem)); border: 1px solid var(--ap-nabe-rand); border-radius: var(--gvid-ap-v2-card-radius, clamp(1rem, 0.75rem + 0.8vw, 1.625rem)); background: var(--ap-nabe-kachel-flaeche); } /* Der Anfrage-Knopf kommt aus dem Gadget-Bestand und ist dort auf volle Breite seiner schmalen Spalte gesetzt. In einer 960 px breiten Buehnenzeile wird daraus ein goldener Balken ueber die ganze Tafel — gemessen 960 px. Er bekommt hier die Groesse eines Knopfes und steht mittig. */ [class*="ap-gadget-unit--nabe-anfrage"] { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } /* `.ap-nabe-anfrage` traf hier NICHT: der Knopf haengt im Gadget-Behaelter `ap-gadget-unit--nabe-anfrage--`, und der steht in einer EIGENEN Sektion hinter der Buehne — nicht in ihr. Zweimal am falschen Element vorbeigezielt, bis die Ahnenkette gemessen war. */ [class*="ap-gadget-unit--nabe-anfrage"] .ap-gadget-contact-button { width: auto; max-width: 100%; padding-inline: var(--gvid-ap-v2-button-x, clamp(1.35rem, 1rem + 1.05vw, 2.125rem)); } /* Die Anfrage-Zeile ist KEINE Tafel. Sie zuerst mit derselben Regel zu treffen ergab eine zweite, leere Karte unter jeder Buehne — sichtbar erst im Ganzseitenbild, in keiner Messung. Sie bekommt nur Luft, keine Flaeche. */ #page-container .ap-nabe-buehne > .et_pb_row:not(.ap-nabe-tafel) { max-width: 60rem; margin-top: var(--gvid-apf-space-m, clamp(1rem, 0.6rem + 0.8vw, 1.5rem)); padding: 0; } /* Die Buehne gehoert zur Kachelreihe darueber, nicht in die naechste Etage. Divis Vorgabepolster (4 % oben und unten) schob sie rund 150 px weg. `#page-container` ist nicht Zierde: OHNE den Anker blieb dieselbe Regel wirkungslos, weil Divi seine Sektionspolster in einem INLINE-Block ganz am Ende des Dokuments ausgibt — gemessen 57,59 px statt der gesetzten 0. */ #page-container .ap-nabe-buehne { padding-block: 0 var(--gvid-ap-v2-section-compact-y, clamp(2.75rem, 5vw, 4.5rem)); } /* Der Behaelter haelt die Hoehe der GROESSTEN Tafel — das ist der Preis der Stapelung und der Grund, warum beim Umschalten nichts springt (gemessen 0,000 px). Ohne Flaeche darunter sah der Rest wie ein Loch aus (169 bis 262 px). Mit Flaeche ist es Polster. Der Inhalt steht oben, nicht mittig. */ .ap-nabe-buehne { align-content: start; } .ap-nabe-tafel > .et_pb_column { display: flow-root; /* Raender der Kinder bleiben drinnen */ } /* JEDER Absatz der Tafel, nicht nur der erste. `ap-nabe__antwort` steht nur am ersten — die folgenden blieben auf der 14-px-Grundschrift stehen und liefen ueber die volle Breite. Im Bild war der Bruch sofort zu sehen, in der Klassen-Pruefung nicht: die uebrigen Absaetze tragen gar keine Klasse. */ .ap-nabe-tafel .et_pb_text_inner > p, .ap-nabe-tafel .et_pb_text_inner > ul, .ap-nabe-tafel .et_pb_text_inner > ol { max-width: 62ch; color: var(--ap-nabe-fliess); font-size: var(--gvid-ap-v2-body, clamp(1rem, 0.93rem + 0.28vw, 1.1875rem)); line-height: 1.6; } /* Fliesstext der Antwort. Die Zeilenlaenge wird begrenzt: ueber die volle Spalte gelesen sind das bei 1440 px rund 150 Zeichen je Zeile. */ .ap-nabe__antwort { max-width: 62ch; margin: 0 0 var(--gvid-apf-space-m, clamp(1rem, 0.6rem + 0.8vw, 1.5rem)); color: var(--ap-nabe-fliess); font-size: var(--gvid-ap-v2-body, clamp(1rem, 0.93rem + 0.28vw, 1.1875rem)); line-height: 1.6; } .ap-nabe__antwort strong { color: var(--ap-nabe-kachel-text); } /* Zwischenueberschrift innerhalb einer Tafel. */ .ap-nabe__blocktitel { margin: calc(var(--gvid-apf-space-m, clamp(1rem, 0.6rem + 0.8vw, 1.5rem)) * 1.5) 0 var(--gvid-apf-space-m, clamp(1rem, 0.6rem + 0.8vw, 1.5rem)); color: var(--ap-nabe-kachel-text); font-size: var(--gvid-ap-v2-lead, clamp(1.125rem, 0.98rem + 0.58vw, 1.5rem)); line-height: 1.25; } /* KEIN `:first-child`-Ausschluss. Der Zwischentitel ist regelmaessig das erste Kind SEINES Textmoduls — die Ausnahme griff deshalb immer und liess ihn am Absatz darueber kleben (gemessen `margin-top: 0px` statt 36 px). Erstes Element der Tafel ist ohnehin die Ueberschrift des Divi-Moduls, nie dieser Titel; die Ausnahme hat also nie etwas geschuetzt. */ /* Die Paare `Wo es hakt / Was wir beitragen / Ergebnis`. Als Beschreibungsliste ausgezeichnet, also wird sie auch als solche gesetzt: die Marke links, die Aussage rechts. Der Browser-Einzug von `dd` (hier 21 px) faellt weg — er ist eine Notloesung fuer ungestaltete Listen, keine Gestaltung. */ /* Damit die Abfrage weiter unten etwas hat, worauf sie sich bezieht: das Textmodul der Tafel ist der Container. `inline-size` fasst nur die Breite an; die Hoehe bleibt inhaltsabhaengig. Gegengeprueft, dass darin nichts absolut oder fest positioniert ist — sonst haette das Containment dessen Bezugsrahmen verschoben. */ #page-container .ap-nabe-tafel .et_pb_text { container-type: inline-size; } .ap-nabe__paare { display: grid; grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr); gap: 0.5rem var(--gvid-apf-space-m, clamp(1rem, 0.6rem + 0.8vw, 1.5rem)); margin: 0 0 var(--gvid-apf-space-m, clamp(1rem, 0.6rem + 0.8vw, 1.5rem)); } .ap-nabe__paare dt { grid-column: 1; margin: 0; color: var(--ap-nabe-label); font-size: var(--gvid-ap-v2-eyebrow, clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem)); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.5; } .ap-nabe__paare dd { grid-column: 2; /* Die Maßbegrenzung gehoert an den TEXT, nicht an die Liste. Auf der Liste teilten sich Marke und Aussage 62 Zeichen — die Aussage bekam davon etwa 40 und brach unnoetig frueh um, waehrend rechts die halbe Tafel leer blieb. */ max-width: 58ch; margin: 0; /* der 21-px-Einzug des Themes faellt weg */ color: var(--ap-nabe-fliess); font-size: var(--gvid-ap-v2-body, clamp(1rem, 0.93rem + 0.28vw, 1.1875rem)); line-height: 1.55; } /* Jedes Paar bekommt eine feine Trennlinie ausser dem ersten. `dt + dd` waere falsch herum — die Linie gehoert VOR die naechste Marke. */ .ap-nabe__paare dt:not(:first-of-type) { padding-top: var(--gvid-apf-space-m, clamp(1rem, 0.6rem + 0.8vw, 1.5rem)); border-top: 1px solid var(--ap-nabe-rand); } .ap-nabe__paare dd:not(:first-of-type) { padding-top: var(--gvid-apf-space-m, clamp(1rem, 0.6rem + 0.8vw, 1.5rem)); border-top: 1px solid var(--ap-nabe-rand); } /* Schmal: Marke ueber die Aussage, sonst bleiben von der Textspalte 40 % uebrig. Der Umschaltpunkt gehoert an die SPALTE, nicht an den Bildschirm. Seit die Tafel dreispaltig ist, steht dieselbe Liste mal in 535 px, mal in 438 px Breite — bei 1440 px Fensterbreite. Die Bildschirmabfrage darunter hat davon nichts gesehen und die Liste zweispaltig gelassen: 192 px Marke neben 224 px Aussage, also 42 % der Spalte fuer ein Wort in Grossbuchstaben. Gemessen ueber alle elf Listen der Seite, einspaltig gegen zweispaltig: 457 px breit 675 -> 449 px (-226) 438 px breit 1174 -> 727 px (-447) 535 px breit 646 -> 479 px (-167) 1312 px breit 353 -> 353 px (unveraendert, ueber der Schwelle) Summe 6373 -> 4879 px (-1494) Die Marke ueber der Aussage ist also nicht nur besser lesbar, sondern KUERZER — der schmale Textblock brauchte mehr Zeilen, als die Marke an Hoehe kostet. Schwelle 38rem: darunter bekaeme die Aussage weniger als etwa 45 Zeichen je Zeile. Die Bildschirmabfrage bleibt als Rueckfallebene fuer Browser ohne Container-Abfragen stehen; beide zusammen widersprechen sich nicht. */ @container (width < 38rem) { .ap-nabe__paare { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; } .ap-nabe__paare dt, .ap-nabe__paare dd { grid-column: 1; } .ap-nabe__paare dd:not(:first-of-type) { padding-top: 0; border-top: 0; } } @media (width < 40rem) { .ap-nabe__paare { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; } .ap-nabe__paare dt, .ap-nabe__paare dd { grid-column: 1; } .ap-nabe__paare dd:not(:first-of-type) { padding-top: 0; border-top: 0; } } /* Aufzaehlung mit eigener Marke statt des Browser-Punktes im Vorgabe-Einzug. */ .ap-nabe__liste, .ap-nabe__liste li { /* Auch am `li`: `list-style` vererbt zwar, aber das Theme setzt `list-style-type: disc` direkt auf die Listenpunkte. Ergebnis war ein Browser-Punkt NEBEN dem goldenen — im Bild sofort zu sehen, in keiner Messung. */ list-style: none; } .ap-nabe__liste { margin: 0 0 var(--gvid-apf-space-m, clamp(1rem, 0.6rem + 0.8vw, 1.5rem)); padding: 0; max-width: 62ch; } .ap-nabe__liste li { position: relative; margin: 0 0 0.55rem; padding-left: 1.5rem; color: var(--ap-nabe-fliess); font-size: var(--gvid-ap-v2-body, clamp(1rem, 0.93rem + 0.28vw, 1.1875rem)); line-height: 1.55; } .ap-nabe__liste li::before { content: ""; position: absolute; top: 0.62em; left: 0; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ap-nabe-label); } /* Die Kachel richtet sich nach dem Platz, den sie WIRKLICH hat — nicht nach der Fensterbreite. Eine Fenster-Medienabfrage kann diesen Fall gar nicht treffen: dieselbe `schritte`-Nabe steht auf der Startseite einmal ueber die volle Breite (1280 px) und einmal in der zweiten Spalte von `tm-kontakt` (837 px) — bei EINER Fensterbreite von 1440 px. Gemessen 2026-08-23 an der Live-Seite: in der engen Spalte blieben je Kachel 167,3 px, davon 62,2 px Polster und 98,8 px fuer Text bei 24 px Schrift. Vier der fuenf Woerter sind breiter als das, `entscheiden` mit 140,0 px ragte je nach Fenster 5,5 bis 23,2 px ueber den Kachelrand. Das Polster kam aus `--gvid-ap-v2-button-x`: ein BUTTON-Mass auf einer 167-px-Kachel, 37 % der Flaeche. Nicht das Wort war zu lang, der Massstab war der falsche. Die Einengung auf `@media (width >= 60rem)` ist kein Beiwerk: unterhalb davon stehen die Kacheln einspaltig und haben reichlich Platz. Ohne sie verkleinerte der Container-Fall auch auf dem Telefon — gemessen 30 Kacheln, 0 davon zu eng. Mit der Einengung aendern sich GENAU die fuenf beengten (Polster 31,12 -> 21,12 px, Schrift 24 -> 18,9 px), die anderen 25 bleiben unberuehrt. Abnahme ueber zehn Fensterbreiten von 390 bis 1920 px: vorher 7 Ueberlaeufe, nachher 0. */ .ap-nabe { container-type: inline-size; } @media (width >= 60rem) { @container (max-width: 56rem) { .ap-nabe--schritte .ap-nabe__kachel { padding: var(--gvid-ap-v2-button-y) var(--gvid-apf-space-m); } } } /* Die Kontaktsektion `tm-kontakt` ist ABSICHTLICH zweispaltig: links Text, rechts sass das alte Einstiegsweg-Gadget. Die Regel dafuer steht in `ap-gadget-anfrage-assets/gadget-anfrage.css` und zaehlt beide Seiten namentlich auf — `.et_pb_text/.et_pb_heading/.et_pb_divider` nach links, `.ap-gadget-unit--einstiegsweg` nach rechts. Das Code-Modul mit der Kachelleiste steht in keiner der beiden Listen und faellt deshalb in die schmale linke Spalte: gemessen 2026-08-23 waren das 335 px statt 1203, fuenf Kacheln zu je 68 px, Text 55 px im Ueberlauf. Es uebernimmt hier den Platz, den das Gadget hatte — die Gestaltung der Sektion bleibt unangetastet. Faellt die Gadget-Regel eines Tages weg, faellt auch das Raster weg; dann ist diese Regel wirkungslos, aber nicht schaedlich. */ @media (min-width: 69rem) { /* Berichtigt 2026-08-24: die Nabe stand in Spalte 2 des geerbten Gadget-Rasters (28/72). Das war fuer die hohe Bedienflaeche des alten Gadgets richtig, fuer eine Kachelreihe nicht: der Ueberschrift blieben 335 px und sie brach ueber SIEBEN Zeilen. Jede andere Nabe der Seite steht ueber die volle Breite — diese jetzt auch. */ #page-container #tm-kontakt.ap-card-section .et_pb_column > .et_pb_code:has(.ap-nabe) { grid-column: 1 / -1; } #page-container #tm-kontakt.ap-card-section .et_pb_column { grid-template-columns: minmax(0, 1fr) !important; } } /* ── Die Bühne an den Bildschirm binden ───────────────────────────────────── Operator 2026-08-24: „Die Sektion muss an den Bildschirm vh gebunden werden - aktuell ist das zu gross." Gemessen war eine Sektion 2,1 bis 2,3 Bildschirme hoch (mobil bis 5,2), weil die Werkzeuge 44 bis 78 % der Tafel ausmachen. Die Hoehe kommt aus `buehnenhoehe.js` (Bildschirm minus Kachelleiste minus klebender Kopf). Der Fallback greift nur, wenn das Skript nicht laeuft — dann ist die Buehne etwas zu hoch, aber nie kaputt. Gescrollt wird in der TAFEL, nicht im Gadget. Das ist der Unterschied zum Mangel vom 2026-08-21: dort hatten einzelne Gadgets eigene, unbeabsichtigte Scrollports; hier liegt genau einer bewusst eine Ebene darueber. `overscroll-behavior: contain` verhindert, dass das Scrollende der Tafel die ganze Seite weiterreisst. Decision-ID: nabe-buehne-an-viewport-20260824 */ /* KEINE feste Hoehe und KEIN Scrollport — Operator 2026-08-24: „in keiner Sektion sollte gescrollt werden". Die Buehne waechst mit ihrem Inhalt; Platz spart die Kachelleiste, die links daneben steht statt darueber. */ .ap-nabe-buehne { height: auto; } #page-container .ap-nabe-buehne > .et_pb_row.ap-nabe-tafel { height: auto; } /* Ohne diese Regel wird der Inhalt ABGESCHNITTEN statt scrollbar. Gemessen an der Tafel `ueber-uns-wer`: die Spalte stand auf `overflow: clip` und wurde als Flex-Kind auf 338 px gestaucht, obwohl ihr Inhalt 1512 px hoch ist — die Tafel meldete `scrollHeight` 406 und hatte nichts zu scrollen, das Werkzeug war unerreichbar. Der Scrollbereich gehoert der TAFEL; die Spalte muss dafuer ihre natuerliche Hoehe behalten und darf nicht klippen. */ #page-container .ap-nabe-buehne > .et_pb_row.ap-nabe-tafel > .et_pb_column { flex: 0 0 auto; height: auto; min-height: 0; overflow: visible; } /* Ohne `:has()` liegen die Tafeln im Fluss und die Buehne waere so hoch wie ihre laengste — eine feste Hoehe wuerde dort Inhalt abschneiden statt scrollbar zu machen. In diesem Fall bleibt die Buehne lieber zu hoch. */ @supports not selector(:has(*)) { .ap-nabe-buehne { height: auto; overflow: visible; } #page-container .ap-nabe-buehne > .et_pb_row.ap-nabe-tafel { height: auto; overflow: visible; } } /* ── Den vorhandenen Platz ausnutzen ──────────────────────────────────────── Operator 2026-08-24: „kein text oder gadget kuerzen sondern logisch den platz nutzen der vorhanden ist." Zwei ungenutzte Reserven, im Browser gegeneinander gemessen (Tafel `ueber-uns-wer`): 960 px breit, einspaltig ......... 1512 px hoch (Ausgangslage) volle Breite, einspaltig ......... 1512 px kein Gewinn: der Fliesstext hat eine eigene Lesebreite volle Breite, zweispaltig ......... 1174 px volle Breite, 1 : 1,4 ......... 1100 px gewaehlt Also 27 % weniger Hoehe, ohne ein Wort oder ein Bedienelement zu streichen. Das Werkzeug bekommt die breitere Spalte, weil es Eingabefelder nebeneinander legen kann, waehrend Fliesstext ab einer gewissen Breite nicht mehr flacher wird. NUR mit Werkzeug: eine Tafel ohne Gadget wird zweispaltig SCHLECHTER — gemessen an der Fragen-Tafel 480 -> 1243 px, weil der Text dann auf halber Breite steht. Deshalb haengt die Regel an `:has()`. Decision-ID: nabe-tafel-platz-ausnutzen-20260824 */ @media (width >= 60rem) { #page-container .ap-nabe-buehne > .et_pb_row.ap-nabe-tafel { max-width: none; width: 96%; } #page-container .ap-nabe-buehne > .et_pb_row.ap-nabe-tafel:has(> .et_pb_column > [class*="ap-"]) > .et_pb_column { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); grid-auto-rows: min-content; column-gap: var(--gvid-apf-gap-m, 0.618rem); align-content: start; } /* Die Ueberschrift ordnet die ganze Tafel, nicht nur die linke Spalte. */ #page-container .ap-nabe-buehne > .et_pb_row.ap-nabe-tafel:has(> .et_pb_column > [class*="ap-"]) > .et_pb_column > .et_pb_heading { grid-column: 1 / -1; } /* Alles ausser dem Werkzeug gehoert in die linke Spalte. Ohne diese Regel platziert das Grid die Module automatisch, und der letzte Textblock rutscht unter das Werkzeug in Spalte 2 — gemessen 2026-08-24: `et_pb_text_3` bei x=794 statt x=345. */ #page-container .ap-nabe-buehne > .et_pb_row.ap-nabe-tafel > .et_pb_column > *:not([class*="ap-"]):not(.et_pb_heading) { grid-column: 1; } /* Das Werkzeug rechts, ueber alle Textzeilen hinweg. */ #page-container .ap-nabe-buehne > .et_pb_row.ap-nabe-tafel > .et_pb_column > [class*="ap-"] { grid-column: 2; /* `2 / -1` statt einer festen Spannweite: neunundneunzig angeforderte Zeilen legt der Browser auch dann an, wenn nur vier gebraucht werden. Gemessen 2026-08-24 wuchs die Buehne dadurch auf 3990 px, obwohl die Inhalte zusammen rund 1038 px hoch sind — die leeren Zeilen zaehlten mit. Kein Fehler, keine Meldung, nur eine vierfach zu hohe Sektion. */ grid-row: 2 / -1; align-self: start; } } /* ── Kachelleiste links neben dem Inhalt ──────────────────────────────────── Operator 2026-08-24 (1a). Die Leiste stand ueber der Buehne und kostete dort 183 px Hoehe (mobil 344). Links daneben kostet sie null Hoehe — die Buehne bekommt dadurch 745 statt 562 px, ohne dass ein Wort wegfaellt. `buehnenhoehe.js` verschiebt die `.ap-nabe` einmal in die Buehne und setzt `--mit-leiste`; die Anordnung macht ab hier CSS. Gefahrlos, weil die Schaltkopplung an `body:has(...)` haengt und nicht an der DOM-Position. Decision-ID: nabe-kacheln-links-20260824 */ .ap-nabe-buehne--mit-leiste { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; } @media (width >= 60rem) { .ap-nabe-buehne--mit-leiste { grid-template-columns: clamp(14rem, 20vw, 19rem) minmax(0, 1fr); column-gap: var(--gvid-apf-gap-m, 0.618rem); align-items: start; } /* Die Kacheln stapeln sich in ihrer Spalte, statt sich die Breite zu teilen. */ .ap-nabe-buehne--mit-leiste > .ap-nabe { grid-column: 1; align-self: start; grid-template-columns: minmax(0, 1fr); align-content: start; /* Beim Scrollen in der Tafel bleibt die Navigation stehen — sonst waere sie genau dann weg, wenn man sie zum Wechseln braucht. */ position: sticky; top: 0; } .ap-nabe-buehne--mit-leiste > .ap-nabe .ap-nabe__kachel { grid-row: auto; } /* Die Tafeln liegen weiterhin uebereinander, jetzt in der rechten Spalte. */ .ap-nabe-buehne--mit-leiste > .ap-nabe-tafel { grid-column: 2; grid-row: 1; align-self: start; } } /* Unter 60rem keine Bindung: dort ist die Tafel 312 px breit, die Kachelleiste nimmt 344 von 844 px, und es blieben 7 bis 10 % des Inhalts sichtbar. Der Fallback im `height` der Buehne wuerde sonst greifen, auch ohne gesetzte Variable. Operator-Entscheidung 2026-08-24. */ @media (width < 60rem) { .ap-nabe-buehne { height: auto; overflow: visible; } #page-container .ap-nabe-buehne > .et_pb_row.ap-nabe-tafel { height: auto; overflow: visible; } } /* ── Drei Spalten: Kacheln | Text | Werkzeug ──────────────────────────────── Operator 2026-08-24: „erstell eine sektion mit 3 modulen - ganz links das modul mit den kacheln - in der mitte den text und das rechte modul das gadget". Die Kachelleiste ist jetzt eine ECHTE Divi-Zeile in der Buehnensektion, keine eigene Sektion und kein per JavaScript verschobenes Element. Das ist der Unterschied, an dem der vorherige Versuch scheiterte: ein verschobenes Element wurde von Divis Grid nicht als Spalte behandelt und kollabierte auf 0 px Breite. Spalte 1 traegt die Navigation, Spalte 2 die Tafeln — und innerhalb der Tafel teilen sich Text und Werkzeug den Platz (Regel weiter oben, 1 : 1,4). Von aussen sind das die drei Bereiche, die der Auftrag verlangt. Decision-ID: nabe-drei-spalten-20260824 */ @media (width >= 60rem) { .ap-nabe-buehne:has(> .ap-nabe-leiste) { grid-template-columns: clamp(13rem, 18vw, 17rem) minmax(0, 1fr); column-gap: var(--gvid-apf-gap-m, 0.618rem); align-content: start; } .ap-nabe-buehne > .ap-nabe-leiste { grid-column: 1; grid-row: 1; width: 100%; max-width: none; margin: 0; /* Beim Lesen der Tafel bleibt die Navigation stehen. */ position: sticky; top: var(--ap-header-h, 0px); } /* Die Kacheln stapeln sich in ihrer schmalen Spalte. */ .ap-nabe-buehne > .ap-nabe-leiste .ap-nabe { grid-template-columns: minmax(0, 1fr); } .ap-nabe-buehne > .ap-nabe-leiste .ap-nabe__kachel { grid-row: auto; } /* Die Tafeln rueckt es in die zweite Spalte; sie liegen dort weiter uebereinander. */ .ap-nabe-buehne:has(> .ap-nabe-leiste) > .ap-nabe-tafel { grid-column: 2; grid-row: 1; } } /* ── Werkzeuge muessen in ihre Spalte passen ──────────────────────────────── Die Werkzeuge stammen von Seiten, auf denen sie die volle Breite hatten. In der Werkzeugspalte der Tafel (588 px) sprengen zweispaltige Innenlayouts den Rahmen: gemessen 2026-08-24 ragte der Gespraechskompass 123 px ueber den rechten Rand (`grid-template-columns: 448px 256px` in einem 588-px-Container, feste Werte, kein Umbruch). Statt jedes Werkzeug einzeln zu flicken, gilt hier eine Regel fuer alle: in dieser Spalte wird jedes innere Raster einspaltig, sobald es nicht mehr passt. `minmax(0, …)` allein reicht nicht — die Spalten sind in Pixeln angegeben. Zweiter Fall, 2026-08-24 nachgezogen: der Anfragerechner ist selbst ein Zweispalter (`281px 343px` in 641 px Werkzeugspalte). Nichts lief ueber — die Regel oben faengt das ab —, aber beide Karten standen auf 228 und 290 px nebeneinander, und darin brach jede Beschriftung um: `EINE ECHTE TESTANFRAGE` auf drei Zeilen, `Selbst gesetzte Ziel-Anfragen/Monat` ebenso, und Titel und Knopf einer Karte drangten sich in 228 px nebeneinander. Kein Messwert schlug an, weil kein Element den Rahmen verliess — sichtbar war es trotzdem. Untereinander bekommt jede Karte 613 px. Decision-ID: nabe-drei-spalten-20260824 */ @media (width >= 60rem) { #page-container .ap-nabe-buehne .et_pb_column > [class*="ap-"] { min-width: 0; max-width: 100%; } #page-container .ap-nabe-buehne .et_pb_column > [class*="ap-"] * { max-width: 100%; min-width: 0; /* Die Werkzeuge bringen `overflow-wrap: anywhere` als eigenen Ueberlaufschutz mit. In ihrer frueheren vollen Breite fiel das nie auf; in der schmalen Werkzeugspalte trennt es mitten im Wort und ohne Bindestrich — gemessen `Anfragequali tät` in einem 83 px breiten Feld und `Eigene Kontak tliste` in 46 px. `break-word` bricht ebenfalls, aber erst wenn ein Wort allein nicht passt, und `hyphens: auto` trennt davor nach deutschen Sprachregeln; die Seite traegt `lang="de"`, ohne das waere die Angabe wirkungslos. */ overflow-wrap: break-word; hyphens: auto; } /* Zweispaltige Innenlayouts mit festen Pixelspalten brechen um. */ #page-container .ap-nabe-buehne .ap-anfragerechner { grid-template-columns: minmax(0, 1fr); } /* Der Auswahlblock von `ap-du` bekommt KEINE Einspaltigkeit, sondern sein Seitenverhaeltnis zurueck. Einspaltig war die bequeme Loesung und die teuerste — gemessen bei 641 px Werkzeugspalte: einspaltig Werkzeug 2061 px, Block 892 px, kein Ueberlauf Verhaeltnis 1,75 : 1 Werkzeug 1707 px, Block 538 px, kein Ueberlauf Originalspalten fest Werkzeug 1634 px, Block 465 px, SECHS Elemente laufen ueber Das Verhaeltnis bildet die urspruenglichen 448 zu 256 px nach, ohne feste Werte. Es spart 354 px gegenueber dem Umbruch und ist damit der groesste einzelne Posten an der Hoehe dieser Buehne. */ #page-container .ap-nabe-buehne .ap-du__selector { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); } } /* ── Die Kachelleiste als Navigation setzen ───────────────────────────────── Operator 2026-08-24: „zentriert und clamp fluid, an den Bildschirm angepasst, SOTA-Layout — aktuell sieht es wie gewollt, aber nicht gekonnt aus." Gemessen war das Urteil berechtigt: die Leiste klebte bei x=5 ohne Innenabstand, `gap: normal` statt eines gesetzten Abstands, Kachelhoehen 94/94/99/94/75 px (Flattern durch unterschiedlich lange Unterzeilen) und ein Kopf von 163 px, weil 24-px-Lead in einer 249-px-Spalte auf vier Zeilen umbricht. Vier Eingriffe, alle fluid: 1. Innenabstand statt Randkleben, mitwachsend. 2. `grid-auto-rows: 1fr` — alle Kacheln nehmen die Hoehe der groessten. Das ist der Unterschied zwischen einer Liste und einer Navigation. 3. Der Kopf bekommt eine Groesse, die zur Spaltenbreite passt. 4. Vertikal zentriert in ihrer Spalte, statt oben zu kleben — bei einer 2600 px hohen Buehne stand die 620-px-Leiste sonst einsam am oberen Rand. Decision-ID: nabe-leiste-sota-20260824 */ @media (width >= 60rem) { /* `#page-container` als Anker, weil Divis eigene Zeilen-Regeln sonst gewinnen: ohne ihn blieb `padding-inline` bei 0 und `align-self` wirkungslos (gemessen 2026-08-24: Leiste weiter bei x=5, Mitte 1444 gegen Buehnenmitte 2259). */ /* `.et_pb_row` mit im Selektor, sonst gewinnt die aeltere eigene Regel `> .et_pb_row:not(.ap-nabe-tafel)` — sie hat eine Klasse mehr und setzt das Polster zurueck. Gemessen 2026-08-24: `padding` blieb 0, obwohl die Regel den Treffer hatte. Gleiche Spezifitaet, spaeter im Blatt = sie gilt. */ #page-container .ap-nabe-buehne > .et_pb_row.ap-nabe-leiste { padding-inline: clamp(0.75rem, 1.4vw, 1.6rem); /* Zentriert statt oben klebend. `sticky` von vorher wuerde das aushebeln — beides zusammen geht nicht, und Zentrierung war die Vorgabe. */ position: static; align-self: center; width: 100%; max-width: none; margin-inline: 0; } .ap-nabe-buehne > .ap-nabe-leiste .ap-nabe { gap: clamp(0.45rem, 0.6vw, 0.75rem); /* Gleiche Hoehe fuer alle: `1fr` gibt jeder Zeile die Hoehe der groessten. */ grid-auto-rows: 1fr; /* ...aber `grid-auto-rows` gilt fuer JEDE Zeile, auch fuer die des Kopfes. Und der Kopf ist die hoechste: dreizeilig, 109 px. `1fr` zog daraufhin alle sechs Zeilen auf 109 px hoch — die Kacheln brauchten davon nur 77, der Text belegte 0,431 der Hoehe statt der gewuenschten 0,618. Es sah nach zu viel Innenabstand aus, war aber der Kopf. `grid-template-rows` nimmt die erste Zeile aus der Angleichung heraus: der Kopf so hoch wie noetig, die Kacheln untereinander gleich hoch. */ grid-template-rows: min-content; } .ap-nabe-buehne > .ap-nabe-leiste .ap-nabe__kopf { /* Lead-Groesse ist fuer eine 249-px-Spalte zu gross — vier Zeilen Umbruch. Diese Spanne haelt den Kopf bei zwei bis drei Zeilen. */ font-size: clamp(0.95rem, 0.75rem + 0.5vw, 1.25rem); line-height: 1.25; margin-bottom: clamp(0.6rem, 0.9vw, 1.1rem); } /* Operator 2026-08-24: in der Kachel steht nur noch die Ueberschrift. Die Unterzeile wird NICHT entfernt, sondern nur unsichtbar gesetzt — sie traegt Inhalt („Eine Person, vom Anfang bis zur Uebergabe"), der einer Vorlesehilfe sonst ersatzlos fehlte. `display: none` haette ihn auch dort geloescht; dieses Muster nimmt ihn aus dem Bild und laesst ihn im Zugaenglichkeitsbaum. `clip-path` statt der alten `clip`-Schreibweise, und `white-space: nowrap` verhindert, dass der Text im 1-px-Rahmen umbricht. Die frueheren drei Zeilen und ihre Messwerte sind damit gegenstandslos. */ } /* Unter 60rem steht die Leiste ueber der Buehne — gleiche Kachelhoehen und ein gesetzter Abstand gehoeren dort genauso hin. Gemessen ohne diese Regel: 115/115/98/98/62 px und `gap: normal`. */ @media (width < 60rem) { #page-container .ap-nabe-buehne > .ap-nabe-leiste .ap-nabe { gap: clamp(0.4rem, 1.4vw, 0.7rem); grid-auto-rows: 1fr; } /* Auch hier nur die Ueberschrift, gleiche Begruendung wie oben. */ } /* ── EIN Raster ueber drei Spalten: Kacheln | Text | Werkzeug ─────────────── Operator 2026-08-24: „3 spalten - links kacheln mitte text rechts gadget." Bis hierher waren es technisch zwei Raster: die Buehne mit Leiste und Tafel, und in der Tafel noch einmal Text und Werkzeug. Optisch drei Bereiche, aber die Kanten lagen nicht auf einer Linie und die Textspalte lief unter ihrem kurzen Text leer, waehrend das Werkzeug daneben weiterlief. `subgrid` loest genau das: die Tafel macht kein eigenes Raster auf, sondern uebernimmt die Spalten der Buehne. Text und Werkzeug sitzen damit in denselben Spalten wie die Leiste — eine durchgehende Dreiteilung. Der Fallback darunter greift, wenn ein Browser `subgrid` nicht kennt: dann bleibt es beim bisherigen Zustand, nicht bei einem kaputten. Decision-ID: nabe-echte-drei-spalten-20260824 */ @media (width >= 60rem) { @supports (grid-template-columns: subgrid) { #page-container .ap-nabe-buehne:has(> .ap-nabe-leiste) { /* Operator 2026-08-24: linke Spalte klein, die beiden Inhaltsspalten exakt gleich breit. `1fr` zweimal heisst gleiche Breite erst zusammen mit `minmax(0, ...)` — ohne das untere 0 waere die Mindestbreite der Inhalt selbst, und die breitere Tafel wuerde ihre Spalte aufziehen. */ grid-template-columns: clamp(11rem, 15vw, 14rem) minmax(0, 1fr) minmax(0, 1fr); } /* Die Tafel spannt ueber Spalte 2 und 3 und reicht das Raster durch. */ #page-container .ap-nabe-buehne:has(> .ap-nabe-leiste) > .et_pb_row.ap-nabe-tafel { grid-column: 2 / -1; display: grid; grid-template-columns: subgrid; } /* Divis Spalte sitzt zwischen Tafel und Inhalt — sie muss das Raster ebenfalls durchreichen, sonst endet es eine Ebene zu frueh. */ #page-container .ap-nabe-buehne:has(> .ap-nabe-leiste) > .et_pb_row.ap-nabe-tafel > .et_pb_column { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; /* Das Zeilenraster muss EXPLIZIT sein, sonst ist `grid-row: 2 / -1` beim Werkzeug wirkungslos: `-1` zaehlt im expliziten Raster, und ohne Zeilendefinition hat das null Zeilen — aus `2 / -1` wird dann Zeile 1, das Werkzeug landet ueber dem Kopf und der Text rutscht darunter. Genau das war der Zustand: drei Spalten nebeneinander, Inhalt untereinander. Acht Zeilen decken den groessten Fall (5 Module) mit Reserve. `row-gap: 0` gehoert dazu: der Abstand galt sonst auch zwischen den leeren Reservezeilen und haette die Tafel um 30 px je Leerzeile aufgeblaeht. Der Abstand kommt deshalb als Aussenabstand am Modul. */ grid-template-rows: repeat(8, min-content); grid-auto-rows: min-content; /* OBEN, nicht mittig. Zentriert war der erste Versuch und falsch: gemessen begann die kuerzeste Tafel dann 475 px unter der Kachelleiste, die laengste bei 0 — die Buehne stand zwar still, aber der INHALT sprang beim Wechseln. Oben ausgerichtet beginnt jede Tafel an derselben Stelle; was sich unterscheidet, ist allein die Laenge. */ align-content: start; row-gap: 0; } /* Ueberschrift ueber beide Inhaltsspalten, Text links, Werkzeug rechts. */ #page-container .ap-nabe-buehne:has(> .ap-nabe-leiste) > .et_pb_row.ap-nabe-tafel > .et_pb_column > .et_pb_heading { grid-column: 1 / -1; margin-block-end: 1.875rem; } /* Der Text ist kuerzer als das Werkzeug daneben. Weil das Werkzeug ueber alle Textzeilen spannt, verteilt Grid seine Mehrhoehe auf genau diese Zeilen — der Text bekommt dadurch Raum um sich, klebt aber ohne `align-self` oben an der Zeilenkante. Zentriert steht er mittig zur Werkzeughoehe statt oben mit einem Loch darunter. */ #page-container .ap-nabe-buehne:has(> .ap-nabe-leiste) > .et_pb_row.ap-nabe-tafel > .et_pb_column > *:not([class*="ap-"]):not(.et_pb_heading) { grid-column: 1; align-self: center; margin-block-end: 1.875rem; } #page-container .ap-nabe-buehne:has(> .ap-nabe-leiste) > .et_pb_row.ap-nabe-tafel > .et_pb_column > [class*="ap-"] { grid-column: 2; grid-row: 2 / -1; align-self: start; } /* Eine Tafel OHNE Werkzeug darf die dritte Spalte nicht leer lassen. Die aeltere Zweispalten-Regel weiter oben haengt genau deshalb an `:has()` — gemessen an der Fragen-Tafel wurde sie zweispaltig SCHLECHTER, 480 auf 1243 px. Dieser Block hier hatte die Bedingung nicht mitgenommen: alle fuenf Fragen-Tafeln haben kein Werkzeug, und ihr Text stand danach in Spalte 2, waehrend Spalte 3 ueber die ganze Buehne weiss blieb. Ohne Werkzeug laeuft der Text deshalb ueber beide Inhaltsspalten — die Kachelleiste behaelt ihre eigene Spalte, die Dreiteilung bleibt also sichtbar, nur der Textbereich ist dann so breit wie die Ueberschrift. */ #page-container .ap-nabe-buehne:has(> .ap-nabe-leiste) > .et_pb_row.ap-nabe-tafel:not(:has(> .et_pb_column > [class*="ap-"])) > .et_pb_column > * { grid-column: 1 / -1; } } } /* ── Die verschenkte Breite auf schmalen Schirmen ─────────────────────────── Operator 2026-08-24: „das Gadget soll vh-Groesse haben, man muss nicht scrollen muessen." Gemessen bei 390 px Bildschirm blieben dem Inhalt 219 px — 44 % gingen an drei GESTAPELTE Innenabstaende, von denen jeder einzelne vernuenftig aussah: Bildschirm ................ 390 px Reihe (Divi, 80 % + 21,6) . 312 px −78 Spalte (Divi, 24 je Seite) 267 px −45 Gadget (16 je Seite) ...... 219 px −48 Schmaler Text ist hoeher Text: dieselbe Tafel war dadurch 4466 px hoch statt 3195 — 28,5 % der Hoehe kamen allein aus dem verlorenen Platz, ohne dass ein Wort mehr dastand. Ein Rand bleibt, aber EINER statt drei. Decision-ID: nabe-gadget-container-query-20260824 */ @media (width < 60rem) { #page-container .ap-nabe-buehne > .et_pb_row.ap-nabe-tafel { width: 100%; max-width: none; padding-inline: 0.75rem; } #page-container .ap-nabe-buehne > .et_pb_row.ap-nabe-tafel > .et_pb_column { padding-inline: 0; } } /* ── Abstände straffen, ohne ein Wort zu kürzen ───────────────────────────── Operator 2026-08-24: „alle sektion vh höhe bildschirm." Zerlegt an der Sales-Werkzeugtafel: von 970 px waren 148 px reiner Abstand — 68 px Tafelpolster, 30 px unter der Überschrift, 80 px um das Werkzeug herum. Das Werkzeug selbst war 748 px, die Überschrift 43 px. Gemessen über alle vier Naben: ueber-uns −80 px, verluste −112 px, leistungen −36 px, fragen unverändert (liegt bereits auf Bildschirmhöhe). Kein neuer Überlauf, kein Wort fällt weg. Der Werkzeug-Abstand wird unten auf 0 gesetzt statt halbiert: darunter folgt das Tafelpolster, zwei Abstände übereinander sind einer zu viel. Decision-ID: nabe-abstaende-straffen-20260824 */ @media (width >= 60rem) { #page-container .ap-nabe-buehne > .et_pb_row.ap-nabe-tafel { padding-top: 16px; padding-bottom: 16px; } #page-container .ap-nabe-buehne .et_pb_column > [class*="ap-"] { margin-top: 20px; margin-bottom: 0; } #page-container .ap-nabe-buehne .ap-nabe-tafel > .et_pb_column > .et_pb_heading { margin-block-end: 18px; } } /* ── Leistungen: Werkzeug und Erläuterung sind zwei Kacheln ───────────────── Operator 2026-08-25 („1a 2a"): jede Sektion soll auf einen Bildschirm passen. Gemessen war die Leistungs-Nabe 1418 px hoch bei einem Ziel von 745 — und die Höhe entstand NICHT am Werkzeug, wie zunächst angenommen, sondern an der Textspalte daneben: bei 473 px Breite standen die drei Textblöcke 1157 px hoch, das Werkzeug daneben nur 857. Grid verteilt die Mehrhöhe auf die Textzeilen, also bestimmte der Text die Tafel. Zwei Wege wurden gemessen, bevor dieser gebaut wurde: · anderes Spaltenverhältnis (32–62 % in sechs Stufen): Optimum bei 50 %, aber immer noch 989–1146 px. Reicht nicht. · Werkzeug und Text auf ZWEI Tafeln trennen: 523–693 px je Tafel. Trägt. Deshalb sechs Fächer statt drei (`daten-leistungen.json`), und die drei Regelblöcke hier darunter. Decision-ID: nabe-leistungen-werkzeug-und-text-trennen-20260825 */ @media (width >= 60rem) { @supports (grid-template-columns: subgrid) { /* 1. Werkzeugtafel — das Gegenstück zur Regel für Tafeln OHNE Werkzeug. Dort läuft der Text über beide Inhaltsspalten; hier ist es umgekehrt: eine Tafel, die NUR ein Werkzeug trägt, ließe sonst die Textspalte über die ganze Bühnenhöhe leer. Über beide Spalten fällt das Werkzeug von 857 auf 511 px (Sales) — dieselbe Menge Inhalt, nur breiter gesetzt. */ #page-container .ap-nabe-buehne:has(> .ap-nabe-leiste) > .et_pb_row.ap-nabe-tafel:not(:has(> .et_pb_column > .et_pb_text)) > .et_pb_column > [class*="ap-"] { grid-column: 1 / -1; } /* 2. Erläuterungstafel — die drei Blöcke nebeneinander statt untereinander. Untereinander bei voller Breite: 898 px. Nebeneinander: 604 px. Die Begriffspaare sind der längste Block und bekommen eine eigene Spalte über beide Zeilen; Antwort und Liste teilen sich die zweite. Angesprochen wird über den INHALT (`:has`), nicht über die Position — eine spätere Umsortierung der Blöcke kippt die Regel damit nicht. */ #page-container .ap-nabe-buehne:has(> .ap-nabe-leiste) > .et_pb_row.ap-nabe-tafel[class*="-detail"] > .et_pb_column > .et_pb_text { align-self: start; } #page-container .ap-nabe-buehne:has(> .ap-nabe-leiste) > .et_pb_row.ap-nabe-tafel[class*="-detail"] > .et_pb_column > .et_pb_text:has(.ap-nabe__paare) { grid-column: 1; grid-row: 2 / span 2; } #page-container .ap-nabe-buehne:has(> .ap-nabe-leiste) > .et_pb_row.ap-nabe-tafel[class*="-detail"] > .et_pb_column > .et_pb_text:has(.ap-nabe__antwort) { grid-column: 2; grid-row: 2; } #page-container .ap-nabe-buehne:has(> .ap-nabe-leiste) > .et_pb_row.ap-nabe-tafel[class*="-detail"] > .et_pb_column > .et_pb_text:has(.ap-nabe__liste) { grid-column: 2; grid-row: 3; } } } /* ── Die Werkzeuge nutzen die gewonnene Breite Alleine auf der Tafel steht ein Werkzeug jetzt 1144 statt 662 px breit — und ordnete seinen Inhalt trotzdem so an wie in der halben Spalte. Gemessen: `ls-assignments` legte vier Zuordnungen à 70 px UNTEREINANDER, obwohl 1086 px Platz war (314 px für vier Zeilen). Die Zuordnungen hängen deshalb am CONTAINER, nicht am Bildschirm. Der Grund ist derselbe wie bei der Diagnoseuhr: eine Bildschirmabfrage sieht 1440 px, auch wenn das Werkzeug in einer 662-px-Spalte steht — sie kann den einen Fall vom anderen nicht unterscheiden. Der Container kann es. Das Wirkungsgefüge geht einen anderen Weg, weil es nicht anders ging: eine `@container`-Abfrage kann das Element, das den Container AUFSPANNT, nicht selbst umbauen — sie greift erst bei dessen Kindern. Für `.ap-wg` hängt die Regel deshalb daran, ob die Tafel Text trägt: keine Textmodule ⇒ es ist eine Werkzeugtafel ⇒ das Werkzeug hat die ganze Breite. Gemessen und dann geändert: erst blieb `.ap-wg` bei 729 px stehen, obwohl die Abfrage formal richtig war. Decision-ID: nabe-leistungen-werkzeug-und-text-trennen-20260825 */ #page-container .ap-nabe-buehne .ap-nabe-tafel .ap-ls { container-type: inline-size; container-name: apwz; } /* Zwei Zuordnungen nebeneinander: 314 → 158 px. Vier wären rechnerisch noch flacher (77 px), liefen aber gemessen über — bei 1086 px blieben je Zuordnung 271 px, und der Inhalt passt darin nicht. Die Schwelle stand zuerst auf 34rem und war damit zu niedrig: bei Viewport 1024 ist der Container rund 700 px, die halbe Spalte also 340 px — gemessen lief `ls-assignment` dort über. 60rem lässt die Umschaltung erst zu, wenn je Spalte etwa 520 px bleiben. */ @container apwz (width >= 60rem) { .ls-assignments { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Der Umbau des Wirkungsgefüges hängt am FENSTER, nicht am Container: eine `@container`-Abfrage könnte `.ap-wg` nur von aussen treffen, und der einzige mögliche Container wäre die Tafelspalte — die trägt `subgrid` und darf kein Containment bekommen, sonst bricht die durchgehende Dreiteilung. 85rem statt 60rem, weil die Tafel bei Viewport 1024 nur rund 700 px breit ist: dort lief die Notizspalte gemessen über (`wg-groups`, `wg-evidence-list`). */ @media (width >= 85rem) { @supports (grid-template-columns: subgrid) { /* Werkzeugtafel: die Wegnotiz rückt neben die Gruppen statt darunter (729 → 586 px). Auf der gemischten Tafel bliebe dafür kein Platz. */ #page-container .ap-nabe-buehne .ap-nabe-tafel:not(:has(> .et_pb_column > .et_pb_text)) .ap-wg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); column-gap: 1.5rem; align-content: start; } #page-container .ap-nabe-buehne .ap-nabe-tafel:not(:has(> .et_pb_column > .et_pb_text)) .wg-intro { grid-column: 1 / -1; } #page-container .ap-nabe-buehne .ap-nabe-tafel:not(:has(> .et_pb_column > .et_pb_text)) .wg-groups { grid-column: 1; grid-row: 2; } /* Der obere Abstand bleibt, damit die Notiz auf einer Linie mit den Gruppen beginnt — sie stand vorher darunter und trug ihn deshalb schon. */ #page-container .ap-nabe-buehne .ap-nabe-tafel:not(:has(> .et_pb_column > .et_pb_text)) .wg-way-note { grid-column: 2; grid-row: 2; margin-top: 16px; } #page-container .ap-nabe-buehne .ap-nabe-tafel:not(:has(> .et_pb_column > .et_pb_text)) .wg-readout { grid-column: 1 / -1; grid-row: 3; } #page-container .ap-nabe-buehne .ap-nabe-tafel:not(:has(> .et_pb_column > .et_pb_text)) .wg-reset { grid-column: 1 / -1; grid-row: 4; } } } /* ── Der Rest bis auf einen Bildschirm ────────────────────────────────────── Nach der Trennung von Werkzeug und Erläuterung stand die Leistungs-Nabe bei 938 px, Ziel 745. Die verbleibenden 193 px lagen an drei Stellen, alle gemessen — keine davon war der Inhalt: · 108 px Zeilenabstand und Sektionspolster zwischen Bühne und Anfragezeile, · 51 px in zwei Werkzeugen, die Ablesung und Knopf untereinander stellten, obwohl daneben Platz war, · 141 px in der Kachelleiste: „Sales — im Detail" bricht bei 14rem Spalten- breite auf zwei Zeilen, und Grid gibt dann ALLEN sechs Kacheln die Höhe der höchsten — aus 53 px je Kachel wurden 100. Die Leiste ist deshalb für diese eine Nabe breiter. Gemessen über fünf Stufen: 14rem → 849 px · 16rem → 745 · 18rem → 745 · 20rem → 760 · 22rem → 760. Nach oben kippt es wieder, weil die Tafel daneben schmaler wird und ihr Werkzeug dadurch wächst. 18rem liegt im Tal und hat zu beiden Seiten Luft. Decision-ID: nabe-leistungen-werkzeug-und-text-trennen-20260825 */ @media (width >= 60rem) { #page-container .ap-nabe-buehne { row-gap: 24px; padding-bottom: 40px; } /* Die Anfragezeile ist leer, solange niemand sie öffnet — ihr Außenabstand zählt aber trotzdem als eigene Grid-Zeile mit. */ #page-container .ap-nabe-buehne > .et_pb_row:not(.ap-nabe-tafel):not(.ap-nabe-leiste) { margin-top: 0; } @supports (grid-template-columns: subgrid) { /* Nur diese Nabe: sechs Kacheln, und drei davon tragen den Zusatz „— im Detail". Die anderen Naben haben kurze Namen und behalten die schmale Leiste. */ #page-container .ap-nabe-buehne:has(> .ap-nabe-leiste)#ap-sektion-leistungen { grid-template-columns: 18rem minmax(0, 1fr) minmax(0, 1fr); } } } /* Diese beiden Verdichtungen brauchen dieselbe Fensterbreite wie der Umbau des Wirkungsgefüges weiter oben — bei Viewport 1024 ist die Tafel rund 700 px breit, und zwei Elemente nebeneinander liefen dort gemessen über. Decision-ID: nabe-leistungen-werkzeug-und-text-trennen-20260825 */ @media (width >= 85rem) { @supports (grid-template-columns: subgrid) { /* Wirkungsgefüge: Ablesung und Zurücksetzen teilen sich eine Zeile (586 → 520 px). */ #page-container .ap-nabe-buehne .ap-nabe-tafel:not(:has(> .et_pb_column > .et_pb_text)) .wg-readout { grid-column: 1; grid-row: 3; margin-top: 16px; } #page-container .ap-nabe-buehne .ap-nabe-tafel:not(:has(> .et_pb_column > .et_pb_text)) .wg-reset { grid-column: 2; grid-row: 3; margin-top: 16px; align-self: center; justify-self: start; } /* Leckstrom: Zuordnungsprüfung und Hinweis nebeneinander (592 → 541 px). Der Hinweis ist der kürzere von beiden und steht deshalb rechts. Steht im selben 85rem-Block wie oben und aus demselben Grund. */ #page-container .ap-nabe-buehne .ap-nabe-tafel:not(:has(> .et_pb_column > .et_pb_text)) .ap-ls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); column-gap: 1.5rem; align-content: start; } #page-container .ap-nabe-buehne .ap-nabe-tafel:not(:has(> .et_pb_column > .et_pb_text)) .ls-intro, #page-container .ap-nabe-buehne .ap-nabe-tafel:not(:has(> .et_pb_column > .et_pb_text)) .ls-targets, #page-container .ap-nabe-buehne .ap-nabe-tafel:not(:has(> .et_pb_column > .et_pb_text)) .ls-assignments { grid-column: 1 / -1; } #page-container .ap-nabe-buehne .ap-nabe-tafel:not(:has(> .et_pb_column > .et_pb_text)) .ls-result { grid-column: 1; grid-row: 4; } #page-container .ap-nabe-buehne .ap-nabe-tafel:not(:has(> .et_pb_column > .et_pb_text)) .ls-human-note { grid-column: 2; grid-row: 4; } #page-container .ap-nabe-buehne .ap-nabe-tafel:not(:has(> .et_pb_column > .et_pb_text)) .ls-reset { grid-column: 1 / -1; grid-row: 5; } } }