/* ========================================================================= system.css — gemeinsames Designsystem für PHYSIOMED SÜD und MVZ BERLIN RUDOW ========================================================================= EIN System, ZWEI Farbwelten. Beide Marken tragen dieselbe Bildmarke (Figur im Kreis) — sie unterscheiden sich nur in Farbe und Wortmarke. Genau das bildet diese Datei ab: alle Maße, Abstände, Komponenten und Bewegungen sind identisch, getauscht wird ausschließlich die Palette. braun · orange · creme blau · türkis · hellgrau Übernommen aus dem Bestand (bewusst NICHT neu erfunden): - die vier Schriftfamilien (Inter, IBM Plex Serif, Manrope, Roboto) - die Farbfamilien beider Marken - die runde, offene Formensprache des Logos Angehoben gegenüber dem Bestand: - fließende Typo-Skala statt fester Pixelwerte (skaliert ohne Umbruch) - durchgehender 4px-Raster für alle Abstände - Komponenten statt Einzelseiten-CSS - sichtbare Fokusringe, 44px-Tippflächen, reduzierte Bewegung ========================================================================= */ /* Schriften lokal — null Fremdanfragen (Gate 6). Dieselben Google-Dateien wie im Bestand, gleiche Metrik. */ @import url('../fonts/_fontface.css'); /* ========================================================================= 1 · Farbwelten ========================================================================= */ :root { /* Neutrale Achse — für beide Marken gleich */ --n-900: #111111; --n-700: #4A4A4A; --n-500: #6B7280; --n-300: #D6D3CD; --n-100: #F3F1EC; --n-000: #FFFFFF; /* Schriftrollen */ --f-text: 'Inter', system-ui, -apple-system, sans-serif; --f-display: 'IBM Plex Serif', Georgia, serif; --f-ui: 'Manrope', 'Inter', system-ui, sans-serif; --f-liste: 'Roboto', 'Inter', system-ui, sans-serif; /* Fließende Typo-Skala: min bei 360px, max bei 1440px */ --t-hero: clamp(2.25rem, 1.30rem + 4.2vw, 4.00rem); --t-h1: clamp(2.00rem, 1.35rem + 2.9vw, 3.25rem); /* Der Boden lag bei 1,60rem. Auf 390 px wurde „Kiefergelenksbehandlungen" damit 363 px breit und passte nicht in die 350 px der Hülle. */ --t-h2: clamp(1.50rem, 1.10rem + 1.85vw, 2.50rem); --t-h3: clamp(1.30rem, 1.08rem + 0.9vw, 1.75rem); --t-h4: clamp(1.10rem, 1.00rem + 0.5vw, 1.35rem); --t-body: 1.125rem; --t-klein: 0.9375rem; --t-mini: 0.8125rem; --lh-eng: 1.15; --lh-mittel:1.35; --lh-weit: 1.7; /* Abstände — 4px-Raster */ --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; /* Abstand zwischen zwei Abschnitten — der wichtigste Rhythmus der Seite */ --band: clamp(3.5rem, 2rem + 6vw, 7rem); /* Maße */ --breite: 1216px; --breite-schmal: 760px; --rand: clamp(1.25rem, 0.5rem + 3vw, 4rem); /* Rundungen — greifen den Kreis der Bildmarke auf */ --r-klein: 8px; --r-mittel: 16px; --r-gross: 28px; --r-voll: 999px; /* Schatten — sehr zurückhaltend, nur zur Ebenentrennung */ --sch-1: 0 1px 2px rgb(17 17 17 / .04), 0 2px 8px rgb(17 17 17 / .04); --sch-2: 0 2px 4px rgb(17 17 17 / .05), 0 8px 24px rgb(17 17 17 / .07); --sch-3: 0 4px 8px rgb(17 17 17 / .06), 0 16px 48px rgb(17 17 17 / .10); --tempo: 220ms; --kurve: cubic-bezier(.22, .61, .36, 1); } /* --- PHYSIOMED SÜD: braun · orange · creme ------------------------------- */ [data-brand="physiomed"] { --marke: #7B562E; --marke-tief: #5E4023; --marke-hell: #A67C4C; --akzent: #E99B2F; --akzent-tief: #C97F1C; /* Die weiche Fläche trägt die halbe Seite. Früher #FEF5E0, ein sattes Creme: damit war Weiß auf der Startseite die Ausnahme statt die Regel. Jetzt ein warmes Fastweiß. Die Marke bleibt spürbar, der Grundton ist hell. --weich-2 behält genug Tiefe, um als Fläche hinter einem Wort oder in einem Hinweisband noch sichtbar zu sein. */ --weich: #FCF8F1; --weich-2: #F4EDE0; --kontur: #E7D9BC; --auf-marke: #FEF5E0; --auf-akzent: #2A1C0A; --ring: #E99B2F; } /* --- MVZ BERLIN RUDOW: blau · türkis · hellgrau -------------------------- */ [data-brand="mvz"] { --marke: #165A82; --marke-tief: #0F4260; --marke-hell: #3D7FA5; --akzent: #6DBBC8; --akzent-tief: #4A9CAB; --weich: #F2F4F6; --weich-2: #E6EDF2; --kontur: #D2DEE6; --auf-marke: #FFFFFF; --auf-akzent: #08303F; --ring: #165A82; } /* ========================================================================= 2 · Grundlagen ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } :where(h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote) { margin: 0; } :where(ul, ol) { padding: 0; list-style: none; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } body { margin: 0; font-family: var(--f-text); font-size: var(--t-body); line-height: var(--lh-weit); color: var(--n-700); background: var(--n-000); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, video, svg { max-width: 100%; height: auto; display: block; } a { color: var(--marke); text-decoration-thickness: 1px; text-underline-offset: .2em; } a:hover { color: var(--marke-tief); } /* Fokus IMMER sichtbar — Tastaturbedienung ist keine Randgruppe. */ :focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; border-radius: var(--r-klein); } ::selection { background: var(--akzent); color: var(--auf-akzent); } .nur-vorleser { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .sprung { position: absolute; left: var(--s-4); top: -100px; z-index: 100; background: var(--marke); color: var(--auf-marke); padding: var(--s-3) var(--s-5); border-radius: var(--r-klein); font-family: var(--f-ui); font-weight: 600; text-decoration: none; transition: top var(--tempo) var(--kurve); } .sprung:focus { top: var(--s-4); color: var(--auf-marke); } /* ========================================================================= 3 · Typografie ========================================================================= */ h1, .h1, h2, .h2, h3, .h3 { font-family: var(--f-display); color: var(--n-900); line-height: var(--lh-eng); font-weight: 600; text-wrap: balance; } h1, .h1 { font-size: var(--t-h1); letter-spacing: -.01em; } h2, .h2 { font-size: var(--t-h2); letter-spacing: -.005em; } h3, .h3 { font-size: var(--t-h3); } h4, .h4 { font-family: var(--f-ui); font-size: var(--t-h4); font-weight: 600; line-height: var(--lh-mittel); color: var(--n-900); } p { text-wrap: pretty; } p + p { margin-top: var(--s-4); } .vorspann { font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.4375rem); line-height: 1.55; color: var(--n-700); } /* Kleine Überzeile über der Überschrift — ordnet den Abschnitt ein. */ .dachzeile { font-family: var(--f-ui); font-size: var(--t-mini); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--marke); display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); } .dachzeile::before { content: ""; width: 28px; height: 2px; background: var(--akzent); flex: none; } /* ========================================================================= 4 · Raster ========================================================================= */ .huelle { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; } .huelle--schmal { width: min(100% - 2 * var(--rand), var(--breite-schmal)); margin-inline: auto; } .band { padding-block: var(--band); } .band--weich { background: var(--weich); } .band--kontrast { background: var(--marke); color: var(--auf-marke); } .band--kontrast h2, .band--kontrast h3, .band--kontrast .h2 { color: var(--auf-marke); } .kopfzeile-abschnitt { max-width: 62ch; margin-bottom: var(--s-7); } .kopfzeile-abschnitt--mitte { margin-inline: auto; text-align: center; } .kopfzeile-abschnitt--mitte .dachzeile { justify-content: center; } /* Reihenfolge ist hier nicht egal: gleich starke Regeln — die spätere gewinnt. Deshalb erst die kleine Stufe, dann die große. Andersherum stünde auf dem Großbild dauerhaft die Zweispalten-Regel. */ .raster { display: grid; gap: var(--s-5); } @media (min-width: 640px) { .raster--2 { grid-template-columns: repeat(2, 1fr); } } /* Die Umbruchpunkte des Dreispalters liegen bewusst spät. Bei 900 px waren es drei Spalten mit 190 px Textbreite, und darin passt kein deutsches Kompositum mehr: „Kiefergelenksbehandlungen" wurde mitten im Wort umbrochen, „Beckenbodengymnastik" auch. Zwei breite Spalten sind besser als drei zu enge. */ @media (min-width: 760px) { .raster--3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1200px) { .raster--3 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 640px) { .raster--4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .raster--4 { grid-template-columns: repeat(4, 1fr); } } /* Zwei Spalten, Text und Bild — kippt unter 900px sauber untereinander. */ .duo { display: grid; gap: var(--s-7); align-items: center; } @media (min-width: 900px) { .duo { grid-template-columns: 1fr 1fr; gap: var(--s-8); } .duo--gedreht > :first-child { order: 2; } } /* ========================================================================= 5 · Knöpfe ========================================================================= */ .knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 48px; /* über der 44px-Mindestfläche */ padding: var(--s-3) var(--s-6); font-family: var(--f-ui); font-size: 1.0625rem; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; border: 2px solid transparent; border-radius: var(--r-voll); cursor: pointer; transition: background var(--tempo) var(--kurve), color var(--tempo) var(--kurve), border-color var(--tempo) var(--kurve), transform var(--tempo) var(--kurve), box-shadow var(--tempo) var(--kurve); } .knopf:hover { transform: translateY(-2px); } .knopf:active { transform: translateY(0); } /* Der Hauptknopf war eine flache, satte Orangefläche mit fast schwarzer Schrift und sah damit eher nach Warnhinweis als nach Einladung aus. Jetzt ein feiner Verlauf von oben hell nach unten satt, eine Lichtkante an der Oberseite und ein Schein in der eigenen Farbe statt eines grauen Schattens. Die Schriftfarbe bleibt das dunkle Braun: Weiß auf diesem Orange käme nur auf 3,5:1 und war genau deshalb schon einmal geändert worden. Alles über color-mix, damit das Türkis des MVZ dieselbe Behandlung bekommt. */ .knopf--haupt { background: linear-gradient(180deg, color-mix(in srgb, var(--akzent) 88%, #FFFFFF) 0%, var(--akzent) 58%, color-mix(in srgb, var(--akzent) 78%, var(--akzent-tief)) 100%); color: var(--auf-akzent); border-color: transparent; box-shadow: inset 0 1px 0 rgb(255 255 255 / .38), 0 1px 2px rgb(17 17 17 / .10), 0 6px 18px color-mix(in srgb, var(--akzent) 40%, transparent); } .knopf--haupt:hover { background: linear-gradient(180deg, var(--akzent) 0%, color-mix(in srgb, var(--akzent) 55%, var(--akzent-tief)) 100%); border-color: transparent; color: var(--auf-akzent); box-shadow: inset 0 1px 0 rgb(255 255 255 / .30), 0 2px 4px rgb(17 17 17 / .12), 0 10px 26px color-mix(in srgb, var(--akzent) 52%, transparent); } .knopf--haupt:active { box-shadow: inset 0 1px 3px rgb(17 17 17 / .22); } .knopf--marke { background: var(--marke); color: var(--auf-marke); border-color: var(--marke); } .knopf--marke:hover { background: var(--marke-tief); border-color: var(--marke-tief); color: var(--auf-marke); } .knopf--rand { background: transparent; color: var(--marke); border-color: currentColor; } .knopf--rand:hover { background: var(--marke); color: var(--auf-marke); border-color: var(--marke); } .band--kontrast .knopf--rand { color: var(--auf-marke); } .band--kontrast .knopf--rand:hover { background: var(--auf-marke); color: var(--marke); } .knopf-reihe { display: flex; flex-wrap: wrap; gap: var(--s-4); } .kopfzeile-abschnitt--mitte .knopf-reihe { justify-content: center; } /* Zentriert auch ausserhalb einer mittigen Kopfzeile — etwa der Knopf, der unter einem Kartenraster auf die vollstaendige Uebersicht zeigt. */ .knopf-reihe--mitte { justify-content: center; } /* Auf schmalen Geräten steht ein Knopf über die volle Breite. Zwei Knöpfe nebeneinander werden sonst so schmal, dass der Text umbricht und die Tippfläche schrumpft. */ @media (max-width: 519px) { .knopf-reihe .knopf { width: 100%; } } /* ========================================================================= 6 · Karten ========================================================================= */ .karte { position: relative; overflow: hidden; background: var(--n-000); border: 1px solid var(--kontur); border-radius: var(--r-gross); /* Als Variable, weil das Foto sie als negativen Rand wieder aufheben muss, um randlos an der Kartenkante zu sitzen. */ --karte-innen: var(--s-5); padding: var(--karte-innen); display: flex; flex-direction: column; gap: var(--s-3); /* Schon im Ruhezustand eine Spur Tiefe. Ohne sie steht die Karte flach auf dem cremefarbenen Band und ist von ihm nur durch die Kontur zu unterscheiden. */ box-shadow: var(--sch-1); transition: transform var(--tempo) var(--kurve), box-shadow var(--tempo) var(--kurve), border-color var(--tempo) var(--kurve); } /* Mobil zuerst: auf dem Handy zählt jede gesparte Zeile Höhe, erst ab 640 px ist Platz für das großzügige Innenmaß. */ @media (min-width: 640px) { .karte { --karte-innen: var(--s-6); } } /* Eigene Stufe statt --t-h3. Ein Kartentitel ist keine Abschnittsüberschrift und muss auch nicht so groß sein — 28 px in einer 325 px breiten Karte ließen „Kiefergelenksbehandlungen" nicht mehr in eine Zeile. */ .karte__titel { font-family: var(--f-display); /* Die Stufe ist am längsten Wort des Bestandes ausgerichtet: „Weiterbildungsmöglichkeiten", 27 Zeichen. Es muss in die schmalste Spalte passen, die im Layout vorkommt (284 px, genau am Umbruchpunkt 1200 px) — sonst bricht es mitten im Wort. */ font-size: clamp(1.0625rem, 0.93rem + 0.34vw, 1.3125rem); line-height: 1.25; color: var(--n-900); } .karte__text { font-size: var(--t-klein); line-height: var(--lh-weit); } /* Ganze Karte klickbar, ohne verschachtelte Links: der Link spannt eine unsichtbare Fläche auf. Fokus bleibt trotzdem am Link. */ .karte--klick { position: relative; } .karte--klick:hover, .karte--klick:focus-within { box-shadow: var(--sch-2); border-color: var(--marke-hell); } .karte--klick:hover { transform: translateY(-6px); } /* Ohne Zeigegerät gibt es kein Schweben, also braucht der Fingerdruck eine eigene Rückmeldung. */ .karte--klick:active { transform: translateY(-2px); } .karte__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .karte__link { text-decoration: none; color: inherit; } /* Akzentkante an der Oberkante: liegt im Ruhezustand zusammengeschoben da und zieht bei Hover oder Tastaturfokus über die volle Breite auf. */ .karte--klick::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--akzent), var(--marke)); transform: scaleX(0); transform-origin: left; transition: transform 420ms var(--kurve); } .karte--klick:hover::before, .karte--klick:focus-within::before { transform: scaleX(1); } .karte__icon { width: 52px; height: 52px; border-radius: var(--r-voll); background: linear-gradient(135deg, var(--weich), var(--weich-2)); border: 1px solid var(--kontur); color: var(--marke); display: grid; place-items: center; flex: none; transition: background var(--tempo) var(--kurve), border-color var(--tempo) var(--kurve), color var(--tempo) var(--kurve), transform var(--tempo) var(--kurve); } .karte__icon svg { width: 26px; height: 26px; } /* Das Foto hebt das Innenmaß der Karte wieder auf und sitzt randlos an der Oberkante. Die Karte hat overflow:hidden, den Radius erbt es dadurch. */ .karte__bild { margin: calc(-1 * var(--karte-innen)) calc(-1 * var(--karte-innen)) var(--s-1); aspect-ratio: 16 / 10; overflow: hidden; } .karte__bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 700ms var(--kurve); } .karte--klick:hover .karte__bild img { transform: scale(1.06); } .karte--klick:hover .karte__icon { background: var(--marke); border-color: var(--marke); color: var(--auf-marke); transform: scale(1.06); } /* .karte--weich hieß bisher „creme statt weiß" und war die Antwort auf Karten, die sonst unsichtbar auf einem weißen Band lagen. Diese Antwort ist überholt: die Karte hat seit der Bewegungsrunde Kontur UND Schatten und trägt sich selbst. Sie bleibt deshalb weiß, gleich auf welchem Band. Das ist der größte Einzelposten am neuen Weißanteil. */ .karte--weich { background: var(--n-000); } /* Auf dem Handy steht das Medaillon NEBEN der Überschrift statt darüber. Das spart je Karte gut 60 px Höhe: bei sechs Karten eine halbe Bildschirmhöhe weniger Scrollen. Karten ohne Medaillon (Standorte, Vorteile ohne Icon) bleiben unberührt, und Browser ohne :has() behalten schlicht die bisherige Spaltenform. */ @media (max-width: 639px) { .karte:has(.karte__icon) { display: grid; grid-template-columns: auto 1fr; align-items: center; /* Enger Seitenrand und enger Spalt: beides zusammen sind rund 30 px mehr Textbreite, und erst damit passt „Kiefergelenksbehandlungen" in eine Zeile, statt mitten im Wort umbrochen zu werden. */ gap: var(--s-3); padding-inline: var(--s-4); } .karte:has(.karte__icon) > :nth-child(n+3) { grid-column: 1 / -1; } .karte:has(.karte__icon) .karte__icon { width: 40px; height: 40px; } .karte:has(.karte__icon) .karte__icon svg { width: 20px; height: 20px; } /* Ohne min-width:0 nimmt eine Rasterspalte die Breite ihres laengsten unteilbaren Wortes an. „Kiefergelenksbehandlungen" schob die Spalte auf 392 px und wurde von der Karte abgeschnitten. */ .karte:has(.karte__icon) > * { min-width: 0; } /* Und damit dieses Wort gar nicht erst gebrochen werden MUSS, steht der Kartentitel neben dem Medaillon eine Spur kleiner. Ein Trennstrich mitten im Wort soll hier nicht vorkommen. */ /* 1,1rem statt der Skalenstufe: „Weiterbildungsmoeglichkeiten" ist mit 27 Zeichen das laengste Wort des ganzen Bestandes und passte eine Stufe groesser um genau ein Pixel nicht in seine Zeile. */ .karte:has(.karte__icon) .karte__titel { font-size: 1.1rem; } } /* Der Pfeil erscheint nur, wo es ein Zeigegerät gibt. Auf dem Handy wäre er ein Knopf, der keiner ist, und die Zeile Platz, die er kostet, fehlt an anderer Stelle mehr. */ @media (hover: hover) { .karte--klick { padding-bottom: calc(var(--s-6) + var(--s-5)); } .karte--klick::after { content: "\2192"; position: absolute; right: var(--s-6); bottom: var(--s-5); font-family: var(--f-ui); font-size: 1.375rem; line-height: 1; color: var(--marke); opacity: 0; transform: translateX(-8px); transition: opacity var(--tempo) var(--kurve), transform var(--tempo) var(--kurve); } .karte--klick:hover::after, .karte--klick:focus-within::after { opacity: 1; transform: none; } } /* Kennzahlen: EIN weißes Feld statt vier einzelner Kacheln. ------------------------------------------------------------------------ Abgeschaut bei der bestehenden Seite: dort stehen „17+ Jahre Erfahrung" und die beiden anderen Zahlen auf einer weißen Fläche, die über dem Foto liegt, und das ist der hellste und ruhigste Punkt der ganzen Startseite. Vier getrennte Kacheln zerlegen dieselbe Aussage in vier; ein Feld mit Trennlinien liest sich als eine. */ .band--weich + .band--zahlen { padding-top: 0; } /* Das Feld gehoert zu dem Abschnitt, der ueber ihm steht: erst der Grund, dann die Zahl. Mit dem vollen Bandmass stuenden auf dem Desktop 112 px Leere dazwischen und die beiden fielen auseinander. */ .band:has(+ .band--zahlen) { padding-bottom: var(--s-7); } .band--zahlen .raster { background: var(--n-000); border: 1px solid var(--kontur); border-radius: var(--r-gross); box-shadow: var(--sch-2); padding: var(--s-5) var(--s-3); /* Kein Spalt zwischen den Zahlen: die Trennung macht die Linie. */ gap: 0; grid-template-columns: repeat(2, 1fr); } @media (min-width: 640px) { .band--zahlen .raster { padding: var(--s-6) var(--s-4); } } /* Die Zweispaltigkeit gilt NUR für schmale Geräte. Weiter oben gewinnt sie sonst gegen .raster--3/--4, weil sie mit zwei Klassen schwerer wiegt: dann stünden vier Zahlen auch auf 1440 px noch zu zweit untereinander. */ @media (min-width: 900px) { .band--zahlen .raster--3 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1100px) { .band--zahlen .raster--4 { grid-template-columns: repeat(4, 1fr); } } .kennzahl { text-align: center; padding: var(--s-4) var(--s-2); /* Ohne min-width:0 nimmt die Rasterspalte die Breite ihres längsten unteilbaren Wortes an. Die Kennzahlen der Neuerungen-Seite tragen lange Beschriftungen. */ min-width: 0; } /* Die Trennlinien folgen dem Raster, nicht der Quelltextstellung: zu zweit trennt eine Linie jede zweite Zahl senkrecht und ab der dritten waagerecht, in einer Reihe trennt nur noch die senkrechte. */ .band--zahlen .kennzahl:nth-child(2n) { border-left: 1px solid var(--kontur); } .band--zahlen .kennzahl:nth-child(n+3) { border-top: 1px solid var(--kontur); } @media (min-width: 900px) { .band--zahlen .raster--3 .kennzahl { border-top: 0; border-left: 0; } .band--zahlen .raster--3 .kennzahl:nth-child(n+2) { border-left: 1px solid var(--kontur); } } @media (min-width: 1100px) { .band--zahlen .raster--4 .kennzahl { border-top: 0; border-left: 0; } .band--zahlen .raster--4 .kennzahl:nth-child(n+2) { border-left: 1px solid var(--kontur); } } .kennzahl__wert { font-family: var(--f-display); font-size: var(--t-hero); line-height: 1; color: var(--marke); font-weight: 600; /* Beim Hochzählen wechseln die Ziffern im Sekundenbruchteil. Ohne feste Ziffernbreite zappelte die Kachel dabei sichtbar. */ font-variant-numeric: tabular-nums; } .kennzahl__text { font-family: var(--f-ui); font-size: var(--t-klein); margin-top: var(--s-2); color: var(--n-700); } /* Zu zweit auf 390 px bleiben je Beschriftung rund 145 px. „Behandlungsformen" misst bei 15 px genau 143 und wäre bei der kleinsten Schwankung mitten im Wort umbrochen worden. Eine Stufe kleiner ist der Abstand wieder ehrlich. */ @media (max-width: 639px) { .kennzahl__text { font-size: 0.875rem; } } /* ========================================================================= 7 · Kopfbereich ========================================================================= */ .kopf { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--n-000) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--kontur); } .kopf__inhalt { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-height: 76px; } .kopf__logo { display: flex; align-items: center; flex: none; } .kopf__logo img { height: 46px; width: auto; } .kopf__nav { display: none; } @media (min-width: 1000px) { .kopf__nav { display: flex; align-items: center; gap: var(--s-5); } } .kopf__nav a { font-family: var(--f-ui); font-size: 1rem; font-weight: 500; color: var(--n-700); text-decoration: none; padding: var(--s-2) 0; position: relative; z-index: 0; transition: color var(--tempo) var(--kurve); } /* Statt des Unterstrichs geht eine weiche Fläche hinter dem Wort auf. Sie sitzt in NEGATIVEM inset, ragt also über den Link hinaus, ohne einen Millimeter Breite zu kosten. Das ist keine Spielerei: bei 1000 px bleiben in der Kopfleiste 48 px übrig, ein echtes Innenmaß hätte die Navigation über die Hülle hinausgeschoben. */ .kopf__nav a::after { content: ""; position: absolute; inset: -2px -10px; z-index: -1; border-radius: var(--r-voll); background: var(--weich-2); transform: scale(.8); opacity: 0; transition: transform 260ms var(--kurve), opacity 260ms var(--kurve); } .kopf__nav a:hover, .kopf__nav a:focus-visible, .kopf__nav a[aria-current="page"] { color: var(--marke); } .kopf__nav a:hover::after, .kopf__nav a:focus-visible::after, .kopf__nav a[aria-current="page"]::after { transform: scale(1); opacity: 1; } .kopf__aktion { display: none; } @media (min-width: 1000px) { .kopf__aktion { display: inline-flex; } } .kopf__schalter { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--kontur); border-radius: var(--r-klein); background: var(--n-000); color: var(--n-900); cursor: pointer; } @media (min-width: 1000px) { .kopf__schalter { display: none; } } .kopf__schalter svg { width: 24px; height: 24px; } .kopf__schalter .schliessen { display: none; } .kopf__schalter[aria-expanded="true"] .oeffnen { display: none; } .kopf__schalter[aria-expanded="true"] .schliessen { display: block; } .mobilnav { display: none; border-top: 1px solid var(--kontur); background: var(--n-000); padding-block: var(--s-4) var(--s-6); } .mobilnav.offen { display: block; } @media (min-width: 1000px) { .mobilnav { display: none !important; } } .mobilnav a { display: block; padding: var(--s-3) 0; min-height: 48px; font-family: var(--f-ui); font-size: 1.0625rem; font-weight: 500; color: var(--n-900); text-decoration: none; border-bottom: 1px solid var(--n-100); } .mobilnav a[aria-current="page"] { color: var(--marke); } .mobilnav .knopf { width: 100%; margin-top: var(--s-5); } /* ========================================================================= 8 · Hero ========================================================================= */ .hero { position: relative; overflow: hidden; background: var(--marke-tief); } .hero__medium { position: absolute; inset: 0; } .hero__medium img, .hero__medium video { width: 100%; height: 100%; object-fit: cover; } .hero__medium::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .30) 0%, rgb(0 0 0 / .48) 55%, rgb(0 0 0 / .68) 100%); } .hero__inhalt { position: relative; z-index: 1; color: var(--n-000); padding-block: clamp(4.5rem, 3rem + 10vw, 9rem); max-width: 46rem; } .hero__inhalt h1 { color: var(--n-000); font-size: var(--t-hero); } .hero__inhalt .dachzeile { color: var(--n-000); } .hero__inhalt .dachzeile::before { background: var(--akzent); } .hero__text { margin-top: var(--s-5); font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.3125rem); line-height: 1.6; color: rgb(255 255 255 / .92); } .hero .knopf-reihe { margin-top: var(--s-6); } /* Merkmalsleiste unter dem Hero */ .hero__marken { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); padding-bottom: var(--s-7); color: rgb(255 255 255 / .92); font-family: var(--f-ui); font-size: var(--t-klein); } .hero__marken li { display: flex; align-items: center; gap: var(--s-2); } .hero__marken svg { width: 18px; height: 18px; color: var(--akzent); flex: none; } /* Schlanker Kopf für Unterseiten */ .seitenkopf { background: var(--weich); padding-block: var(--s-8) var(--s-7); } .seitenkopf h1 { margin-bottom: var(--s-4); } .seitenkopf .vorspann { max-width: 62ch; } /* ========================================================================= 9 · Brotkrumen ========================================================================= */ .krumen { font-size: var(--t-klein); padding-block: var(--s-4); } .krumen ol { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; } .krumen li { display: flex; align-items: center; gap: var(--s-2); color: var(--n-500); } .krumen li + li::before { content: "›"; color: var(--n-300); } .krumen a { color: var(--n-700); text-decoration: none; } .krumen a:hover { color: var(--marke); text-decoration: underline; } /* ========================================================================= 10 · Akkordeon (FAQ, Leistungslisten) ========================================================================= */ .akkordeon { border-top: 1px solid var(--kontur); } .akkordeon details { border-bottom: 1px solid var(--kontur); } .akkordeon summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) 0; min-height: 56px; font-family: var(--f-display); font-size: var(--t-h4); font-weight: 600; color: var(--n-900); cursor: pointer; list-style: none; } .akkordeon summary::-webkit-details-marker { display: none; } .akkordeon summary:hover { color: var(--marke); } .akkordeon__zeichen { flex: none; width: 32px; height: 32px; border-radius: var(--r-voll); border: 1.5px solid var(--kontur); display: grid; place-items: center; transition: transform var(--tempo) var(--kurve), background var(--tempo) var(--kurve); } .akkordeon details[open] .akkordeon__zeichen { transform: rotate(45deg); background: var(--weich); border-color: var(--marke); } .akkordeon__zeichen svg { width: 16px; height: 16px; color: var(--marke); } .akkordeon__inhalt { padding-bottom: var(--s-5); max-width: 68ch; } /* ========================================================================= 11 · Formulare ========================================================================= */ .feld { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-5); } .feld label { font-family: var(--f-ui); font-weight: 600; font-size: var(--t-klein); color: var(--n-900); } .feld input, .feld select, .feld textarea { font-family: var(--f-text); font-size: 1rem; color: var(--n-900); padding: var(--s-3) var(--s-4); min-height: 48px; border: 1.5px solid var(--kontur); border-radius: var(--r-klein); background: var(--n-000); width: 100%; transition: border-color var(--tempo) var(--kurve), box-shadow var(--tempo) var(--kurve); } .feld textarea { min-height: 140px; resize: vertical; } .feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--marke); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marke) 18%, transparent); } .feld__hinweis { font-size: var(--t-mini); color: var(--n-500); } .pflicht { color: var(--akzent-tief); } /* ========================================================================= 12 · Stellen ========================================================================= */ .stelle-karte { background: var(--n-000); border: 1px solid var(--kontur); border-radius: var(--r-gross); padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); position: relative; transition: transform var(--tempo) var(--kurve), box-shadow var(--tempo) var(--kurve); } .stelle-karte:hover { transform: translateY(-4px); box-shadow: var(--sch-2); } .stelle-karte__titel { font-family: var(--f-display); font-size: var(--t-h3); color: var(--n-900); } .stelle-karte__titel a { color: inherit; text-decoration: none; } .stelle-karte__titel a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .stelle-karte__merkmale { display: flex; flex-wrap: wrap; gap: var(--s-2); } .marke-pille { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-3); background: var(--weich); color: var(--marke-tief); border-radius: var(--r-voll); font-family: var(--f-ui); font-size: var(--t-mini); font-weight: 600; } .marke-pille svg { width: 14px; height: 14px; } /* Nummerierte Ablaufschritte */ .schritte { counter-reset: schritt; display: grid; gap: var(--s-5); } @media (min-width: 900px) { .schritte { grid-template-columns: repeat(4, 1fr); } } .schritt { position: relative; padding-top: var(--s-7); } .schritt::before { counter-increment: schritt; content: counter(schritt); position: absolute; top: 0; left: 0; width: 44px; height: 44px; border-radius: var(--r-voll); background: var(--marke); color: var(--auf-marke); display: grid; place-items: center; font-family: var(--f-display); font-size: 1.25rem; font-weight: 600; } .schritt__titel { font-family: var(--f-ui); font-weight: 700; color: var(--n-900); margin-bottom: var(--s-2); } .schritt__text { font-size: var(--t-klein); } /* ========================================================================= 13 · Team ========================================================================= */ .person { text-align: center; } .person__bild { aspect-ratio: 1; border-radius: var(--r-voll); overflow: hidden; background: var(--weich); margin-bottom: var(--s-4); } .person__bild img { width: 100%; height: 100%; object-fit: cover; } .person__name { font-family: var(--f-display); font-size: var(--t-h4); color: var(--n-900); } .person__rolle { font-size: var(--t-klein); color: var(--n-500); margin-top: var(--s-1); } /* ========================================================================= 14 · Fußbereich ========================================================================= */ .fuss { background: var(--marke-tief); color: color-mix(in srgb, var(--auf-marke) 88%, transparent); } .fuss__inhalt { display: grid; gap: var(--s-7); padding-block: var(--s-8) var(--s-6); } @media (min-width: 700px) { .fuss__inhalt { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .fuss__inhalt { grid-template-columns: 1.4fr 1fr 1fr 1fr; } } .fuss__titel { font-family: var(--f-ui); font-size: var(--t-klein); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--auf-marke); margin-bottom: var(--s-4); } .fuss ul { display: grid; gap: var(--s-3); } .fuss a { color: inherit; text-decoration: none; } .fuss a:hover { color: var(--auf-marke); text-decoration: underline; } /* Dasselbe Logo wie im Kopf, auf Weiss gezogen — spart eine zweite Datei, die sonst irgendwann vom Original abweicht. */ .fuss__logo img { height: 52px; width: auto; margin-bottom: var(--s-4); filter: brightness(0) invert(1); } .fuss__schluss { border-top: 1px solid color-mix(in srgb, var(--auf-marke) 18%, transparent); padding-block: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); align-items: center; justify-content: space-between; font-size: var(--t-mini); } .fuss__sozial { display: flex; gap: var(--s-3); } .fuss__sozial a { width: 44px; height: 44px; border-radius: var(--r-voll); border: 1px solid color-mix(in srgb, var(--auf-marke) 25%, transparent); display: grid; place-items: center; } .fuss__sozial a:hover { background: var(--auf-marke); color: var(--marke-tief); } .fuss__sozial svg { width: 20px; height: 20px; } /* KI-Kennzeichnung — Agentur-Standard seit 20.08.2026, Gate 5 prüft ihn. */ .ai-hinweis { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-5); font-size: var(--t-mini); line-height: 1.4; opacity: .78; } .ai-hinweis img { flex: none; width: 18px; height: 18px; } /* ========================================================================= 15 · Hilfsklassen ========================================================================= */ .mitte { text-align: center; } .abstand-oben { margin-top: var(--s-7); } .fliess > * + * { margin-top: var(--s-4); } .fliess h2, .fliess h3 { margin-top: var(--s-7); } .fliess ul:not([class]) { display: grid; gap: var(--s-2); padding-left: var(--s-5); list-style: disc; } .fliess ol:not([class]) { display: grid; gap: var(--s-2); padding-left: var(--s-5); list-style: decimal; } /* Sanftes Einblenden beim Scrollen — respektiert reduzierte Bewegung. Die Staffelung läuft über --verzug, das seite_skripte() je Element aus seiner Stellung in der Gruppe setzt. Ohne JavaScript trägt kein Element die Klasse .sichtbar; deshalb stehen die Startwerte NUR hier drin und der else-Zweig des Skripts setzt alles sofort auf sichtbar. */ @media (prefers-reduced-motion: no-preference) { .auftritt { opacity: 0; transform: translate3d(var(--ein-x, 0), var(--ein-y, 22px), 0) scale(var(--ein-z, 1)); transition: opacity 620ms var(--kurve), transform 620ms var(--kurve); transition-delay: var(--verzug, 0ms); } .auftritt.sichtbar { opacity: 1; transform: none; } } /* Seitliches Hereinkommen erst ab 900 px. Darunter stünde das Element für den Moment des Auftritts neben dem Bildschirm und erzeugte waagerechtes Scrollen — auf dem Handy der sichtbarste Fehler überhaupt. */ @media (min-width: 900px) and (prefers-reduced-motion: no-preference) { .auftritt--links { --ein-x: -32px; --ein-y: 0; } .auftritt--rechts { --ein-x: 32px; --ein-y: 0; } } @media print { .kopf, .fuss__sozial, .knopf, .mobilnav { display: none !important; } body { color: #000; font-size: 11pt; } } /* ========================================================================= 16 · Bewerbungs-Funnel ========================================================================= Die Stufen sind IMMER im Dokument. Ausgeblendet wird nur mit JavaScript (Klasse .fnl--js am Formular) — ohne Skript stehen alle drei untereinander und das Formular bleibt vollständig absendbar. Ein Bewerbungsformular, das ohne JavaScript nicht funktioniert, verliert genau die Bewerbungen, die niemand je zählt. ========================================================================= */ .fnl { margin-top: var(--s-6); } .fnl__falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .fnl__punkte { display: flex; gap: var(--s-3); justify-content: center; margin-bottom: var(--s-7); } .fnl__punkt { width: 36px; height: 36px; border-radius: var(--r-voll); display: grid; place-items: center; font-family: var(--f-ui); font-weight: 700; font-size: .9375rem; background: var(--n-000); color: var(--n-500); border: 1.5px solid var(--kontur); transition: background var(--tempo) var(--kurve), color var(--tempo) var(--kurve), border-color var(--tempo) var(--kurve); } .fnl__punkt--aktiv { background: var(--marke); color: var(--auf-marke); border-color: var(--marke); } .fnl__punkt--fertig { background: var(--akzent); color: var(--auf-akzent); border-color: var(--akzent); } .fnl__stufe { border: 0; padding: 0; margin: 0 0 var(--s-6); } .fnl--js .fnl__stufe { display: none; } .fnl--js .fnl__stufe--aktiv { display: block; } .fnl .feld { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-5); } .fnl__label { font-family: var(--f-ui); font-weight: 600; font-size: var(--t-klein); color: var(--n-900); } .fnl input[type="text"], .fnl input[type="email"], .fnl input[type="tel"], .fnl select { font-family: var(--f-text); font-size: 1rem; color: var(--n-900); padding: var(--s-3) var(--s-4); min-height: 48px; width: 100%; border: 1.5px solid var(--kontur); border-radius: var(--r-klein); background: var(--n-000); transition: border-color var(--tempo) var(--kurve), box-shadow var(--tempo) var(--kurve); } .fnl input:focus, .fnl select:focus { outline: none; border-color: var(--marke); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marke) 18%, transparent); } .fnl input[aria-invalid="true"], .fnl select[aria-invalid="true"] { border-color: #B4231F; box-shadow: 0 0 0 3px color-mix(in srgb, #B4231F 15%, transparent); } .fnl__feldfehler { font-size: var(--t-mini); color: #B4231F; font-weight: 600; } /* Kommt die Bewerbung von einer Stellenseite, steht die Stelle fest da. */ .fnl__fest { display: inline-flex; align-items: center; gap: var(--s-2); background: var(--weich); color: var(--marke-tief); border: 1px solid var(--kontur); border-radius: var(--r-voll); padding: var(--s-2) var(--s-4); font-family: var(--f-ui); font-weight: 700; font-size: 1rem; align-self: flex-start; } .fnl__zustimmung label { display: flex; gap: var(--s-3); align-items: flex-start; cursor: pointer; } .fnl__zustimmung input { width: 20px; height: 20px; min-height: 0; flex: none; margin-top: 2px; accent-color: var(--marke); } .fnl__zustimmung span { font-size: var(--t-klein); line-height: var(--lh-weit); } .fnl__knoepfe { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); } .fnl--js .fnl__stufe:not(.fnl__stufe--aktiv) .fnl__knoepfe { display: none; } .fnl__hinweis:empty { display: none; } .fnl__hinweis { margin-top: var(--s-5); padding: var(--s-4) var(--s-5); border-radius: var(--r-mittel); font-size: var(--t-klein); background: var(--weich); border: 1px solid var(--kontur); } .fnl__hinweis[data-art="fehler"] { border-color: #B4231F; color: #8E1B18; background: #FDF2F1; } .fnl__hinweis[data-art="gut"] { border-color: var(--marke); } /* Team-Kachel ohne zugeordnetes Foto — Monogramm in Markenfarbe. */ .person__bild { position: relative; } .person__monogramm { position: absolute; inset: 0; display: grid; place-items: center; background: var(--weich); color: var(--marke); font-family: var(--f-display); font-size: 2rem; font-weight: 600; letter-spacing: .04em; } .person--klick { transition: transform var(--tempo) var(--kurve); } .person--klick:hover { transform: translateY(-4px); } .person__name a { color: inherit; text-decoration: none; } .person--klick:hover .person__name a { color: var(--marke); } /* ========================================================================= 17 · Kampagnen-Funnel ========================================================================= Reduzierte Seite: kein Hero, keine Navigation, kein Beiwerk. Alles, was nicht die nächste Frage ist, ist hier ein Ausgang — und jeder Ausgang kostet eine Bewerbung. ========================================================================= */ .kopf--schlank { position: static; background: var(--n-000); } .kopf--schlank .kopf__inhalt { min-height: 68px; } .kopf__notiz { font-family: var(--f-ui); font-size: var(--t-mini); color: var(--n-500); } .fuss--schlank { background: var(--marke-tief); } .fuss--schlank .fuss__schluss { padding-block: var(--s-5); } .kmp { padding-block: clamp(2rem, 1rem + 4vw, 4rem) var(--s-9); } .kmp__stelle { display: inline-flex; align-items: center; gap: var(--s-2); background: var(--weich); color: var(--marke-tief); border: 1px solid var(--kontur); border-radius: var(--r-voll); padding: var(--s-2) var(--s-4); margin-bottom: var(--s-5); font-family: var(--f-ui); font-weight: 700; font-size: var(--t-klein); } .kmp__titel { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); margin-bottom: var(--s-3); } .kmp__vorspann { font-size: var(--t-body); color: var(--n-700); margin-bottom: var(--s-7); max-width: 52ch; } .kmp__falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .kmp__fortschritt { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-6); } .kmp__balken { flex: 1; height: 6px; border-radius: var(--r-voll); background: var(--weich-2); overflow: hidden; } .kmp__balken-fuellung { display: block; height: 100%; width: 0; border-radius: var(--r-voll); background: var(--marke); transition: width 320ms var(--kurve); } .kmp__zaehler { font-family: var(--f-ui); font-size: var(--t-mini); font-weight: 700; color: var(--n-500); white-space: nowrap; font-variant-numeric: tabular-nums; } .kmp__schritt { border: 0; padding: 0; margin: 0; } .kmp--js .kmp__schritt { display: none; } .kmp--js .kmp__schritt--aktiv { display: block; } .kmp__frage { font-family: var(--f-display); font-size: clamp(1.3rem, 1.1rem + 1vw, 1.9rem); font-weight: 600; color: var(--n-900); line-height: 1.25; padding: 0; margin-bottom: var(--s-3); } .kmp__zusatz { font-size: var(--t-klein); color: var(--n-500); margin-bottom: var(--s-5); } .kmp__antworten { display: grid; gap: var(--s-3); } @media (min-width: 620px) { .kmp__antworten { grid-template-columns: 1fr 1fr; } } .kmp__antwort { display: flex; align-items: center; gap: var(--s-3); min-height: 60px; padding: var(--s-4) var(--s-5); text-align: left; font: inherit; font-size: 1.0625rem; background: var(--n-000); color: var(--n-900); border: 1.5px solid var(--kontur); border-radius: var(--r-mittel); cursor: pointer; transition: border-color var(--tempo) var(--kurve), background var(--tempo) var(--kurve), transform var(--tempo) var(--kurve); } .kmp__antwort::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--kontur); transition: all var(--tempo) var(--kurve); } .kmp__antwort:hover { border-color: var(--marke); transform: translateY(-2px); } .kmp__antwort[aria-pressed="true"] { border-color: var(--marke); background: var(--weich); } .kmp__antwort[aria-pressed="true"]::before { border-color: var(--marke); background: var(--marke); box-shadow: inset 0 0 0 3px var(--n-000); } .kmp__felder { display: grid; gap: var(--s-4); } @media (min-width: 620px) { .kmp__felder { grid-template-columns: 1fr 1fr; } } .kmp__feld { display: flex; flex-direction: column; gap: var(--s-2); } .kmp__feld label { font-family: var(--f-ui); font-weight: 600; font-size: var(--t-klein); color: var(--n-900); } .kmp__feld input { font-family: var(--f-text); font-size: 1rem; padding: var(--s-3) var(--s-4); min-height: 50px; border: 1.5px solid var(--kontur); border-radius: var(--r-klein); background: var(--n-000); color: var(--n-900); width: 100%; } .kmp__feld input:focus { outline: none; border-color: var(--marke); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marke) 18%, transparent); } .kmp__feld input[aria-invalid="true"] { border-color: #B4231F; } .kmp__feldfehler { font-size: var(--t-mini); color: #B4231F; font-weight: 600; } .kmp__zustimmung { margin-top: var(--s-5); } .kmp__zustimmung label { display: flex; gap: var(--s-3); align-items: flex-start; cursor: pointer; } .kmp__zustimmung input { width: 20px; height: 20px; flex: none; margin-top: 3px; accent-color: var(--marke); } .kmp__zustimmung span { font-size: var(--t-klein); line-height: var(--lh-weit); color: var(--n-700); } .kmp__knoepfe { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); align-items: center; } .kmp__zurueck { background: none; border: 0; color: var(--n-500); font: inherit; font-size: var(--t-klein); font-weight: 600; cursor: pointer; padding: var(--s-3) 0; min-height: 44px; } .kmp__zurueck:hover { color: var(--n-900); text-decoration: underline; } .kmp__meldung:empty { display: none; } .kmp__meldung { margin-top: var(--s-6); padding: var(--s-5); border-radius: var(--r-mittel); font-size: var(--t-klein); background: var(--weich); border: 1px solid var(--kontur); } .kmp__meldung[data-art="fehler"] { border-color: #B4231F; background: #FDF2F1; color: #8E1B18; } .kmp__fuss { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-7); font-size: var(--t-mini); color: var(--n-500); } /* Umriss-Knopf AUF einem Foto: ohne eigene Fläche verschwindet er auf hellen Bildstellen. Der halbdurchlässige Grund macht ihn überall lesbar, ohne dass er dem Hauptknopf die Aufmerksamkeit nimmt. */ .hero .knopf--rand { background: rgb(0 0 0 / .28); backdrop-filter: blur(6px); border-color: rgb(255 255 255 / .75); color: #FFFFFF; } .hero .knopf--rand:hover { background: #FFFFFF; color: var(--marke-tief); border-color: #FFFFFF; } /* Text-Abschnitt ohne Bild — kein halbleeres Raster, sondern eine ruhige Spalte. Sie beginnt an DERSELBEN Kante wie Überschrift und Kopfbereich darüber; eingerückt sähe es nach Versehen aus statt nach Absicht. */ .solo { display: block; } .solo > div { max-width: 64ch; } /* ========================================================================= 18 · Zeitleiste ========================================================================= */ .zeit { position: relative; display: grid; gap: 0; } .zeit::before { content: ""; position: absolute; left: 0; top: .6rem; bottom: .6rem; width: 2px; background: linear-gradient(var(--kontur), var(--marke), var(--kontur)); } @media (min-width: 760px) { .zeit::before { left: 108px; } } .zeit__punkt { position: relative; display: grid; gap: var(--s-1); padding: 0 0 var(--s-6) var(--s-6); } @media (min-width: 760px) { .zeit__punkt { grid-template-columns: 108px 1fr; gap: var(--s-6); padding-left: 0; align-items: baseline; } } .zeit__punkt:last-child { padding-bottom: 0; } .zeit__jahr { font-family: var(--f-display); font-size: 1.5rem; font-weight: 600; color: var(--marke); line-height: 1.1; font-variant-numeric: tabular-nums; } /* Die Jahresspalte ist 108 px breit, der Punkt sitzt bei 103 px — rechtsbündig ohne Abstand würde die letzte Ziffer den Punkt berühren. */ @media (min-width: 760px) { .zeit__jahr { text-align: right; padding-right: var(--s-5); } } /* Der Punkt auf der Linie */ .zeit__punkt::before { content: ""; position: absolute; left: -5px; top: .55rem; width: 12px; height: 12px; border-radius: 50%; background: var(--n-000); border: 2.5px solid var(--marke); } @media (min-width: 760px) { .zeit__punkt::before { left: 103px; } } .zeit__titel { font-family: var(--f-ui); font-size: var(--t-klein); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--n-900); margin-bottom: var(--s-1); } .zeit__text { font-size: var(--t-klein); color: var(--n-700); max-width: 60ch; } /* Leitungs-Kacheln: Porträt plus Text. Bei zwei Spalten wäre der Kreis sonst über 500 px breit und würde den Text erschlagen — die Kachel wird deshalb hier gedeckelt, nicht das Raster. */ .person__text { font-size: var(--t-klein); color: var(--n-700); margin-top: var(--s-3); text-align: left; max-width: 46ch; margin-inline: auto; } .raster--2 .person__bild { max-width: 320px; margin-inline: auto; } /* ========================================================================= 19 · Bewegung ========================================================================= Alles in diesem Abschnitt ist Zugabe. Fehlt die Unterstützung für scroll-getriebene Animationen, ist JavaScript aus oder hat jemand Bewegung abbestellt, steht die Seite trotzdem vollständig und im Endzustand da. Es gibt hier keinen Inhalt, der auf eine Animation wartet. ========================================================================= */ /* Lange deutsche Komposita brechen als GANZES Wort um. Kein hyphens:auto: Trennstriche mitten im Wort sollen auf diesen Seiten nicht vorkommen. */ body { overflow-wrap: break-word; } /* --- Wie weit ist die Seite gelesen? ------------------------------------ Ohne Unterstützung für scroll() bleibt der Balken auf scaleX(0) und ist damit schlicht unsichtbar. Er braucht deshalb keinen JS-Ersatz. */ .kopf__fortschritt { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--akzent), var(--marke)); pointer-events: none; } @supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { .kopf__fortschritt { animation: ak-fortschritt linear both; animation-timeline: scroll(root block); } } } @keyframes ak-fortschritt { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* --- Der Kopf schrumpft, sobald man losscrollt -------------------------- 76 px Kopfleiste sind auf einem Handy ein Zehntel des Bildschirms. Nach den ersten 40 px Scrollen reichen 62 px, und das Logo darf mit. */ .kopf { transition: background var(--tempo) var(--kurve), box-shadow var(--tempo) var(--kurve); } .kopf__inhalt { transition: min-height var(--tempo) var(--kurve); } .kopf__logo img { transition: height var(--tempo) var(--kurve); } .kopf--kompakt { background: color-mix(in srgb, var(--n-000) 94%, transparent); box-shadow: var(--sch-1); } .kopf--kompakt .kopf__inhalt { min-height: 62px; } .kopf--kompakt .kopf__logo img { height: 38px; } /* --- Kein Parallax mehr im Duo-Band ------------------------------------- Hier stand eine mitwandernde Bewegung. Sie brauchte ein scale(1.06), um Spielraum zu haben, und genau das war der Fehler: die Figur schneidet ab, was über ihre Kante hinausragt. Im Ruhezustand fehlten damit 3 Prozent oben und unten, beim Scrollen bis zu 6,5 — auf der Massage-Seite war dem Therapeuten der Kopf abgeschnitten. Ein Inhaltsbild, das eine bestimmte Behandlung zeigt, darf nicht für einen Effekt beschnitten werden. Die scroll-getriebene Deko bleibt dort, wo sie nichts kostet: Fortschritts- balken im Kopf und wachsende Linie der Zeitleiste. */ /* --- Die Linie der Zeitleiste wächst beim Scrollen mit ------------------ */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .zeit::before { transform-origin: top; animation: ak-linie linear both; animation-timeline: view(); animation-range: cover 5% cover 65%; } } } @keyframes ak-linie { from { transform: scaleY(0); } to { transform: scaleY(1); } } /* --- Ablaufschritte: Verbindung von Nummer zu Nummer -------------------- Je Schritt ein eigenes Stück Linie bis in die nächste Spalte hinein. Das rechnet nicht mit Prozenten der Gesamtbreite und sitzt deshalb auch dann richtig, wenn sich der Spaltenabstand ändert. Auf dem Handy stehen die Schritte untereinander: dort liefe die Linie quer durch den Text, also gibt es sie erst ab 900 px. */ @media (min-width: 900px) { .schritt:not(:last-child)::after { content: ""; position: absolute; top: 21px; left: 56px; right: calc(-1 * var(--s-5)); height: 2px; background: var(--kontur); } } /* --- Richtung im Duo-Band ------------------------------------------------ Text und Bild kommen aus ihrer jeweils eigenen Seite herein. Bei umgedrehter Anordnung tauschen sie die Richtung mit: sonst liefe das Bild gegen die Seite, auf der es steht. Unter 900 px stehen beide untereinander und behalten die senkrechte Grundrichtung. */ @media (min-width: 900px) and (prefers-reduced-motion: no-preference) { .duo > .auftritt:first-child { --ein-x: -32px; --ein-y: 0; } .duo > .auftritt:last-child { --ein-x: 32px; --ein-y: 0; } .duo--gedreht > .auftritt:first-child { --ein-x: 32px; } .duo--gedreht > .auftritt:last-child { --ein-x: -32px; } } /* --- Seitenkopf mit Bild ------------------------------------------------- Er trägt dieselbe Sprache wie der Hero der Startseite: Foto, Abdunklung, weiße Schrift. Nur etwas flacher, weil unter der Überschrift keine Knopf- reihe und keine Merkmalsleiste mehr folgen — mit dem vollen Maß stünde auf jeder Unterseite ein halber Bildschirm, in dem nur drei Zeilen stehen. */ /* Der Seitenkopf braucht eine Mindesthöhe. Ohne sie richtet er sich nach drei Zeilen Text und wird am Desktop 1425 x 370 Pixel groß, also 3,85:1. Ein Foto im Format 4:3 verliert darin zwei Drittel seiner Höhe, und weil object-fit mittig schneidet, war bei zwölf von 24 Aufnahmen der Kopf ab. Mit 3,3:1 und einem um 18 Punkte nach oben gerückten Ausschnitt sind es noch zwei, und die tragen ihre eigene Lage. */ @media (min-width: 700px) { .hero--kopf { display: grid; align-content: center; min-height: clamp(22rem, 30vw, 28rem); } } .hero--kopf .hero__medium img { object-position: 50% 32%; } .hero--kopf .hero__inhalt { padding-block: clamp(3.5rem, 2.5rem + 6vw, 6rem); max-width: 52rem; } /* Die Überschrift einer Unterseite steht eine Stufe kleiner als die der Startseite. Nicht aus Bescheidenheit: „Kiefergelenksbehandlungen" misst bei 64 px rund 875 px und passte damit in keine Zeile mehr. */ .hero--kopf .hero__inhalt h1 { /* Eigene Kurve statt --t-h1. Der Boden liegt bei 24 px, weil „Kiefergelenksbehandlungen" auf einem 390-px-Gerät sonst breiter wird als die Hülle und mitten im Wort umbricht. */ font-size: clamp(1.5rem, 0.9rem + 2.55vw, 3.25rem); } .hero--kopf .hero__text { font-size: clamp(1rem, .95rem + .4vw, 1.1875rem); } /* ========================================================================= 20 · Bauchbinde (Partnerlogos im Endloslauf) ========================================================================= Der Lauf entsteht aus zwei identischen Spuren nebeneinander, die beide um ihre EIGENE Breite nach links wandern. Prozentwerte in translateX beziehen sich auf die Breite des Elements selbst — deshalb steht die zweite Spur am Ende der Bewegung exakt dort, wo die erste begonnen hat, und der Sprung zurück auf Null ist unsichtbar. Ohne die Kopie gäbe es eine Lücke. ========================================================================= */ .bauchbinde { overflow: hidden; } /* Das Band läuft über die volle Fensterbreite, nicht nur über die Hülle: eine Bauchbinde, die am Inhaltsrand endet, ist keine. */ .bb { display: flex; width: 100%; /* Die Ränder ausblenden, damit die Logos nicht hart abgeschnitten hereinlaufen, sondern auftauchen und vergehen. */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .bb__spur { display: flex; align-items: center; flex: none; gap: clamp(1rem, 0.5rem + 2vw, 2.5rem); padding-right: clamp(1rem, 0.5rem + 2vw, 2.5rem); margin: 0; padding-left: 0; list-style: none; } .bb__spur > li { flex: none; } @media (prefers-reduced-motion: no-preference) { .bb__spur { animation: bb-lauf 48s linear infinite; } /* Wer ein Logo lesen will, hält an. */ .bb:hover .bb__spur, .bb:focus-within .bb__spur { animation-play-state: paused; } } @keyframes bb-lauf { from { transform: translateX(0); } to { transform: translateX(-100%); } } /* Groß und präsent: die Kachel ist das Maß, nicht das Logo. Alle neun stehen dadurch auf derselben Grundfläche, obwohl die Dateien von 200 bis 1920 px reichen und die Seitenverhältnisse von quadratisch bis 6:1. Die Kachel ist ein schlichter BLOCK, kein Raster und kein Flexkasten. Das ist der Grund: nur so ist ihre Inhaltshöhe eindeutig, und nur dann bezieht sich „height: 100%" am Bild auf etwas. Als Rasterkind hing die Zeilenhöhe am Bild und das Bild an der Zeilenhöhe; der Browser verwarf die Angabe, und Caritas stand mit 209 px Höhe in einer 144 px hohen Kachel. Absolut positionieren half auch nicht: bei ersetzten Elementen wie img bedeutet „width: auto" die EIGENE Breite, nicht die des Rahmens. */ .bb__kachel { display: block; padding: clamp(0.75rem, 0.5rem + 1vw, 1.5rem); width: clamp(11rem, 8rem + 9vw, 16rem); height: clamp(6.5rem, 5rem + 4.5vw, 9rem); background: var(--n-000); border: 1px solid var(--kontur); border-radius: var(--r-mittel); box-shadow: var(--sch-1); } /* gym80 und med80 liegen als WEISSE Marke auf Transparenz vor und wären auf einer weißen Kachel unsichtbar. */ .bb__kachel--dunkel { background: var(--marke); border-color: var(--marke); } .bb__kachel img { display: block; width: 100%; height: 100%; object-fit: contain; } /* ========================================================================= 21 · Untermenü in der Kopfleiste ========================================================================= Ohne JavaScript: das Feld öffnet über :hover UND :focus-within, damit es auch erreicht, wer mit der Tastatur durch die Navigation geht. Es liegt absolut, kostet also keine Breite in der Kopfleiste — die ist bei 1000 px ohnehin knapp. ========================================================================= */ .kopf__punkt { position: relative; display: inline-flex; } /* Der Pfeil sagt, dass hier etwas aufgeht. Aus Rahmen gezeichnet statt als Zeichen, damit er auf jeder Schriftgröße gleich sitzt. */ .kopf__pfeil { display: inline-block; margin-left: .4em; vertical-align: middle; border: 4px solid transparent; border-top-color: currentColor; transform: translateY(2px); transition: transform var(--tempo) var(--kurve); } .kopf__punkt:hover .kopf__pfeil, .kopf__punkt:focus-within .kopf__pfeil { transform: translateY(2px) rotate(-180deg); } /* Die aktuelle Seite steht unter diesem Punkt: der Punkt wird mitmarkiert, aber ruhiger als die Seite selbst. */ .kopf__nav a.ist-elternteil { color: var(--marke); } .kopf__unter { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 6px); /* Spalten nach Inhalt, nicht nach Bruchteilen: mit „1fr" waren die Spalten schmaler als die längsten Einträge, und weil die Zeilen nicht umbrechen dürfen, lief „Krankengymnastik am Gerät" in die zweite Spalte hinein. Spaltenweise gefüllt, damit die Reihenfolge der Liste erhalten bleibt: eins bis fünf links, sechs bis zehn rechts. */ display: grid; grid-auto-flow: column; grid-template-rows: repeat(5, auto); grid-auto-columns: max-content; gap: 2px var(--s-5); margin-top: var(--s-3); padding: var(--s-4); background: var(--n-000); border: 1px solid var(--kontur); border-radius: var(--r-mittel); box-shadow: var(--sch-3); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--tempo) var(--kurve), transform var(--tempo) var(--kurve), visibility 0s linear var(--tempo); z-index: 60; } /* Der Streifen schließt die Lücke zwischen Menüpunkt und Feld. Ohne ihn klappt das Feld zu, sobald der Zeiger den Zwischenraum quert. */ .kopf__punkt::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: var(--s-4); } .kopf__punkt:hover .kopf__unter, .kopf__punkt:focus-within .kopf__unter { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition-delay: 0s; } .kopf__unter a { padding: var(--s-2) var(--s-3); border-radius: var(--r-klein); font-size: .9375rem; white-space: nowrap; } /* Im Feld ist Platz: hier darf die Fläche echtes Innenmaß haben, anders als in der Leiste darüber. */ .kopf__unter a::after { display: none; } .kopf__unter a:hover { background: var(--weich-2); color: var(--marke); } .kopf__unter a[aria-current="page"] { background: var(--weich-2); color: var(--marke); } /* Unterpunkte im Mobilmenü: eingerückt, kleiner, ohne eigene Trennlinie. */ .mobilnav__kind { padding-left: var(--s-5) !important; font-size: 1rem !important; color: var(--n-700) !important; border-bottom-color: transparent !important; } .mobilnav__kind[aria-current="page"] { color: var(--marke) !important; } /* ========================================================================= 22 · Entwurfsmarke ========================================================================= Nur in der Vorschau (siehe entwurf_marke() in bausteine.php). Sie war zuerst ein farbiges Vollschild über jeder Passage. Das war zu viel: wer die Vorschau öffnete, sah zuerst ein Formular und dann die Praxis. Jetzt ein Punkt am linken Rand mit feiner Linie. Der volle Hinweis kommt beim Überfahren UND beim Tastaturfokus, deshalb das tabindex am Element. ========================================================================= */ .nur-vorlesen { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; /* KEINE Mini-Schriftgröße: das Gate für Lesbarkeit meldet sonst „Schrift unter 12px", obwohl der Text gar nicht sichtbar ist. */ font-size: 1rem; } .entwurf-marke { position: absolute; left: calc(-1 * var(--s-5)); top: .35em; display: block; width: var(--s-4); height: 1.6em; cursor: help; } .entwurf-marke__punkt { position: absolute; left: 0; top: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--akzent); } /* Die feine Linie unter dem Punkt. Sie sagt: hier beginnt etwas Neues. */ .entwurf-marke__punkt::after { content: ""; position: absolute; left: 3px; top: 9px; width: 1px; height: 1.1em; background: var(--akzent); opacity: .45; } .entwurf-marke__blase { position: absolute; left: 0; top: calc(100% + 6px); width: max-content; max-width: 19rem; padding: var(--s-2) var(--s-3); border-radius: var(--r-klein); background: var(--n-900); color: var(--n-000); font-family: var(--f-ui); font-size: var(--t-mini); line-height: 1.4; opacity: 0; visibility: hidden; transition: opacity var(--tempo) var(--kurve), visibility 0s linear var(--tempo); z-index: 40; } .entwurf-marke:hover .entwurf-marke__blase, .entwurf-marke:focus-visible .entwurf-marke__blase { opacity: 1; visibility: visible; transition-delay: 0s; } .entwurf-marke:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; } /* Der Punkt sitzt außerhalb der Textspalte, dafür braucht der Abschnitt einen Bezugspunkt. Unter 900 px ist links kein Platz: dort rückt er an den Zeilenanfang. */ .band .huelle, .band .huelle--schmal, .kopfzeile-abschnitt { position: relative; } @media (max-width: 899px) { .entwurf-marke { left: 0; top: -1.1em; height: auto; } .entwurf-marke__punkt::after { display: none; } } /* ========================================================================= 23 · Wasserzeichen in der Kopfleiste ========================================================================= Der Kunde wollte das Zeichen aus dem Hintergrund der bestehenden Seite zurück. Übernommen ist die Figur, NICHT die cremefarbene Leiste: die war einer der Posten, die dem höheren Weißanteil gewichen sind. Die Figur liegt in einem eigenen Kasten mit overflow:hidden, damit sie an der Leistenkante abgeschnitten wird. Sie darf NICHT auf .kopf selbst liegen: dort würde overflow:hidden das Untermenü mit abschneiden, das aus der Leiste herausklappt. z-index: -1 malt sie über den Untergrund der Leiste, aber unter Logo, Navigation und Knopf. Das funktioniert, weil .kopf mit z-index: 50 einen eigenen Stapelzusammenhang aufmacht. ========================================================================= */ .kopf__marke { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; display: block; } .kopf__marke img { position: absolute; left: 46%; top: 50%; height: 190%; width: auto; transform: translateY(-50%); opacity: .09; } /* Auf dem Handy ist die Leiste schmal und das Zeichen liefe dem Logo in die Quere. Dort rückt es an den rechten Rand und wird blasser. */ @media (max-width: 999px) { .kopf__marke img { left: auto; right: 4%; height: 165%; opacity: .06; } } /* --- Partnerschaft im Fußbereich ---------------------------------------- PHYSIOMED SÜD und das MVZ BERLIN RUDOW treten nach außen getrennt auf. Der gegenseitige Verweis stand vorher in der Spalte mit den eigenen Seiten und las sich dort wie ein weiterer Bereich desselben Hauses. Als eigene Zeile mit Vorspann ist die Beziehung benannt statt angedeutet. */ .fuss__partner { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid rgb(255 255 255 / .14); font-family: var(--f-ui); font-size: var(--t-klein); } .fuss__partner > span { opacity: .7; } .fuss__partner a { font-weight: 700; text-decoration: none; } .fuss__partner a:hover { text-decoration: underline; } /* ========================================================================= 24 · Anfrageformular ========================================================================= Empfänger ist der Kunde, nicht die Agentur (Website-SOP, Abschnitt 7). Der Honigtopf ist für Menschen unsichtbar, steht aber IM Dokument: mit display:none füllen ihn manche Bots trotzdem nicht, weil sie es erkennen. ========================================================================= */ .anfrage { display: grid; gap: var(--s-4); } .anfrage__falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } @media (min-width: 640px) { .anfrage__paar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); } } .anfrage__paar .feld { margin: 0; } .anfrage textarea { width: 100%; resize: vertical; min-height: 9rem; font: inherit; color: inherit; padding: var(--s-3) var(--s-4); background: var(--n-000); border: 2px solid var(--kontur); border-radius: var(--r-klein); transition: border-color var(--tempo) var(--kurve), box-shadow var(--tempo) var(--kurve); } .anfrage textarea:focus-visible { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 28%, transparent); } .anfrage__zustimmung label { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t-klein); line-height: var(--lh-weit); } .anfrage__zustimmung input { margin-top: .3em; flex: none; width: 18px; height: 18px; } /* Die Rückmeldung ist ein role="status": Vorlesewerkzeuge sagen sie an, ohne dass der Fokus springt. Leer nimmt sie keinen Platz weg. */ .anfrage__antwort:empty { display: none; } .anfrage__antwort { margin: 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-klein); font-size: var(--t-klein); border: 1px solid var(--kontur); background: var(--n-000); } .anfrage__antwort--gut { border-color: var(--marke); } .anfrage__antwort--fehler { border-color: var(--akzent-tief); }