/** * Branchen-Benchmark * * Heller Arbeitsbereich auf dunklem Seitengrund: Die Marke bleibt, die * Lesestrecke wird hell. Vier Schritte auf Schwarz ermüden. * * Bewusst KEIN input[type=range] — Slider sind auf Touch das unzuverlässigste * Bedienelement überhaupt (der Finger verdeckt beim Ziehen genau den Wert). * Stattdessen segmentierte Buttons. * * @package VertriebsWikinger */ /* ========================================================================== 1 · Rahmen ========================================================================== */ /* Die Hauptnavigation ist position:fixed (05-navigation.css) und 5rem hoch; das Theme gleicht das je Seite selbst aus. Ohne diesen Abstand läge der erste Schritt unter der Navigationsleiste. */ .bm-seite { background: var(--farbe-schwarz); padding: 8rem 0 var(--abstand-4xl); min-height: var(--hero-hoehe-kompakt); } .bm-container { width: min(100% - 2rem, var(--container-lg)); margin-inline: auto; } .bm-container--schmal { width: min(100% - 2rem, var(--container-sm)); } /* Der Ladezustand setzt opacity auf 0.6. Bei schneller Verbindung ist der Schritt gewechselt, bevor das Auge etwas sieht — sichtbar bleibt nur ein Flackern bei jedem Klick. Die Verzögerung von 200 ms lässt die Abblendung erst erscheinen, wenn es tatsächlich dauert. */ .bm-seite { transition: opacity 120ms 200ms var(--ease-out); } @media (prefers-reduced-motion: reduce) { .bm-seite { transition: none; } } /* Der Sprungziel-Abstand muss den Sticky-Header ausgleichen, sonst landet die Schrittüberschrift nach dem Fokuswechsel darunter. */ .ist-benchmark-wizard { scroll-padding-top: 7rem; } /* Der Abstand hängt an der Karte, nicht an der Überschrift: Angesprungen wird der Schrittanfang, und im Ergebnis steht die Leitzahl-Überschrift erst unter Fortschritt und Chips. */ .bm-schritt, .bm-ergebnis { scroll-margin-top: 7rem; } /* Fokus darf nie unsichtbar sein — auf dunklem Grund sind dünne Ringe weg. :not([tabindex="-1"]) ist hier entscheidend. Die Schrittüberschriften tragen tabindex="-1", damit der Fokus nach jedem Wechsel dorthin springen kann. Ohne die Ausnahme trifft [tabindex] auch sie, und weil :is() die Spezifität seines stärksten Arguments erbt (0,3,0), schlug diese Regel die Gegenregel darunter (0,2,0) — die Überschriften bekamen einen orangen Ring. In Safari fiel es zuerst auf: Beim Klick auf ein Radio setzt es den Fokus systemkonform nicht auf das Bedienelement, activeElement ist also , und der anschliessende programmatische focus() gilt der :focus-visible- Heuristik als Tastaturfokus. Mit der Tastatur trat es überall auf. Elemente mit tabindex="-1" sind nicht tastaturerreichbar; ein Ring markiert dort keinen Bedienpunkt, sondern eine Vorlesestelle. */ .bm-seite :is(a, button, input, [tabindex]:not([tabindex="-1"])):focus-visible { outline: 0.1875rem solid var(--farbe-kupfer-hell); outline-offset: 0.25rem; border-radius: var(--radius); } /* Gürtel und Hosenträger. Die Selektoren tragen bewusst .bm-seite mit: Damit liegen sie auf (0,3,0) wie die Regel darüber und gewinnen als spätere Regel auch dann, wenn jemand die tabindex-Ausnahme oben wieder entfernt. Ohne den Präfix wären sie (0,2,0) und wirkungslos — genau der Fehler, der den orangen Ring erzeugt hat. */ .bm-seite .bm-schritt__titel:focus, .bm-seite .bm-schritt__titel:focus-visible, .bm-seite .bm-leitzahl__titel:focus, .bm-seite .bm-leitzahl__titel:focus-visible { outline: none; } /* ========================================================================== 2 · Schritt-Karte ========================================================================== */ .bm-schritt, .bm-ergebnis { background: var(--farbe-weiss); border-radius: var(--radius); padding: var(--abstand-2xl) 0; box-shadow: var(--schatten-2xl); } /* -------------------------------------------------------------------------- Kopfzeile: Rückweg und Fortschritt Auf der Vollseite steht sie im Fluss über dem Schritt, im Overlay übernimmt die fixierte Leiste der Hülle (Abschnitt 11) dieselbe Aufgabe. -------------------------------------------------------------------------- */ .bm-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-md); min-height: 2.75rem; margin-bottom: var(--abstand-lg); } .bm-zurueck { display: inline-flex; align-items: center; gap: 0.375rem; /* 2,75 rem ist die kleinste Fläche, die sich zuverlässig treffen lässt. */ min-height: 2.75rem; padding: 0 0.75rem 0 0.5rem; /* Zieht die optische Kante des Textes auf die Kante des Inhalts darunter, obwohl die Klickfläche nach links darüber hinausgeht. */ margin-left: -0.5rem; border-radius: var(--radius-voll); font-size: var(--schrift-sm); font-weight: var(--schrift-halbfett); color: var(--farbe-grau-dunkel); text-decoration: none; } .bm-zurueck:hover { color: var(--farbe-kupfer); background: var(--farbe-weiss-warm); } .bm-zurueck[hidden] { display: none; } /* Hält die Leiste dreiteilig, wenn es keinen Rückweg gibt — sonst rutscht der Fortschritt in Schritt 1 nach links und springt beim Wechsel. */ .bm-zurueck-platz { display: block; width: 2.75rem; } .bm-zurueck-platz[hidden] { display: none; } .bm-fortschritt { display: flex; flex-direction: column; align-items: flex-end; gap: 0.375rem; } .bm-fortschritt__liste { display: flex; gap: 0.375rem; list-style: none; margin: 0; padding: 0; } .bm-fortschritt__punkt { width: 1.75rem; height: 0.25rem; background: var(--farbe-grau); border-radius: var(--radius-voll); transition: background var(--transition-basis) var(--ease-out); } .bm-fortschritt__punkt--erledigt, .bm-fortschritt__punkt--aktiv { background: var(--farbe-kupfer); } /* Kein uppercase mit letter-spacing mehr: Versalien lesen sich messbar langsamer, und hier steht jetzt eine echte Aussage statt einer Nummer. */ .bm-fortschritt__text { font-size: var(--schrift-sm); font-weight: var(--schrift-halbfett); color: var(--farbe-kupfer); margin: 0; } .bm-fortschritt__zusatz { color: var(--farbe-grau-dunkel); font-weight: var(--schrift-normal); } /* Ohne JavaScript ist der Weiter-Button die einzige Bedienung. Mit JavaScript schaltet die Auswahl selbst weiter, und der Button wäre tote Klickfläche, die obendrein "erst wählen, dann bestätigen" suggeriert. */ .bm-seite.bm-js-aktiv .bm-form__aktion--auto { display: none; } .bm-schritt__titel { font-size: clamp(1.75rem, 4vw, var(--schrift-4xl)); font-weight: var(--schrift-fett); line-height: var(--zeilenhoehe-eng); margin: 0 0 var(--abstand-md); padding: 0; } .bm-schritt__text { font-size: var(--schrift-lg); line-height: var(--zeilenhoehe-entspannt); color: var(--farbe-grau-dunkel); max-width: 44rem; margin: 0 0 var(--abstand-xl); } .bm-fieldset { border: 0; margin: 0 0 var(--abstand-xl); padding: 0; min-width: 0; /* verhindert, dass fieldset das Grid sprengt */ } .bm-gruppe__titel { font-size: var(--schrift-sm); font-weight: var(--schrift-halbfett); letter-spacing: 0.06em; text-transform: uppercase; color: var(--farbe-grau-dunkel); margin: 0 0 var(--abstand-sm); padding: 0; } /* ========================================================================== 3 · Branchenkacheln (echte Radiogruppe) ========================================================================== */ /* Die Radios sind visuell versteckt, aber echte Bedienelemente: Sie bleiben fokussierbar, damit die Tastaturbedienung und die Auswahl per Label funktionieren. Deshalb kein display:none. WARUM DIE WRAPPER position:relative BRAUCHEN position:absolute sucht sich den nächsten positionierten Vorfahren. Gab es keinen, war das .bm-modal__container — und der liegt ausserhalb des scrollenden .bm-modal__body. Ein absolut positioniertes Element mit Bezugsrahmen ausserhalb eines Scrollers wandert beim Scrollen nicht mit; sein Rechteck bleibt dort, wo der ungescrollte Fluss es berechnet hat, also bei langem Inhalt weit unterhalb des sichtbaren Kastens. Klickte jemand im Ergebnis auf ein Verfeinerungs-Segment, fokussierte der Browser das Radio und scrollte es ins Bild — und weil der Container overflow:hidden trägt, ist er programmatisch scrollbar und wurde verschoben. Der Inhalt rutschte oben aus dem Kasten, unten kam die weisse Fläche des Containers zum Vorschein, und die Hochrechnung verschwand dahinter. Da der scrollTop des Containers nirgends zurückgesetzt wird, blieb der Zustand. Der Wrapper als Bezugsrahmen hält das Radio dort, wo sein Label steht. */ .bm-segment-wrap, .bm-kachel-wrap { position: relative; } .bm-radio { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .bm-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: var(--abstand-md); } .bm-kachel { display: flex; flex-direction: column; justify-content: center; gap: var(--abstand-xs); min-height: 5.5rem; /* Touch-Ziel deutlich über 48px */ padding: var(--abstand-md) var(--abstand-lg); background: var(--farbe-weiss-warm); border: 0.125rem solid var(--farbe-grau); border-radius: var(--radius); cursor: pointer; transition: border-color var(--transition-schnell) var(--ease-out), background-color var(--transition-schnell) var(--ease-out), transform var(--transition-schnell) var(--ease-out); } .bm-kachel:hover { border-color: var(--farbe-kupfer); background: var(--farbe-weiss); } .bm-kachel__label { font-size: var(--schrift-lg); font-weight: var(--schrift-halbfett); line-height: var(--zeilenhoehe-snug); } .bm-kachel__beispiele { font-size: var(--schrift-sm); color: var(--farbe-grau-dunkel); line-height: var(--zeilenhoehe-snug); } /* Auswahl nie allein über Farbe kennzeichnen — Rahmen, Fläche und Häkchen */ .bm-radio:checked + .bm-kachel { border-color: var(--farbe-kupfer); background: var(--farbe-gold-alpha-15); } .bm-radio:checked + .bm-kachel .bm-kachel__label::after { content: " ✓"; color: var(--farbe-kupfer); font-weight: var(--schrift-fett); } .bm-radio:focus-visible + .bm-kachel { outline: 0.1875rem solid var(--farbe-kupfer); outline-offset: 0.25rem; } /* "Meine Branche ist nicht dabei" ist der Ausweg, keine weitere Branche. Deshalb über die volle Rasterbreite unter den echten Optionen, zentriert und optisch zurückgenommen: Sie liest sich damit als Zeile unter dem Raster statt als gleichwertige Kachel, und der Blick bleibt auf den Branchen. */ .bm-kacheln .bm-kachel-wrap--sonstige { grid-column: 1 / -1; } .bm-kachel--sonstige { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--abstand-xs) var(--abstand-sm); min-height: 3.5rem; text-align: center; border-style: dashed; background: transparent; } .bm-kachel--sonstige .bm-kachel__label { font-size: var(--schrift-basis); font-weight: var(--schrift-normal); } /* ========================================================================== 4 · Segmentierte Auswahl (statt Slider) ========================================================================== */ .bm-segmente { display: flex; flex-wrap: wrap; gap: var(--abstand-sm); } .bm-segment { display: inline-flex; align-items: center; min-height: 3rem; /* 48px Touch-Ziel */ padding: var(--abstand-sm) var(--abstand-lg); background: var(--farbe-weiss-warm); border: 0.125rem solid var(--farbe-grau); border-radius: var(--radius-voll); font-size: var(--schrift-basis); font-weight: var(--schrift-medium); cursor: pointer; transition: border-color var(--transition-schnell) var(--ease-out), background-color var(--transition-schnell) var(--ease-out); } .bm-segment:hover { border-color: var(--farbe-kupfer); } .bm-radio:checked + .bm-segment { border-color: var(--farbe-kupfer); background: var(--farbe-kupfer); color: var(--farbe-weiss); font-weight: var(--schrift-halbfett); } .bm-radio:focus-visible + .bm-segment { outline: 0.1875rem solid var(--farbe-kupfer); outline-offset: 0.25rem; } /* ========================================================================== 5 · Formular-Aktionen und Felder ========================================================================== */ .bm-form__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-lg); margin-top: var(--abstand-xl); } .bm-link-neben { font-size: var(--schrift-basis); color: var(--farbe-grau-dunkel); text-decoration: underline; text-underline-offset: 0.25em; } .bm-link-neben:hover { color: var(--farbe-kupfer); } .bm-feld { display: block; margin-bottom: var(--abstand-lg); } .bm-feld__label { display: block; font-size: var(--schrift-sm); font-weight: var(--schrift-halbfett); margin-bottom: var(--abstand-xs); } .bm-feld__zusatz { font-weight: var(--schrift-normal); color: var(--farbe-grau-dunkel); } .bm-feld__eingabe { width: 100%; min-height: 3rem; padding: var(--abstand-sm) var(--abstand-md); background: var(--farbe-weiss); border: 0.125rem solid var(--farbe-grau); border-radius: var(--radius); font-family: inherit; font-size: var(--schrift-basis); } .bm-feld__eingabe:focus { border-color: var(--farbe-kupfer); outline: none; } .bm-pflicht { color: var(--farbe-kupfer); } /* Honeypot: für Menschen unsichtbar, für Bots ein normales Feld. Kein display:none — manche Bots überspringen versteckte Felder. Es hängt an derselben Mechanik wie die Radio-Inputs: Sein Bezugsrahmen ist der nächste positionierte Vorfahre. Seit .bm-modal__body position:relative trägt, ist das der Scrollbereich selbst und nicht mehr der Modal-Container — ein Fokus in diesem Feld kann das Overlay damit nicht mehr verschieben. */ .bm-honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .bm-checkbox { display: flex; align-items: flex-start; gap: var(--abstand-sm); font-size: var(--schrift-sm); line-height: var(--zeilenhoehe-entspannt); color: var(--farbe-grau-dunkel); margin-top: var(--abstand-lg); } .bm-checkbox input { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-top: 0.125rem; accent-color: var(--farbe-kupfer); } /* ========================================================================== 6 · Ergebnis ========================================================================== */ .bm-chips { display: flex; flex-wrap: wrap; gap: var(--abstand-sm); margin-bottom: var(--abstand-xl); } .bm-chip { display: inline-flex; align-items: center; gap: var(--abstand-sm); min-height: 2.75rem; padding: var(--abstand-xs) var(--abstand-md); background: var(--farbe-weiss-warm); border: 0.0625rem solid var(--farbe-grau); border-radius: var(--radius-voll); font-size: var(--schrift-sm); font-weight: var(--schrift-medium); text-decoration: none; } .bm-chip:hover { border-color: var(--farbe-kupfer); } .bm-chip__aktion { font-size: var(--schrift-xs); color: var(--farbe-kupfer); text-transform: uppercase; letter-spacing: 0.06em; } .bm-einleitung { padding: var(--abstand-lg); background: var(--farbe-weiss-warm); border-left: 0.25rem solid var(--farbe-kupfer); border-radius: var(--radius); margin-bottom: var(--abstand-xl); } .bm-einleitung p { margin: 0; font-size: var(--schrift-lg); line-height: var(--zeilenhoehe-entspannt); } /* --- Leitzahl: was möglich ist, nicht was es kostet --- */ .bm-leitzahl { margin-bottom: var(--abstand-xl); } .bm-leitzahl__titel { display: flex; flex-direction: column; gap: var(--abstand-xs); margin: 0 0 var(--abstand-sm); } .bm-leitzahl__wert { font-size: clamp(2.5rem, 9vw, 4.5rem); font-weight: var(--schrift-extrafett); line-height: 1; color: var(--farbe-kupfer); font-variant-numeric: tabular-nums; } .bm-leitzahl__einheit { font-size: clamp(1.125rem, 3vw, var(--schrift-2xl)); font-weight: var(--schrift-halbfett); line-height: var(--zeilenhoehe-snug); } /* Der Stundenbezug gehört zur Aussage, nicht zum Kleingedruckten. Bekäme er das Grau der Herkunftszeile, würde genau der Satz überlesen, der aus „nur acht Termine" ein „acht Termine in einer Arbeitswoche" macht. Deshalb volle Textfarbe und mittleres Gewicht — eine Stufe unter der Einheit, mehrere über der Fußnote. */ .bm-leitzahl__basis { font-size: var(--schrift-lg); font-weight: var(--schrift-medium); line-height: var(--zeilenhoehe-snug); margin: 0 0 var(--abstand-sm); } .bm-leitzahl__basis-zusatz { display: block; font-size: var(--schrift-sm); font-weight: var(--schrift-normal); line-height: var(--zeilenhoehe-normal); color: var(--farbe-grau-dunkel); margin-top: 0.125rem; } /* Die Herkunft steht AN der Zahl, nicht in der Fußzeile. Ein Beleg, der nach der Behauptung kommt, ist eine Fußnote; einer daneben ist eine Messung. */ .bm-herkunft { font-size: var(--schrift-sm); color: var(--farbe-grau-dunkel); line-height: var(--zeilenhoehe-normal); margin: 0 0 var(--abstand-xs); } .bm-herkunft--faktor { font-style: italic; } /* --- Aufwandszahl als Beleg darunter --- */ .bm-aufwand { padding: var(--abstand-lg); background: var(--farbe-schwarz); border-radius: var(--radius); margin-bottom: var(--abstand-xl); } .bm-aufwand__satz { font-size: clamp(1.125rem, 3vw, var(--schrift-2xl)); line-height: var(--zeilenhoehe-snug); margin: 0 0 var(--abstand-xs); } .bm-aufwand__satz strong { color: var(--farbe-kupfer-hell); font-variant-numeric: tabular-nums; } .bm-aufwand__hinweis { font-size: var(--schrift-sm); color: var(--farbe-weiss-alpha-60); margin: 0; } /* --- Weitere Kennzahlen --- */ .bm-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: var(--abstand-md); margin-bottom: var(--abstand-xl); } .bm-karte { padding: var(--abstand-lg); background: var(--farbe-weiss-warm); border-radius: var(--radius); } .bm-karte__wert { font-size: var(--schrift-3xl); font-weight: var(--schrift-fett); line-height: 1; margin: 0 0 var(--abstand-xs); font-variant-numeric: tabular-nums; } .bm-karte__label { font-size: var(--schrift-basis); font-weight: var(--schrift-medium); margin: 0 0 var(--abstand-xs); } .bm-karte__herkunft { font-size: var(--schrift-xs); color: var(--farbe-grau-dunkel); line-height: var(--zeilenhoehe-normal); margin: 0; } .bm-einordnung { padding: var(--abstand-lg); border: 0.0625rem solid var(--farbe-grau); border-radius: var(--radius); margin-bottom: var(--abstand-2xl); } .bm-einordnung p { margin: 0; font-size: var(--schrift-lg); line-height: var(--zeilenhoehe-entspannt); } /* ========================================================================== 7 · Verfeinerung und Hochrechnung ========================================================================== */ .bm-verfeinerung { padding: var(--abstand-xl); background: var(--farbe-weiss-warm); border-radius: var(--radius); margin-bottom: var(--abstand-2xl); } .bm-verfeinerung__titel { font-size: var(--schrift-2xl); font-weight: var(--schrift-fett); margin: 0 0 var(--abstand-xs); } .bm-verfeinerung__text { color: var(--farbe-grau-dunkel); margin: 0 0 var(--abstand-lg); } .bm-hochrechnung { padding: var(--abstand-lg); background: var(--farbe-weiss); border-left: 0.25rem solid var(--farbe-kupfer); border-radius: var(--radius); margin-top: var(--abstand-xl); } .bm-hochrechnung__wert { font-size: var(--schrift-2xl); font-weight: var(--schrift-fett); margin: 0 0 var(--abstand-xs); font-variant-numeric: tabular-nums; } .bm-hochrechnung__rechnung { font-size: var(--schrift-sm); color: var(--farbe-grau-dunkel); margin: 0 0 var(--abstand-xs); } .bm-hochrechnung__hinweis { font-size: var(--schrift-sm); color: var(--farbe-grau-dunkel); line-height: var(--zeilenhoehe-entspannt); margin: 0; } /* ========================================================================== 8 · Übergabe, Kontakt, Termin ========================================================================== */ /* Der Satz, der den Besucher ausdrücklich entlässt. Er macht alles Folgende zum Angebot statt zur Bedingung — und ist deshalb wichtiger als er aussieht. */ .bm-abgabe__entlassung { font-size: var(--schrift-lg); font-weight: var(--schrift-medium); text-align: center; color: var(--farbe-grau-dunkel); padding: var(--abstand-lg) 0; border-top: 0.0625rem solid var(--farbe-grau); margin: 0 0 var(--abstand-xl); } /* Der Kontaktblock ist der leisere zweite Weg und tritt optisch zurueck. Prominent ist der Termin darueber. */ .bm-kontakt { padding: var(--abstand-lg); background: var(--farbe-weiss-warm); border-radius: var(--radius); margin-bottom: var(--abstand-xl); } .bm-kontakt__titel { font-size: var(--schrift-lg); font-weight: var(--schrift-halbfett); margin: 0 0 var(--abstand-xs); } .bm-kontakt__text { color: var(--farbe-grau-dunkel); font-size: var(--schrift-sm); line-height: var(--zeilenhoehe-entspannt); margin: 0 0 var(--abstand-lg); max-width: 44rem; } .bm-kontakt__gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: var(--abstand-md); } .bm-kontakt .bm-checkbox a { color: var(--farbe-kupfer); } .bm-kontakt .bm-feld__eingabe { background: var(--farbe-weiss); } .bm-kontakt .bm-feld__eingabe:focus { border-color: var(--farbe-kupfer); } .bm-kontakt__rueckmeldung { margin: var(--abstand-md) 0 0; font-size: var(--schrift-basis); line-height: var(--zeilenhoehe-entspannt); } .bm-kontakt__rueckmeldung:empty { margin: 0; } .bm-kontakt__rueckmeldung--fehler { color: var(--farbe-kupfer-dunkel); font-weight: var(--schrift-halbfett); } .bm-kontakt__rueckmeldung--erfolg { color: var(--farbe-schwarz); font-weight: var(--schrift-halbfett); } /* Der Hauptweg nach dem Ergebnis. Wer gerade Zahlen zu seiner Branche gesehen hat, ist bereit fuer das Gespraech; deshalb liegt hier das Gewicht. */ .bm-termin { text-align: center; padding: var(--abstand-xl); background: var(--farbe-schwarz); border-radius: var(--radius); margin-bottom: var(--abstand-lg); } /* Die Farbe muss HIER stehen, nicht nur auf .bm-termin. Dort wäre sie nur geerbt, und 02-basis.css setzt color: var(--farbe-schwarz) direkt auf jedes h1–h6 — eine direkte Deklaration schlägt jeden geerbten Wert, unabhängig von Spezifität und Reihenfolge. Ohne diese Zeile stand die Überschrift schwarz auf schwarz. Gilt für jeden Block auf dunklem Grund, der eine Überschrift enthält. */ .bm-termin__titel { color: var(--farbe-weiss); font-size: var(--schrift-2xl); font-weight: var(--schrift-fett); margin: 0 0 var(--abstand-sm); } .bm-termin__text { color: var(--farbe-weiss-alpha-75); line-height: var(--zeilenhoehe-entspannt); max-width: 40rem; margin: 0 auto var(--abstand-lg); } /* iOS-Homebar und Cookie-Banner nicht ueber den letzten Block legen. Im Overlay entfällt das: Dort stellt .bm-modal__container die Safe-Area, und beide zusammen ergäben auf dem iPhone rund 34px doppelt. */ .bm-seite:not(.bm-seite--modal) .bm-kontakt { padding-bottom: calc(var(--abstand-lg) + env(safe-area-inset-bottom, 0px)); } /* ========================================================================== 9 · Mobil ========================================================================== */ @media (max-width: 47.9375em) { /* Die fixierte Hauptnavigation überdeckt auf dem iPhone die Schrittüberschrift; das fixierte Termin-Widget sitzt unten rechts genau dort, wo der Weiter-Button landet. Auf dieser Seite braucht es beides nicht — der Wizard IST die Navigation. Ohne diese Regel wird er mobil schwer bedienbar. */ .ist-benchmark-wizard .haupt-navigation { position: static; } .ist-benchmark-wizard .termin-widget { display: none; } /* Navigation nimmt jetzt selbst Platz ein — der Ausgleich entfällt. */ .bm-seite { padding: var(--abstand-xl) 0 var(--abstand-2xl); } .bm-schritt, .bm-ergebnis { border-radius: var(--radius); padding: var(--abstand-xl) 0; } /* Zwei Spalten statt Karussell — wer seine Branche nicht sieht, geht. */ .bm-kacheln { grid-template-columns: repeat(2, 1fr); gap: var(--abstand-sm); } .bm-kachel { min-height: 4.5rem; padding: var(--abstand-md); } .bm-kachel__label { font-size: var(--schrift-basis); } .bm-kachel__beispiele { display: none; /* Platz sparen, Information steckt im Label */ } /* Der Sonstige-Zusatz bleibt auch mobil stehen: Ohne ihn liest sich die Kachel wie eine Sackgasse statt wie ein Weg. */ .bm-kachel--sonstige .bm-kachel__beispiele { display: block; flex-basis: 100%; } .bm-form__aktion { flex-direction: column; align-items: stretch; gap: var(--abstand-md); } /* 3,5 rem statt der geerbten 3,25: Für den primären Schritt-CTA in einem Vollflächen-Sheet ist das die heutige Erwartung. */ .bm-form__aktion .cta-button { width: 100%; justify-content: center; min-height: 3.5rem; font-size: 1.0625rem; } .bm-link-neben { text-align: center; } /* Die Chips sind im Ergebnis die gesamte Korrekturnavigation und stehen zu dritt nebeneinander — mit der Desktop-Grösse zu knapp für den Daumen. */ .bm-chip { min-height: 3rem; padding: var(--abstand-sm) var(--abstand-md); } .bm-segment { min-height: 3.25rem; padding-inline: var(--abstand-lg); } /* Unter 16px zoomt iOS-Safari beim Fokus in das Feld hinein und findet nicht sauber zurück. --schrift-basis liegt genau auf der Grenze; das trifft ausgerechnet das Lead-Formular in Schritt 3. */ .bm-feld__eingabe { font-size: 1.0625rem; min-height: 3.25rem; } .bm-karten { grid-template-columns: 1fr; } .bm-verfeinerung, .bm-kontakt { padding: var(--abstand-lg); } /* Das Shorthand oben überschreibt auch den Homebar-Abstand aus Abschnitt 8. Auf der Vollseite ist .bm-kontakt der letzte Block vor dem Seitenrand und braucht ihn — im Overlay stellt der Container die Safe-Area, dort wäre er doppelt. */ .bm-seite:not(.bm-seite--modal) .bm-kontakt { padding-bottom: calc(var(--abstand-lg) + env(safe-area-inset-bottom, 0px)); } } @media (max-width: 22.5em) { /* 360px und schmaler: Kacheln einspaltig, sonst bricht der Text hässlich */ .bm-kacheln { grid-template-columns: 1fr; } } /* ========================================================================== 10 · Bewegung reduzieren ========================================================================== */ @media (prefers-reduced-motion: reduce) { .bm-kachel, .bm-segment, .bm-chip { transition: none; } } /* ========================================================================== 11 · Druck ========================================================================== */ @media print { .bm-seite { background: #fff; padding: 0; } .bm-schritt, .bm-ergebnis { box-shadow: none; } /* Auf Papier bringt weder das Formular noch der Terminbutton etwas */ .bm-kontakt, .bm-termin, .bm-verfeinerung form, .bm-chips { display: none; } .bm-aufwand { background: #fff; color: #000; border: 1px solid #000; } .bm-aufwand__satz strong, .bm-leitzahl__wert { color: #000; } } /* ========================================================================== 11 · Modal-Chrome Der Benchmark öffnet als Overlay, damit ein Klick keinen Seitenwechsel kostet. Die Vollseite bleibt daneben bestehen für geteilte Links, Crawler und den Fall ohne JavaScript. ========================================================================== */ .bm-modal { /* Die Höhe der Bedienleiste stand an fünf Stellen als Literal — im padding-top des Containers, in der Leiste selbst und in drei calc()-Ketten für den Body. Jede Änderung war damit eine Suchaktion mit vier Gelegenheiten, eine Stelle zu vergessen. */ --bm-kopf-hoehe: 3.75rem; position: fixed; inset: 0; /* Unter dem Termin-Modal (9999): Falls beide je gleichzeitig offen wären, liegt die Terminbuchung oben. Zwei Overlays sind zwar ein Bedienfehler, aber die Reihenfolge soll dann wenigstens stimmen. */ z-index: 9998; display: flex; align-items: center; justify-content: center; padding: var(--abstand-xl); } .bm-modal[hidden] { display: none; } .bm-modal__overlay { position: absolute; inset: 0; background: var(--farbe-schwarz-alpha-80); backdrop-filter: blur(0.25rem); } .bm-modal__container { position: relative; /* 72rem statt --container-lg (64rem): Der Zugewinn geht in den Rand und in die Raster, nicht in die Zeilenlänge. Die Branchenkacheln bekommen damit eine vierte Spalte und passen ohne Scrollen aufs Bild, die Kennzahlen stehen zu fünft in einer Reihe statt vier plus einer Waise. Breiter wäre falsch: Ein fast randloses Overlay wirkt nicht mehr wie eines. */ width: min(100%, 72rem); /* FESTE HÖHE, INHALT SCROLLT DARIN Vorher hatte der Container nur max-height und war damit exakt so hoch wie sein Inhalt. Beim Öffnen ist der aber leer — der Kasten erschien mit rund 11rem und wuchs, sobald der fetch zurückkam, in einem Frame auf das Vier- bis Fünffache. Weil das Overlay zentriert sitzt, sprang die Kopfleiste dabei um mehrere hundert Pixel nach oben. Der Rahmen steht jetzt ab dem ersten Frame und ändert sich nie wieder, auch nicht beim Schrittwechsel. Die mobile Fassung macht das seit jeher so und hatte den Fehler deshalb nicht. 48rem trägt Schritt 1 mit vier Kachelspalten ohne Scrollen; min() deckelt auf kleinen Fenstern. */ height: min(48rem, calc(100vh - 4rem)); height: min(48rem, calc(100dvh - 4rem)); /* Flex-Spalte statt calc(): Der Body nimmt den Rest unter der Leiste, ohne dass die Leistenhöhe ein zweites Mal ausgerechnet werden muss. */ display: flex; flex-direction: column; /* Platz für die fixierte Bedienleiste */ padding-top: var(--bm-kopf-hoehe); overflow: hidden; background: var(--farbe-weiss); border-radius: var(--radius); box-shadow: var(--schatten-2xl); animation: bm-modal-auf var(--transition-basis) var(--ease-out); } /* -------------------------------------------------------------------------- Bedienleiste Vorher schwebte das Schließen-Kreuz frei über dem Inhalt. In Schritt 3 glitt es beim Scrollen über den schwarzen Aufwand-Block — ein weisser Kreis auf schwarzer Fläche. Die Leiste gibt ihm eine Zeile, in der auch der Rückweg und der Fortschritt Platz haben, und deckt den durchscrollenden Inhalt ab. -------------------------------------------------------------------------- */ .bm-modal__kopf { position: absolute; inset: 0 0 auto 0; z-index: 3; /* Grid statt space-between: Letzteres zentriert den mittleren Block nur, wenn links und rechts gleich breit sind. "Zurück" misst rund 92px, das Kreuz 44px — der Fortschritt saß dadurch etwa 24px zu weit rechts. Mit drei gleichen Aussenspalten sitzt er wirklich mittig. Das trägt, weil von Zurück-Link und Platzhalter immer genau einer hidden ist: display:none nimmt das Element aus dem Raster, es bleiben exakt drei Felder. */ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--abstand-sm); height: var(--bm-kopf-hoehe); padding-inline: var(--abstand-lg); background: var(--farbe-weiss); border-bottom: 0.0625rem solid var(--farbe-grau); border-radius: var(--radius) var(--radius) 0 0; } /* Ohne justify-self füllt jedes Kind seine Rasterspalte aus — der Rückweg bekäme beim Überfahren eine Hover-Fläche über die halbe Leiste. */ .bm-modal__kopf > .bm-zurueck, .bm-modal__kopf > .bm-zurueck-platz { justify-self: start; } .bm-modal__kopf > .bm-modal__schliessen { justify-self: end; } /* Die Striche stehen zentriert ÜBER dem Text, nicht daneben. .bm-fortschritt ist ohnehin eine Spalte — die Leiste hatte sie nur auf row gezwungen. Höhenrechnung: Striche 4px, Abstand 4px, Textzeile 14px mal 1,6 gleich 22,4px. Zusammen 30,4px, in der 60px hohen Leiste bleiben oben und unten je rund 15px Luft. Die Leistenhöhe muss also nicht angefasst werden. */ .bm-fortschritt--leiste { align-items: center; gap: 0.25rem; min-width: 0; } .bm-fortschritt--leiste .bm-fortschritt__text { text-align: center; white-space: nowrap; } @keyframes bm-modal-auf { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .bm-modal__container { animation: none; } } /* Liegt jetzt in der Leiste und braucht keine eigene Positionierung mehr. Der Rahmen entfällt ebenfalls: In einer abgesetzten Zeile ist er nur noch Dekoration, freistehend war er die einzige Abgrenzung zum Inhalt. */ .bm-modal__schliessen { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; background: transparent; border: 0; border-radius: var(--radius-voll); color: var(--farbe-grau-dunkel); cursor: pointer; } .bm-modal__schliessen:hover { background: var(--farbe-weiss-warm); color: var(--farbe-kupfer); } .bm-modal__body { /* Füllt die Restfläche unter der Leiste. min-height:0 ist Pflicht: Ohne das weigert sich ein Flex-Item, unter seine Inhaltshöhe zu schrumpfen, und der Scrollbereich entstünde nie. */ flex: 1 1 auto; min-height: 0; max-height: none; /* Bezugsrahmen für die absolut positionierten Radio-Inputs. Ohne ihn hängen sie am Container ausserhalb dieses Scrollers — siehe die ausführliche Begründung an .bm-radio. */ position: relative; overflow-y: auto; /* Verhindert, dass die Seite dahinter mitscrollt, wenn das Overlay am Ende angekommen ist */ overscroll-behavior: contain; -webkit-overflow-scrolling: touch; /* Der Scrollbalken lag bisher direkt auf der Kante, und weil Schritt 1 kurz und Schritt 3 lang ist, erschien er erst beim Wechsel — der ganze Inhalt sprang dabei um die Balkenbreite zur Seite. scrollbar-gutter hält den Platz dauerhaft frei. */ scrollbar-gutter: stable; padding-inline: var(--abstand-sm); scrollbar-width: thin; scrollbar-color: var(--farbe-grau) transparent; } .bm-modal__body::-webkit-scrollbar { width: 0.5rem; } .bm-modal__body::-webkit-scrollbar-track { background: transparent; } .bm-modal__body::-webkit-scrollbar-thumb { background: var(--farbe-grau); border-radius: var(--radius-voll); } /* Aus dem Fluss genommen: Als Flow-Element mit 3rem Innenabstand veränderte jedes Ein- und Ausblenden die Höhe des Kastens — das war die zweite Stufe beim Öffnen. Jetzt liegt der Hinweis mittig im leeren Rahmen statt oben angeklebt und bewegt nichts mehr. */ .bm-modal__laedt { position: absolute; inset: var(--bm-kopf-hoehe) 0 0 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: var(--abstand-2xl); text-align: center; color: var(--farbe-grau-dunkel); } .bm-modal__laedt[hidden] { display: none; } /* Das fixierte Termin-Widget liegt sonst sichtbar unter dem Backdrop */ body.hat-bm-modal .termin-widget { display: none; } /* ========================================================================== 12 · Wizard im Modal-Kontext Derselbe Wizard läuft in zwei Rahmen. Nur drei Annahmen der Seitenfassung sind im Overlay falsch; sie werden hier umgehängt statt dupliziert. .bm-seite--modal (0,2,0) schlägt .bm-seite (0,1,0) auch innerhalb der Mobil-Medienabfrage, weil Medienabfragen die Spezifität nicht erhöhen. Deshalb genügt ein Block statt zweier gespiegelter Regeln. ========================================================================== */ .bm-seite--modal { padding: 0; background: transparent; min-height: 0; } /* Der 7-rem-Ausgleich gilt dem fixierten Seitenkopf. Im Overlay gibt es keinen, und der Abstand risse eine Lücke über der Überschrift. */ .bm-seite--modal .bm-schritt, .bm-seite--modal .bm-ergebnis { scroll-margin-top: 0; } /* Die Karte ist im Overlay bereits die Karte. */ .bm-seite--modal .bm-schritt, .bm-seite--modal .bm-ergebnis { box-shadow: none; border-radius: 0; padding: var(--abstand-xl) 0 var(--abstand-2xl); } /* Rückweg und Fortschritt stehen im Overlay in der fixierten Leiste der Hülle. Die Kopfzeile des Fragments wäre dort die zweite Anzeige derselben Sache — sie bleibt im Markup, damit die Vollseite unverändert funktioniert. */ .bm-seite--modal .bm-kopf { display: none; } /* Die Lesestrecke bleibt, wo sie war: Die zusätzliche Breite der Schale geht in den Rand, nicht in die Zeilenlänge. */ .bm-seite--modal .bm-container { width: min(100% - 4rem, var(--container-lg)); } @media (max-width: 47.9375em) { /* Mobil ein Sheet, kein Vollbild. Ein Overlay, das die ganze Fläche einnimmt, ist kein Overlay mehr, sondern eine Seite — der Nutzer verliert das Gefühl, jederzeit wieder herauszukommen. Die 2,5 rem sichtbarer Rest der Ausgangsseite und die abgerundete Oberkante sagen das ohne ein Wort. */ .bm-modal { padding: 0; align-items: flex-end; } .bm-modal__container { width: 100%; margin-top: 2.5rem; /* svh statt dvh ist hier der eigentliche Fix: Weil das Overlay die Seite dahinter sperrt, fährt die Adresszeile nicht ein. dvh misst dann die grössere Höhe, und der letzte Button rutscht unter die Browser-Toolbar. Für Overlays, die nicht mitwachsen dürfen, ist die kleine Variante die richtige. */ height: calc(100vh - 2.5rem); height: calc(100svh - 2.5rem); max-height: none; border-radius: var(--radius) var(--radius) 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); } .bm-modal__kopf { padding-inline: var(--abstand-md); border-radius: var(--radius) var(--radius) 0 0; } .bm-modal__body { /* Die calc()-Kette entfällt: Der Body ist Flex-Item und nimmt sich den Rest. Vorher war er um genau die Safe-Area zu hoch und wurde unten vom overflow:hidden des Containers abgeschnitten — der letzte Teil des Inhalts war damit nicht erreichbar. padding-inline aus der Desktop-Regel bleibt erhalten; die Safe-Area-Werte kommen als Margin dazu, statt es zu überschreiben. */ margin-left: env(safe-area-inset-left, 0px); margin-right: env(safe-area-inset-right, 0px); } /* 1 rem Rand ist für ein randloses Sheet zu knapp; 20 px sind das Minimum, das nicht gedrängt wirkt. */ .bm-seite--modal .bm-container { width: min(100% - 2.5rem, var(--container-lg)); } /* Der Zusatz ("· Ihre Zahlen") sprengt die Leiste: Bei 360px bleiben nach Zurück-Button, Kreuz und Abständen rund 160px, der volle Text braucht etwa 200px. Er brach um und schob die Leiste über den Inhalt — was wie eine zweite Fortschrittsanzeige aussah. "Schritt 3 von 3" allein misst rund 100px und passt einzeilig. */ .bm-fortschritt--leiste .bm-fortschritt__zusatz { display: none; } }