/* ========================================================================= Physiotherapie Coumans (Gilching) · Karrierebereich bewerbung.physiotherapie-gilching.de · Agentur Krüger · Stand 11.09.2026 Token-Satz übernommen aus dem Rebuild der Hauptseite (02_WEBSITE, gemessen an der Live-Quelle am 31.08.2026): Montserrat, Marken-Lila #700959, Gelbgrün #CAD400, Fließtext #282828 in 20 px, Karten mit 20 px Radius, eckige Knöpfe. Der :root-Block ist die einzige Stelle mit Farbwerten. Keine Silbentrennung (Hausregel), keine fremden Schriften. ========================================================================= */ @font-face { font-family: 'montserrat custom'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/montserrat-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'montserrat custom'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/montserrat-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { --color-bg: #ffffff; --color-surface: #F4F4F4; --color-band: #DCDFE4; /* Vorteile-Band der Quelle */ --color-text: #282828; /* BEFUND 16.09.2026: Hier stand #767676 mit dem Kommentar „4,54:1 auf Weiß". Die Rechnung stimmte — nur wird die Farbe fast nie auf Weiß benutzt, sondern auf der grauen Fläche (#F4F4F4). Dort sind es 4,13:1, und damit liegen acht Textstellen unter der Grenze: die Erklärzeilen im Bewerbungsteil, die Links zu Impressum, Datenschutz und Widerruf, und die KI-Kennzeichnung im Fuß. Ein Kontrastwert gilt immer nur gegen einen bestimmten Grund; hier war er gegen den falschen gerechnet. #5F5F5F trägt auf allen drei Flächen, die es hier gibt: Weiß 6,39:1 · #F4F4F4 5,81:1 · Band #DCDFE4 4,78:1. */ --color-muted: #5F5F5F; --color-primary: #700959; --color-primary-dark: #570745; --color-primary-soft: #F6ECF3; /* Lila, 8 % auf Weiß: gewählte Kacheln, Hinweise */ --color-accent: #CAD400; /* Gelbgrün, nur als Fläche oder auf Dunkel, nie als Text auf Hell */ --color-accent-text-dark: #282828; --color-auf-dunkel: #ffffff; --color-border: #DCDFE4; --color-fehler: #B3401A; /* 5,2:1 auf Weiß */ --color-ok: #3F6606; --font-body: 'montserrat custom', 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --radius: 20px; --radius-sm: 4px; --shadow: 0 4px 20px rgba(40, 40, 40, .08); --shadow-hoch: 0 12px 32px rgba(40, 40, 40, .14); --container: 1140px; --container-schmal: 760px; --pad: 1rem; --kopf-hoehe: 91px; /* haftende Nav-Leiste, Mass der Praxis-Website */ --topbar-hoehe: 80px; /* RESPECT-Zeile, scrollt weg */ } *, *::before, *::after { box-sizing: border-box; } /* Formularelemente erben die Schrift nicht von selbst — der Browser setzt dort seine eigene (gemessen 15.09.2026: `button.nav-toggle` lief auf Arial). Das faellt erst auf, wenn so ein Element Text traegt, und dann steht mitten auf der Seite eine fremde Schrift. Einmal global statt je Bauteil. */ button, input, select, textarea { font: inherit; color: inherit; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-hoehe) + 12px); -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font-body); color: var(--color-text); background: var(--color-bg); font-size: 20px; line-height: 1.65; overflow-wrap: break-word; hyphens: manual; } img, picture, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--color-primary); text-decoration: underline; text-underline-offset: .12em; } a:hover { color: var(--color-primary-dark); } :focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; } strong, b { font-weight: 700; } p { margin: 0 0 1.2em; } ul, ol { margin: 0 0 1.2em; padding-left: 1.3em; } li { margin-bottom: .35em; } h1, h2, h3, h4 { text-transform: uppercase; color: var(--color-text); margin: 0 0 .6em; line-height: 1.3; } h1 { font-size: clamp(31px, 3.5vw, 50px); font-weight: 700; line-height: 1.4; } h2 { font-size: clamp(30px, 3.2vw, 40px); font-weight: 400; } h2 strong, h2 b { font-weight: 700; } h3 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; } h4 { font-size: clamp(20px, 2vw, 23px); font-weight: 700; } .titel-lila { color: var(--color-primary); } .text-center { text-align: center; } .text-klein { font-size: 17px; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .container { width: 100%; max-width: calc(var(--container) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); } .container--schmal { max-width: calc(var(--container-schmal) + 2 * var(--pad)); } /* ---------- Knöpfe: eckig, 20 px, 600, wie in der Quelle ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 44px; padding: 10px 24px; border: 2px solid transparent; border-radius: 0; font-family: inherit; font-size: 20px; font-weight: 600; line-height: 1.1; text-align: center; text-decoration: none; cursor: pointer; transition: background .2s ease, color .2s ease, transform .05s ease; } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: .6; cursor: not-allowed; } .btn--primary { background: var(--color-primary); color: var(--color-auf-dunkel); border-color: var(--color-primary); } .btn--primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: var(--color-auf-dunkel); } .btn--gelb { background: var(--color-accent); color: var(--color-accent-text-dark); border-color: var(--color-accent); } .btn--gelb:hover { background: #b9c200; border-color: #b9c200; color: var(--color-accent-text-dark); } .btn--outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); } .btn--outline:hover { background: var(--color-primary-soft); color: var(--color-primary-dark); } .btn--hell { background: var(--color-auf-dunkel); color: var(--color-primary); border-color: var(--color-auf-dunkel); } .btn--hell:hover { background: var(--color-surface); color: var(--color-primary-dark); } .btn--breit { width: 100%; } .btn--klein { font-size: 17px; min-height: 40px; padding: 8px 18px; } /* Umriss auf dunklem Grund — Gegenstück zu .btn--outline, das auf Hell gedacht ist und auf Dunkel unlesbar wäre. Gebraucht im Einwilligungsbanner. */ .btn--umriss-hell { background: transparent; color: var(--color-auf-dunkel); border-color: var(--color-auf-dunkel); } .btn--umriss-hell:hover { background: rgba(255, 255, 255, .12); color: var(--color-auf-dunkel); } /* ---------- Einwilligungsbanner ---------- BEFUND 16.09.2026: Zu diesem Banner gab es keine einzige CSS-Regel, und seine Knöpfe trugen „btn-primary"/„btn-outline" — Klassen, die es hier nie gab (das Haus schreibt BEM mit zwei Bindestrichen). Aufgefallen ist das erst an diesem Tag, weil das Banner nur erscheint, wenn eine Mess-ID eingetragen ist; bis dahin war es totes HTML. Mit dem Start der Meta-Kampagne ist es das Erste, was jeder Anzeigen-Klick zu sehen bekommt: ein unformatierter Kasten mit zwei grauen Systemknöpfen. Beide Knöpfe sind bewusst gleich groß, gleich hoch und nebeneinander. Ein Ablehnen, das kleiner oder blasser ist als das Zustimmen, ist keine freiwillige Einwilligung — der gängige Prüfmaßstab der Aufsichtsbehörden. */ .consent-banner { position: fixed; inset-inline: 0; bottom: 0; z-index: 900; background: var(--color-text); color: var(--color-auf-dunkel); box-shadow: 0 -8px 28px rgba(40, 40, 40, .28); animation: consent-auf .25s ease-out; } @media (prefers-reduced-motion: reduce) { .consent-banner { animation: none; } } @keyframes consent-auf { from { transform: translateY(100%); } to { transform: none; } } .consent-inner { width: 100%; max-width: calc(var(--container) + 2 * var(--pad)); margin-inline: auto; padding: 20px var(--pad); display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); flex-wrap: wrap; } .consent-text { margin: 0; flex: 1 1 320px; font-size: 17px; line-height: 1.55; } .consent-text a { color: var(--color-accent); } .consent-text a:hover { color: var(--color-accent); text-decoration-thickness: 2px; } .consent-buttons { display: flex; gap: 12px; flex: 0 0 auto; } .consent-buttons .btn { font-size: 17px; padding: 10px 20px; } @media (max-width: 640px) { .consent-inner { padding: 16px var(--pad); gap: 14px; } .consent-buttons { width: 100%; } /* Nebeneinander und exakt gleich breit: Auf dem Handy ist Untereinander die übliche Stelle, an der das Ablehnen nach unten rutscht und dadurch weniger gewichtig wirkt. */ .consent-buttons .btn { flex: 1 1 0; } } .skip-link { position: absolute; left: -999px; top: 8px; z-index: 1000; background: var(--color-primary); color: #fff; padding: 10px 16px; } .skip-link:focus { left: 8px; } /* ---------- Kopf ---------- Masse aus der Praxis-Website uebernommen (15.09.2026): dunkle RESPECT-Zeile 80 px, weisse Nav-Leiste 91 px. Die RESPECT-Zeile scrollt weg, die Nav-Leiste haftet — dort geloest ueber ein negatives `top` am Kopf-Wrapper, weil `position: sticky` an einem Kind wirkungslos waere (ein haftendes Element kann seinen Elternkasten nicht verlassen). Genauso hier. */ .topbar { background: var(--color-text); color: var(--color-auf-dunkel); font-size: 16px; } .topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 80px; } .topbar__inner img { width: 300px; height: auto; } .topbar__respect { display: inline-flex; } .topbar a { color: var(--color-auf-dunkel); text-decoration: none; } .topbar a:hover { color: var(--color-accent); } .topbar__hinweis { margin: 0; } .topbar__aktionen { display: flex; gap: 1rem; align-items: center; margin: 0; } .topbar__aktionen > a[aria-label] { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; transition: background-color .15s ease, color .15s ease; } .topbar__aktionen > a[aria-label]:hover, .topbar__aktionen > a[aria-label]:focus-visible { color: var(--color-accent); background: rgba(255, 255, 255, .1); } .topbar__tel { white-space: nowrap; } .site-header { position: sticky; top: calc(-1 * var(--topbar-hoehe, 80px)); z-index: 50; } .header-bar { background: var(--color-bg); border-bottom: 1px solid var(--color-border); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 91px; } /* 91 px — der Wert aus 01_QUELLE/messwerte (weisse Leiste y=80, h=91), plus 1 px Trennlinie ergibt die 92 px, die die Praxis-Website ausliefert. Zwischendurch stand hier 104: Eine Messung an der Hauptseite hatte 105 ergeben, aber nur, weil dort gerade der neue Nav-Reiter den Aufklapp-Pfeil in eine zweite Zeile gedrueckt hatte. Gemessen war richtig, das Subjekt war falsch (15.09.2026). */ .header-logo img { width: 232px; height: auto; } .nav-toggle { display: none; background: none; border: 0; padding: 10px; cursor: pointer; } .nav-toggle span { display: block; width: 28px; height: 3px; background: var(--color-text); margin: 5px 0; transition: transform .2s ease, opacity .2s ease; } .main-nav { display: flex; align-items: center; gap: 1.4rem; } /* `:not(.btn)` ist hier nicht Kosmetik, sondern ein Kontrast-Fix (15.09.2026): Der Selektor `.main-nav a` (0,1,1) schlug `.btn--primary` (0,1,0) und faerbte den Text des Bewerben-Knopfes im Kopf grau (#767676) auf Lila (#700959) — gemessen 2,7:1, also klar unter WCAG AA. Genau der Knopf, auf den alles zeigt. Mit `:not(.btn)` greift die Nav-Farbe nur noch auf echte Navigations- links; Knoepfe behalten ihre eigene Schriftfarbe (Weiss = 9,6:1). */ .main-nav a:not(.btn) { color: var(--color-muted); font-weight: 600; font-size: 18px; text-decoration: none; padding: 6px 0; } .main-nav a:not(.btn):hover, .main-nav a:not(.btn).aktiv { color: var(--color-primary); } .main-nav .btn { font-size: 18px; min-height: 44px; padding: 8px 18px; } /* 44 statt 42: Der Bewerben-Knopf ist der wichtigste Knopf des Bereichs und lag zwei Pixel unter der Mindest-Tippflaeche (gemessen 15.09.2026). */ @media (max-width: 960px) { .nav-toggle { display: block; } .main-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--color-bg); box-shadow: 0 12px 24px rgba(0,0,0,.12); padding: .5rem var(--pad) 1rem; } .main-nav.offen { display: flex; } /* Auch hier `:not(.btn)`: sonst uebernimmt der Bewerben-Knopf im Klappmenue den 1-px-Trennstrich der Liste und verliert seinen eigenen 2-px-Rahmen (derselbe Spezifitaetsfall wie oben, 0,1,1 schlaegt 0,1,0). */ .main-nav a:not(.btn) { padding: 12px 0; border-bottom: 1px solid var(--color-border); font-size: 20px; } .main-nav .btn { margin-top: .75rem; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .header-logo img { width: 190px; } } /* Handy: Die Praxis-Website verkleinert den RESPECT-Schriftzug auf 180 px und blendet die Social-Symbole aus (gemessen dort @390). Hier bleibt zusaetzlich die Telefonnummer stehen — auf einer Karriereseite ist das der schnellste Weg zur Praxis, und sie ist der einzige Inhalt der Zeile, der etwas kostet, wenn er fehlt. */ @media (max-width: 640px) { :root { --topbar-hoehe: 132px; } .topbar__inner { flex-direction: column; justify-content: center; gap: .25rem; min-height: 132px; padding-block: 10px; } .topbar__inner img { width: 180px; } .topbar__aktionen > a[aria-label] { display: none; } .topbar__hinweis { display: none; } } /* ---------- Hero ---------- */ .hero { position: relative; isolation: isolate; color: var(--color-auf-dunkel); padding-block: clamp(80px, 12vw, 190px); background: var(--color-text) var(--hero-bild, none) center / cover no-repeat; } .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(40,40,40,.82) 0%, rgba(40,40,40,.62) 55%, rgba(40,40,40,.35) 100%); } /* Kleineres Hero-Bild auf schmalen Geräten (16.09.2026). Ein Hintergrundbild kennt kein srcset — das Handy lud deshalb dieselbe Datei wie ein 27-Zoll-Monitor: auf der Anzeigen-Landingpage /bewerben/schroth/ waren das 331 KB, bevor überhaupt etwas zu sehen war. Bei einer Meta-Kampagne kommt fast jeder Klick vom Handy und oft über Mobilfunk; das ist dort der erste Eindruck und die erste Abbruchstelle. Mit der mobilen Variante sind es 33 KB. Fehlt eine `-m.webp`, greift der zweite Wert und es bleibt beim Desktop-Bild — die Regel kann also nie ein Bild wegnehmen. */ @media (max-width: 760px) { .hero { background-image: var(--hero-bild-m, var(--hero-bild, none)); } } .hero h1 { color: var(--color-auf-dunkel); max-width: 20ch; } /* Zweite Zeile WEISS, nicht gelbgruen (15.09.2026). Die Praxis-Website setzt ihre Hero-Ueberschriften durchgehend weiss — gemessen auf allen 28 Seiten; Gelbgruen ist dort Akzentfarbe auf hellen Baendern, nicht Ueberschriftfarbe im Bild. Zweifarbig war eine Eigenentscheidung dieses Bereichs und sah neben der Hauptseite nach einer anderen Marke aus. */ .hero h1 .hero__zeile2 { display: block; color: inherit; } .hero__ort { font-size: clamp(20px, 2vw, 25px); margin-bottom: .5em; } .hero__lead { max-width: 640px; font-size: 20px; } .hero__aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.4rem; } .hero__punkte { list-style: none; padding: 0; margin: 1.4rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; font-size: 17px; } .hero__punkte li { display: inline-flex; align-items: center; gap: .45em; } .hero__punkte svg { width: 20px; height: 20px; flex: none; color: var(--color-accent); } .hero--schmal { padding-block: clamp(56px, 8vw, 110px); } .hero--hell { color: var(--color-text); background: var(--color-surface); } .hero--hell::before { display: none; } .hero--hell h1 { color: var(--color-text); } .hero--hell h1 .hero__zeile2 { color: var(--color-primary); } /* ---------- Abschnitte ---------- */ .abschnitt { padding-block: clamp(56px, 7vw, 96px); } .abschnitt--grau { background: var(--color-surface); } .abschnitt--band { background: var(--color-band); } .abschnitt--lila { background: var(--color-primary); color: var(--color-auf-dunkel); } .abschnitt--lila h2, .abschnitt--lila h3 { color: var(--color-auf-dunkel); } .abschnitt--lila a:not(.btn) { color: var(--color-auf-dunkel); } /* BEFUND 18.09.2026 (beim Zitat-Kasten mitgemessen): Auf der Schroth-Seite stand unter dem Zitat ein `.btn--primary` — lila Fläche, lila Rand, mitten auf dem lila Band. Flächenkontrast 1,00:1: Vom Knopf war nichts zu sehen außer der weißen Schrift, er sah aus wie eine fettgedruckte Zeile. Auf den anderen Stellenseiten liegt derselbe Knopf auf hellem Grund und fiel darum nie auf. Deshalb steht die Regel hier am Abschnitt und nicht am einzelnen Knopf: Wer künftig einen Haupt-Knopf in ein lila Band setzt, bekommt automatisch die helle Fassung, die dort schon im Kopfbereich benutzt wird. Weiß auf Lila 10,2:1 · Beschriftung Lila auf Weiß 10,2:1. */ .abschnitt--lila .btn--primary { background: var(--color-auf-dunkel); color: var(--color-primary); border-color: var(--color-auf-dunkel); } .abschnitt--lila .btn--primary:hover { background: var(--color-surface); color: var(--color-primary-dark); border-color: var(--color-surface); } .abschnitt--eng { padding-block: clamp(36px, 5vw, 56px); } .abschnitt__kopf { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); } .abschnitt__kopf--mitte { margin-inline: auto; text-align: center; } /* Zwei gleich hinterlegte Abschnitte, die aneinanderstoßen (16.09.2026). BEFUND: Auf fünf Seiten folgte auf „abschnitt--grau" direkt „abschnitt--grau bewerben". Beide bringen 96 px Polster mit, macht 192 px Leere am Stück — und weil der Grund derselbe ist, sieht der Besucher keine Kante, sondern ein Loch. Es lag ausgerechnet direkt über „Deine Bewerbung in 60 Sekunden", also vor dem einzigen Element, auf das die ganze Seite zielt. Am Handy fiel es nicht auf (2 × 56 px), deshalb nur dort gemessen, wo es auftritt: ab der Breite, bei der clamp() über 56 px hinausgeht. Gemeldet von tools/abstaende-pruefen.js, im Bild bestätigt. */ .abschnitt--grau + .abschnitt--grau, .abschnitt--lila + .abschnitt--lila, .abschnitt--band + .abschnitt--band { padding-top: 0; } /* Maße, die bis zum 16.09.2026 als style="margin-top:…" in den Seiten standen. Inline schlägt jede Regel und lässt sich später nirgends zentral ändern — deshalb hier, benannt nach dem Zweck statt nach dem Wert. */ .nachsatz { margin-top: clamp(20px, 2.5vw, 32px); } .nachsatz--weit { margin-top: clamp(24px, 3vw, 40px); } /* Zwischentitel auf der Danke-Seite. Stand bis 16.09.2026 als style="font-size:23px" in der Seite — eine feste Pixelgröße, die als einzige Überschrift der Seite nicht mitwächst. */ .danke-zwischentitel { font-size: clamp(20px, 2.4vw, 24px); margin-top: clamp(24px, 3vw, 40px); } .cta-schmal { padding-block: 36px; text-align: center; background: var(--color-bg); } /* ---------- Bänder Bild + Text ---------- */ .band { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; } @media (min-width: 900px) { .band { grid-template-columns: 1fr 1fr; } .band--bild-rechts .band__bild { order: 2; } } .band__bild img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); object-fit: cover; } .band__bild--rund img { aspect-ratio: 1; } .band__liste { padding-left: 0; list-style: none; } .band__liste li { position: relative; padding-left: 1.6em; margin-bottom: .5em; } .band__liste li::before { content: ""; position: absolute; left: 0; top: .45em; width: .9em; height: .9em; background: var(--color-accent); border-radius: 50%; } .abschnitt--lila .band__liste li::before { background: var(--color-accent); } /* ---------- Stellenkarten ---------- */ .stellen-grid { display: grid; gap: 24px; } @media (min-width: 760px) { .stellen-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } } .stelle-karte { position: relative; display: flex; flex-direction: column; background: var(--color-bg); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); border: 1px solid var(--color-border); transition: transform .15s ease, box-shadow .15s ease; } .stelle-karte:hover { transform: translateY(-3px); box-shadow: var(--shadow-hoch); } .stelle-karte--hervor { border: 2px solid var(--color-primary); } .stelle-karte h3 { font-size: clamp(22px, 2vw, 25px); margin-bottom: .4em; } .stelle-karte h3 a { color: inherit; text-decoration: none; } .stelle-karte h3 a::after { content: ""; position: absolute; inset: 0; } .badge { display: inline-block; align-self: flex-start; background: var(--color-accent); color: var(--color-accent-text-dark); font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; padding: 4px 10px; margin-bottom: 14px; } .badge--lila { background: var(--color-primary); color: var(--color-auf-dunkel); } .stelle-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: 16px; color: var(--color-muted); margin: 0 0 14px; padding: 0; list-style: none; } .stelle-meta li { display: inline-flex; align-items: center; gap: .35em; margin: 0; } .stelle-meta svg { width: 16px; height: 16px; color: var(--color-primary); flex: none; } .stelle-karte p { flex: 1; font-size: 18px; } .stelle-karte__link { position: relative; z-index: 1; font-weight: 600; text-decoration: none; } .stelle-karte__link::after { content: " \2192"; } /* Drei Stellen nebeneinander, die Initiativbewerbung als breite Karte darunter (15.09.2026). Vorher fuellte `auto-fit` drei Spalten und liess die vierte Karte allein in der zweiten Zeile stehen — das sah aus, als sei die Seite mitten im Laden stehengeblieben. Die Hierarchie stimmt jetzt auch inhaltlich: drei ausgeschriebene Stellen, darunter das Auffangangebot. Der Block steht bewusst HINTER `.stelle-karte`: beide Selektoren haben dieselbe Spezifitaet (0,1,0), es entscheidet allein die Reihenfolge. Weiter oben notiert blieb `display: grid` wirkungslos — die Karte war weiter Flex und zentrierte ihren Inhalt (gemessen 15.09.2026). */ @media (min-width: 900px) { .stellen-grid--drei { grid-template-columns: repeat(3, 1fr); } /* 22.09.2026: Die Rezeptionsstelle ist besetzt und aus dem Bereich genommen. Damit stehen zwei ausgeschriebene Stellen statt drei. `auto-fit` haette bei dieser Breite weiter drei Spalten gebildet und die dritte leer gelassen — zwei schmale Karten links, rechts ein Loch. `--zwei` haelt die Reihe voll; die breite Karte darunter (`grid-column: 1 / -1`) spannt weiterhin ueber alles. */ .stellen-grid--zwei { grid-template-columns: repeat(2, 1fr); } /* `grid-template-rows` explizit, damit `grid-row: 1 / -1` am Link auch wirkt: ohne explizite Zeilen zaehlt `-1` nur bis zur ersten impliziten, und der Link klebte oben statt mittig (gemessen 15.09.2026). */ .stelle-karte--breit { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; grid-template-rows: repeat(4, auto); align-items: center; gap: 8px 40px; } .stelle-karte--breit > * { grid-column: 1; } /* Das Grid blockifiziert seine Kinder: die Badge ist `inline-block`, wird als Grid-Element aber zum Block und zoege ihre lila Flaeche ueber die ganze Spalte (gemessen 776 statt 136 px). `justify-self: start` haelt sie auf Inhaltsbreite. */ .stelle-karte--breit .badge { justify-self: start; } .stelle-karte--breit h3 { margin-bottom: 0; } .stelle-karte--breit .stelle-meta { margin-bottom: 0; } .stelle-karte--breit p { margin: 0; flex: none; } .stelle-karte--breit .stelle-karte__link { grid-column: 2; grid-row: 1 / -1; align-self: center; white-space: nowrap; } } /* ---------- Vorteile ---------- */ .vorteile-raster { display: grid; gap: 30px; } @media (min-width: 760px) { .vorteile-raster { grid-template-columns: 1fr 1fr; } } .vorteil-karte { background: var(--color-bg); border-radius: var(--radius); padding: 30px; text-align: center; box-shadow: var(--shadow); } /* BEFUND 16.09.2026 (Julian, Screenshot): Vier der fuenf Icons trugen einen eingebrannten dunkelgruenen Kasten (rgb(72,108,85)), das Haus-Icon nicht — die Karten sahen aus wie aus zwei Baukaesten. Ursache: Bei der Bildaufbereitung war die Freistellung plattgedrueckt worden (Teil E-2 der Entscheidungen), und nur icon-5.webp wurde spaeter aus der Quelle nachgeladen. PNG und WebP zeigten dadurch sogar VERSCHIEDENE Bilder: Chrome nimmt WebP, Browser ohne WebP das PNG. Alle fuenf liegen jetzt freigestellt vor (1080er Original, auf 196 skaliert, 79-85 % transparent). Die Flaeche macht ab jetzt das CSS — ein Bild kann nicht mehr ausscheren, und die Farbe ist die der Marke statt eines fremden Gruens. Gelbgruen auf Lila: 7,3:1. */ .vorteil-karte__icon { width: 98px; height: 98px; margin: 0 auto 16px; padding: 16px; box-sizing: border-box; background: var(--color-primary); border-radius: 22px; } .vorteil-karte h3 { font-size: clamp(22px, 2.2vw, 30px); } /* Zwei Karten nebeneinander, die eine Ueberschrift einzeilig, die andere zweizeilig: Dann beginnen die Absaetze auf verschiedenen Hoehen, und das Raster wirkt schief (Julian, Screenshot 16.09.2026 — dieselbe Ansicht, in der die Icons auffielen). Zwei Zeilen Mindesthoehe stellen die Absaetze auf eine Linie; drei Zeilen lange Ueberschriften wachsen weiter nach unten. Nur ab 760 px, wo tatsaechlich nebeneinander steht. */ @media (min-width: 760px) { .vorteil-karte h3 { min-height: 2.4em; } } .vorteil-karte p { margin-bottom: 0; } .vorteil-karte--cta { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; } /* ---------- Eckdaten ---------- */ .eckdaten { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: 12px; } @media (min-width: 640px) { .eckdaten { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .eckdaten { grid-template-columns: repeat(4, 1fr); } } .eckdaten li { background: var(--color-bg); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); margin: 0; } .eckdaten dt, .eckdaten .eckdaten__label { display: block; font-size: 15px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-muted); font-weight: 600; margin-bottom: 4px; } .eckdaten .eckdaten__wert { display: block; font-weight: 700; color: var(--color-primary); font-size: 19px; } /* ---------- Silbentrennung: nur im schmalen Fenster ---------- Hausregel ist `hyphens: manual` (Zeile 70) — kein automatisches Trennen. Unter 380 px traegt das nicht mehr: Gemessen ueber 320-1600 px brachen dort „Arbeitsorganisation", „Kommunikationsbereitschaft", „Weiterentwicklung", „Behandlungskonzepten" und „Physiotherapeut" HART mitten im Wort, weil die globale Notbremse `overflow-wrap: break-word` greift. Ein hart gebrochenes Wort ist schlimmer als ein getrenntes. Das Fenster endet bei 340 px, nicht bei 380: Der Browser trennt gierig und fuellt die Zeile, sobald er darf. Bei 360 und 375 px — den haeufigsten Android- und iPhone-Breiten — stand dadurch „MODERNE, PROFES-SIONELLE" in einer Ueberschrift, obwohl der Umbruch nach dem Komma gereicht haette (nachgewiesen im Rebuild der Hauptseite, Entscheidungen P-3 und S-2, hier am 16.09.2026 im Bild nachgesehen). Die wenigen Woerter, die zwischen 341 und 390 px sonst hart brechen, tragen stattdessen ein weiches Trennzeichen an der Wortfuge — das trennt nur sie. Gemessen von tools/wortbruch-pruefen.js. */ @media (max-width: 340px) { h1, h2, h3, h4, p, li, blockquote, dd, dt, figcaption { hyphens: auto; } } /* ---------- Tagesablauf ---------- */ .tag { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-left: 3px solid var(--color-accent); } .tag li { position: relative; padding: 0 0 22px 28px; margin: 0; } .tag li::before { content: ""; position: absolute; left: -10px; top: 8px; width: 17px; height: 17px; border-radius: 50%; background: var(--color-primary); border: 3px solid var(--color-bg); } .tag__zeit { display: block; font-size: 16px; font-weight: 700; text-transform: uppercase; color: var(--color-primary); letter-spacing: .04em; } .tag p { margin: 0; } /* ---------- Zwei-Spalten-Listen ---------- */ .zweispaltig { display: grid; gap: clamp(24px, 4vw, 56px); } @media (min-width: 900px) { .zweispaltig { grid-template-columns: 1fr 1fr; } } /* Sammelregel gegen Querscroll (15.09.2026): Kinder von Grid- und Flex-Kaesten bekommen `min-width: auto` und koennen deshalb nicht unter ihre Inhaltsbreite schrumpfen. Auf /stellen/physiotherapeut-gilching/ zog die Karte „Das bringst du mit" die Spalte damit auf 403 px in einem 390-px-Fenster — Inhalt 343 px plus zweimal 30 px Polster — und die ganze Seite scrollte quer. Einmal fuer alle Layout-Kaesten des Bereichs, statt jedes Mal neu zu suchen. */ .zweispaltig > *, .bewerben-grid > *, .vorteile-raster > *, .stellen-grid > *, .band > * { min-width: 0; } .karte { background: var(--color-bg); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); } .karte h3 { margin-bottom: .6em; } .liste-haken { list-style: none; padding: 0; } .liste-haken li { position: relative; padding-left: 1.8em; margin-bottom: .55em; } .liste-haken li::before { content: ""; position: absolute; left: 0; top: .35em; width: 1.05em; height: 1.05em; background: var(--color-primary); border-radius: 50%; } .liste-haken li::after { content: ""; position: absolute; left: .32em; top: .55em; width: .35em; height: .6em; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); } .liste-haken .muss { font-size: 14px; font-weight: 700; text-transform: uppercase; color: var(--color-primary); margin-left: .4em; letter-spacing: .04em; } /* ---------- Zitate ---------- */ .zitat { background: var(--color-bg); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); margin: 0; border-left: 6px solid var(--color-accent); } .zitat p { font-size: 19px; margin-bottom: .8em; } .zitat footer { font-weight: 700; color: var(--color-primary); font-size: 17px; } /* BEFUND 18.09.2026 (Julian, Screenshot Team-Abschnitt): Hier stand `background: rgba(255,255,255,.1)` — 10 % Weiß auf dem Lila #700959 ergibt #7D1C68. Gegen die Bandfarbe sind das 1,17:1; der Kasten war als Kasten praktisch nicht zu sehen, das Zitat verschwamm mit dem Abschnitt. Ein Zitat-Kasten soll sich absetzen, also bekommt er dieselbe helle Fläche wie die Zitate auf den weißen Abschnitten und dunklen Text darauf. Gemessen auf #F4F4F4: Fläche gegen das Band 9,8:1 · Fließtext #282828 12,6:1 · Fußzeile Lila #700959 10,2:1. Der gelbgrüne Rand bleibt, damit die Zitate der Seite gleich aussehen. */ .zitat--auf-lila { background: var(--color-surface); color: var(--color-text); border-left-color: var(--color-accent); } /* ---------- Fragen ---------- */ .fragen { max-width: var(--container-schmal); margin-inline: auto; } .fragen details { border-bottom: 1px solid var(--color-border); } .fragen summary { cursor: pointer; list-style: none; padding: 18px 44px 18px 0; position: relative; font-weight: 700; font-size: 20px; } .fragen summary::-webkit-details-marker { display: none; } .fragen summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 2px solid var(--color-primary); color: var(--color-primary); display: grid; place-items: center; font-weight: 400; font-size: 24px; line-height: 1; } .fragen details[open] summary::after { content: "\2212"; } .fragen details p { padding-bottom: 18px; margin: 0; } /* ---------- Ablauf ---------- */ .ablauf { list-style: none; padding: 0; margin: 0; display: grid; gap: 24px; counter-reset: schritt; } /* BEFUND 16.09.2026: Bei genau 768 px (iPad hochkant) sprengte die dritte Karte die Seite um 27 px und erzeugte waagerechtes Scrollen — bei 740 und 800 px nicht, deshalb war es nie aufgefallen. Ein Grid-Element hat `min-width: auto` und schrumpft nicht unter sein laengstes Wort; drei Spalten brauchen bei 768 px mehr Platz, als da ist. ERSTER VERSUCH WAR FALSCH: `minmax(0, 1fr)` nahm den Querscroll weg, liess aber die Spalte unter das laengste Wort schrumpfen — dann griff die globale Notbremse `overflow-wrap: break-word`, und auf dem Bild stand „KURZBEWERB UNG" und „KENNENLERN EN IN DER PRAXIS". Ein Fehler war gegen einen schlimmeren getauscht (Hausregel: keine Silbentrennung). Richtig ist, drei Spalten erst dort zu erlauben, wo sie hineinpassen. Gemessen mit tools/wortbruch-pruefen.js ueber 700-1200 px. */ @media (min-width: 900px) { .ablauf { grid-template-columns: repeat(3, 1fr); } } .ablauf li { counter-increment: schritt; background: var(--color-bg); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); margin: 0; } .ablauf li::before { content: counter(schritt); display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--color-primary); color: #fff; font-weight: 700; font-size: 24px; margin-bottom: 14px; } .ablauf h3 { font-size: 22px; } .ablauf p { margin: 0; font-size: 18px; } .ablauf .dauer { display: block; font-size: 15px; text-transform: uppercase; color: var(--color-muted); font-weight: 600; margin-bottom: 6px; letter-spacing: .04em; } /* ---------- Galerie ---------- */ .galerie-band { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 0 16px; list-style: none; margin: 0; } .galerie-band li { flex: 0 0 auto; width: min(353px, 80vw); scroll-snap-align: start; margin: 0; } .galerie-band img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; aspect-ratio: 353 / 253; object-fit: cover; } .galerie-hinweis { font-size: 16px; color: var(--color-muted); } /* ---------- Video nur nach Klick ---------- */ .video-klick { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--color-text); } .video-klick__start { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: var(--color-auf-dunkel); font-family: inherit; } .video-klick__start img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; opacity: .75; } .video-klick__hinweis { position: absolute; inset: auto 0 0 0; padding: 18px 20px; background: linear-gradient(0deg, rgba(0,0,0,.75), rgba(0,0,0,0)); font-size: 18px; font-weight: 600; } .video-klick__hinweis small { display: block; font-weight: 400; font-size: 14px; opacity: .9; } .video-klick iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; } /* ---------- Kontakt-Kasten ---------- */ /* `min-width: 0` an den Zellen: Grid- und Flex-Kinder bekommen von sich aus `min-width: auto` und schrumpfen nicht unter ihren Inhalt. Diese Zeile war der Grund, warum die Startseite auf dem Handy quer scrollte — 485 statt 390 px (gemessen 15.09.2026). */ .kontakt-frage { display: grid; gap: 32px; align-items: center; } .kontakt-frage > * { min-width: 0; } @media (min-width: 900px) { .kontakt-frage { grid-template-columns: 2fr 3fr; } } /* `min(388px, 100%)` statt `388px`: Der Selektor (0,1,1) schlaegt die globale Regel `img { max-width: 100% }` (0,0,1) — auf dem Handy stand das Bild damit 30 px ueber den Bildschirmrand hinaus und zog die Seite mit. */ .kontakt-frage__bild img { border-radius: var(--radius); box-shadow: var(--shadow); max-width: min(388px, 100%); } .kontakt-frage h2 .akzent { color: var(--color-primary); font-weight: 700; } /* ========================================================================= Bewerbungs-Funnel Markup und Klassen wie im Agentur-Baustein (PhysioPark, Stand 08.09.2026), Farben auf Coumans umgestellt. main.js verlässt sich auf diese Klassen. ========================================================================= */ .bewerben { position: relative; } .bewerben-grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; } /* Auf dem Handy ist die Reihenfolge im Quelltext auch die angezeigte: Überschrift und Einleitung, dann sofort das Formular, dann die ausführlichen Vorteile. Nur der Abstand zwischen Formular und Vorteilen darf kleiner sein — beide gehören zusammen. */ @media (max-width: 999px) { .bewerben-nachweis { margin-top: clamp(-16px, -1vw, 0px); } } /* Ab 1000 px wieder das gewohnte Bild: links Text und Vorteile untereinander, rechts das Formular über beide Zeilen. Die Reihenfolge im Quelltext bleibt für Vorlesewerkzeuge die sinnvolle (erst worum es geht, dann das Formular). */ @media (min-width: 1000px) { .bewerben-grid { grid-template-columns: 5fr 7fr; /* „auto 1fr" ist hier der Kern: Das Formular spannt über beide Zeilen und ist höher als die beiden Textblöcke zusammen. Ohne diese Angabe verteilt Grid die überschüssige Höhe gleichmäßig auf beide Zeilen — und zwischen Einleitung und Vorteilen klaffte am 16.09.2026 eine Lücke von rund 200 px. So bekommt Zeile 1 genau ihre Inhaltshöhe, Zeile 2 den Rest. */ grid-template-rows: auto 1fr; } .bewerben-text { grid-column: 1; grid-row: 1; align-self: start; } /* Kein eigenes margin-top: Der Abstand kommt bereits aus dem `gap` des Rasters (56 px bei 1440). Beides zusammen ergab gemessene 85 px. */ .bewerben-nachweis { grid-column: 1; grid-row: 2; align-self: start; margin-top: 0; } .bewerben-formular { grid-column: 2; grid-row: 1 / span 2; } /* KEIN `position: sticky` mehr (BEFUND 16.09.2026, Julian per Screenshot): Die Ueberschrift „Deine Bewerbung in 60 Sekunden" lag beim Scrollen mitten in der Haekchenliste darunter — beide Texte uebereinander, unlesbar. Der Grund ist eine Eigenheit von sticky: Ein haftendes Element bewegt sich innerhalb seines ELTERNELEMENTS, nicht innerhalb seiner Grid-Zeile. Das Elternelement ist hier das ganze `.bewerben-grid`, das so hoch ist wie das Formular. Also wanderte der Text ueber die zweite Zeile, in der die Vorteile stehen. Ein Wrapper um beide Bloecke wuerde es loesen, wuerde aber die Quelltext-Reihenfolge (erst Text, dann Formular, dann Nachweis) zerstoeren, die fuer Vorlesewerkzeuge und fuer das Handy richtig ist. Der Gewinn durch Mitlaufen ist klein, der Schaden war gross. Bewacht von tools/ueberdeckung-pruefen.js — die Pruefung misst an mehreren Scrollpositionen, weil dieser Fehler am Seitenanfang unsichtbar ist. */ } .bewerben-text h2 { margin-bottom: .5em; } .funnel-vorteile { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: 14px; } .funnel-vorteile li { display: grid; gap: 2px; padding-left: 36px; position: relative; font-size: 18px; margin: 0; } .funnel-vorteile li::before { content: ""; position: absolute; left: 0; top: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--color-accent); } .funnel-vorteile li::after { content: ""; position: absolute; left: 8px; top: 9px; width: 6px; height: 11px; border: solid var(--color-text); border-width: 0 3px 3px 0; transform: rotate(45deg); } .funnel-vorteile strong { display: block; } .funnel-vorteile span { color: var(--color-muted); font-size: 17px; } .funnel-karte { background: var(--color-bg); border-radius: var(--radius); padding: clamp(22px, 3vw, 38px); box-shadow: var(--shadow-hoch); border: 1px solid var(--color-border); } .funnel-karte__titel { font-size: clamp(22px, 2.2vw, 26px); margin-bottom: 4px; } .funnel-karte__unter { color: var(--color-muted); font-size: 17px; margin-bottom: 22px; } .hp-feld { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .funnel-fortschritt { margin-bottom: 26px; } .fortschritt-punkte { list-style: none; padding: 0; margin: 0 0 10px; display: flex; justify-content: space-between; gap: 6px; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; color: var(--color-muted); } .fortschritt-punkte li { margin: 0; } .fortschritt-punkte li.erledigt { color: var(--color-ok); } .fortschritt-punkte li.aktiv { color: var(--color-primary); } .fortschritt-punkte li.aktiv span { border-bottom: 2px solid var(--color-primary); padding-bottom: 2px; } .fortschritt-punkte li.erledigt span::before { content: "\2713 "; } @media (max-width: 480px) { .fortschritt-punkte { font-size: 12px; } } .fortschritt-schiene { height: 6px; background: var(--color-border); border-radius: 3px; overflow: hidden; } .fortschritt-fuellung { height: 100%; width: 20%; background: var(--color-primary); border-radius: 3px; transition: width .35s ease; } .funnel-schritt { display: none; } .funnel-schritt.aktiv { display: block; animation: funnel-schritt-auf .3s ease backwards; } @keyframes funnel-schritt-auf { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .funnel-schritt.aktiv, .funnel-antwort.ist-neu { animation: none; } } .kachel-gruppe { border: 0; padding: 0; margin: 0 0 26px; min-width: 0; } .funnel-frage { display: block; font-size: clamp(20px, 2vw, 23px); font-weight: 700; text-transform: uppercase; margin: 0 0 6px; padding: 0; line-height: 1.3; } .funnel-frage:focus { outline: none; } .funnel-hilfe { font-size: 17px; color: var(--color-muted); margin-bottom: 16px; } .funnel-antwort { background: var(--color-primary-soft); border-left: 4px solid var(--color-primary); padding: 12px 16px; font-size: 17px; margin: 0 0 20px; } .funnel-antwort:empty { display: none; } .funnel-antwort.ist-neu { animation: funnel-schritt-auf .3s ease backwards; } .kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 420px) { .kacheln { grid-template-columns: 1fr; } } .kachel-breit { grid-column: 1 / -1; } .kachel[hidden] { display: none; } .kachel { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px 16px; border: 2px solid var(--color-border); border-radius: 12px; cursor: pointer; background: var(--color-bg); transition: border-color .15s ease, background .15s ease, transform .15s ease; } .kachel input { position: absolute; opacity: 0; width: 1px; height: 1px; } .kachel-ico { grid-row: 1 / span 2; width: 42px; height: 42px; border-radius: 50%; background: var(--color-surface); color: var(--color-primary); display: grid; place-items: center; } .kachel-ico svg { width: 22px; height: 22px; } .kachel-titel { font-weight: 700; font-size: 18px; line-height: 1.25; } .kachel-zusatz { font-size: 15px; color: var(--color-muted); line-height: 1.3; } .kachel:hover { border-color: var(--color-primary); background: var(--color-primary-soft); } .kachel:focus-within { outline: 3px solid var(--color-primary); outline-offset: 2px; } .kachel:has(input:checked), .kachel.gewaehlt { border-color: var(--color-primary); background: var(--color-primary-soft); } .kachel:has(input:checked) .kachel-ico, .kachel.gewaehlt .kachel-ico { background: var(--color-primary); color: #fff; } .kachel::after { content: ""; position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%; background: var(--color-accent); opacity: 0; transform: scale(.6); transition: opacity .15s ease, transform .15s ease; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23282828' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-size: 12px; background-position: center; background-repeat: no-repeat; } .kachel:has(input:checked)::after, .kachel.gewaehlt::after { opacity: 1; transform: scale(1); } .formfeld { margin-bottom: 18px; } .formfeld label { display: block; font-weight: 600; font-size: 17px; margin-bottom: 6px; } .feld-optional { font-weight: 400; color: var(--color-muted); font-size: .9em; } .formfeld input, .formfeld select, .formfeld textarea { width: 100%; font: inherit; font-size: 18px; color: var(--color-text); background: var(--color-bg); border: 2px solid var(--color-border); border-radius: var(--radius-sm); padding: 12px 14px; min-height: 48px; } .formfeld input:focus, .formfeld select:focus, .formfeld textarea:focus { border-color: var(--color-primary); outline: none; box-shadow: 0 0 0 3px var(--color-primary-soft); } .formfeld.hat-fehler input, .formfeld.hat-fehler select { border-color: var(--color-fehler); } .feld-fehler { display: block; color: var(--color-fehler); font-size: 15px; font-weight: 600; margin-top: 6px; } .kachel-gruppe.hat-fehler .feld-fehler { margin-top: 10px; } /* 44 px auch hier (16.09.2026): gemessen 39 px hoch. Der Lebenslauf ist freiwillig, aber wer ihn anhängen will, soll das Feld sicher treffen. */ .formfeld-datei input[type="file"] { padding: 8px; font-size: 16px; min-height: 44px; } .formfeld-datei input[type="file"]::file-selector-button { font: inherit; font-weight: 600; background: var(--color-surface); border: 0; border-radius: var(--radius-sm); padding: 8px 12px; margin-right: 12px; cursor: pointer; color: var(--color-primary); } .feld-hinweis { display: block; font-size: 15px; color: var(--color-muted); margin-top: 6px; } .formfeld-checkbox { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; margin: 8px 0 22px; font-size: 16px; position: relative; } .formfeld-checkbox input { width: 22px; height: 22px; margin-top: 3px; accent-color: var(--color-primary); } .formfeld-checkbox.hat-fehler { outline: 2px solid var(--color-fehler); outline-offset: 8px; border-radius: 4px; } .formfeld-checkbox .feld-fehler { grid-column: 1 / -1; } .funnel-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; } .funnel-buttons .btn--primary { flex: 1 1 200px; } .funnel-fehler { display: none; margin-top: 16px; padding: 14px 16px; background: #FBE9E2; color: var(--color-fehler); border-left: 4px solid var(--color-fehler); font-size: 17px; } .funnel-vertrauen { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 15px; color: var(--color-muted); } .funnel-vertrauen li { display: inline-flex; align-items: center; gap: 6px; margin: 0; } .funnel-vertrauen svg { width: 16px; height: 16px; color: var(--color-primary); } .funnel-fussnote { font-size: 14px; color: var(--color-muted); margin: 16px 0 0; } .funnel-erfolg { display: none; text-align: center; padding: 20px 0; } .erfolg-haken { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--color-accent); margin: 0 auto 14px; } .erfolg-haken svg { width: 32px; height: 32px; color: var(--color-text); } /* Mitlaufender Knopf auf dem Handy */ .handy-leiste { display: none; } @media (max-width: 760px) { .handy-leiste { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom)); background: var(--color-bg); box-shadow: 0 -6px 20px rgba(0,0,0,.14); transform: translateY(110%); transition: transform .25s ease; } .handy-leiste.ist-sichtbar { transform: none; } .handy-leiste .btn { width: 100%; } body.hat-handy-leiste { padding-bottom: 76px; } } /* ---------- Funnelseite (Anzeigenziel, ohne Navigation) ---------- */ .funnelseite .site-header .header-inner { justify-content: center; } .funnelseite .hero { padding-block: clamp(44px, 6vw, 80px); } .funnelseite .hero h1 { font-size: clamp(28px, 3.2vw, 44px); } .funnel-sofort { margin-top: -60px; position: relative; z-index: 2; } @media (max-width: 760px) { .funnel-sofort { margin-top: -30px; } } .belege { display: grid; gap: 20px; } @media (min-width: 760px) { .belege { grid-template-columns: repeat(2, 1fr); } } .beleg { background: var(--color-bg); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); font-size: 18px; } .beleg h3 { font-size: 20px; margin-bottom: .4em; } .beleg p { margin: 0; } .beleg--bild { padding: 0; overflow: hidden; } .beleg--bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } .zurueck-zum-formular { text-align: center; padding-block: 28px; } /* ---------- Danke ---------- */ .danke-karte { background: var(--color-bg); border-radius: var(--radius); padding: clamp(28px, 4vw, 48px); box-shadow: var(--shadow-hoch); text-align: center; max-width: 760px; margin-inline: auto; } .danke-badge { display: inline-block; background: var(--color-accent); color: var(--color-text); font-weight: 700; text-transform: uppercase; font-size: 15px; padding: 4px 12px; margin-bottom: 18px; } /* ---------- Rechtstexte ---------- */ .rechtstext h2 { font-size: clamp(22px, 2.2vw, 28px); margin-top: 1.6em; } .rechtstext { font-size: 18px; } .ki-transparenz { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; } .ki-transparenz img { margin-top: 5px; } /* ---------- Fuß ---------- */ .site-footer { background: var(--color-bg); border-top: 1px solid var(--color-border); font-size: 18px; } .footer-inner { display: grid; gap: 32px; padding-block: 48px; } @media (min-width: 900px) { .footer-inner { grid-template-columns: 1.4fr 1fr 1fr; } } .footer-brand__name strong { color: var(--color-primary); } .footer-col__title { font-weight: 700; color: var(--color-primary); text-transform: uppercase; margin: 0 0 10px; } .hours { margin: 0 0 1.2em; } .hours__row { display: grid; grid-template-columns: 110px 1fr; gap: 8px; } .hours dt { font-weight: 700; } .hours dd { margin: 0; } .footer-partner { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; } .footer-partner img { height: 58px; width: auto; } .footer-bottom { background: var(--color-surface); font-size: 17px; color: var(--color-muted); } .footer-bottom__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 18px; } .footer-bottom__nav { display: flex; flex-wrap: wrap; gap: 0 24px; } .footer-bottom a { color: var(--color-muted); } .footer-bottom a:hover { color: var(--color-primary); } /* Trefferfläche der Fußlinks (16.09.2026): gemessen waren sie 98 × 28 px. Impressum und Datenschutz sind Pflichtwege — auf dem Handy müssen sie sicher zu treffen sein. Das Polster wächst nach oben und unten, die Zeile bleibt optisch gleich, weil die Links nebeneinander in einer Reihe stehen. */ .footer-bottom__nav a { display: inline-flex; align-items: center; min-height: 44px; } /* ---------- Trefferflächen: 44 px, überall wo getippt wird ---------- Gemessen am 16.09.2026 mit tools/ux-pruefen.js, 72 Stellen auf neun Seiten. Die Navigation lag bei 42 px — zwei Pixel, die niemand sieht und die trotzdem den Unterschied machen, wenn jemand mit dem Daumen im Bus danach tippt. Kopfzeile, Fußnavigation und die Kontaktwege lagen zwischen 22 und 34 px. Durchweg über `min-height` und `inline-flex` gelöst, nicht über Polster: So wächst nur die Fläche, die auf einen Druck reagiert — die Zeilen bleiben optisch stehen, wo sie sind. Deshalb ändert sich am Bild der Seite nichts. */ .main-nav a, .site-footer a, .topbar__tel, .topbar__respect { display: inline-flex; align-items: center; min-height: 44px; } /* Der Fuß setzt seine Links teils in Fließtext; dort darf die Zeile umbrechen, ohne dass der Kasten auseinanderfällt. */ .site-footer a { flex-wrap: wrap; } /* Telefon und E-Mail sind nie Beiwerk, egal wo sie stehen: Sie sind der Weg für alle, die nicht tippen wollen. Deshalb an der Art des Ziels festgemacht und nicht am Ort — zwei Vorkommen lagen in einer Aufzählung mitten im Inhalt und fielen dadurch durch jede ortsbezogene Regel. */ a[href^="tel:"], a[href^="mailto:"] { display: inline-flex; align-items: center; flex-wrap: wrap; min-height: 44px; } /* Telefonnummern sind hier kein Beiwerk: „Lieber sprechen?" ist für viele der Weg, den sie wirklich gehen. Gemessen am 16.09.2026 war die Trefferfläche 118 × 20 px. Als inline-flex mit 44 px Mindesthöhe trifft der Daumen sie, ohne dass sich die Zeile sichtbar verschiebt. */ .tel-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; } .footer-ki { font-size: 15px; color: var(--color-muted); padding-bottom: 18px; display: flex; gap: 10px; align-items: flex-start; } .footer-ki img { flex: none; margin-top: 3px; } .footer-ki p { margin: 0; } .footer--schlank .footer-inner { display: block; padding-block: 28px; text-align: center; } /* Nach einem hellen, schmalen Hero folgt der Inhalt dichter (gemessen 11.09.2026: 200 px Luft auf /stellen/). */ .hero--hell + .abschnitt { padding-top: clamp(28px, 4vw, 44px); }