/* =========================================================================== PHYSIOPARK — Seitengenaue Ergänzungen (Runde „Lebendigkeit“, 06.10.2026) Je Seitengruppe ein Abschnitt. Nur Bauteile aus dem Mockup (Brandkit 15.png), keine neuen Formen. Allgemeine Bewegung steht in bewegung.css. =========================================================================== */ /* --------------------------------------------------------------------------- A Berlin: Start und Pflegeeinrichtungen --------------------------------------------------------------------------- */ /* Anfang A */ /* --- Startseite --------------------------------------------------------- Bühne am Handy: das Hochformat start-hero läuft dort quer (16:9). Mit dem Fokus "oben" standen nur die Köpfe im Bild, die Hände (das Motiv: er führt sie) fielen weg. Am Rechner ist der Rahmen 4:5 wie das Foto, dort ändert sich nichts. */ @media (max-width: 960px) { .seite-hero.buehne .buehne-rahmen img[src$="/start-hero.webp"] { object-position: 50% 55%; } } /* K5 am Rechner: Fotopaar mittig zur Textspalte. Oben bündig blieb unter den Fotos eine leere Fläche von rund 350 px (Prüfung 06.10.2026). */ @media (min-width: 961px) { :is(#hauptaufgabe, #ausgangslage, #bedeutung) .erwartet-grid { align-items: center; } } /* Leistungen: am Rechner vier Karten in einer Reihe statt 2 × 2 großer Karten (eine Bildschirmhöhe weniger). Hochformat, weil drei der vier Fotos Hochformate sind. */ @media (min-width: 1100px) { #leistungen .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--m5); } #leistungen .bento-bild { aspect-ratio: 4 / 5; } #leistungen .bento-inhalt { padding: var(--m5) var(--m5) var(--m6); } #leistungen .bento-inhalt h3 { font-size: 1.12rem; } #leistungen .bento-inhalt p { font-size: .93rem; } } /* Weiche und Team in derselben Breite wie die Nachbarn (container-breit), sonst sprang die linke Kante am Rechner von 117 auf 198 px. Das Team behält .container, weil nur dieser über dem weissen Schleier liegt. */ #team .container { max-width: var(--breite-breit); } /* Team am Handy: die drei Stimmen als Pillen (Pille mit Punkt wie im Mockup) direkt über der Zitatkarte, umbrechend statt untereinander. Vorher standen drei Karten untereinander und schoben die Zitatkarte aus dem Bild. Das Thema steht in der Pille auf der Zitatkarte. */ @media (max-width: 760px) { #team .team-liste { flex-direction: row; flex-wrap: wrap; max-width: none; gap: var(--m2); margin-top: var(--m6); } #team .team-person { flex: 0 0 auto; gap: 8px; padding: 8px 13px; border-radius: var(--bogen-pille); } #team .team-person .dot { width: 11px; height: 11px; } #team .team-person strong { font-size: .9rem; white-space: nowrap; } #team .team-person > span > span { display: none; } #team .team-grid { gap: var(--m6); } } /* --- /pflegeeinrichtungen/therapie/: Umschalter Physio | Ergo ----------- */ .fach-wahl, .vergleich-wahl { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; } :is(.fach-wahl, .vergleich-wahl) button { min-height: 0; text-align: center; padding: 14px 18px; } .fach-tafel { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--m12); align-items: center; } .fach-bild { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 55%; border-radius: 14px; box-shadow: var(--schatten-2); } .fach-bild[src$="/strecke-theraband.webp"] { object-position: 50% 85%; } .fach-bild[src$="/strecke-malen.webp"] { object-position: 50% 30%; } .fach-text h3 { margin-bottom: var(--m3); } /* --- /pflegeeinrichtungen/verordnungsmanagement/: Ohne | Mit ------------ */ #vergleich-ohne .gegen-spalte { max-width: 820px; } /* Der Reiter trägt denselben Titel wie die Spalte; mit Skript bleibt der Spaltentitel nur für Vorleser stehen, ohne Skript ist er sichtbar. */ html.js #vergleich-ohne .gegen-spalte h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .vergleich-mit-titel { margin-bottom: 0; } /* Schrittkarten mit ungleich langem Text (/ablauf/ 03 doppelt so lang wie 02): Nummer, Etikett und Titel bleiben oben in einer Flucht (mittig gesetzt stand jede Überschrift auf einer anderen Höhe, Gegenprüfung 06.10.2026). */ :is(#schritte, #vergleich-mit) .schritt-karte { display: flex; flex-direction: column; justify-content: flex-start; } @media (min-width: 961px) { #vergleich-ohne .gegen-spalte ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--m10); } } @media (max-width: 760px) { :is(.fach-wahl, .vergleich-wahl) { gap: var(--m2); } :is(.fach-wahl, .vergleich-wahl) button { padding: 12px 10px; font-size: .78rem; letter-spacing: .03em; } .fach-tafel { grid-template-columns: minmax(0, 1fr); gap: var(--m5); } .fach-bild { aspect-ratio: 16 / 10; } /* Der Reiter nennt den Fachbereich schon; der Titel bleibt für Vorleser */ html.js .fach-text h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } #fachbereiche .karte-mitte { padding: var(--m6) var(--m5); } /* Ansprechperson: das Hochformat stand am Handy 430 px hoch */ #ansprechperson .split-bild img { aspect-ratio: 4 / 3; object-position: 50% 30%; } #vergleich-ohne .gegen-spalte { padding: var(--m6) var(--m5); } } /* --- /pflegeeinrichtungen/anfrage/ --------------------------------------- Telefon-Karte ohne style-Attribute. Am Handy kommt das Formular zuerst, die Karte darunter: vorher lag das erste Feld rund zwei Bildschirm- höhen tief. */ .anfrage-anruf .anruf-titel { font-family: var(--font-head); font-weight: 800; text-transform: uppercase; font-size: 1.05rem; color: var(--tinte); margin-bottom: 18px; } .anruf-trenner { border: 0; border-top: 1px solid var(--linie-stark); margin: 22px 0; } .anruf-folge { margin-left: 18px; font-size: .96rem; display: grid; gap: 8px; } @media (max-width: 960px) { .anfrage-raster > .anfrage-anruf { order: 2; } } /* Ende A */ /* --------------------------------------------------------------------------- B Berlin: Fortbildungen, Ärzte, Unternehmen, Azubis --------------------------------------------------------------------------- */ /* Anfang B */ /* ---------- /fortbildungen/ ---------- Die Einleitung steht im Kopf des grünen Sliders (vorher eigenes Textband). */ .vorteile-kopf .vorteile-intro { max-width: 600px; } .vorteile-intro strong { color: #fff; } /* Abschnitt „Ort“ (K5, zwei Hochformate): am Handy etwas kleiner, die Faktenkarte darunter trägt den Inhalt. */ @media (max-width: 760px) { #ort .erwartet-bilder.paar-hoch .bild-1 { width: 60%; } #ort .erwartet-bilder.paar-hoch .bild-2 { width: 48%; margin-top: -46%; } } /* ---------- /fortbildungen/themen/: Auswahlleiste ---------- Die ruhende Leiste war nur unsichtbar (opacity 0) und hielt ihren Platz: 240 bis 270 px Loch unter dem Raster. Ruhend nimmt sie jetzt keinen Platz ein; erst mit der ersten Auswahl steigt sie wie bisher ein. */ [data-wahl-bereich] .wahl-leiste.ruht { height: 0; min-height: 0; margin-top: 0; padding-block: 0; border-width: 0; overflow: hidden; visibility: hidden; box-shadow: none; } @media (max-width: 760px) { /* Karten kompakter: das Raster stand bei 2,05 Bildschirmhöhen */ [data-wahl-bereich] .wahl-raster { gap: var(--m3); } [data-wahl-bereich] .wahl { padding: 14px var(--m4) 14px 50px; } [data-wahl-bereich] .wahl .haken { left: 14px; top: 15px; } [data-wahl-bereich] .wahl span { font-size: .9rem; line-height: 1.45; } /* Leiste in einer Zeile: Zähler links, Knopf rechts (vorher 172 px hoch) */ [data-wahl-bereich] .wahl-leiste { flex-direction: row; flex-wrap: nowrap; align-items: center; text-align: left; gap: var(--m3); bottom: var(--m3); padding: 10px 10px 10px var(--m4); } [data-wahl-bereich] .wahl-leiste p { font-size: .92rem; line-height: 1.3; } [data-wahl-bereich] .wahl-leiste .btn { width: auto; flex: none; padding-inline: 18px; } .wahl-leiste .leiste-zusatz, .wahl-leiste .leiste-lang { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Solange die Leiste steht, ist sie die Handyleiste: die allgemeine Leiste und der Knopf nach oben treten zurück, statt sie zu verdecken. */ html:has(.wahl-leiste:not(.ruht)) .handy-leiste { display: none !important; } html:has(.wahl-leiste:not(.ruht)) .nach-oben { opacity: 0; visibility: hidden; pointer-events: none; } } /* ---------- /fortbildungen/anfrage/ ---------- Am Handy steht die Karte „Lieber telefonisch?“ hinter dem Formular, am Rechner bleibt sie beim Ausfüllen neben dem Formular stehen. */ /* .abschnitt h2 setzt die Abschnittsgröße: zwei Klassen, damit die Karte gewinnt */ .karte .karte-titel-klein { font-family: var(--font-head); font-weight: 800; text-transform: uppercase; font-size: 1.05rem; color: var(--tinte); margin-bottom: 18px; } .karte-trenner { border: 0; border-top: 1px solid var(--linie-stark); margin: 22px 0; } @media (min-width: 961px) { .anfrage-grid > aside { position: sticky; top: calc(var(--kopf-hoehe) + var(--m6)); } } @media (max-width: 960px) { .anfrage-grid > aside { order: 2; } } /* ---------- /aerzte/: Faktenkarte unter der Fallliste ---------- Am Rechner füllt sie die linke Spalte (vorher rund 350 px leer), die Tafel läuft rechts über beide Zeilen. Am Handy hinter der Tafel. */ .fall-wahl > .fall-fakten { margin-top: 22px; } /* Pille auf der Kante */ @media (min-width: 961px) { .fall-wahl:has(> .fall-fakten) { grid-template-rows: auto 1fr; row-gap: var(--m10); } .fall-wahl > .umschalter { grid-column: 1; grid-row: 1; } .fall-wahl > .fall-tafeln { grid-column: 2; grid-row: 1 / span 2; } .fall-wahl > .fall-fakten { grid-column: 1; grid-row: 2; align-self: start; max-width: 420px; } } @media (max-width: 960px) { .fall-wahl > .fall-fakten { order: 3; } } /* Am Handy ersetzt die Karte nur den Satz zu den Praxen, der vorher dort stand: die beiden Werte des Auftritts (Startseite, /unternehmen/) bleiben dem Rechner, die Seite wird am Handy nicht länger. */ @media (max-width: 760px) { .fall-fakten { padding: var(--m8) var(--m5) var(--m5); } .fall-fakten > .gehalt-box, .fall-fakten > .fakt-auftritt { display: none; } .fall-fakten .abstand-m4 { margin-top: var(--m3); } } /* ---------- /unternehmen/werte/ ---------- Grundsätze: Kopf links, die sieben Aufklapper rechts. Alltag: das Hochformat schmaler, der Text bekommt mehr Breite. */ @media (min-width: 961px) { .werte-split { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; } .alltag-split { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } } .werte-split .abschnitt-kopf { margin-bottom: 0; } @media (max-width: 960px) { .alltag-split .split-bild img { aspect-ratio: 1 / 1; object-position: center top; } } /* ---------- /unternehmen/standorte/: Praxen als Wischreihe ---------- Agenturregel 02.10.2026, auch für Standorte. Gleiche Werte wie die Wischreihe in bauteile.css K6, die .standorte-grid nicht aufzählt. */ @media (max-width: 760px) { .standorte-grid.wisch { display: grid; grid-auto-flow: column; grid-auto-columns: min(84%, 340px); grid-template-columns: none; gap: var(--m4); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--m6); scrollbar-width: none; margin-inline: calc(-1 * var(--m6)); padding: 4px var(--m6) 18px; } .standorte-grid.wisch .standort-inhalt { padding: var(--m6) var(--m5); } } /* ---------- /unternehmen/kontakt/: drei Wege ---------- Der Satz dehnte sich auf die Kartenhöhe und drückte die Kontaktzeilen an den Boden; jetzt folgen sie direkt. */ .wegweiser .weg-karte.ohne-zeiger p { flex: 0 0 auto; } /* ---------- /azubis-praktikanten/: Schrittkarten neben dem Fotopaar ---------- Am Rechner stehen die drei Karten untereinander in der Textspalte, von 761 bis 960 px nebeneinander, am Handy als Wischreihe (bauteile.css K6). */ .lernen-grid .fliess { margin-bottom: var(--m6); } @media (min-width: 961px) { /* Untereinander links bündig, Pille links auf der Kante: drei mittige Blöcke übereinander lesen sich wie ein Stapel, nicht wie eine Folge. */ .lern-schritte { grid-template-columns: 1fr; row-gap: calc(var(--m6) + 14px); } .lern-schritte .schritt-karte { text-align: left; padding: var(--m8) var(--m8) var(--m6); } .lern-schritte .schritt-nummer { left: var(--m8); transform: translateY(-50%); } } @media (min-width: 761px) and (max-width: 960px) { .lern-schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Ende B */ /* --------------------------------------------------------------------------- C Zeitlos: Start, Praxen, Überblick, Termin, Erster Termin, Team, After Work --------------------------------------------------------------------------- */ /* Anfang C */ /* C1 Leitsatz neben Faktenkarte (Zeitlos Start, After Work). Die Karte trägt ihre Pille auf der Kante: oben Platz dafür lassen. */ .leitsatz-paar { display: grid; gap: var(--m10); align-items: center; } .leitsatz-paar .leitsatz { margin-bottom: 0; } .leitsatz-paar > .vorteile-karte { margin-top: 22px; } @media (min-width: 861px) { .leitsatz-paar { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--m16); } .leitsatz-paar > .vorteile-karte { margin-top: 0; } } /* C2 Pillenreihe: Anlässe (Start) und Behandlungen (Praxisseiten) als Mockup-Pillen. Als Link heben sie sich wie Knöpfe, beim Tippen geben sie nach. Lange Einträge brechen um, die Ecke bleibt die der Pille. */ .pillen-reihe { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: var(--m5) 0 0; padding: 0; } .pillen-reihe li { display: flex; max-width: 100%; } .pillen-reihe .badge { min-height: 44px; padding: 9px 18px; font-size: .82rem; line-height: 1.35; background: #fff; text-decoration: none; white-space: normal; } .pillen-links a.badge { color: var(--gruen-dunkel); transition: border-color var(--zeit-tipp) linear, background var(--zeit-tipp) linear, translate var(--zeit-tipp) var(--kurve-aus), scale 120ms var(--kurve-aus); } .pillen-links a.badge:active { scale: .97; background: #F3F9E7; border-color: var(--gruen-dunkel); } .pillen-links a.badge:focus-visible { outline: 3px solid var(--gruen-dunkel); outline-offset: 3px; } /* Ohne eigene Seite (Fangopackungen): grauer Rand, kein Link-Verhalten */ .pillen-links span.badge { border-color: var(--linie-stark); color: var(--tinte); } @media (hover: hover) and (pointer: fine) { .pillen-links a.badge:hover { background: #F3F9E7; border-color: var(--gruen-dunkel); translate: 0 -2px; } } @media (max-width: 760px) { .pillen-reihe { gap: 8px; } .pillen-reihe .badge { padding: 8px 14px; font-size: .78rem; gap: 8px; } .pillen-reihe .badge::before { width: 9px; height: 9px; } } /* C3 Praxiswahl auf der Startseite: am Handy seitlich wischbar wie alle Standortreihen (Agenturregel 02.10.2026), am Rechner zwei Säulen. */ @media (max-width: 760px) { .saeulen.wisch { display: grid; grid-auto-flow: column; grid-auto-columns: min(84%, 340px); grid-template-columns: none; gap: var(--m4); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--m6); scrollbar-width: none; margin: 0 calc(-1 * var(--m6)); padding: 4px var(--m6) 14px; } .saeulen.wisch .saeule-bild { aspect-ratio: 16 / 10; } .saeulen.wisch .saeule-text { padding: var(--m5); } .saeulen.wisch .saeule-text p { font-size: .9rem; } .saeulen.wisch .fall-schritt { margin-block: var(--m3); } } /* C4 Praxisseiten: Schwerpunkte links, Behandlungen als Pillen rechts */ .schwerpunkte-paar { display: grid; gap: var(--m8); } .schwerpunkte-paar h3.text-fett-sub { font-size: 1.05rem; } @media (min-width: 861px) { .schwerpunkte-paar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--m16); align-items: start; } .schwerpunkte-paar > :last-child { padding-top: var(--m8); } } /* C5 Anfahrt als Schrittkarten (K3): drei Karten, die Pille trägt die Linie (S+U, U, Bus, P) statt einer Nummer. */ .anfahrt-reihe { margin-top: var(--m4); } @media (min-width: 761px) { .schritte-reihe.anfahrt-reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .anfahrt-reihe .schritt-karte h3 { hyphens: manual; overflow-wrap: break-word; } .anfahrt-reihe .schritt-karte p { font-size: .92rem; } /* C6 Öffnungszeiten am Rechner: Kopf links, Tafel rechts (vorher blieben rechts der Tafel rund 290 px leer). */ @media (min-width: 961px) { .zeiten-paar { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--m16); align-items: start; } .zeiten-paar .abschnitt-kopf { margin-bottom: 0; } } /* C7 /termin/: beide Nummern ohne Wischen, am Handy kompakt untereinander */ .nummern-paar { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 760px) { .nummern-paar { grid-template-columns: 1fr; gap: var(--m3); } .nummern-paar .weg-karte { padding: var(--m5) var(--m5) var(--m4); gap: 2px; } .nummern-paar .weg-karte h3 { font-size: 1.05rem; } .nummern-paar .weg-karte p { font-size: .9rem; } .nummern-paar .weg-nummer { font-size: 1.35rem; } } /* C8 /erster-termin/: zwei Nummern mit Praxisnamen */ .nummern-liste { list-style: none; padding: 0; margin: var(--m5) 0 0; display: grid; gap: var(--m3); } .nummern-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--m4); } .nummern-ort { min-width: 6.5em; font-family: var(--font-head); font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-weich); } #frist .rechner { margin-top: var(--m2); } @media (max-width: 760px) { .nummern-liste .weg-nummer { font-size: 1.35rem; } } /* C9 /behandlungen/: der erste Satz der Bühne führt in die Suche */ .finder-vorsatz { font-family: var(--font-sub); font-style: italic; font-size: clamp(1.05rem, .4vw + .95rem, 1.2rem); line-height: 1.5; color: var(--tinte); max-width: 40em; margin-bottom: var(--m6); } @media (max-width: 760px) { .finder-feld input::placeholder { font-size: .86rem; } } /* C9b Karussellkopf mit zwei Absätzen (Praxis Friedenau) */ .galerie-kopf .abschnitt-kopf p + p { margin-top: var(--m3); } /* C9c Praxisseiten: drei Raumfotos. Am Rechner füllen sie die Breite (vorher drei schmale Hochformate und rechts die halbe Zeile leer), dann gibt es nichts zu blättern: Pfeile und Linie entfallen dort. Am Handy bleibt das Karussell mit Pfeilen, Wischen und Linie. */ @media (min-width: 761px) { .praxis-bilder .galerie-slider figure { flex: 1 1 0; width: auto; } .praxis-bilder .galerie-slider figure img { width: 100%; height: clamp(260px, 24vw, 330px); object-fit: cover; } .praxis-bilder .slider-pfeile, .praxis-bilder .slider-balken { display: none; } /* Ohne Pfeile kein gespiegelter Kopf: sonst stand der Text rechtsbündig und die linke Hälfte leer (Gegenprüfung 06.10.2026). */ .praxis-bilder .galerie-kopf .abschnitt-kopf { margin: 0; text-align: left; } .praxis-bilder .galerie-kopf .abschnitt-kopf .sub-strich { margin-left: 0; transform-origin: left center; } .praxis-bilder .galerie-kopf .abschnitt-kopf p { margin-left: 0; } } /* Tempelhof: Behandlungen als Hakenliste mit Links statt sieben langer Pillen (Pille ist im Mockup ein Etikett, keine Linkliste). */ .behandlungs-links a { color: var(--tinte); text-decoration: underline; text-decoration-color: var(--gruen); text-decoration-thickness: 2px; text-underline-offset: 4px; } .behandlungs-links a:hover { color: var(--gruen-link); } /* C9d Handy: dichter gesetzt, wo eine Karte nur zwei Sätze trägt */ @media (max-width: 760px) { .praxis-bilder .zusagen.wisch { margin-top: var(--m8); } .praxis-bilder .zusage { padding: var(--m6) var(--m5); } .praxis-bilder .zusage .badge-klein { margin-bottom: var(--m3); } .nummern-paar .weg-karte { padding: var(--m4) var(--m5); } .nummern-paar .weg-karte .abstand-m3 { margin-top: 2px; } #frist .rechner { gap: var(--m5); } #frist .rechner-ergebnis { padding: var(--m6) var(--m5); } #frist .weg-tafel { gap: var(--m6); margin-top: var(--m8); } .nummern-liste { gap: 0; margin-top: var(--m3); } } /* C10 /team/ Bildkarussell am Handy: alle Bilder gleich hoch. Das Querformat war 232 px hoch neben 260 px Hochformaten, darunter klaffte eine Lücke. Jetzt 260 px hoch, seitlich leicht beschnitten. */ @media (max-width: 760px) { #einblicke .galerie-slider figure.quer img { height: 260px; width: min(68vw, 290px); object-fit: cover; } } /* Ende C */ /* --------------------------------------------------------------------------- D Zeitlos: Behandlungsseiten --------------------------------------------------------------------------- */ /* Anfang D */ /* Gemeinsame Schablone der acht Behandlungsseiten (21 bis 28): #wann = K5 Fotopaar + Faktenkarte, #ablauf = K3 Schrittkarten, #weitere = Wischreihe auf die Schwesterseiten. */ /* K5: die Hakenliste ist der Inhalt der Faktenkarte */ .behandlung-wann .vorteile-karte .haken-liste { margin-bottom: 0; } .behandlung-wann .vorteile-karte .gehalt-box + .haken-liste { margin-top: var(--m2); } .behandlung-wann .erwartet-text > .headline + .vorteile-karte { margin-top: var(--m12); } .behandlung-wann .erwartet-text .fliess { margin-bottom: 0; } /* K3: drei Karten stehen ab Tablettbreite in einer Reihe statt 2 + 1 */ @media (min-width: 761px) { .behandlung-ablauf .schritte-reihe:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .behandlung-ablauf .schritt-karte a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .behandlung-ablauf .schritte-kopf { margin-bottom: var(--m8); } /* "Wo" unter der Reihe: Pille mit Punkt, darunter ein Satz */ .schritte-wo { max-width: 560px; margin: var(--m10) auto 0; text-align: center; } .schritte-wo .badge-klein { margin: 0 auto var(--m3); } .schritte-wo p { color: var(--tinte); } /* Aussage mit Zahl unter den Schrittkarten bzw. als #wo-Karte */ .behandlung-ablauf .aussage-zeitraum { margin-top: var(--m16); } .behandlung-wo .aussage { text-align: left; } /* Weitere Behandlungen: acht Karten ab Rechnerbreite als 4 x 2 */ .behandlung-weitere .abschnitt-kopf { margin-bottom: var(--m8); } @media (min-width: 1100px) { .behandlung-weitere .wegweiser { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .behandlung-weitere .weg-karte { padding: var(--m6) var(--m5) var(--m5); } @media (max-width: 760px) { /* Fotopaar am Handy etwas kleiner, damit "Wann sie hilft" früher kommt */ .behandlung-wann .erwartet-bilder { max-width: 300px; } .behandlung-wann .erwartet-grid { gap: var(--m8); } .behandlung-wann .vorteile-karte .haken-liste { gap: var(--m2); } .schritte-wo { margin-top: var(--m6); } .behandlung-ablauf .aussage-zeitraum { margin-top: var(--m10); } /* Querverweise sind ein Nachsatz: knapper Abschnitt, flache Karten */ .behandlung-weitere { padding-block: calc(var(--abschnitt-luft) * .75); } .behandlung-weitere .abschnitt-kopf { margin-bottom: var(--m6); } .behandlung-weitere .weg-karte { gap: var(--m2); padding: var(--m5); } } /* Ende D */ /* --------------------------------------------------------------------------- E Zeitlos: Kosten (und Berlin /zuzahlung/, /pkv/) --------------------------------------------------------------------------- */ /* Anfang E */ /* Rechenweg am Handy: drei Glieder als flache Zeilen (Zahl links, Satz rechts). Vorher stand flex: 1 1 200px aus style.css in der Spalte und machte jede Karte 200 px hoch mit leerem Unterteil. */ @media (max-width: 720px) { .rechenweg { gap: var(--m2); } .rechenweg-glied { flex: 0 0 auto; display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); align-items: center; gap: var(--m4); padding: var(--m4) var(--m5); text-align: left; } .rechenweg-glied .gross { font-size: 1.55rem; } .rechenweg-glied .klein { margin-top: 0; } .rechenweg-zeichen { padding: 0; font-size: 1.35rem; } } /* Merksatz der Zuzahlung als Karte mit Pille auf der Kante (statt Strichsymbol im Pastellkasten), lesbreit und mittig. */ .kosten-merk { max-width: 820px; margin-inline: auto; } .kosten-merk p + p { margin-top: var(--m3); } /* Kleiner Zwischentitel vor einer Aufklapper-Liste */ .kosten-zwischen { font-family: var(--font-sub); font-style: italic; font-size: var(--grad-m); color: var(--tinte); } /* Aufklapper mit zwei Absätzen: Abstand dazwischen (vorher klebten sie). */ .kosten-fragen .aufklapp-inhalt p + p { margin-top: var(--m4); } /* Preisseite: der Satz zu Beihilfe steht im Kopf über der Dauerwahl */ .abschnitt-kopf .kosten-gilt-alle { margin-top: var(--m3); font-size: 1rem; } /* Dauerwahl am Handy: gleich breite Pillen in einer Reihe (vorher 2 x 2 mit ungleichen Breiten). */ @media (max-width: 760px) { .preis-knoepfe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .preis-knoepfe.kosten-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); } .preis-knoepfe label { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 4px; font-size: .84rem; white-space: nowrap; text-align: center; } /* 5er- und 10er-Karte nebeneinander */ .karten-paar { grid-template-columns: 1fr 1fr; gap: var(--m3); } .karte-angebot { padding: var(--m5) var(--m4); font-size: .92rem; line-height: 1.45; } .karte-angebot strong { font-size: 1.1rem; margin-bottom: var(--m1); } } /* Preistabellen am Handy: keine Silbentrennung im Leistungsnamen ("Kompressionsbanda-ge"), dafür darf die Dauer umbrechen. */ @media (max-width: 560px) { .preistabelle td:first-child { hyphens: manual; overflow-wrap: break-word; } .preistabelle td:nth-last-child(2) { white-space: normal; min-width: 4.6em; } } /* Mehr Zeit: Überschrift neben der Zahl in Abschnittsgrösse */ .kosten-zeit .headline { font-size: var(--grad-h2); } /* .zahl ist auch die Klasse des Zahlenbands (style.css 806): dessen Trennlinie und Innenabstand stand hier über der 30. */ .format-dauer .zahl { padding-top: 0; border-top: 0; font-variant-numeric: tabular-nums; } @media (max-width: 560px) { .kosten-merk { padding: var(--m10) var(--m5) var(--m6); } .format-dauer { padding: var(--m6) var(--m5); } .format-dauer .zusatz { margin-top: var(--m3); padding-top: var(--m3); } .preis-wahl { gap: var(--m5); padding: var(--m5); } .preis-gilt { font-size: .88rem; } } /* Ende E */ /* ============================================================ V STRUKTUR VARIANTE C (08.10.2026) Praxen und Pflege auf einer Domain, Karriere als eigener Knopf im Kopf, Fuß mit fünf Spalten, Weiche in der Startbühne. Vorgabe: 04_neuausrichtung/07-struktur.md. Optik bleibt das Mockup: nur vorhandene Token, Bögen, Schriften und Bauteile. ============================================================ */ /* V1 Kopf: Karriere ausserhalb von