/* ═══════════════════════════════════════════════════════════════════════════ dedista — v6-square.css · Override-Schicht nach Squares Stil ───────────────────────────────────────────────────────────────────────────── BEWUSSTE TECHNISCHE SCHULD, dokumentiert als solche, nicht als Lösung verkauft: das ist eine Override-Schicht ÜBER v3.css, gewonnen per Ladereihenfolge (diese Datei bindet als LETZTES CSS auf jeder Seite ein), nicht ein Umbau von v3.css selbst. 761 Regeln an einem Abend umzuschreiben und live zu stellen wäre der Weg, auf dem etwas Stilles kaputtgeht — diese Schicht ist dagegen mit einer Zeile im rückholbar. Quelle für JEDEN Wert unten: Web/docs/REFERENZ-SQUARE-2026-08-23.md (gemessen gegen squareup.com, 23.08.2026, kein Wert geschätzt). Wo diese Datei über die Referenz hinaus einen Wert braucht, den die Referenz nicht gemessen hat (z. B. Rahmenfarbe, Rand-Prozente), steht das im Kommentar als "abgeleitet, nicht gemessen" — nie stillschweigend. Strategie: die meisten Bestandsfarben sind in v3.css bereits Custom Properties — ein einziger neuer :root-Block überschreibt sie und färbt damit den grössten Teil der Seite automatisch um. Nur echte rohe Literale (Referenz-Fund: ::selection, .r-avimg.t1–t4) bekommen eigene, gezielte Regeln, weil ein Token-Tausch sie nicht erreicht. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Schriften: Struktur nachgebildet, nicht Squares proprietäre Dateien. Drei Familien statt einer ist das Prinzip (Referenz §2) — die drei konkreten Dateien sind Platzhalter von der Platte, Artur wählt später. ── */ @font-face{ font-family:'Archivo'; src:url('/assets/fonts/Archivo-Variable.woff2') format('woff2'); font-weight:100 900;font-style:normal;font-display:swap; } @font-face{ font-family:'Instrument Serif'; src:url('/assets/fonts/InstrumentSerif-400.woff2') format('woff2'); font-weight:400;font-style:normal;font-display:swap; } @font-face{ font-family:'Instrument Serif'; src:url('/assets/fonts/InstrumentSerif-400-italic.woff2') format('woff2'); font-weight:400;font-style:italic;font-display:swap; } :root{ /* ── Farben (Referenz §1) — vier tragende Farben, ein Akzent. Koralle/Blau-Bestand/Mauve/Wine fallen auf denselben Wert zusammen, statt jede Verlaufs-/Gradient-Definition einzeln umzuschreiben: ein Mehrfarben-Verlauf mit identischen Haltepunkten wird optisch zur Flächenfarbe. Das ist die Stelle, die "Override statt Umbau" ausmacht. ── */ --bg:#ffffff; --surface:#f7f6f5; /* Referenz: .card__image-container, warmes Off-White als Foto-Canvas */ --surface-2:#efeeec; /* abgeleitet, nicht gemessen: dieselbe Familie, einen Schritt dunkler für Hover */ --surface-3:#f7f6f5; --line:#e5e5e5; /* abgeleitet, nicht gemessen — Referenz maass keine Randfarbe für einfache Trennlinien */ --line-soft:rgba(0,0,0,.08); --glass:rgba(255,255,255,.7); --glass-line:rgba(0,0,0,.08); --glass-dark:rgba(0,0,0,.55); --glass-dark-line:rgba(255,255,255,.24); --glass-dark-hover:rgba(0,0,0,.68); --hd-scrolled-bg:rgba(255,255,255,.92); --hd-scrolled-line:rgba(0,0,0,.06); --ft-bg:#000000; /* Fusszeile schwarz, wie Squares dunkle Flächen (11 gemessene Vorkommen) */ --nav-glass:rgba(0,0,0,.06); --nav-glass-line:rgba(0,0,0,.1); --nav-glass-hover:rgba(0,0,0,.08); --t1:#000000; /* Referenz: rgb(0,0,0), 770 Vorkommen — Haupttext */ --t2:#000000; /* Square unterscheidet nicht zwischen Haupt- und "zweiter" Textstufe */ --t3:#707070; /* Referenz: rgb(112,112,112), 101 Vorkommen — gedämpft */ --t4:#999999; /* Referenz: rgb(153,153,153), 13 Vorkommen — noch schwächer */ --blue:#006aff; /* Referenz: rgb(0,106,255), der EINZIGE Akzent */ --blue-soft:#006aff; --mauve:#000000; --coral:#006aff; /* dedistas zweiter Akzent fällt auf den einen Square-Akzent */ --coral-deep:#000000; --wine:#000000; --grad-brand:#000000; /* Mehrfarben-Verlauf → Flächenfarbe: alle Haltepunkte oben identisch */ --grad-tint:rgba(0,0,0,.06); /* NICHT als blosse Farbe — echter Bug, gefunden beim Zustände-Durchklicken 23.08.2026: v3.css:1272 nutzt "background-image:var(--grad-mark)" (nicht die "background"-Kurzform, die eine blosse Farbe verträgt). Eine blosse Hex-Farbe ist dort kein gültiger -Wert und wird von jedem verbrauchenden Selektor stillschweigend verworfen (computed: background-image:none) — betraf sechs Stellen ohne jede Fehlermeldung: a.card:hover/a.k-card:hover .icon-chip, .step .sn, .bk-step.active .bk-step-dot, .bk-success .big, .k-dock__send. Entartender Verlauf (Start=Ende=Blau) bleibt syntaktisch ein , behält also überall dieselbe Fläche, ohne dass jede Verbraucherstelle einzeln geändert werden muss. */ --grad-mark:linear-gradient(#006aff,#006aff); --focus:#006aff; --focus-ink:#ffffff; } /* ── Weissraum (Referenz §3) — GESTUFT 40/80/120, kein clamp()/vw. Das ist der grösste Einzelunterschied laut Referenz; ohne diese zwei Zeilen wäre alles andere ein Farbtausch, kein Square-Layout. ── */ :root{ --sec-y:80px; --sec-y-tight:40px; } @media (min-width:1200px){ :root{ --sec-y:120px; } /* Referenz nennt 40/80/120 als Stufen, keine Bedingung dafür gemessen — Zuordnung zu Breite ist eigene, gekennzeichnete Entscheidung dieser Datei */ } /* Breiten-Umbau 28.08.2026 — System 1 (randlos: Kopfzeile/Hero/Bildflächen). Referenz: Randabstand 22px bis 1640px, 27px ab 1680px, bleibt so bis 2560px (kein weiterer Sprung). dedista-d5 nennt 1640 als unteres Ende des Umbruchfensters, 1680 als exakten Wert für den Inhalts-Deckel (System 2) — hier auf denselben Breakpoint gelegt, da kein exakterer Einzelwert zwischen 1640/1680 für die Kopfzeile genannt wurde. */ @media (min-width:1680px){ :root{ --edge-pad:27px; } } /* Breiten-Umbau 28.08.2026: die alte "--gutter:20px auf .wrap" hier war eine erste, unvollständige Messung (einzelner Breakpoint, 1280px) — von dedista-d5 zurückgenommen, seit die vollständige Zwei-Systeme- Messung da war. Dann flach 60px gesetzt — auch das zurückgenommen (KORREKTUR 28.08.2026 abends): dedista-33 hat bei 375px nachgemessen, 15px war der reale Wert, 60px galt nur 1280-1640px und wurde nie bis 375px runtergeprüft. --gutter ist jetzt gestuft: 15px mobil (v3.css :root, Basiswert), 60px hier ab 1280px. **Der Umschaltpunkt 1280 ist NICHT gemessen, nur angenommen** — gemessen ist ausschliesslich "15 bei 375" und "60 ab 1280"; der Bereich dazwischen ist offen. 1280 gewählt, weil jeder andere gestufte Square-Wert in diesem Umbau dort springt (Schriftgrad, Knopfabstand, Hero-Geometrie). Wird korrigiert, sobald die echte Messung da ist — dann eine Zahl, kein Widerruf wie bei den beiden Versuchen davor. */ @media (min-width:1280px){ :root{ --gutter:60px; } } /* Schritt 4 nachgezogen 28.08.2026 abends — Kaskaden-Kollision gefunden: v3.css:560 (.sec-sub) und v3.css:917 (.prose p,.prose li) wurden schon diese Session auf var(--wrap-read) gestellt, aber v3.css:1235-1236 — ein ÄLTERER, in derselben Datei SPÄTER stehender Block ("Zeilenlängen auf das gemessene Maß", vor-Square-Zeiten, ch-basiert) setzt dieselben Selektoren noch einmal auf --measure/--measure-wide (46ch/52ch) zurück, exakt gleiche Spezifität, aber später in der Datei — hat die eigentliche Änderung also lautlos wieder rückgängig gemacht. Nie live aufgefallen, weil 46-52ch zufällig in eine ähnliche Grössenordnung wie 548px fällt, nicht wild abweicht. Dedista-33 hat aber richtig gemessen: unsere ANDEREN Absätze (ausserhalb von .prose/.sec-sub, z. B. in Karten/Teasern) haben GAR keine Deckelung und laufen bei 1560px Inhaltsbreite fast dreimal so lang wie Squares 548px — das war der eigentliche Fund, nicht die schon gefixten Stellen. Beides jetzt hier konsolidiert: */ p{max-width:var(--wrap-read)} .sec-sub,.br-lead,.statement p,.allin p,.about .prose-block p, .faq-item .fa-body,.prose p,.prose li,.cta-band p{max-width:var(--wrap-read)} /* ═══════════════════════════════════════════════════════════════════════════ Direkte Überschreibungen — Stellen, die kein Token-Tausch erreicht ═══════════════════════════════════════════════════════════════════════════ */ ::selection{background:#006aff;color:#fff} /* Referenz-Fund: vier rohe Hex-Verläufe, kein Token beteiligt (v3.css:390-393) */ .r-avimg.t1{background:#000000} .r-avimg.t2{background:#000000} .r-avimg.t3{background:#006aff} .r-avimg.t4{background:#006aff} /* ═══════════════════════════════════════════════════════════════════════════ Typografie (Referenz §2) — drei Familien, gemessene Grössen/Sperrungen an den Rollen, die dedista strukturell entsprechen. Kein starres H1>H2>H3 bei Square selbst (dieselbe

-Ebene trägt 20–72px je Zweck) — hier trotzdem an dedistas bestehende Selektoren gehängt, weil ein Vertauschen aller Überschriften-Ebenen ein Strukturumbau wäre, keine Stilschicht mehr. ═══════════════════════════════════════════════════════════════════════════ */ body{font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:400} /* .g-h1 — Fund 24.08.2026 (Artur auf /werbetechnik, dedista-d5 nachgemessen): diese Regel war ursprünglich für den GROSSEN Startseiten-Hero gedacht (Referenz: Square Sans Display, 81px/900) — der trägt inzwischen aber .g-hero__title, nicht mehr .g-h1 (siehe Hero-Umbau oben). ".g-h1" bleibt deshalb nur noch für die 13 kompakten Seitenköpfe übrig (geprüft: jedes Vorkommen von class="g-h1" liegt auf einer Seite mit .g-hero--compact), und dort lief diese Regel unbeabsichtigt weiter mit: zwei Schriftfamilien auf einer Seite, im schwersten verfügbaren Gewicht. Familie/Gewicht auf dieselbe Serife/Haltung wie die Abschnittsüberschriften (Instrument Serif, 400) gestellt. Grösse/Laufweite: 28.08.2026 von dedista-33 direkt am kompakten Seitenkopf gemessen (nicht mehr vom .h2-Wert übernommen, siehe unten) — gestuft bei 1280px, keine clamp()-Skalierung: 44px/ -1.32px unter 1280px, 56px/-1.68px ab 1280px (konstant bis 1920px, keine weitere Stufe). Ersetzt v3.css' clamp(34-44px) bzw. clamp(44-64px) bei 960px — der reale Sprung liegt bei 1280px, nicht 960px. */ .g-h1{font-family:'Instrument Serif',Georgia,serif;font-weight:400;color:var(--t1)} .g-hero--compact .g-h1{font-size:44px;letter-spacing:-1.32px} @media (min-width:1280px){ .g-hero--compact .g-h1{font-size:56px;letter-spacing:-1.68px} } /* Farbe jetzt auf .g-h1 selbst UND auf beiden Zeilen-Spans direkt gesetzt, nicht mehr nur auf den Spans allein — sonst genau derselbe Fehler wie bei den neun ".r-pname": eine Farbregel, die nur über Kind-Elemente funktioniert, ist unsichtbar, sobald ein Span fehlt oder sich ändert. ".a" bleibt die gedämpftere erste Zeile, ".b" die kräftigere zweite — dieselbe relative Betonung wie vorher (rgba(255,255,255,.6) vs. #fff), nur auf die helle Palette übertragen (--t3 statt halbtransparentem Weiss, --t1 statt Weiss). */ .g-h1 .a{color:var(--t3)} .g-h1 .b{color:var(--t1)} /* Kompakter Seitenkopf: keine schwarze Fläche mehr. Entscheidung dedista-d5, 24.08.2026, Artur zur Prüfung vorgelegt: "Hero/Markenflächen bleiben dunkel" galt dem Koralle-Blau-Verlauf, der inzwischen weg ist — der grosse Startseiten-Hero bleibt dunkel, weil dort ein randloses FOTO liegt (von Natur aus dunkel), der kompakte Seitenkopf ist aber kein Foto, nur eine reine Fläche, und wird jetzt hell wie der Rest der Seite. Scrim (::before) und Korn (::after) waren für die dunkle Foto-Fläche gebaut und würden die helle Fläche wieder abtönen — auf dieser einen Stelle abgeschaltet, betrifft automatisch alle 15 Unterseiten. */ /* html-Präfix nötig: ".g-hero{background:#000}" (weiter unten in dieser Datei, Sticky-Pin-Abschnitt) hat dieselbe Spezifität wie ein blosses ".g-hero--compact" und steht später in der Datei — würde ohne den Präfix die Fläche wieder auf Schwarz zurückziehen. Gemessen, nicht angenommen: ohne dieses Präfix blieb .g-hero--compact bei rgb(0,0,0). */ html .g-hero--compact{background:var(--surface)} .g-hero--compact::before,.g-hero--compact::after{display:none} /* 28.08.2026: dedista-33 misst den kompakten Seitenkopf byte-genau auf --surface (#f7f6f5, Squares warmes Off-White), nicht auf das reine Seiten-Weiss (--bg). Geprüft: ohne diese Zeile fiel die Fläche auf body{background:var(--bg)} zurück, also #fff — sichtbar falsch neben Square. "background:none" oben war nur ein Zwischenstand, um die Scrim/Korn-Regeln (::before/::after) zu entschärfen, nicht die eigentliche Zielfläche. */ /* Grosse Editorial-Überschriften — Referenz: Exact Block-Rolle, hier Instrument Serif. Zwei gemessene Grössen: Standard-Editorial und die grosse Closing-Headline. */ .statement h2,.sec h2,.h2{font-family:'Instrument Serif',Georgia,serif; font-weight:400;font-size:40px;line-height:45px;letter-spacing:-0.8px} .cta-band h2{font-family:'Instrument Serif',Georgia,serif;font-weight:400; font-size:72px;line-height:72px;letter-spacing:-2.88px} @media (max-width:740px){ .statement h2,.sec h2,.h2{font-size:28px;line-height:32px;letter-spacing:-.4px} .cta-band h2{font-size:40px;line-height:42px;letter-spacing:-1px} } /* Mittlere Überschriften (Plan-Namen-Rolle) — Referenz: Cash Sans, hier Outfit als dritte Familie. */ .card h3,.b-card h3,.v5-explorer__tabs h3,.k-card__title,.faq-item summary{ font-family:'Outfit',sans-serif;font-weight:500; font-size:24px;line-height:28.8px;letter-spacing:-0.24px} .eyebrow,.br-num{font-family:'Outfit',sans-serif;font-weight:500; font-size:20px;line-height:24px;letter-spacing:-0.2px; text-transform:none} /* Referenz zeigt keine Versal-Eyebrows */ /* ═══════════════════════════════════════════════════════════════════════════ Knöpfe (Referenz §4) — blau mit SCHWARZEM Text, nicht weiss. Zwei Pillengrössen, beide voll gerundet. ═══════════════════════════════════════════════════════════════════════════ */ .btn{border-radius:10000px;font-size:18px;font-weight:500;height:41px; padding:0 20px; /* padding-right nicht separat gemessen, symmetrisch zu padding-left angenommen — gekennzeichnet, nicht stillschweigend */ transition:transform .15s cubic-bezier(0,0,.2,1)} .btn--primary{background:#006aff;color:#000} /* 28.08.2026 (REFERENZ-SQUARE-MOTION.md §4): Square skaliert beim Hover ein Pseudo-Element hinter dem Text um 5% (150ms, dieselbe Kurve, die .btn oben schon trägt), keine Farbänderung, kein Lift. Unser .btn ist EIN Element ohne separate Pill-Ebene — echte 1:1-Nachbildung bräuchte eine neue ::before-Struktur auf allen Knopf-Varianten (grösserer Umbau, nicht nur ein Wert). Stattdessen die einfachere, risikoärmere Annäherung: die gemessenen Werte (5%, 150ms, Kurve, keine Farbänderung) direkt auf den ganzen Knopf — ersetzt das alte translateY(-2px), das weder gemessen war noch Squares Bewegungsrichtung traf. Nur .btn--primary, weil nur der Hero-Hauptknopf gemessen wurde (§4: "nur ... geprüft", Rest offen). */ .btn--primary:hover{background:#006aff;color:#000;transform:scale(1.05)} .btn--glass,.btn--ghost{background:transparent;color:#000;border-color:rgba(0,0,0,.2)} .btn--glass:hover,.btn--ghost:hover{background:rgba(0,0,0,.06);color:#000} .btn--grad{background:#006aff;background-image:none;color:#000;text-shadow:none;box-shadow:none} /* Zweite, kleinere Pille — Referenz: Footer-Button-Typ, radius 50px statt voll gerundet, Höhe 44px. dedistas .btn--sm bekommt diese Rolle. */ .btn--sm{border-radius:50px;height:44px;font-size:16px;padding:0 18px} /* Auf dem dunklen (grossen, foto-basierten) Hero bleibt Weiss lesbar nötig für Sekundär-Aktionen ohne Fläche — Referenz misst keinen Hover-Zustand (offene Lücke, siehe Doku), dieser Zustand ist deshalb unverändert von dedistas Bestand übernommen. NICHT für .g-hero--compact (24.08.2026, seit der ist der kompakte Seitenkopf hell): ohne die Ausnahme hier bliebe "Alle Bereiche" & Co. weiss auf jetzt hellem Grund — auf allen 15 Unterseiten dieselbe Farbe wie überall sonst (schwarz, dann blau auf Hover, wie das allgemeine .btn--glass). */ .g-hero:not(.g-hero--compact) .btn--glass{color:#fff;border-color:rgba(255,255,255,.3)} .g-hero:not(.g-hero--compact) .btn--glass:hover{color:#fff;background:rgba(255,255,255,.12)} /* v3.css:1307-1310 legt zusätzlich Fläche+Rand jedes .g-hero .btn--glass auf --glass-dark/--glass-dark-line (dunkles Glas) — ebenfalls unscoped, ebenfalls für den kompakten Seitenkopf jetzt falsch (gemessen: Rand blieb rgba(255,255,255,.24), also fast weiss, auf dem jetzt hellen Grund kaum sichtbar). Auf dieselben Werte gestellt, die das allgemeine, helle .btn--glass schon nutzt (v6-square.css oben) — kein neuer Wert. */ .g-hero--compact .btn--glass{background:none;border-color:rgba(0,0,0,.2)} .g-hero--compact .btn--glass:hover{background:rgba(0,0,0,.06)} /* Kontrast-Audit 24.08.2026: derselbe Bug wie oben beim Hero, nur noch nicht nachgezogen — v3.css:1307 setzt für ".cta-band .btn--glass" dieselbe dunkle Fläche (--glass-dark) wie beim Hero, aber keine Zeile setzt dort die Textfarbe auf Weiss. Der Knopf erbt also #000 vom allgemeinen .btn--glass oben (Zeile 202) — Schwarz auf Schwarz, auf allen zehn Seiten mit CTA-Band am Fussende. Geprüft: nur diese zwei Regel-Ebenen betreffen die Farbe hier (v3.css Basis + dieses File), keine dritte wie beim Hero. */ .cta-band .btn--glass{color:#fff;border-color:rgba(255,255,255,.3)} .cta-band .btn--glass:hover{color:#fff;background:rgba(255,255,255,.12)} /* Gefunden 24.08.2026 beim erneuten Audit NACH dem Hero-Fix, nicht vorher: kontakt.html hat statt .g-h1/.g-eyebrow/.g-sub eine eigene, bespoke Begrüssung (".k-duo", "Hallo." / "Wie können wir helfen?"), fest auf Weiss/halbtransparentes Weiss verdrahtet (v3.css:886-887) — auf dem FRÜHEREN schwarzen kompakten Hero korrekt, seit der Fläche jetzt hell ist genauso unsichtbar wie .g-h1 es war. Nur auf kontakt.html im Einsatz (geprüft), keine Seiten-Kollision möglich. Dieselbe Übersetzung wie bei .g-h1 .a/.b: kräftige Zeile → --t1, gedämpfte Zeile → --t3. */ .k-duo__strong{color:var(--t1)} .k-duo__soft{color:var(--t3)} /* .g-eyebrow/.g-sub waren fest auf Weiss verdrahtet (v3.css:1247, für den dunklen Hero gedacht) — auf den jetzt hellen kompakten Seitenköpfen dieselbe Unsichtbarkeit wie bei .g-h1 oben. */ .g-hero--compact .g-eyebrow,.g-hero--compact .g-sub{color:var(--t3)} /* ═══════════════════════════════════════════════════════════════════════════ Formularfelder (Referenz §6) — kein sichtbarer Rand, Abgrenzung über Fläche ═══════════════════════════════════════════════════════════════════════════ */ .input,.textarea,.field input,.field textarea,.bk-field input,.bk-field textarea, .lp-form input,.lp-form textarea{ border:0;border-radius:10px;background:var(--surface); height:45px;padding:12px 16px;font-size:14px} .textarea,.field textarea,.bk-field textarea,.lp-form textarea{height:auto;min-height:96px} /* ═══════════════════════════════════════════════════════════════════════════ Kopfzeile (Referenz §6) — 72px, transparent, statisch (nicht sticky), liegt direkt über dem Hero-Bildinhalt statt über einer eigenen Leiste. ═══════════════════════════════════════════════════════════════════════════ */ /* KORREKTUR 28.08.2026 (dedista-d5): der Kommentar hier unten war falsch und stammt aus einem Messfehler. "Kopfzeile IMMER deckend weiss, auch über dem Hero" wurde aus Arturs allererstem Referenz-Screenshot abgeleitet — der zeigte die Kopfzeile deckend, weil darin zufällig das Mega-Panel offen war (ein Sonderzustand), nicht weil Square generell so verfährt. Tatsächlich: Kopfzeile transparent über dem (einzigen echten, dunklen Foto-)Hero, weisse Schrift, deckend nur beim Scrollen oder bei geöffnetem Panel — auf allen anderen Seiten (heller kompakter Seitenkopf oder gar kein Hero) bleibt sie deckend, IMMER. Das war zugleich der ursprüngliche Weiss-auf-Weiss-Fund auf /impressum und /datenschutz, der dadurch nicht zurückkommt: diese Seiten haben kein ".g-hero:not(.g-hero--compact))", fallen also nie unter die Transparent-Ausnahme unten. */ .hd[data-scrolled="true"], .hd:has(.hd__menu[open]), .hd:has(.hd__nav [aria-expanded="true"]), body:not(:has(.g-hero:not(.g-hero--compact))) .hd{ background:#fff;box-shadow:none; -webkit-backdrop-filter:none;backdrop-filter:none} .hd__inner{min-height:72px;gap:8px} /* Dunkle Schrift (v3.css' eigene Grundregel, color:var(--t1)/var(--t2), dank Token-Kollabierung oben schon von selbst schwarz) gilt überall ausser genau in der einen Transparent-Ausnahme oben — dort soll v3.css' eigene, unveränderte #fff-Regel (Zeile 1314/1317-1319 dort, seit dem alten "transparent über dunklem Hero"-Header nie angefasst) wieder durchgreifen. Bisher überschrieb diese Regel hier sie unbedingt; jetzt nur noch ausserhalb der Ausnahme, mit derselben Selektor-Form + der :has()-Bedingung, damit die Spezifität sicher gewinnt. */ .hd[data-scrolled="true"] .hd__brand, .hd:has(.hd__menu[open]) .hd__brand, .hd:has(.hd__nav [aria-expanded="true"]) .hd__brand, body:not(:has(.g-hero:not(.g-hero--compact))) .hd .hd__brand, .hd[data-scrolled="true"] .hd__btn, .hd:has(.hd__menu[open]) .hd__btn, .hd:has(.hd__nav [aria-expanded="true"]) .hd__btn, body:not(:has(.g-hero:not(.g-hero--compact))) .hd .hd__btn, .hd[data-scrolled="true"] .hd__tel, .hd:has(.hd__menu[open]) .hd__tel, .hd:has(.hd__nav [aria-expanded="true"]) .hd__tel, body:not(:has(.g-hero:not(.g-hero--compact))) .hd .hd__tel{color:var(--t1)} .hd[data-scrolled="true"] .hd__nav a, .hd:has(.hd__menu[open]) .hd__nav a, .hd:has(.hd__nav [aria-expanded="true"]) .hd__nav a, body:not(:has(.g-hero:not(.g-hero--compact))) .hd .hd__nav a{color:var(--t3)} .hd[data-scrolled="true"] .hd__nav a.is-active, .hd:has(.hd__menu[open]) .hd__nav a.is-active, .hd:has(.hd__nav [aria-expanded="true"]) .hd__nav a.is-active, body:not(:has(.g-hero:not(.g-hero--compact))) .hd .hd__nav a.is-active, .hd[data-scrolled="true"] .hd__nav a[aria-current="page"], .hd:has(.hd__menu[open]) .hd__nav a[aria-current="page"], .hd:has(.hd__nav [aria-expanded="true"]) .hd__nav a[aria-current="page"], body:not(:has(.g-hero:not(.g-hero--compact))) .hd .hd__nav a[aria-current="page"]{color:var(--t1)} /* Logo + Nav dicht zusammen links, statt wie im Bestand durch margin-right:auto an den Nav-Anfang verschoben — die rechte Gruppe (Anmelden/Telefon/CTA) übernimmt den Auto-Abstand stattdessen. */ .hd__brand{margin-right:0;color:var(--t1)} .hd__navend{margin-left:auto} /* Navigation: reiner Text, kein Hintergrund/Rand/Radius/Glas. Aktiver Eintrag dunkel, übrige grau — Square miss lt. Screenshot keine eigene Pille pro Link. */ .hd__nav, .hd:not([data-scrolled="true"]) .hd__nav{background:none;border:0; -webkit-backdrop-filter:none;backdrop-filter:none} .hd__nav{padding:0;gap:10px} .hd__nav a,.hd__navlink{font-size:18px;font-weight:500;padding:0; border-radius:0;background:none;color:var(--t3)} /* Kaskaden-Kollision (28.08.2026, beim Motion-Umbau gefunden): mein Fix an mega-menu.css ".hd__navlink{transition:...}" lief ins Leere — v3.css:266 (".hd__nav a", INNERHALB @media(min-width:960px), ein Typ- + ein Klassenselektor = höhere Spezifität als die blosse Klasse ".hd__navlink") gewinnt bei jeder Desktop-Breite, unabhängig von der Ladereihenfolge. Vierter Fund dieser Art heute. Hier mit derselben Selektorform (Typ+Klasse) erneut gesetzt, damit die Spezifität sicher gewinnt. */ .hd__nav a,.hd__navlink{transition:color .1s linear .275s} .hd__nav a:hover,.hd__navlink:hover{background:none;color:var(--t1)} .hd__nav a.is-active,.hd__nav a[aria-current="page"]{ background:none;color:var(--t1);font-weight:500} /* Gefunden 23.08.2026 (dedista-d5, getComputedStyle auf dem geöffneten Mega-Auslöser): v3.css:1300 setzt ".hd:not([data-scrolled=\"true\"]) .hd__nav a:hover{background:rgba(255,255,255,.12)}" — eine Glasfläche aus der alten "transparent über dunklem Hero"-Kopfzeile, vier Klassen- äquivalente + ein Typ, höher als die Zeile direkt oberhalb hier (nur eine Klasse+Typ) und deshalb bisher lautlos auf JEDEM Nav-Link-Hover durchgeschlagen, nicht nur bei den Mega-Auslösern — seit dem Umstieg auf die immer deckend weisse Kopfzeile ein Widerspruch zu "kein Pill-Look". Fix mit derselben Selektor-Form, damit die Spezifität mindestens gleichzieht (v6-square.css lädt nach v3.css, ein Gleichstand gewinnt hier). */ .hd:not([data-scrolled="true"]) .hd__nav a:hover, .hd:not([data-scrolled="true"]) .hd__navlink:hover{background:none} /* Rechte Seite: Textlink + blankes Icon statt Glas-Knopf. Erstgespräch bleibt gefüllte Pille — Entscheidung dedista-d5 23.08.2026: Terminbuchung ist das Seitenziel (Persona-Test), das nicht zur grauen Textzeile machen. Stattdessen weicht "Anmelden" unterhalb 1100px (Bestandskunden-Login, nachrangig gegenüber Telefon/Erstgespräch) — wandert ins Leistungen- Mega-Panel (siehe dort), bleibt aber oberhalb 1100px zusätzlich hier sichtbar, keine bedingte Markup-Duplizierung nötig. */ .hd__navend a{color:var(--t3)} .hd__navend a:hover{color:var(--t1)} @media (max-width:1099px){ .hd__navend{display:none} } .hd__tel{-webkit-backdrop-filter:none;backdrop-filter:none; color:var(--t1);margin-left:6px} .hd__tel, .hd:not([data-scrolled="true"]) .hd__tel{background:none;border:0} .hd__tel:hover, .hd:not([data-scrolled="true"]) .hd__tel:hover{background:none;opacity:.65} .hd__inner .hd__cta{margin-left:8px} /* ═══════════════════════════════════════════════════════════════════════════ Karten (Referenz §6) — keine Karte mit Schatten UND Rand gleichzeitig; die identifizierte Fläche ist eckig, ohne Schatten. Vorsicht bewusst übernommen: das ist eine Kartenart auf der Startseite, keine Aussage über alle Varianten (Referenz-Hinweis). ═══════════════════════════════════════════════════════════════════════════ */ .card,.b-card,.k-card,.br-card{border-radius:0;box-shadow:none;border:0;background:var(--surface)} a.card:hover,a.k-card:hover{box-shadow:none;background:var(--surface-2);border:0} /* ═══════════════════════════════════════════════════════════════════════════ Sektion-Farbrolle (Referenz §7b) — Square hat genau zwei Rollen pro Abschnitt: --primary (dunkel, weisser Text) für den Hero, --secondary (hell, schwarzer Text) für alles andere. dedista hat denselben Gedanken bereits als data-color-mode in SPEC-WEBSITE-V5.md — hier nur am Hero sichtbar gemacht, weil der Marken-Verlauf durch die Token-Kollabierung oben zu einer schwarzen Fläche wird und damit automatisch Squares --primary-Rolle trifft (dunkler Hero, weisser Text bleibt unverändert aus dem Bestand). Kein Zusatz-Code nötig, nur diese Anmerkung. ── */ .g-hero *{ } /* absichtlich leer — Hero-Texte sind im Bestand bereits fest auf Weiss verdrahtet, siehe v3.css; das bleibt richtig, jetzt nur vor schwarz statt Verlauf. */ /* Fusszeile (.ft) — hier stimmt die Analyse oben NICHT: anders als der Hero verdrahtet .ft seinen Text nicht fest, sondern über --t1/--t3/--t4 (siehe v3.css .ft__brand/.ft__col/.ft h4), und --ft-bg bleibt bewusst schwarz (Referenz: Squares Fusszeile ist ebenfalls schwarz). Die Token-Kollabierung oben macht --t1..--t4 aber zu Schwarztönen fürs helle Seitenlayout — in der Fusszeile also schwarze Schrift auf schwarzem Grund. Gefunden per getComputedStyle auf /impressum am 23.08.2026, nicht nur vermutet. Fix: innerhalb von .ft dieselben vier Werte, die v3.css global als Ausgangslage hatte (Zeile 45-48 dort), lokal wiederherstellen. */ .ft{ --t1:#ffffff; --t2:#e2e2e2; --t3:#c4c4c4; --t4:#8a8a8a; } /* ═══════════════════════════════════════════════════════════════════════════ Animation (Referenz §5) — Squares Streuung statt dedistas einer Kurve. Nur an den Stellen angewandt, wo dedista ohnehin schon eine Transition hat; keine neuen Bewegungen erfunden. Die unvollständig gemessene "back/bounce"-Kurve (cubic-bezier(0.34,…) aus der Referenz wird bewusst NICHT verwendet — der Wert ist in der Quelle selbst als abgeschnitten markiert, kein Rätselwert ersetzt ihn hier. ── */ :root{ --ease-out:ease-out; /* Referenz führt "ease-out" als eigene, benannte Kurve, nicht nur cubic-bezier */ --t-fast:.15s; --t-base:.25s; --t-slow:.4s; /* aus dem gemessenen Bereich 150/250/400ms, drei von zwölf gemessenen Dauern als Vertretung */ } /* ═══════════════════════════════════════════════════════════════════════════ Hero — Umbau 23.08.2026 (dedista-d5, nach Arturs Screenshots + Referenz §2/§7a/§9.1). Randloses Medium, Serifen-Überschrift wortweise zerlegt, zwei Pillen, Logo-Streifen; Sticky-Pin-Übergang zu Abschnitt 2. ═══════════════════════════════════════════════════════════════════════════ */ /* Sticky-Pin (Referenz §9.1, 7 Scrollpositionen gemessen: 138,66px≈139px Pin-Distanz, danach normales Scrollen, KEIN Schrumpfen — dedista-d5s ursprüngliche Vermutung eines Scale-Effekts wurde damit widerlegt). .hero-outer trägt die Zusatzhöhe als eigenes Element (.hero-outer__spacer), NICHT als padding-bottom — gemessen (window.scrollTo + getBoundingClientRect, nicht vermutet): padding-bottom auf dem Sticky-Elternelement wird in dieser Umgebung nicht in den Sticky-Spielraum eingerechnet, ein echtes Element mit height dagegen zuverlässig (Beleg: dieselbe Konstruktion mit height:663px statt padding-bottom:139px hielt exakt, das Original nicht). .g-hero pinnt sich selbst. top:72px = die in dieser Session selbst gemessene Kopfzeilenhöhe. Die alte margin-top:-76px/padding-top:76px- Paarung aus v3.css war für den FRÜHEREN transparenten Header kalibriert; mit dem jetzt immer deckenden Header lag sie 4px daneben (gemessen: .g-hero begann bei y=-4 statt bei y=72, weil der Header inzwischen 72px statt der alten 76px hoch ist) — aufgehoben statt weiter mitgeschleppt, nicht Teil der "geprüften Infrastruktur", die erhalten bleiben sollte (die war für einen anderen Header gebaut). */ .hero-outer{position:relative} .hero-outer__spacer{height:139px} /* NUR der Startseiten-Hero pinnt — Fund 23.08.2026 beim Seitenrundgang: ohne ":not(.g-hero--compact)" lief diese Regel auch auf den 15 Unterseiten mit, deren .g-hero--compact keinen .hero-outer/Spacer-Wrapper hat. Gemessen auf /kontakt: die kompakte Kopfzeile blieb bei top:72 stehen bis mindestens 800px Scroll (Elternelement
, praktisch unbegrenzter Spielraum) — sie hätte nie losgelassen. .g-hero--compact bekommt stattdessen wieder sein normales position:relative aus v3.css, keine eigene Sticky-Regel. */ /* KORREKTUR 28.08.2026: "top:72px" ging von einem IMMER deckenden Header aus (siehe Korrektur weiter oben) und reservierte deshalb 72px Platz, bevor der Hero beginnt — deckte sich zufällig mit der alten Begründung "Header ist jetzt 72px, nicht mehr 76px", war aber derselbe Fehler in neuer Form. Mit dem jetzt wieder transparenten Header (Kopfzeile-Fix oben) läuft der Hero korrekt bis zur Fensteroberkante, "top:0" statt "top:72px" — die Kopfzeile schwebt dank ihres eigenen z-index:100 davor, verdrängt den Hero nicht mehr. Pin-Distanz (139px, .hero-outer__spacer) live nachgemessen nach dieser Änderung, nicht nur angenommen — siehe Übergabe. */ .g-hero:not(.g-hero--compact){margin-top:-72px;padding-top:0;position:sticky;top:0;border-radius:0} /* Breiten-Umbau 28.08.2026 — HERGELEITET, NICHT GEMESSEN: Square- Unterseiten sind bislang nicht vermessen (nur die Startseite), Artur hat sich aber genau über die Unterseiten-Hero-Breite beschwert. Einschätzung (dedista-d5 bestätigt sie als Zwischenstand, nicht als Messung): der kompakte Seitenkopf ist seit dem 24.08.2026-Fix keine Bildfläche mehr — helle Fläche, nur Überschriftentext — und gehört damit eher zu System 2 (Inhalt, `.g-hero__in`s Standardregel oben in v3.css bleibt unverändert). Nur der grosse Foto-Hero wechselt auf System 1 (randlos). Bewusst an EINER Stelle, in EINER Regel, damit ein Widerruf (falls `dedista-33`s Unterseiten-Messung etwas anderes zeigt) eine Zeile ist, kein Rückbau. */ .g-hero:not(.g-hero--compact) .g-hero__in{max-width:none;margin-inline:0;padding-inline:var(--edge-pad)} /* KORREKTUR 28.08.2026 — der Kommentar hier war von einer Annahme, die dedista-33s echte Square-Messung widerlegt hat: der kompakte Seitenkopf läuft NICHT hinter die Kopfzeile (anders als der grosse Foto-Hero). Gemessen an drei Square-Unterseiten (375/1280/1920px, identisch): Kopfzeile 211px hoch (nicht übertragbar — vermutlich eigene Unternav/ Hinweisband, die wir nicht haben), Hero-Oberkante bei y=251, macht eine FESTE LÜCKE von 40px zwischen Kopfzeilen-Ende und Hero-Anfang. Der Hero sitzt bewusst UNTER der Nav-Leiste, nicht dahinter — deshalb bleibt position:relative (kein Sticky-Pin-Trick wie beim grossen Hero nötig). Übertragen wird nur die 40px-Lücke, nicht die absolute y-Position. Innen-Padding der Hero-Fläche selbst: 0 oben, 0 unten (die sichtbaren Abstände zur Überschrift/nach der Unterzeile kommen jetzt aus .g-hero__gap/.g-eyebrow/.g-sub, nicht mehr aus Padding auf der Fläche selbst) — damit erledigt sich auch, ob die Kopfzeile hier transparent werden sollte: sie liegt bei Square NICHT über dem Hero, sondern über dem normalen (ebenfalls hellen) Seitenhintergrund davor. Unsere Kopfzeile ist dort bereits deckend über demselben hellen Hintergrund — visuell dasselbe Ergebnis, nur über einen anderen Mechanismus. Die Kopfzeilen-Bedingung bleibt deshalb unverändert (siehe weiter oben, body:not(:has(.g-hero:not(.g-hero--compact)))) — geprüft und bewusst so belassen, nicht vergessen. */ .g-hero--compact{margin-top:40px;padding-top:0;padding-bottom:0;position:relative;border-radius:0} /* Block-Abstände (dieselbe Messung): oben schmal (<1280, einheitlich 30px zwischen JEDEM Block) vs. breit (ab 1280, zwei einzeln gemessene Werte: 51px Oberkante→Überschriftenblock, 60px Überschrift→Knopfzeile). Unsere 13 kompakten Seiten haben keine Knopfzeile im Hero (nur Eyebrow+ Überschrift+Unterzeile) — der 60px-Wert (Überschrift→Knopfzeile) hat deshalb keine Entsprechung bei uns, NICHT auf Überschrift→Unterzeile übertragen (andere Bausteinart, kein gemessener Wert dafür). Bei schmal gilt die 30px-Pauschale dagegen ausdrücklich für JEDEN Block-Abstand, deckt also auch Überschrift→Unterzeile mit ab. .g-hero__gap übernimmt die Oberkante→Eyebrow-Distanz komplett (Eyebrow selbst padding-top:0), damit nicht zwei Werte (Gap-Höhe + eigenes Padding) sich stillschweigend addieren. Text/Bild nebeneinander ab 1280 (Square) NICHT gebaut — keine der 13 Seiten hat aktuell ein Bild im kompakten Hero, ein Zwei-Spalten-Layout ohne echten Inhalt dafür wäre erfunden, nicht umgesetzt. */ .g-hero--compact .g-hero__gap{height:30px} .g-hero--compact .g-eyebrow{padding-top:0} .g-hero--compact .g-sub{padding-top:30px} @media (min-width:1280px){ .g-hero--compact .g-hero__gap{height:51px} .g-hero--compact .g-sub{padding-top:18px} /* unverändert — kein neuer Wert für Überschrift→Unterzeile breit, nur der button-spezifische 60px-Wert war gemessen */ } /* Breiten-Umbau 28.08.2026, Schritt 5 — Foto-Bänder randlos, Regelfall statt ≥1600px-Sonderfall. War vorher nur für .statement/.cta-band da (v3.css, hinter ≥1600px), .v4-single hatte dieselbe Lücke nie geschlossen bekommen (gleiche Familie, gleicher Fund 24.08.2026 bei den 49 Bildflächen-Fehlalarmen). Innerer Textblock bekommt dieselbe Inhalts-Spalte wie jeder normale Abschnitt (`.wrap`s eigene Formel wiederverwendet: max-width:var(--wrap);margin-inline:auto; padding-inline:var(--gutter)) — kein separates --rail mehr nötig, die Textkante fällt jetzt einfach mit der Inhaltsspalte jeder anderen Sektion zusammen, statt einer eigenen Formel zu folgen. */ .statement,.cta-band,.v4-single{max-width:none;margin-inline:0;border-radius:0} .statement__in,.cta-band__in,.v4-single__in{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)} /* .g-hero/.g-hero--compact-Hintergrund: die geerbte v3.css-Regel malt eine zweite, LEBENDE Fassung der Koralle/Blau-Fläche (fünf radiale Verläufe mit rohen rgba-Werten, siehe v3.css:1215-1222) — die --grad-brand-Kollabierung oben (jetzt #000000) betrifft nur die letzte Verlaufsebene, die vier färbigen Ebenen davor liegen als eigene background-image-Schicht weiter drüber. Gemessen auf /kontakt: getComputedStyle zeigte die vollen rgba(16,98,152,…)/rgba(242,160,120,…)-Verläufe im Bild, nicht nur den schwarzen Grund. Betrifft alle 15 Unterseiten (der Startseiten-Hero ist durch .g-hero__media bereits verdeckt, hier trotzdem mitgefixt, schadet nicht). Einfache Flächenfarbe statt Verlaufskette — kein Wert erfunden, Schwarz ist bereits die entschiedene Fläche für alle dunklen Flächen. */ .g-hero{background:#000} /* .cta-band trägt dieselben drei rohen Koralle/Blau/Wein-Verläufe (v3.css:690-696), unabhängig von .g-hero — separat gefunden, separat gefixt. Radius auf 0 wie überall sonst (Karten/Hero), Square kennt keine schwebende, gerundete Abschlussfläche. */ .cta-band{background:#000;border-radius:0} /* Medium: randlos, volle Fläche, hinter dem Inhalt. Noch kein Foto/Video für diesen Hero vorhanden (siehe Rückmeldung an dedista-d5) — Platzhalter nach der v5-Konvention (.v5-media__ph aus v5.css), damit Layout und Sticky-Pin schon jetzt echt test- und messbar sind, ohne erfundenes Bildmaterial. */ .g-hero__media{position:absolute;inset:0;z-index:0;overflow:hidden;background:#000} .g-hero__media img,.g-hero__media video{width:100%;height:100%;object-fit:cover} /* KORREKTUR 28.08.2026 (Neu-Vermessung nach dem Hero-Höhen-Umbau): die 53%-Herleitung unten war für die ALTE Geometrie (34%-Position, Hero 523-1010px hoch) — die Überschrift liegt jetzt bei 19% eines 100svh/ 1260px-Hero, also über einem völlig anderen Bildbereich (dunklerer oberer Bildteil, mit abgeschaltetem Scrim per Screenshot gegengeprüft: die Zone ist bereits ohne jede Abdunklung sichtbar dunkel). Neu gemessen (Canvas-Pixelsampling der echten , cover-fit-Crop pro Breite nachgebildet, Ø-Luminanz pro Überschriftzeile, Ziel 4,5:1 gegen Weiss): nötiger Wert bei 375px 5,24 %, 768px 6,85 % (schlechtester Fall), 1280px 6,29 %, 1920px 5,41 % — jeweils Zeile 1 ("Weniger"), Zeile 2 ("Handarbeit") lag an allen vier Breiten bereits bei 0 % im grünen Bereich (naturgemäss dunklerer Bildbereich). **10%** gewählt: schlägt den schlechtesten Fall (768px) mit echter Marge (4,767:1 statt 4,5:1, geprüft), lässt aber deutlich mehr vom Foto sichtbar als die alten 53% — genau der Gewinn, den Artur an der zu dunklen Hero-Fläche bedauert hatte. Bei 0% fällt derselbe schlechteste Fall auf 3,982:1 durch, ein Scrim bleibt also nötig, nur viel weniger als vorher. */ .g-hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none; background:rgba(0,0,0,.10)} /* Hero-Höhe 28.08.2026 (dedista-33s Square-Messung, Startseiten-Hero): 100svh mobil (folgt der Fensterhöhe 1:1, kein fester Wert), 1260px FEST ab 1280px — nicht vh-basiert, kein clamp(). Vorher: kein eigener Wert unter 1600px (Höhe kam nur aus dem Inhalt, daher die 523px, die Artur zu klein fand), darüber min-height:min(90svh,1010px) — beides ersetzt. Textblock beginnt bei 19% der Hero-Höhe (NICHT zentriert, oberes Drittel) — bei fester 1260px-Höhe ein fixer Wert (1260×0,19=239,4px), bei 100svh-Höhe folgerichtig 19svh, da Prozent-Padding in CSS immer gegen die Breite rechnet, nicht die Höhe — svh umgeht das. */ .g-hero:not(.g-hero--compact){height:100svh} @media (min-width:1280px){ .g-hero:not(.g-hero--compact){height:1260px} } .g-hero__in--center{position:relative;z-index:2;display:flex;flex-direction:column; align-items:center;text-align:center;padding-top:19svh} @media (min-width:1280px){ .g-hero__in--center{padding-top:239.4px} } /* Überschrift: Grösse/Zeilenhöhe aus der Referenz-Messung übernommen (§2, Hero-H1 81px/81px) — dort für Square Sans Display gemessen, hier auf Instrument Serif übertragen (Arturs Screenshot-Vorgabe für diesen Hero, siehe REFERENZ §9.1 zu abweichenden Hero-Varianten). Gewicht 400, weil nur dieser Schnitt tatsächlich geladen wird (@font-face oben) — 900 wäre hier nur unechtes Browser-Fettmachen einer Schrift ohne Bold-Schnitt. Laufweite 28.08.2026 auf dedista-33s echten Wert gestellt (−2,916px ab 1280px, −2,24px bei 375px — vorher −1px/−.5px, geschätzt). Breakpoint von 740px auf 1280px gestellt, damit er mit Hero-Höhe/Inhaltssystem auf demselben Sprung liegt statt einem eigenen. */ .g-hero__title{margin:0;font-family:'Instrument Serif',Georgia,serif; font-weight:400;font-size:56px;line-height:56px;letter-spacing:-2.24px;color:#fff} .g-hero__title .line{overflow:hidden} .g-hero__title .word{display:block} @media (min-width:1280px){ .g-hero__title{font-size:81px;line-height:81px;letter-spacing:-2.916px} } /* Zwei Pillen — bleiben Pillen (Arturs "kein Pill-Look" galt der Kopfzeile, nicht dem Hero, siehe dedista-d5 23.08.2026). Grösse/Radius vom bestehenden .btn (Referenz §4) übernommen, nur die Farbrollen sind neu: erste hell mit dunklem Text, zweite blau mit weissem — Letzteres bewusst abweichend von Squares eigener Messung (dort schwarz auf Blau, Referenz §4), weil Arturs Screenshot für DIESEN Hero explizit weissen Text zeigt. */ .g-heropills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:28px} @media (min-width:1280px){ .g-heropills{gap:20px} /* 28.08.2026: dedista-33 misst 20px ab 1280, 10px bei 375 (Bestand) — nur die grosse Stufe war offen */ } .g-heropills .btn{height:44px} /* 28.08.2026: dedista-33 misst 44px bei jeder Breite, nur für die Hero-Pillen — das allgemeine .btn bleibt 41px */ .btn--hero-light{background:#fff;color:var(--t1)} .btn--hero-light:hover{background:#fff;opacity:.88} .btn--hero-blue{background:var(--blue);color:#fff} .btn--hero-blue:hover{background:var(--blue);opacity:.88} /* Logo-Streifen: noch keine freigegebenen Kunden-/Partnerlogos (Einwilligung pro Kunde offen, siehe docs/snippets/logowall.html) — Struktur steht, Inhalt fehlt. Vorgabe dedista-d5, 23.08.2026: ein leerer Streifen darf nicht live gehen ("sieht nach Fehler aus, nicht nach 'kommt noch'"), UND er soll erscheinen, sobald Logos eintragen werden, ohne dass jemand CSS anfasst. ERSTER VERSUCH war ":empty" — verworfen, per Test gefunden: :empty ist whitespace-empfindlich (ein Zeilenumbruch/Leerzeichen zwischen den Tags zählt als Inhalt, nur Kommentare zählen nicht), ein pretty-printtes Markup mit Einzug hätte die Regel also lautlos wieder ausgehebelt. STATTDESSEN: Default versteckt, erscheint nur, wenn der erwartete Inhalt (.g-hero__logos-track) tatsächlich drinsteht — geprüft per :has(), robust gegen Whitespace/Einzug, kein neues Feature in diesem Codebase (v3.css nutzt :has() bereits für body:has(.hd__menu[open])). Erwartetes Markup, wenn Logos vorliegen (Klassen bereits vorbereitet):
  • Firmenname
Die Lauf-Animation ("durchlaufend") ist hier bewusst noch nicht gebaut — Tempo/Wiederholung liesse sich ohne echte Logos (Anzahl, Breite) nur erraten, das wäre wieder ein erfundener Wert. Nachziehen, sobald Artur die Einwilligungen hat. */ .g-hero__logos{display:none;position:relative;z-index:2} .g-hero__logos:has(.g-hero__logos-track){display:block} .g-hero__logos-track{display:flex;align-items:center;flex-wrap:wrap; justify-content:center;gap:clamp(32px,5vw,56px);list-style:none; margin:0;padding:24px 0} .g-hero__logos-track li{flex:0 0 auto;display:flex;align-items:center;height:28px} .g-hero__logos-track img{height:100%;width:auto;filter:brightness(0) invert(1);opacity:.85} /* ═══════════════════════════════════════════════════════════════════════════ Abschnitt 2 — Branchen-Mosaik (Referenz §9: 18 unabhängige Fotos, 17 klein + 1 gross, von Anfang an im DOM, keine Grössenänderung). Reine Bildfläche, bewusst ohne Überschrift/Bildunterschrift (Auflage dedista-d5: zeigt Branchen, keine Kunden). Spaltenzahl/Gap sind eigene, gekennzeichnete Entscheidungen dieser Datei — für dieses konkrete Mosaik misst die Referenz keine Spaltenzahl, nur das Verhältnis 17:1 klein:gross. */ .mosaic-branchen{padding:var(--sec-y) 0} .mosaic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter); grid-auto-flow:dense;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)} .mosaic-grid__tile{aspect-ratio:1/1;overflow:hidden;background:var(--surface)} .mosaic-grid__tile img{width:100%;height:100%;object-fit:cover;display:block} .mosaic-grid__tile--big{grid-column:span 2;grid-row:span 2} @media (min-width:740px){ .mosaic-grid{grid-template-columns:repeat(4,1fr)} } @media (min-width:1100px){ .mosaic-grid{grid-template-columns:repeat(6,1fr)} } /* ═══════════════════════════════════════════════════════════════════════════ Restliche rohe Koralle/Blau/Wein-Farbwerte — Sichtung 23.08.2026 über alle 16 Übernahmeseiten (nicht nur die Startseite). Der :root-Token-Block oben fängt jede Farbe, die über --t1..--t4/--blue/--coral/--grad-brand läuft — diese hier sind rohe rgba()/Hex-Literale in v3.css/v4-bento.css, die den Token-Tausch umgehen und deshalb einzeln gefunden werden mussten (`grep` auf die bekannten alten rgb-Tripel, dann jede Stelle im Browser gegen den echten Vorschau-Server geprüft, nicht nur im Quelltext gelesen). ═══════════════════════════════════════════════════════════════════════════ */ /* "in Arbeit"-Badge — Referenz-Fund: eigenes Cyan/Blau, nicht --focus/--blue. */ .badge--info{color:#fff;border-color:rgba(255,255,255,.28);background:var(--blue)} /* Formularfeld-Fokusring — dieselbe alte Cyan/Blau-Kombination dreifach dupliziert (Kontaktformular, Booking-Widget, Landingpage-Formular). --focus ist oben bereits auf #006aff kollabiert, aber diese drei Regeln lesen es nicht, sie tragen den Rohwert direkt. */ .field input:focus-visible,.field textarea:focus-visible, .input:focus-visible,.textarea:focus-visible, .bk-field input:focus-visible,.bk-field textarea:focus-visible, .lp-form input:focus-visible,.lp-form textarea:focus-visible,.lp-form select:focus-visible{ border-color:var(--focus);box-shadow:0 0 0 3px rgba(0,106,255,.28)} /* Button-Hover-Glow auf Hero/CTA-Band/Sonderflächen — war auf den warmen Wein-Ton des alten Verlaufs abgestimmt (rgba(52,16,24,…)); neutraler Schatten statt eines neu erfundenen Farbtons. */ .g-hero .btn--primary:hover,.cta-band .btn--primary:hover, .allin .btn--primary:hover,.pitch .btn--primary:hover{box-shadow:0 12px 28px -14px rgba(0,0,0,.5)} .btn--grad:focus-visible{box-shadow:0 0 0 2px var(--focus-ink),0 0 0 5px var(--focus), 0 1px 0 rgba(255,255,255,.14) inset,0 10px 26px -14px rgba(0,0,0,.5)} /* Naht zwischen Hero und nächstem Abschnitt — war ein Koralle→Blau- Verlaufsschleier über der ganzen Nahtbreite (v3.css:1250-1252), die 1px-Trennlinie darunter (.seam::before, --grad-brand) ist bereits korrekt schwarz. Fläche entfernt statt neu einzufärben. */ .seam{background:none} /* Booking-Widget (kontakt.html) — gefunden per Zustände-Durchklicken (Schritt aktiv setzen), nicht durch Quelltext-Lesen: v3.css:736 "`.bk-step.active{color:#fff}`" war für einen dunklen Buchungs- Hintergrund gebaut. Die Zahl im Kreis bleibt korrekt weiss (der Kreis bekommt jetzt wieder eine echte Blaufläche, siehe --grad-mark-Fix oben) — aber ".bk-step-label" (das Wort "Termin" etc. NEBEN dem Kreis, kein eigener Hintergrund) erbte dasselbe Weiss und stand damit unsichtbar auf der hellen Buchungsfläche. Nur die äussere Regel korrigiert, die spezifischere ".bk-step.active .bk-step-dot{color:#fff}" bleibt unangetastet und gewinnt weiterhin für den Kreis selbst. */ .bk-step.active{color:var(--t1)} /* Gefunden 23.08.2026 durch dedista-d5s eigenen Farb-Scan (kein Markenton, deshalb griff keine der beiden Grep-Suchen): der noch nicht erreichte Schrittpunkt (".bk-step .bk-step-dot" ohne ".active"/".done") war #0e0e11 — auf der dunklen Vorlage die dezente Flächenfarbe, auf der jetzt hellen Buchungsfläche der stärkste Kontrast im ganzen Widget. Ein noch nicht erreichter Schritt zog damit mehr Blick auf sich als der aktive. Fix: derselbe gedämpfte Ton wie ".bk-step.done .bk-step-dot" (--surface-2) — damit ergibt sich erledigt/aktiv/offen als eine Staffelung von gedämpft über blau zu am schwächsten, nicht "am dunkelsten zieht die Aufmerksamkeit". */ .bk-step:not(.active):not(.done) .bk-step-dot{background:var(--surface-2)} /* Kontrast nachgemessen (WCAG-Formel, echte RGB-Werte, nicht geschätzt): var(--t3) auf --surface-2 ergab 4.27:1 — unter der 4.5:1-Grenze für Text unter 18px (die Zahl steht bei 12px). var(--t1) auf --surface-2 liegt deutlich darüber und bleibt klar von der grünen Erledigt-Farbe auf demselben Grund unterscheidbar. */ .bk-step:not(.active):not(.done) .bk-step-dot{color:var(--t1)} /* Weitere Funde derselben Art (dedista-d5s Scan-Prinzip selbst angewendet: nach #7FE7A8/#FF8A93 gesucht, jede Fundstelle gegen ihren tatsächlichen Hintergrund gerechnet, nicht angenommen). Beide Farben waren für einen dunklen Formular-Hintergrund gewählt (helles Grün/Rosa auf Schwarz) und sitzen nach dem Kollaps auf --surface (#f7f6f5) — WCAG- Formel, echte Werte: Grün auf --surface 1.40:1, Rosa auf --surface 2.09:1, beide weit unter 4.5:1, praktisch unlesbar. Betroffen: ".lp-form .status.ok/.err" (Landingpage-Formulare) und ".bk-status.err" (Booking-Widget-Fehlermeldung). Fix: dieselbe Farbfamilie (Grün=Erfolg, Rot=Fehler bleibt als funktionale Bedeutung erhalten), aber ein dunklerer, auf --surface tatsächlich lesbarer Ton — hier NEU gewählt (kein bestehender dunkler Grün-/Rotton im Codebase gefunden, den man wiederverwenden könnte), mit Sicherheitsabstand über 4.5:1 geprüft: #106b3e auf --surface = 6.09:1, #a8213a auf --surface = 6.61:1. */ .lp-form .status.ok{color:#106b3e} .lp-form .status.err,.bk-status.err{color:#a8213a}