/* =========================================================================== EIN KNOPF FUER DIE GANZE SEITE Franky, 26.08.: "Bitte alle Buttons auf der Seite so bauen wie Kontakt, einheitlich." WARUM EINE EIGENE DATEI, ganz zuletzt eingebunden. Die Reihenfolge der Stylesheets ist NICHT auf allen Seiten gleich. Gemessen an den Fundstellen im Quelltext: index.html unsere assets/*.css stehen bei 290039, die Vorlage unter _assets/ ab 23614 -> wir kommen spaeter und gewinnen index.html@p=901 unsere assets/*.css stehen zuerst, _assets/ danach -> die Vorlage gewinnt Deshalb greift dieselbe Regel auf der einen Seite und auf der anderen nicht. Genau so sah der Befund aus: die Angleichung wirkte auf 16 Seiten und auf dreien nicht. Diese Datei wird auf JEDER Seite als letztes vor eingebunden. Damit steht sie ueberall hinter allem anderen, und die Knoepfe sehen ueberall gleich aus. =========================================================================== */ /* ── EIN KNOPF FUER DIE GANZE SEITE ──────────────────────────────────── Franky, 26.08.: "Bitte alle Buttons auf der Seite so bauen wie Kontakt, einheitlich." GEMESSEN ueber alle 25 Seiten, fuenf verschiedene Erscheinungen: 1 Nunito Sans 18/400, Sperrung 1.5px, Polster 0/27, Ecke 5px, Rahmen 1px rgba(155,124,52,.85), Schrift #C2A05A -> Kontakt im Kopf, Hero-Knopf, Abschluss-Knopf. 16 Seiten 2 Lato 12/700, Sperrung 1.68px, Polster 13/26, Ecke 0 -> .kamui-messen__weiter, also "Ansehen" in den Angebotsreihen und der Knopf unter den Kennzahlen. 10 Seiten 3 Lato 18/400, Sperrung 0.5px, Polster 13.6/27 -> das Absendefeld im Kontaktformular. 1 Seite 4 Lato 18/400, grauer Rahmen 178,178,178, graue Schrift -> das Absendefeld auf der alten Seite /kontakt/. 1 Seite 5 Nunito Sans 13.5/400, Rahmen 2px grau -> der Abschluss-Knopf auf /expertise/. 1 Seite Nummer 1 ist der Kontakt-Knopf und ab hier der einzige. Die Werte stehen unveraendert aus `.kamui-hero__knopf` weiter oben, sie sind nur nicht mehr an eine Klasse gebunden. WARUM DIESE DATEI. v2-baulig.css hatte am Ende schon eine Regel, die dasselbe wollte - sie greift nicht. Gemessen kommt beim Kontakt-Knopf nichts davon an: nicht die Schriftart, nicht die Ecke, nicht einmal die Rahmenfarbe mit !important. Der Grund steht oben in dieser Datei: die Stylesheets der Vorlage liegen unter `_assets/` und werden SPAETER geladen. Bei gleicher Spezifitaet gewinnt das spaetere !important. hero.css kommt danach und traegt deshalb schon die Hero-Werte. Diese Regel gehoert an dieselbe Stelle, sonst gewinnt sie nicht. `line-height: 40px` statt senkrechtem Polster: damit ist die Hoehe ueberall 42px, unabhaengig davon, was die Vorlage an Polster mitbringt. Genau daran unterschieden sich vorher 2, 3 und 4. */ .kamui-hero__knopf, .artison-cta__button.brxe-button, .kamui-messen__weiter, #kamui-referenzen .kamui-v2__karte-knopf, #brx-header a.bricks-button, #brx-header a.btn--outline, #brx-header a[data-kamui-kontakt], #brx-content .bricks-button, #brx-content button[type="submit"], #brx-content input[type="submit"], #kamui-kontakt button[type="submit"] { display: inline-flex !important; align-items: center; justify-content: center; width: auto; height: auto !important; /* 44px statt 0: die Knoepfe kamen ueber `line-height: 40px` auf genau 42px Bauhoehe. Das sieht richtig aus, ist auf dem Handy aber 2px unter der Mindestgroesse einer Tippflaeche. `min-height` aendert die Optik nicht - der Text bleibt ueber `align-items` mittig, und bei allen Knoepfen mit mehr Polster greift die Regel ohnehin nicht. */ min-height: 44px !important; padding: 0 27px !important; font-family: "Nunito Sans", system-ui, sans-serif !important; font-size: 18px !important; font-weight: 400 !important; letter-spacing: 1.5px !important; line-height: 40px !important; text-transform: uppercase !important; text-decoration: none !important; color: #C2A05A !important; background: transparent !important; border: 1px solid rgba(155, 124, 52, 0.85) !important; border-radius: 5px !important; box-shadow: none !important; opacity: 1 !important; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* Beim Ueberfahren fuellt sich der Umriss. Ein Zustand fuer alle, damit nicht wieder fuenf verschiedene entstehen. */ .kamui-hero__knopf:hover, .kamui-hero__knopf:focus-visible, .artison-cta__button.brxe-button:hover, .artison-cta__button.brxe-button:focus-visible, .kamui-messen__weiter:hover, .kamui-messen__weiter:focus-visible, #kamui-referenzen .kamui-v2__karte-knopf:hover, #kamui-referenzen .kamui-v2__karte-knopf:focus-visible, #brx-header a.bricks-button:hover, #brx-header a.bricks-button:focus-visible, #brx-header a.btn--outline:hover, #brx-header a.btn--outline:focus-visible, #brx-header a[data-kamui-kontakt]:hover, #brx-header a[data-kamui-kontakt]:focus-visible, #brx-content .bricks-button:hover, #brx-content .bricks-button:focus-visible, #brx-content button[type="submit"]:hover, #brx-content button[type="submit"]:focus-visible, #kamui-kontakt button[type="submit"]:hover, #kamui-kontakt button[type="submit"]:focus-visible { background: #C2A05A !important; border-color: #C2A05A !important; color: #161B19 !important; } /* ── DER HERO-KNOPF BRAUCHT EINEN EIGENEN GRUND ──────────────────────── GEMESSEN am 26.08. ueber den Scrollweg des Hero-Bildes, Kontrast der Schrift #C2A05A gegen die Pixel des Canvas direkt darunter: scrollY 0 Frame 0 5.37 noch lesbar scrollY 900 Frame 217 1.57 zu wenig scrollY 1300 Frame 393 1.25 zu wenig scrollY 1700 Frame 486 1.28 zu wenig scrollY 2100 Frame 501 1.71 zu wenig scrollY 2500 Frame 501 1.37 zu wenig Ursache: der Knopf hat `background: transparent`, das Bild darunter wechselt ueber 501 Frames von dunkler Nacht zu hellem Beton. Ueber einer Flaeche, deren Helligkeit sich staendig aendert, kann eine feste Schriftfarbe nicht dauerhaft lesbar sein. Am Bildschirmfoto bei scrollY 1300 bestaetigt: der Knopf verschwindet fast im Beton. Das ist der einzige Handlungsknopf im Hero. Ein unlesbarer Knopf ist hier teurer als jeder Schoenheitsfehler. LOESUNG wie bei den Kontakt-Zeichen unten links, die dasselbe Problem haben und es bereits richtig loesen: eigener Grund in Tusche mit Weichzeichner. Damit haengt der Kontrast nicht mehr am Bild. Nur der Hero-Knopf bekommt das; alle anderen Knoepfe stehen auf ruhigen Flaechen und bleiben unveraendert. DECKKRAFT NACHGEZOGEN: mit 0.78 wie bei den Kontakt-Zeichen blieben die zwei hellsten Messpunkte bei 3.94 und 3.96 haengen - besser als 1.25, aber immer noch unter 4.5. Die Zeichen unten links kommen mit 0.78 durch, weil sie tiefer stehen, wo das Bild dunkler bleibt. 0.90 deckt den hellsten Beton ab und laesst das Bild noch durch. Beim Ueberfahren gilt weiter die Fuell-Regel oben (Gold, Tusche als Schrift) - die kommt frueher in der Datei, deshalb wird sie hier ausdruecklich wiederholt, sonst gewinnt der neue Grund. */ .kamui-hero__knopf { background: rgba(22, 27, 25, 0.90) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(237, 225, 202, 0.12), 0 8px 28px rgba(0, 0, 0, 0.5) !important; } .kamui-hero__knopf:hover, .kamui-hero__knopf:focus-visible { background: #C2A05A !important; border-color: #C2A05A !important; color: #161B19 !important; } /* ── Der lange Knopf auf dem Handy ─────────────────────────────────── Franky, 26.08.2026: "der erstgespräch button sieht komisch aus auf der handy ansicht, der soll bitte aussehen wie im zweiten screenshot nicht übereinander!" GEMESSEN bei 390px: der Knopf stand 292x82px ueber fuenf Zeilenkaesten, "ERSTGESPRÄCH" und "ANFRAGEN" untereinander, der Pfeil rechts unten auf halber Hoehe. Die anderen beiden Erstgespraech-Knoepfe derselben Seite (Hero und Abschluss) standen sauber bei 330x44. RECHNUNG: der Text braucht 274px, dazu 17px Pfeil und 54px Polster = 345px. Die Spalte `.kamui-messen__spalte` gibt aber nur 292px her (390 minus 2x28px Polster minus Rand). Also bricht er um. Es ist kein Schriftgrad- und kein Ausrichtungsfehler, es ist schlicht zu eng. DREI STELLSCHRAUBEN, in dieser Reihenfolge: 1. Spaltenpolster 28px -> 18px: bringt 20px, kostet optisch nichts. 2. Knopfpolster 27px -> 14px: bringt 26px. Die 44px Tippflaeche bleiben ueber `min-height` erhalten, die faellt nicht mit. 3. Der Pfeil entfaellt NUR bei diesem einen Knopf. Er ist Zierde; die drei kurzen "Ansehen"-Knoepfe daneben behalten ihn, weil sie mit 172px ohnehin passen und er dort die Richtung anzeigt. Ergebnis gemessen: 304x44, einzeilig, rechte Kante bei 343 von 390. Der Treffer laeuft ueber `href="#kamui-kontakt"`, nicht ueber die Klasse: `.kamui-messen__weiter` tragen alle vier Knoepfe der Sektion. Ueber den Text zu gehen waere spraechabhaengig und faellt beim naechsten Wortlaut um. Unter 360px reicht auch das nicht (gemessen: Ueberlauf bis 342 von 320). Dort wird zusaetzlich der Schriftgrad auf 16px und die Sperrung auf 1px genommen, gemessen 262px bei 320px Viewport. */ @media (max-width: 600px) { .kamui-messen__spalte { padding-left: 18px !important; padding-right: 18px !important; } .kamui-messen__weiter[href="#kamui-kontakt"] { white-space: nowrap !important; padding: 0 14px !important; } /* Nur die Zierde, nicht der Text. Der Pfeil steckt im einzigen des Knopfes (kennzahlen.css:361 gibt ihm das Ruckeln beim Ueberfahren). */ .kamui-messen__weiter[href="#kamui-kontakt"] span { display: none !important; } } @media (max-width: 360px) { .kamui-messen__weiter[href="#kamui-kontakt"] { font-size: 16px !important; letter-spacing: 1px !important; padding: 0 12px !important; } }