/* ========================================================================== Der Haus-Knopf - EIN Bauteil fuer alle Handlungsaufforderungen Es gab ihn im Projekt genau einmal: als .form__senden auf /kontakt/. Die Werte hier sind DIE GEMESSENEN WERTE VON DORT, unveraendert uebernommen, damit nichts driftet: Flaeche Markenblau, Schrift Weiss, Rand 1px Markenblau Form Pille (--r-pill), Mindesthoehe 44px, Polster 0 / --sp-6 Schrift --fs-200, Gewicht 600, VERSALIEN, --ls-caps Hover Flaeche geht auf Gold, Schrift auf Blau WARUM HOVER SO UND NICHT UMGEKEHRT: Blau auf Gold haelt gemessen 7,39:1. Weiss auf Gold waere 1,79:1 - Gold traegt als Flaeche nur mit blauer Schrift darauf. ANLASS FUER DIE HERAUSLOESUNG, 28.08.2026: die Schluss-Sektion der Karriereseite bekam eine eigene, ERFUNDENE Schaltflaeche - goldene Flaeche, blauer Rand, 28px klein geschrieben. Als nicht CD-konform gemeldet, und das war richtig: das Haus hat einen Knopf, und der sieht anders aus. Statt die Werte ein zweites Mal zu schreiben, stehen sie jetzt an EINER Stelle. .form__senden bleibt als Selektor bestehen und teilt diese Regel - das Kontaktformular ist damit unveraendert. Seine Layout-Eigenheit (justify-self im Formularraster) steht weiter in components/formular.css. ========================================================================== */ /* DER KNOPF MUSS IN SEINE SPALTE PASSEN, 15.09.2026. GEMESSEN bei 320 px: "Zum Bewerbungsformular" ergab 296 px - Text plus zweimal 32 px Polster -, die Inhaltsspalte ist dort 280 px breit. Der Knopf stand also 16 px darueber hinaus, und weil nichts ihn beschnitt, liess er die ganze Seite waagerecht scrollen: auf /karriere/ausbildung/ 56 px. Derselbe Knopf steckt in der Faktenbox der 14 Stellenseiten und sprengte sie dort genauso. ZWEI ZEILEN STATT UEBERLAUF: max-width haelt ihn in der Spalte, die Beschriftung bricht dann um. Damit zwei Zeilen nicht aneinanderkleben, bekommt er ein senkrechtes Polster - bei einer Zeile aendert das nichts, dort regiert weiter min-height (gemessen 44 px, Inhalt 33). text-align zentriert die umbrochene Zeile; bei einer Zeile ist es wirkungslos. */ .knopf, .form__senden { display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: var(--sp-3); max-width: 100%; min-height: 2.75rem; padding: var(--sp-2) var(--sp-6); background: var(--toem-blau); border: 1px solid var(--toem-blau); border-radius: var(--r-pill); font: inherit; font-size: var(--fs-200); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-on-dark); cursor: pointer; transition: background-color var(--dur-hover) var(--ease-hover), border-color var(--dur-hover) var(--ease-hover), color var(--dur-hover) var(--ease-hover); } .knopf:hover, .knopf:focus-visible, .form__senden:hover, .form__senden:focus-visible { background: var(--toem-gold); border-color: var(--toem-gold); color: var(--toem-blau); } /* Das Zeichen im Knopf geht beim Hover mit - dieselbe 3px-Bewegung wie bei den Textlinks des Projekts (.rez__all, .prod__all, .stkarte__pfeil). */ .knopf svg { flex: none; transition: transform var(--dur-hover) var(--ease-hover); } .knopf:hover svg, .knopf:focus-visible svg { transform: translateX(3px); } /* --- Text-CTAs: 44 px Trefferflaeche auf Touchbreiten ------------------ Kundenauftrag vom 10.09.2026: "Die CTAs auch nachziehen!" Sie waren im responsiven Durchgang als bekannte, benannte Abweichung stehen geblieben. GEMESSEN, WELCHE ES SIND - zwanzig Stellen in fuenf Gruppen, alle bei 390 px: 5x a.stkarte__pfeil 163x25 bis 315x25 ("Zu den Plaetzen", "Frage stellen", "Praktikum anfragen") 5x .puwofuer__liste a 187x26 bis 292x26 (Sortenlinks der Uebersicht) 4x .kziel__liste a, .kadr__liste a 90x40 und 219x40 (Telefon und Mail im Inhalt) -> NICHT hier, sondern am Ende von pages/kontakt.css: diese Datei laedt spaeter und wuerde die Regel schlagen. 4x .pbio__weg, .pukern__weg, .kaabbinder__weg 215x25 bis 341x25 ("So entsteht das Oel") 2x .faqf__weiter a 290x25 und 349x25 (weiterfuehrende Fragen) SIE TEILEN KEINE KLASSE, und das ist der eigentliche Befund: es ist fuenfmal dasselbe Bauteil - ein Textlink mit Pfeil, der eine Handlung anbietet - und fuenfmal eigenes CSS. Im Theme wird daraus EIN Bauteil und diese Liste faellt weg. Solange der Prototyp die gewachsenen Klassen traegt, steht die Regel hier an einer Stelle statt in fuenf Dateien; so ist die Naht sichtbar, an der das Bauteil entsteht. NUR AUF TOUCHBREITEN, wie bei der Fusszeile, den Zuruecklinks und den Eingabefeldern - dieselbe Grenze von 64rem. Mit der Maus sind 25 px unproblematisch, und WCAG 2.5.8 waere mit 24x24 ohnehin erfuellt; es ist die Projektregel von 44 px, die hier greift. MIN-HEIGHT PLUS ALIGN-ITEMS, NICHT PADDING: alle zwanzig sind Flex- oder Inline-Flex-Elemente, die Hoehe traegt die Mitte damit von selbst. Padding waere doppelt gerechnet und wuerde den Textfluss um die Links verschieben. */ @media (max-width: 64rem) { a.stkarte__pfeil, .puwofuer__liste a, .pbio__weg, .pukern__weg, .kaabbinder__weg, .faqf__weiter a { min-height: 2.75rem; align-items: center; } } /* AUF SCHMALEN SCHIRMEN WENIGER POLSTER. GEMESSEN bei 320 px, nachdem der Knopf umbrechen darf: die Beschriftung bricht, aber "BEWERBUNGSFORMULAR" ist als ein Wort 194 px breit; mit 64 px Polster, 12 px Luecke und dem 18-px-Zeichen blieben 6 px Ueberstand - sichtbar am Pfeil, der aus der Pille ragte. 16 px Polster statt 32 nehmen ihn weg, und hyphens: auto trennt das Wort, wenn es trotzdem nicht passt. */ @media (max-width: 30rem) { .knopf, .form__senden { padding-inline: var(--sp-4); hyphens: auto; } }