:root { --brand-onyx: #0C2148; /* Hiess bis 27.08.2026 --brand-gold. Umbenannt, weil der Name die Rolle nicht mehr traf: die Farbe ist der Akzent und steht nur noch auf primaeren Schaltflaechen, nicht mehr auf jedem Link. Geprueft vor dem Umbenennen: die Variable hing an genau drei Stellen, alle in dieser Datei, nichts in der Datenbank. */ --brand-accent: #C2410C; /* Neu: Linkfarbe. Vorher trugen alle Links den Akzent, dadurch war die Filterleiste orange und der Fokusrahmen erbte diese Farbe ueber currentColor. */ --brand-link: #13366D; --brand-ivory: #F4F6F9; --brand-text: #1A1D21; --brand-muted: #5B6675; --brand-border: #E3E7ED; --brand-font-heading: 'Archivo', 'Inter', system-ui, sans-serif; --brand-font-body: 'Inter', system-ui, -apple-system, sans-serif; /* DIE HALBE RASTERBREITE, und zwar GEMESSEN. ========================================== Jeder Baustein, der bis an die Fensterkante laeuft und seinen Text trotzdem auf der Rasterkante der uebrigen Seite haelt, rechnet diese Kante selbst aus: `calc(50% - var(--gtp-raster-halb))`. Damit es dafuer genau EINE Zahl gibt, steht sie hier und nirgends sonst. HERLEITUNG. Die Zahl ist nicht aus der Theme-Einstellung abgeleitet und nicht geschaetzt, sondern am gerenderten DOM abgelesen, mit drei unabhaengigen Zeugengruppen auf beiden Seiten und drei Fensterbreiten (reports/p57-v121-raster/messe_kante.py): Fenster Inhaltskante links rechts halbe Breite 1280 px 55,00 1225,00 585,00 1920 px 375,00 1545,00 585,00 2560 px 695,00 1865,00 585,00 Alle sieben bis acht Rasterkaesten je Seite tragen dort `max-width: 1170px`, jede Ueberschrift beginnt auf deren linker Kante, und kein Absatz ragt darueber hinaus. DREI STUFEN, WEIL DAS THEME DREI HAT. Die Rasterbreite ist keine Konstante, sondern eine Treppe aus dem Theme-Stylesheet (`style.css`, das bekannte Bootstrap-Muster). Gemessen am gerenderten DOM, Inhaltskante links (reports/p57-aufraeumen-v21/protokolle/10-lage-vorher.json): unter 768 px: kein Kasten, der Inhalt traegt 20 px Rand (320 -> 20, 390 -> 20, 767 -> 20) ab 768 px Fenster: 720 px Raster -> halbe Breite 360 px (768 -> 24, 900 -> 90, 991 -> 135,5) ab 992 px Fenster: 940 px Raster -> halbe Breite 470 px (992 -> 26, 1024 -> 42, 1025 -> 42,5, 1229 -> 144,5) ab 1230 px Fenster: 1170 px Raster -> halbe Breite 585 px (1230 -> 30, 1280 -> 55) DIE 720er STUFE HAT BIS ZUM 31.08.2026 GEFEHLT, UND ZWAR MIT BEGRUENDUNG. Hier stand: "Die Bleed-Bausteine stehen erst ab 1025 px nebeneinander, darunter stapeln sie und tragen ihren eigenen Seitenrand; die 720er Stufe braucht hier deshalb keine Entsprechung." Der erste Halbsatz stimmt, der Schluss daraus nicht: der eigene Seitenrand war fest 20 px, die uebrigen Ueberschriften der Seite wandern in diesem Band aber von 24 auf 135,5 px. Gemessen stand der Text der Bleed-Bausteine deshalb zwischen 768 und 991 px bis zu 110 px weiter aussen als jede andere Ueberschrift, und zwischen 992 und 1024 px noch bis zu 22 px (die Wand traf dort schon, die gestapelten Bausteine standen weiter auf ihren 20). Ein Baustein, der stapelt, laeuft nicht mehr ueber die Rasterkante hinaus. Er steht dann einfach auf ihr, und dafuer muss er sie kennen. Der Grundwert deckt die unterste Stufe mit ab: dort gibt es keine halbe Rasterbreite, und jede Bleed-Formel faellt ueber ihr `max(20px, ...)` auf den 20-px-Rand des Themes zurueck. Der Grundwert muss dafuer nur groesser sein als die halbe Fensterbreite dieser Stufe (bei 767 px also 383,5 px); genommen ist die 470 der 940er Stufe, damit an dieser Stelle keine vierte Zahl steht, die niemand nachmisst. WARUM DAS HIER STEHT. Bis zum 29.08.2026 rechneten die Bleed-Formeln mit einer festen 570, also mit einem 1140er Raster. Diese Zahl gibt es auf der Seite durchaus, aber an der falschen Stelle: `--container-max-width: 1140px` ist die Einstellung des Elementor-Kits, und das Theme ueberschreibt sie mit seiner eigenen Treppe. Die Folge war ein Versatz von 15 px an jeder Bleed-Kante, sichtbar an der Ueberschrift im Halbbild-Banner, die als einzige der Seite eingerueckt stand. Gefunden hat ihn eine Gegenpruefung, und zwar erst, nachdem der Pruefstand aufgehoert hatte, die Rasterkante mit derselben Formel zu rechnen, die er belegen sollte. Wer das Raster im Theme aendert, aendert HIER die Zahlen, misst mit messe_kante.py nach und nirgendwo sonst. */ --gtp-raster-halb: 470px; /* Der Ueberstand, um den ein randloses Bild ueber die Rasterkante hinaus nach aussen laeuft, bevor es auf sehr breiten Schirmen stehen bleibt. Ebenfalls gemessen: die Buehne des Finish-Studios steht bei 1920 px auf x=90, die Inhaltskante auf x=375. */ --gtp-bleed-ueberstand: 285px; } /* Die zwei oberen Stufen der Treppe, an genau den Schwellen des Themes. Weil hier eine Variable umgesetzt wird und keine einzelne Eigenschaft, ziehen ALLE Bleed-Formeln gemeinsam mit, ohne dass eine davon die Schwelle kennen muss. Die Reihenfolge ist die des Themes: reine min-width-Stufen, jede schlaegt die darunter. Eine Bereichsabfrage (min-width UND max-width) waere hier falsch, weil sie an der Schwelle eine Fuge liesse: bei 991,99 px greift ein `max-width: 991.98px` nicht mehr, das `min-width: 992px` des Themes aber auch noch nicht, und in diesem Spalt stuenden die zwei Kanten wieder 110 px auseinander. */ @media (min-width: 768px) { :root { --gtp-raster-halb: 360px; } } @media (min-width: 992px) { :root { --gtp-raster-halb: 470px; } } @media (min-width: 1230px) { :root { --gtp-raster-halb: 585px; } } body { color: var(--brand-text); font-family: var(--brand-font-body); } h1, h2, h3, h4, h5, h6 { font-family: var(--brand-font-heading); color: var(--brand-onyx); } a { color: var(--brand-link); } a:hover, a:focus { color: var(--brand-onyx); } .br-btn, .br-btn:link { display: inline-block; background: var(--brand-onyx); color: var(--brand-ivory); border: 1px solid var(--brand-onyx); padding: .7em 1.6em; border-radius: 2px; font-family: var(--brand-font-body); text-decoration: none; transition: opacity .2s; } .br-btn:hover { opacity: .88; } .br-bg-ivory { background: var(--brand-ivory); } .br-accent { color: var(--brand-accent); } .br-muted { color: var(--brand-muted); } .br-border { border-color: var(--brand-border); } /* gtp-referenzen ================================================================== Kachel und Filter der Referenzen. Gehoert zum Child-Template template-parts/content-project-filter.php und gilt an BEIDEN Stellen, an denen es benutzt wird: dem Elementor-Widget auf der Startseite und dem Archiv /referenzen/. Warum hier CSS und nicht die Widget-Controls: das Widget bietet zwar Farb- und Schriftregler fuer den Filter, aber nur fuer die Startseite. Das Archiv rendert archive-ot_portfolio.php ohne Elementor und hat gar keine Regler. Eine Regel fuer beide ist weniger Duplikat als Regler plus zweite CSS-Regel. Geprueft: im Widget 6d4c960 ist kein Farb- oder Schriftregler gesetzt, es kollidiert also nichts. Kein !important. Das ist moeglich, weil das Child-Template eigene Klassennamen mit Prefix gtp-ref- vergibt: das Parent-CSS zu .projects-box, .projects-thumbnail und .project-details findet nichts mehr vor. ================================================================== */ /* --- Filter ------------------------------------------------------- */ .filter ul li a { color: var(--brand-muted); text-transform: none; font-weight: 500; } .filter ul li a.active, .filter ul li a:hover, .filter ul li a:focus { color: var(--brand-link); } /* Den Unterstrich bringt das Theme als :after schon mit. Hier bekommt er nur die Marke statt currentColor und wird ausserhalb von aktiv/Hover unsichtbar. Das Theme blendet ihn erst ab 768 px aus (style.css:4949), darunter trug deshalb JEDER Knopf einen grauen Strich. */ .filter ul li a:after { opacity: 0; } .filter ul li a.active:after, .filter ul li a:hover:after, .filter ul li a:focus-visible:after { opacity: 1; height: 2px; background: var(--brand-link); } /* Der Rahmen beim Klick war der Browser-Standard: das Theme setzt kein outline, und weil der Filter mit preventDefault() ist, bleibt der Fokus nach dem Klick stehen. Er wird durch den Unterstrich oben ersetzt, den die Tastatur ueber :focus-visible ebenfalls bekommt. */ .filter ul li a:focus { outline: none; } .filter ul li a:focus-visible { outline: none; } @media (max-width: 767px) { /* Eine Zeile, seitlich schiebbar, statt Umbruch mit Einzel-Unterstrichen. */ .isotope-filter ul { display: flex; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .isotope-filter ul::-webkit-scrollbar { display: none; } .isotope-filter ul li { flex: 0 0 auto; } } /* --- Kachel ------------------------------------------------------- */ .gtp-ref-karte { background: #fff; border: 1px solid var(--brand-border); border-radius: 6px; overflow: hidden; height: 100%; } .gtp-ref-bild { display: block; position: relative; aspect-ratio: 3 / 2; overflow: hidden; } .gtp-ref-bild-img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .gtp-ref-karte:hover .gtp-ref-bild-img { transform: scale(1.04); } .gtp-ref-schleier { position: absolute; inset: 0; background: rgba(12, 33, 72, 0); transition: background .4s ease; } .gtp-ref-karte:hover .gtp-ref-schleier { background: rgba(12, 33, 72, .12); } .gtp-ref-text { padding: 14px 16px 16px; } .gtp-ref-label { margin: 0 0 4px; font-size: 12px; letter-spacing: .06em; color: var(--brand-muted); text-transform: none; } .gtp-ref-titel { margin: 0; font-family: var(--brand-font-heading); font-weight: 600; font-size: 18px; /* Feste Hoehe fuer genau zwei Zeilen. Ohne sie ergaben unterschiedlich lange Titel unterschiedlich hohe Karten, und Masonry schob die naechste Kachel in die entstandene Luecke ("Stahlgelaender" rutschte unter "Rohrserie"). */ line-height: 1.3; height: 2.6em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--brand-text); text-transform: none; } /* Letztes Wort und Pfeil bleiben zusammen, sonst steht der Pfeil allein in Zeile 2. */ .gtp-ref-titel-ende { white-space: nowrap; } .gtp-ref-titel a { color: inherit; } .gtp-ref-titel a:hover { color: var(--brand-link); } .gtp-ref-pfeil { display: inline-block; margin-left: 6px; font-size: 14px; vertical-align: baseline; transition: transform .25s ease; } /* Beim Ueberfahren der GANZEN Karte dreht der Pfeil aus der Schraege in die Waagerechte. Das Glyph ot-flaticon-top-right zeigt nach oben rechts, also 45 Grad ueber der Waagerechten; +45 Grad im Uhrzeigersinn stellen ihn flach. Die 4 px Versatz aus dem ersten Durchgang bleiben erhalten, beide Anteile stehen in EINEM transform, weil die zweite Angabe die erste sonst ersetzt. */ .gtp-ref-karte:hover .gtp-ref-pfeil { transform: translateX(4px) rotate(45deg); } .gtp-ref-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; /* Auch mit nur einem Chip so hoch wie mit dreien, damit die Karten gleich hoch bleiben. 28 px ist die Hoehe eines Chips (12 px Text, 1.5 Zeilenhoehe, 2x3 px Innenabstand, 2x1 px Rahmen). */ min-height: 28px; } .gtp-ref-chip { background: var(--brand-ivory); border: 1px solid var(--brand-border); border-radius: 3px; padding: 3px 8px; font-size: 12px; line-height: 1.5; color: var(--brand-muted); } /* --- Aufruf unter dem Raster (nur Startseite) --------------------- */ .gtp-ref-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 40px; } /* Primaerknopf: uebernimmt Aussehen und Verhalten des Hero-Knopfes "Angebot anfordern" ueber DESSEN Variablen, nicht ueber abgeschriebene Zahlen. Aendert das Theme sein Primaerblau, wandert dieser Knopf mit. Der Akzent steht hier bewusst nicht mehr: die Site fuehrt genau eine Knopffarbe. */ .gtp-ref-cta-btn, .gtp-ref-cta-btn:link, .gtp-ref-cta-btn:visited { display: inline-block; background: var(--makaffo-color-primary, #004FEF); color: var(--makaffo-color-white, #fff); border: 1px solid transparent; /* wie der Hero-Knopf, damit die Aussenmaße gleich sind */ border-radius: 27px; padding: 13px 40px 9px; font-weight: 600; font-size: 14px; line-height: 32px; /* ergibt dieselbe Knopfhoehe wie der Hero-Knopf, 54 px */ text-decoration: none; transition: all .2s ease-in-out; } .gtp-ref-cta-btn:hover, .gtp-ref-cta-btn:focus { background: var(--makaffo-color-dark, #242424); color: var(--makaffo-color-white, #fff); } .gtp-ref-cta-link { color: var(--brand-link); font-weight: 500; text-decoration: none; border-bottom: 2px solid transparent; } .gtp-ref-cta-link:hover, .gtp-ref-cta-link:focus-visible { border-bottom-color: var(--brand-link); } /* --- Logo im Kopf ------------------------------------------------------- */ /* Der schwarze Rahmen beim Ueberfahren war der Fokusring des Browsers: nach einem Mausklick auf das Logo bleibt der Fokus dort stehen, und `outline-style` springt auf `auto`. Dass er schwarz wirkte, liegt an dieser Datei: die Regel `a:hover, a:focus { color: var(--brand-onyx) }` faerbt ueber currentColor auch den Ring, und #0C2148 ist ein sehr dunkles Blau. Weder das Theme noch diese Datei setzen `outline` selbst. Maus bekommt keinen Ring mehr, die Tastatur einen sichtbaren. */ .the-logo a:focus { outline: none; } .the-logo a:focus-visible { outline: 2px solid var(--brand-link); outline-offset: 2px; } /* --- Einzelseite einer Referenz ---------------------------------------- */ /* Der Infokasten kommt jetzt aus [gtp_ref_info] statt aus fest eingetippten Widgets. Flaeche, Innenabstand und Radius liefert weiter der Elementor- Container, hier stehen nur Raster und Schrift der Paare, gemessen am vorherigen Zustand: Label Epilogue 12/700 in Grossbuchstaben, Wert 14 px in der Themefarbe. */ .gtp-ref-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 30px; margin: 0; } .gtp-ref-info-paar { margin: 0; } .gtp-ref-info-label { display: block; margin: 0 0 4px; font-family: 'Epilogue', var(--brand-font-body); font-size: 12px; font-weight: 700; letter-spacing: .2px; text-transform: uppercase; color: #242424; } .gtp-ref-info-wert { display: block; margin: 0; font-size: 14px; color: var(--brand-link); } @media (max-width: 767px) { .gtp-ref-info { grid-template-columns: minmax(0, 1fr); gap: 16px; } } /* Bild der Einzelseite: fuellt die Spalte, Seitenverhaeltnis aus der Datei. */ .gtp-ref-seitenbild { margin: 0; } .gtp-ref-seitenbild-img { display: block; width: 100%; height: auto; } /* B6: Abstaende ueber den anderen Referenzen. Das Theme setzt 110 px, was ohne die entfallene Teilen-Leiste zu viel Luft laesst. */ .project-related-posts-wrap { padding-top: 48px; } @media (max-width: 767px) { .project-related-posts-wrap { padding-top: 32px; } } /* In der Vor-Zurueck-Leiste steht nach dem Entfernen der Teilen-Leiste nur noch die Blaetterung, deshalb weniger Abstand nach unten. */ .post-nav { padding-bottom: 24px; } /* --- Logo im angehefteten Kopf, schmale Fenster ------------------------- */ /* GEDREHT am 31.08.2026, weil sich die Voraussetzung geaendert hat. Die alte Fassung tauschte auf das HELLE Logo, und das war richtig, solange der angeheftete Mobil-Kopf dunkel war (gemessen rgb(27,44,64), spaeter rgb(38,47,66) aus einer zweiten Regel im Zusatz-CSS). Seit dem Auftrag "Header sticky" ist der angeheftete Kopf **site-weit weiss**; die beiden dunklen Regeln sind aus dem Zusatz-CSS 1396 entfernt. Auf Weiss ist das helle Logo unsichtbar, also gilt jetzt das Umgekehrte. Und ohne `body:not(.home)`. Der Ausschluss stand da, weil die Startseite den transparenten Kopf ueber dem dunklen Hero fuehrt; angeheftet ist der Kopf aber auch dort weiss, und Snippet 1871 schaltet auf der Startseite wegen `header-overlay` NICHT auf das dunkle Logo um. Ohne diese Regel staende auf der Startseite ein weisses Logo auf weissem Grund, also genau FALLE 69 an einer neuen Stelle. Gemessen vorher: hell sichtbar, Grund rgb(255,255,255). */ @media (max-width: 1023px) { /* Die ID im Selektor ist noetig, nicht Zierde: es gibt bereits eine Umschaltung `#site-header:not(.header-overlay) .header-mobile .gtp-logo-dunkel { display: block }` (Spezifitaet 1,3,0). Eine ID schlaegt jede Zahl von Klassen, ein Satz aus reinen Klassen verliert dagegen immer. Mit ID und vier Klassen steht diese Regel bei 1,4,0 und gewinnt, ohne dass ein !important noetig waere. */ #site-header .header-mobile .sticky-header.is-stuck .gtp-logo-hell { display: none; } #site-header .header-mobile .sticky-header.is-stuck .gtp-logo-dunkel { display: block; } } /* --- Kopf der Referenz-Einzelseiten ------------------------------------- */ /* Der Titel steht weiss direkt auf dem Kopfbild, das Theme legt nichts dazwischen (.page-header hat nur `background: #000000 ...` als Traeger HINTER dem Bild). Gemessen war das schon mit dem alten Demobild kaputt: 2,57:1 und 28,9 Prozent der Titelflaeche unter 4,5:1. Mit dem Scrim sind es 6,18:1 und 0 Prozent. Bewusst nur auf den Referenz-Einzelseiten, also genau dort, wo das Bild getauscht wurde. Die uebrigen Kopfbilder (Kontakt, Ueber uns, Leistungen) bleiben unberuehrt. */ /* 28.08.2026 verallgemeinert: der Scrim haengt nicht mehr am Post-Typ, sondern am Kopfbereich selbst. Grund: die Vorlage fuer Unterseiten braucht denselben Kopf, und jede kuenftige Seite mit Kopfbild haette sonst wieder weissen Text auf hellem Foto. Die deutschen Seiten rendern gar keinen Kopfbereich, dort aendert die Regel nichts. */ .page-header { position: relative; } .page-header::before { content: ""; position: absolute; inset: 0; background-color: var(--brand-onyx); opacity: .7; pointer-events: none; } .page-header > .dcell { position: relative; z-index: 1; } /* --- Werkstoff-Sektion, Bildformat ------------------------------------- */ /* Die drei Fotos sind 2752x1536, also 16:9,08. Das Elementor-Bild-Widget kennt kein Seitenverhaeltnis, deshalb hier: feste 16:9-Buehne, Bild fuellt sie beschnitten. Damit bleiben die drei Kacheln gleich hoch, auch wenn spaeter ein Bild mit anderem Verhaeltnis nachgereicht wird. */ .elementor-element-b134d36 .elementor-widget-image img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; height: auto; display: block; } /* --- Seitentitel im Kopfbereich, Worttrennung ---------------------------- */ /* Der Parent setzt word-break: break-word auf dem BODY (style.css:149), nicht auf dem Titel. Geerbt trifft es jede Ueberschrift, faellt aber erst auf, wenn ein einzelnes Wort breiter ist als seine Zeile: "Pulverbeschichtung" misst bei 36 px 444 px, die Spalte bei 390 px Fenster nur 345 px. Der Titel brach deshalb nach "PULVERBESCHICH" um, ohne Trennstrich, weil hyphens auf manual steht. Warum die Schriftgroesse und nicht nur hyphens: auto. Nachgemessen: mit word-break: normal und hyphens: auto trennt der Pruefbrowser NICHT, und dann wird es schlimmer statt besser. Der Kopfbereich ist eine Tabellenzelle (.page-header.dtable > .dcell), und eine Tabellenzelle waechst auf die Mindestbreite ihres Inhalts: der Kasten ging auf 474 px auf, waehrend das Fenster 375 px breit ist, und weil der Parent auf dem body overflow: hidden setzt, war das Wort rechts einfach abgeschnitten statt umgebrochen. Trennmuster sind in Chromium eine nachladbare Komponente und in einem Pruefbrowser oft gar nicht vorhanden. Eine Zusage, die an einer solchen Komponente haengt, ist nicht pruefbar, also darf sie die Sache nicht tragen. Tragend ist deshalb die Schriftgroesse: 7vw ergeben bei 375 px Fenster 26 px und damit 324 px Wortbreite in einer 345 px breiten Spalte. Die Untergrenze 22 px haelt den Titel auch bei 320 px lesbar, die Obergrenze 36 px ist der bisherige Wert, den jedes Fenster ab etwa 515 px wieder erreicht. hyphens bleibt als Zugabe fuer Browser, die Trennmuster mitbringen, und overflow-wrap als letzte Reissleine: ein Umbruch ist immer besser als ein abgeschnittenes Wort. Gilt fuer jede Seite mit Kopfbereich, nicht nur fuer diese. */ .page-header .page-title { word-break: normal; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; } @media (max-width: 767px) { .page-header .page-title { font-size: clamp(22px, 7vw, 36px); } } /* gtp-unterseiten ================================================================== Bausteine der Leistungs-Unterseiten. Angelegt fuer /pulverbeschichtung/, die als Blaupause fuer die uebrigen Unterseiten dient: jede Regel hier ist deshalb ueber eine Klasse angesprochen und nicht ueber eine Seiten-Id. Was ueber Elementor-Regler geht (Flaechen, Rahmen, Radien, Abstaende, Schriftgroessen, Farben, Bewegungseffekte), steht in den Widget-Einstellungen und bewusst NICHT hier. Hier steht nur, was kein Regler kann. Die beiden Signatur-Bausteine (Vorher/Nachher-Schieber, RAL-Farbband) bringen ihr eigenes CSS mit und stehen in p57/widgets/, nicht in dieser Datei. ================================================================== */ /* --- 1. Vollbreite: die Theme-Kaesten geben die Breite frei ------------- */ /* Elementors "Full Width" ist nur die Breite des ELTERN-Kastens, und der ist hier das Theme-Raster: gemessen 1170 px, beginnend bei x=48 im 1265 px breiten Fenster. Eine Sektion mit content_width=full reicht damit nie an den Fensterrand, ganz gleich, was in Elementor eingestellt ist. Der uebliche Griff dafuer waere width:100vw plus negative Raender. Der ist hier falsch: 100vw zaehlt die Rollleiste mit (gemessen 1280 gegen 1265 nutzbare Breite), die Sektion waere 15 px zu breit, und weil das Theme auf dem body overflow:hidden setzt, saehe man den Fehler nicht, er stuende nur im waagerechten Ueberlauf. Stattdessen werden die drei Theme-Kaesten selbst freigegeben. Das ist exakt und braucht keine Rechnung. :has() statt einer Seiten-Id, damit jede kuenftige Unterseite dieselbe Behandlung bekommt, sobald sie eine Sektion mit .gtp-vollbreit traegt. Faellt :has() aus (sehr alter Browser), bleibt die Seite im Theme-Raster: ohne Vollbreite, aber unbeschaedigt. */ #content .container:has(.gtp-vollbreit) { width: 100%; max-width: none; padding-left: 0; padding-right: 0; } #content .row:has(.gtp-vollbreit) { margin-left: 0; margin-right: 0; } #content #primary:has(.gtp-vollbreit) { padding-left: 0; padding-right: 0; } /* --- 2. Halbes Bild: Text im Raster, Bild bis zur Fensterkante ---------- */ /* Der dunkle Banner ist zweigeteilt: links Text, der auf der Rasterkante der uebrigen Seite steht, rechts ein Bild, das bis an den Fensterrand laeuft. Der Innenabstand links rechnet die Rasterkante selbst aus, aus der einen gemessenen Konstanten oben: `calc(50% - var(--gtp-raster-halb))` ergibt bei 1280 px Fensterbreite 55 px, und genau dort beginnt jede Ueberschrift der Seite. Prozente im padding beziehen sich auf die Breite des ELTERN-Kastens, und der ist dank Block 1 das Fenster. Deshalb ohne vw und damit ohne den Rollleisten-Fehler. max() faengt schmale Fenster ab. Bis zum 29.08.2026 stand hier die feste Zahl 570, also ein 1140er Raster. Der Kommentar behauptete dazu, das treffe den Rand des Rasters; gemessen stand die Ueberschrift dieses Banners damit 15 px weiter innen als jede andere Ueberschrift der Seite. */ /* .e-con davor ist noetig, nicht Zierde: Elementor setzt den Innenabstand als Kurzform padding: var(--padding-*) auf .e-con (Spezifitaet 0,1,0). Eine Langform padding-left aus einer Regel mit 0,2,0 schlaegt den linken Anteil dieser Kurzform, ohne dass die uebrigen drei Seiten verloren gehen. */ .e-con.gtp-halbbild { padding-left: max(20px, calc(50% - var(--gtp-raster-halb))); padding-right: 0; } .gtp-halbbild .gtp-halbbild__bild img { display: block; width: 100%; height: 100%; min-height: 380px; object-fit: cover; } .gtp-halbbild .gtp-halbbild__bild, .gtp-halbbild .gtp-halbbild__bild .elementor-widget-container { height: 100%; } @media (max-width: 1024px) { /* Untereinander: der Text bekommt wieder seitlichen Rand, das Bild sein eigenes Verhaeltnis. Ein randloses Vollhoehenbild waere hier sinnlos. DER RAND IST DIESELBE RECHNUNG WIE OBEN UND KEINE FESTE 20. Bis zum 31.08.2026 stand hier `20px`. Das traf die Rasterkante nur unter 768 px; darueber wandert sie mit der Treppe des Themes, und die Ueberschrift dieses Banners stand dann bis zu 115,5 px weiter aussen als die daneben. Die Zahl bleibt als Boden im max() stehen, wo sie hingehoert: sie ist der Rand des Themes auf der untersten Stufe. */ .e-con.gtp-halbbild { padding-left: max(20px, calc(50% - var(--gtp-raster-halb))); padding-right: max(20px, calc(50% - var(--gtp-raster-halb))); } .gtp-halbbild .gtp-halbbild__bild img { height: auto; min-height: 0; aspect-ratio: 4 / 3; border-radius: 10px; } } /* --- 3. Ablauf-Kacheln: dieselbe Geste wie die Kennzahl-Kacheln --------- */ /* Werte 1:1 aus dem WPCode-Schnipsel "CSS counter" (.gtp-stat:hover), damit sich auf der ganzen Website jede Karte beim Ueberfahren gleich verhaelt. */ .gtp-schritt { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .gtp-schritt:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(2, 54, 112, .12); border-color: #c9d6ea; } /* --- 4. Bewegung nur, wenn sie gewuenscht ist --------------------------- */ /* Elementors Eingangs-Animationen setzen elementor-invisible und machen das Element erst per Skript sichtbar. Wer Bewegung abbestellt hat, saehe damit eine leere Seite. Deshalb: Animation aus UND Sichtbarkeit sofort. */ @media (prefers-reduced-motion: reduce) { .elementor-invisible, .elementor .animated { visibility: visible !important; opacity: 1 !important; animation: none !important; transform: none !important; } .gtp-schritt { transition: none; } } /* --- 5. Referenz-Teaser: Raster fuer drei Kacheln ---------------------- */ /* Die Kachel selbst kommt unveraendert aus .gtp-ref-karte weiter oben. Hier steht nur das Raster, weil das Parent-Raster (.projects-masonry .project-item) an Isotope haengt: dort setzt JavaScript jede Kachel absolut, und ohne die Widget-Initialisierung bekaemen die Kacheln gar keine Breite. `align-items: stretch` ist der Grund, warum die drei Karten gleich hoch sind: .gtp-ref-karte traegt bereits `height: 100%`. */ .gtp-ref-teaser { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; align-items: stretch; } .gtp-ref-teaser .project-item { float: none; width: auto; padding: 0; margin: 0; display: flex; } @media (max-width: 1024px) { .gtp-ref-teaser { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } } @media (max-width: 767px) { .gtp-ref-teaser { grid-template-columns: minmax(0, 1fr); gap: 20px; } } /* --- 6. Haken-Listen: Zeichen und Text auf einer Grundlinie ------------- */ /* Betrifft die beiden Vergleichskarten und den dunklen Banner. Das Theme setzt Zeichen und Text nebeneinander, laesst aber keinen Abstand dazwischen: im Banner klebte der Haken am Wort ("gemessen: 0 px"). Und weil das Zeichen ein Inline-SVG ohne Masse ist (siehe Block 1), braucht es auch hier eine feste Groesse, sonst waechst es mit der Zeilenhoehe eines zweizeiligen Punktes mit. Die 3 px Versatz nach unten setzen das Zeichen auf die Grundlinie der ersten Textzeile statt an die Oberkante des Kastens. */ .gtp-liste .ot-icon-list-item { display: flex; align-items: flex-start; gap: 12px; } .gtp-liste .ot-icon-list-icon { flex: 0 0 auto; margin: 3px 0 0; width: 14px; height: 14px; } .gtp-liste .ot-icon-list-icon svg, .gtp-liste .ot-icon-list-icon i { display: block; width: 14px; height: 14px; font-size: 14px; fill: currentColor; } .gtp-liste .ot-icon-list-text { display: block; } /* --- 7. Versale Schlagzeilen: mitwachsend statt fest ------------------- */ /* Die Schlagzeilen sind versal und deshalb breiter als in Gemischtschreibung. "PULVERBESCHICHTUNG" misst als einzelnes Wort 12,35 px je Schriftgrad-Pixel (nachgemessen: 321 px bei 26 px). Die Spalte ist Fensterbreite minus 40 px Innenabstand. Daraus folgt die Obergrenze fuer den Grad: bei 390 px Fenster 27,1 px, bei 320 px Fenster nur 21,5 px. Ein fester Wert kann beides nicht: 26 px passt bei 390 und bricht bei 320 mitten im Wort. 6,5vw ergibt 25,4 px bzw. 20,8 px und bleibt in beiden Faellen unter der Grenze. Elementor kennt keinen clamp-Regler, deshalb hier. Die Klasse gtp-versal traegt jede Schlagzeile dieser Seite; damit gilt die Regel auch fuer jede kuenftige Unterseite, ohne dass eine Seiten-Id im Selektor steht. Der Selektor muss die ELEMENTOR-Regel schlagen, die bei 0,4,0 liegt, deshalb .elementor davor plus die eigene Klasse. */ @media (max-width: 767px) { .elementor .gtp-versal.elementor-widget .ot-heading__title { font-size: clamp(20px, 6.5vw, 42px); line-height: 1.18; } } /* --- 8. Knoepfe brechen auf sehr schmalen Fenstern um ------------------ */ /* Das Theme gibt seinen Knoepfen white-space: nowrap und 40 px Innenabstand je Seite. Bei 320 px Fenster ragte "Mehr zur Vorbehandlung" dadurch 34 px ueber die rechte Kante (nachgemessen); die uebrigen vier Knoepfe der Seite passten. Statt den Text zu kuerzen darf der Knopf hier umbrechen und traegt weniger Innenabstand. Erst unter 480 px, darueber bleibt alles wie gehabt. */ @media (max-width: 480px) { .gtp-knopf .octf-btn { max-width: 100%; white-space: normal; text-align: center; padding-left: 24px; padding-right: 24px; } } /* --- 9. Abschluss-Sektion sitzt buendig auf dem Fussbereich ------------- */ /* Das Theme gibt dem Inhaltsbereich unten 120 px Luft (style.css:2174, `.entry-content { padding: 100px 0 120px }`). Bei einer Seite, deren letzte Sektion ein vollflaechiger Banner ist, steht dieser Streifen dadurch auf einem 120 px hohen weissen Sockel ueber dem dunklen Fussbereich, und der Banner wirkt wie hineingelegt statt wie der Abschluss der Seite. Derselbe :has()-Weg wie in Block 1: die Regel haengt an einer Klasse auf der Sektion, nicht an einer Seiten-Id, und gilt damit fuer jede kuenftige Unterseite, die mit einem Vollbreiten-Banner endet. Nur der untere Abstand faellt, der obere bleibt, weil dort der Kopfbereich anschliesst. Spezifitaet 1,2,0 gegen 0,1,0 der Theme-Regel, deshalb ohne !important. */ #content .entry-content:has(.gtp-abschluss) { padding-bottom: 0; } /* --- 10. Ablauf-Kacheln: Zeichen, Nummer als Wasserzeichen, Verbindung -- */ /* Ergaenzt Block 3 (Hover-Geste). Was ueber Elementor-Regler geht, steht weiterhin in den Widget-Einstellungen: Schriftgrad und Farbe der Nummer, das Zeichen selbst. Hier steht nur, was kein Regler kann. */ /* Der Kreis. 50x50 fest, damit er neben Titel und Text nicht mitwaechst und nicht zusammenfaellt: Elementors Zeichen-Regler setzt nur font-size, und die greift bei einem Inline-SVG nicht (dieselbe Falle wie in Block 6). */ /* Der Kreis steht LINKS, auf der Kante des Kachelinhalts. Elementor stellt ihn von Haus aus mittig und schreibt dafuer `.elementor-1629 .elementor-element.elementor-element-XXX .elementor-icon-wrapper { text-align: center }` in die Seiten-CSS, also mit Spezifitaet 0,4,0 und mit der Seiten-Id im Selektor. Ein Steuerelement dafuer gibt es in dieser Fassung nicht (nachgesehen: kein Control des icon-Widgets traegt diesen Selektor). Statt die Zahl zu ueberbieten (und dabei die Seiten-Id in eine Blaupausen-Regel zu holen) wird der Kasten zum Flex-Container: auf ein Flex-Kind wirkt text-align nicht mehr, die fremde Regel laeuft ins Leere statt verloren zu gehen. Deshalb reichen hier 0,3,0. */ .gtp-schritt .gtp-schritt__ikon .elementor-icon-wrapper { display: flex; justify-content: flex-start; } .gtp-schritt .gtp-schritt__ikon .elementor-icon { display: inline-grid; place-items: center; width: 50px; height: 50px; flex: 0 0 auto; padding: 0; border-radius: 50%; background: rgba(0, 79, 239, .10); transition: background-color .25s ease; } /* svg mit Klasse, damit der Selektor die eingebettete Theme-Regel schlaegt (0,3,1 gegen 0,2,1), sonst fuellt das Zeichen seinen Kasten aus. */ .gtp-schritt .gtp-schritt__ikon svg.e-font-icon-svg { width: 22px; height: 22px; fill: #004FEF; transition: fill .25s ease; } .gtp-schritt:hover .gtp-schritt__ikon .elementor-icon { background: #004FEF; } .gtp-schritt:hover .gtp-schritt__ikon svg.e-font-icon-svg { fill: #FFFFFF; } /* Die Nummer bleibt, tritt aber hinter den Inhalt: sie ordnet die Kacheln, ohne die Aufmerksamkeit vom Zeichen wegzuziehen. z-index -1 wirkt nur, weil die Kachel mit isolation einen eigenen Stapel aufmacht; ohne den lege die Nummer sich hinter die eigene weisse Flaeche der Kachel und waere weg. */ .gtp-schritt { isolation: isolate; } .gtp-schritt .gtp-schritt__nr { position: absolute; top: 12px; right: 18px; z-index: -1; pointer-events: none; } .gtp-schritt .gtp-schritt__nr p { margin: 0; } /* Die Verbindungslinie liegt IM Abstand zwischen zwei Kacheln (24 px, aus der Reihe) und auf der Mitte des Kreises (30 px Innenabstand oben + 25 px halber Kreis). Nur ab 1025 px: darunter stehen die Kacheln zwei-zweiig oder untereinander, eine waagerechte Linie waere dort falsch. left: 100% zielt auf die Kante des POLSTERkastens, die Kante des Rahmens liegt 1 px weiter aussen, deshalb die +1. */ @media (min-width: 1025px) { .gtp-schritt:not(:last-child)::before { content: ""; position: absolute; /* Zwei Stellschrauben mit den Werten der Blaupause als Standard: eine Reihe ohne eigene Angabe rechnet weiter mit 55 px und 24 px, also genau wie bisher. Gesetzt werden sie nur dort, wo die Reihe enger steht (Block 13). Die Hoehe ist das Polster oben (30 px) plus der halbe Kreis (25 px); wer das Polster aendert, muss diese Zahl mitfuehren, sonst rutscht die Linie von der Kreismitte. Das Gate misst genau das nach. */ top: var(--gtp-schritt-linie-y, 55px); left: calc(100% + 1px); width: var(--gtp-schritt-luecke, 24px); height: 1px; /* border: 0 ist nicht Zierde. Elementor gibt dem ::before der Sektion den Rahmen der Kachel mit (gemessen: border-width 1px, box-sizing border-box), und damit kann eine Hoehe von 1 px gar nicht entstehen: allein die beiden Rahmenkanten sind schon 2 px. Die Linie waere doppelt so dick wie beabsichtigt und ihre Farbe kaeme aus dem Rahmen statt von hier. */ border: 0; background: #E3E7ED; pointer-events: none; transition: transform .25s ease; } /* Die Kachel hebt sich beim Ueberfahren um 4 px, und ein Pseudo-Element faehrt mit. Die Gegenbewegung haelt die Linie da, wo sie hingehoert: sie gehoert dem Abstand, nicht der Kachel. */ .gtp-schritt:hover::before { transform: translateY(4px); } } /* Der gestapelte Zustand, also alles unter der Ein-Reihen-Breite. Elementor gibt der Kachel dort ueber `--width` die halbe Reihe (50 % zwischen 768 und 1024 px) und stellt sie an den Zeilenanfang: gemessen bei 844 px eine Kachel von 360 px, links 0 px Luft, rechts 360 px. Das liest sich als abgeschnittene Reihe und nicht als Stapel. EINE Regel fuer beide Seiten, kein Seiten-Sonderweg. Gesetzt wird `width` und nicht `--width`: die Variable kommt aus der Seiten-CSS (`.elementor-1629 .elementor-element.elementor-element-a2106e1`, Spezifitaet 0,3,0) und waere von hier nicht zu erreichen, ohne die Seiten-Id in eine Blaupausen-Regel zu holen. `width` dagegen setzt Elementor auf `.e-con` (0,1,0); `.e-con.gtp-schritt` schlaegt das mit 0,2,0 und ist damit von der Ladereihenfolge der Blaetter unabhaengig. min(100%, 560px) trifft beide Stapel-Regime mit derselben Zahl: zwischen 768 und 1024 px deckelt es die halbe Reihe auf ein lesbares Mass, unter 768 px (wo die Kachel schon 100 % traegt) greift es erst, wenn die Reihe breiter als 560 px ist. Ohne den Deckel spraenge die Kachel an der 767er Grenze von 560 px auf 727 px, also genau dort breiter, wo das Fenster schmaler wird. margin-inline: auto verteilt den Rest auf beide Seiten. Das wirkt in beiden Regimen: unter 768 px steht die Kachel in einer Spalte (auto-Raender auf der Querachse), zwischen 768 und 1024 px allein in ihrer Zeile (auto-Raender auf der Hauptachse). In beiden Faellen schlagen auto-Raender das align-items des Elternkastens, deshalb braucht es dort nichts. WAS DAS FUER DIE ARBEIT IM EDITOR HEISST: unterhalb von 1025 px sind Elementors Regler "Breite" und "Aussenabstand" fuer diese Kachel ohne Wirkung. Sie schreiben `--width` und `margin` in die Seiten-CSS, und beides wird hier ueberschrieben. Wer die Stapel-Breite aendern will, aendert die 560 an dieser Stelle, und zwar fuer beide Seiten zugleich. Im Ein-Reihen-Zustand ab 1025 px greifen die Regler unveraendert. */ @media (max-width: 1024px) { .e-con.gtp-schritt { width: min(100%, 560px); margin-inline: auto; } } @media (prefers-reduced-motion: reduce) { .gtp-schritt .gtp-schritt__ikon .elementor-icon, .gtp-schritt .gtp-schritt__ikon svg.e-font-icon-svg, .gtp-schritt::before { transition: none; } } /* --- 11. Vorlader bleibt bei abbestellter Bewegung liegen -------------- */ /* SITE-WEIT, nicht Sache einer einzelnen Seite. Gefunden beim Nachmessen des Massstab-Bausteins unter prefers-reduced-motion. Die Kette: Elementors frontend.css setzt in seinem eigenen `@media (prefers-reduced-motion: reduce)` die Regel `html * { transition-duration: 0s !important; transition-delay: 0s !important }`. Der Vorlader des Themes entfernt sich aber erst im transitionend-Rueckruf (`royal_preloader.min.js:34`, `_loadFinish`): er haengt `complete` an, das startet das Ausblenden, und ERST dessen Ende raeumt das Element weg. Mit Dauer 0 feuert transitionend nicht, der Rueckruf laeuft nie. Was liegen bleibt, ist nicht harmlos: nachgemessen 1265x900 px, position: fixed, z-index 2147483647, pointer-events: auto, opacity 0. Also unsichtbar und trotzdem ueber allem. `document.elementFromPoint` in der Bildmitte lieferte den Vorlader statt des Inhalts, auf 1629 wie auf der Startseite. Wer Bewegung abbestellt hat, konnte auf dieser Website nichts anklicken. Der Griff setzt am Endzustand an (`.complete` haengt der Vorlader selbst an, wenn er fertig ist), nicht am Vorlader ueberhaupt: waehrend des Ladens soll er weiter zu sehen sein. !important ist noetig, weil die Sichtbarkeit aus dem Theme-Stylesheet kommt. */ @media (prefers-reduced-motion: reduce) { #royal_preloader.complete { display: none !important; } } /* gtf-felgen ================================================================== Bausteine der Leistungsseite /felgenbeschichtung/. Sie erbt die Designsprache von /pulverbeschichtung/ (Blaupause), deshalb steht hier nur, was auf der Blaupause noch nicht vorkam: die Iconboxen auf farbigem Grund, die senkrechte Prozesslinie und die Zwei-Kachel-Lage des Referenz-Teasers. Wie oben gilt: was ueber Elementor-Regler geht (Flaechen, Farben, Abstaende, Schriftgroessen), steht in den Widget-Einstellungen und bewusst NICHT hier. Die beiden Signatur-Bausteine (Finish-Studio, Schichtaufbau) bringen ihr eigenes CSS mit und stehen in p57/widgets/, nicht in dieser Datei. Jede Regel haengt an einer Klasse, keine an der Seiten-Id: sie gilt damit fuer jede weitere Unterseite, die dieselben Bausteine benutzt. ================================================================== */ /* --- 12. Iconboxen auf farbigem Grund ---------------------------------- */ /* Dieselbe Geste wie der Zeichenkreis der Ablauf-Kacheln (Block 10), nur auf Blau statt auf Weiss: heller Kreis mit weissem Zeichen statt blauem Kreis mit blauem Zeichen. Warum ueberhaupt eine Regel, wo das Widget doch Regler fuer Kreisfarbe und Zeichengroesse hat: der Kreis kommt beim Theme aus `padding` um ein Zeichen herum (`.ot-view-stacked-1 .ot-icon-box__icon { padding: 17px }`). Damit haengt seine Groesse an der Zeichengroesse und ist nie exakt 50x50; und weil der Kasten `inline-flex` ist, schrumpft er neben einem zweizeiligen Titel mit. Beides ist im Gate eine Zahl (Icon-Container 1:1, hoechstens 2 px), und beides kann kein Regler. */ .gtf-usp .ot-icon-box__icon { flex: 0 0 50px; width: 50px; height: 50px; padding: 0; display: grid; place-items: center; margin-bottom: 0; } /* svg MIT Klasse, damit der Selektor die Theme-Regel `.ot-icon-box__icon svg` schlaegt (0,3,1 gegen 0,2,1), sonst fuellt das Zeichen seinen Kasten. */ .gtf-usp .ot-icon-box__icon svg.e-font-icon-svg { width: 22px; height: 22px; fill: currentColor; } /* Der Titel steht in Satzschreibung. Das Theme setzt ihn versal (`.ot-icon-box .icon-box-title { text-transform: uppercase }`), und ein Regler dafuer gibt es in dieser Fassung nicht. Versal waeren die vier Punkte vier Rufe nebeneinander; versal bleibt auf dieser Seite der Schlagzeile und den Labeln vorbehalten. */ .gtf-usp .icon-box-title { text-transform: none; word-break: normal; } /* Der Kasten steht oben buendig mit dem Kreis, nicht in der Mitte: bei zwei verschieden langen Titeln nebeneinander saehe eine Mittenausrichtung wie zwei verschiedene Grundlinien aus. */ .gtf-usp .ot-icon-box.box-content { align-items: flex-start; } /* Der Kasten fuellt seine Rasterzelle. Ohne das sind zwei Punkte einer Reihe verschieden hoch, sobald der eine Titel eine Zeile mehr braucht, und die Zusage "Boxhoehen je Reihe identisch" waere gerissen. Der Inhalt bleibt oben, die Hoehe kommt vom Raster. */ .gtf-usp, .gtf-usp .ot-icon-box { height: 100%; } /* --- 13. Ablauf-Kacheln zu fuenft: dieselbe Kachel, engere Spur --------- */ /* Bis v1.1 stand hier die senkrechte Prozesslinie: fuenf Schritte untereinander, eigener Punkt, eigene Linie, eigene Klassen (.gtf-ablauf/.gtf-schritt). Sie ist ersatzlos entfallen, weil die Seite jetzt denselben Kachel-Baustein traegt wie die Blaupause (Block 3 fuer die Geste, Block 10 fuer Kreis, Wasserzeichen und Verbindung). Ein zweiter Ablauf-Stil neben dem der Blaupause waere genau der Kartenstil, den der Ableger nicht haben soll. Was bleibt, ist der Grund, aus dem es die Variante ueberhaupt gab: fuenf Kacheln in einer Reihe sind schmaler als vier. Bei 1140 px Rasterbreite sind es mit 18 px Spalte 213,6 px je Kachel statt 267 px. Deshalb genau zwei Aenderungen an der Blaupause, beide hier und beide als Zahl nachmessbar: 1. Die Spalte faellt von 24 px auf 18 px (die Verbindungslinie liegt IM Abstand und muss deshalb mitfallen, sonst stuende sie 6 px in der naechsten Kachel). 2. Das Polster faellt von 30/28 auf 26/22. Damit liegt die Kreismitte bei 26 + 25 = 51 px statt bei 55 px, und die Linie geht mit. Alles andere (Flaeche, Rahmen, Radius, Kreis 50x50, Zeichen 22x22, Grad und Farbe von Nummer, Titel und Fliesstext, Hover-Geste) kommt unveraendert aus Block 3 und Block 10. Das Gate vergleicht es Wert fuer Wert gegen 1629. */ .gtf-ablauf5 { --gtp-schritt-luecke: 18px; --gtp-schritt-linie-y: 51px; } /* --- 14. Referenz-Teaser mit ZWEI Kacheln ------------------------------ */ /* Block 5 setzt drei Spalten. Wo nur zwei Referenzen einer Kategorie vorliegen, stuende rechts eine leere Rasterzelle. Die Regel greift ueber `:has()` genau dann, wenn die zweite Kachel zugleich die letzte ist, und laesst den Dreier-Fall der Blaupause unberuehrt. */ @media (min-width: 1025px) { .gtp-ref-teaser:has(.project-item:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* --- 15. Vergleichskarten: die Akzentkante ----------------------------- */ /* Die zwei Karten des Einwand-Abschnitts auf 1630 sind Wert fuer Wert die Karten aus 1629 (Nasslack/Pulver): Flaeche #FFFFFF, Rahmen 1 px #E3E7ED, Radius 14, Polster 32/30 und mobil 24/22, Titel 21/700/28, Liste 16/400/26. Der EINE Unterschied ist die Kante oben, und sie steht deshalb hier und nicht als Rahmenbreite in den Widget-Einstellungen: eine dickere obere Rahmenkante wuerde `border-width` und `border-color` der Karte veraendern, also genau zwei der neunzehn Stilwerte, gegen die das Gate byte-gleich prueft. Ein innerer Schatten laesst alle neunzehn stehen und zeichnet die Kante zugleich sauber in den Radius hinein: innere Schatten werden am Polsterkasten beschnitten, die Kante folgt also der runden Ecke, statt sie zu ueberfahren. Bewegung: `.e-con` fuehrt `box-shadow` bereits in seiner Uebergangsliste (gemessen: `background, border, box-shadow, transform` mit `0.3s, 0.3s, 0.3s, 0.4s`). Weil hier keine Hover-Regel steht, bleibt der Schatten fest, und die Karten verhalten sich beim Ueberfahren wie die auf 1629, also gar nicht. */ .gtp-vgl { box-shadow: inset 0 4px 0 var(--gtp-vgl-akzent, transparent); } .gtp-vgl--zurueck { --gtp-vgl-akzent: #68768C; } .gtp-vgl--blau { --gtp-vgl-akzent: #004FEF; } /* Die Schlusszeile ist Fliesstext und keine Karte. Der Verweis steht als eigener Absatz darunter; sein Aussehen kommt unveraendert aus `.gtp-ref-cta-link` weiter oben, damit die Website genau EINEN Textlink-Stil fuehrt. Die Absatzabstaende stehen hier, weil der Abstand zwischen den beiden Absaetzen sonst der des Themes waere und mit jedem Theme-Update wandern koennte. */ .gtp-vgl-schluss p { margin: 0; } .gtp-vgl-schluss p + p { margin-top: 14px; } /* --- 16. Werkstoff-Gattung: der Hero sitzt auf der Kopfkante ------------- */ /* Die vier Werkstoffseiten (Stahl, Aluminium, verzinkter Stahl, Edelstahl) sind eine eigene Gattung mit eigener Flaechenfolge, und die beginnt mit einem dunklen Hero, der unmittelbar unter der Kopfzeile anfaengt. WARUM DAS EINE REGEL BRAUCHT ---------------------------- Das Theme gibt dem Inhaltsbereich oben 100 px Luft (style.css:2174, `.entry-content { padding: 100px 0 120px }`). Auf den Leistungsseiten faellt das nicht auf, weil deren erste Sektion weiss auf weissem Grund steht. Ein Hero in #0C2148 legte sich damit auf einen 100 px hohen weissen Sockel, und zwischen Kopfzeile und Hero stuende ein heller Streifen quer ueber die Seite. Der Auftrag verlangt an dieser Kante ausdruecklich 0,00 px. Derselbe :has()-Weg wie in Block 1 und Block 9: die Regel haengt an einer Klasse auf der Sektion, nicht an einer Seiten-Id, und gilt damit fuer jede kuenftige Werkstoffseite, sobald sie mit einem Vollbreiten-Hero anfaengt. Block 9 nimmt den unteren Abstand, dieser hier den oberen; zusammen sitzt eine Gattungsseite buendig zwischen Kopf und Fuss. Spezifitaet 1,2,0 gegen 0,1,0 der Theme-Regel, deshalb ohne !important. Faellt :has() aus (sehr alter Browser), steht der Hero auf seinem Sockel: weniger schoen, aber unbeschaedigt. */ #content .entry-content:has(.gtw-hero) { padding-top: 0; } /* --- 17. Werkstoff-Gattung: der Deckel auf der Hero-Textspalte ----------- */ /* Der Hero benutzt die Bleed-Geste aus Block 2 (`.gtp-halbbild`): der Text steht auf der Rasterkante der uebrigen Seite, das Bild laeuft bis an die rechte Fensterkante. Damit waechst die Textspalte mit dem Fenster, weil sie die Haelfte des Rests bekommt. GERECHNET, NICHT GERATEN. Die Spalte ist `50%` der Breite ab der Rasterkante, abzueglich 40 px Fuge zum Bild: 1280 px -> (1280 - 55) / 2 - 40 = 572,5 px 1920 px -> (1920 - 375) / 2 - 40 = 732,5 px 2560 px -> (2560 - 695) / 2 - 40 = 892,5 px Die Rasterkante ist dabei `calc(50% - var(--gtp-raster-halb))` mit den gemessenen 585 px der oberen Stufe, also dieselbe eine Zahl wie ueberall. Bis 2500 px passiert hier nichts. Darueber wuerde die Einleitung ueber 870 px breit, und drei Saetze in einer Zeile von knapp 900 px lesen sich nicht mehr: die Zeile wird zu lang, um das Auge zurueckzufuehren. Der Deckel haelt sie an, wo die Bleed-Geste sonst weiterliefe. Das Bild bleibt davon unberuehrt und laeuft weiter bis zur Fensterkante; nur die Spalte hoert auf zu wachsen. */ .gtw-hero .gtw-hero__text { max-width: 870px; } /* --- 18. Werkstoff-Gattung: der Verweis in der Verweis-Karte ------------- */ /* Die drei Karten der Werkstoffseiten sind der Kartenstil der Bibliothek (`.gtf-usp`), zusaetzlich verlinkt: der Titel fuehrt auf die Leistungsseite, von der die Karte spricht. Das Theme macht daraus ein `a` im `h3` und faerbt es ueber `title_color` weiss; sichtbar ist damit nichts, was einen Verweis von einer Ueberschrift unterscheidet. Auf einer Karte, die "Verweis-Karte" heisst, ist das zu wenig: klickbar zu sein und klickbar auszusehen ist nicht dasselbe. NUR DIE UNTERSTREICHUNG, SONST NICHTS. Farbe, Schriftgrad, Gewicht, Zeilenhoehe, Polster und Radius bleiben die der Bibliothek; das Gate misst die neunzehn gerechneten Stilfelder gegen 1630, 1982 und 1983 und findet sie zeichengleich. `text-decoration` gehoert nicht zu diesen neunzehn, und das ist kein Schlupfloch, sondern die Stelle, an der sich ein Verweis von einer Ueberschrift unterscheiden DARF. Die Regel haengt an `.gtw-verweis`, also am Raster dieser Gattung, und nicht an `.gtf-usp`: die zwoelf Iconboxen auf 1630, 1982 und 1983 sind keine Verweise und bekommen deshalb auch keinen Strich. Beim Ueberfahren wird der Strich dicker statt die Farbe anders; auf dem Blau haelt nur Weiss die Textschwelle, ein zweiter Ton waere ein Rueckschritt (die C6D0E0-Falle). */ .gtw-verweis .gtf-usp .icon-box-title a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-thickness .2s ease; } .gtw-verweis .gtf-usp .icon-box-title a:hover, .gtw-verweis .gtf-usp .icon-box-title a:focus-visible { text-decoration-thickness: 2px; } @media (prefers-reduced-motion: reduce) { .gtw-verweis .gtf-usp .icon-box-title a { transition: none; } } /* --- 19. Werkstoff-Gattung: das Bild nimmt, was der Deckel freigibt ------ */ /* Block 17 deckelt die Textspalte bei 870 px. Die Bildspalte daneben steht auf `width: 50%`, und die zwei zusammen fuellen die Reihe dann nicht mehr aus: bei 2560 px Fenster sind es 870 + 932,5 = 1802,5 von 1865 verfuegbaren, also bleiben **62,5 px** als Navy-Streifen zwischen Text und Bild stehen. Das Bild endet dort, wo es randlos weiterlaufen soll. Gemessen, nicht vermutet: das Gate meldete bei 2560 px genau diese 62,5 px Abstand zur rechten Fensterkante, bei 1280 und 1920 null. Der Fehler ist also erst durch den Deckel entstanden, und er gehoert zu ihm. `flex-grow: 1` laesst die Bildspalte den Rest nehmen, ohne dass eine zweite Zahl gepflegt werden muss: die 50 % bleiben ihre Grundbreite, das Wachstum folgt dem, was der Deckel uebrig laesst. Die Textspalte waechst nicht mit, weil ihr `max-width` sie haelt. Nur ab 1025 px: darunter stapeln die beiden (`.gtp-halbbild` gibt dem Bild dort ein eigenes Seitenverhaeltnis), und in einer Spalte wuerde `flex-grow` die HOEHE strecken statt die Breite. */ @media (min-width: 1025px) { .gtw-hero .gtw-hero__bild { flex-grow: 1; } } /* --- 20. Werkstoff-Gattung: der Pfeil-Link ------------------------------ */ /* Die Werkstoffseiten fuehren zwei Verweise, die dasselbe tun: weiterschicken. In der Weiche steht ZUM WERKSTOFF, in der Schlusszeile des Einwands FOTO SCHICKEN. Sie sahen verschieden aus, obwohl sie dieselbe Rolle haben: der eine versal und unterstrichen, der andere ein Fliesstext-Link in einer anderen Farbe. Ab hier ist es ein Aussehen: Versal, Unterstrich, Pfeil. WARUM DER PFEIL HIER STEHT UND NICHT ZWEIMAL -------------------------------------------- Er ist die einzige Zutat, die beide neu bekommen, und er steht deshalb in EINER Regel fuer beide Waehler. Die uebrigen Werte (12/700/20, Laufweite .08em, Versalsatz, #13366D) stehen weiterhin an zwei Stellen, weil die Weiche ein HTML-Widget mit eigener CSS ist und diese Datei site-weit gilt. Das ist derselbe bezahlte Preis wie bei den drei Schriftwerten der Weiche-Karten, und er wird auf dieselbe Weise bezahlt: DAS GATE MISST BEIDE VERWEISE GEGENEINANDER, statt ihre Gleichheit zu glauben. WARUM DER PFEIL KEIN ZEICHEN IST -------------------------------- Ein Pfeil als Schriftzeichen (U+2192) waere Inhalt und wuerde vorgelesen ("Pfeil nach rechts"), obwohl er nichts sagt, was der Text nicht sagt. Ein `::after` mit leerem Inhalt aus zwei Rahmenkanten ist Zierrat und bleibt stumm. Streng geometrisch ist er ohnehin: zwei gerade Kanten, um 45 Grad gedreht. WARUM DIE UNTERSTREICHUNG DIE ALTE KANTE ERSETZT ------------------------------------------------ `.gtp-ref-cta-link` traegt oben eine durchsichtige untere Rahmenkante, die beim Ueberfahren sichtbar wird. Zusammen mit einer festen Unterstreichung waeren das zwei Striche uebereinander. Die Kante wird deshalb in diesem Umfeld auf null gesetzt, und das Ueberfahren wechselt stattdessen die Farbe, genau wie in der Weiche. UMFANG: die Klasse `gtp-vgl-schluss` steht auf genau drei Seiten (1630, 1632 und 1967), und `.gtp-ref-cta-link` allein bleibt unberuehrt. Die Startseite 791 fuehrt denselben Link ausserhalb einer Schlusszeile und aendert sich damit nicht; das Gate misst es nach. */ .gtp-vgl-schluss .gtp-ref-cta-link { font-family: "Archivo", "Archivo Expanded", system-ui, sans-serif; font-size: 12px; font-weight: 700; line-height: 20px; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-link); text-decoration: underline; text-underline-offset: 3px; border-bottom: 0; } .gtp-vgl-schluss .gtp-ref-cta-link:hover, .gtp-vgl-schluss .gtp-ref-cta-link:focus-visible { color: #004FEF; border-bottom: 0; } .gtp-vgl-schluss .gtp-ref-cta-link::after, .gtw-weiche .gtw-weiche__link::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 9px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); vertical-align: 1px; } /* gto-oberflaechen ================================================================== Die dritte Gattung dieser Website: das MUSTER-STUDIO. Sie steht auf genau einer Seite (1635 "Farben & Oberflaechen") und hat einen anderen Charakter als die zwei aelteren: die Leistungsseiten erzaehlen einen Ablauf, die Werkstoffseiten erzaehlen einen Werkstoff, diese hier ist ein KATALOG und ein STUDIO. Dichte Kachelraster statt Erzaehlstrecke. WAS HIER STEHT UND WAS NICHT ---------------------------- Hier steht das VOKABULAR der Gattung, also alles, was mehr als ein Baustein braucht: die zwoelf RAL-Naeherungen, die Musterplatte samt Kante, das Lichtband, die Koernung, der Hero und der Pfeil-Verweis. Sieben Bausteine zeigen Musterflaechen, und wenn jeder seine eigene Platte zeichnete, waeren es sieben Plattenstile, die am Bautag gleich aussehen und beim ersten Fix auseinanderlaufen. Was ein Baustein ALLEIN braucht, steht dagegen in seiner eigenen CSS in p57/widgets/oberflaechen/ und kommt ueber dieselbe Fuge wie jedes andere HTML-Widget dieses Projekts. ADDITIV, UND ZWAR NACHWEISLICH. Kein Waehler dieser Bloecke trifft eine Regel oder ein Element der zwei aelteren Gattungen: alles haengt an `gto-`. Der Bestandsschutz ist gemessen, nicht behauptet (Baum-SHA aller Bestandsseiten vorher/nachher, dazu ein reiner Anhang-Diff dieser Datei). ================================================================== */ /* --- 21. Das Vokabular: Toene, Platte, Licht, Korn ---------------------- */ /* WARUM DIE ZWOELF TOENE HIER STEHEN UND NICHT IM BAUSTEIN ------------------------------------------------------- Sie werden an DREI Stellen gezeigt: im Studio (S3, als Flaeche der Buehne), in der Farbwelt (S6, als Kachelraster) und in der Signatur des Abschlusses (S9, als schmaler Streifen). Stuenden sie in den drei Bausteinen, stuenden sie dreimal da, und der erste Fix an einem Ton traefe zwei Stellen nicht. Ein Ton ist Vokabular dieser Website, genau wie --brand-onyx, und Vokabular steht in dieser Datei. ES SIND NAEHERUNGEN, UND DAS STEHT AUCH AUF DER SEITE ----------------------------------------------------- Ein RAL-Ton ist eine Angabe fuer eine beschichtete Flaeche, kein Bildschirmwert: Bildschirm, Licht, Glanzgrad und Struktur veraendern die Wirkung. Verbindlich ist die RAL-Nummer am Teil. Die Seite sagt das an zwei Stellen im Klartext (unter dem Studio und in der Farbwelt), und studio.md fuehrt dieselbe Tabelle mit demselben Vorbehalt. DIE REIHENFOLGE IST DIE DES AUFTRAGS: von Verkehrsweiss zu Tiefschwarz, danach die vier Buntton-Beispiele. Sie ist an allen drei Stellen dieselbe, und das Gate misst es. */ :root { --gto-ral-9016: #F1F0EA; /* Verkehrsweiss */ --gto-ral-7035: #C5C7C4; /* Lichtgrau */ --gto-ral-9006: #A5A8A6; /* Weissaluminium */ --gto-ral-9007: #8F8F8C; /* Graualuminium */ --gto-ral-7024: #45494E; /* Graphitgrau */ --gto-ral-7016: #383E42; /* Anthrazitgrau */ --gto-ral-9005: #0E0E10; /* Tiefschwarz */ --gto-ral-3020: #BB1E10; /* Verkehrsrot */ --gto-ral-5010: #004389; /* Enzianblau */ --gto-ral-6005: #114232; /* Moosgruen */ --gto-ral-1023: #F7B500; /* Verkehrsgelb */ --gto-ral-8017: #442F29; /* Schokoladenbraun */ /* DIE PLATTENKANTE. Jede Musterflaeche dieser Gattung traegt sie. WARUM UEBERHAUPT EINE KANTE. #F1F0EA (Verkehrsweiss) liegt auf Weiss bei 1,14:1 und auf #F4F6F9 bei 1,09:1. Ohne Kante schwaemme die hellste Kachel auf der Seite, und ein Farbmuster ohne erkennbaren Rand ist keins. WARUM SIE AUF ALLEN LIEGT UND NICHT NUR AUF DEN HELLEN. Die Gattung zeigt Musterplatten, und ein Faecher aus Musterplatten hat an jeder Platte eine Kante. Eine Kante nur dort, wo sie noetig ist, sieht aus wie ein Fehler an den uebrigen elf. #68768C ist eine Stufe der Treppe dieses Projekts (die gedaempfte Akzentkante der Vergleichskarten, Block 15). Gemessen: 4,61:1 auf Weiss, 4,25:1 auf #F4F6F9. Damit traegt die Kante ueberall ueber der Grafik-Schwelle 3,0:1 gegen den Grund, auf dem die Platte liegt, und zwar unabhaengig vom Ton der Platte selbst. */ --gto-kante: #68768C; --gto-radius: 12px; /* DAS LICHT ALS VIER LAGEN, DER GLANZGRAD SCHALTET SIE ZU (v2) ------------------------------------------------------------- v1 hatte EINE Form (ein Band aus hellem Kern und zwei Flanken) und drei Zahlen, die sie verbogen. Auf dem Abzug waren Matt und Seidenglanz daraufhin kaum zu unterscheiden, und Glanz trug einen harten Einzelbalken, der wie aufgeklebtes Klebeband aussah. Das ist der Befund, an dem die Abnahme von v1 gescheitert ist. Der Grund ist keine falsche Zahl, sondern die eine Form: MATT IST NICHT EIN SCHMALERES BAND, MATT IST KEIN BAND. Eine matte Flaeche gibt das Licht in alle Richtungen zurueck; sie hat kein Glanzlicht, sondern nur ein Gefaelle. Solange alle drei Glanzgrade dieselbe Form tragen, unterscheidet sie nur die Deckkraft, und Deckkraft allein sieht man nebeneinander nicht. Jetzt sind es VIER Lagen mit je fester Form und je einem Regler: Kante die schmale, harte Spiegelkante samt Bluete drumherum. Nur Glanz hat sie. Sie ist eine Spiegelung und kein Balken: heller Kern von 1,4 Prozent Breite, Bluete von je gut 1,7 Prozent, und beides laeuft von Kante zu Kante durch. Schein der breite, weiche Sekundaerschein. Seide und Glanz haben ihn, matt nicht. Tiefe die dunklen Flanken. Sie machen aus einer eingefaerbten Flaeche ein Blech: je glaenzender, desto tiefer. Diffus das Gefaelle einer stumpfen Flaeche, von hell nach dunkel, ohne jeden Umkehrpunkt. Matt hat nur dieses. Gemessen wurde die Abnahme, nicht behauptet: paarweise mittlere absolute Bildpunkt-Differenz der drei Karten bei 1280 px auf RAL 3020, Schwelle 8 von 255 aus dem Auftrag. Matt gegen Seide 20,71, Matt gegen Glanz 29,35, Seide gegen Glanz 11,44. WARUM REGLER UND NICHT DREI FERTIGE BILDER. Der Zustandsplan des Studios kann keine KLASSE setzen, nur Variablen. Vier Zahlen je Glanzgrad sind im Zustandsplan und im Gate lesbar; drei ausgeschriebene Verlaufsstapel waeren es nicht. Die Klassen `.gto-g-*` weiter unten und die drei Regeln in studio.css lesen dieselben zwoelf Zahlen von hier. Eine Zahl, zwei Leser, kein Abschreiben. */ --gto-matt-kante: 0; --gto-matt-schein: 0; --gto-matt-tiefe: 0.3; --gto-matt-diffus: 1; --gto-seide-kante: 0; --gto-seide-schein: 1; --gto-seide-tiefe: 0.52; --gto-seide-diffus: 0.34; --gto-glanz-kante: 1; --gto-glanz-schein: 1; --gto-glanz-tiefe: 1; --gto-glanz-diffus: 0.12; /* DIE KOERNUNG: EIN RASTER, ZWEI GROESSEN (v2.1) ---------------------------------------------- Bis v2 stand hier echtes Rauschen aus `feTurbulence`, vier erzeugte SVG-Kacheln mit Primzahl-Seiten, damit die Fuge der einen Lage nie mit der der anderen zusammenfaellt. Das war handwerklich sauber und gestalterisch falsch: eine Pulverbeschichtung mit Feinstruktur hat ein GLEICHMAESSIGES Korn, kein Rauschen. Auf dem Abzug las sich die Flaeche wie ein Foto mit Bildrauschen, also wie ein Fehler, und nicht wie eine Oberflaeche. Jetzt ist es ein strenges Punktraster, und zwar EINES fuer beide Strukturen. Je Kachel zwei Punkte: ein heller oben links, ein dunkler unten rechts. Das ist die Lichtrichtung dieser Seite (104 Grad, siehe `.gto-licht`) auf ein Korn uebertragen: ein Korn wird von links oben angeleuchtet und wirft seinen Schatten nach rechts unten. EIN WAHRHEITSORT, ZWEI GROESSEN. `--gto-korn-raster` steht einmal da; Feinstruktur und Struktur unterscheiden sich NUR in der Kachelgroesse, 6 px gegen 13 px. Wer das Korn aendert, aendert eine Stelle und trifft beide Strukturen, die Buehne des Studios, die Formel-Miniatur 03 und die zwei Praxis-Zeilen mit Korn. WARUM 18 PROZENT. Die Prozente sind Farbstopps entlang des Strahls, und der Strahl geht bis zur fernsten Ecke der Kachel. Bei 6 px sind 18 Prozent rund 1,07 px Radius, also ein Punkt von gut 2 px; bei 13 px sind es rund 2,3 px, also gut 4,6 px. Der harte Sprung von 18 auf 19 Prozent macht die Kante scharf: ein weicher Verlauf waere wieder ein Schleier und kein Korn. GLATT HAT KEIN MUSTER, und das ist die Aussage: die pure Flaeche. */ --gto-korn-raster: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .30) 0 18%, rgba(255, 255, 255, 0) 19%), radial-gradient(circle at 80% 80%, rgba(0, 0, 0, .34) 0 18%, rgba(0, 0, 0, 0) 19%); --gto-korn-fein: var(--gto-korn-raster); --gto-korn-fein-mass: 6px 6px; --gto-korn-grob: var(--gto-korn-raster); --gto-korn-grob-mass: 13px 13px; } /* DIE MUSTERPLATTE, das Atom dieser Gattung. Buehne des Studios, Miniaturen der Formel, Karten der Glanzgrade, Zeilen der Strukturen, zwoelf Kacheln der Farbwelt, zwoelf Segmente der Signatur: alle sind dieselbe Platte in verschiedenen Groessen. Sie traegt ihren Ton, ihre Kante und ihren Radius, und sie ist der Bezugsrahmen fuer Licht und Korn darin. Ohne `--gto-ton` steht sie auf Anthrazitgrau. Das ist kein Platzhalter, sondern der Ton, mit dem das Studio startet und der auf dieser Website ohnehin der haeufigste ist. */ .gto-platte { position: relative; overflow: hidden; background-color: var(--gto-ton, var(--gto-ral-7016)); border: 1px solid var(--gto-kante); border-radius: var(--gto-radius); /* Die vier Regler stehen HIER und nicht auf `.gto-licht`, und das ist kein Geschmack: eine eigene Deklaration auf dem Kind beschattet den geerbten Wert vom Elternknoten. Standen die Vorgaben auf `.gto-licht`, hatten `.gto-g-matt` und die zwei Schwestern keine Wirkung, und alle drei Karten sahen gleich aus. Gemessen: 0,16 von 255 Unterschied zwischen Matt und Seidenglanz, also nichts. Gefunden hat es der Tuning-Stand vor dem Einbau und nicht der Blick auf den Code. */ --gto-licht-kante: 0; --gto-licht-schein: 0; --gto-licht-tiefe: .30; --gto-licht-diffus: 1; } /* DAS LICHT, IN VIER LAGEN. Was jede Lage tut und warum es vier sind, steht oben bei den zwoelf Zahlen; wie es sich anfuehlt, steht im Kopf von studio.css. Die Reihenfolge im Stapel ist die des Blicks: die Spiegelkante liegt oben, das Gefaelle einer stumpfen Flaeche unten. ALLE VIER LAGEN STEHEN IMMER DA, auch die abgeschalteten. Eine Lage mit dem Regler 0 rechnet ihre Deckkraft zu 0 und ist damit unsichtbar, aber vorhanden: so gibt es EINEN Verlaufsstapel auf der Seite und nicht drei, und der Zustandsplan des Studios braucht keine Klasse zu setzen, sondern nur vier Zahlen. 104 Grad ist die Richtung des Lichts auf dieser Seite, dieselbe wie in v1. Alle vier Lagen tragen sie, sonst kreuzten sich zwei Lichtquellen auf einer Flaeche. */ .gto-licht, .gto-korn { position: absolute; inset: 0; } .gto-licht { background-image: linear-gradient(104deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, calc(.16 * var(--gto-licht-kante))) 35.2%, rgba(255, 255, 255, calc(.95 * var(--gto-licht-kante))) 36.9%, rgba(255, 255, 255, calc(.95 * var(--gto-licht-kante))) 38.3%, rgba(255, 255, 255, calc(.18 * var(--gto-licht-kante))) 40.2%, rgba(255, 255, 255, 0) 47%), linear-gradient(104deg, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, calc(.09 * var(--gto-licht-schein))) 28%, rgba(255, 255, 255, calc(.30 * var(--gto-licht-schein))) 54%, rgba(255, 255, 255, calc(.08 * var(--gto-licht-schein))) 76%, rgba(255, 255, 255, 0) 97%), linear-gradient(104deg, rgba(0, 0, 0, calc(.36 * var(--gto-licht-tiefe))) 0%, rgba(0, 0, 0, calc(.11 * var(--gto-licht-tiefe))) 22%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, calc(.15 * var(--gto-licht-tiefe))) 76%, rgba(0, 0, 0, calc(.40 * var(--gto-licht-tiefe))) 100%), linear-gradient(104deg, rgba(255, 255, 255, calc(.12 * var(--gto-licht-diffus))) 0%, rgba(255, 255, 255, calc(.03 * var(--gto-licht-diffus))) 42%, rgba(0, 0, 0, calc(.04 * var(--gto-licht-diffus))) 72%, rgba(0, 0, 0, calc(.11 * var(--gto-licht-diffus))) 100%); } .gto-korn { background-image: var(--gto-korn, none); background-size: var(--gto-korn-mass, auto); background-repeat: repeat; } /* Die sechs Zustaende als Klassen. Das Studio setzt dieselben Werte ueber seinen Zustandsplan, weil eine CSS-Regel keine Klasse setzen kann; die ZAHLEN liest es von oben, genau wie diese sechs Klassen. */ .gto-g-matt { --gto-licht-kante: var(--gto-matt-kante); --gto-licht-schein: var(--gto-matt-schein); --gto-licht-tiefe: var(--gto-matt-tiefe); --gto-licht-diffus: var(--gto-matt-diffus); } .gto-g-seide { --gto-licht-kante: var(--gto-seide-kante); --gto-licht-schein: var(--gto-seide-schein); --gto-licht-tiefe: var(--gto-seide-tiefe); --gto-licht-diffus: var(--gto-seide-diffus); } .gto-g-glanz { --gto-licht-kante: var(--gto-glanz-kante); --gto-licht-schein: var(--gto-glanz-schein); --gto-licht-tiefe: var(--gto-glanz-tiefe); --gto-licht-diffus: var(--gto-glanz-diffus); } .gto-s-glatt { --gto-korn: none; --gto-korn-mass: auto; } .gto-s-fein { --gto-korn: var(--gto-korn-fein); --gto-korn-mass: var(--gto-korn-fein-mass); } .gto-s-grob { --gto-korn: var(--gto-korn-grob); --gto-korn-mass: var(--gto-korn-grob-mass); } /* Was nur gelesen und nicht gesehen wird. Der Kasten bleibt im Fluss und fokussierbar; `display: none` naehme ihn dem Vorleseprogramm mit weg. Steht hier und nicht im Baustein, weil ihn sechs der sieben brauchen. */ .gto-nurlesen { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* --- 22. Der Hero der Gattung sitzt auf der Kopfkante ------------------- */ /* Dieselbe Lage wie Block 16 und derselbe Grund: das Theme gibt dem Inhaltsbereich oben 100 px Luft (style.css:2174), und ein Hero in #0C2148 laege damit auf einem weissen Sockel. WARUM EINE ZWEITE REGEL UND KEIN ZWEITER WAEHLER IN BLOCK 16 ------------------------------------------------------------ Block 16 gehoert der Werkstoff-Gattung. Wer ihn erweitert, aendert eine Regel, an der vier gebaute Seiten haengen, und muss sie danach alle vier neu belegen. Diese Regel hier haengt an `gto-hero`, trifft ausschliesslich die eine Seite dieser Gattung und laesst Block 16 zeichengleich stehen. Das ist der Preis fuer den Bestandsschutz, und er ist eine Zeile teuer. Faellt :has() aus, steht der Hero auf seinem Sockel: weniger schoen, aber unbeschaedigt. Genau wie in Block 1, 9 und 16. */ #content .entry-content:has(.gto-hero) { padding-top: 0; } /* Die Textspalte des Heros. Kicker, H1 und Einleitung stehen auf der Rasterkante wie alles andere, aber sie duerfen nicht mit dem Raster mitwachsen: bei 1140 px Kastenbreite haette die Einleitung Zeilen von gut 150 Zeichen, und das Auge findet den Zeilenanfang nicht mehr zurueck. 760 px sind rund 90 Zeichen bei 17 px, also die obere Kante dessen, was sich noch liest. Der Deckel gilt NUR fuer den Text. Das Bild darunter nimmt die volle Rasterbreite; es ist die Musterplatte auf dem dunklen Tisch. */ .gto-hero .gto-hero__text { max-width: 760px; } /* DAS HERO-BILD IST EIN BAND, KEIN EINGEKLEBTES FOTO (v2). v1 setzte den Faecher als Bild in den 1180er Kasten: mit weissem Rand, mit Radius, mit Kartenwirkung. Auf dem Abzug las sich der Hero damit als Textblock plus Abbildung, und die Seite fing an wie jede andere. Jetzt laeuft ob1 unmittelbar unter dem Textblock als randloses Band ueber die volle Fensterbreite: keine Rundung, kein Rahmen, kein Abstand nach unten. Der Faecher ist das Bild dieser Seite, und ein Bild, das die Seite traegt, hat keinen Rand. DAS BILD WIRD JETZT SEHR WOHL BESCHNITTEN, und die Begruendung von v1 dreht sich damit um. Sie lautete: ein Faecher hat einen Anfang und ein Ende, wer ihn abschneidet, zeigt einen Streifen Farbe. Das gilt fuer die BREITE und nur fuer sie, und in der Breite wird weiterhin nichts abgeschnitten. In der HOEHE stehen ueber und unter dem Faecher Werkbank und Hallenboden, also Beiwerk; `object-position: center 46%` haelt den Faecher im Bild und schneidet das Beiwerk weg. DIE HOEHE STEHT NICHT HIER, SONDERN AM ELEMENTOR-REGLER VON `go00006`. Bis zum 31.08.2026 stand an dieser Stelle `height: clamp(380px, 32vw, 560px)`, und die Zeile war wirkungslos. Gemessen (CSSOM, alle Regeln, die auf das Bild passen und `height` setzen, reports/p57-aufraeumen-v21/ protokolle/12-warum-hoehe.json): post-1635.css .elementor-1635 .elementor-element.elementor-element-go00006 … 700px / 100% ab 1024 / 192px ab 767 Gewicht (0,3,1) brand.css .gto-hero .gto-hero-band img clamp(380px, 32vw, 560px) Gewicht (0,2,1) Der Regler gewinnt ueber das Gewicht und nicht ueber die Reihenfolge; eine andere Ladefolge haette daran nichts geaendert. Effektiv gemessen: 192 px bei 390, 381,45 px bei 900 (Tablet-Wert `100%` faellt auf das natuerliche Verhaeltnis zurueck), 700 px bei 1280. Der clamp haette dort 380, 380 und 409,6 px gesagt. Die Zeile ist ersatzlos entfernt, damit es fuer die Hoehe genau einen Wahrheitsort gibt: den Regler. Wer die Hoehe aendern will, aendert sie in Elementor an `go00006` (Desktop / Tablet / Mobil) und nicht hier. Die uebrigen fuenf Eigenschaften dieser Regel kommen sehr wohl an; nachgemessen in protokolle/13-warum-hoehe2.json. Die ausgelieferte Datei reicht: WordPress liefert bei 1280 px `ob1-1536x652.webp` (gemessen), und 1536 zu 652 deckt 1265 zu 700 in der Breite ohne Hochrechnen. */ .gto-hero .gto-hero-band img { display: block; width: 100%; object-fit: cover; object-position: center 46%; border-radius: 0; } /* Das Makro in S5 wird SEHR WOHL beschnitten, und damit steht die Regel von oben in ihrem Gegenstueck da: ein Ausschnitt einer Oberflaeche vertraegt einen zweiten, ein Faecher nicht. Ohne Beschnitt waere es 1170 x 873 und beherrschte den Abschnitt, in dem es nur der Beleg zu drei Karten ist. `aspect-ratio: 16 / 6` macht daraus ein Band von 1170 x 439; `object-fit: cover` schneidet oben und unten weg, was dabei ueber bleibt, und `object-position: center` nimmt die Mitte, weil bei einer gleichmaessigen Koernung jede Stelle dieselbe Aussage traegt. Der erste Abzug hatte diese Regel nicht: die Zusage stand im Kommentar, der Waehler fehlte, und auf dem Bild stand ein Foto, das doppelt so hoch war wie die drei Karten darueber zusammen. Gefunden hat das der Abzug. */ .gto-struktur-makro img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 6; object-fit: cover; object-position: center; border-radius: var(--gto-radius); } /* --- 23. Der Pfeil-Verweis der Gattung ---------------------------------- */ /* Aussehen wie Block 20, eigener Waehler. Der Auftrag sagt es woertlich: Block 20 bleibt auf `.gtp-vgl-schluss` eingegrenzt, also auf die drei Seiten, die diese Klasse fuehren (1630, 1632, 1967). Wer dort einen dritten Waehler hineinschriebe, aenderte eine Regel des Bestands. DER PREIS UND WARUM ER BEZAHLT WIRD ----------------------------------- Die acht Werte stehen damit ein zweites Mal in dieser Datei. Das ist derselbe bezahlte Preis wie bei den drei Schriftwerten der Weiche, und er wird auf dieselbe Weise bezahlt: DAS GATE MISST BEIDE VERWEISE GEGENEINANDER, am gerenderten DOM, statt ihre Gleichheit zu glauben. Acht Stilwerte, der Pfeil dazu, bei jeder gefahrenen Breite. Der Pfeil ist auch hier kein Schriftzeichen, sondern ein `::after` mit leerem Inhalt aus zwei Rahmenkanten, um 45 Grad gedreht: ein U+2192 waere Inhalt und wuerde vorgelesen, obwohl er nichts sagt, was der Text nicht sagt. */ .gto-verweis { font-family: "Archivo", "Archivo Expanded", system-ui, sans-serif; font-size: 12px; font-weight: 700; line-height: 20px; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-link); text-decoration: underline; text-underline-offset: 3px; border-bottom: 0; } .gto-verweis:hover, .gto-verweis:focus-visible { color: #004FEF; border-bottom: 0; } .gto-verweis::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 9px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); vertical-align: 1px; } /* --- 24. Die zwei Kanten der Oberflaechen-Gattung ----------------------- */ /* Zwei Bausteine dieser Seite laufen ueber die Rasterkante hinaus: die Buehne des Muster-Studios (S3) und das Farbband der Spektralwand (S6). Beide brauchen dieselben zwei Zahlen, und bis v2 rechnete jeder sie selbst aus. Seit v2.1 stehen sie hier, einmal. --gto-textrand die Rasterkante der uebrigen Seite. Gemessen 55 px bei 1280, 375 bei 1920, 695 bei 2560 und 20 bei 390. Dort beginnt jede Ueberschrift dieser Seite. --gto-bleed-rand wie weit ein randloser Baustein nach aussen laeuft, bevor er stehen bleibt. Gemessen 0 bei 1280 (also Fensterkante), 90 bei 1920, 410 bei 2560. Der Deckel ist 585 + 285 = 870, ein Bleed-Baustein wird also nie breiter als 1740 px. WARUM DAS TROTZDEM KEINE FESTEN ZAHLEN SIND ------------------------------------------- Eine Custom Property wird als TEXT eingesetzt. Das `50%` darin rechnet erst an der Stelle, an der die Variable BENUTZT wird, und zwar gegen den Eltern-Kasten dieser Stelle. Beide Formeln stimmen deshalb nur dort, wo der Eltern-Kasten das Fenster ist, also an einem direkten Kind einer vollbreiten Sektion ohne Seitenpolster. Wer sie tiefer benutzt, bekommt eine andere Zahl, und zwar ohne Fehlermeldung. Der erste Wurf von wand.css hatte genau diesen Fehler: der Bleed-Rand fiel von -55 px auf -20 px. DIE EINE AUSNAHME, UND WARUM SIE KEINE IST ------------------------------------------ `.gtw-marke` (die Ablesung unter dem Farbband) benutzt `--gto-textrand` sinngemaess ein Stockwerk tiefer, naemlich gegen das Band statt gegen das Fenster. Sie bekommt trotzdem dieselbe Kante, weil das Band bei genau 1740 px stehen bleibt: 870 - 585 = 285, und 285 ist genau der Ueberstand, um den das Band links ueber die Rasterkante hinausragt. Der Deckel ist damit nicht nur eine Zahl fuer die Breite, sondern die Bedingung, unter der diese Formel an zwei Stellen stimmt. Wer den Deckel aendert, misst die Ablesung nach. Herleitung und Messprotokoll der zwei Konstanten dahinter (--gtp-raster-halb, --gtp-bleed-ueberstand): ganz oben im :root. */ :root { --gto-textrand: max(20px, calc(50% - var(--gtp-raster-halb))); --gto-bleed-rand: max(0px, calc(50% - var(--gtp-raster-halb) - var(--gtp-bleed-ueberstand))); } /* --- 25. Der Kopf dockt an, ohne dass der Inhalt springt ---------------- */ /* DAS PROBLEM, IN EINER ZEILE --------------------------- Das Theme heftet den Kopf mit `position: fixed` an und stellt NICHTS an seine Stelle. Damit faellt seine Hoehe aus dem Fluss, und alles darunter rutscht in demselben Augenblick um genau diese Hoehe nach oben. GEMESSEN, nicht vermutet (reports/p57-header-mobil/protokolle/10-diagnose-vorher.txt): Seite 1635 @ 1280 Dokumenthoehe 6362 -> 6287 px, Sprung 75,00 px Seite 1635 @ 390 Dokumenthoehe 7551 -> 7453 px, Sprung 98,23 px Startseite beides Dokumenthoehe unveraendert, Sprung 0,00 px Die Startseite springt nicht, weil ihr Kopf `header-overlay` traegt und ohnehin `position: absolute` steht: was nie im Fluss war, kann ihn auch nicht verlassen. Der Sprung trifft also JEDE Seite ausser der Startseite. WARUM HIER UND NICHT AN DER THEME-EINSTELLUNG --------------------------------------------- Der Kopf-Baukasten des Themes kennt zum Anheften genau drei Steuerelemente (makaffo/inc/backend/elementor/elementor.php: `sticky_class`, `sticky_background`, `offset_space`). Ein Platzhalter ist nicht darunter. Elementors eigenes Sticky mit Platzhalter gehoert zu Elementor Pro, und das ist hier nicht installiert (aktiv ist `elementor` 4.2.3, sonst nichts aus der Familie). Bleibt die Hoehenreservierung an den beiden Huellen, die das Theme um die Kopf-Vorlagen legt (`inc/frontend/builder.php`). DIE ZAHLEN SIND GEMESSEN, UND ZWAR DIE TREPPE, NICHT ZWEI PUNKTE ---------------------------------------------------------------- Die Hoehe ist nicht konstant (protokolle/12-stufen-vorher.txt, 35 Breiten): .header-mobile bis 334 px: 161 px (Logo und Knopf brechen um) 335 bis 767 px: 98 px (Logo 255 px, Elementor mobil) 768 bis 1024 px: 110 px (Logo 307 px, Elementor Tablet) .header-desktop ab 1025 px: 79 px, ab rund 1663 px waechst sie Der Umbruchpunkt 334/335 ist einzeln nachgemessen (protokolle/16-umbruch.txt, 41 Breiten in Einerschritten), weil eine Mediengrenze drei Pixel daneben im Zwischenband 63 px Leere reservieren wuerde: zu viel ist schlimmer als zu wenig, weil es immer zu sehen ist und nicht nur beim Scrollen. DIE ZAHLEN STEHEN ALS BRUCH DA, UND ZWAR NACH EINEM ROTEN PUNKT. Der erste Wurf reservierte 161, 98 und 110 px, also die Zahlen aus `offsetHeight`. Das rundet auf ganze Pixel. Bei 335 px meldete der Kanten-Lauf daraufhin einen Pixel Dokumenthoehe zu wenig (protokolle/35-andock-kanten.txt): die echte Hoehe ist 98,234 px, die Reservierung war um 0,234 px zu klein. Nachgemessen mit `getBoundingClientRect().height` (protokolle/36-bruch.txt): bis 334 px 161,078 bis 161,094 (die Zahl schwankt ueber das Band um 0,016 px, genommen ist die groessere) 335..767 98,234 768..1024 110,109 Die clamp()-Kurve des Rechner-Kopfes brauchte diese Korrektur nicht: sie liefert 79,0116 gegen 79,000 gemessen, 91,3389 gegen 91,328 und 96,360 gegen 96,359, also hoechstens 0,012 px zu viel. DER RECHNER-KOPF WAECHST, UND ZWAR NACH EINER REGEL --------------------------------------------------- Bis rund 1663 px ist die Menuespalte der hoechste Teil (74 px). Darueber ueberholt sie die Logospalte, und die haengt an der Fensterbreite (protokolle/13-warum-waechst.txt): Logospalte = 21 % der Innenbreite, und die ist Fensterbreite minus 120 px Polster. Ihre Hoehe ist das Seitenverhaeltnis des Logos: 1349/5906 = 0,22841. Zusammen 0,21 * 0,22841 = 0,0479661 je Pixel Innenbreite, also 4,79661vw - 5,756px. Gedeckelt bei 400 px Logobreite, das sind 91,36 px. Dazu 4 px Trenner-Behaelter und 1 px Rahmen. Nachgerechnet gegen die Messung: 1700 -> 80,79 (gemessen 81), 1800 -> 85,58 (86), 1920 -> 91,34 (91), 2560 -> 96,36 (96). An der Nahtstelle 1663 px ergibt die Formel 79,01 px, also genau den Wert der Stufe darunter. `100vw` zaehlt auf dem Rechner die Rollleiste mit, das sind hier 0,05 * 15 = 0,72 px zu viel. Unter einem Pixel, und `min-height` kann nur nach oben wirken: der Kopf wird dadurch nicht kleiner, hoechstens um einen dreiviertel Pixel hoeher. */ @media (max-width: 334px) { #site-header .header-mobile { min-height: 161.094px; } } @media (min-width: 335px) and (max-width: 767px) { #site-header .header-mobile { min-height: 98.234px; } } @media (min-width: 768px) and (max-width: 1024px) { #site-header .header-mobile { min-height: 110.109px; } } @media (min-width: 1025px) { #site-header .header-desktop { min-height: calc(5px + clamp(74px, 4.79661vw - 5.756px, 91.36px)); } } /* DIE BEWEGUNG AN DER AUSLOESE-KANTE, UND WARUM SIE JETZT WEG MUSS --------------------------------------------------------------- Das Theme laesst den angehefteten Kopf jedes Mal einfahren (`header .is-stuck { animation: stickySlideDown 0.65s ... both }`, makaffo/style.css:1779), und Elementors Behaelter bringt zusaetzlich `transition: background .3s, border .3s, box-shadow .3s, transform .4s` mit (gemessen, protokolle/10-diagnose-vorher.txt). Solange der Kopf beim Anheften seine Hoehe aus dem Fluss nahm, hatte das Theme aus Versehen eine Hysterese: die Ausloese-Schwelle ist `#site-header.offsetHeight + 200` (makaffo/js/scripts.js:40), und die fiel im angehefteten Zustand von 279 auf 204 px, weil die Huelle zusammenfiel. Die Reservierung oben nimmt genau das weg, also ist die Schwelle jetzt in beiden Richtungen dieselbe Zahl. Ein Finger, der an der Kante haengen bleibt, schaltet die Klasse damit mehrfach, und JEDES Anschalten startet die 0,65 s lange Einfahrt von neuem. Das waere ein Flackern, das es vorher nicht gab, eingehandelt durch den eigenen Fix. Deshalb wird die Bewegung an dieser einen Stelle gekappt. Der Kopf ist dann einfach da, und "einfach da" kann nicht ruckeln. Ein Id und zwei Klassen (1,2,0) schlagen sowohl `header .is-stuck` (0,1,1) als auch `.e-con` (0,1,0), ein !important ist nicht noetig. */ #site-header .sticky-header.is-stuck { animation: none; transition: none; } /* DIE EINFAHRT KOMMT ZURUECK, ABER ENTPRELLT ------------------------------------------ Die Regel darueber kappt die Bewegung des Themes, weil sie an der Kante flackerte. Sie loest damit das Flackern und nimmt zugleich die Einfahrt weg: der Kopf ist seither schlagartig da. Diese Regel holt sie zurueck, ohne das Flackern mitzubringen, und der Unterschied steckt nicht in der Animation, sondern in der KLASSE, an der sie haengt. `is-stuck` schaltet das Theme bei jedem Ueberschreiten der Schwelle (gemessen: 279 px bei 1280, 299 px bei 390; an der Kante zwoelf Umschaltungen in sechs Pendelrunden, protokolle/10-kopflage-vorher.json). `gtp-kopf-ein` setzt das Skript nur, wenn der Kopf vorher laenger als 250 ms abgedockt war. Ein Finger, der auf der Kante haengen bleibt, startet damit nichts mehr neu. Ein Id und drei Klassen (1,3,0) schlagen die Regel darueber (1,2,0), ohne dass es ein !important braucht. KEIN `both` UND KEIN `forwards`, UND DAS IST GEMESSEN UND NICHT GEERBT. Bliebe das `transform` nach der Einfahrt stehen, waere der Kopf der Bezugsrahmen fuer jedes `position: fixed` darunter. Darunter liegt `#mmenu-wrapper`, und zwar wirklich: es haengt in der Mobil-Kopfvorlage (`elementor-element-cb28b0b` > `.e-con-inner` > `.elementor-element-6749711` > `.octf-menu-mobile` > `#mmenu-wrapper`, protokolle/11-mmenu.json). Nachgemessen in protokolle/12-rahmen.json, mit Rueckmeldung des tatsaechlich angekommenen `transform`: Kopf ohne transform Menue geschlossen x=390 offen x=80 h=1000 Kopf translateY(0px) unveraendert, aber der Kopf IST jetzt Bezugsrahmen (belegt am Fall darunter) Kopf translateY(-100%) Menue faehrt 98,23 px mit nach oben Der Nullfall faellt nicht auf, weil die Kopfhuelle bei 0/0 sitzt und so breit ist wie das Fenster. Das ist ein Zufall der Geometrie und keine Sicherheit: der dritte Fall zeigt, dass der Bezugsrahmen sehr wohl gewechselt hat. Also bleibt kein `transform` stehen, weder ueber den Fuellmodus noch ueber die Klasse (die nimmt das Skript bei `animationend` wieder weg). */ @keyframes gtpKopfEin { from { transform: translateY(-100%); } to { transform: translateY(0); } } #site-header .sticky-header.is-stuck.gtp-kopf-ein { animation: gtpKopfEin .4s ease-out; } /* Wer Bewegung abbestellt hat, bekommt den Kopf ohne Einfahrt, also genau den Zustand vor diesem Auftrag. Die Klasse bleibt dann folgenlos stehen, bis das Abdocken sie entfernt: ohne Animation gibt es kein `animationend`. Das ist unschaedlich, weil die Klasse allein nichts tut. */ @media (prefers-reduced-motion: reduce) { #site-header .sticky-header.is-stuck.gtp-kopf-ein { animation: none; } } /* DIE DRITTE DUNKLE QUELLE, DIE ERST NACH DEM AUFRAEUMEN SICHTBAR WURDE -------------------------------------------------------------------- Der Auftrag nennt zwei Regeln im Zusatz-CSS 1396, die den angehefteten Mobil-Kopf dunkel faerben (#1B2C40 und #262F42, beide !important). Beide sind entfernt. Danach war der Kopf trotzdem nicht weiss, sondern rgb(36,36,36): darunter lag eine DRITTE Quelle, und die steht im Theme selbst (makaffo/style.css:5297): .header-mobile .is-stuck { background-color: var(--makaffo-color-dark); } Sie hat Spezifitaet 0,2,0 und schlaegt damit die weisse Regel des Themes `header .is-stuck` (0,1,1). Der Auftrag will den angehefteten Kopf site-weit weiss, also muss auch diese Quelle weg. Sie steht in einer Theme-Datei, die uns nicht gehoert und ein Update ohnehin zurueckbringen wuerde, deshalb wird sie hier ueberschrieben statt dort geloescht. Ein Id und drei Klassen (1,3,0) reichen gegen 0,2,0; ein !important ist nicht noetig und waere hier auch falsch, weil es die naechste Regel wieder zu einem !important zwaenge. */ #site-header .header-mobile .sticky-header.is-stuck { background-color: #FFFFFF; } /* --- 26. Das Etikett der Kennzahl behaelt Schriftart und Zeilenhoehe ----- */ /* Der Zaehler zeichnet sein Etikett nicht mehr als h6, sondern als p (functions.php, gtp_counter_etikett_ohne_ueberschrift). ZWEI gerechnete Eigenschaften kamen an diesem Etikett aus einer TAG-Regel und aus keiner anderen Quelle. Beide stehen deshalb hier ausgeschrieben. 1. Die Zeilenhoehe: h6 { line-height: var(--makaffo-h6-line-height); } makaffo/style.css:460 Gemessen 30px. Ein p erbt stattdessen die 32px des Fliesstextes. 2. Die Schriftart, und die hat mich einen Gate-Lauf gekostet: h1, h2, h3, h4, h5, h6 { font-family: var(--brand-font-heading); } brand.css Zeile 111 Als h6 stand das Etikett in Archivo, als p in Inter. Inter ist breiter, und genau ein Etikett stand knapp an der Kante: `RAL- & NCS-FARBTOENE` passte in 163,7px Kastenbreite auf eine Zeile und danach nicht mehr. Die Karte wurde 30px hoeher, die Seite 60px laenger (10130 auf 10190), und der Vergleich der Messlaeufe wurde an acht Zusagen rot. Der Fund gehoert in die Familie von FALLE 69: die Zusage war erfuellt (der Tag ist weg), und die Seite trotzdem eine andere. Gefunden hat es nicht die Stil-Messung, die zehn Eigenschaften liest und font-family nicht darunter, sondern die GEOMETRIE. Was ankommt, ist die Hoehe. Schriftgroesse, Gewicht, Farbe, Laufweite und die beiden Abstaende kommen dagegen aus Klassenregeln (.ot-counter__title und .gtp-stat .ot-counter__title) und bleiben von einem Tag-Wechsel unberuehrt; sie stehen hier deshalb NICHT. Das ist keine Kaschierung des Befunds, sondern seine Gegenrechnung: der Tag ist wirklich weg, und die Optik steht, wo sie stand. */ .ot-counter__title { font-family: var(--brand-font-heading); line-height: 30px; } /* gtu-ueber-uns ================================================================== Die vierte Gattung dieser Website: DER BETRIEB. Sie steht auf genau einer Seite (1637 "Ueber uns") und hat wieder einen anderen Charakter als die drei aelteren: die Leistungsseiten erzaehlen einen Ablauf, die Werkstoffseiten einen Werkstoff, die Oberflaechen-Seite ist ein Katalog. Diese hier erzaehlt ein HAUS: Halle, Ablauf, Grenzen, Menschen. WAS HIER STEHT UND WAS NICHT ---------------------------- Hier steht nur, was das THEME sonst kaputt macht, also die drei Regeln um den randlosen Hero. Und das ist auffaellig wenig, verglichen mit den Gattungen davor. Der Grund ist kein Sparen, sondern der Zuschnitt: die fuenf Bausteine dieser Seite (Zahlenband, Rundgang, Grenzen, Zitat, Arbeitsweise) teilen sich untereinander KEIN Vokabular. Jeder steht einmal auf einer Seite. Was nur ein Baustein braucht, gehoert in seine eigene CSS in p57/widgets/ueber-uns/ und kommt ueber dieselbe Fuge wie jedes andere HTML-Widget dieses Projekts; es hier abzulegen hiesse, eine geteilte Zustaendigkeit zu behaupten, die es nicht gibt. ADDITIV, UND ZWAR NACHWEISLICH. Kein Waehler dieses Blocks trifft eine Regel oder ein Element der drei aelteren Gattungen: alles haengt an `gtu-`. Der Bestandsschutz ist gemessen, nicht behauptet (Baum-SHA aller Bestandsseiten vorher gegen nachher, dazu ein reiner Anhang-Diff dieser Datei). ================================================================== */ /* --- 27. Der Hero der Gattung sitzt auf der Kopfkante ------------------- */ /* Dieselbe Lage wie Block 16 und Block 22, derselbe Grund: das Theme gibt dem Inhaltsbereich oben 100 px Luft (makaffo/style.css:2174), und ein Hero in #0C2148 laege damit auf einem weissen Sockel. Dass es die dritte Regel dieser Art ist und nicht ein dritter Waehler in Block 16, hat den Grund, den Block 22 ausschreibt: Block 16 haengen vier gebaute Seiten an, Block 22 eine. Wer sie zusammenlegt, muss beim naechsten Eingriff sechs Seiten neu belegen statt einer. Der Bestandsschutz ist hier eine Zeile teuer, und die Zeile ist gut angelegt. Faellt :has() aus (sehr alter Browser), steht der Hero auf seinem Sockel: weniger schoen, aber unbeschaedigt. Genau wie in Block 1, 9, 16 und 22. */ #content .entry-content:has(.gtu-hero) { padding-top: 0; } /* Die Textspalte des Heros. Kicker, H1 und Einleitung stehen auf der Rasterkante wie alles andere, duerfen aber nicht mit dem Raster mitwachsen: bei 1140 px Kastenbreite haette die Einleitung Zeilen von gut 150 Zeichen, und das Auge findet den Zeilenanfang nicht mehr zurueck. 870 px ist der Deckel, den der Auftrag nennt, und derselbe, den die Werkstoff-Gattung in Block 17 fuehrt. Er faellt hier weiter aus als die 760 px der Oberflaechen-Gattung, und das passt zum Text: die H1 dieser Seite ist ein Satz aus zwei Haelften ("Pulverbeschichtung ist Handwerk. Wir sind der Betrieb dazu."), und bei 760 px braeche sie an einer Stelle, an der der Punkt schon steht. */ .gtu-hero .gtu-hero__text { max-width: 870px; } /* DAS HERO-BILD IST EIN BAND, KEIN EINGEKLEBTES FOTO. Dieselbe Entscheidung wie in Block 22 und aus demselben Grund: ein Bild, das die Seite traegt, hat keinen Rand. uu7 zeigt die Halle in ihrer ganzen Breite, von den Kragarmregalen links bis zur Kabine rechts; als Kasten mit Radius im 1180er Raster waere es eine Abbildung zum Text, als Band ist es der Raum, um den es geht. `object-position: center 60%` und nicht die Mitte: in der Hoehe stehen ueber der Halle Dachbinder und Leuchten, unten der Hallenboden. Der Schnitt haelt Regale, Kabine und Boden im Bild und nimmt das Dach heraus. DIE HOEHE STEHT NICHT HIER, SONDERN AM ELEMENTOR-REGLER DES BILD-WIDGETS. Das ist die Lehre aus Block 22: dort stand die Hoehe eine Fassung lang in dieser Datei und war wirkungslos, weil die post-CSS des Reglers mit (0,3,1) ueber das (0,2,1) dieser Regel gewinnt. Wer die Hoehe aendern will, aendert sie in Elementor und nicht hier. */ .gtu-hero .gtu-hero-band img { display: block; width: 100%; object-fit: cover; object-position: center 60%; border-radius: 0; } /* --- 28. Der Umriss-Knopf auf dunklem Grund ---------------------------- */ /* Das Theme gibt seinem zweiten Knopf die Primaerfarbe und leitet die Kante daraus ab: .octf-btn-outline { color: var(--makaffo-color-primary); border: 1px solid currentColor; } style.css Auf hellem Grund ist das richtig, und dort steht der Knopf bisher auch ueberall (1629 "Technische Daten"). Der Abschluss dieser Seite ist die erste Stelle der Website, an der er auf Navy steht, und dort sind es #004FEF gegen #0C2148, also **2,54:1**. Gefunden hat es der erste Gate-Lauf, und zwar nicht die Kontrastmessung (die las nur gtu-Waehler), sondern der Abzug. DIE REGEL HAENGT AN `gtu-abschluss` UND NICHT AN `gtp-knopf`. `gtp-knopf` ist geteiltes Vokabular; an ihm haengen sieben gebaute Seiten. Wer ihn anfasst, muss sie alle neu belegen, und das fuer ein Problem, das genau eine Sektion hat. Die Abschluss-Sektion traegt deshalb zwei Klassen: `gtp-abschluss` fuer das Geruest und `gtu-abschluss` fuer diese eine Regel. Der Schwebezustand muss mit, sonst waere er die naechste Falle: das Theme setzt dort `color: var(--makaffo-color-dark)`, und ein dunkler Knopf auf Navy ist unsichtbar statt nur schwach. Ein Fix, der den Ruhezustand heilt und den Schwebezustand kaputt laesst, ist kein Fix. */ .gtu-abschluss .octf-btn-outline { color: #FFFFFF; } .gtu-abschluss .octf-btn-outline:hover, .gtu-abschluss .octf-btn-outline:focus { /* #C6D0E0 auf #0C2148: 10,18:1. Die Kante zieht ueber currentColor mit. */ color: #C6D0E0; } /* --- 29. Der Referenz-Teaser der Ueber-Uns-Gattung --------------------- */ /* Die Kachelreihe unter der Arbeitsweise ist Hausbestand: dasselbe Raster (Block 5), dieselbe Kachel (`.gtp-ref-karte`, weiter oben), dasselbe Template. Der Auftrag zu v2 will sie an EINER Stelle anders: groessere Bilder und ein zurueckhaltender Schwebezustand. DIE REGELN HAENGEN AN `gtu-referenzen` UND NICHT AN `gtp-ref-karte`. Derselbe Grund wie in Block 28: `gtp-ref-*` ist geteiltes Vokabular. An ihm haengen die Startseite, das Referenz-Archiv und der Teaser auf 1629. Wer dort etwas veraendert, muss vier Stellen neu belegen, und das fuer einen Wunsch, der genau eine Sektion betrifft. Die Sektion traegt deshalb eine zweite Klasse, und alles hier steht dahinter. DREI KACHELN WAREN ES SCHON. Der Auftrag nennt "drei statt sechs sichtbar"; der Teaser dieser Seite zeigt seit v1 drei (`[gtp_ref_teaser ids=...]` mit drei Kennungen), und "Alle Referenzen" steht darunter. Die Zusage ist also bereits eingeloest und hier nichts zu tun. Was fehlte, war die GROESSE. WAS ABSICHTLICH NICHT PASSIERT: DER TITEL VERSCHWINDET NICHT. "Titel erscheint" liesse sich woertlich bauen, indem der Titel im Ruhezustand ausgeblendet wird und beim Ueberfahren einblendet. Genau das macht das Parent-Theme, und genau deshalb gibt es im Child ein eigenes Kachel-Template: sein Kopf haelt fest, dass Text DAUERHAFT unter dem Bild stehen soll. Ein Titel, den man nur mit dem Zeiger sieht, ist auf einem Telefon gar nicht zu sehen, und ohne Titel ist eine Kachel ein Bild ohne Auskunft. Was hier beim Ueberfahren ERSCHEINT, ist deshalb die Unterstreichung des Titels; der Titel selbst steht immer da. */ .gtu-referenzen .gtp-ref-bild { /* 4 zu 3 statt 3 zu 2: bei drei Spalten im 1180er Raster waechst die Kachel damit von 249 auf 280 px Bildhoehe, also um ein knappes Achtel. Mehr ginge auch und waere zu viel: bei 1 zu 1 stuende der Titel unter der Falzkante. */ aspect-ratio: 4 / 3; } /* Die Kachel hebt sich beim Ueberfahren. Vier Pixel und ein weicher Schatten, nicht mehr: der Auftrag sagt "dezent", und die Kachel traegt bereits zwei Bewegungen (das Bild zoomt um 4 %, der Pfeil dreht sich). `focus-within` steht daneben, weil der Titel ein Verweis ist: wer mit der Tastatur durch die Reihe geht, soll dieselbe Rueckmeldung bekommen wie wer mit dem Zeiger darueber faehrt. */ .gtu-referenzen .gtp-ref-karte { transition: transform .3s ease, box-shadow .3s ease; } .gtu-referenzen .gtp-ref-karte:hover, .gtu-referenzen .gtp-ref-karte:focus-within { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(12, 33, 72, .14); } /* Der Titel waechst mit dem Bild: 20 statt 18 px. Die feste Hoehe von zwei Zeilen (2,6em) rechnet in em und geht damit von selbst mit. */ .gtu-referenzen .gtp-ref-titel { font-size: 20px; } /* Die Unterstreichung, die beim Ueberfahren erscheint. Sie steht als `text-decoration-color` und nicht als Verlauf im Hintergrund: eine Unterstreichung aus `background-size` bricht bei einem zweizeiligen Titel auseinander, und die Titel dieser Kacheln sind zweizeilig angelegt. #004389 auf #FFFFFF: 9,70:1. */ .gtu-referenzen .gtp-ref-titel a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 3px; transition: text-decoration-color .25s ease, color .25s ease; } .gtu-referenzen .gtp-ref-karte:hover .gtp-ref-titel a, .gtu-referenzen .gtp-ref-titel a:focus-visible { text-decoration-color: #004389; } /* --- 30. Die Referenzen-Seite v2 --------------------------------------- */ /* WARUM DER GANZE ABSCHNITT HIER STEHT UND NICHT IN DEN BAUSTEINEN --------------------------------------------------------------- Die Nachbarordner `widgets/oberflaechen/` und `widgets/ueber-uns/` legen ihren Stil neben ihr Markup, weil beides zusammen in EIN Elementor-Widget wandert. /referenzen/ ist keine Elementor-Seite: es ist das Archiv des Beitragstyps ot_portfolio, gezeichnet von `archive-ot_portfolio.php`. Es gibt hier kein Widget, in das ein `