/* Trefferflächen auf schmalen Schirmen. Anlass ist Punkt 14 der Landingpage-Prüfung vom 29.08.2026: Auf einem iPhone 14 (390 Pixel breit) waren 22 der 23 Bedienelemente der Seite /b/ kleiner als 44 mal 44 Pixel, darunter der Absendeknopf des Anfrageformulars mit 36 mal 150 Pixel. Wer sein Ziel mehrfach treffen muss, bricht ab, und beim Absendeknopf kostet genau das die Anfrage. Warum eine eigene Datei und nicht portal.css oder wbo.css: Diese Regeln ändern keine Farbe, keine Schrift und keinen Markenwert, sie ändern nur Trefferflächen. In einer eigenen Datei bleibt das trennbar und einzeln zurücknehmbar, und die beiden Markendateien bleiben unberührt. Sie muss NACH portal.css und NACH wbo.css geladen werden, sonst gewinnen dort die Innenabstände der Knöpfe. Warum nur unter 640 Pixel: Am Rechner mit Maus ist ein Ziel von 44 Pixeln unnötig groß und würde das Bild verändern, ohne etwas zu verbessern. 640 Pixel ist die Schwelle, die portal.css und wbo.css bereits benutzen; eine dritte Schwelle daneben würde nur die nächste Abweichung erzeugen. Zwei Wege, bewusst getrennt gehalten: 1. Was der Besucher als Bedienfeld sieht (Knopf, Eingabefeld, Auswahl), wächst selbst auf 44 Pixel. Bei einem Eingabefeld geht es gar nicht anders: eine unsichtbare Fläche darüber würde das Tippen abfangen. 2. Was mitten im Text steht (ein Verweis in einem Satz, die Zeile zum Aufklappen des Kleingedruckten am Seitenfuß), behält seine Größe und wächst unsichtbar: ein Verweis im Satz über senkrechten Innenabstand, der die Zeilenhöhe nicht anfasst, jene eine Aufklappzeile über eine durchsichtige Fläche darüber. Warum zweierlei, steht bei den Regeln selbst. Das Schriftbild bleibt in beiden Fällen unverändert. ⚠ „Aufklappzeile" ist dabei KEIN Merkmal, an dem sich der Weg entscheidet (Nachtrag 29.08.2026). Bis dahin stand hier pauschal, eine Aufklappzeile gehe über Weg 2, weil es nur eine einzige gab, nämlich die des Kleingedruckten. Seit die Kursübersicht der Landingpages einen Aufklappbaum hat, gibt es beide Sorten: Dessen Zeilen sind ganze Kartenzeilen und gehen deshalb über Weg 1, siehe die Begründung bei der Regel unten. Es entscheidet also, WAS das Element ist (ein Stück Fließtext oder eine eigene Fläche), und nicht, ob es etwas aufklappt. `tests/test_bedienbarkeit.py` prüft beide Sorten getrennt und schlägt an, sobald eine dritte dazukommt. Weg 2 kommt nur dort zum Einsatz, wo darüber und darunter genug Platz ist. Sonst würde er die Klicks des Nachbarn abfangen, und ein Ziel, das den falschen Verweis öffnet, ist schlechter als ein zu kleines. Deshalb fehlen hier die Rufnummern und E-Mail-Adressen in der Partnerzeile und in der Karte „Direkt sprechen": Dort stehen zwei Verweise 6,3 Pixel bzw. 0 Pixel voneinander entfernt in einem Fließtext, und 44 Pixel sind ohne Änderung an der Vorlage nicht zu holen. Der Prüfbericht schlägt für diese Stellen ohnehin den richtigen Weg vor, nämlich die Rufnummer als Knopf auszugeben statt als Textverweis. */ @media (max-width: 640px) { /* Knöpfe. min-height statt größerer Innenabstände, damit die Schrift mittig bleibt und ein Knopf, der ohnehin schon 44 Pixel erreicht, nicht zusätzlich wächst. Das inline-flex ist dafür nötig: Bei einem mit min-height klebt die Schrift sonst oben statt in der Mitte. In der Knopfreihe des Heldbereichs und in der Knopfreihe der Partnerzeile sind die Knöpfe ohnehin Flex-Elemente, dort wird inline-flex zu flex, das Ergebnis bleibt dasselbe. */ .knopf { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Der Absendeknopf hat Vorrang vor allen anderen Zielen dieser Datei. 48 Pixel und volle Breite nach dem Vorschlag des Prüfberichts: Er steht am Ende einer Formularspalte, dort ist links und rechts nichts, was die Breite noch brauchen könnte, und er ist die einzige Stelle der Seite, an der ein Fehlgriff unmittelbar eine Anfrage kostet. Der Selektor greift bewusst nur direkte Kinder eines Formulars. So bleiben Knöpfe unberührt, die in einer Zeile neben einem Feld sitzen und durch volle Breite umbrechen würden. */ form > button[type="submit"].knopf { min-height: 48px; width: 100%; } /* Eingabefelder und Auswahlen. Der Text bleibt mittig, weil ein Feld seinen Inhalt selbst mittig setzt; nur der Rahmen wächst von 36 auf 44 Pixel. Ankreuzfelder stehen absichtlich nicht in der Liste: Ein Kästchen von 44 Pixeln sähe aus wie ein Fehler, dort trägt die Beschriftung die Trefferfläche. textarea fehlt ebenfalls mit Absicht: portal.css gibt ihm bereits 90 Pixel, eine Regel mit 44 würde es hier verkleinern. */ input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="tel"], select { min-height: 44px; } /* Verweise im Fließtext. Sie behalten ihre Größe und ihren Platz im Satz, die Trefferfläche wächst unsichtbar über den Innenabstand. Warum Innenabstand und nicht eine Fläche darüber: Bei einem Element im Textfluss zählt senkrechter Innenabstand nicht zur Zeilenhöhe. Die Zeilen rücken also nicht auseinander, das Schriftbild bleibt Pixel für Pixel dasselbe, und die Fläche wächst trotzdem. Eine aufgelegte Fläche kann das eine nicht: Bricht ein Verweis über zwei Zeilen um, liegt sie zwischen den Zeilen statt auf ihnen. Gemessen am 29.08.2026 auf der Unternehmensseite, wo der Verweis „Plus 5 Prozentpunkte bei Tarifvertrag" umbricht: mit aufgelegter Fläche blieb er bei 14 Pixeln, mit Innenabstand bekommt jede der beiden Zeilen ihre 44. 15 plus 15 Pixel auf die 14 Pixel Schrifthöhe ergeben genau 44. Ausgenommen sind tel: und mailto:, siehe die Begründung im Kopf dieser Datei, und .knopf, weil ein Knopf oben schon gewachsen ist. */ p.klein a:not(.knopf):not([href^="tel:"]):not([href^="mailto:"]), .fuss a:not([href^="tel:"]):not([href^="mailto:"]) { padding-top: 15px; padding-bottom: 15px; } /* Die Zeile zum Aufklappen des Kleingedruckten ist ein Block, dort würde Innenabstand den Kasten wirklich auseinanderziehen. Sie bekommt deshalb eine durchsichtige Fläche aufgelegt. Sie steht allein, der nächste Bedienpunkt ist 114 Pixel entfernt, also nimmt die Fläche niemandem etwas weg. position: relative verschiebt nichts, es setzt nur den Bezugspunkt. */ .kleingedrucktes > summary { position: relative; } .kleingedrucktes > summary::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 22px); height: 44px; } /* Die Aufklappzeilen der Kursübersicht auf den Landingpages (29.08.2026). Diese Zeile ist der Boden, nicht der Antrieb, und das steht hier, damit niemand sie für wirkungslos hält und streicht. Gemessen am 29.08.2026 in Chromium bei 390 Pixeln: Die Zeile trägt schon aus den Innenabständen in wbo.css 104,4 Pixel (Bereich) und 99,7 Pixel (Kurs), weil unter 700 Pixeln die Anzahl beziehungsweise der Umfang in eine zweite Zeile rückt. Unter 640 Pixeln greift diese Regel deshalb heute nie. Sie greift in dem Augenblick, in dem jemand an einer dieser Stellen dreht. Die einzeilige Fassung am Rechner misst 50,1 und 46,0 Pixel, beim Kurs also 2 Pixel Luft: Wer den Umbruch zurücknimmt oder den Innenabstand von 12 auf 10 Pixel setzt, ist ohne diese Zeile darunter. Der Auftrag nennt für den Punkt ohne jede Regel 35,3 Pixel; in der Prüfseite hier waren es 112,2 Pixel, weil h3 und h4 dann noch die Abstände aus portal.css mitbringen. Beide Zahlen sagen dasselbe: ohne Regel ist die Höhe Zufall. Hier `min-height` und ausdrücklich NICHT die aufgelegte Fläche, mit der diese Datei sonst arbeitet. Das ist kein Versehen, sondern folgt Weg 1 aus dem Kopf dieser Datei: Der Aufklapppunkt IST die ganze Kartenzeile. Er hat oben und unten den Abstand der Karte für sich, sein nächster Nachbar ist die nächste Karte, und ein Wachsen der Zeile verschiebt nichts daneben, es macht nur die Karte höher. Eine durchsichtige Fläche wäre hier der Umweg und läge bei einem über zwei Zeilen umbrechenden Kursnamen zwischen den Zeilen statt auf ihnen. Die Zeile ist ein Flex-Element mit `align-items: center` (wbo.css), deshalb bleibt die Schrift bei wachsender Höhe mittig; ein zusätzliches `display: inline-flex` wie bei den Knöpfen wäre hier falsch, es machte aus der Zeile ein Element in Textbreite. Die Ausnahme für tel: und mailto: weiter oben bleibt davon unberührt. */ .kursbaum summary { min-height: 44px; } }