/* ========================================================================= Mobile Physiotherapie Oehlke — styles.css Design-System: Navy-Anker + Cyan-Akzent + Limette (Signal) Typo: Poppins (Head) / Inter 18px (Body) · mobile-first · barrierefrei ========================================================================= */ /* ============================ TOKENS ============================ */ :root{ /* Marke */ --navy:#1B417A; --navy-deep:#15315C; --navy-900:#102544; --cyan:#46B2D0; --cyan-deep:#237E92; /* dunkleres Cyan: Text/Links/Akzente auf Weiß (Kontrast ~4.7:1) */ --lime:#80C53F; --lime-deep:#6BA82F; /* Neutral */ --white:#ffffff; --paper:#F6F9FB; --sand:#F5F1E9; --mist:#E9F4F8; /* Text */ --ink:#16233B; --ink-soft:#3D4B63; --ink-mute:#5E6B80; --on-navy:#EEF4FB; --on-navy-mute:rgba(238,244,251,.74); /* Linien */ --line:rgba(27,65,122,.14); --line-strong:rgba(27,65,122,.22); --line-light:rgba(255,255,255,.20); /* Typo */ --font-head:'Poppins','Segoe UI',system-ui,sans-serif; --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; /* Radius */ --radius-sm:14px; --radius:22px; --radius-lg:30px; --radius-pill:999px; /* Schatten (weich) */ --shadow-sm:0 4px 14px rgba(16,37,68,.06); --shadow:0 20px 48px -28px rgba(16,37,68,.32); --shadow-lg:0 34px 74px -34px rgba(16,37,68,.42); /* Layout */ --container:1160px; --gutter:clamp(20px,5vw,44px); --section:clamp(44px,5.6vw,80px); --header-h:52px; /* Motion */ --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); /* Pfeil-Symbol als Maske (Etappe 4): markiert anklickbare Leistungs-Karten. Als mask statt als , damit die Farbe per currentColor steuerbar bleibt und kein Extra-Request nötig ist. */ --pfeil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E"); } /* Auf dem Handy MUSS der Seitenrand exakt proportional sein (09.08.2026). Mit clamp(20px,5vw,44px) greift unter 400px Breite das Minimum von 20px - der Rand bleibt dann stehen, waehrend die Schrift mitwaechst. Die nutzbare Textbreite waechst dadurch zwischen 375 und 440px um 18,2 %, die Schrift aber nur um 17,3 %. Diese knapp 1 % Differenz reicht, damit eine fast volle Zeile auf einem Geraet umbricht und auf dem anderen nicht - das waren die letzten verbliebenen Faelle, nachdem alle Schriftgroessen bereits fliessend waren. Reines 5vw laesst Rand und Schrift exakt gleich schnell wachsen. Bei 375px sind das 18,8px statt 20px Rand - nicht wahrnehmbar. */ @media (max-width:639.98px){ :root{--gutter:5vw} } /* ============================ RESET & BASE ============================ */ *,*::before,*::after{box-sizing:border-box} *{margin:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ font-family:var(--font-body); font-size:1.125rem; /* 18px Basis — Senioren-Lesbarkeit */ line-height:1.65; color:var(--ink); background:var(--white); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img,svg,video{display:block;max-width:100%;height:auto} img{object-fit:cover} a{color:var(--navy);text-decoration-thickness:1.5px;text-underline-offset:3px} a:hover{color:var(--navy-deep)} button{font:inherit;color:inherit;cursor:pointer} ul{list-style:none;padding:0} h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;line-height:1.14;letter-spacing:-.02em;color:var(--ink);text-wrap:balance} p{text-wrap:pretty} ::selection{background:var(--cyan);color:var(--navy-900)} :focus-visible{outline:3px solid var(--cyan-deep);outline-offset:3px;border-radius:4px} .section--navy :focus-visible,.footer :focus-visible,.hero :focus-visible,.quickbar :focus-visible{outline-color:var(--lime)} .skip-link{ position:fixed;top:-100px;left:16px;z-index:200; background:var(--navy);color:#fff;padding:12px 20px;border-radius:0 0 12px 12px; font-weight:600;transition:top .2s var(--ease) } .skip-link:focus{top:0;color:#fff} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} [hidden]{display:none!important} body.no-scroll{overflow:hidden} /* ============================ LAYOUT HELPERS ============================ */ .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)} .container--narrow{max-width:820px} .section{padding-block:var(--section);position:relative} .section--paper{background:var(--paper)} .section--sand{background:var(--sand)} .section--mist{background:var(--mist)} .section--navy{background:var(--navy);color:var(--on-navy)} .section--navy h1,.section--navy h2,.section--navy h3{color:#fff} [id]{scroll-margin-top:calc(var(--header-h) + 18px)} .section-head{max-width:1040px;margin-bottom:clamp(26px,3.4vw,44px)} .section-head.center{margin-inline:auto;text-align:center} .eyebrow{ display:inline-flex;align-items:center;gap:.6em; font-family:var(--font-head);font-weight:600;font-size:.98rem; letter-spacing:.14em;text-transform:uppercase;color:var(--navy);margin-bottom:16px } .section--navy .eyebrow,.hero .eyebrow,.quickbar .eyebrow{color:var(--lime)} .eyebrow::before{content:"";width:30px;height:3px;border-radius:2px;background:var(--lime)} .section-title{font-size:clamp(1.95rem,4.2vw,3.05rem);line-height:1.1} /* Hervorgehobene Woerter in Ueberschriften (Ramon 16.08.2026) Auf HELLEM Grund jetzt Navy statt Cyan - Ramon will den dunkelblauen Ton haeufiger sehen, so wie bei den Zahlen 60 / 25 / 6 unter seinem Foto. Auf DUNKLEM Grund bleibt Cyan: Navy auf Navy waere praktisch unlesbar. Die drei dunklen Faelle sind unten einzeln aufgefuehrt - sie brauchen eine eigene Regel, weil sonst die neue helle Regel auch dort greifen wuerde. */ .section-title em{font-style:normal;color:var(--navy)} .section--navy .section-title em, .prose--light .section-title em, .cta-band .section-title em{color:var(--cyan)} .lead{font-size:clamp(1.12rem,1.7vw,1.3rem);color:var(--ink-soft);margin-top:18px} .section--navy .lead{color:var(--on-navy-mute)} /* ============================ BUTTONS ============================ */ .btn{ --btn-bg:var(--navy);--btn-fg:#fff;--btn-bd:transparent; display:inline-flex;align-items:center;justify-content:center;gap:.6em; font-family:var(--font-head);font-weight:600;font-size:1.03rem;line-height:1; padding:1rem 1.7rem;min-height:54px; background:var(--btn-bg);color:var(--btn-fg); border:1.5px solid var(--btn-bd);border-radius:var(--radius-pill); text-decoration:none;white-space:nowrap; transition:transform .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease) } .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0)} .btn__icon{width:20px;height:20px;flex:none;transition:transform .3s var(--ease)} .btn:hover .btn__icon--arrow{transform:translateX(4px)} .btn--primary{--btn-bg:var(--navy);--btn-fg:#fff;box-shadow:0 14px 30px -16px rgba(27,65,122,.7)} .btn--primary:hover{--btn-bg:var(--navy-deep);box-shadow:0 20px 40px -16px rgba(27,65,122,.8)} .btn--light{--btn-bg:#fff;--btn-fg:var(--navy);box-shadow:var(--shadow-sm)} .btn--light:hover{--btn-bg:var(--mist)} .btn--ghost{--btn-bg:transparent;--btn-fg:var(--navy);--btn-bd:var(--line-strong)} .btn--ghost:hover{--btn-bg:var(--navy);--btn-fg:#fff;--btn-bd:var(--navy)} .btn--ghost-light{--btn-bg:rgba(255,255,255,.08);--btn-fg:#fff;--btn-bd:rgba(255,255,255,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .btn--ghost-light:hover{--btn-bg:#fff;--btn-fg:var(--navy);--btn-bd:#fff} .btn--block{width:100%} .btn--lg{font-size:1.1rem;padding:1.15rem 2rem;min-height:60px} /* ============================ REVEAL / ANIMATION ============================ */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)} /* Nur solange das Element noch wartet: Der Browser legt es dann vorab auf eine eigene GPU-Ebene, statt waehrend der Bewegung neu zu zeichnen. Sobald .is-visible gesetzt ist, faellt die Regel weg – ein dauerhaftes will-change auf allen Kacheln kostet Speicher, ohne dann noch zu nuetzen. */ .reveal:not(.is-visible){will-change:opacity,transform} .reveal.is-visible{opacity:1;transform:none} .reveal--blur{filter:blur(7px)} .reveal--blur.is-visible{filter:none} .d1{transition-delay:.09s}.d2{transition-delay:.18s}.d3{transition-delay:.27s}.d4{transition-delay:.36s}.d5{transition-delay:.45s} @keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.12)}} @keyframes kenburns-m{from{transform:scale(1)}to{transform:scale(1.06)}} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} @keyframes wave-drift{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ============================ HEADER / NAV ============================ */ .header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,.9);border-bottom:1px solid transparent;transition:background .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)} .header__bar{ display:flex;align-items:center;justify-content:space-between;gap:16px; height:var(--header-h);max-width:1360px;margin-inline:auto;padding-inline:clamp(16px,3vw,34px) } .header.scrolled{background:rgba(255,255,255,.94);border-bottom-color:var(--line);box-shadow:0 12px 30px -24px rgba(16,37,68,.45)} @media (min-width:1024px){.header{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:rgba(255,255,255,.72)}} /* Unter 1024px gibt es KEINEN backdrop-filter (er erzeugt dort einen containing block und bricht die Positionierung). Ohne Weichzeichner werden aus 90 % Deckkraft aber sichtbare 10 % Durchlass: Beim Scrollen lief der Fliesstext klar lesbar quer durch das Logo – auf Handy und Tablet, auf allen Seiten. Deshalb hier voll deckend. */ @media (max-width:1023.98px){ .header,.header.scrolled{background:#fff} } .brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;padding-block:6px} .brand__logo{height:34px;width:auto} .brand__fallback{font-family:var(--font-head);font-weight:700;color:var(--navy);font-size:1.15rem;line-height:1.1} .brand__fallback small{display:block;font-weight:500;font-size:.72rem;color:var(--cyan-deep);letter-spacing:.02em} .nav{display:flex;align-items:center;gap:4px} .nav__link{ font-family:var(--font-head);font-weight:500;font-size:1rem;color:var(--ink); text-decoration:none;padding:10px 14px;border-radius:12px;transition:background .2s,color .2s } .nav__link:hover{background:var(--mist);color:var(--navy)} .nav__link[aria-current="true"]{color:var(--navy);font-weight:600} .header__actions{display:flex;align-items:center;gap:12px} [data-header-cta]{padding:.58rem 1.05rem;min-height:40px;font-size:.92rem} @media (max-width:559.98px){[data-header-cta]{display:none}} @media (min-width:1024px){[data-header-cta]{display:inline-flex}} .nav-toggle{ display:inline-flex;flex-direction:column;justify-content:center;gap:5px; width:48px;height:48px;padding:0 11px;background:transparent;border:1.5px solid var(--line-strong);border-radius:12px } .nav-toggle span{height:2.5px;width:100%;background:var(--navy);border-radius:2px;transition:transform .3s var(--ease),opacity .2s var(--ease)} .header.nav-open .nav-toggle span:nth-child(1){transform:translateY(7.5px) rotate(45deg)} .header.nav-open .nav-toggle span:nth-child(2){opacity:0} .header.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)} /* ============================ HERO ============================ */ .hero{position:relative;min-height:clamp(580px,90vh,840px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate} .hero__media{position:absolute;inset:0;z-index:-2} .hero__img{width:100%;height:100%;object-fit:cover;object-position:center 30%;animation:kenburns 26s var(--ease-out) infinite alternate;transform-origin:60% 40%} .hero__overlay{position:absolute;inset:0;z-index:-1;background: linear-gradient(92deg,rgba(16,37,68,.82) 0%,rgba(16,37,68,.55) 42%,rgba(16,37,68,.12) 78%), linear-gradient(0deg,rgba(16,37,68,.72) 0%,rgba(16,37,68,0) 46%)} .hero__inner{position:relative;color:#fff;padding-block:clamp(40px,7vw,88px);padding-top:calc(var(--header-h) + 30px);max-width:860px} .hero__title{color:#fff;font-size:clamp(1.7rem,3.7vw,2.75rem);line-height:1.1;letter-spacing:-.02em} .hero__title em{font-style:normal;color:var(--cyan)} .hero__sub{font-size:clamp(1.05rem,1.6vw,1.18rem);color:rgba(255,255,255,.9);margin-top:18px;max-width:540px} .hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:48px} .hero .eyebrow{flex-wrap:wrap;letter-spacing:.1em;font-size:.85rem;text-shadow:0 1px 10px rgba(16,37,68,.55)} @media (max-width:640px){ /* oben (hinter Text) genug Deckung fuer Lesbarkeit der cyan Headline; unten (bei den Glas-Kacheln) hell -> Foto sichtbar */ .hero__overlay{background:linear-gradient(180deg,rgba(16,37,68,.76) 0%,rgba(16,37,68,.68) 27%,rgba(16,37,68,.6) 46%,rgba(16,37,68,.34) 76%,rgba(16,37,68,.46) 92%,var(--navy-deep) 100%)} } /* ---------- TABLET: derselbe Fehler wie unten, nur eine Stufe kleiner (23.08.2026) ---------- Der Block "Grosse Bildschirme" direkt darunter beschreibt ihn bereits Wort fuer Wort: min-height war bei 840px gedeckelt, der Inhalt klebte per align-items:flex-end UNTEN, und jeder zusaetzliche Platz landete OBEN auf dem Foto. Fuer grosse Bildschirme wurde das am 16.08.2026 behoben — das Tablet-Band hat diese Reparatur nie bekommen und fiel bis heute aus der Grundregel heraus. Gemessen ueber vier echte iPad-Formate (768x1024, 820x1180, 1024x768, 1180x820): - Hero-Anteil schwankte zwischen 71,2 % und 90,0 % — 18,8 Prozentpunkte - die H1 wanderte um 8,8 Punkte; bildschirm-matrix.py meldete "PASST NICHT" - im QUERFORMAT war das Infoband beim Laden ABGESCHNITTEN: es endete bei 800px auf einem 768px hohen Bildschirm. Telefonnummer und Terminknopf waren unsichtbar. 84vh ist gemessen, nicht geschaetzt, und liegt dicht unter der Obergrenze: ab ca. 86vh ist das Infoband im Querformat wieder abgeschnitten. Ergebnis nach der Aenderung: 84 % auf ALLEN vier Formaten (Spanne 0), H1-Wanderung 7,5 Punkte (Grenzwert 8), Infoband ueberall sichtbar. Der Wellen-Uebergang steht dadurch auf dem iPad hoch mit 55 statt 75px im Bild, auf dem iPad Air hoch mit 80 statt 231px — also weniger als vorher. Die 1279.98px sind Absicht: das schmalste abgenommene Desktop-Format ist 1280x600. So bleiben 1280x600 und 1366x640 nachweislich unberuehrt. Betrifft ausschliesslich index.html — nur dort gibt es .hero, die 26 Unterseiten benutzen .dhero und bleiben bewusst flach (Lesestrecken). */ /* ---------- Tablet: Infoband wird zu Glaskacheln IM Foto (23.08.2026, 2. Runde) ---------- CJ am iPad Air: "Oben drueber und unten drunter ist eine Riesenluecke, das sieht sehr unsauber aus. Die vier Nummern sind einfach nur klein hinzugefuegt." Nachgemessen, und er hatte in beiden Punkten recht: - Der Inhalt sass als kompakter Block (476px) mitten in einem 991px hohen Hero. 348px Foto darueber, 315px darunter. - Das Infoband klebte als FLACHER Balken unter dem Hero: Kachel 54px hoch, Radius 0, massives rgb(21,49,92), Spalt 1px. Auf dem Handy sind es dagegen Glaskacheln (rgba(13,32,60,.38) + backdrop-filter, Radius 14px, Spalt 10px), die per negativem margin-top INS Foto gezogen werden. Das Handy hatte die richtige Loesung also schon - sie endete nur bei 639.98px. Dieser Block traegt sie ins Tablet-Band, mit eigenen Variablen statt der Handy-Variablen (die haengen an --flach und an 100svh-Rechnungen fuer kleine Geraete; siehe E12-4: wirkt eine Aenderung nur auf einen Teil, bekommt sie eine eigene Variable). Die Kachelhoehe steht als Variable da, weil die Bandhoehe daraus gerechnet wird und der Hub genau so gross sein muss - sonst haengt das Band in der Luft. Ab 1100px Breite stellt die Grundregel (Zeile 325) die vier Kacheln EINREIHIG, deshalb weiter unten --tab-reihen:1. Ohne das waere der Hub doppelt so gross wie das Band. */ @media (min-width:640px) and (max-width:1279.98px){ :root{ --tab-kachel:clamp(74px,7.2vh,104px); --tab-spalt:12px; --tab-reihen:2; --tab-luft:clamp(18px,2.8vh,38px); --tab-band:calc(var(--tab-reihen) * var(--tab-kachel) + (var(--tab-reihen) - 1) * var(--tab-spalt)); --tab-hub:calc(var(--tab-band) + var(--tab-luft)); } /* Der Text liegt jetzt auf dem Foto statt auf dunklem Grund - Schatten wie beim Handy */ .hero__title,.hero__sub{text-shadow:0 1px 6px rgba(8,20,40,.62)} } @media (min-width:640px) and (max-width:1279.98px){ .hero{align-items:center;min-height:96vh;min-height:96svh} .hero__inner{padding-bottom:calc(var(--tab-hub) + clamp(12px,1.9vh,30px)); padding-top:calc(var(--header-h) + clamp(14px,1.9vh,34px))} /* ---------- Und der Schriftsprung an der 640er-Naht (23.08.2026) ---------- Gemessen: bei 639px war die H1 33,6px gross, bei 640px nur noch 27,2px. Der Bildschirm wurde BREITER und die Ueberschrift KLEINER — um 19 %. Ursache: zwei clamp() treffen sich an der Grenze mit unvereinbaren Werten. bis 639.98px: clamp(1.5rem, 7.4vw, 2.1rem) -> steht am MAXIMUM = 33,6px ab 640px : clamp(1.7rem, 3.7vw, 2.75rem) -> steht am MINIMUM = 27,2px Die 3,7vw holten die 33,6px erst bei 908px wieder ein. Das ganze Band 640-900px trug damit eine kleinere Ueberschrift als ein 600px-Handy. Diese Kurve ist so gerechnet, dass sie an BEIDEN Raendern stetig ist: bei 640px trifft sie 33,6px — dort hoert die Handy-Regel auf bei 1280px trifft sie 44,0px — dort macht die Desktop-Regel weiter Nachgemessen: 639->640 kein Sprung mehr, 1279->1280 kein Sprung, durchgehend 2 Zeilen, Hero-Hoehe unveraendert. Siehe E13-3. */ .hero__title{font-size:clamp(2.1rem,calc(1.625vw + 23.2px),2.75rem)} } /* ---------- Hohe Tablets: Inhalt unten verankert, Schrift groesser ---------- Nur HOCHFORMAT und erst ab 700px: - Im QUERFORMAT sass der Inhalt bereits richtig (Loch nur 78-137px), dort waere die Aenderung eine Verschlechterung ohne Anlass. - Unter 700px bliebe sonst die stetige Kurve an der 640er-Naht nicht erhalten (E13-3). Ein 640px breites, 1180px hohes Fenster ist kein Geraet, aber die Naht soll trotzdem halten. Drei Verteilungen wurden gebaut und nebeneinander angesehen (_doku/_tablet/WAHL-*.png): A mittig, jetziger Abstand : Luft oben 269px, Loch 209px B mittig, weiter gespreizt : Luft oben 241px, Loch 181px C unten wie beim Handy : Luft oben 442px, Loch 23px <- gewaehlt Ausschlaggebend war nicht die Zahl, sondern das Bild: Bei A und B liegt die Ueberschrift auf dem Gesicht der Patientin. Bei C steht sie im ruhigen Bereich darunter, die Gesichter von Therapeut und Patientin bleiben frei - und Inhalt und Kacheln bilden einen zusammenhaengenden Block statt zweier Inseln. Das ist dieselbe Komposition wie auf dem Handy, die bereits abgenommen ist. */ @media (min-width:700px) and (max-width:1279.98px) and (orientation:portrait){ /* ---------- Nachtrag 23.08.2026, 3. Runde ---------- CJ: "Die Ueberschrift muss weiter nach oben, die ist noch viel zu zentriert. Die Abstaende zwischen den vier Elementen leicht verkleinern, untereinander gleich machen, und alle vier ein grosses Stueck nach oben schieben." Vorher waren die drei Abstaende UNGLEICH: 52 / 52 / 77px. Der dritte war absichtlich groesser (Luft vor den Knoepfen), das las sich aber als Fehler. Jetzt EIN Wert fuer alle drei - deshalb die Variable, nicht dreimal dieselbe Zahl: wer sie aendert, aendert sie zwangslaeufig fuer alle drei zugleich. align-items: flex-end -> flex-start. Die Verankerung wechselt vom unteren zum OBEREN Rand, weil die Anweisung eine Anweisung ueber den Abstand nach OBEN ist. Bliebe es bei flex-end, muesste man die Lage ueber ein wachsendes padding-bottom steuern - dann verschoebe jede spaetere Aenderung an der Kachelhoehe unbemerkt auch die Ueberschrift. Drei Stufen gebaut und nebeneinander angesehen (_doku/_tablet/HOCH-vergleich.png): vorher H1 bei 41,3 % A 6vh H1 bei 16,7 % - Orte-Zeile bei 130px, klebt an der Kopfzeile B 9vh H1 bei 19,7 % <- gewaehlt C 12vh H1 bei 22,6 % - schon wieder Richtung Mitte B ist der grosse Sprung, den CJ wollte, und laesst der Orte-Zeile noch rund 110px Luft unter der Kopfzeile. */ /* ---------- Lesbarkeit: die Abdunklung muss dem Text nach oben folgen ---------- Beim Hochschieben ist ein Fehler entstanden, den man erst beim Nachmessen sieht. Die Abdunklung des Fotos war auf die ALTE Textlage gerechnet: linear-gradient(0deg, ...72 0%, ...0 46%) -> dunkel UNTEN, ab 46 % nach oben nichts linear-gradient(92deg, ...82 0%, ...12 78%) -> dunkel LINKS, rechts fast nichts Der Text steht jetzt oben rechts - also genau dort, wo beides ausgelaufen ist. Gemessen an der echten Textstelle (Hintergrund abfotografiert, Text ausgeblendet, Kontrast nach WCAG an der HELLSTEN Stelle, weil dort das Problem sitzt): vorher nachher Ueberschrift 1,33:1 3,66:1 (Norm fuer grosse Schrift: 3:1) Fliesstext 2,80:1 5,25:1 (Norm fuer kleine Schrift: 4,5:1) Orte-Zeile 1,64:1 1,81:1 -> bleibt schwach, siehe unten Vier Stufen gebaut und angesehen (_doku/_tablet/OVERLAY-vergleich.png). "sanft" ist die schwaechste Stufe, die Ueberschrift und Fliesstext ueber die Norm bringt. Mittel und kraeftig schaffen mehr Kontrast, machen aus dem Foto aber eine Tapete - und die Hausbesuch-Szene ist das staerkste Bild der Seite (siehe die Begruendung beim Handy-Hero, Ramon 16.08.2026). BEKANNTE SCHWACHSTELLE: Die Orte-Zeile ist limettengruen (128,197,63) und damit eine MITTELHELLE Farbe - sie kann gegen ein helles Foto rechnerisch keinen hohen Kontrast erreichen, selbst "kraeftig" kam nur auf 3,44:1. Das ist keine Folge dieser Runde, sondern gilt fuer Desktop genauso. Wer es loesen will, muss an die FARBE oder an die LAENGE des Satzes, nicht an die Abdunklung. */ .hero__overlay{background: linear-gradient(180deg,rgba(16,37,68,.42) 0%,rgba(16,37,68,.34) 46%,rgba(16,37,68,.18) 66%,rgba(16,37,68,0) 84%), linear-gradient(92deg,rgba(16,37,68,.82) 0%,rgba(16,37,68,.55) 42%,rgba(16,37,68,.28) 78%), linear-gradient(0deg,rgba(16,37,68,.72) 0%,rgba(16,37,68,0) 46%)} :root{--tab-abstand:clamp(20px,3.6vh,50px)} .hero{align-items:flex-start} /* ---------- Lage des Vierer-Blocks: an den Personen im Foto ausgerichtet ---------- CJ, 4. Runde: "Fixiere die oberen vier Elemente so wie sie sind und schiebe sie als Gesamtpaket dorthin, dass der gruene Text auf Hoehe vom Mund des Physiotherapeuten sitzt." Die Abstaende (--tab-abstand) bleiben unangetastet, es bewegt sich nur der Startpunkt. Weil der Block per align-items:flex-start am OBEREN Rand haengt, ist dieser eine Wert die gesamte Steuerung - alle vier Elemente wandern zwangslaeufig zusammen. Der Mund wurde nicht geschaetzt, sondern abgelesen: Foto ohne Text und ohne Kacheln fotografiert, Lineal in 10px-Schritten darueber gelegt, Gesicht dreifach vergroessert (_doku/_tablet/GESICHT-*.png). 768x1024 Mund bei y=268 = 26,2 % der Fensterhoehe 820x1180 Mund bei y=305 = 25,8 % 834x1194 Mund bei y=308 = 25,8 % Der Bildausschnitt sitzt also auf allen drei Hochformaten praktisch gleich - ein vh-Wert trifft deshalb alle drei, ohne Sonderfall. Der Wert steuert die OBERKANTE des Blocks, gemeint ist aber die MITTE der gruenen Zeile - die halbe Zeilenhoehe muss also abgezogen werden. NACHTRAG 6. Runde: CJ wollte den Block noch ein Stueck hoeher, "ungefaehr da, wo das Auge vom Physiotherapeuten startet". Auch das Auge wurde abgelesen: 768x1024 Auge bei y=210 = 20,5 % (Mund war 268) 820x1180 Auge bei y=240 = 20,3 % (Mund war 305) 834x1194 Auge bei y=242 = 20,3 % (Mund war 308) Der Block wandert damit 57 bis 66px nach oben. 24.2vh -> 18.65vh. Gemessen nach der Aenderung: Abweichung 0px auf allen drei Formaten. Die Untergrenze haelt Abstand zur Kopfzeile, falls das Fenster sehr flach wird. */ .hero__inner{padding-top:clamp(calc(var(--header-h) + 40px),18.65vh,300px); padding-bottom:calc(var(--tab-hub) + clamp(12px,1.9vh,30px))} /* Die Orte-Zeile brach bei 17,1px zweizeilig um ("& UMGEBUNG" allein auf Zeile 2). Deckel deshalb bei 1.06rem - gemessen einzeilig bis 1180px Hoehe. */ .hero .eyebrow{font-size:clamp(.9rem,1.22vh,1.06rem);margin-bottom:var(--tab-abstand)} /* max() statt einer neuen Kurve: die breitenbasierte Kurve aus der 640er-Naht bleibt unangetastet, es kommt nur ein hoehenbasierter Zuschlag dazu. Auf flachen Geraeten gewinnt die alte Kurve, das Querformat bleibt damit exakt wie es war. Deckel 3.0rem: bei 3.3rem lief "Privatpatienten & Selbstzahler" auf 106px an den rechten Rand heran. */ .hero__title{font-size:max(clamp(2.1rem,calc(1.625vw + 23.2px),2.75rem),min(3.85vh,3rem)); line-height:1.14} .hero__sub{font-size:clamp(1.08rem,1.85vh,1.42rem);line-height:1.6;max-width:33em; margin-top:var(--tab-abstand)} .hero__cta{margin-top:var(--tab-abstand);gap:clamp(14px,1.7vh,22px)} .hero .btn--lg{font-size:clamp(1rem,1.6vh,1.22rem);padding:.95rem 1.6rem; min-height:clamp(54px,6.2vh,70px)} .hero .btn__icon{width:20px;height:20px} } /* ---------- Grosse Bildschirme: der Hero muss MITWACHSEN ---------- Gemessen auf einem 16"-MacBook (1728x1000) sah der Hero gequetscht aus, obwohl der Rest der Seite stimmte. Drei Deckel waren schuld: 1. min-height war bei 840px gedeckelt, der Inhalt klebte per align-items:flex-end UNTEN. Jeder zusaetzliche Platz landete damit OBEN auf dem Foto - die Ueberschrift rutschte von 29 % der Fensterhoehe (1280x600) auf 44 % (1728x1000). 2. Die Ueberschrift war ab 1190px Breite bei 44px gedeckelt (clamp-Maximum 2.75rem) - auf einem 27-Zoll-Monitor dieselbe Groesse wie auf einem 13-Zoll-Notebook. 3. Die Textspalte blieb bei 860px, waehrend der Container 1160px breit ist. Rechts blieben dadurch 540px leer, links nur 328px - diese Unwucht liest sich als "Luecken und Platzhalter". Bewusst erst ab 1400px Breite, damit kleinere Notebooks (1280x600, 1366x640) exakt so bleiben, wie sie sind. Alle Werte treffen bei 1400px die bisherigen - kein Sprung. */ @media (min-width:1400px){ .hero{align-items:center;min-height:clamp(700px,88vh,1040px)} .hero__inner{max-width:1060px;padding-block:clamp(88px,7vh,120px)} .hero__title{font-size:clamp(2.75rem,3vw,4.25rem)} .hero__sub{font-size:clamp(1.18rem,1.15vw,1.36rem);max-width:min(640px,44vw);margin-top:22px} .hero__cta{margin-top:clamp(48px,5vh,64px)} } /* Sehr breite Monitore: Die groessere Ueberschrift reicht weiter nach rechts als vorher und landet dort im hellen Bildbereich (Buecherregal, Fenster). Der waagerechte Verlauf blendete bisher schon bei 78 % der Breite fast aus. Hier deckt er entsprechend weiter - das Foto bleibt sichtbar, der Text bleibt lesbar. Unterhalb 1900px unveraendert, damit der auf dem 16"-MacBook gepruefte Zustand exakt so bleibt. */ @media (min-width:1900px){ .hero__overlay{background: linear-gradient(92deg,rgba(16,37,68,.84) 0%,rgba(16,37,68,.6) 52%,rgba(16,37,68,.12) 88%), linear-gradient(0deg,rgba(16,37,68,.72) 0%,rgba(16,37,68,0) 46%)} } /* ============================ QUICK-INFO BAND ============================ */ .quickbar{background:var(--navy-deep);color:var(--on-navy)} .quickbar__row{max-width:1360px;margin-inline:auto;display:flex;flex-wrap:wrap;gap:1px;background:var(--line-light)} .quickbar__item{flex:1 1 100%;min-width:0;background:var(--navy-deep);display:flex;align-items:center;justify-content:center;gap:10px;padding:10px clamp(12px,2vw,22px)} .quickbar__icon{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:10px;color:#fff;background:linear-gradient(150deg,rgba(70,178,208,.32),rgba(128,197,63,.20));box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)} .quickbar__icon svg{width:19px;height:19px} .quickbar__text{font-family:var(--font-head);font-weight:600;font-size:.92rem;color:#fff;line-height:1.3;white-space:nowrap} .quickbar__text a{color:#fff;text-decoration:none} .quickbar__text a:hover{color:var(--cyan)} @media (min-width:640px){.quickbar__item{flex:1 1 calc(50% - 1px);justify-content:flex-start}} @media (min-width:1100px){.quickbar__item{flex:1 1 0}} /* ---------- Tablet: aus dem flachen Balken werden Glaskacheln IM Foto ---------- MUSS hier stehen, nicht oben beim Hero-Block: die Grundregel .quickbar__item drei Zeilen darueber setzt background:var(--navy-deep). Bei gleicher Spezifitaet gewinnt die SPAETERE Regel - stuende dieser Block oben, kaemen zwar Radius und Abstaende an, der Glas-Hintergrund aber nicht. Genau das ist beim ersten Einbau passiert und fiel erst in der Gegenmessung am echten Stand auf (im eingespritzten Test sah es richtig aus, weil der Test-Style hinter dem Stylesheet haengt). */ @media (min-width:640px) and (max-width:1279.98px){ .quickbar{background:transparent;position:relative;z-index:3; margin-top:calc(-1 * var(--tab-hub));padding-bottom:var(--tab-luft)} .quickbar__row{background:transparent;gap:var(--tab-spalt);max-width:none; padding-inline:var(--gutter)} .quickbar__item{flex:1 1 calc(50% - var(--tab-spalt));min-width:0; justify-content:flex-start;min-height:var(--tab-kachel); gap:clamp(10px,1.4vw,16px);padding:14px clamp(16px,2.2vw,26px); background:rgba(13,32,60,.38); -webkit-backdrop-filter:blur(8px) saturate(1.1);backdrop-filter:blur(8px) saturate(1.1); border:1px solid rgba(255,255,255,.18);border-radius:16px; box-shadow:0 8px 22px -12px rgba(0,0,0,.5)} .quickbar__text{white-space:normal;font-size:clamp(.95rem,1.45vh,1.14rem);line-height:1.35; color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.4)} .quickbar__icon{width:auto;height:auto;background:none;box-shadow:none;border-radius:0; color:var(--cyan)} .quickbar__icon svg{width:clamp(24px,3vh,32px);height:clamp(24px,3vh,32px)} } @media (min-width:1100px) and (max-width:1279.98px){ :root{--tab-reihen:1} .quickbar__item{flex:1 1 0} } /* ---------- Hohe Tablets: die vier Kacheln (23.08.2026, 5. Runde) ---------- CJ: "Die Kaestchen schmaler machen, bei der Rufnummer geht das ja noch weit nach rechts raus. Texte und Symbole viel groesser, das Ganze nach oben schieben, und die Kaestchen sollen mehr Abstand zueinander haben - von oben nach unten wie von links nach rechts." MUSS nach dem Glas-Block stehen: der setzt .quickbar__text und .quickbar__icon svg, und bei gleicher Spezifitaet gewinnt die spaetere Regel. Stuende dieser Block davor, blieben Schrift und Symbol auf den alten Werten. Derselbe Fehler ist beim Glas-Block schon einmal passiert (siehe Kommentar dort). Gemessen auf 820x1180, vorher -> nachher: Kachelbreite 363px -> 249px (Rufnummer hatte 173px leeren Raum rechts, jetzt 16) Schrift 17,1px -> 21px Symbol 32px -> 42px Abstand 12px -> 20px (gap wirkt in beide Richtungen zugleich) Oberkante y=918 -> y=846 (72px hoeher) Drei Blockbreiten gebaut und angesehen (_doku/_tablet/KACH-vergleich.png): 600 / 660 / 720px. Alle drei brechen dieselben drei Texte zweizeilig um, 600px ist also die engste ohne Nachteil - und fuellt die kurze Rufnummer-Kachel am besten. Der Zeilenumbruch bei den Oeffnungszeiten ("Mo-Fr ab 8," / "Sa ab 9 Uhr") entsteht von selbst aus der Breite. Kein erzwungener Umbruch im Text: der wuerde auf anderen Formaten an der falschen Stelle sitzen. Nur HOCHFORMAT: im Querformat stehen die Kacheln bereits richtig, dort waere die Aenderung ein Eingriff ohne Anlass. */ @media (min-width:700px) and (max-width:1279.98px) and (orientation:portrait){ :root{ --tab-kachel:clamp(84px,8.6vh,122px); --tab-spalt:clamp(14px,1.7vh,24px); /* 6. Runde: Die Kacheln wandern um DENSELBEN Betrag mit nach oben wie der Vierer-Block darueber (CJ: "mit dem gleichen Abstand auch mit hoch"). --tab-luft ist der Abstand der Kacheln zur Bildschirmunterkante; groesser heisst hoeher. 5.4vh -> 10.9vh entspricht 56 bis 66px, also genau der Strecke, die der Block oben zurueckgelegt hat. Der Abstand zwischen Knoepfen und Kacheln bleibt dadurch unveraendert bei ~124px. */ --tab-luft:clamp(60px,10.9vh,150px); } /* 6. Runde: breiter (CJ: "mehr rechts in die Laenge, gutes Stueck"). 600px -> 88vw. In vw und nicht in px, damit der Rand rechts auf allen drei Formaten gleich bleibt: mit festen 680px waren es 126 / 181 / 196px, mit 88vw sind es 131 / 139 / 142px. Genau darum ging es CJ bei "passt dann auch fuers iPad Pro und die kleine Variante". 88vw ist die BREITESTE Fassung, bei der alle drei Formate noch gleich umbrechen [1,2,2,2]. Ab 90vw faellt 768x1024 auf [1,2,2,1] - dann steht eine Kachel einzeilig neben zweizeiligen, und das liest sich als Fehler. */ .quickbar__row{max-width:min(100%,88vw);margin-inline:0;gap:var(--tab-spalt)} .quickbar__item{flex:1 1 calc(50% - var(--tab-spalt));gap:clamp(12px,1.6vw,18px); padding:16px clamp(18px,2.4vw,28px)} .quickbar__text{font-size:clamp(1.05rem,1.78vh,1.36rem)} .quickbar__icon svg{width:clamp(28px,3.7vh,42px);height:clamp(28px,3.7vh,42px)} } /* ============================ ABOUT ============================ */ .about__grid{display:grid;gap:clamp(32px,5vw,64px);align-items:center} .about__media{position:relative} .about__img{width:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);aspect-ratio:4/3;object-position:100% 50%} .about__badge{ position:absolute;left:18px;bottom:-22px;display:flex;align-items:center;gap:10px; background:#fff;border-radius:var(--radius);padding:11px 16px;box-shadow:var(--shadow);border:1px solid var(--line) } .about__badge svg{width:26px;height:26px;color:var(--cyan-deep);flex:none} .about__badge b{font-family:var(--font-head);display:block;color:var(--ink);font-size:.94rem} .about__badge span{font-size:.8rem;color:var(--ink-mute)} .about__quote{font-size:clamp(1.15rem,1.7vw,1.32rem);color:var(--ink-soft);margin-top:22px;padding-left:20px;border-left:3px solid var(--cyan)} .about__quals{margin-top:26px;display:grid;gap:12px} .about__quals li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-soft)} .about__sign{font-family:var(--font-head);font-weight:600;color:var(--navy);margin-top:26px;font-size:1.15rem} .about__sign small{display:block;font-weight:500;font-size:.9rem;color:var(--ink-mute)} /* Stats / Counter */ .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px} .stat{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:22px 18px;text-align:center;box-shadow:var(--shadow-sm)} .section--sand .stat,.section--mist .stat,.section--paper .stat{background:#fff} .stat__num{font-family:var(--font-head);font-weight:700;font-size:clamp(1.9rem,4vw,2.5rem);color:var(--navy);line-height:1} /* Ramon 16.08.2026: Die Einheiten "Min", "km" und "Tage" standen in Cyan, die Zahlen davor in Navy. Er will beides im selben Dunkelblau. */ .stat__num small{font-size:.55em;color:var(--navy);font-weight:600} .stat__label{margin-top:8px;font-size:.92rem;color:var(--ink-mute)} /* ============================ LEISTUNGEN ============================ */ .services{display:grid;grid-template-columns:1fr;gap:18px} .service{ position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:26px 24px;box-shadow:var(--shadow-sm); transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease) } .service:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent} /* Seit Etappe 4 sind die Karten Links auf die jeweilige Leistungsseite (Ramon Bereich 3 Punkt 7). Als würden sie sonst Linkfarbe und Unterstreichung erben – beides hier zurückgesetzt, damit das freigegebene Kartenlayout unverändert aussieht. Der Pfeil rechts unten signalisiert, dass die Karte anklickbar ist. */ a.service{display:block;color:inherit;text-decoration:none} a.service::after{ content:"";position:absolute;right:20px;bottom:18px;width:18px;height:18px;opacity:.42; background:currentColor;color:var(--cyan-deep);transition:transform .25s var(--ease),opacity .25s var(--ease); -webkit-mask:var(--pfeil) center/contain no-repeat;mask:var(--pfeil) center/contain no-repeat } a.service:hover::after,a.service:focus-visible::after{opacity:1;transform:translateX(4px)} a.service:focus-visible{outline:3px solid var(--cyan-deep);outline-offset:3px} .service__icon{display:grid;place-items:center;width:62px;height:62px;border-radius:18px;color:var(--navy);margin-bottom:20px;background:linear-gradient(150deg,rgba(70,178,208,.22),rgba(128,197,63,.15));box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 8px 18px -10px rgba(46,147,174,.55)} .service__icon svg{width:32px;height:32px} .service__title{font-size:1.22rem;margin-bottom:8px} .service__desc{color:var(--ink-mute);font-size:1rem} .service--highlight{border-color:transparent;background:linear-gradient(180deg,#fff, #fff) padding-box,linear-gradient(135deg,var(--cyan),var(--lime)) border-box;border:1.5px solid transparent} .service__badge{ position:absolute;top:18px;right:18px;font-family:var(--font-head);font-size:.72rem;font-weight:600; letter-spacing:.04em;text-transform:uppercase;color:var(--navy);background:rgba(128,197,63,.18); padding:5px 10px;border-radius:var(--radius-pill) } .service--highlight .service__icon{background:linear-gradient(150deg,var(--navy),var(--cyan-deep));color:#fff;box-shadow:0 10px 22px -10px rgba(27,65,122,.7)} /* ============================ FEATURE (GERIATRIE) ============================ */ .feature{position:relative;overflow:hidden} .feature__grid{position:relative;z-index:1;display:grid;gap:clamp(32px,5vw,60px);align-items:center} .feature__media{position:relative} .feature__img{width:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);aspect-ratio:4/3} .feature__list{margin-top:28px;display:grid;gap:16px} .feature__list li{display:flex;gap:14px;align-items:flex-start;font-size:1.06rem} .check{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;background:rgba(128,197,63,.18);color:var(--lime-deep);margin-top:1px} .section--navy .check{background:rgba(128,197,63,.22);color:var(--lime)} .check svg{width:16px;height:16px} /* ============================ ABLAUF / STEPS ============================ */ .steps{display:grid;gap:12px;counter-reset:step} .step{position:relative;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;padding:20px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)} .section--sand .step,.section--mist .step{background:#fff} .step__num{ display:grid;place-items:center;width:52px;height:52px;flex:none;border-radius:50%; font-family:var(--font-head);font-weight:700;font-size:1.25rem;color:#fff; background:linear-gradient(135deg,var(--navy),var(--cyan-deep)) } .step__title{font-size:1.18rem;margin-bottom:4px} .step__desc{color:var(--ink-mute);font-size:1rem} /* ============================ EINSATZGEBIET ============================ */ .area__grid{display:grid;gap:clamp(32px,5vw,60px);align-items:center} .area__map{width:100%;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);background:var(--mist);border:1px solid var(--line)} .area__map svg{width:100%;height:auto;display:block} .area__towns{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px} .town{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-pill);padding:9px 16px;font-size:.98rem;font-weight:500;color:var(--ink-soft);box-shadow:var(--shadow-sm)} .town--key{background:var(--navy);color:#fff;border-color:var(--navy)} .town svg{width:15px;height:15px;color:var(--cyan-deep)} .town--key svg{color:var(--lime)} /* Seit Etappe 5 führt jeder Ort auf seine Standortseite. Als Links brauchen die Pillen ein sicheres Tippziel (≥44px) sowie Hover- und Fokuszustände – vorher waren es reine . */ a.town{ min-height:44px;text-decoration:none; transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease) } a.town:hover,a.town:focus-visible{background:var(--navy);color:#fff;border-color:var(--navy);transform:translateY(-2px)} a.town:hover svg,a.town:focus-visible svg{color:var(--lime)} a.town--key:hover,a.town--key:focus-visible{background:var(--navy-deep);border-color:var(--navy-deep)} a.town:focus-visible{outline:3px solid var(--cyan-deep);outline-offset:3px} .area__note{margin-top:24px;padding:16px 20px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--cyan-deep);border-radius:var(--radius);color:var(--ink-soft);font-size:1rem} /* Einsatzgebiet überarbeitet: Kopf über volle Breite, Überschrift einzeilig (Desktop), Bild links + Text rechts, unten kürzer */ #einsatzgebiet{padding-bottom:clamp(30px,3.6vw,52px)} #einsatzgebiet .section-head{max-width:none} #einsatzgebiet .area__body .lead{margin-top:0} @media (min-width:1024px){#einsatzgebiet .section-title{white-space:nowrap;font-size:clamp(1.7rem,2.75vw,2.25rem)}} /* ============================ FAQ ============================ */ .faq{max-width:820px;margin-inline:auto;display:grid;gap:14px} .faq__item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden} .faq__q{ width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px; padding:22px 24px;background:transparent;border:0;text-align:left; font-family:var(--font-head);font-weight:600;font-size:1.12rem;color:var(--ink) } .faq__q:hover{color:var(--navy)} .faq__icon{position:relative;width:24px;height:24px;flex:none} .faq__icon::before,.faq__icon::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--cyan-deep);border-radius:2px} .faq__icon::before{width:16px;height:2.5px} .faq__icon::after{width:2.5px;height:16px;transition:transform .3s var(--ease)} .faq__q[aria-expanded="true"] .faq__icon::after{transform:translate(-50%,-50%) scaleY(0)} .faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)} .faq__q[aria-expanded="true"] + .faq__a{grid-template-rows:1fr} .faq__a-inner{overflow:hidden} .faq__a p{padding:0 24px 24px;color:var(--ink-soft);margin:0} /* ============================ KONTAKT / TERMIN ============================ */ /* Blauer Kasten auf gleicher Hoehe wie das Formular (CJ-Vorgabe), ohne die Riesenluecken von frueher. Zwei Dinge machen das moeglich: 1) .contact__meta bekommt display:contents - dadurch sind ALLE fuenf Bausteine (Logo, Kopf, E-Mail, Ort, Zeiten) direkte Flex-Kinder. Die Restflaeche verteilt sich auf VIER Zwischenraeume statt sich in zwei bis drei grossen Loechern zu sammeln. 2) Die Bausteine selbst sind grosszuegiger (groesseres Logo, hoeherer Telefon-Knopf, luftigere Zeiten-Zeilen). Was der Inhalt selbst fuellt, muss nicht als Leerraum verteilt werden. Vorher: 85 px Luecken und 103 px Leere unten. */ .contact__grid{display:grid;gap:26px;align-items:stretch} .contact__aside{display:flex;flex-direction:column;justify-content:space-between;gap:22px;background:var(--navy);color:var(--on-navy);border-radius:var(--radius-lg);padding:clamp(24px,3vw,34px);box-shadow:var(--shadow)} .contact__aside h3{color:#fff} /* Logo als Kopf des Kastens - gibt ihm oben einen Anker */ .contact__logo{align-self:flex-start;display:inline-block;background:#fff;padding:12px 18px;border-radius:14px;box-shadow:var(--shadow-sm)} .contact__logo img{height:clamp(46px,4.4vw,68px);width:auto;display:block} /* Telefon-Knopf auf voller Breite: hing vorher auf halber Kastenbreite und wirkte verloren */ .contact__call{display:flex;width:100%;align-items:center;justify-content:center;gap:10px;margin:14px 0 0;padding:clamp(15px,1.6vw,21px) 20px;border-radius:var(--radius-pill);background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.20);text-decoration:none;transition:transform .28s var(--ease),background .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease)} .contact__call:hover,.contact__call:focus-visible{transform:translateY(-3px) scale(1.04);background:rgba(255,255,255,.15);border-color:var(--lime);box-shadow:0 18px 38px -16px rgba(0,0,0,.55)} .contact__call:active{transform:translateY(-1px) scale(1.01)} .contact__call svg{width:24px;height:24px;color:var(--lime);flex:none;transition:transform .28s var(--ease)} .contact__call:hover svg{transform:scale(1.08) rotate(-6deg)} .contact__call span{font-family:var(--font-head);font-weight:700;font-size:clamp(1.1rem,1.9vw,1.28rem);color:#fff;letter-spacing:-.01em} /* display:contents statt eigener Flex-Spalte - siehe Hinweis bei .contact__grid. Der Wrapper verschwindet aus dem Layout, seine drei Kinder werden direkte Flex-Kinder des blauen Kastens. Nur so verteilt sich die Restflaeche gleichmaessig. */ .contact__meta{display:contents} .contact__meta-item{display:flex;gap:14px;align-items:flex-start} /* Symbol mittig zur ERSTEN TEXTZEILE (Ramon 16.08.2026, gemessen) Vorher stand das Mailsymbol 7-8 px zu hoch, die beiden anderen Symbole stimmten. Zwei Ursachen, beide hier behoben: 1. Der Mail-Link hat eine vergroesserte Tippflaeche (padding-block:6px). Die schiebt den TEXT nach unten, das Symbol daneben aber nicht - genau die 6-7 px Versatz. Das negative margin nimmt der Tippflaeche ihre Wirkung auf das Layout, ohne sie zu verkleinern: geklickt wird weiter die volle Flaeche. Denselben Kniff benutzt schon der Footer. 2. margin-top war fest 2 px. Das passte bei 16 px Schrift, lief aber auf grossen Bildschirmen auseinander, seit die Schrift dort mitwaechst (gemessen -2 px bei 1728 px). Jetzt aus der Zeilenhoehe gerechnet, damit es bei jeder Schriftgroesse mittig bleibt. 1.65 ist die line-height aus dem body. */ .contact__meta-item svg{width:22px;height:22px;color:var(--cyan);flex:none;margin-top:calc((1.65em - 22px) / 2)} .contact__meta-item a{color:#fff;display:inline-block;padding-block:6px;margin-block:-6px;max-width:100%;overflow-wrap:anywhere} /* Öffnungszeiten als eigener Block: schliesst den Kasten unten sichtbar ab, statt dass die letzte Zeile frei im Raum endet. */ /* margin-inline gleicht Rahmen (1px) + Polster (16px) wieder aus, damit die Uhr-Ikone exakt unter den Ikonen fuer E-Mail und Ort steht. Ohne das waere sie 17 px eingerueckt und die Ikonenspalte haette einen Knick. */ .contact__meta-item--zeiten{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-radius:14px;padding:clamp(14px,1.5vw,19px) 16px;margin-inline:-17px} .contact__hours{margin-top:0;display:grid;gap:clamp(6px,.8vw,10px)} .contact__hours div{display:flex;justify-content:space-between;gap:16px;color:var(--on-navy-mute);border-bottom:1px solid var(--line-light);padding-bottom:clamp(6px,.8vw,10px)} /* Die letzte Zeile brauchte keine Trennlinie - darunter kam nichts mehr */ .contact__hours div:last-child{border-bottom:0;padding-bottom:0} .contact__hours span{white-space:nowrap} .contact__hours div>span:first-child{white-space:normal} .contact__form{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(16px,2vw,24px);box-shadow:var(--shadow-sm)} .field{margin-bottom:6px} .field label{display:block;font-family:var(--font-head);font-weight:500;font-size:.92rem;color:var(--ink);margin-bottom:4px} .field .req{color:var(--cyan-deep)} .field input,.field textarea{ width:100%;font:inherit;font-size:1rem;line-height:1.35;color:var(--ink); padding:8px 13px;background:var(--paper);border:1.5px solid var(--line-strong);border-radius:12px; transition:border-color .2s,box-shadow .2s } .field input:focus,.field textarea:focus{outline:none;border-color:var(--cyan-deep);box-shadow:0 0 0 4px rgba(46,147,174,.15)} .field textarea{min-height:44px;resize:vertical} .field--hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .form__consent{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;line-height:1.45;color:var(--ink-soft);margin:2px 0 10px} .form__consent input{width:24px;height:24px;flex:none;margin-top:2px;accent-color:var(--navy)} .form__status{margin-top:16px;font-size:1rem;border-radius:12px;padding:0} .form__status.is-ok{padding:14px 16px;background:rgba(128,197,63,.14);color:var(--lime-deep)} .form__status.is-err{padding:14px 16px;background:rgba(211,47,47,.1);color:#c02626} /* Kontakt kompakter: Sektion kürzer, damit der Footer zügig folgt */ #kontakt{padding-block:clamp(32px,4vw,58px)} #kontakt .section-head{margin-bottom:clamp(22px,2.8vw,38px)} .contact__aside-head{display:block} .contact__form .btn--lg{min-height:46px;padding:.75rem 1.5rem;font-size:1.02rem;margin-top:2px} /* ============================ FOOTER ============================ */ /* Unten 88px statt 22px: Der fest sitzende WhatsApp-Knopf reicht vom Fensterboden bis ~72px hinauf. Am Seitenende kann man nicht weiterscrollen – dort lag er deshalb dauerhaft auf der letzten Fusszeile und verdeckte die Pflichtlinks „Impressum“ und „Datenschutz“ (gemessen auf Tablet und schmalen Handys). Der Knopf laesst sich nicht wegschieben, also braucht die Fusszeile Platz. */ .footer{background:var(--navy-900);color:var(--on-navy-mute);padding-block:clamp(40px,5vw,62px) 88px} .footer__grid{display:grid;gap:28px} .footer__logo-chip{display:inline-block;background:#fff;padding:12px 18px;border-radius:16px;margin-bottom:20px;box-shadow:var(--shadow-sm)} .footer__logo-chip img{height:46px;width:auto;display:block} .footer__brand p{color:var(--on-navy-mute);max-width:40ch;font-size:.9rem;line-height:1.55} .footer__region{margin-top:12px;font-size:.84rem;color:var(--on-navy-mute)} .footer__col h4{font-family:var(--font-head);font-size:1rem;color:#fff;margin-bottom:13px;font-weight:600} .footer__col ul{display:grid;gap:9px} .footer__col a{color:var(--on-navy-mute);font-size:.9rem;text-decoration:none;transition:color .2s} .footer__col a:hover{color:var(--cyan)} .footer__contact{display:grid;gap:8px;font-size:.9rem} .footer__contact a{color:#fff;text-decoration:none} .footer__bottom{margin-top:30px;padding-top:20px;border-top:1px solid var(--line-light);display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:.8rem;color:var(--on-navy-mute)} /* ============================ WAVE DIVIDER ============================ */ .wave-divider{display:block;width:100%;height:auto;margin-bottom:-6px;color:inherit} .wave-top{margin-top:-6px;margin-bottom:0} /* ============================ RESPONSIVE ============================ */ @media (max-width:559.98px){ .stats{grid-template-columns:1fr} } @media (min-width:560px){ .stats{gap:18px} } @media (min-width:768px){ .services{grid-template-columns:1fr 1fr} .footer__grid{grid-template-columns:1.3fr 1fr} .about__badge{left:-34px} } @media (min-width:900px){ .contact__grid{grid-template-columns:1fr 1fr} } @media (min-width:1024px){ :root{--header-h:56px} .nav-toggle{display:none} .about__grid,.feature__grid,.area__grid{grid-template-columns:1fr 1fr} .about__grid--reverse .about__media{order:2} .services{grid-template-columns:repeat(3,1fr)} .steps{grid-template-columns:repeat(5,1fr);gap:16px} .step{grid-template-columns:1fr;text-align:center;justify-items:center;gap:14px;padding:26px 18px} .step::after{content:"";position:absolute;top:46px;left:calc(50% + 34px);width:calc(100% - 68px);height:2px;background:var(--line-strong)} .step:last-child::after{display:none} .footer__grid{grid-template-columns:1.8fr 1fr 1fr 1.2fr} } @media (min-width:1200px){ .services{grid-template-columns:repeat(4,1fr)} } /* Desktop-Navigation: horizontal, breit verteilt */ @media (min-width:1024px){ .nav{position:static;transform:none;opacity:1;visibility:visible;background:none;box-shadow:none;padding:0;height:auto;flex:1;flex-direction:row;justify-content:center;gap:clamp(8px,1.9vw,30px)} .nav__link{font-size:.98rem;padding:9px 10px} .nav>.btn{display:none} } /* Mobile-Navigation: Overlay-Panel */ @media (max-width:1023.98px){ .nav{ position:fixed;top:var(--header-h);left:0;right:0;bottom:0;z-index:99; overflow-y:auto; flex-direction:column;align-items:stretch;justify-content:flex-start;gap:6px; padding:24px var(--gutter) 40px;background:#fff; transform:translateY(-12px);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s } .header.nav-open .nav{opacity:1;visibility:visible;transform:none} .nav__link{font-size:1.25rem;padding:16px 12px;border-bottom:1px solid var(--line)} .nav .btn{margin-top:18px} .header.nav-open{background:#fff;box-shadow:0 1px 0 var(--line)} } /* ============================ CURSOR ============================ */ a,button,.btn,summary,label,[role="button"]{cursor:pointer} input,textarea{cursor:text} /* ============================ ÜBER MICH (überarbeitet) ============================ */ #ueber{padding-block:clamp(32px,4vw,60px) clamp(36px,4.6vw,66px)} .about__head{max-width:none;margin-bottom:clamp(30px,4vw,52px)} .about__head .section-title{font-size:clamp(1.9rem,4.2vw,3rem);letter-spacing:-.025em;max-width:none} .about__quals{margin-top:clamp(30px,4vw,44px);display:grid;gap:14px} .about__qual{display:flex;gap:12px;align-items:center;color:var(--ink-soft);font-size:1.02rem;font-weight:500;line-height:1.35} .about__qual svg{flex:none} @media (min-width:768px){.about__quals{grid-template-columns:repeat(3,1fr);gap:20px}} @media (min-width:1024px){.about__grid{grid-template-columns:1.2fr .9fr}} .about__img{aspect-ratio:4/3} /* ============================ LEISTUNGEN (überarbeitet) ============================ */ #leistungen{padding-block:clamp(30px,3.6vw,52px) var(--section)} .service__title{font-size:1.05rem;margin-bottom:8px;line-height:1.25;letter-spacing:-.015em} .service__desc{color:var(--ink-mute);font-size:.97rem;line-height:1.5;min-height:4.4em} /* ============================ SCHWERPUNKT (überarbeitet) ============================ */ .feature{padding-block:clamp(32px,4vw,58px)} .feature__grid{gap:clamp(28px,4vw,56px)} @media (min-width:1024px){.feature__grid{grid-template-columns:1.12fr .88fr}} .feature__list li{font-size:1.05rem;line-height:1.4} .feature .btn--light{font-size:1.14rem;padding:1.2rem 2.3rem;min-height:64px} .feature .btn--light:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 20px 44px -16px rgba(0,0,0,.55)} .feature .btn--light:hover .btn__icon--arrow{transform:translateX(5px)} /* ============================ ABLAUF-SLIDER ============================ */ .flow{position:relative} .flow__scroll{position:relative} .flow__pin{position:static} .flow__track{display:flex;flex-direction:column;gap:16px;max-width:860px;margin-inline:auto;padding-inline:var(--gutter)} .flow__card{ position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg); padding:clamp(18px,3vw,28px);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:10px; transition:transform .3s var(--ease),box-shadow .3s var(--ease) } .flow__num{ width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center; font-family:var(--font-head);font-weight:700;font-size:1.15rem;color:#fff; background:linear-gradient(135deg,var(--navy),var(--cyan-deep));box-shadow:0 10px 22px -12px rgba(27,65,122,.8) } .flow__card h3{font-size:1.12rem;margin:0} .flow__card p{color:var(--ink-mute);font-size:.95rem;margin:0} .flow__progress{display:none} .flow__hint{display:none} /* Desktop: gepinnter Horizontal-Slide (per JS aktiviert) */ .flow--pinned .flow__scroll{height:210vh} .flow--pinned .flow__pin{position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));display:flex;flex-direction:column;justify-content:center;overflow:hidden} /* Abstaende im gepinnten Bereich haengen an der FENSTERHOEHE, nicht an der Breite. Der Bereich ist genau 100vh - Header hoch und schneidet Ueberstehendes ab. Auf flachen Bildschirmen (z. B. 1280x720) blieben vorher nur 4 px Luft - jede Aenderung an den Karten liess die Ueberschrift oben abreissen. Mit vh-Bezug schrumpfen die Abstaende dort automatisch mit. */ .flow--pinned .section-head{margin-bottom:clamp(8px,2vh,22px);max-width:820px} .flow--pinned .flow__pin .lead{display:none} .flow--pinned .flow__track{flex-direction:row;gap:22px;max-width:none;margin:0;padding-inline:max(calc((100vw - 1180px)/2),40px);will-change:transform} /* justify-content:flex-start statt center (Etappe 6): Die Karten sind durch align-items:stretch der Spur ohnehin alle gleich hoch. Zentriert wurde aber der INHALT - und der ist unterschiedlich hoch, weil Schritt 1 und 3 nur zwei Textzeilen haben und 2/4/5 vier. Bei 26,4 px Zeilenhoehe ergab das 52,8 px Hoehenunterschied und damit 26 px Versatz: Nummer, Symbol und Ueberschrift von Karte 1 und 3 sassen tiefer als bei den Nachbarn. Karte 3 fiel am staerksten auf, weil sie zwischen den beiden laengsten Karten steht. Oben ausgerichtet starten alle fuenf auf derselben Hoehe. */ .flow--pinned .flow__card{flex:0 0 clamp(280px,30vw,400px);min-height:min(34vh,270px);justify-content:flex-start} /* KEINE reservierte Ueberschriftenhoehe hier - bewusst. Ein Versuch mit min-height:2.4em (fuer den Fall einer zweizeiligen Ueberschrift bei 200 % Schriftvergroesserung) liess die Karten von 270 auf 297 px wachsen. Der gepinnte Bereich hat aber eine feste Hoehe (100vh - Header) mit overflow:hidden - bei 1280x720 lief der Inhalt dadurch 18 px ueber und die Ueberschrift "Ihr Weg zum Hausbesuch" samt Eyebrow wurde oben abgeschnitten. Ein sichtbarer Fehler auf einer verbreiteten Aufloesung wiegt schwerer als eine Fehlausrichtung bei doppelter Schriftgroesse. hyphens bleibt als schadlose Absicherung. */ .flow--pinned .flow__card h3{font-size:clamp(1.25rem,2vw,1.6rem);-webkit-hyphens:auto;hyphens:auto} .flow--pinned .flow__card p{font-size:1rem} .flow--pinned .flow__num{width:52px;height:52px;font-size:1.3rem} .flow--pinned .flow__progress{display:block;position:relative;height:5px;border-radius:3px;background:var(--line-strong);margin:clamp(16px,3.4vh,38px) max(calc((100vw - 1180px)/2),40px) 0;overflow:hidden} .flow--pinned .flow__progress-bar{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,var(--cyan),var(--lime));border-radius:3px} .flow--pinned .flow__hint{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:clamp(7px,1.5vh,16px);color:var(--ink-mute);font-size:.95rem} /* ---------- Flache Fenster: der gepinnte Bereich muss in 100vh - Header passen ---------- Der Pin hat FESTE Hoehe und schneidet ab (overflow:hidden). Wie flach ein Fenster ist, haengt nicht am Bildschirm, sondern an Browserleisten, Windows-Skalierung und Zoom: Ein 1920x1080-Notebook mit 150 % Windows-Skalierung hat nur ~610 px CSS-Fensterhoehe, ein 1366x768-Laptop mit Lesezeichenleiste ~600 px. Gemessener Bedarf vorher: 573-607 px bei 544 px Platz -> oben brach "SO LAEUFT'S AB" ab, unten das Zitat. Deshalb haengen hier ALLE Groessen an der FENSTERHOEHE statt an der Breite. Alle Werte sind so gerechnet, dass sie bei 820 px Hoehe exakt die Normalwerte treffen - es gibt also keinen Sprung an der Grenze, und ab 864/900/1080 ist nachweislich nichts veraendert. Groesster Hebel ist die Ueberschrift: In voller Groesse bricht sie auf ZWEI Zeilen um. Mitskaliert passt sie in eine - das spart die Zeile UND die Schriftgroesse. NICHT angetastet wird die Textgroesse in den Karten: Zielgruppe sind aeltere Menschen, kleinerer Fliesstext waere der falsche Weg, um Platz zu gewinnen. */ @media (min-width:1024px) and (max-height:820px){ .flow--pinned .section-title{font-size:clamp(1.5rem,5.95vh,3.05rem)} .flow--pinned .flow__card{padding-block:clamp(12px,3.4vh,28px);gap:clamp(6px,1.2vh,10px)} .flow--pinned .flow__num{width:clamp(42px,6.35vh,52px);height:clamp(42px,6.35vh,52px);font-size:clamp(1.05rem,1.6vh,1.3rem)} .flow--pinned .flow__quote{margin-top:clamp(14px,2.4vh,26px);padding-top:clamp(12px,2vh,20px)} .flow--pinned .flow__progress{margin-top:clamp(12px,2.4vh,24px)} } /* ============================ SECTION-ÜBERGÄNGE (Farbverlauf + nahtlose Welle) ============================ */ .xfade{position:relative;height:clamp(92px,11.5vw,144px);overflow:hidden;z-index:1;line-height:0} /* Verlauf blendet beidseitig weich – die Wellen liegen mittig im Übergang, nicht auf einer harten Kante */ .xfade--to-navy{background:linear-gradient(180deg,var(--paper) 0%,#dce8f4 20%,#8aa8cd 50%,#2a4c85 80%,var(--navy) 100%)} .xfade--to-white{background:linear-gradient(180deg,var(--navy) 0%,#2a4c85 20%,#8aa8cd 50%,#dce8f4 80%,#fff 100%)} .xfade--to-white.xfade--deep{background:linear-gradient(180deg,var(--navy-deep) 0%,#4e6fa0 12%,#98b6d8 40%,#dfeaf6 72%,#fff 100%)} .xfade--to-paper{background:linear-gradient(180deg,#fff 0%,#e7f0f9 50%,var(--paper) 100%)} .xfade--to-mist{background:linear-gradient(180deg,#fff 0%,#dfeef6 50%,var(--mist) 100%)} /* Etappe 6, Nachtrag: Auf den Detailseiten steht das CTA-Band jetzt VOR den Leistungs-Kacheln, damit der Handlungsaufruf kommt, solange das Thema frisch ist. Dadurch entstehen zwei Farbwechsel, die es vorher nicht gab. Die vorhandenen Übergänge haben ihre Ausgangsfarbe fest eingebaut (--to-navy startet bei paper, --to-paper bei Weiß) und würden hier eine sichtbare Kante erzeugen - deshalb diese beiden zusätzlichen Verläufe. */ .xfade--white-navy{background:linear-gradient(180deg,#fff 0%,#dce8f4 20%,#8aa8cd 50%,#2a4c85 80%,var(--navy) 100%)} .xfade--navy-paper{background:linear-gradient(180deg,var(--navy) 0%,#2a4c85 20%,#8aa8cd 50%,#dce8f4 80%,var(--paper) 100%)} /* Altbestand-Korrektur (Etappe 6): An 19 Stellen folgte auf eine Paper-Sektion der Übergang .xfade--to-white, der bei NAVY beginnt - dadurch entstand mitten im Text eine harte dunkle Linie. Dies ist das fehlende Gegenstück zu .xfade--to-paper, exakt spiegelverkehrt. */ .xfade--paper-white{background:linear-gradient(180deg,var(--paper) 0%,#e7f0f9 50%,#fff 100%)} .xfade--mist-white{background:linear-gradient(180deg,var(--mist) 0%,#dfeef6 50%,#fff 100%)} .xfade__wave{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:66%;pointer-events:none;opacity:.72} .xfade__wave svg{display:block;width:200%;max-width:none;height:100%;animation:wave-drift 24s linear infinite;will-change:transform} .xfade__line{fill:none;stroke-width:2.4px;stroke-linecap:round} .xfade__line--cyan{stroke:var(--cyan)} .xfade__line--lime{stroke:var(--lime)} .xfade--soft .xfade__wave{opacity:.5} .xfade--soft .xfade__line{stroke-width:2px} /* ============================ RESPONSIVE (Ergänzungen) ============================ */ @media (min-width:1024px){ .about__head .section-title{white-space:nowrap} } /* ============================ HANDY-FEINSCHLIFF (Senioren: Tippziele ≥44px, kleine Geräte) ============================ */ /* Leistungs-Titel erst ab Tablet einzeilig erzwingen (Handy umbruchfähig = zoom-robust) */ @media (min-width:768px){.service__title{white-space:nowrap}} /* Handy: keine künstliche Karten-Mindesthöhe (1-spaltig gestapelt, keine Zeilen-Ausrichtung nötig) */ @media (max-width:767.98px){.service__desc{min-height:0}} /* Quickbar-Telefon: vollwertiges Tippziel auf Touch-Handys */ /* 23.08.2026 — Grenze von 639.98px auf 1199.98px angehoben (E13-1). Die Telefonnummer im Infoband war auf dem Tablet nur 29px hoch antippbar. Das ist das wichtigste Tippziel der ganzen Seite, und bildschirm-matrix.py hat es NICHT gemeldet: Die Kachel liegt als Vorfahre unter dem Link, elementFromPoint liefert ab ~20px Abstand die Kachel, und die Pruefung zaehlte das als Treffer. Sie rechnete sich die Flaeche damit auf 81px hoch. Ein Tipp auf die Kachel waehlt aber keine Nummer. Der blinde Fleck im Werkzeug ist im selben Zug behoben worden. */ @media (max-width:1199.98px){.quickbar__text a{display:inline-flex;align-items:center;min-height:44px}} /* Kontaktformular gestapelt (<900px): größere Felder für Senioren-Finger + nichts sprengt das Grid */ @media (max-width:899.98px){ .field input,.field textarea{padding:13px 14px} .contact__aside,.contact__form,.contact__meta,.contact__meta-item{min-width:0} /* Öffnungszeiten dürfen bei starkem Textzoom (Senioren) umbrechen statt am Rand abzuschneiden */ .contact__hours div{flex-wrap:wrap} } /* Footer-Links auf Handy: vollwertige Tippziele ≥44px (Etappe 6, Q1). Trick, damit der Footer NICHT höher wird: Der Abstand zwischen den Listeneinträgen wandert in die Tippfläche hinein (gap 9→0, dafür 44px statt 35,8px hoch). Sichtbarer Text-Abstand bleibt dadurch praktisch gleich (~25px statt ~26px), aber zwischen den Tippzielen gibt es keine toten Lücken mehr. */ /* 23.08.2026 — Grenze von 767.98px auf 1199.98px angehoben. Ein iPad ist 768px breit: die Regel griff um 0,02 px nicht mehr, und der Kontaktlink im Footer war auf JEDER der 27 Seiten nur 37px hoch (25 der 83 Matrix-Befunde). 1199.98 statt 1023.98, weil ein iPad im QUERFORMAT 1024px breit ist und sonst genauso knapp herausfiele — derselbe Fehler eine Stufe hoeher. 1199.98 ist sicher: das schmalste abgenommene Desktop-Format ist 1280px, also 80px Abstand. Siehe E13-1: Tippziel-Regeln benutzen NIE eine Layout-Grenze mit. */ @media (max-width:1199.98px){ .footer__col ul{gap:0} .footer__col a,.footer__contact a{display:inline-flex;align-items:center;min-height:44px} /* Kurzer Footer (Impressum/Datenschutz): Links liegen inline im Textfluss und waren nur 15px hoch */ .footer__bottom a{display:inline-flex;align-items:center;min-height:44px} } /* Sehr kleine Geräte (≤380px): Geriatrie-CTA darf umbrechen, Grid-Spalten dürfen schrumpfen → kein Abschnitt */ @media (max-width:380px){ .feature__grid,.feature__body,.feature__media{min-width:0} .feature .btn--light{white-space:normal} } /* ============================ HERO + INFO-BAND — HANDY (Runde 2) ============================ */ @media (max-width:639.98px){ /* Hero höher: Foto bleibt sichtbar, das Info-Band liegt als Glas darauf. svh statt vh: In Safari auf dem iPhone meint "vh" die Höhe OHNE Adressleiste – also mehr, als tatsächlich zu sehen ist. Die vh-Zeile bleibt als Rückfalloption für ältere Browser stehen, die svh nicht kennen; sie ignorieren die zweite Zeile. Inhalt UNTEN verankert (flex-end): Der Abstand zwischen Buttons und Info-Band muss auf jedem Gerät gleich sein. Beide hängen jetzt am Hero-Ende, also wächst der Zuwachs an Höhe oben ins Foto hinein statt in die Lücke dazwischen. */ /* ---------- Der Hero fuellt den ersten Bildschirm (Ramon 16.08.2026, 3. Runde) ---------- CJ mit Screenshots: "Der Uebergang mit den Wellenlinien startet viel zu frueh." Nachgemessen ueber 10 echte Geraeteformate x 2 Engines - der Befund war auf JEDEM normalen Handy derselbe: Der Hero fuellte nur 87,7 bis 89,3 % des Bildschirms, 88 bis 94px des Wellen-Uebergangs standen beim Laden schon im Bild. Warum das mit "96svh" passieren konnte, obwohl 96 % fast voll klingt: Der Uebergang beginnt NICHT am Hero-Ende. Die Quickbar wird per margin-top ins Foto hochgezogen und endet deshalb ein Stueck VOR dem Hero-Ende - der Hero wirkt also kuerzer, als seine Hoehe vermuten laesst. Die fehlenden 4 % und dieser Vorlauf addierten sich zu den gemessenen ~90px. Die Rechnung steht jetzt als Variablen da, statt als Zahl 43 im Code zu stehen: wird an der Quickbar etwas geaendert, wandert der Hero automatisch mit. */ :root{ /* ---------- "Wie flach ist dieses Geraet?" als stetige Groesse ---------- CJ 16.08.2026, Kollege auf dem kleinen Format: "Beim Scrollen springt alles hin und her, die Ueberschriften springen von der Mitte hoch auf Stirnhoehe." Gemessen mit finde-hero-sprung.py: zwischen 660px und 665px Fensterhoehe sprang die Orte-Zeile um 112px, der Titel um 106px, die Buttons um 85px. Ursache war ein @media (max-height:660px), das hier vorher den Inhalt flacher Geraete zusammendrueckte. Der Gedanke war richtig, die Bauform falsch: Ein Media Query fragt die AKTUELLE Fensterhoehe ab. Auf dem Handy klappt beim Scrollen die Adressleiste weg, das Fenster wird dabei 60-130px hoeher - eine Schwelle bei 660px liegt mitten in diesem Bereich und schaltet deshalb bei JEDEM Scrollen um. Auf dem grossen Format (820px) liegt sie weit weg, dort trat der Fehler nie auf - genau wie CJ es beschrieben hat. Eine "sicherere" Schwelle gibt es nicht: Jedes Geraet hat eine andere Hoehe, jede feste Grenze liegt bei irgendeinem Geraet mitten im Weg. Stattdessen jetzt eine stetige Kennzahl: 0px auf normalen Geraeten, 160px auf den flachsten. Alle Werte, die vorher umschalteten, leiten sich daraus ab und wandern damit fliessend statt sprunghaft. svh (Hoehe MIT Adressleiste) aendert sich beim Scrollen NICHT - anders als die Hoehe, die ein Media Query sieht. Genau deshalb ist es hier die richtige Einheit. Gerechnet wird in px statt in einer Verhaeltniszahl, weil calc() zwar "Laenge mal Zahl" kann, aber nicht "Laenge geteilt durch Laenge". */ --flach:clamp(0px, 713px - 100svh, 160px); /* ---------- Wie hoch das Info-Band ins Foto gezogen wird ---------- Kein fester Wert mehr, sondern genau so viel, wie das Band selbst braucht plus die Luft, die unter ihm frei bleiben soll. Warum das wichtig ist (CJ 16.08.2026, nach Teil 2): Hier stand zuletzt 400px. Die Hero-Hoehe wird aus diesem Wert abgeleitet, der Hero wurde dadurch 160px HOEHER als das Fenster - und ragte damit unter den Wellen-Uebergang. Der ist ein weicher Verlauf, also schien das Hero-Foto hindurch: Unter den Wellen lag ein dunkler Streifen Foto, bevor der naechste Abschnitt anfing. Ein zu hoher Hero ist eben nicht folgenlos, auch wenn der sichtbare Teil stimmt. Aus Bandhoehe + Luft gerechnet ist der Hero exakt so hoch wie das Fenster: Die Kaesten sitzen weiterhin genau dort, wo sie sollen, aber nichts ragt mehr unter den Uebergang. Die Luft ist damit auch nicht mehr durch den hub begrenzt. */ --quickbar-hub:calc(var(--quickbar-hoehe) + var(--kaesten-luft)); /* Die Bandhoehe wird NICHT als fertige Zahl notiert, sondern aus ihren Bestandteilen gerechnet: zwei Kachelreihen plus der Spalt dazwischen. Eine eingetragene Zahl war schon einmal die Fehlerquelle - beim Verkleinern der Kacheln auf flachen Geraeten stand hier 142px, gemessen waren es 138px, und die vier Kaestchen ragten wieder aus dem Bild. Aus den Bestandteilen gerechnet kann das nicht mehr passieren. */ /* 84px normal, 60px auf den flachsten Geraeten - fliessend dazwischen. Faktor 0.15 = 24px Unterschied auf 160px Kennzahl. Warum nicht weiter herunter? min-height ist ein MINDESTwert, keine Vorgabe: Zwei Zeilen Kacheltext plus Innenabstand brauchen gemessen 60px. Ein Zwischenstand setzte hier 56px an - die Kachel wurde trotzdem 60px hoch, waehrend --quickbar-hoehe weiter mit 56px rechnete. Da der Hero-Vorlauf aus dieser Hoehe abgeleitet wird, wuchs die Hero-Hoehe um die Differenz, und die Kaesten rutschten unter den Bildschirmrand. Paradoxerweise ragten sie dadurch WEITER heraus, je kleiner der Wert gesetzt wurde. Merksatz fuer spaeter: Dieser Wert darf nie unter dem liegen, was der Kachelinhalt tatsaechlich braucht - sonst rechnet die ganze Vorlauf-Kette mit einer Hoehe, die es nicht gibt. miss-hero-fuellung.py vergleicht beides und schlaegt Alarm. */ --kachel-hoehe:calc(84px - var(--flach) * .15); --kachel-spalt:10px; --quickbar-hoehe:calc(2 * var(--kachel-hoehe) + var(--kachel-spalt)); /* --quickbar-luft (16px Abstand Band -> Uebergang) ist entfallen. Ihre Aufgabe hat --kaesten-luft uebernommen, die mit 50-193px ohnehin ein Vielfaches davon betraegt. Als eigener Posten war sie sogar schaedlich: Sie schob den Uebergang 16px unter das Hero-Ende, und in diesem Spalt lag weder Foto noch Uebergang - nur der Seitenhintergrund. */ /* Um so viel endet das Band VOR dem Hero-Ende, also so viel hoeher muss der Hero sein als das Fenster, damit der Uebergang genau an der Unterkante beginnt. NUR hub minus Bandhoehe - die Luft darunter gehoert NICHT abgezogen: Sie liegt zwischen Band und Uebergang und soll ja sichtbar bleiben. Die erste Fassung zog sie mit ab und liess dadurch auf jedem Geraet exakt 16px des Uebergangs im Bild stehen. Aufgefallen ist das nur, weil nachgemessen wurde - 16px sehen auf dem Bildschirm nach nichts aus, sind aber genau der Fehler, den CJ gemeldet hat. */ /* ---------- Luft unter den Info-Kaesten (Ramon 16.08.2026, Teil 2) ---------- CJ: "die vier Kaestchen auch ein Stueck weiter nach oben, ein etwas groesseres Stueck, naeher an die Buttons - aber mit einem gewissen Abstand, damit man sieht: oben eine Sektion mit Inhalt, unten die Kaesten als eigene Sektion." Bis hierher endeten die Kaesten immer exakt an der Bildschirmunterkante - das war Bauart, nicht Absicht: Der Wellen-Uebergang beginnt direkt unter ihnen, und der muss ausserhalb des Bildes bleiben. Wer die Kaesten anheben will, braucht also echten Platz DARUNTER, der den Uebergang mitschiebt. Dieser Platz haengt als padding an der Quickbar, nicht als margin: Ein margin waere mit dem folgenden Abschnitt verschmolzen und haette gar nicht gewirkt - genau das ist frueher schon passiert und hat 16px gekostet. Der Wert steigt mit der Fensterhoehe, weil die Ohrhoehe im Foto ungefaehr konstant bleibt (gemessen 112px auf 360x700, 118px auf 430x820), die Fenster aber unterschiedlich hoch sind. Auf dem grossen Format muss deshalb mehr Luft unten entstehen, damit der Textblock oben an derselben Stelle landet. Der Wert setzt sich aus zwei Geraden zusammen, weil eine allein nicht reicht: 1. Durch die beiden Fokusformate gelegt: 49px bei 700px Fensterhoehe (klein), 130px bei 820px (gross). Steigung 0.675. Nachgemessen sitzt die gruene Zeile damit auf 116px bzw. 120px - das Ohr liegt bei 115 bzw. 120. Die Steigung ist kleiner als 1, weil der Textblock auf dem breiteren Format hoeher ist (mehr Schriftgroesse, gleiche Zeilenzahl). 2. Steigung 1 fuer alles oberhalb: Bleibt die Ohrhoehe im Foto konstant, muss die Luft im Gleichschritt mit der Fensterhoehe wachsen - sonst rutscht der Block wieder nach unten. Ohne diese zweite Gerade sass die gruene Zeile auf einem iPhone 16 Pro Max bei 157px und auf einem grossen Android bei 189px statt bei rund 115px. max() nimmt jeweils die groessere der beiden - so gilt unterhalb 820px die erste, darueber die zweite Gerade. Gedeckelt bei 210px als reine Vernunftgrenze: Auf dem hoechsten hier gepruefsten Geraet (883px) werden 193px gebraucht, der Deckel greift also bei keinem realen Handy. Er verhindert nur, dass auf ungewoehnlich hohen Fenstern beliebig viel Foto unter den Kaesten stehen bleibt. */ --kaesten-luft:min(210px, max(0px, 100svh * .675 - 423px, 100svh - 690px)); /* ---------- Kaesten auf hohen Geraeten etwas tiefer (21.08.2026, CJ) ---------- CJ zum grossen Format (430x820): "die vier Kaesten einfach ein Stueckchen weiter nach unten geschoben werden ... den Rest im Herobereich laesst du genauso". Gemessen standen unter den Kaesten 131px Luft, auf dem kleinen Format nur 50px - der Zuwachs der Fensterhoehe landete komplett unter ihnen. Warum eine EIGENE Variable und nicht einfach --kaesten-luft kleiner: --kaesten-luft steckt ueber --quickbar-hub auch im padding-bottom von .hero__inner. Haette ich sie verkleinert, waere der Textblock des Heros mitgewandert - genau das, was CJ ausgeschlossen hat. Diese Variable wirkt nur auf die Quickbar selbst: was sie oben dazugibt, nimmt sie unten weg. hub, Hero-Hoehe und Textblock bleiben damit auf den Pixel unveraendert. 0px bei 700svh (kleines Format - dort ist alles in Ordnung), 14px bei 820svh, gedeckelt bei 18px, damit auf sehr hohen Geraeten nichts kippt. */ --kaesten-tiefer:clamp(0px, (100svh - 700px) * .12, 18px); /* Ergibt sich rechnerisch zu 0, seit der hub aus Bandhoehe + Luft gebildet wird - der Hero ist damit exakt so hoch wie das Fenster. Die Formel bleibt trotzdem stehen: Wird am hub je wieder ein fester Wert gesetzt, wandert die Hero-Hoehe automatisch mit, statt still falsch zu werden. */ --hero-vorlauf:calc(var(--quickbar-hub) - var(--quickbar-hoehe) - var(--kaesten-luft)); /* Anteil des Hoehenzuwachses, der nach unten weitergegeben wird (Begruendung unten bei .hero__inner). CJ 16.08.2026 nach dem ersten Vollbild-Entwurf: "nicht so weit nach unten verschieben". Der Textblock sass bei 29-33 % der Fensterhoehe und damit deutlich tiefer als auf den Agentur-Seiten, an denen er sich orientiert - unsere eigene Nexus-Seite setzt den Inhalt bei rund 20-24 % an. Seit Teil 2 uebernimmt --kaesten-luft diese Aufgabe: Sie hebt den GESAMTEN Aufbau an, weil der Hero um denselben Betrag kuerzer wird. Ein zusaetzlicher Ausgleich wuerde nur noch den Abstand Buttons->Kaesten aufblaehen, den CJ ausdruecklich kleiner haben wollte. Er steht auf 0 und bleibt als benannte Stellschraube erhalten, falls der Textblock spaeter unabhaengig von den Kaesten wandern soll. */ --hero-ausgleich:0px; /* Abstand Buttons -> Info-Band. CJ Teil 2: deutlich kleiner als die bis zu 116px davor, aber gross genug, dass die Kaesten als eigene Sektion lesbar bleiben. 45px normal, 24px auf den flachsten Geraeten (Faktor 0.13 = 21px auf 160px Kennzahl) - dort wird der Platz fuer den Inhalt gebraucht. */ --buttons-abstand:calc(45px - var(--flach) * .13); } /* KEIN Deckel mehr. Der alte lag bei 940px und ist genau der Fehler "Deckel greift zu frueh" (E7-4, E10-1), diesmal auf dem Handy: Ab rund 979px Fensterhoehe waere der Hero stehen geblieben, waehrend der Bildschirm weiterwaechst. Unsere eigene Nexus-Seite - CJs Vorbild fuer "so sieht ein professioneller Hero aus" - macht es genauso ohne Deckel (min-height:100svh). Die Untergrenze bleibt: Auf sehr flachen Geraeten ist der INHALT hoeher als der Bildschirm, dort waechst der Hero ohnehin ueber diesen Wert hinaus. */ .hero{min-height:calc(100vh + var(--hero-vorlauf));align-items:flex-end} .hero{min-height:calc(100svh + var(--hero-vorlauf))} .hero__img{object-position:center 24%;animation-name:kenburns-m} /* padding-bottom = Versatz des Info-Bands + gewuenschter Abstand (32px) + Ausgleich. Die ersten beiden Posten sind der Grund, warum der Abstand Buttons->Info-Band auf jedem Geraet gleich bleibt; sie haengen jetzt an derselben Variablen wie die Quickbar selbst und koennen nicht mehr auseinanderlaufen. Der dritte Posten ist neu und loest ein Folgeproblem des bildschirmfuellenden Heros: Waechst der Hero mit der Fensterhoehe und haengt der Text starr am unteren Rand, dann faellt der gesamte Zuwachs oben ins Foto - die Ueberschrift rutscht auf hohen Geraeten prozentual immer weiter nach unten. Gemessen waren das 13,4 Prozentpunkte Wanderung zwischen kleinem und grossem Handy; die Hausregel erlaubt 8. Der Ausgleich gibt einen Teil des Zuwachses nach unten weiter, sodass der Textblock mitwandert statt stehenzubleiben. Nach unten laeuft der Ausgleich von selbst gegen 0 (clamp-Minimum). */ /* padding-top: 24px Luft ueber dem Header auf normalen Geraeten, auf den flachsten keine. Faktor 0.15 = 24px auf 160px Kennzahl. */ .hero__inner{padding-top:calc(var(--header-h) + 24px - var(--flach) * .15); padding-bottom:calc(var(--quickbar-hub) + var(--buttons-abstand) + var(--hero-ausgleich))} /* Eyebrow (Orte-Zeile) kleiner; Abstand darunter 14px normal, 8px flach (6/160) */ .hero .eyebrow{font-size:min(2.5vw,.72rem);letter-spacing:.01em;white-space:nowrap;margin-bottom:calc(14px - var(--flach) * .0375);text-shadow:0 1px 3px rgba(0,0,0,.7),0 2px 12px rgba(16,37,68,.6)} .hero .eyebrow::before{width:16px} /* ---------- Schriftgroessen FLIESSEND statt fest (09.08.2026) ---------- Der Fehler, den das behebt: Bei fester Schriftgroesse bleibt die Schrift gleich, waehrend die Spalte schmaler wird - der Text bricht also je nach Geraet anders um. Gemessen auf WebKit ueber 320-430px: Ueberschrift 3-4 Zeilen, Fliesstext 2-3 Zeilen, Kachel "60 Minuten pro Termin" 2-4 Zeilen. Der Kipppunkt lag zwischen 393px (iPhone 15) und 412px - also genau zwischen den Geraeten der beiden Kollegen, weshalb dieselbe Seite bei ihnen unterschiedlich aussah. Mit vw-Anteil skaliert die Schrift mit der Breite mit und der Umbruch faellt auf jedem Geraet gleich aus. Die UNTERGRENZEN sind bewusst hoch gewaehlt (Zielgruppe sind aeltere Menschen): Kacheltext nie unter 12,8px, Fliesstext nie unter 15px. Die Obergrenzen liegen ueber den alten Festwerten - grosse Handys bekommen dadurch MEHR Schrift als vorher, nicht weniger. Gegenprobe nach jeder Aenderung: Werkzeuge/umbruch-messung.py */ /* Die Schriftgroesse haengt AUSSCHLIESSLICH an der Breite - niemals an der Hoehe. Ein Zwischenstand vom 16.08.2026 hat sie auf flachen Geraeten ueber --flach etwas verkleinert, um Platz zu gewinnen. Das ist gemessen nach hinten losgegangen: Bei 430px Breite kippte der Titel zwischen 585px und 590px Fensterhoehe von drei auf vier Zeilen, und der ganze obere Block sprang um 22px. Schriftgroesse ist eine stetige Groesse, Zeilenumbruch aber nicht - eine winzige Aenderung der einen kann die andere umschlagen lassen. Genau davor warnt unsere Hausregel zum Zeilenumbruch. Platz auf flachen Geraeten wird deshalb ausschliesslich an Abstaenden und Kachelhoehen geholt, nie an der Schrift. */ .hero__title{font-size:clamp(1.5rem,7.4vw,2.1rem)} .hero__sub{font-size:clamp(.94rem,4.05vw,1.05rem); line-height:1.55;margin-top:calc(12px - var(--flach) * .025)} /* ---------- Der Hero-Aufbau auf dem Handy, als Segmente gedacht ---------- Der Inhalt ist von UNTEN verankert (.hero hat align-items:flex-end, der padding-bottom von 269px haelt den Abstand zum Info-Band). Praktische Folge, die man leicht falsch herum denkt: padding-top verschiebt hier gar nichts. Von unten nach oben gelesen liegen die Segmente so - jedes haengt am naechsten: Info-Band (4 Kaestchen) fix, Abstand 32px (269 = 237 Versatz + 32) Buttons fix, weil unten verankert Fliesstext haengt an den Buttons -> .hero__cta margin-top Ueberschrift haengt am Fliesstext -> .hero__sub margin-top Orte-Zeile haengt am Titel -> .eyebrow margin-bottom Wer also ein Segment tiefer setzen will, verkleinert den Abstand UNTER ihm. Alles darueber wandert automatisch mit, alles darunter bleibt stehen. Ramon 16.08.2026, zweite Runde: Fliesstext naeher an die Buttons (24 -> 12) und Titel naeher an den Fliesstext (18 -> 12). Der Fliesstext sitzt damit 12px tiefer, Titel und Orte-Zeile 18px. Buttons und Info-Band stehen unveraendert - der gemessene Abstand Buttons->Info-Band bleibt bei 32px. Abstaende jetzt: Orte-Zeile→Titel 14, Titel→Fliesstext 12, Fliesstext→Buttons 12. */ /* ---------- FLACHE Geraete ---------- Hier stand bis zum 16.08.2026 ein @media (max-height:660px), das den Inhalt auf flachen Geraeten zusammendrueckte. Der Zweck war richtig - auf einem iPhone SE braucht der Hero-Inhalt mehr Platz, als der Bildschirm hoch ist -, die Bauform aber falsch: Sie erzeugte den Sprung beim Scrollen, den CJs Kollege gemeldet hat (Begruendung oben bei --flach). Saemtliche Werte von dort sind jetzt stetige Rechnungen mit --flach und stehen direkt bei der jeweiligen Eigenschaft. Der Media Query ist ersatzlos entfallen. */ .hero__cta{margin-top:calc(12px - var(--flach) * .0125); gap:calc(12px - var(--flach) * .025)} .hero .btn--lg{font-size:clamp(.89rem,3.9vw,1.07rem);padding:.7rem .95rem;min-height:48px} /* Untereinander stehende Buttons müssen gleich breit sein. Von Haus aus richtet sich die Breite nach dem Text ("Termin anfragen" 201px, "Jetzt anrufen" 173px) – gestapelt liest sich dieser Versatz wie ein Fehler. Bisher loeste das volle Breite (351px bei 390px Geraet). Ramon 16.08.2026: Zwei randlose Balken legen sich wie ein Deckel ueber das Foto – die Hausbesuch-Szene, das staerkste Bild der Seite, war dahinter kaum noch zu sehen. Jetzt: beide auf DIESELBE, deutlich schmalere Breite. Gleich breit bleiben sie damit, der Grund fuer die alte Regel gilt also weiter – sie fuellen nur nicht mehr die Zeile. Die Breite ist fliessend, weil die Schrift es auch ist (clamp oben): Der laengere Text "Termin anfragen" braucht mitsamt Pfeil und Innenabstand 179px bei 320px und 202px bei 430px. Die clamp-Grenzen liegen jeweils rund 20px darueber – Puffer genug, falls die Web-Schrift etwas breiter rendert als die Ersatzschrift. Gemessen: 40 % schmaler als vorher, Hoehe unveraendert 48px (Tippziel-Minimum). Linksbuendig, damit sie mit Ueberschrift und Fliesstext auf einer Kante stehen; der Text darin bleibt mittig. */ @media (max-width:480px){ .hero__cta{flex-direction:column;align-items:flex-start} .hero__cta .btn{width:clamp(196px,54vw,222px);justify-content:center} } .hero .btn__icon{width:18px;height:18px} /* Lesbarkeit auf dem helleren Foto: Text-Schatten */ .hero__title,.hero__sub{text-shadow:0 1px 6px rgba(8,20,40,.62)} /* ---------- Abschnitts-Ueberschriften und Fliesstext fliessend (09.08.2026) ---------- Der groesste verbliebene Brocken. Die globale Regel lautet .section-title{font-size:clamp(1.95rem,4.2vw,3.05rem)} und sieht fliessend AUS - ist es auf dem Handy aber nicht: 4.2vw ergibt bei 390px nur 16px, also greift immer das Minimum von 31,2px. Effektiv ein Festwert, und damit brachen 26 Ueberschriften je nach Geraet unterschiedlich um. Auf dem Desktop ist die Regel richtig (dort traegt der vw-Anteil), deshalb wird sie hier nur fuer das Handy ersetzt statt global geaendert. Merksatz fuers naechste Projekt: Ein clamp() mit zu kleinem vw-Anteil ist KEIN fliessender Wert - es ist ein Festwert mit Tarnung. */ .section-title{font-size:clamp(1.83rem,8vw,2.2rem);line-height:1.14} .lead{font-size:clamp(1.05rem,4.59vw,1.26rem)} .eyebrow{font-size:clamp(.92rem,4.03vw,1.11rem)} /* Listen im Fliesstext (Aufzaehlungen ohne eigene Klasse) */ .prose li,.about__qual li,.feature__mark{font-size:clamp(1.06rem,4.62vw,1.27rem)} /* Info-Band: transparente Glas-Karten AUF dem Hero-Bild – das Foto scheint durch */ /* margin-bottom hält den Wellen-Übergang auf Abstand → das Band endet nicht direkt an der blauen Kante */ /* padding-bottom statt margin-bottom: Ein margin verschmilzt mit dem folgenden Abschnitt und bleibt wirkungslos (das hat hier schon einmal 16px gekostet). Dieses padding ist der Platz, der die Kaesten von der Bildschirmunterkante abhebt - siehe --kaesten-luft. */ .quickbar{background:transparent;position:relative;z-index:3; margin-top:calc(-1 * var(--quickbar-hub) + var(--kaesten-tiefer)); padding-bottom:calc(var(--kaesten-luft) - var(--kaesten-tiefer))} .quickbar__row{background:transparent;gap:10px;max-width:none;padding-inline:var(--gutter)} /* Innenabstand und Spalt fliessend (16.08.2026, gemessen) Auf sehr schmalen Geraeten (320px) blieben der Zeiten-Kachel nur 74px fuer den Text, Ramons Angabe "Mo-Fr ab 8," braucht aber 78px. Ergebnis war ein dritter Umbruch mit einem einsamen "Mo-" samt haengendem Bindestrich, waehrend alle anderen Geraete zwei Zeilen zeigten. Statt den Text zu kuerzen wird hier der Platz geschaffen: Innenabstand, Spalt und Symbolgroesse wachsen mit der Geraetebreite mit, statt fest zu sein - dieselbe Regel wie bei den Schriftgroessen. Alle drei erreichen ihren bisherigen Wert bei rund 357px, oberhalb aendert sich nichts. */ /* ---------- Innenabstand rundum gleich (21.08.2026, CJ) ---------- CJ: "bei der Rufnummer ist oben und unten der Abstand etwas anders und links zu rechts ist der Abstand etwas anders". Nachgemessen stimmte das: oben/unten 11,6px, links/rechts 15px - und weil der Inhalt breiter war als der Innenraum, blieben rechts nur 9,8px stehen, bei der Ortskachel sogar -1,7px. Der Text ragte also messbar aus seinem Kasten heraus; genau das war der sichtbare Fehler. Links/rechts benutzt jetzt DIESELBE Rechnung wie oben/unten. Das macht den Innenabstand nicht nur gleich, es gibt dem Text auch 6,8px mehr Platz - ohne die Schrift anzutasten (12,8px Untergrenze fuer Ramons Zielgruppe). Der Spalt Symbol->Text geht von 11px auf 9px, das sind noch einmal 2px. WARUM NICHT ZENTRIERT (justify-content:center), obwohl CJ "mittig" gesagt hat: gemessen. Zentriert man die Gruppe, richtet sich jede Kachel nach IHRER eigenen Textbreite - die vier Texte sind aber 73 bis 96px breit. Ergebnis war ein Symbolversatz von 11,2px zwischen Kachel 2 und 4, die Symbole standen also nicht mehr untereinander. Zusaetzlich zwingt der WhatsApp-Knopf der letzten Kachel unter 360px 34px Innenabstand rechts auf, was die Unwucht verdoppelt. Linksbuendig bleiben die Symbole auf 0,0px genau in einer Spalte. */ .quickbar__item{flex:1 1 calc(50% - 5px);justify-content:flex-start;min-height:var(--kachel-hoehe);padding:12px calc(12px - var(--flach) * .03125);gap:clamp(7px,2.5vw,9px); background:rgba(13,32,60,.38);-webkit-backdrop-filter:blur(8px) saturate(1.1);backdrop-filter:blur(8px) saturate(1.1); border:1px solid rgba(255,255,255,.18);border-radius:14px;box-shadow:0 8px 22px -12px rgba(0,0,0,.5)} /* Schriftgroesse fliessend - siehe Begruendung oben bei .hero__title. Untergrenze .8rem = 12,8px ist die von CJ freigegebene Grenze fuer die Zielgruppe. */ .quickbar__text{white-space:normal;display:block;text-wrap:balance;font-size:clamp(.8rem,3.3vw,.92rem);line-height:1.3;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.4)} /* Icon-Kästchen entfernt: nur nacktes Symbol + Text (Cyan-Akzent) */ .quickbar__icon{width:auto;height:auto;background:none;box-shadow:none;border-radius:0;color:var(--cyan)} .quickbar__icon svg{width:clamp(21px,6.9vw,26px);height:clamp(21px,6.9vw,26px)} /* ---------- FLACHE Geraete: Kacheln niedriger ---------- CJ 16.08.2026: "auf einmal ist alles extrem gross und reingezoomt". Nachgemessen: Auf einem iPhone SE nahmen die vier Kacheln 33 % der Bildschirmhoehe ein, auf einem iPhone 14 nur 24 % - dieselben Bauteile, aber 160px weniger Hoehe, in die sie hineinmussten. Die Kachelgroesse haengt naemlich an der BREITE (min-height plus vw-Schrift), und die ist auf dem SE dieselbe wie auf einem 13 mini. Auf der flachen Achse half das nichts. Diese Regeln stehen bewusst HIER und nicht oben beim uebrigen Flach-Block: Die Kachelhoehe wird ein paar Zeilen weiter oben gesetzt, und bei gleicher Spezifitaet gewinnt die spaetere Regel. Oben notiert sahen sie richtig aus, blieben aber ohne jede Wirkung - die Kacheln waren gemessen weiter 84px hoch. Die Kachel-SCHRIFT bleibt unangetastet (12,8px Untergrenze fuer Ramons Zielgruppe), ebenso die 44px-Trefferflaeche der Telefonnummer. Kleiner werden nur Kachelhoehe, Innenabstand und Symbol. */ /* Innenabstand und Symbol schrumpfen auf flachen Geraeten mit - stetig ueber --flach, nicht per Media Query (Begruendung oben bei --flach). Die Kachel-HOEHE kommt aus --kachel-hoehe, damit die Bandhoehe-Rechnung automatisch mitwandert. Faktoren: 5px Innenabstand und 3px Symbolgroesse auf 160px Kennzahl. */ .quickbar__item{padding-block:calc(12px - var(--flach) * .03125)} .quickbar__icon svg{width:calc(clamp(21px,6.9vw,26px) - var(--flach) * .019); height:calc(clamp(21px,6.9vw,26px) - var(--flach) * .019)} } /* ============================ HANDY (Runde 4): Subhead + Leistungen kompakt ============================ */ @media (max-width:639.98px){ /* Orte-Satz im Subhead ausblenden – steht schon oben in der Eyebrow (weniger gefüllt) */ .hero__sub-loc{display:none} /* Leistungs-Karten deutlich kompakter → ~4 gleichzeitig sichtbar, weniger Scrollen */ .services{gap:12px} .service{padding:15px 17px} .service__icon{width:42px;height:42px;border-radius:12px;margin-bottom:11px} .service__icon svg{width:22px;height:22px} /* Fliessend - siehe ausfuehrliche Begruendung im Block "HANDY: Detailseiten". Die Leistungs-Kacheln stehen auf Start- UND Standortseiten; ohne das brachen Titel und Beschreibung je nach Handybreite unterschiedlich um. */ .service__title{font-size:clamp(.94rem,4.1vw,1.13rem);margin-bottom:4px} .service__desc{font-size:clamp(.83rem,3.61vw,1rem);line-height:1.42} .service__badge{top:13px;right:13px;font-size:clamp(.6rem,2.62vw,.72rem);padding:4px 9px} } /* ============================ HANDY/TABLET (Runde 4): Ablauf als Swipe-Slider mit Punkten ============================ */ .flow__dots{display:none} @media (max-width:1023.98px){ /* horizontaler Swipe-Slider statt gestapelt */ .flow__track{flex-direction:row;gap:14px;max-width:none;margin:0;padding-inline:var(--gutter); overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; scroll-padding-inline:var(--gutter);scrollbar-width:none} .flow__track::-webkit-scrollbar{display:none} .flow__card{flex:0 0 82%;max-width:330px;scroll-snap-align:center} /* Positions-Punkte */ .flow__dots{display:flex;justify-content:center;align-items:center;gap:32px;margin-top:22px;padding:0} .flow__dot{position:relative;width:14px;height:14px;padding:0;border:0;border-radius:50%;background:var(--line-strong);cursor:pointer; transition:width .3s var(--ease),background .3s var(--ease),border-radius .3s var(--ease)} /* ---------- Unsichtbare, vergroesserte Trefferflaeche fuer Senioren (korrigiert 23.08.2026) ---------- Hier stand vorher "~41px" — gemeint war die HOEHE. Die BREITE war uebersehen worden: 11px Punkt + 2x8px = 27px. Gemessen wurde das erst, als bildschirm-matrix.py die Trefferflaeche ueber elementFromPoint abtastete statt ueber die sichtbare Box. 12 der 83 Befunde, und als einziger Posten auf Handy UND Tablet zugleich. Jetzt: 14px Punkt + 2x16px = 46x46px Trefferflaeche, also mit Reserve ueber 44. Der gap MUSS mitwachsen, sonst ueberlappen sich die Trefferflaechen und der Finger landet auf dem Nachbarpunkt: bei 16px Rand ringsum braucht es >=32px Abstand. Genau 32px — die Flaechen stossen aneinander, ohne sich zu ueberschneiden. Der Punkt bleibt optisch klein und rund (11 -> 14px, kaum sichtbar groesser). */ .flow__dot::before{content:"";position:absolute;top:-16px;bottom:-16px;left:-16px;right:-16px} .flow__dot[aria-selected="true"]{background:var(--cyan-deep);width:26px;border-radius:6px} .flow__dot:focus-visible{outline:3px solid var(--cyan-deep);outline-offset:3px} } /* ============================ HANDY (Runde 5): Einsatzgebiet — Kopf 2-zeilig, Orte im 3er-Raster ============================ */ /* Der erzwungene Umbruch gilt nur auf dem Handy – Desktop/Tablet brechen wie bisher natürlich um */ .area__title-br{display:none} @media (max-width:639.98px){ /* Kopf: genau 2 Zeilen ("Hausbesuche in Hockenheim," / "Schwetzingen & Heidelberg"). Größe fluid gedeckelt: min() hält die längere Zeile bei 320–639px einzeilig und ist zoom-robust. */ #einsatzgebiet .section-title{font-size:min(5.6vw,1.62rem);line-height:1.28;letter-spacing:-.01em} .area__title-br{display:inline} #einsatzgebiet .section-head{margin-bottom:20px} /* Karte ↔ Text enger zusammen (Kopf wiegt jetzt leichter) */ .area__grid{gap:22px} /* Orte: sauberes 3×3-Raster – Zeile 1 die drei Hauptorte, darunter zwei 3er-Reihen. Spalten sind so breit wie ihr Inhalt (repeat(3,auto)) statt gleich breit: sonst würde das lange "Schwetzingen" die Spaltenbreite für alle diktieren und die Schrift auf ~13px drücken. So bleibt sie bei ~15px (Senioren). Die font-size-Formel ist auf die Rasterbreite kalibriert und gedeckelt. */ .area__towns{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:9px 8px;margin-top:16px} .town{justify-content:center;text-align:center;gap:0;padding:10px 8px; font-size:min(calc(5.1vw - 5px),.95rem);line-height:1.25;min-width:0} /* Pin-Icons entfallen auf dem Handy – der Platz gehört dem Ortsnamen (Hauptorte bleiben navy = hervorgehoben) */ .town svg{display:none} .area__note{margin-top:16px;padding:13px 15px;font-size:clamp(.87rem,3.82vw,1.05rem);line-height:1.45} } /* ============================ HANDY (Runde 7): Leistungs-Karten — Symbol LINKS, Titel rechts daneben ============================ */ /* Vorher: Symbol oben, Titel darunter → hohe Karten. Jetzt: Symbol links, Titel rechts daneben, Beschreibung darunter (Media-Object) → deutlich flachere, kompaktere Karten. Nur Handy (<768px); ab Tablet/Desktop bleibt das gewohnte Karten-Raster mit Symbol oben unverändert. */ @media (max-width:767.98px){ .services{gap:12px} .service{ display:grid; grid-template-columns:auto 1fr; grid-template-areas:"icon title" "icon desc"; align-items:start; column-gap:14px; row-gap:5px; padding:16px 18px; } /* Handy: der Pfeil säße im Media-Object-Layout mitten im Text – dort ist die ganze Karte ohnehin ein großzügiges Tippziel, deshalb ausblenden. */ a.service::after{display:none} /* ACHTUNG, wichtig fuer jeden, der hier etwas aendert: Das Media-Object-Layout dieses Blocks (Symbol links, Titel rechts) ist NICHT aktiv. Die Karten sind , und a.service{display:block} weiter oben hat hoehere Spezifitaet als .service{display:grid} hier - unabhaengig von der Reihenfolge. Die Karten stehen deshalb weiterhin klassisch untereinander: Symbol oben, Titel darunter, Text darunter. Das sieht gut aus und bleibt bewusst so. Wirksam sind aus diesem Block nur die Eigenschaften, die auch ohne Grid greifen - Groessen, Rundungen und eben margin. Genau daher kam Ramons Beobachtung vom 16.08.2026 ("die Symbole sitzen zu nah an der Ueberschrift"): Das margin:0 war fuer das Grid gedacht, wo der Abstand ueber row-gap kaeme. Ohne Grid loeschte es schlicht den Abstand der Grundregel (20px), und Symbol und Titel stiessen mit 0px aneinander. Deshalb steht hier jetzt ein echter Abstand statt einer Null. */ .service__icon{grid-area:icon; width:46px; height:46px; border-radius:13px; margin:0 0 13px; align-self:start} .service__icon svg{width:24px; height:24px} /* Fliessend. ACHTUNG: Dieser Block steht NACH dem Block weiter oben und sticht dessen Werte aus - beide muessen zusammen geaendert werden, sonst wirkt die Aenderung dort nicht (genau das ist am 09.08.2026 einmal passiert). */ .service__title{grid-area:title; margin:0; font-size:clamp(.99rem,4.31vw,1.19rem); line-height:1.25; align-self:center} .service__desc{grid-area:desc; margin:0; min-height:0; font-size:clamp(.85rem,3.69vw,1.02rem); line-height:1.45} /* Die „Schwerpunkt"-Badges an Krankengymnastik und Lymphdrainage sind in Etappe 2 entfallen (Entscheidung K6 – Ramons Schwerpunkt ist durchgängig die Geriatrie). Damit entfällt auch der Extra-Platz, den das Badge unten rechts gebraucht hat: die Karten sind jetzt flacher. .service--highlight / .service__badge bleiben oben im Stylesheet definiert, werden aber aktuell von keiner Karte verwendet. */ } /* ============================ HANDY (Runde 6): Footer kompakter — 2 Spalten + Kontakt volle Breite ============================ */ /* Bisher standen Brand, Navigation, Rechtliches, Kontakt alle untereinander → sehr hoher Footer. Jetzt: Brand oben voll, darunter Navigation | Rechtliches nebeneinander (symmetrischer Start), Kontakt in voller Breite darunter (lange E-Mail/Adresse bricht so nicht mitten im Wort). */ @media (max-width:767.98px){ .footer__grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 20px} .footer__brand{grid-column:1/-1} .footer__col:last-child{grid-column:1/-1} /* Kontakt (letzter Block) volle Breite */ } /* Sehr schmale Geräte: "Datenschutzerklärung" ist ein langes Einzelwort → Rechtliches etwas mehr Platz geben */ @media (max-width:400px){ .footer__grid{grid-template-columns:1fr 1.12fr;gap:24px 16px} } /* ============================ HANDY (Runde 6): Geriatrie-Eyebrow sauber 2-zeilig ============================ */ /* Desktop/Tablet: einzeilig "Mein Schwerpunkt · Geriatrie" (unverändert, Umbruch aus, Trenner sichtbar) */ .eyebrow--geri .eyebrow__br{display:none} @media (max-width:639.98px){ /* Handy: Strich auf Höhe der ERSTEN Zeile, "Geriatrie" sauber darunter (ohne Mittelpunkt) */ .eyebrow--geri{align-items:flex-start} .eyebrow--geri::before{margin-top:11px} /* zentriert den 3px-Strich optisch auf "Mein Schwerpunkt" */ .eyebrow--geri .eyebrow__sep{display:none} .eyebrow--geri .eyebrow__br{display:inline} } /* ============================ WHATSAPP FLOATING-BUTTON ============================ */ /* Bewusst klein (54px), bleibt aber über dem 44px-Tippziel für Senioren. z-index 95: über dem Inhalt, aber UNTER Mobil-Nav-Overlay (99) und Header (100), damit er das geöffnete Menü nicht überlagert. Original-WhatsApp-Grün #25D366. */ .wa-float{ position:fixed;right:18px;bottom:18px;z-index:95; width:54px;height:54px;border-radius:var(--radius-pill); background:#25D366;color:#fff; display:flex;align-items:center;justify-content:center; box-shadow:0 10px 26px -8px rgba(37,211,102,.6); transition:transform .25s var(--ease),box-shadow .25s var(--ease) } .wa-float svg{width:29px;height:29px} .wa-float:hover{transform:scale(1.07);box-shadow:0 14px 32px -8px rgba(37,211,102,.75)} .wa-float:focus-visible{outline:3px solid var(--navy);outline-offset:3px} /* Schmale Geräte (iPhone SE & Co.): Der Knopf überdeckte den Text der Kachel „60 Minuten pro Termin“. 48px statt 54px und enger in die Ecke – bleibt über der 44px-Hausregel (WCAG-Minimum ist 24px), gibt aber Platz zurück. Das Verkleinern allein reichte nicht: gemessen überlappte der Knopf den Text bei 320 und 375px weiterhin. Deshalb bekommt zusätzlich die Kachel unten rechts so viel Innenabstand, dass ihr Text vor dem Knopf endet. Ein fixierter Knopf lässt sich nicht "wegschieben" – man muss ihm Platz freihalten. */ @media (max-width:400px){ .wa-float{width:48px;height:48px;right:12px;bottom:12px} .wa-float svg{width:26px;height:26px} .quickbar__item:last-child{padding-right:58px} } /* Sehr schmal (≤360px): Hier ist die Kachel nur noch ~135px breit. Nach Symbol, Abstand und Innenrand blieben für den Text 21px – „60 Minuten pro Termin“ passt dort neben dem Knopf physikalisch nicht mehr. Mehr Innenabstand hilft deshalb NICHT (gemessen), er würde den Text nur aus seinem Kasten drücken. Also: Knopf so klein wie die Hausregel erlaubt und eng in die Ecke. Eine Restüberdeckung von wenigen Pixeln bleibt und ist hier bewusst akzeptiert – 320px entspricht dem iPhone 5/SE der ersten Generation. */ @media (max-width:360px){ .wa-float{width:44px;height:44px;right:8px;bottom:8px} .wa-float svg{width:24px;height:24px} .quickbar__item:last-child{padding-right:34px} } /* ================================================================================ ETAPPE 2 — RAMONS ÄNDERUNGEN VOM 26.07.2026 Neue Bausteine: Vertrauensband, Leitsatz, Geriatrie-Zitat + Merkmale, Ablauf-Icons + Zitat, FAQ-Abschluss, Patientenstatus-Auswahl, Erfolgsmeldung. ================================================================================ */ /* ---------- Vertrauensband unter dem Hero (Ramon Bereich 1, Punkte 4 + 5) ---------- Entscheidung K1: eigenes Band UNTER dem Hero statt Häkchen IM Hero – damit bleibt der Hero-Feinschliff aus dem Juli (Content-Position +74, Abstände 14/34/24) unangetastet. WICHTIG – das Band steht bewusst NACH dem Wellen-Übergang, nicht direkt hinter der Quickbar: Die Quickbar ist auf dem Handy per margin-top:-237px auf das Hero-Foto hochgezogen. Alles, was unmittelbar folgt, liegt geometrisch noch im Hero und wird ohne z-index vom Foto überlagert – der Emotionssatz war dadurch unsichtbar. Auf hellem Grund ist der Text für Senioren zusätzlich besser lesbar als heller Text auf Navy. Nicht zurückverschieben. */ .trust{background:var(--white);padding:clamp(26px,3.4vw,40px) 0 clamp(4px,1vw,10px)} .trust__claim{ font-family:var(--font-head);font-weight:700;text-align:center;color:var(--navy); font-size:clamp(1.2rem,2.6vw,1.62rem);line-height:1.3;letter-spacing:-.015em;margin:0 } .trust__list{margin-top:clamp(22px,2.8vw,32px);display:grid;gap:13px} .trust__item{display:flex;gap:12px;align-items:center;font-size:1.02rem;color:var(--ink-soft);line-height:1.4} .trust__check{ display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%; background:rgba(128,197,63,.18);color:var(--lime-deep) } .trust__check svg{width:16px;height:16px} @media (min-width:640px){.trust__list{grid-template-columns:1fr 1fr;gap:15px 28px}} @media (min-width:1100px){.trust__list{grid-template-columns:repeat(4,1fr);gap:22px}} /* ---------- Hero-Eyebrow: "& Umgebung" nur ab Tablet (Ramon Bereich 1, Punkt 3) ---------- Ramons Ergänzung macht den Eyebrow auf dem Handy zweizeilig (25px statt 16px). Das schiebt das gesamte Content-Paket 16px nach unten und drückt den Abstand Buttons->Infoband von den freigegebenen 48px auf 32px – also genau den Wert, den CJ im Juli über mehrere Runden und ein Juror-Panel festgelegt hat. Deshalb auf dem Handy ausgeblendet; die Information steht dort ohnehin direkt darunter im Infoband ("ca. 25 km rund um Hockenheim"). Gleiches Muster wie .hero__sub-loc. NICHT einblenden, ohne den Hero neu zu vermessen. */ @media (max-width:639.98px){.eyebrow__plus{display:none}} /* ---------- Persönlicher Leitsatz in „Über mich" (Ramon Bereich 2, Punkt 4) ---------- Limetten-Strich als Abgrenzung zum Cyan-Zitat direkt darüber. */ .about__creed{ margin-top:18px;padding-left:20px;border-left:3px solid var(--lime); font-family:var(--font-head);font-weight:600;color:var(--navy); font-size:clamp(1.02rem,1.5vw,1.14rem);line-height:1.5 } /* ---------- CTA am Ende von „Über mich" (Ramon Bereich 2, Punkt 5) ---------- */ .about__cta{margin-top:clamp(30px,3.6vw,42px);display:flex;justify-content:center} /* ---------- Geriatrie: Philosophie-Zitat + 3 Merkmale (Ramon Bereich 4, Punkte 2 + 5) ---------- */ .feature__quote{ margin:26px 0 0;padding-left:20px;border-left:3px solid var(--lime); font-family:var(--font-head);font-weight:500;color:#fff; font-size:clamp(1.04rem,1.6vw,1.18rem);line-height:1.5 } .feature__cta{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px} /* flex:1 1 auto — damit die beiden Knöpfe, wenn sie in der schmalen rechten Spalte untereinander rutschen (gemessen ab ~1280px Fensterbreite), jeder seine Zeile ausfüllen statt ihre Textbreite zu behalten. Vorher: 324px gegen 216px direkt untereinander — 108px ausgefranste Kante. Nebeneinander teilen sie sich die Zeile. */ .feature__cta .btn{flex:1 1 auto} @media (max-width:639.98px){.feature__cta .btn{width:100%;justify-content:center}} .feature__marks{ position:relative;z-index:1;display:grid;gap:14px; margin-top:clamp(30px,4vw,46px);padding-top:clamp(22px,3vw,30px); border-top:1px solid rgba(255,255,255,.15) } .feature__mark{display:flex;gap:12px;align-items:center;font-size:1.02rem;color:var(--on-navy)} @media (min-width:768px){.feature__marks{grid-template-columns:repeat(3,1fr);gap:22px}} /* ---------- Ablauf: Icon je Schritt + Philosophie-Zitat (Ramon Bereich 5, Punkte 7 + 8) ---------- Die Nummer bleibt erhalten (Ramon wollte Icons ERGÄNZEN, nicht ersetzen): Zahl links, Symbol rechts auf gleicher Höhe. */ .flow__head{display:flex;align-items:center;gap:12px} .flow__icon{ display:grid;place-items:center;width:38px;height:38px;flex:none;margin-left:auto; border-radius:12px;color:var(--cyan-deep); background:linear-gradient(150deg,rgba(70,178,208,.20),rgba(128,197,63,.13)) } .flow__icon svg{width:21px;height:21px} .flow__quote{ margin:clamp(26px,3.4vw,40px) auto 0;max-width:760px;text-align:center; font-family:var(--font-head);font-weight:500;color:var(--navy); font-size:clamp(1.04rem,1.8vw,1.24rem);line-height:1.5; padding-top:clamp(20px,2.6vw,28px);border-top:1px solid var(--line) } .flow--pinned .flow__icon{width:42px;height:42px} .flow--pinned .flow__icon svg{width:23px;height:23px} /* ---------- Einsatzgebiet: CTA (Ramon Bereich 6, Punkt 5) ---------- */ .area__cta{margin-top:clamp(22px,2.8vw,32px)} /* ---------- FAQ-Abschluss mit Telefon-Button (Ramon Bereich 8, Punkt 8) ---------- */ .faq__outro{ max-width:820px;margin:clamp(26px,3.4vw,38px) auto 0;text-align:center; background:#fff;border:1px solid var(--line);border-left:4px solid var(--cyan-deep); border-radius:var(--radius);padding:clamp(24px,3vw,34px);box-shadow:var(--shadow-sm) } .faq__outro-title{font-size:clamp(1.15rem,2vw,1.35rem);color:var(--navy);margin:0 0 10px} .faq__outro-text{color:var(--ink-soft);margin:0 0 22px} /* ---------- Formular: Patientenstatus (Ramon Bereich 9, Punkt 5) ---------- Sichtbare Radios statt reiner Chips: für Senioren eindeutiger erkennbar. Jede Fläche ist mindestens 48px hoch und damit ein sicheres Tippziel. */ .field--choice{border:0;padding:0;margin:0} .field--choice legend{ display:block;font-family:var(--font-head);font-weight:600;font-size:.96rem; color:var(--ink);margin-bottom:8px;padding:0 } .choice__row{display:flex;flex-wrap:wrap;gap:10px} /* Selektoren bewusst mit .field--choice davor: '.field label' (oben im Stylesheet) setzt display:block und '.field input' width:100% - beides ist spezifischer als ein einzelnes .choice und würde die Chips sonst zerlegen. */ .field--choice .choice{ display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:8px 16px;margin:0; background:#fff;border:1.5px solid var(--line);border-radius:var(--radius-pill); font-family:var(--font-body);font-weight:400;font-size:1rem;color:var(--ink-soft);cursor:pointer; transition:border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease) } .field--choice .choice input{ width:20px;height:20px;min-height:0;flex:none;padding:0;margin:0; accent-color:var(--cyan-deep);cursor:pointer;box-shadow:none;border-radius:50% } .field--choice .choice:hover{border-color:var(--cyan-deep)} .field--choice .choice:has(input:checked){border-color:var(--cyan-deep);background:rgba(70,178,208,.10);color:var(--navy);font-weight:600} .field--choice .choice:has(input:focus-visible){outline:3px solid var(--cyan-deep);outline-offset:2px} /* ---------- Formular: Bestätigung nach dem Absenden (Ramon Bereich 9, Punkt 10) ---------- Ersetzt das Formular, damit sofort erkennbar ist, dass die Anfrage raus ist. */ .form__success{ background:#fff;border:1px solid var(--line);border-left:4px solid var(--lime); border-radius:var(--radius-lg);padding:clamp(28px,4vw,42px);text-align:center;box-shadow:var(--shadow) } .form__success-icon{ display:grid;place-items:center;width:64px;height:64px;margin:0 auto 18px; border-radius:50%;background:rgba(128,197,63,.20);color:var(--lime-deep) } .form__success-icon svg{width:34px;height:34px} .form__success-title{font-size:clamp(1.22rem,2.2vw,1.48rem);color:var(--navy);margin:0 0 10px} .form__success-text{color:var(--ink-soft);margin:0} .form__success-sign{margin:14px 0 0;font-family:var(--font-head);font-weight:600;color:var(--navy)} /* ---------- HANDY: Einsatzgebiet auf 14 Orte umgestellt (Entscheidung K4) ---------- Bisher 3×3-Raster = genau 9 Plätze. Bei 14 Orten und drei Spalten müsste die Schrift auf ~12px fallen, damit „Schwetzingen" und „Neulußheim" nebeneinander passen – das verletzt die Senioren-Lesbarkeit. Zwei gleich breite Spalten halten ~15px und sind gleichzeitig sichere Tippziele für die späteren Standortseiten-Links. */ @media (max-width:639.98px){ .area__towns{grid-template-columns:1fr 1fr;gap:8px} .town{min-height:44px;padding:10px 12px;font-size:.95rem} } /* ---------- HANDY: Telefonnummer im Kontaktbereich größer (Ramon Bereich 9, Punkt 7) ---------- */ @media (max-width:767.98px){ .contact__call{width:100%;justify-content:center;padding:15px 20px} .contact__call span{font-size:clamp(1.3rem,5.4vw,1.62rem)} .contact__call svg{width:26px;height:26px} } /* ---------- HANDY: Feinheiten der neuen Blöcke ---------- */ @media (max-width:639.98px){ .trust{padding:24px 0 4px} /* Fliessend wie die Detailseiten-Titel weiter unten - dieselbe Rechnung: vw-Wert trifft bei 390px den alten Festwert, Untergrenze 6 % darunter, Obergrenze darueber. Sorgt dafuer, dass diese kurzen Saetze auf jedem Handy mit derselben Zeilenzahl umbrechen. */ .trust__claim{font-size:clamp(1.15rem,5vw,1.38rem)} /* rechts etwas Luft lassen: der WhatsApp-Button sitzt fix unten rechts und würde sonst das Ende der längsten Zeile überdecken */ .trust__item{font-size:clamp(.91rem,3.98vw,1.1rem);padding-right:8px} .about__creed{font-size:clamp(.94rem,4.1vw,1.13rem);padding-left:16px} .feature__quote{font-size:clamp(.96rem,4.18vw,1.15rem);padding-left:16px} .flow__quote{font-size:clamp(.96rem,4.18vw,1.15rem);text-align:left} .faq__outro{text-align:left;padding:5.13vw 4.62vw} .faq__outro .btn{width:100%} .field--choice .choice{width:100%;justify-content:flex-start} /* ---------- Die letzten Festwerte (09.08.2026) ---------- Nach allen Schriftkorrekturen brachen noch 12 kurze Texte je nach Geraet unterschiedlich um. Gemessen lagen ZWEI verschiedene Ursachen vor: a) Schrift skalierte gar nicht mit. Betroffen: .feature__list li (16,8px), .faq__outro-title (18,4px), .toc__list (18px). Bei den beiden letzten stand zwar ein clamp() da - aber mit so kleinem vw-Anteil, dass auf dem Handy immer das Minimum griff. Ein getarnter Festwert. b) Der KASTEN um den Text hatte festes Innenmass. .glance hat padding:clamp(22px,3vw,34px) - auf dem Handy immer 22px. Dadurch waechst die nutzbare Textbreite anders als die Schrift (Anteil 0,792 -> 0,807), und knappe Zeilen kippen genau dazwischen. Merksatz: Fliessende Schrift allein genuegt nicht. Der Kasten, in dem der Text steht, muss genauso fliessen - sonst rechnet man gegen sich selbst. */ .feature__list li{font-size:clamp(.99rem,4.31vw,1.19rem)} .faq__outro-title{font-size:clamp(1.08rem,4.72vw,1.3rem)} .toc__list a{font-size:clamp(1.06rem,4.62vw,1.27rem)} /* .glance wird weiter unten im Detailseiten-Block gesetzt - dort steht das fliessende Innenmass, damit es nicht von der spaeteren Regel ausgestochen wird. */ } /* ---------- HANDY: Öffnungszeiten einzeilig halten (Ramon Bereich 9, Punkt 3) ---------- Mit den neuen Zeiten braucht "Montag – Freitag" + "08:00 – 18:00 Uhr" 294px, im Navy-Kasten stehen bei 390px aber nur 266px zur Verfügung -> die erste Zeile brach um, während Samstag und Sonntag einzeilig blieben. Das sah wie ein Fehler aus. Lösung: auf dem Handy die TAGE abkürzen (Mo – Fr / Sa / So), die Uhrzeiten bleiben exakt so, wie Ramon sie vorgegeben hat. Schrift bleibt bei 18px - für Senioren wichtiger als Kompaktheit. Der flex-wrap-Zoomfix von früher bleibt aktiv: bei 150% Textzoom darf weiterhin umbrechen. */ .hours__kurz{display:none} @media (max-width:639.98px){ .hours__lang{display:none} .hours__kurz{display:inline} .contact__hours div{gap:10px} } /* ---------- Nachrichtenfeld höher (Ramon Bereich 9, Punkt 6) ---------- Der neue Platzhaltertext ist deutlich länger als der alte und wurde im 44px hohen Feld abgeschnitten. Höhe so gewählt, dass er vollständig sichtbar ist - er erklärt dem Besucher, was hier hineingehört. Manuelles Vergrößern (resize:vertical) bleibt erhalten. */ .field textarea{min-height:112px} @media (max-width:639.98px){.field textarea{min-height:124px}} /* ================================================================================ ETAPPE 3 — DETAILSEITEN (Geriatrie-Schwerpunkt, ab Etappe 4 auch Leistungsseiten) Eigene Bausteine, damit alle Unterseiten identisch aufgebaut sind: Seiten-Hero, „Auf einen Blick“, Textabschnitte, Häkchenlisten, Krankheitsbild-Karten, Querverweise, Leistungs-Kacheln, Abschluss-CTA. ================================================================================ */ /* ---------- Brotkrumen ---------- */ .crumbs{ position:relative;z-index:2;display:flex;align-items:center;gap:8px;flex-wrap:wrap; padding-top:clamp(14px,2vw,20px);font-size:.88rem;color:var(--on-navy-mute) } /* „Startseite" bewusst kräftiger als der Rest der Brotkrume (Etappe 6, Nachtrag C): Sie ist der Rückweg, nicht nur eine Ortsangabe. Unterstrichen, damit sie auch für ältere Augen sofort als Link erkennbar ist - Farbe allein reicht dafür nicht. */ .crumbs a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px; text-decoration-thickness:1px;text-decoration-color:rgba(255,255,255,.45);padding-block:6px} .crumbs a:hover,.crumbs a:focus-visible{text-decoration-color:#fff} .crumbs [aria-current]{color:var(--on-navy-mute);font-weight:400} /* ---------- Rückweg am Seitenende (Etappe 6, Nachtrag C/D) ---------- Bewusst GROSS: Auf den Leistungs- und der Geriatrie-Seite ist das nach dem CTA-Band das einzige verbleibende Element. Es ersetzt die früheren acht Leistungs-Kacheln, die den Leser seitwärts in die nächste Detailseite geschickt haben statt zurück. */ .zurueck-band{background:var(--paper);padding-block:clamp(34px,5vw,58px);text-align:center} .zurueck{ display:inline-flex;align-items:center;justify-content:center;gap:12px; min-height:62px;padding:17px 36px;max-width:100%; background:#fff;border:2px solid var(--navy);border-radius:var(--radius-pill); color:var(--navy);font-family:var(--font-head);font-size:clamp(1rem,2.6vw,1.12rem); font-weight:700;line-height:1.25;text-decoration:none;box-shadow:var(--shadow-sm); transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease) } .zurueck:hover,.zurueck:focus-visible{background:var(--navy);color:#fff;transform:translateY(-2px)} .zurueck svg{width:22px;height:22px;flex:none} /* Handy: volle Breite = grosszügiges Tippziel, kein Zielen nötig */ @media (max-width:639.98px){.zurueck{width:100%;padding-inline:20px}} /* ---------- Seiten-Hero der Detailseiten ---------- Bewusst flacher als der Startseiten-Hero: die Detailseiten sind Lesestrecken, der Text soll früh beginnen. Overlay dunkler als auf der Startseite, weil hier mehr Text darauf steht. */ /* padding-top MUSS die Header-Höhe ausgleichen: der Header ist position:fixed und lag sonst genau über der Brotkrume (die war dadurch komplett unsichtbar). Gleiches Prinzip wie beim Startseiten-Hero. --header-h kaskadiert: 52px mobil, 56px ab 1024px. */ .dhero{position:relative;isolation:isolate;padding-top:var(--header-h);background:var(--navy-deep);color:var(--on-navy);overflow:hidden} .dhero__media{position:absolute;inset:0;z-index:-2} .dhero__img{width:100%;height:100%;object-fit:cover;object-position:50% 42%} .dhero__overlay{ position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(16,37,68,.90) 0%,rgba(16,37,68,.82) 42%,rgba(16,37,68,.88) 100%) } .dhero__inner{max-width:840px;padding-block:clamp(26px,4vw,52px) clamp(30px,4.4vw,58px)} .dhero__title{ font-size:clamp(1.62rem,3.6vw,2.85rem);line-height:1.16;letter-spacing:-.02em; color:#fff;margin:10px 0 0;text-wrap:balance } .dhero__sub{ margin-top:clamp(14px,1.8vw,20px);font-size:clamp(1.02rem,1.7vw,1.22rem); line-height:1.55;color:var(--on-navy);max-width:66ch } .dhero__cta{margin-top:clamp(22px,2.8vw,32px);display:flex;flex-wrap:wrap;gap:12px} /* Grosse Bildschirme: Schrift und Spalte muessen mitwachsen. Die Proportionspruefung meldete auf allen 26 Detailseiten "Ueberschrift waechst nicht mit: 46px bei 1280px Breite, 46px bei 1920px" - das clamp-Maximum 2.85rem war schon bei ~1270px erreicht. Auf dem 16"-MacBook war die Ueberschrift damit exakt so gross wie auf einem 13-Zoll-Notebook, und die Spalte blieb bei 840px in einem 1160px-Container. Die HOEHE bleibt bewusst unangetastet: Die Detailseiten sind Lesestrecken, ihr Hero soll flach bleiben und der Text frueh beginnen (siehe Kommentar oben). Erst ab 1400px, damit kleinere Notebooks exakt so bleiben, wie sie sind. */ /* ---------- Detailseiten: dieselbe 640er-Naht wie bei .hero__title (23.08.2026) ---------- Bei 639px war die H1 der Detailseiten 28,6px gross und EINZEILIG (der Ortszusatz ist auf dem Handy ausgeblendet, E12-1). Bei 640px fiel sie auf 25,9px UND bekam den Ortszusatz dazu — also kleiner und laenger zugleich. Diese Kurve ist an beiden Raendern stetig gerechnet: bei 640px trifft sie 28,6px — dort hoert die Handy-Regel auf bei 1280px trifft sie 45,6px — dort steht die Desktop-Regel heute Nachgemessen auf allen vier bindenden Tablet-Formaten: durchgehend 2 Zeilen, Hero-Hoehe waechst um 6-10px (Detailseiten sind Lesestrecken, ihr Hero bleibt flach). BEKANNTE AUSNAHME: Die Geriatrie-Seite hat den laengsten Titel und braucht damit zwischen 640 und 767px eine dritte Zeile (ab 768px wieder zwei). Bewusst NICHT ueber .dhero--geri ausgenommen: eine Sonderregel dort erzeugte bei 768px einen NEUEN Sprung von 4,4px — genau das, was diese Kurve beseitigen soll. 640-767px ist ausserdem kein Geraeteformat: iPads beginnen hoch bei 768px, iPhones quer bei 844px. Dort landet nur ein von Hand verkleinertes Desktop-Fenster. */ @media (min-width:640px) and (max-width:1279.98px){ .dhero__title{font-size:clamp(1.79rem,calc(2.656vw + 11.6px),2.85rem)} } @media (min-width:1400px){ .dhero__inner{max-width:1040px} .dhero__title{font-size:clamp(2.85rem,3vw,3.9rem)} .dhero__sub{font-size:clamp(1.22rem,1.15vw,1.42rem)} } .eyebrow--fokus{color:var(--lime)} /* ---------- „Auf einen Blick“-Infokasten ---------- Überlappt den Hero leicht nach oben – signalisiert: das Wichtigste zuerst. */ .glance-wrap{background:var(--white);padding-bottom:clamp(6px,1.4vw,14px)} .glance{ margin-top:clamp(-34px,-3vw,-22px);position:relative;z-index:2; background:#fff;border:1px solid var(--line);border-left:4px solid var(--lime); border-radius:var(--radius-lg);padding:clamp(22px,3vw,34px);box-shadow:var(--shadow-lg) } .glance__title{font-size:clamp(1.12rem,1.9vw,1.32rem);color:var(--navy);margin:0 0 18px} .glance__list{display:grid;gap:12px} .glance__list li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-soft);font-size:1rem;line-height:1.45} @media (min-width:768px){.glance__list{grid-template-columns:1fr 1fr;gap:14px 30px}} /* ---------- Inhaltsverzeichnis (Etappe 6, nur Geriatrie-Seite) ---------- Diese Seite ist auf dem Handy über 24.000px lang – ohne Sprungmarken muss man sehr weit scrollen. Bewusst ruhiger gestaltet als der „Auf einen Blick“-Kasten, damit dieser der Blickfang bleibt: heller Grund, kein Schatten, keine Randfarbe. Jeder Eintrag ist ein 44px-Tippziel (Senioren-Regel). */ .toc-wrap{background:var(--white);padding-block:clamp(20px,3vw,32px)} .toc{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(18px,2.4vw,26px)} .toc__title{font-family:var(--font-head);font-size:clamp(1.05rem,1.7vw,1.2rem);color:var(--navy);margin:0 0 6px} .toc__hint{color:var(--ink-mute);font-size:.92rem;margin:0 0 12px} /* Trennlinien: Ohne sie laufen die zweizeiligen Eintraege optisch ineinander – bei 44px Zeilenhoehe und zwei Textzeilen bleibt sonst kein sichtbarer Abstand. */ .toc__list{list-style:none;margin:0;padding:0;display:grid} .toc__list li + li{border-top:1px solid var(--line)} .toc__list a{display:flex;align-items:center;gap:12px;min-height:44px;padding-block:7px; color:var(--navy);text-decoration:none;font-weight:600;line-height:1.35} .toc__nr{flex:0 0 26px;height:26px;display:grid;place-items:center;border-radius:50%; background:var(--navy);color:#fff;font-size:.78rem;font-weight:700;font-family:var(--font-head)} .toc__list a:hover .toc__text{text-decoration:underline} .toc__list a:hover .toc__nr{background:var(--cyan-deep)} /* Ab Tablet zweispaltig – sonst wird die Liste unnötig hoch */ @media (min-width:768px){.toc__list{grid-template-columns:1fr 1fr;column-gap:34px}} /* ---------- Textabschnitte ---------- max-width für die Zeilenlänge: bei Fließtext über ~72 Zeichen sinkt die Lesbarkeit deutlich – auf einer so langen Seite besonders relevant. */ .prose-section .container{max-width:960px} .prose{max-width:72ch} .prose p{color:var(--ink-soft);font-size:clamp(1rem,1.2vw,1.06rem);line-height:1.72;margin:0 0 16px} .prose p:last-child{margin-bottom:0} .prose .section-title{margin-bottom:20px} .prose--light p{color:var(--on-navy)} .prose--light .section-title{color:#fff} /* ---------- Begleitbild innerhalb eines Textabschnitts ---------- Lockert die langen Lesestrecken auf (Ramons Wunsch nach Bildern im oberen Seitenbereich). */ .dfigure{margin:0 0 clamp(22px,2.6vw,30px);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)} .dfigure img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover} .dfigure figcaption{padding:12px 16px;font-size:.88rem;color:var(--ink-mute);background:#fff} .prose--light .dfigure figcaption,.section--navy .dfigure figcaption{background:rgba(255,255,255,.08);color:var(--on-navy-mute)} /* ---------- Häkchenlisten ---------- */ .ticks{display:grid;gap:12px;margin:22px 0 0;max-width:72ch} .ticks li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-soft);font-size:1rem;line-height:1.5} .ticks--light li{color:var(--on-navy)} .ticks + .prose,.ticks + .prose--light{margin-top:26px} @media (min-width:768px){ .ticks--zwei{grid-template-columns:1fr 1fr;gap:13px 30px;max-width:none} } /* ---------- Krankheitsbild-Karten ---------- */ .cases{display:grid;grid-template-columns:1fr;gap:16px;margin-top:clamp(24px,3vw,36px)} .case{ background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:clamp(20px,2.6vw,28px);box-shadow:var(--shadow-sm); transition:transform .3s var(--ease),box-shadow .3s var(--ease) } .case:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .case__icon{ display:grid;place-items:center;width:52px;height:52px;border-radius:15px;margin-bottom:16px; color:var(--navy);background:linear-gradient(150deg,rgba(70,178,208,.20),rgba(128,197,63,.14)); box-shadow:inset 0 1px 0 rgba(255,255,255,.7) } .case__icon svg{width:27px;height:27px} .case__title{font-size:1.14rem;color:var(--navy);margin:0 0 10px} .case p{color:var(--ink-mute);font-size:.97rem;line-height:1.62;margin:0 0 12px} .case p:last-child{margin-bottom:0} @media (min-width:768px){.cases{grid-template-columns:1fr 1fr;gap:18px}} @media (min-width:1200px){.cases{grid-template-columns:repeat(3,1fr)}} /* ---------- Querverweise auf verwandte Leistungen ---------- */ .related{ margin-top:clamp(30px,3.6vw,44px);background:#fff;border:1px solid var(--line); border-left:4px solid var(--cyan-deep);border-radius:var(--radius); padding:clamp(20px,2.6vw,28px);box-shadow:var(--shadow-sm) } .related__title{font-size:1.1rem;color:var(--navy);margin:0 0 8px} .related__text{color:var(--ink-mute);font-size:.97rem;margin:0 0 16px} .related__row{display:flex;flex-wrap:wrap;gap:10px} .related__link{ display:inline-flex;align-items:center;min-height:44px;padding:10px 18px; background:var(--mist);border:1px solid var(--line);border-radius:var(--radius-pill); color:var(--navy);font-family:var(--font-head);font-weight:500;font-size:.97rem;text-decoration:none; transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease) } .related__link:hover,.related__link:focus-visible{background:var(--navy);border-color:var(--navy);color:#fff;transform:translateY(-2px)} /* ---------- Leistungs-Kacheln ---------- */ .tiles{display:grid;grid-template-columns:1fr;gap:12px;margin-top:clamp(24px,3vw,34px)} .tile{ display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:56px; padding:14px 20px;background:#fff;border:1px solid var(--line);border-radius:var(--radius); color:var(--navy);text-decoration:none;box-shadow:var(--shadow-sm); transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease) } .tile__text{font-family:var(--font-head);font-weight:600;font-size:1.04rem} .tile__arrow{width:20px;height:20px;flex:none;color:var(--cyan-deep);transition:transform .25s var(--ease)} .tile:hover,.tile:focus-visible{transform:translateY(-3px);box-shadow:var(--shadow);border-color:transparent} .tile:hover .tile__arrow{transform:translateX(4px)} @media (min-width:640px){.tiles{grid-template-columns:1fr 1fr;gap:14px}} @media (min-width:1024px){.tiles{grid-template-columns:repeat(4,1fr)}} /* ---------- Hervorgehobene Kachel (Schwerpunkt auf den Standortseiten) ---------- */ .tile--fokus{ background:linear-gradient(135deg,var(--navy),var(--navy-deep));border-color:transparent;color:#fff } .tile--fokus .tile__arrow{color:var(--lime)} .tile--fokus:hover,.tile--fokus:focus-visible{background:linear-gradient(135deg,var(--navy-deep),var(--navy-900))} /* ---------- Zwischenüberschrift innerhalb eines Textabschnitts ---------- */ .prose__zwischen{ font-size:clamp(1.08rem,1.7vw,1.25rem);color:var(--navy);margin:26px 0 0 } /* ---------- Seiten-Hero der Standort- und Karriereseite ---------- Beide haben weniger Text als die Leistungsseiten – etwas kompakter, damit der Inhalt nicht unnötig weit nach unten rutscht. */ .dhero--ort .dhero__inner, .dhero--karriere .dhero__inner{padding-block:clamp(22px,3.4vw,44px) clamp(26px,3.8vw,50px)} /* Ramons Portrait ist im Querformat, der Kopf sitzt im oberen Bilddrittel. Bei mittiger Ausrichtung schnitt der Hero die Stirn an – deshalb den Ausschnitt nach oben verschoben. */ .dhero--karriere .dhero__img{object-position:100% 22%} /* ---------- Abschluss-CTA ---------- */ .cta-band{text-align:center} .cta-band .section-title{color:#fff} .cta-band__frage{ max-width:64ch;margin:16px auto 0;font-family:var(--font-head);font-weight:600; font-size:clamp(1.06rem,1.9vw,1.26rem);line-height:1.45;color:#fff } .cta-band__text{max-width:70ch;margin:16px auto 0;color:var(--on-navy);font-size:1.02rem;line-height:1.68} .cta-band__actions{margin-top:clamp(26px,3.2vw,34px);display:flex;flex-wrap:wrap;gap:12px;justify-content:center} /* ---------- Zentrierte Sektionsüberschrift ---------- */ .section-title.center{text-align:center;margin-inline:auto;max-width:24ch} /* ---------- Sehr schmale Geräte: lange deutsche Wörter trennen ---------- „Behandlungsansatz“, „Gleichgewichtsstörungen“ oder „Krankenhausaufenthalten“ sind als Einzelwort breiter als der Container bei 320px und ragten aus der Überschrift heraus. hyphens:auto trennt silbengerecht (html lang="de" ist gesetzt). Gilt bewusst nur für die Detailseiten (body.page) – die Startseiten-Überschriften sind im Juli fein austariert worden und dürfen sich nicht verändern. Die H1 (.dhero__title) ist AUSGENOMMEN: dort steht der Ortsname Hockenheim, und der Browser trennt Eigennamen falsch („Ho-ckenheim“). Sollte eine H1 einmal zu breit werden, im Text ein ­ an der richtigen Stelle setzen statt hier automatisch zu trennen. */ @media (max-width:479.98px){ .page .section-title, .page .case__title, .page .glance__title{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word} .page .dhero__title{overflow-wrap:break-word} } /* ---------- Brotkrume als sicheres Tippziel ---------- Stand bis zum 23.08.2026 in @media (max-width:639.98px) und galt damit NUR fuer Handys. Der gesamte Tablet-Bereich war nie abgedeckt: 43px statt 44px auf 23 Seiten — 46 der 83 Matrix-Befunde, der groesste Einzelposten ueberhaupt. Grenze 1199.98px nach E13-1, damit auch das iPad im Querformat (1024px breit) erfasst ist und kein abgenommenes Desktop-Format (ab 1280px) beruehrt wird. */ @media (max-width:1199.98px){ .crumbs a{min-height:44px;display:inline-flex;align-items:center} } /* ---------- HANDY: Detailseiten ---------- */ @media (max-width:639.98px){ /* ---------- Schriftgroessen FLIESSEND (09.08.2026) ---------- Gemessen ueber 320-440px brachen die Ueberschriften der Detailseiten je nach Geraet unterschiedlich um - die H1 der Geriatrie-Seite zwischen 3 und 5 Zeilen. Ursache waren die festen Werte, die hier vorher standen. Die Rechnung hinter jedem clamp(): - der vw-Wert trifft bei 390px Breite GENAU den bisherigen Festwert (Beispiel 1.58rem = 25,3px -> 25,3 / 390 * 100 = 6.48vw) - die UNTERGRENZE liegt nur 6 % darunter, damit auf sehr schmalen Geraeten nichts unlesbar klein wird (Zielgruppe sind aeltere Menschen) - die OBERGRENZE liegt darueber: grosse Handys bekommen MEHR Schrift als vorher, nicht weniger Wirkung: Zwischen 375px (iPhone SE) und 440px (17 Pro Max) skaliert alles voll proportional - dort brechen die Texte auf JEDEM Geraet gleich um. Erst unter 367px greift die Untergrenze; das betrifft nur noch 320/360er Altgeraete, wo Lesbarkeit vor Gleichheit geht. Gegenprobe nach jeder Aenderung: Werkzeuge/umbruch-messung.py --beide */ .dhero__title{font-size:clamp(1.49rem,6.48vw,1.79rem);line-height:1.2} .dhero__sub{font-size:clamp(.94rem,4.1vw,1.13rem);margin-top:12px} /* ---------- Leistungsseiten: kurze Ueberschrift auf dem Handy (20.08.2026) ---------- Sichtbar bleibt nur der Hauptbegriff ("Krankengymnastik"), der Ortszusatz ("im Hausbesuch in Hockenheim und Umgebung") wird ausgeblendet. Auf dem Desktop steht er weiter da - dort ist Platz, und er ist ein Signal fuer die lokale Suche. Der Text bleibt im Quelltext stehen, er wird nur nicht angezeigt. */ .dhero__title-zusatz{display:none} /* ---------- Spaltenbreite des Hero-Fliesstextes ---------- CJ wollte rechts mehr Luft und einen Umbruch am naechsten sinnvollen Wort. Die Breite steht in em, NICHT in Prozent - das ist der ganze Trick: Bei 360px greift die Schrift-Untergrenze des clamp (15,04px), bei 430px nicht (17,63px). Dieselbe Prozentzahl ergibt darum auf beiden Formaten eine andere Zeilenlaenge, gemessen 20,68em gegen 21,10em - genug, um einen knappen Umbruch zu kippen. In em haengt die Spalte an der Schrift und bricht ueberall gleich. 21em ist eingemessen, nicht geschaetzt: darunter (ab 20,75em) faellt bei der Krankengymnastik "Behandlungszeit" auf eine vierte, fast leere Zeile. Geprueft ueber alle 9 Leistungsseiten x 360x700 und 430x820 x Chromium und WebKit: 8 Seiten werden besser oder bleiben gleich. Die Geriatrie-Seite ist ueber .dhero--leistung ausgenommen (siehe seiten/geriatrie.html). WebKit brach hier schon vorher guenstiger um als Chromium. 21em bringt beide Engines auf dasselbe Ergebnis - Chromium allein beweist bei Umbruechen nichts. */ .dhero--leistung .dhero__sub{max-width:21em} .dhero__cta{gap:10px} .dhero__cta .btn{width:100%;justify-content:center} .crumbs{font-size:clamp(.77rem,3.36vw,.93rem)} /* Innenmass fliessend: sonst waechst die Textbreite im Kasten anders als die Schrift und knappe Zeilen brechen je nach Geraet unterschiedlich um. */ .glance{margin-top:-20px;padding:5.13vw 4.62vw;border-radius:var(--radius)} /* Auch der Abstand zwischen Symbol und Text muss mitwachsen. Bleibt er fest, waechst der Textbereich langsamer als die Schrift - dann brechen genau die Zeilen unterschiedlich um, die knapp in eine Zeile passen. 12px bei 390px Bezugsbreite entsprechen 3.08vw. */ .glance__list li{font-size:clamp(.91rem,3.98vw,1.1rem);gap:3.08vw} .prose p{font-size:clamp(.94rem,4.1vw,1.13rem);line-height:1.68} .ticks li{font-size:clamp(.91rem,3.98vw,1.1rem);gap:3.08vw} .toc__list a{gap:3.08vw} .toc__nr{flex:0 0 6.67vw;height:6.67vw;font-size:clamp(.72rem,3.14vw,.86rem)} .case{padding:18px 17px} .case__icon{width:46px;height:46px;border-radius:13px;margin-bottom:13px} .case__icon svg{width:24px;height:24px} .case__title{font-size:clamp(1rem,4.35vw,1.2rem)} .case p{font-size:clamp(.88rem,3.86vw,1.06rem)} .related{padding:18px 17px} .related__link{width:100%;justify-content:center} .tile{min-height:52px;padding:13px 16px} .cta-band__actions .btn{width:100%;justify-content:center} .section-title.center{max-width:none} /* Längeren Fließtext im CTA linksbündig: zentrierte Blöcke über mehrere Zeilen sind auf schmalen Displays schwerer zu lesen – für die Zielgruppe entscheidend. Überschrift und Frage bleiben zentriert. */ .cta-band__text{text-align:left} } /* ============================ REDUCED MOTION ============================ */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} html{scroll-behavior:auto} .reveal{opacity:1!important;transform:none!important;filter:none!important} .hero__img{animation:none} } /* ============================================================================ GROSSE BILDSCHIRME — die Seite waechst als GANZES mit (13.08.2026, E10-1) ============================================================================ DER BEFUND Auf dem 16"-MacBook des Kollegen (1728x1000) wirkte die Seite "verengt, als haette man sie auf einem kleinen Bildschirm gebaut". Gemessen mit _qa\finde-deckel.py ueber 1280 -> 2560px war der Grund eindeutig: NUR der Hero war je fuer grosse Bildschirme gebaut worden (er waechst 44 -> 68px). Alles darunter war ab 1280px eingefroren: Abschnitts-Ueberschriften 48px auf 13" wie auf 27" Vorspann-Text 20,8px dito Fliesstext 15,7px dito Karten-Titel 16,8px dito Inhaltsbreite 1160px dito -> bei 2560px blieben 55 % leer Das ist auf grossen Bildschirmen derselbe Fehler wie der "getarnte clamp" auf dem Handy (Stand-8, §7), nur von der anderen Seite: Ist das MAXIMUM eines clamp() schon bei 1200px erreicht, zeigt ein 27-Zoll-Monitor exakt dieselbe Groesse wie ein 13-Zoll-Notebook - nur mit mehr leerem Rand. Genau diese Unwucht liest sich als "verengt". WARUM HIER DIE WURZELGROESSE STATT 40 EINZELWERTE Die Seite ist fast durchgehend in rem gebaut (.98rem, 1.05rem, 1.22rem ...). 40 Einzelwerte anzufassen waere fehleranfaellig und wuerde die naechste vergessene Stelle garantiert uebersehen. Ueber die Wurzelgroesse waechst alles gleichzeitig und im selben Verhaeltnis - die Proportionen bleiben exakt erhalten. Das ist der Unterschied zwischen "groesser" und "anders". WARUM rem UND NICHT px IN DER WURZEL Wer im Browser eine groessere Standardschrift eingestellt hat (bei unserer Zielgruppe nicht selten), wuerde von einem px-Wert ueberstimmt. Die Untergrenze 1rem ist die EINSTELLUNG DES NUTZERS - sie wird nie unterboten. WARUM ERST AB 1400px Damit CJs 13"-Notebook (1280x600) und 1366er-Geraete exakt so bleiben, wie sie gemessen und freigegeben sind. Dieselbe Grenze benutzt schon der Hero-Block weiter oben. KEIN SPRUNG AN DER GRENZE — bei genau 1400px treffen alle drei Werte rechnerisch ihren bisherigen Stand: Wurzel : 0.744x16 + 0.293x14 = 16,01px (bisher 16px) Container: 292 + 0,62x1400 = 1160px (bisher 1160px) Kopf/Band: 342 + 0,727x1400= 1360px (bisher 1360px) ============================================================================ */ @media (min-width:1400px){ /* 16px bei 1400px -> 19,4px bei 2560px (Faktor 1,21 auf ALLES in rem) */ html{font-size:clamp(1rem, 0.744rem + 0.293vw, 1.22rem)} /* 1160px bei 1400px -> 1363px auf dem 16"-MacBook -> 1520px ab ~1980px. Der Deckel 1520px ist bewusst gesetzt: Ohne ihn werden die Textzeilen auf einem 27-Zoll-Monitor zu lang zum Lesen. Zeilenlaenge schlaegt Bildschirm. */ :root{--container:clamp(1160px, 292px + 62vw, 1520px)} /* Kopfleiste und Info-Band sind bewusst breiter als der Textbereich - sie wachsen im gleichen Verhaeltnis mit, sonst reisst die Flucht zum Inhalt. */ .header__inner,.quickbar__row{max-width:clamp(1360px, 342px + 72.7vw, 1760px)} /* Die Hero-Textspalte MUSS mitwachsen (gemessen 13.08.2026). Erster Versuch ohne diese Zeile: Die Spalte blieb bei festen 1060px, waehrend der Container auf 1520px wuchs. Zwei Folgen, beide sichtbar: 1. Genau die Unwucht "feste Spaltenbreite in einem breiteren Container" aus der globalen Regel - der Text klebte links, rechts blieb es leer. 2. Bei 2560px brach die Ueberschrift in DREI Zeilen statt zwei: "Mobile Physiotherapie / fuer Privatpatienten / & Selbstzahler". Damit stand "fuer" in der falschen Zeile und der cyan gesetzte Namensteil war auseinandergerissen - der Aufbau der Aussage kaputt. Mit mitwachsender Spalte bleiben es zwei Zeilen, der Umbruch sitzt wieder zwischen "fuer" und "Privatpatienten". Bei 1400px exakt 1060px - kein Sprung. */ .hero__inner{max-width:clamp(1060px, 267px + 56.6vw, 1400px)} } /* ============ HANDY: Abschnitts-Kopfzeilen zentriert (Ramon 16.08.2026) ============ CJ: "Bei Ueber mich, beim Schwerpunkt Geriatrie und beim FAQ-Abschluss steht die Ueberschrift links, das sieht nicht sauber aus - bitte zentriert wie bei den Leistungen und beim Ablauf." Nachgemessen stimmte das: Auf dem Handy waren fuenf Abschnitte zentriert (Leistungen, Ablauf, Einsatzgebiet, Haeufige Fragen, Kontakt) und zwei nicht (Ueber mich, Geriatrie) - plus zwei einzelne Bloecke. Das war keine Absicht, sondern schlicht uneinheitlich: Die zentrierten Abschnitte tragen im HTML ein .center am Kopf, die beiden anderen haben eine eigene Kopfstruktur ohne diese Klasse. Bewusst NICHT zentriert und weiterhin linksbuendig: - die Leistungs-Karten (Symbol, Titel, Text) - so gewuenscht - die Haekchen-Listen bei Geriatrie und Ueber mich: Aufzaehlungen liest man an einer gemeinsamen linken Kante deutlich schneller Der Block steht am Dateiende, damit er nicht an der Spezifitaet frueherer Regeln scheitert - genau daran ist hier schon einmal eine Aenderung wirkungslos geblieben. */ @media (max-width:639.98px){ /* --- Ueber mich: Kopf und gesamter Textblock --- */ .about__head{text-align:center} .about__body{text-align:center} /* Die beiden hervorgehobenen Saetze hatten einen senkrechten Balken LINKS. Bei zentriertem Text steht der Text dann sichtbar schief zu seiner Markierung. Auf dem Handy wird daraus eine kurze Linie ueber dem Satz - dieselbe Auszeichnung, nur mittig. Auf groesseren Bildschirmen bleibt der Balken links wie bisher. */ .about__quote,.about__creed{ padding-left:0;border-left:0;padding-top:15px;position:relative } .about__quote::before,.about__creed::before{ content:"";position:absolute;top:0;left:50%;transform:translateX(-50%); width:44px;height:3px;border-radius:2px } .about__quote::before{background:var(--cyan)} .about__creed::before{background:var(--lime)} /* --- Schwerpunkt Geriatrie: nur die Kopfzeilen --- */ /* Die Orte-/Schwerpunktzeile ist ein inline-flex (kurzer Strich + Text). Ein text-align:center auf ihr selbst zentriert nur ihren INHALT - das Element blieb gemessen links kleben (Rand 18px links, 119px rechts). Zentriert wird ein inline-Element sonst vom Elternteil, aber .feature__body darf hier nicht auf center gestellt werden: Daran haengt auch die Haekchenliste, und die soll linksbuendig bleiben. Deshalb wird die Zeile selbst zum Block (display:flex) und ihr Inhalt mittig gesetzt - das wirkt ohne den Elternteil anzufassen. */ /* justify-content zentriert die Flex-Elemente (Strich und Textblock) - NICHT aber den Text INNERHALB des Blocks. Die Zeile bricht hier bewusst um ("Mein Schwerpunkt" / "Geriatrie"), und die zweite Zeile klebte dadurch weiter links, waehrend die erste mittig sass. text-align:center muss also zusaetzlich stehen. */ .feature__body > .eyebrow{display:flex;justify-content:center;text-align:center} .feature__body > .section-title, .feature__body > .lead{text-align:center} /* --- Zitat unter dem Ablauf-Slider --- */ .flow__quote{text-align:center} /* --- Abschluss der haeufigen Fragen --- */ .faq__outro{text-align:center} } /* ========= HANDY: zwei Ueberschriften fuellen ihre Zeilen (CJ 21.08.2026) ========= CJ: "manchmal hast du einfach richtig frueh den Zeilenumbruch gemacht ... dass man das Wort noch in die Zeile dazubekommt und dann erst einen Zeilenumbruch etwas spaeter". Nachgemessen ueber alle sieben Abschnitte - breiteste Zeile in Prozent der nutzbaren Spalte: 360px 430px Ueber mich 3 Zeilen 72 % 2 Zeilen 87 % Leistungen 2 Zeilen 84 % 2 Zeilen 83 % Wieder mobil werden 2 Zeilen 94 % 2 Zeilen 93 % Ihr Weg zum Hausbesuch 3 Zeilen 64 % 3 Zeilen 63 % Einsatzgebiet 2 Zeilen 92 % 2 Zeilen 92 % Gut zu wissen 1 Zeile 60 % 1 Zeile 59 % Kontakt 2 Zeilen 86 % 2 Zeilen 84 % Nur ZWEI Abschnitte haben das Problem; die anderen liegen bei 83-94 % und sind gut gefuellt. Ein pauschaler Eingriff waere deshalb falsch. Zwei Wege wurden gemessen und VERWORFEN: - text-wrap:balance abschalten: das Ergebnis war in allen sieben Zeilen identisch. Die Umbrueche sind reine Geometrie ("Hausbesuch" ist ein langes Wort), nicht der Zeilenausgleich. Dieser Hebel existiert also gar nicht. - alle .section-title kleiner (1.60rem): repariert zwei, verschlechtert vier. Gemessen fiel Wieder-mobil-werden von 94 auf 83 %, Leistungen von 84 auf 74 %, Kontakt von 86 auf 75 % - Schrift kleiner UND Zeilen leerer, also das Gegenteil des Ziels. CJ nach Ansicht der Bilder: "da sieht's nicht so gut aus". Also gezielt und FLIESSEND statt mit fester Zahl: eine feste Zahl haette die Ueberschrift auf dem grossen Handy genauso klein gemacht wie auf dem kleinen, obwohl dort Platz ist. Gleiche Bauart wie bei #einsatzgebiet, das aus demselben Grund laengst eine eigene Groesse hat. Ueber mich: min(7.78vw, 1.9rem). 1.9rem ist die BISHERIGE Groesse - der Deckel greift ab rund 391px, darueber aendert sich also nichts. Verkleinert wird nur darunter, genau wo es klemmt: bei 360px 28.0px, 2 Zeilen, 96 %. Bei 430px bleibt es unveraendert bei 30.4px / 87 %. Ablauf: min(6.75vw, 1.85rem). Dieser Titel ist auf BEIDEN Formaten dreizeilig, muss also auf beiden schrumpfen. Ergebnis: 94 % auf jeder Breite von 320 bis 430px, und der Umbruch sitzt am Gedankenstrich - "Ihr Weg zum Hausbesuch" / "- ganz einfach". Zentriert bleibt zentriert; die Ausrichtung war nie die Ursache. Der Block steht bewusst am DATEIENDE: .about__head .section-title (Zeile 572) hat dieselbe Spezifitaet, hier gewinnt also die spaetere Regel. Weiter oben notiert waere die Aenderung wirkungslos geblieben - dieser Fehler ist im Projekt schon einmal passiert, siehe Block "Abschnitts-Kopfzeilen zentriert". Gegenprobe nach jeder Aenderung: 320-430px auf Chromium UND WebKit. */ @media (max-width:639.98px){ .about__head .section-title{font-size:min(7.78vw,1.9rem)} #ablauf .section-title{font-size:min(6.75vw,1.85rem)} }