liefern: wer im Editor mit
Zeilenumbrüchen statt mit Absätzen schreibt, bekommt blanken Text mit
. Eine Regel für `p` erreicht diesen Fall nicht — die Überschrift
klebte dann am Text (aufgefallen auf der Logopädie-Seite bei
„Hörtraining & Lese-Rechtschreibschwäche"). An der Überschrift gesetzt
gilt der Abstand für jede Form des Folgetextes.
Die p-Regel bleibt daneben stehen: beide Abstände fallen zusammen
(margin collapsing), der Abstand verdoppelt sich also nicht. Steht die
Überschrift allein im Kopf, fällt ihr Abstand weg — sonst käme er zu
den 32px des Kopfes hinzu. */
.section-head h1,.section-head h2{margin-bottom:18px}
.section-head h1:last-child,.section-head h2:last-child{margin-bottom:0}
.section-head p{color:var(--text-mid);margin-top:18px}
/* ANSATZ */
.ansatz-grid{display:grid;grid-template-columns:.45fr 1.55fr;gap:40px;align-items:start}
.ansatz-photo-wrap{position:relative;max-width:230px}
.ansatz-photo-wrap img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:48% 52% 45% 55%/50% 42% 58% 50%;border:4px solid rgba(200,224,176,.4)}
.ansatz-photo-wrap::before{content:'';position:absolute;width:70px;height:70px;border-radius:50%;background:var(--cat-main);bottom:-12px;right:-8px;z-index:-1;opacity:.55}
.ansatz-photo-wrap::after{content:'';position:absolute;width:40px;height:40px;border-radius:50%;background:var(--gold-mid);top:-8px;left:-8px;z-index:-1;opacity:.7}
/* Abstand zwischen Überschrift und Text im Abschnitt „Unser Ansatz".
Die Überschrift ist Playfair mit enger Zeilenhöhe, der Text darunter
Fließsatz — ohne eigenen Abstand kleben beide aneinander. Der Wert steht
hier und nicht am Element, damit Angebots- und Therapieseiten gleich
aussehen: beide benutzen .ansatz-text. */
.ansatz-grid h2{margin-bottom:0}
.ansatz-text{margin-top:18px;line-height:1.7}
.ansatz-text p{margin:0 0 .85em}
.ansatz-text p:last-child{margin-bottom:0}
.ansatz-text ul,.ansatz-text ol{margin:0 0 .85em;padding-left:1.4em}
.ansatz-text li{margin-bottom:.3em}
.ansatz-quote{border-left:4px solid var(--cat-main);padding:14px 0 14px 18px;margin-top:20px;font-family:'Playfair Display',serif;font-style:italic;font-size:18px;color:var(--green-deepest);line-height:1.5}
.checklist{list-style:none;margin-top:18px}
.checklist li{display:flex;gap:8px;align-items:flex-start;padding:3px 0;color:var(--text-mid);font-size:14px}
.checklist li b{color:var(--green-deepest);font-weight:600}
.checklist li::before{content:'●';color:var(--cat-main);font-size:8px;margin-top:9px;flex-shrink:0}
/* CARDS (icon cards) */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--white);border:1px solid var(--cream-border);border-radius:14px;padding:24px 22px;transition:all .3s;position:relative;overflow:hidden}
.card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--cat-main);transform:scaleX(0);transition:transform .3s;transform-origin:left}
.card:hover{transform:translateY(-5px);box-shadow:0 12px 28px rgba(42,58,26,.1);border-color:var(--cat-light)}
.card:hover::after{transform:scaleX(1)}
.card-icon{font-size:26px;margin-bottom:12px;display:block}
.card h3{font-family:'Source Sans 3',sans-serif;font-size:17px;font-weight:700;color:var(--green-deepest)}
.card p{color:var(--text-mid);font-size:14px;margin-top:6px;line-height:1.55}
/* SUBTHERAPY PHOTO CARDS */
.subtherapy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.subtherapy-card{background:var(--white);border:1px solid var(--cream-border);border-radius:16px;overflow:hidden;transition:all .3s;display:flex;flex-direction:column}
.has-pet{position:relative;overflow:visible!important}
.pet{position:absolute;pointer-events:none;z-index:3}
.subtherapy-card:hover{transform:translateY(-6px);box-shadow:0 16px 36px rgba(42,58,26,.12);border-color:var(--cat-main)}
.subtherapy-photo{aspect-ratio:4/3;overflow:hidden}
.subtherapy-photo img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.subtherapy-card:hover .subtherapy-photo img{transform:scale(1.06)}
.subtherapy-body{padding:20px 22px 22px;flex:1;display:flex;flex-direction:column}
.subtherapy-body h3{font-size:19px;margin-bottom:8px}
.subtherapy-body p{color:var(--text-mid);font-size:14px;line-height:1.55;margin-bottom:14px;flex:1}
.subtherapy-link{font-size:14px;font-weight:700;color:var(--cat-dark);display:inline-flex;align-items:center;gap:4px;transition:gap .2s}
.subtherapy-card:hover .subtherapy-link{gap:9px}
/* CTA */
.cta-band{padding:48px 0;text-align:center;position:relative;overflow:hidden}
.cta-band h2{color:var(--white);margin-bottom:6px;position:relative;z-index:1}
.cta-band p{color:rgba(255,255,255,.7);font-size:17px;margin-bottom:24px;position:relative;z-index:1}
.cta-buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}
.cta-sub{font-size:14px;margin-top:14px;color:rgba(255,255,255,.4);position:relative;z-index:1}
/* WARUM / FEATURES */
.warum-intro-grid{display:grid;grid-template-columns:.45fr 1.55fr;gap:40px;align-items:start;margin-bottom:32px}
.warum-photo-wrap{position:relative;max-width:230px}
.warum-photo-wrap img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:45% 55% 50% 50%/55% 45% 55% 45%;border:4px solid rgba(235,195,95,.35)}
.stat-box{position:absolute;bottom:-14px;right:-14px;background:var(--green-deepest);color:var(--white);border-radius:14px;padding:10px 16px;text-align:center;box-shadow:0 10px 24px rgba(42,58,26,.3);min-width:88px}
.stat-box b{display:block;font-family:'Playfair Display',serif;font-size:24px;color:var(--gold-main);line-height:1.1}
.stat-box span{font-size:10px;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.05em}
.warum-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:start;margin-bottom:36px}
.warum-grid h3{font-size:18px;margin-top:18px;margin-bottom:6px;color:var(--cat-deeptext)}
.warum-grid p{color:var(--text-mid);font-size:14px}
.warum-showcase{background:linear-gradient(135deg,var(--cat-light) 0%,var(--white) 55%);border:2px solid var(--cat-main);border-radius:22px;padding:44px;box-shadow:0 16px 44px rgba(58,90,34,.18);position:relative;overflow:visible}
.warum-badge{position:absolute;top:-15px;left:36px;background:var(--cat-main);color:var(--white);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 16px;border-radius:20px;box-shadow:0 4px 10px rgba(58,90,34,.35)}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.feature-item{text-align:center;background:var(--white);border:1px solid var(--cream-border);border-radius:14px;padding:24px 18px;transition:all .3s}
.feature-item:hover{transform:translateY(-5px);box-shadow:0 10px 24px rgba(42,58,26,.08)}
.feature-icon{width:52px;height:52px;border-radius:50%;background:var(--cat-light);display:flex;align-items:center;justify-content:center;font-size:22px;margin:0 auto 14px}
.feature-item h3{font-size:15.5px;margin-bottom:6px}
.feature-item p{color:var(--text-mid);font-size:14px;line-height:1.6}
/* INTENSIVTHERAPIE TEASER */
.intensiv-band{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center;background:linear-gradient(135deg,var(--gold-light) 0%,var(--white) 55%);border:2px solid var(--gold-main);border-radius:22px;padding:40px;overflow:visible;position:relative;box-shadow:0 16px 44px rgba(196,154,40,.18)}
.intensiv-badge{position:absolute;top:-15px;left:36px;background:var(--gold-main);color:var(--green-deepest);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 16px;border-radius:20px;box-shadow:0 4px 10px rgba(196,154,40,.35)}
.intensiv-photo{border-radius:16px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 12px 28px rgba(42,58,26,.15)}
.intensiv-photo img{width:100%;height:100%;object-fit:cover}
.intensiv-band h2{margin-bottom:12px}
.intensiv-band p{color:var(--text-mid);margin-bottom:18px}
/* DIAGNOSEN */
.diag-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.diag-card{background:var(--white);border:1px solid var(--cream-border);border-radius:14px;padding:22px 18px;text-align:center;transition:all .3s}
.diag-card:hover{transform:translateY(-5px);box-shadow:0 12px 28px rgba(42,58,26,.1);border-color:var(--cat-main)}
.diag-icon{font-size:30px;margin-bottom:10px}
.diag-card h3{font-size:15px;margin-bottom:4px;line-height:1.3}
.diag-card p{color:var(--text-muted);font-size:12.5px;line-height:1.5}
/* Am Telefon steht das Sinnbild neben dem Text statt darueber. Untereinander
braucht eine Karte 150 Pixel, nebeneinander 96 — bei fuenf Karten sind das
270 Pixel weniger Rollweg, ohne dass etwas wegfaellt. Das Sinnbild sitzt
ueber beide Textzeilen hinweg links. */
@media(max-width:640px){
.diag-card{display:grid; grid-template-columns:auto 1fr; column-gap:12px;
align-items:start; text-align:left}
.diag-icon{grid-row:1 / span 2; margin-bottom:0; line-height:1}
.diag-card h3, .diag-card p{grid-column:2}
}
/* PRICE CARDS */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.price-card{background:var(--white);border:2px solid var(--cream-border);border-radius:18px;padding:30px 26px;transition:all .3s;display:flex;flex-direction:column;position:relative}
.price-card:hover{transform:translateY(-6px);box-shadow:0 16px 36px rgba(42,58,26,.1)}
.price-card.featured{border-color:var(--gold-main)}
/* Der Text steht im Markup (data-hinweis), nicht hier: als `content:'Beliebt'`
erschien er auch auf den englischen Seiten auf Deutsch. */
.price-card.featured::before{content:attr(data-hinweis);position:absolute;top:-13px;left:26px;background:var(--gold-main);color:var(--green-deepest);font-size:11px;font-weight:700;padding:4px 14px;border-radius:20px;letter-spacing:.05em;text-transform:uppercase}
.price-card h3{font-size:19px;margin-bottom:6px}
.price-value{font-family:'Playfair Display',serif;font-size:28px;color:var(--cat-dark);font-weight:700;margin-bottom:16px}
.price-value span{font-size:14px;color:var(--text-muted);font-weight:400;font-family:'Source Sans 3',sans-serif}
.price-features{list-style:none;flex:1;margin-bottom:22px}
.price-features li{display:flex;gap:8px;padding:6px 0;font-size:14px;color:var(--text-mid);align-items:flex-start;line-height:1.5}
/* TESTIMONIALS */
.testimonial-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.testimonial-card{background:var(--white);border:1px solid var(--cream-border);border-radius:16px;padding:26px 24px}
.testimonial-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.testimonial-photo{width:48px;height:48px;border-radius:50%;object-fit:cover}
.testimonial-name{font-weight:700;font-size:15px;color:var(--green-deepest)}
.testimonial-stars{color:var(--gold-dark);font-size:13px}
.testimonial-text{color:var(--text-mid);font-size:14px;line-height:1.55}
/* FOOTER — #3A5A22 */
.footer{background:var(--green-dark);color:rgba(255,255,255,.65);padding:28px 0 0}
.footer-grid{display:flex;flex-wrap:wrap;gap:28px;padding-bottom:20px}
/* Die erste Spalte traegt Logo, Kontakt, zwei Adressen und die sozialen
Netzwerke — mit 250px brachen Telefon und E-Mail auf zwei Zeilen um.
340px reichen fuer beide auf einer Zeile. */
.footer-brand{flex:0 0 340px;max-width:100%}
.footer-links{flex:1;min-width:280px;column-count:3;column-gap:24px}
.footer-group{break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:14px}
.footer h5{color:var(--white);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px}
/* Die Überschrift ist ein Verweis auf die Fachrichtung — sie muss die
Auszeichnung der Überschrift behalten, nicht die der Listenverweise. */
.footer h5 a{color:var(--white);font-size:inherit;font-weight:inherit;letter-spacing:inherit;
text-transform:inherit;padding:0;display:inline;text-decoration:none}
.footer h5 a:hover{color:var(--gold-main);text-decoration:underline}
/* Diese Regel gilt nur für die Verweislisten in den Spalten — deshalb
.footer-group a und nicht .footer a.
Vorher stand hier .footer a mit einer Kette aus :not(), um die Kästen
auszunehmen. Das hat funktioniert, aber die Spezifität auf 0,4,1 getrieben
und damit .footer-bottom a{display:inline} überstimmt: Impressum und
Datenschutz standen plötzlich auf eigenen Zeilen. Eine engere Regel ist
hier richtig, nicht eine mit mehr Ausnahmen. */
.footer-group a{font-size:12.5px;color:rgba(255,255,255,.52);display:block;padding:2px 0;line-height:1.45;
text-decoration:none;transition:color .15s}
.footer-group a:hover{color:var(--gold-main)}
.footer a:hover{color:var(--gold-main)}
.footer-brand-name{font-family:'Playfair Display',serif;font-size:16px;font-weight:700;color:var(--white);margin-bottom:3px;display:flex;align-items:center;gap:8px}
.footer-brand-name span{color:var(--gold-main)}
.footer-brand-name img{height:34px;width:auto}
/* Kontakt in einer Zeile — mit nowrap, damit die E-Mail nicht abrutscht.
Reicht der Platz auf schmalen Geraeten wirklich nicht, bricht die Zeile
weiter unten im Mobilteil bewusst um. */
.footer-kontakt{display:flex;align-items:center;gap:9px;font-size:11.5px;margin:8px 0;white-space:nowrap}
.footer-kontakt a{display:inline;padding:0}
.footer-kontakt .trenner{opacity:.3}
/* Zwei gleich breite Adresskaesten. Vorher waren sie inline-block mit
width:auto und damit unterschiedlich gross — das liess Graz und Wien
ungleich wichtig erscheinen. */
.footer-locs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
/* Mehr Luft im Kasten: mit 7px/10px klebte die Anschrift am Rahmen. */
.footer .footer-loc{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
border-radius:8px;padding:13px 15px;font-size:11px;line-height:1.5;
text-align:left;text-decoration:none;color:rgba(255,255,255,.6);transition:all .18s}
.footer-loc:hover{background:rgba(255,255,255,.09);border-color:var(--gold-main);color:rgba(255,255,255,.8)}
.footer-loc strong{color:var(--gold-main);font-size:9px;letter-spacing:.04em;
text-transform:uppercase;display:block;margin-bottom:2px}
/* Sozialsymbole: von 28px auf 34px und deutlich weniger rund (8px statt
Kreis) — als Quadrat mit Radius sind sie auf dem dunklen Grund besser
auszumachen. */
/* Sozialsymbole, zweiter Versuch.
Gold gefüllt mit dunklem Zeichen war auf dem dunkelgrünen Grund vier
goldene Klötze — auffällig, aber die Zeichen selbst kaum zu erkennen.
Jetzt umgekehrt: heller Rahmen, weisses Zeichen, gefüllt erst beim
Überfahren. Das Zeichen trägt den Kontrast, nicht die Fläche. */
.footer-social{display:flex;gap:9px;margin-top:14px}
.footer-social a{width:38px;height:38px;border-radius:9px;
background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
color:rgba(255,255,255,.92);
display:flex;align-items:center;justify-content:center;padding:0;transition:all .18s}
.footer-social a svg{width:19px;height:19px}
.footer-social a:hover{background:var(--gold-main);border-color:var(--gold-main);
color:var(--green-deepest);transform:translateY(-2px)}
/* Mini-Banner auf die Erwachsenen-Website */
/* Steht jetzt in der ersten Spalte unter den Adressen. Innenabstand wie
bei den Adresskästen, damit die drei Kästen eine Reihe bilden. */
.footer .footer-erwachsene{display:flex;align-items:center;gap:12px;margin:10px 0 0;
padding:13px 15px;background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);border-radius:8px;
text-decoration:none;transition:all .18s}
.footer-erwachsene:hover{background:rgba(255,255,255,.09);border-color:var(--gold-main)}
.footer-erwachsene .fe-sym{font-size:20px;flex-shrink:0}
.footer-erwachsene .fe-text{flex:1;min-width:0}
.footer-erwachsene .fe-text b{display:block;color:var(--white);font-size:13px;font-weight:600}
.footer-erwachsene .fe-text small{display:block;color:rgba(255,255,255,.5);font-size:11.5px;
line-height:1.45;margin-top:2px}
.footer-erwachsene .fe-pfeil{color:var(--gold-main);font-size:17px;flex-shrink:0}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:10px 0;display:flex;justify-content:space-between;font-size:11px;flex-wrap:wrap;gap:4px}
/* Copyright links, Rechtstexte rechts — beides in einer Zeile.
Die Verweise müssen inline bleiben, sonst bricht jeder auf eine eigene
Zeile um. */
.footer-bottom{align-items:center}
.footer-bottom > span{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.footer-bottom a{color:rgba(255,255,255,.4);display:inline;padding:0;font-size:11px;
text-decoration:underline;transition:color .15s}
.footer-bottom a:hover{color:var(--gold-main)}
/* RESPONSIVE */
@media(max-width:960px){
.nav-main,.nav-right{display:none!important}
.hamburger{display:flex!important}
.hero{padding:56px 0 44px}
.ansatz-grid,.warum-intro-grid{grid-template-columns:1fr}
.card-grid,.subtherapy-grid{grid-template-columns:repeat(2,1fr)}
.warum-grid{grid-template-columns:1fr}
.feature-grid{grid-template-columns:repeat(2,1fr)}
.intensiv-band{grid-template-columns:1fr}
.diag-grid{grid-template-columns:repeat(3,1fr)}
.price-grid{grid-template-columns:1fr}
.testimonial-grid, .footer-grid{flex-direction:column}
.footer-brand{flex:0 0 auto;width:100%}
.footer-links{column-count:2;width:100%}
}
@media(max-width:560px){.card-grid,.subtherapy-grid,.diag-grid,.feature-grid{grid-template-columns:1fr}.wrap{padding:0 20px}.cta-buttons{flex-direction:column;align-items:center}.btn-cta-lg{min-width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* ===== INTENSIV-PAGE COMPONENTS ===== */
.note-box{background:linear-gradient(135deg,var(--gold-light) 0%,var(--white) 60%);border:2px solid var(--gold-main);border-radius:18px;padding:28px 30px;margin-top:26px;position:relative;box-shadow:0 12px 32px rgba(196,154,40,.14);overflow:visible}
.note-badge{position:absolute;top:-14px;left:28px;background:var(--gold-main);color:var(--green-deepest);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 15px;border-radius:20px}
.note-box h3{font-size:20px;margin-bottom:6px}
.note-box p{color:var(--text-mid);font-size:14px}
.apart-band{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;background:linear-gradient(135deg,var(--cat-light) 0%,var(--white) 55%);border:2px solid var(--cat-main);border-radius:22px;padding:40px;position:relative;overflow:visible;box-shadow:0 16px 44px rgba(196,122,58,.18)}
.apart-badge{position:absolute;top:-15px;right:36px;background:var(--cat-main);color:var(--white);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 16px;border-radius:20px;box-shadow:0 4px 10px rgba(196,122,58,.35)}
.apart-photo{border-radius:16px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 12px 28px rgba(42,58,26,.15)}
.apart-photo img{width:100%;height:100%;object-fit:cover}
.apart-band p{color:var(--text-mid);font-size:14px;margin-bottom:14px}
@media(max-width:960px){.apart-band{grid-template-columns:1fr}}
/* ===== HUB PAGE COMPONENTS ===== */
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:26px}
.stat-cell{background:var(--white);border:1px solid var(--cream-border);border-radius:14px;padding:20px 18px;text-align:center;transition:all .3s}
.stat-cell:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(42,58,26,.08);border-color:var(--cat-main)}
.stat-cell b{display:block;font-family:'Playfair Display',serif;font-size:30px;color:var(--cat-dark);line-height:1.1}
.stat-cell span{font-size:12.5px;color:var(--text-mid);display:block;margin-top:4px;line-height:1.4}
.trust-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.trust-chip{display:inline-flex;align-items:center;gap:7px;background:var(--white);border:1px solid var(--cream-border);border-radius:20px;padding:7px 14px;font-size:13px;color:var(--text-mid);font-weight:600}
/* filter toolbar */
.filter-bar{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between;margin-bottom:26px;padding:20px 22px;background:var(--white);border:1px solid var(--cream-border);border-radius:16px}
.filter-group{display:flex;flex-direction:column;gap:8px}
.filter-label{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-muted)}
.chip-row{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:var(--cream-bg);border:1.5px solid var(--cream-border);border-radius:20px;padding:8px 15px;font-size:13px;font-weight:600;color:var(--text-mid);cursor:pointer;font-family:inherit;transition:all .2s;min-height:40px}
.chip:hover{border-color:var(--cat-main);color:var(--cat-dark)}
.chip.active{background:var(--green-deepest);border-color:var(--green-deepest);color:var(--gold-main)}
.filter-count{font-size:13px;color:var(--text-muted)}
/* therapy hub cards */
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hub-card{background:var(--white);border:1px solid var(--cream-border);border-top:5px solid var(--tc,var(--cat-main));border-radius:18px;padding:26px 24px;display:flex;flex-direction:column;transition:all .3s;position:relative}
.hub-card.is-hidden{display:none}
.hub-card:hover{transform:translateY(-7px);box-shadow:0 18px 40px rgba(42,58,26,.12);border-color:var(--tc,var(--cat-main))}
.hub-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.hub-icon{width:52px;height:52px;border-radius:14px;background:var(--tcl,var(--cat-light));display:flex;align-items:center;justify-content:center;font-size:25px;flex-shrink:0}
.loc-badge{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:20px;background:var(--tcl,var(--cat-light));color:var(--tcd,var(--cat-dark));white-space:nowrap;flex-shrink:0}
.hub-card h3{font-size:20px;margin-bottom:6px}
.hub-card>p{color:var(--text-mid);font-size:14px;line-height:1.6;margin-bottom:14px}
.hub-meta{font-size:12px;color:var(--text-muted);margin-bottom:10px;display:flex;flex-wrap:wrap;gap:4px 12px}
.hub-meta b{color:var(--green-deepest);font-weight:600}
.prod-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;flex:1;align-content:flex-start}
.prod-chip{font-size:12px;background:var(--cream-bg);border:1px solid var(--cream-border);border-radius:14px;padding:4px 10px;color:var(--text-mid);transition:all .18s}
.prod-chip:hover{background:var(--tcl,var(--cat-light));border-color:var(--tc,var(--cat-main));color:var(--tcd,var(--cat-dark))}
.hub-cta{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;border-radius:var(--radius-btn);font-weight:700;font-size:14px;background:var(--tcl,var(--cat-light));color:var(--tcd,var(--cat-dark));border:1.5px solid var(--tc,var(--cat-main));transition:all .22s}
.hub-card:hover .hub-cta{background:var(--tc,var(--cat-main));color:var(--white)}
.no-result{display:none;text-align:center;padding:36px 20px;color:var(--text-mid);font-size:14px;background:var(--white);border:1px dashed var(--cream-border);border-radius:16px}
.no-result.show{display:block}
/* comparison table */
/* Der Rahmen stand in --cream-border. Auf dem eingefaerbten Abschnitt hat der
Ton denselben Hellwert wie der Untergrund — gemessen Kontrast 1.00, die
Linie war schlicht nicht da. Jetzt in der Bereichsfarbe: 3.3 gegen den
Abschnitt, 4.1 gegen das Weiss der Tabelle, und sie passt zum Rahmen von
.warum-showcase, der dieselbe Farbe traegt. --cat-main hat oben einen
Vorgabewert, steht also auch auf Seiten ohne eigene Bereichsfarbe. */
.cmp-wrap{background:var(--white);border:1px solid var(--cat-main);border-radius:18px;overflow-x:auto}
table.cmp{width:100%;border-collapse:collapse;min-width:760px;font-size:13.5px}
table.cmp th,table.cmp td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--cream-border);vertical-align:top}
table.cmp thead th{background:var(--cat-light);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cat-deeptext);white-space:nowrap}
table.cmp tbody tr:last-child td{border-bottom:none}
table.cmp tbody tr{transition:background .18s}
table.cmp tbody tr:hover{background:var(--cream-bg)}
table.cmp td:first-child{font-weight:700;color:var(--green-deepest);white-space:nowrap}
.cmp-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;vertical-align:middle}
table.cmp td{color:var(--text-mid)}
/* combine showcase */
.combine-box{background:linear-gradient(135deg,var(--cat-light) 0%,var(--white) 55%);border:2px solid var(--cat-main);border-radius:22px;padding:40px;box-shadow:0 16px 44px rgba(58,90,34,.16);position:relative;overflow:visible}
.combine-badge{position:absolute;top:-15px;left:36px;background:var(--cat-main);color:var(--white);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 16px;border-radius:20px;box-shadow:0 4px 10px rgba(58,90,34,.3)}
.combine-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.flow-step{background:var(--white);border:1px solid var(--cream-border);border-radius:14px;padding:18px 16px;position:relative}
.flow-num{width:32px;height:32px;border-radius:50%;background:var(--cat-main);color:var(--white);font-family:'Playfair Display',serif;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.flow-step h4{font-size:14.5px;font-weight:700;color:var(--green-deepest);margin-bottom:4px;font-family:'Source Sans 3',sans-serif}
.flow-step p{font-size:13px;color:var(--text-mid);line-height:1.55}
/* Dieselbe Sache wie bei .diag-card: die Zahl links, der Text rechts. Ein
Schritt schrumpft von 147 auf 105 Pixel. */
@media(max-width:640px){
.flow-step{display:grid; grid-template-columns:auto 1fr; column-gap:14px;
align-items:start}
.flow-num{grid-row:1 / span 2; margin-bottom:0}
.flow-step h4, .flow-step p{grid-column:2}
}
@media(max-width:960px){
.stat-strip{grid-template-columns:repeat(2,1fr)}
.hub-grid{grid-template-columns:repeat(2,1fr)}
.combine-flow{grid-template-columns:repeat(2,1fr)}
.filter-bar{flex-direction:column;align-items:stretch}
}
@media(max-width:560px){.hub-grid{grid-template-columns:1fr}.stat-strip{grid-template-columns:1fr 1fr}.combine-flow{grid-template-columns:1fr}}
/* ===== ANGEBOT-HUB ===== */
.nav-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.nav-card{background:var(--white);border:1px solid var(--cream-border);border-top:5px solid var(--tc);border-radius:18px;padding:28px 26px;display:flex;flex-direction:column;transition:all .3s}
.nav-card:hover{transform:translateY(-7px);box-shadow:0 18px 40px rgba(42,58,26,.12);border-color:var(--tc)}
.nav-card-top{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.nav-card-ic{width:54px;height:54px;border-radius:14px;background:var(--tcl);display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0}
.nav-card h3{font-size:21px;margin:0}
.nav-card>p{color:var(--text-mid);font-size:14px;line-height:1.6;flex:1;margin-bottom:18px}
.nav-card-link{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;border-radius:var(--radius-btn);font-weight:700;font-size:14.5px;background:var(--tcl);color:var(--tcd);border:1.5px solid var(--tc);transition:all .22s}
.nav-card:hover .nav-card-link{background:var(--tc);color:var(--white)}
/* informational tiles (these three have no target page) */
.info-band{margin-top:30px;padding-top:26px;border-top:1px solid var(--cream-border)}
.info-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.info-tile{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;background:var(--white);border:1px solid var(--cream-border);border-radius:14px;padding:20px 18px;transition:all .28s}
.info-tile:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(42,58,26,.09);border-color:var(--cat-main)}
.info-link{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--cat-dark);margin-top:10px;transition:gap .2s}
.info-tile:hover .info-link{gap:10px}
.info-tile .ic{width:44px;height:44px;border-radius:12px;background:var(--cat-light);display:flex;align-items:center;justify-content:center;font-size:20px}
.info-tile b{display:block;font-size:15.5px;color:var(--green-deepest);margin-bottom:4px;font-family:'Playfair Display',serif;font-weight:600}
.info-tile span{font-size:13.5px;color:var(--text-mid);line-height:1.6;display:block}
@media(max-width:960px){.nav-cards{grid-template-columns:1fr}.info-tiles{grid-template-columns:1fr}}
/* ===== STATS ===== */
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
.stat-cell{background:rgba(255,255,255,.09);border:1.5px solid rgba(255,255,255,.18);border-radius:14px;padding:16px 18px}
.stat-cell b{display:block;font-family:'Playfair Display',serif;font-size:28px;color:var(--gold-main);line-height:1.05}
.stat-cell span{font-size:12.5px;color:rgba(255,255,255,.72);display:block;margin-top:3px;line-height:1.4}
/* ===== LOCATION CARDS ===== */
.loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.loc-card{background:var(--white);border:1px solid var(--cream-border);border-radius:18px;overflow:hidden;transition:all .3s;position:relative}
.loc-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(42,58,26,.12);border-color:var(--cat-main)}
.loc-photo{aspect-ratio:16/10;overflow:hidden}
.loc-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.loc-card:hover .loc-photo img{transform:scale(1.05)}
.loc-body{padding:24px 24px 26px}
.loc-body h3{font-size:21px;margin-bottom:8px}
.loc-body p{color:var(--text-mid);font-size:14px;line-height:1.6}
/* location cards */
.location-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.location-card{position:relative;background:var(--white);border:1px solid var(--cream-border);
border-top:5px solid var(--cat-main);border-radius:20px;padding:28px 26px;transition:all .3s;
display:flex;flex-direction:column}
.location-card:hover{transform:translateY(-6px);box-shadow:0 18px 42px -10px var(--cat-main);border-color:var(--cat-main)}
.loc-top{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.loc-pin{width:52px;height:52px;border-radius:15px;background:var(--cat-light);display:flex;align-items:center;
justify-content:center;font-size:24px;flex-shrink:0}
.location-card h3{font-size:21px;margin:0;line-height:1.25}
.loc-city{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cat-dark);margin-top:3px}
.location-row{display:grid;grid-template-columns:26px 84px 1fr;gap:10px;align-items:baseline;padding:10px 0;
border-bottom:1px solid var(--cream-border);font-size:14px;color:var(--text-mid)}
.location-row:last-of-type{border-bottom:none}
.location-row i{font-style:normal;font-size:15px;line-height:1.4}
.location-row b{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted)}
.location-row a{color:var(--cat-dark);font-weight:700}
.loc-hint{margin-top:14px;background:var(--gold-light);border:1px solid var(--gold-main);border-radius:12px;
padding:11px 14px;font-size:13px;color:var(--gold-deeptext);display:flex;gap:8px;align-items:flex-start}
.location-card .btn{margin-top:16px;width:100%}
/* ===== HOME ===== */
.hero-inner{max-width:var(--max)}
/* Kennzahlen-Band: schmaler Streifen, sitzt UNTER dem Foto und überdeckt es nicht.
Bewusst zurückhaltend, damit der Termin-Button im Hero die Hauptrolle behält. */
.stats-band{background:var(--cream-bg);padding:0 0 26px}
.stats-card{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--cream-border);
border:1px solid var(--cream-border);border-radius:14px;overflow:hidden;
margin-top:-20px;position:relative;z-index:5;box-shadow:0 8px 22px -12px rgba(42,58,26,.18)}
.stat{background:var(--white);padding:14px 16px;text-align:center}
.stat b{display:block;font-family:'Playfair Display',serif;font-size:23px;line-height:1.1;
color:var(--gold-deeptext);letter-spacing:-.3px}
.stat span{display:block;margin-top:3px;font-size:11.5px;color:var(--text-muted);line-height:1.4}
.trust-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin-top:16px}
.trust-row span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--text-mid)}
.trust-row i{font-style:normal;font-size:13px;line-height:1}
@media(max-width:900px){
.stats-card{grid-template-columns:repeat(2,1fr);margin-top:-16px}
.stat b{font-size:21px}
.trust-row{gap:8px 18px}
}
@media(max-width:520px){
.stats-card{grid-template-columns:1fr;margin-top:-12px;border-radius:12px}
.stat{padding:11px 16px;display:flex;align-items:baseline;gap:10px;text-align:left}
.stat b{font-size:19px;flex-shrink:0;min-width:78px}
.stat span{margin-top:0}
/* Die Vertrauenshinweise standen hier untereinander — drei Zeilen auf einem
ohnehin langen Bildschirm. Als umbrechende Reihe werden daraus zwei. */
.trust-row{gap:6px 14px}
}
/* diagnosis cards */
.dg-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.dg{background:var(--white);border:1px solid var(--cream-border);border-radius:16px;overflow:hidden;
display:flex;flex-direction:column;transition:all .3s;position:relative}
.dg:hover{transform:translateY(-6px);box-shadow:0 16px 36px rgba(42,58,26,.13);border-color:var(--cat-main)}
.dg-fig{aspect-ratio:1/1;background:linear-gradient(135deg,var(--cat-light),var(--gold-light));
display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.dg-fig img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.dg:hover .dg-fig img{transform:scale(1.06)}
.dg-body{padding:14px 16px 16px;display:flex;align-items:center;gap:8px;justify-content:space-between}
.dg-body b{font-size:14px;color:var(--green-deepest);line-height:1.3;font-weight:700}
.dg-arrow{color:var(--cat-dark);font-weight:700;flex-shrink:0;transition:transform .2s}
.dg:hover .dg-arrow{transform:translateX(3px)}
/* therapy cards */
.th-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.th{background:var(--white);border:1px solid var(--cream-border);border-top:5px solid var(--tc);border-radius:16px;
padding:22px 20px;display:flex;flex-direction:column;transition:all .3s;position:relative}
.th:hover{transform:translateY(-7px);box-shadow:0 18px 40px -8px var(--tc);border-color:var(--tc)}
.th-ic{width:48px;height:48px;border-radius:13px;background:var(--tcl);display:flex;align-items:center;
justify-content:center;font-size:22px;margin-bottom:12px}
.th h3{font-size:17.5px;margin-bottom:8px}
.th p{color:var(--text-mid);font-size:13.5px;line-height:1.55;flex:1;margin-bottom:14px}
.th-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:12px;border-top:1px solid var(--cream-border)}
.th-loc{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tcd);
background:var(--tcl);padding:4px 10px;border-radius:20px}
.th-arrow{width:32px;height:32px;border-radius:50%;background:var(--tcl);color:var(--tcd);display:flex;
align-items:center;justify-content:center;font-weight:700;transition:all .22s}
.th:hover .th-arrow{background:var(--tc);color:var(--white)}
/* 4 steps as a connected chain (same pattern as the Zeitstrahl) */
/* Spaltenzahl kommt aus --schritte (blocks/block-schrittfolge.php), Standard 4.
Früher stand sie als Inline-Stil am Element und gewann damit gegen die
@media-Regeln weiter unten — der Block blieb auf dem Handy vierspaltig. */
.st4{position:relative;display:grid;
grid-template-columns:repeat(var(--schritte,4),minmax(0,1fr));margin-top:10px}
/* Das Emoji 👣 zeigt von sich aus nach oben. Der Weg auf dieser Seite
läuft waagrecht — gedreht laufen die Spuren mit ihm nach vorn. */
.st4-feet{position:absolute;top:14px;font-size:15px;opacity:.45;z-index:0;pointer-events:none;
transform:rotate(90deg);transform-origin:center}
.st4-feet:nth-of-type(1){left:25%;top:10px;transform:translateX(-50%) rotate(82deg)}
.st4-feet:nth-of-type(2){left:50%;top:18px;transform:translateX(-50%) rotate(98deg)}
.st4-feet:nth-of-type(3){left:75%;top:10px;transform:translateX(-50%) rotate(82deg)}
@media(max-width:900px){.st4-feet{display:none}}
.st4::before{content:'';position:absolute;left:12.5%;right:12.5%;top:32px;height:5px;border-radius:3px;
background:linear-gradient(90deg,var(--cat-mid),var(--cat-main) 55%,var(--gold-main));z-index:0}
.st4-cell{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding:0 9px}
.st4-num{width:64px;height:64px;border-radius:50%;background:var(--white);border:4px solid var(--cat-main);
color:var(--cat-dark);font-family:'Playfair Display',serif;font-weight:700;font-size:22px;display:flex;
align-items:center;justify-content:center;box-shadow:0 5px 16px rgba(42,58,26,.14);transition:all .28s;flex-shrink:0}
.st4-cell:last-child .st4-num{border-color:var(--gold-main);background:var(--gold-light);color:var(--gold-deeptext);
box-shadow:0 0 0 9px rgba(235,195,95,.2)}
.st4-cell:hover .st4-num{transform:scale(1.07)}
.st4-card{margin-top:18px;background:var(--white);border:1px solid var(--cream-border);border-radius:16px;
padding:20px 18px;text-align:center;transition:all .3s;position:relative;width:100%}
.st4-cell:hover .st4-card{transform:translateY(-4px);box-shadow:0 14px 32px rgba(42,58,26,.1);border-color:var(--cat-main)}
.st4-card::before{content:'';position:absolute;top:-18px;left:50%;width:2px;height:18px;background:var(--cat-mid);transform:translateX(-50%)}
.st4-tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--cat-deeptext);background:var(--cat-light);padding:4px 10px;border-radius:20px;margin-bottom:8px}
.st4-card h3{font-size:16.5px;margin-bottom:8px;line-height:1.3}
.st4-card p{color:var(--text-mid);font-size:13.5px;line-height:1.6}
/* team teaser */
.tt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tt{background:var(--white);border:1px solid var(--cream-border);border-radius:18px;padding:24px;
display:grid;grid-template-columns:96px 1fr;gap:20px;align-items:start;transition:all .3s;position:relative}
.tt:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(42,58,26,.11);border-color:var(--cat-main)}
.tt img{width:96px;aspect-ratio:3/4;object-fit:cover;border-radius:14px;border:2.5px solid var(--cat-mid)}
.tt h3{font-size:16.5px;margin-bottom:3px}
.tt .role{font-size:12px;color:var(--text-muted);margin-bottom:9px}
.tt blockquote{font-family:'Playfair Display',serif;font-style:italic;font-size:14px;color:var(--green-deepest);line-height:1.5}
/* adult bridge — HOME4MOTION brand colours: #EC7E41 orange, #51596E dark blue */
.adult{--a-orange:#EC7E41;--a-blue:#51596E;--a-blue-l:#EEF0F4;
display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center;
background:linear-gradient(135deg,var(--a-blue-l) 0%,var(--white) 58%);
border:2px solid var(--a-blue);border-radius:22px;padding:36px;position:relative;overflow:visible;
box-shadow:0 16px 40px -16px var(--a-blue)}
.adult-badge{position:absolute;top:-14px;left:32px;background:var(--a-blue);color:var(--white);
font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:7px 16px;
border-radius:20px;box-shadow:0 4px 12px -2px var(--a-blue)}
.adult h2{font-size:25px;margin-bottom:10px;color:var(--a-blue)}
.adult p{color:var(--text-mid);font-size:14px;line-height:1.6;margin-bottom:10px}
.adult .sub{font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--a-orange);margin:16px 0 6px}
.adult .btn{background:var(--a-orange);border-color:var(--a-orange);color:var(--white)}
.adult .btn:hover{background:var(--a-blue);border-color:var(--a-blue);color:var(--white)}
.adult-photo{border-radius:16px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 12px 28px rgba(81,89,110,.22)}
.adult-photo img{width:100%;height:100%;object-fit:cover}
@media(max-width:1024px){
.dg-grid,.th-grid{grid-template-columns:repeat(3,1fr)}
.tt-grid{grid-template-columns:1fr}
}
@media(max-width:900px){
/* Direkt grid-template-columns, nicht über --schritte: die Zahl steht als
Eigenschaft im style-Attribut des Elements, und ein Inline-Wert gewinnt
auch bei Eigenschaften gegen jede @media-Regel. Der Basiswert von .st4
liest die Eigenschaft; hier wird die Eigenschaft übergangen. */
.st4{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:26px}
.st4::before{display:none}
.adult{grid-template-columns:1fr}
}
@media(max-width:640px){
.dg-grid,.th-grid{grid-template-columns:1fr}
.st4{grid-template-columns:minmax(0,1fr)}
.st4{row-gap:22px}
.tt{grid-template-columns:1fr}
.tt img{width:120px}
}
/* ===== BREITE BILDSCHIRME: Hero-Foto bekommt mehr Höhe =====
Ohne min-height bestimmt nur der Text die Höhe – auf 1600px+ wird das Foto
dadurch extrem beschnitten. Der Inhalt bleibt vertikal zentriert. */
@media(min-width:1280px){
/* Kurze Rechnung, weil die Höhe hier keine Geschmacksfrage ist:
Die Fotos haben das Verhältnis 3:2 (etwa 2000x1333). background-size:cover
skaliert auf die Breite — auf 1600px wird das Bild 1600x1067 gross. Von
diesen 1067 Pixeln zeigte eine 420px hohe Leiste nur 39 %: ein waagrechter
Streifen aus der Bildmitte.
Mehr vom Foto zeigen und gleichzeitig die Breite fuellen geht nur ueber
eine hoehere Leiste. „contain" wuerde das ganze Foto zeigen, liesse aber
links und rechts breite Luecken; 100%x100% wuerde es verzerren und
Gesichter breitquetschen. Deshalb hoeher, nicht anders skaliert. */
.hero{min-height:560px;display:flex;align-items:center;padding-top:48px;padding-bottom:44px}
.hero > .wrap{width:100%}
}
@media(min-width:1600px){
.hero{min-height:620px}
.hero h1{font-size:50px}
}
@media(min-width:1900px){
.hero{min-height:470px}
}
/* ============================================================
MOBILE HARDENING · Mobile ist der Haupt-Traffic
Wird zuletzt eingebunden und gewinnt daher bei gleicher Spezifitaet.
============================================================ */
@media(max-width:1024px){
.wrap{padding:0 24px}
}
@media(max-width:900px){
.wrap{padding:0 18px}
/* jedes zweispaltige Layout wird einspaltig */
.ansatz-grid,.warum-intro-grid,.warum-grid,.explain-grid,.loc-grid,.location-grid,
.end-grid,.form-layout,.map-grid,.intensiv-band,.apart-band,.story-box,.wel-grid,
.dx-grid,.nav-cards,.combine-box .warum-intro-grid{grid-template-columns:1fr!important}
/* Fotos werden nicht zum Streifen */
.ansatz-photo-wrap,.warum-photo-wrap,.wel-photo{max-width:260px;margin-left:auto;margin-right:auto}
/* drei- und mehrspaltige Raster auf zwei Spalten */
.diag-grid,.subtherapy-grid,.feature-grid,.why-grid,.fin-grid,.prod-grid,.pr-grid,
.path-grid,.combine-flow,.early-cols,.chal-grid,.gal,.info-tiles,.disc-strip,
.stat-strip,.trust-strip,.hub-grid,.toffer-grid,.ap-grid,.price-grid,
.fgrid,.why-cell-grid{grid-template-columns:repeat(2,1fr)!important}
.combo-strip{grid-template-columns:1fr!important}
/* dekorative Blaetter/Punkte kollidieren in schmalen Spalten mit Text */
.deco{display:none}
}
@media(max-width:640px){
.wrap{padding:0 16px}
/* konsequent einspaltig */
.diag-grid,.subtherapy-grid,.feature-grid,.why-grid,.fin-grid,.prod-grid,.pr-grid,
.path-grid,.combine-flow,.early-cols,.chal-grid,.gal,.info-tiles,.disc-strip,
.hub-grid,.toffer-grid,.ap-grid,.price-grid,.fgrid,.cmp-2{grid-template-columns:1fr!important}
.stat-strip,.trust-strip{grid-template-columns:1fr 1fr!important}
/* breite Kacheln geben ihre Sonderbreite auf */
.gal-item.wide,.pr-card.wide{grid-column:span 1!important}
.gal-item.wide .gal-fig{aspect-ratio:4/3}
/* Buttons voll breit – leichter zu treffen */
.hero-actions,.cta-buttons,.end-btns{flex-direction:column;align-items:stretch}
.hero-actions .btn,.cta-buttons .btn,.end-btns .btn,.form-actions .btn{width:100%}
.form-actions{flex-direction:column;align-items:stretch}
/* Typo und Abstaende zuruecknehmen */
h1{font-size:clamp(26px,7.4vw,34px)}
h2{font-size:clamp(21px,5.6vw,27px)}
h3{font-size:17px}
.hero{padding:48px 0 40px}
.hero-lede{font-size:14.5px}
.section{padding:40px 0}
.section-head{margin-bottom:22px}
.section-head h1,.section-head h2{margin-bottom:14px}
.section-head h1:last-child,.section-head h2:last-child{margin-bottom:0}
.section-head p{margin-top:14px}
.checklist{margin-top:14px}
/* Chip-Reihen scrollen statt auf vier Zeilen umzubrechen */
.chip-row,.gal-tools,.ov-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.chip-row::-webkit-scrollbar,.gal-tools::-webkit-scrollbar,.ov-row::-webkit-scrollbar{display:none}
/* zweite Sticky-Leiste wuerde zusammen mit dem Header den halben Screen fressen */
.tools{position:static!important;box-shadow:none}
/* Tier-Illustrationen an Kartenecken kleiner halten */
.pet{transform:scale(.82);transform-origin:top right}
.pet[style*="left"]{transform-origin:top left}
/* Karten-Innenabstaende */
.jrn-card,.rd-card,.gal-body,.loc-body,.form-box,.end-card,.combine-box,
.early-box,.warum-showcase,.intensiv-band,.apart-band,.story-box{padding-left:18px;padding-right:18px}
.form-box,.combine-box,.early-box,.warum-showcase,.intensiv-band,.apart-band,.story-box{padding-top:26px;padding-bottom:26px}
}
@media(max-width:400px){
.wrap{padding:0 13px}
.stat-strip,.trust-strip{grid-template-columns:1fr!important}
/* Auf sehr schmalen Bildschirmen kein Platz für die Tiere auf den Karten.
Der Kater im Cookie-Hinweis ist ausgenommen: er sitzt in der freien Ecke
über dem Hinweis und ist dort der eigentliche Inhalt des Bildes. */
.pet:not(.kk){display:none}
.footer-links{grid-template-columns:minmax(0,1fr)}
}
/* Tabellen scrollen immer, statt das Layout zu sprengen */
.tbl-wrap,.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* nichts darf die Seite seitlich verschieben */
img,svg,video,iframe{max-width:100%}
/* --- Mobile Feinschliff --- */
@media(max-width:640px){
/* min-width darf einen 100%-Button nicht ueber den Rand schieben */
.btn,.btn-cta-lg{min-width:0}
/* Lightbox: lange Geraetetexte muessen scrollen koennen */
.lb-inner{max-height:94vh}
.lb-cap{overflow-y:auto;max-height:34vh;-webkit-overflow-scrolling:touch}
.lb-stage img{max-height:46vh}
.lb-cap h3{font-size:19px}
.lb-nav{width:40px;height:40px}
/* zweite Sticky-Leiste kompakter halten */
.tabbar{padding:9px 16px}
.tab{padding:8px 13px;font-size:12.5px}
/* Formularfelder: 16px verhindert Auto-Zoom in iOS Safari */
.field input,.field select,.field textarea,.search-input{font-size:16px}
/* Fotoleiste */
.rail-item{height:230px}
.rail-foot{flex-wrap:wrap;gap:10px}
.rail-bar{max-width:none;order:3;flex-basis:100%}
}
/* ===== TERMIN MODAL (popup) ===== */
.tm-overlay{position:fixed;inset:0;z-index:500;background:rgba(20,28,10,.62);backdrop-filter:blur(3px);
display:none;align-items:center;justify-content:center;padding:20px}
.tm-overlay.open{display:flex}
.tm-box{position:relative;background:var(--white);border-radius:22px;max-width:480px;width:100%;
max-height:92vh;overflow-y:auto;box-shadow:0 30px 70px rgba(0,0,0,.32);animation:tmIn .25s ease}
@keyframes tmIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.tm-head{background:var(--green-deepest);color:var(--white);padding:24px 26px 20px;border-radius:22px 22px 0 0;position:relative}
.tm-head h3{font-family:'Playfair Display',serif;font-size:21px;color:var(--white);margin:0 0 6px}
.tm-head p{font-size:13px;color:rgba(255,255,255,.75);margin:0}
.tm-close{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;border:none;
background:rgba(255,255,255,.14);color:var(--white);font-size:16px;cursor:pointer;
display:flex;align-items:center;justify-content:center;transition:all .2s}
.tm-close:hover{background:rgba(255,255,255,.28)}
.tm-body{padding:24px 26px 26px}
.tm-field{margin-bottom:14px}
.tm-field label{display:block;font-size:12.5px;font-weight:700;color:var(--green-deepest);margin-bottom:6px}
.tm-field input,.tm-field textarea{width:100%;border:1.5px solid var(--cream-border);border-radius:12px;
padding:12px 14px;font-family:inherit;font-size:15px;color:var(--text-primary);background:var(--cream-bg);
transition:all .2s}
.tm-field input:focus,.tm-field textarea:focus{outline:none;border-color:var(--cat-main);background:var(--white);
box-shadow:0 0 0 3px rgba(92,138,60,.14)}
.tm-field textarea{resize:vertical;min-height:72px}
.tm-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tm-consent{display:flex;gap:10px;align-items:flex-start;font-size:12px;color:var(--text-muted);margin:16px 0 18px;line-height:1.5}
.tm-consent input{margin-top:3px;flex-shrink:0;width:16px;height:16px;accent-color:var(--cat-main)}
.tm-consent a{color:var(--cat-dark);font-weight:700}
.tm-submit{width:100%;min-height:52px;border:none;border-radius:var(--radius-btn);background:var(--gold-main);
color:var(--green-deepest);font-family:inherit;font-weight:700;font-size:15px;cursor:pointer;
transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px}
.tm-submit:hover{background:var(--gold-dark);color:var(--white)}
.tm-trust{text-align:center;font-size:11.5px;color:var(--text-muted);margin-top:12px}
.tm-error{font-size:12px;color:#B0392E;margin-top:-8px;margin-bottom:12px;display:none}
.tm-error.show{display:block}
.tm-req{color:#B0392E;font-weight:700}
.tm-select-wrap{position:relative}
.tm-field select{width:100%;border:1.5px solid var(--cream-border);border-radius:12px;padding:12px 40px 12px 14px;
font-family:inherit;font-size:15px;color:var(--text-primary);background:var(--cream-bg);
appearance:none;-webkit-appearance:none;cursor:pointer;transition:all .2s}
.tm-field select:focus{outline:none;border-color:var(--cat-main);background:var(--white);
box-shadow:0 0 0 3px rgba(92,138,60,.14)}
.tm-field select:invalid{color:var(--text-muted)}
.tm-select-arrow{position:absolute;top:50%;right:14px;transform:translateY(-50%);width:18px;height:18px;
color:var(--cat-dark);pointer-events:none}
.tm-select-arrow svg{width:100%;height:100%;display:block}
.tm-err{display:none;font-size:11.5px;color:#B0392E;margin-top:5px;line-height:1.4}
.tm-err.show{display:block}
.tm-field.invalid input,.tm-field.invalid textarea,.tm-field.invalid select{border-color:#B0392E;background:#FDF3F2}
.tm-note{font-size:11.5px;color:var(--text-muted);line-height:1.5;margin:2px 0 16px}
.tm-check svg{width:100%;height:100%}
.tm-check .tms-ring{fill:none;stroke:var(--gold-main);stroke-width:4;stroke-linecap:round;opacity:.5;
stroke-dasharray:250;stroke-dashoffset:250;animation:tmsRing .9s ease-out forwards}
.tm-check .tms-tick{fill:none;stroke:var(--gold-main);stroke-width:7.5;stroke-linecap:round;stroke-linejoin:round;
stroke-dasharray:60;stroke-dashoffset:60;animation:tmsTick .45s .6s cubic-bezier(.6,0,.3,1) forwards}
@keyframes tmsRing{to{stroke-dashoffset:0}}
@keyframes tmsTick{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
.tm-check .tms-ring,.tm-check .tms-tick{animation:none;stroke-dashoffset:0}
}
/* success state */
.tm-success{display:none;text-align:center;padding:36px 26px 30px}
.tm-success.show{display:block}
.tm-success .tm-check{width:66px;height:66px;border-radius:50%;background:var(--gold-light);border:3px solid var(--gold-main);
display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 18px}
.tm-success h3{font-family:'Playfair Display',serif;font-size:20px;color:var(--green-deepest);margin-bottom:8px}
.tm-success p{font-size:14px;color:var(--text-mid);line-height:1.6;margin-bottom:20px}
.tm-success .btn{width:100%;margin-bottom:10px}
.tm-form.hide,.tm-head.hide{display:none}
@media(max-width:480px){
.tm-row2{grid-template-columns:1fr}
.tm-box{border-radius:18px}
.tm-head{border-radius:18px 18px 0 0}
}
/* hero-breite — Der Hero-Bereich hält dieselbe Breite wie der übrige Inhalt.
Zusätzlich bekommt der Fließtext eine lesbare Zeilenlänge; über die volle
Breite von 1200px wären es rund 200 Zeichen pro Zeile. */
.hero-inner{max-width:1200px;margin:0 auto}
.hero .wrap{max-width:var(--max)}
.hero h1{max-width:980px}
.hero-lede{max-width:760px}
/* karten-innenabstand — Der Text lag ohne Luft an der Kartenkante. */
.icon-card{padding:24px 22px}
.icon-card h3{margin:12px 0 8px}
.icon-card p{margin:0}
.card-icon{margin-bottom:4px}
/* ═══════════════════════════════════════════════════════════════
Sprachumschaltung in der Kopfleiste
═══════════════════════════════════════════════════════════════ */
.sprach-wahl{display:flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700;
color:rgba(42,58,26,.45);margin-right:4px}
.sprach-wahl a{color:rgba(42,58,26,.55);text-decoration:none;padding:4px 6px;border-radius:6px}
.sprach-wahl a:hover{background:rgba(42,58,26,.08);color:var(--green-deepest)}
.sprach-wahl a.aktiv{color:var(--green-deepest);background:rgba(255,255,255,.55)}
/* ═══════════════════════════════════════════════════════════════
Karten der Behandlungsschwerpunkte: Innenabstand und Bildzuschnitt
Die Bilder wurden vorher verzerrt, weil kein Seitenverhältnis
vorgegeben war.
═══════════════════════════════════════════════════════════════ */
.subtherapy-card{overflow:hidden}
.subtherapy-card .sub-photo{aspect-ratio:4/3;overflow:hidden;background:var(--cream-bg)}
.subtherapy-card .sub-photo img{width:100%;height:100%;object-fit:cover;display:block}
.subtherapy-card .sub-body{padding:20px 22px 22px}
.subtherapy-card .sub-body h3{margin:0 0 8px}
.subtherapy-card .sub-body p{margin:0 0 12px}
.device-card{overflow:hidden}
.device-card .device-card-photo{aspect-ratio:4/3;overflow:hidden;background:var(--cream-bg)}
.device-card .device-card-photo img{width:100%;height:100%;object-fit:cover;display:block}
.device-card .device-card-body{padding:18px 20px 20px}
.card{padding:24px 22px}
.card h3{margin:10px 0 8px}
.card p{margin:0}
/* ============================================================================
FUSSZEILE AUF SCHMALEN GERÄTEN
============================================================================
Die Fusszeile hatte bisher keine einzige Regel für kleine Schirme. Mit der
festen Breite der ersten Spalte (340px) und dem zweispaltigen Adressraster
wäre sie auf dem Telefon aus dem Rahmen gelaufen. */
@media (max-width: 900px) {
/* Erste Spalte über die ganze Breite, Verweise zweispaltig */
.footer-brand { flex: 1 1 100%; }
/* Echtes Raster statt column-count: bei column-count wandert eine Gruppe
mitten im Fluss in die nächste Spalte, sodass Überschrift und Verweise
auseinandergerissen werden. Im Raster ist jede Gruppe eine Zelle. */
.footer-links { column-count: initial; display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 22px; }
.footer-group { break-inside: avoid; }
.footer-erwachsene { margin-top: 12px; }
}
@media (max-width: 560px) {
.footer { padding-top: 22px; }
/* Unter 400px eine Spalte — zwei Spalten ergäben knapp 170px je Spalte, dort
brechen Wörter wie „Neuroorthopädische Beratungstermine" unschön um.
Zwischen 400 und 560 bleiben zwei Spalten: das halbiert die Länge der
Fußzeile (gemessen 1100 statt 1512 Pixel). */
.footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-group { margin-bottom: 18px; }
/* Kontakt darf hier umbrechen — nowrap würde die Zeile aus dem
Bildschirm schieben. Deshalb untereinander statt nebeneinander. */
.footer-kontakt { flex-direction: column; align-items: flex-start; gap: 4px; white-space: normal; }
.footer-kontakt .trenner { display: none; }
/* Adressen untereinander — nebeneinander bleiben auf 360px pro Kasten
kaum 150px, die Strasse bricht dann mitten im Wort. */
.footer-locs { grid-template-columns: 1fr; }
/* Symbole etwas grösser: auf dem Telefon wird mit dem Finger getroffen,
34px sind dafür knapp. */
.footer-social a { width: 44px; height: 44px; border-radius: 10px; }
.footer-social a svg { width: 21px; height: 21px; }
.footer-erwachsene { flex-wrap: wrap; padding: 12px 14px; }
.footer-erwachsene .fe-pfeil { display: none; }
.footer-bottom { flex-direction: column; align-items: flex-start; gap: 6px; }
}
/* Sehr schmale Geräte (iPhone SE und Ähnliches) */
@media (max-width: 380px) {
.footer-kontakt { font-size: 11px; }
.footer-brand-name span { font-size: 16px !important; }
}
/* ============================================================================
COOKIE-HINWEIS
============================================================================
Freundlich, aber ehrlich. Ein Tier lugt über den Rand — dasselbe Muster wie
auf den Karten der Website.
„Alle akzeptieren" ist die auffällige Hauptschaltfläche, „Nur das
Notwendige" steht gleich daneben und ist mit einem Klick erreichbar. Genau
das verlangt die DSGVO: Ablehnen darf nicht schwerer sein als Zustimmen.
Auffälliger gestalten ist erlaubt, versteckt wäre es nicht. */
.cookie-hinweis{
position:fixed;bottom:20px;left:20px;right:20px;max-width:520px;
background:var(--white);
border:1px solid var(--cream-border);
border-radius:22px;
box-shadow:0 22px 60px rgba(42,58,26,.26), 0 2px 8px rgba(42,58,26,.08);
z-index:200;
overflow:visible;
animation:chAuf .42s cubic-bezier(.2,.9,.3,1.1)
}
@keyframes chAuf{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.cookie-hinweis.zu{display:none}
.cookie-hinweis.ch-weg{opacity:0;transform:translateY(16px);transition:all .26s ease}
/* Das Tier sitzt auf der oberen Kante */
.ch-tier{position:absolute;top:0;right:0;width:100%;height:0}
.ch-tier .pet{position:absolute}
/* Innenabstand und Überschrift des Hinweises. Standen im Bereich, der beim
Umbau der Keks-Bewegung versehentlich mitentfernt wurde; die Fassungen in der
@media-Regel weiter unten blieben stehen, weshalb eine Suche nach dem
Klassennamen fündig wurde und den Verlust verdeckt hat. */
.ch-innen{padding:24px 26px 20px}
.ch-titel{
font-family:'Playfair Display',serif;font-size:22px;line-height:1.2;
margin:0 0 10px;color:var(--green-deepest);padding-right:70px
}
.ch-text{margin:0 0 16px;color:var(--text-mid);line-height:1.6;font-size:14px}
/* ---- Auswahl im Detail ---- */
.ch-wahl{margin:0 0 16px}
.ch-wahl > summary{
cursor:pointer;font-size:13px;font-weight:700;color:var(--cat-dark);
list-style:none;padding:7px 0;display:inline-flex;align-items:center;gap:6px
}
.ch-wahl > summary::-webkit-details-marker{display:none}
.ch-wahl > summary::before{content:'▸';font-size:11px;transition:transform .2s}
.ch-wahl[open] > summary::before{transform:rotate(90deg)}
.ch-wahl > summary:hover{color:var(--green-deepest)}
.ch-zeile{
display:flex;gap:11px;align-items:flex-start;
padding:12px 13px;margin-bottom:7px;
background:var(--cat-light);border:1px solid var(--cream-border);border-radius:12px;
cursor:pointer;transition:border-color .16s
}
.ch-zeile:hover{border-color:var(--cat-mid)}
.ch-zeile input{width:18px;height:18px;margin-top:1px;accent-color:var(--cat-main);flex-shrink:0;cursor:pointer}
.ch-zeile input:disabled{cursor:default;opacity:.6}
.ch-zeile b{display:block;font-size:13.5px;color:var(--green-deepest)}
.ch-zeile b em{
font-style:normal;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
color:var(--cat-dark);background:var(--white);border:1px solid var(--cat-mid);
border-radius:20px;padding:2px 7px;margin-left:7px;vertical-align:1px
}
.ch-zeile small{display:block;font-size:12px;color:var(--text-muted);line-height:1.5;margin-top:3px}
/* ---- Schaltflächen ---- */
.ch-knoepfe{display:flex;gap:9px;flex-wrap:wrap}
.ch-btn{
font-family:inherit;font-size:14px;font-weight:600;line-height:1.3;
padding:12px 20px;border-radius:12px;cursor:pointer;border:1.5px solid transparent;
transition:all .18s
}
/* Die Hauptschaltfläche: gold, mit Gewicht */
.ch-btn-ja{
flex:1 1 auto;background:var(--gold-main);color:var(--green-deepest);
border-color:var(--gold-main);box-shadow:0 5px 16px rgba(235,195,95,.4)
}
.ch-btn-ja:hover{background:var(--gold-dark);border-color:var(--gold-dark);transform:translateY(-1px)}
/* Ablehnen: ruhig, aber klar sichtbar und gleich daneben */
.ch-btn-nein{background:var(--white);color:var(--text-mid);border-color:var(--cream-border)}
.ch-btn-nein:hover{border-color:var(--text-muted);color:var(--green-deepest)}
/* Die Kurzfassungen fuer das Telefon stehen mit in der Seite und sind
am Rechner ausgeblendet — siehe die @media-Regel weiter unten. */
.ch-text-kurz,.ch-kurz{display:none}
.ch-speichern{display:none}
.ch-wahl[open] ~ .ch-knoepfe .ch-speichern{display:inline-flex}
.ch-fuss{margin:14px 0 0;font-size:12px;color:var(--text-muted);display:flex;gap:8px;flex-wrap:wrap}
.ch-fuss a{color:var(--text-muted);text-decoration:underline}
.ch-fuss a:hover{color:var(--cat-dark)}
/* Schaltfläche in der Fusszeile, sieht aus wie die Verweise daneben */
.fuss-cookie{background:none;border:0;padding:0;font-family:inherit;font-size:11px;
color:rgba(255,255,255,.4);text-decoration:underline;cursor:pointer;transition:color .15s}
.fuss-cookie:hover{color:var(--gold-main)}
/* ── Die Katze frisst einen Keks ─────────────────────────────────────────────
Tier, Keks und Krümel stecken in einem SVG (lib/keks.php), deshalb genügen
hier Bewegungen in dessen eigenem Koordinatensystem — nichts muss von außen
ausgerichtet werden.
Ablauf, ein Durchgang von rund 8 Sekunden:
0,4 – 1,3 s Pfote hebt den Keks zum Maul
1,4 – 6,8 s drei Bisse: Maul auf, Keks kleiner, Augen kurz zu
ab 1,9 s Krümel fallen, jeweils direkt nach einem Biss
ab 7,0 s Keks ist weg, Maul zu, alles ruht
Eine Schleife wäre neben einem Text, den man lesen soll, störend.
Nur transform und opacity: beides rechnet der Browser auf der Grafikkarte,
ein Wechsel von cy oder r würde das SVG bei jedem Bild neu vermessen.
Bei SVG muss transform-origin ausdrücklich gesetzt werden — der Standard ist
die linke obere Ecke der ganzen Zeichenfläche, nicht die Mitte des Elements. */
/* Der Keks wandert von der Pfote hoch ans Maul */
.kk-keks{
transform-origin:28px 47.5px;
animation:kk-anheben 1.1s .4s cubic-bezier(.3,.7,.4,1) both;
}
@keyframes kk-anheben{
from{opacity:0; transform:translate(6px,7px) rotate(-18deg) scale(.85)}
60% {opacity:1}
to {opacity:1; transform:translate(0,0) rotate(0) scale(1)}
}
/* Abgebissen wird von oben: Drehpunkt am unteren Rand des Kekses, damit das
Kleinerwerden von der Maulseite her hereinfrisst. */
.kk-keks-koerper{
/* Drehpunkt am OBEREN Rand des Kekses, dort wo das Maul ist. Beim
Kleinerwerden bleibt diese Kante am Maul stehen und der Keks zieht sich
nach unten weg — das liest sich als Abbeissen. Mit dem Drehpunkt unten
rutschte er stattdessen vom Maul fort und wurde nur kleiner. */
transform-origin:28px 41.7px;
animation:kk-bisse 5.4s 1.4s ease-in-out both;
}
@keyframes kk-bisse{
0%,7% {transform:scale(1)}
11% {transform:scale(.9) translateY(-.8px)} /* erster Biss */
15%,40% {transform:scale(.76)}
44% {transform:scale(.66) translateY(-.8px)} /* zweiter Biss */
48%,73% {transform:scale(.5)}
77% {transform:scale(.4) translateY(-.8px)} /* dritter Biss */
81%,96% {transform:scale(.26); opacity:1}
100% {transform:scale(.05); opacity:0} /* aufgegessen */
}
/* Das Maul: die dunkle Öffnung klappt nach unten auf. Drehpunkt oben, sonst
ginge sie in der Mitte auseinander. */
.kk-maul-offen{
transform-origin:28px 35px;
transform:scaleY(0);
animation:kk-maul-auf 5.4s 1.4s ease-in-out both;
}
@keyframes kk-maul-auf{
0%,6% {transform:scaleY(0)}
9%,13% {transform:scaleY(1)} /* erster Biss */
17%,41% {transform:scaleY(.12)} /* kauen, Maul fast zu */
42%,46% {transform:scaleY(1)} /* zweiter Biss */
50%,74% {transform:scaleY(.12)}
75%,79% {transform:scaleY(1)} /* dritter Biss */
83%,100% {transform:scaleY(0)}
}
/* Die geschlossenen Maulschwünge verschwinden, solange das Maul offen ist —
sonst lägen beide Zustände übereinander. */
.kk-maul-zu{
animation:kk-maul-zu 5.4s 1.4s ease-in-out both;
}
@keyframes kk-maul-zu{
0%,6% {opacity:1}
9%,17% {opacity:0}
20%,41% {opacity:.6}
42%,50% {opacity:0}
53%,74% {opacity:.6}
75%,83% {opacity:0}
87%,100% {opacity:1}
}
/* Die Augen gehen beim Zubeissen kurz zu. Die Lider sind Striche in Fellfarbe
und fahren von oben herab. */
.kk-lider{
transform-origin:28px 26px;
transform:scaleY(0);
animation:kk-blinzeln 5.4s 1.4s ease-in-out both;
}
@keyframes kk-blinzeln{
0%,7% {transform:scaleY(0)}
10%,14% {transform:scaleY(1)}
18%,42% {transform:scaleY(0)}
44%,47% {transform:scaleY(1)}
51%,75% {transform:scaleY(0)}
77%,80% {transform:scaleY(1)}
84%,100% {transform:scaleY(0)}
}
/* Die haltende Pfote wippt mit jedem Biss ein wenig nach */
.kk-pfote{
transform-origin:35px 47px;
animation:kk-pfote 5.4s 1.4s ease-in-out both;
}
@keyframes kk-pfote{
0%,7% {transform:translate(0,0)}
11%,44%,77% {transform:translate(-1px,-1.5px)}
16%,49%,82% {transform:translate(0,0)}
100% {transform:translate(0,0)}
}
/* Die ganze Katze wippt beim Kauen — klein gehalten, sonst wirkt es zappelig */
.kk{
transform-origin:50% 88%;
animation:kk-kauen 5.4s 1.4s ease-in-out both;
}
@keyframes kk-kauen{
0%,7% {transform:translateY(0) rotate(0)}
12%,20%,45%,53%,78%,86% {transform:translateY(.6px) rotate(-1.6deg)}
16%,49%,82% {transform:translateY(0) rotate(1.2deg)}
92%,100% {transform:translateY(0) rotate(0)}
}
/* Krümel. Neun Stück, jeder mit eigener Bahn — sie fallen versetzt und
unterschiedlich weit, sonst sähe es nach einem Rieseln aus einem Punkt aus.
Drei Wellen, jeweils direkt nach einem Biss. */
.kk-kruemel circle{
opacity:0;
/* Ohne diese zwei Zeilen dreht rotate() jeden Krümel um den Ursprung der
Zeichenfläche (0,0) und schleudert ihn quer aus dem Bild. Bei SVG ist der
Standard für transform-origin nicht die Mitte des Elements. fill-box macht
die eigene Fläche des Kreises zum Bezug, center dessen Mitte. */
transform-box:fill-box;
transform-origin:center;
animation-duration:1.6s;
animation-timing-function:cubic-bezier(.3,.05,.7,1); /* fällt beschleunigt */
animation-fill-mode:both;
}
.kk-kruemel .kr1{animation-name:kk-fall-links; animation-delay:1.9s}
.kk-kruemel .kr2{animation-name:kk-fall-rechts; animation-delay:2.0s}
.kk-kruemel .kr3{animation-name:kk-fall-mitte; animation-delay:2.15s}
.kk-kruemel .kr4{animation-name:kk-fall-links; animation-delay:4.2s}
.kk-kruemel .kr5{animation-name:kk-fall-rechts; animation-delay:4.3s}
.kk-kruemel .kr6{animation-name:kk-fall-mitte; animation-delay:4.45s}
.kk-kruemel .kr7{animation-name:kk-fall-rechts; animation-delay:5.9s}
.kk-kruemel .kr8{animation-name:kk-fall-links; animation-delay:6.0s}
.kk-kruemel .kr9{animation-name:kk-fall-mitte; animation-delay:6.15s}
@keyframes kk-fall-links{
0% {opacity:0; transform:translate(0,0) rotate(0) scale(.6)}
10% {opacity:1; transform:translate(-1px,2px) rotate(30deg) scale(1)}
100%{opacity:0; transform:translate(-9px,28px) rotate(220deg) scale(1)}
}
@keyframes kk-fall-rechts{
0% {opacity:0; transform:translate(0,0) rotate(0) scale(.6)}
10% {opacity:1; transform:translate(1px,2px) rotate(-25deg) scale(1)}
100%{opacity:0; transform:translate(10px,26px) rotate(-240deg) scale(1)}
}
@keyframes kk-fall-mitte{
0% {opacity:0; transform:translate(0,0) rotate(0) scale(.6)}
10% {opacity:1; transform:translate(0,3px) rotate(15deg) scale(1)}
100%{opacity:0; transform:translate(2px,30px) rotate(180deg) scale(1)}
}
/* ---------------------------------------------------------------------------
Cookie-Hinweis am Telefon: eine schmale Leiste am unteren Rand
---------------------------------------------------------------------------
Vorher nahm der Hinweis 57 % des Bildschirms ein — Tier, langer Text und
Schaltflaechen untereinander. Beim ersten Besuch war von der Seite kaum
etwas zu sehen, und wer etwas lesen will, klickt dann irgendetwas weg. Eine
Leiste von rund einem Viertel der Hoehe zeigt dasselbe, ohne die Seite zu
verdecken: kurzer Text statt langem, zwei gleich grosse Schaltflaechen
nebeneinander, die Einzelauswahl und die Verweise als eine kleine Zeile
darunter.
**Ablehnen bleibt auf dem ersten Bildschirm**, als Schaltflaeche, gleich
gross und gleich gut lesbar wie das Zustimmen. Es hinter „Einstellungen" zu
legen, klein oder blass zu setzen oder kleiner zu machen als das Zustimmen
macht die Zustimmung unwirksam (EDSA-Leitlinien 03/2022, Pruefaktion zu
Cookie-Bannern 2023) — und zwar auch fuer Googles Einwilligungsmodus, die
Messung bliebe also obendrein leer.
**Links und rechts macht nur `order`.** Im Markup steht das Zustimmen
zuerst, weil Tastatur und Vorleseprogramm der Reihenfolge im Quelltext
folgen. Am Telefon gehoert es trotzdem nach rechts, unter den Daumen. Die
Reihenfolge zu vertauschen waere beides zugleich kaputt.
Das Tier wird hier ausgeblendet: auf einer Leiste von 32vh haengt es ueber
der Ueberschrift, statt freundlich am Rand zu sitzen. Am Rechner bleibt es.
--------------------------------------------------------------------------- */
@media(max-width:560px){
.cookie-hinweis{bottom:0;left:0;right:0;max-width:none;
border-radius:16px 16px 0 0;
box-shadow:0 -6px 24px rgba(42,58,26,.18)}
.ch-tier{display:none}
.ch-innen{padding:12px 14px calc(10px + env(safe-area-inset-bottom));
max-height:32vh;overflow-y:auto;
display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px}
.ch-titel,.ch-text-kurz,.ch-knoepfe{flex:1 1 100%}
.ch-lang{display:none}
.ch-kurz{display:inline}
/* Die Schaltflaechen stehen vor der Einzelauswahl, obwohl im Markup die
Auswahl davor steht — `.ch-wahl[open] ~ .ch-knoepfe` braucht genau diese
Reihenfolge im Quelltext, um den Speichern-Knopf zu zeigen. */
.ch-titel{order:1}.ch-text-kurz{order:2}.ch-knoepfe{order:3}.ch-wahl{order:4}.ch-fuss{order:5}
.cookie-hinweis:has(.ch-wahl[open]) .ch-innen{max-height:75vh}
.ch-titel{font-size:16px;margin:0 0 4px;padding-right:0}
.ch-text{display:none}
.ch-text-kurz{display:block;margin:0 0 10px;font-size:13px;line-height:1.45;color:var(--text-mid)}
.ch-knoepfe{flex-wrap:nowrap;gap:8px}
.ch-btn{flex:1 1 0;min-width:0;padding:11px 8px;font-size:14px;font-weight:700;
border-radius:10px;text-align:center;box-shadow:none}
/* Gold mit dunkelgruener Schrift, genau wie am Rechner: 7,28:1 und damit
ueber den 4,5:1, die WCAG fuer Text dieser Groesse verlangt. Weiss auf
dem Gold waeren 1,68:1 — auf einem Telefon in der Sonne nicht zu lesen.
Die Flaeche bleibt die auffaellige von beiden: daneben steht Weiss mit
Rand. */
.ch-btn-ja{order:2;background:var(--gold-main);border-color:var(--gold-main);color:var(--green-deepest)}
.ch-btn-ja:hover{transform:none}
.ch-btn-nein{order:1;background:var(--white);border-color:var(--cream-border);color:var(--green-deepest)}
.ch-btn-nein:hover{color:var(--green-deepest)}
/* Nach `.ch-btn-nein`, denn „Auswahl speichern" traegt beide Klassen. */
.ch-speichern{order:3}
.ch-wahl[open] ~ .ch-knoepfe{flex-wrap:wrap}
.ch-wahl[open] ~ .ch-knoepfe .ch-speichern{flex:1 1 100%;background:var(--white);
color:var(--green-deepest);border-color:var(--cream-border);justify-content:center}
/* Zugeklappt steht die Einzelauswahl klein neben den Verweisen, aufgeklappt
nimmt sie eine eigene Zeile ueber den Schaltflaechen. */
.ch-wahl{margin:0;flex:0 0 auto}
.ch-wahl[open]{flex:1 1 100%;order:3}
.ch-wahl[open] ~ .ch-knoepfe{order:4;margin-top:4px}
.ch-wahl > summary{font-size:12px;padding:8px 0 0}
.ch-zeile{padding:9px 10px;margin-bottom:6px}
.ch-fuss{margin:0 0 0 auto;font-size:11px;gap:6px}
/* „Gilt fuer alle Seiten von home4motion.com" und sein Trennzeichen: am
Rechner eine nuetzliche Fussnote, auf der Leiste eine Zeile zu viel. */
.ch-fuss > span:nth-last-child(-n+2){display:none}
}
@media(prefers-reduced-motion:reduce){
.cookie-hinweis{animation:none}
/* Wer Bewegung abbestellt hat, sieht die Katze mit einem ganzen Keks in der
Pfote — geschlossenes Maul, offene Augen, keine Krümel. Ein stimmiges Bild,
kein halber Zustand. Der Hinweis bleibt vollständig bedienbar. */
.kk,
.kk-keks,
.kk-keks-koerper,
.kk-pfote,
.kk-maul-zu{animation:none; opacity:1; transform:none}
.kk-maul-offen{animation:none; transform:scaleY(0)} /* Maul zu */
.kk-lider{animation:none; transform:scaleY(0)} /* Augen offen */
.kk-kruemel{display:none}
.ch-tier .pet{animation:none}
}
/* ============================================================================
SCHALTFLÄCHE „NACH OBEN"
============================================================================
Ein Vogel, der beim Überfahren den Kopf hebt und mit dem Flügel schlägt.
Beim Klick hüpft er nach oben und die Seite folgt ihm.
Alles über transform und opacity — beide laufen auf der Grafikkarte und
lösen kein Neuberechnen des Layouts aus. Ein Wechsel von width oder top
würde bei jedem Bild die ganze Seite neu vermessen. */
.nach-oben{
position:fixed;bottom:22px;right:22px;z-index:150;
width:60px;height:60px;padding:7px;
background:var(--white);
border:1.5px solid var(--cream-border);
border-radius:50%;
box-shadow:0 6px 20px rgba(42,58,26,.18);
cursor:pointer;
opacity:0;transform:translateY(14px) scale(.9);visibility:hidden;
transition:opacity .3s, transform .3s, visibility .3s, box-shadow .2s, border-color .2s
}
/* `visibility` zusaetzlich zur Durchsichtigkeit: solange die Schaltflaeche
nur unsichtbar, aber gezeichnet ist, haelt Safari fuer sie eine eigene
Grafikebene ueber der ganzen Seite offen und rastert beim Scrollen mit.
Ausgeblendet faellt die Ebene weg. */
.nach-oben.da{opacity:1;transform:none;visibility:visible}
.nach-oben:hover{box-shadow:0 10px 28px rgba(42,58,26,.26);border-color:var(--cat-main)}
.nach-oben:focus-visible{outline:3px solid var(--cat-main);outline-offset:3px}
.nach-oben svg{width:100%;height:100%;overflow:visible;display:block}
/* ---- Kopf hebt sich ---- */
.no-kopf{transform-origin:44px 30px;transition:transform .3s cubic-bezier(.34,1.4,.64,1)}
.nach-oben:hover .no-kopf{transform:rotate(-24deg) translateY(-2px)}
/* ---- Flügel schlägt ---- */
.no-fluegel{transform-origin:24px 34px}
.nach-oben:hover .no-fluegel{animation:noFluegel .5s ease-in-out infinite}
@keyframes noFluegel{
0%,100%{transform:rotate(0)}
50%{transform:rotate(-26deg) translateY(-2px)}
}
/* ---- Pfeil steigt auf ---- */
.no-pfeil{transition:opacity .25s, transform .35s ease-out}
.nach-oben:hover .no-pfeil{opacity:.9;animation:noPfeil 1.1s ease-out infinite}
@keyframes noPfeil{
0%{opacity:0;transform:translateY(6px)}
35%{opacity:.9}
100%{opacity:0;transform:translateY(-9px)}
}
/* ---- Sprung beim Klick ---- */
.nach-oben.huepft .no-vogel{animation:noSprung .6s cubic-bezier(.3,1.5,.5,1)}
.nach-oben.huepft .no-schatten{animation:noSchatten .6s ease-out}
@keyframes noSprung{
0%{transform:translateY(0)}
30%{transform:translateY(-13px) scale(1.05)}
60%{transform:translateY(-4px)}
100%{transform:translateY(0)}
}
@keyframes noSchatten{
0%,100%{transform:scale(1);opacity:.14}
35%{transform:scale(.66);opacity:.06}
}
/* Auf dem Telefon etwas kleiner und nicht im Weg der Daumenzone.
Zugleich mindestens 44 Pixel, damit sie mit dem Finger zu treffen ist. */
@media(max-width:560px){
.nach-oben{width:50px;height:50px;padding:5px;bottom:16px;right:14px}
}
/* Solange der Cookie-Hinweis unten steht, weicht die Schaltfläche aus —
sonst liegt sie darüber. */
.cookie-hinweis:not(.zu) ~ .nach-oben,
.cookie-hinweis:not([hidden]) ~ .nach-oben{bottom:auto;top:auto;display:none}
@media(prefers-reduced-motion:reduce){
.nach-oben,.no-kopf,.no-pfeil{transition:none}
.nach-oben:hover .no-fluegel,.nach-oben:hover .no-pfeil,
.nach-oben.huepft .no-vogel,.nach-oben.huepft .no-schatten{animation:none}
.nach-oben:hover .no-kopf{transform:rotate(-24deg)}
}
/* ============================================================================
HANDY: KORREKTUREN AUS DEM ERSTEN TEST AM GERÄT
============================================================================
Gesammelt am Ende der Datei, damit sie gegen die früheren Regeln gewinnen,
ohne dass an zwanzig Stellen etwas geändert werden muss. Alles unter 640px. */
@media(max-width:640px){
/* ---- Cookie-Hinweis: der Kater darf über den Rand hinausragen ----
Vorher stand am Hinweis `overflow-y:auto; overflow-x:visible`. Nach der
CSS-Spezifikation wird `visible` zu `auto`, sobald die andere Achse nicht
`visible` ist — der Kater über der Oberkante wurde also abgeschnitten.
Das Rollen übernimmt jetzt der innere Kasten, der Hinweis selbst behält
seinen sichtbaren Überlauf. */
.cookie-hinweis{overflow:visible; max-height:none}
.ch-innen{max-height:78vh; overflow-y:auto; -webkit-overflow-scrolling:touch}
/* ---- Diagnosekarten: Bild neben den Text, nicht darüber ----
Bei einer Spalte und `aspect-ratio:1/1` wurde das Bild 362x362 Pixel groß
und man musste je Karte einmal scrollen. Als Zeile mit kleinem Bild passen
fünf Karten auf einen Blick. */
/* Diagnosekarten als Zeile: kleines Bild links, Name rechts, Pfeil am Ende.
Bei einer Spalte und `aspect-ratio:1/1` war das Bild 362x362 Pixel groß und
man musste je Karte einmal scrollen.
Wichtig sind die Abstände: die Karte hat `overflow:hidden`, das Bild lag
deshalb an der Kante und der Name klebte direkt daneben. Jetzt trägt die
Karte selbst einen Innenabstand, das Bild bekommt eigene Ecken, und der
Name hat links wie rechts Luft. */
.dg{
display:grid;
grid-template-columns:84px 1fr;
align-items:center;
gap:14px;
padding:12px 14px;
border-radius:18px;
}
.dg-fig{
width:84px;
aspect-ratio:1/1;
border-radius:14px;
/* Ohne diese Zeile behält das Bild die eckigen Ecken der Karte */
overflow:hidden;
}
.dg-body{
padding:0;
gap:12px;
justify-content:space-between;
/* min-width:0 erlaubt dem Namen, innerhalb der Rasterzelle umzubrechen.
Ohne das drückt ein langer Name wie „Infantile Zerebralparese (ICP)" die
Zelle auf und die Karte läuft aus dem Bildschirm. */
min-width:0;
}
.dg-body b{font-size:15px; line-height:1.35}
.dg-arrow{font-size:17px}
/* Berührung statt Zeiger: der Hebe-Effekt beim Überfahren wirkt auf dem
Telefon wie ein Wackeln, weil :hover dort nach dem Antippen hängen bleibt. */
.dg:hover{transform:none; box-shadow:none; border-color:var(--cream-border)}
.dg:active{transform:scale(.985)}
.dg-grid{gap:12px}
/* ---- Team-Karten der Startseite: kein leerer Streifen rechts ----
Das Bild ist 120px breit, der Textbereich lag darunter über die ganze
Breite — rechts neben dem Bild blieb Platz ungenutzt. Als Zeile sitzt der
Text neben dem Bild. */
.tt{grid-template-columns:112px 1fr; align-items:start; gap:16px; text-align:left}
.tt img{width:112px}
.tt blockquote{margin-top:8px}
/* ---- Schrittfolge: eine Spalte ----
Die Spaltenzahl kommt als Eigenschaft --schritte vom Block. Ein Inline-Wert
gewinnt auch bei Eigenschaften gegen @media, deshalb wird hier
grid-template-columns direkt gesetzt statt die Eigenschaft zu ändern. */
.st4{grid-template-columns:minmax(0,1fr)}
/* Die Teamübersicht wird in assets/css/unser-team.css angepasst — diese
Datei wird nach site.css geladen, eine Regel hier hätte keine Wirkung. */
}
/* ---- Cookie-Hinweis und mobiles Menü überlagern sich ----
Beide liegen fest über der Seite (Hinweis z-index 200, Menü 190). Bei offenem
Menü deckte der Hinweis dessen untere Hälfte ab — der Terminstreifen am Ende
der Liste war nicht erreichbar. Solange das Menü offen ist, tritt der Hinweis
zurück; er ist danach unverändert da, es wird nichts zugestimmt oder
abgelehnt.
Die Regel gilt für alle Breiten: am Schreibtisch gibt es das mobile Menü
nicht, dort greift sie nie. */
body:has(.mobile-menu.open) .cookie-hinweis{
opacity:0;
pointer-events:none;
transition:opacity .18s ease;
}
/* Rückfall für Browser ohne :has() — dort setzt app.js die Klasse am body.
Ohne diesen Zweig bliebe das Verhalten in älteren Fassungen von Firefox
und Safari wie vorher. */
body.menue-offen .cookie-hinweis{opacity:0; pointer-events:none}
/* ---- Tiere auf Karten: nicht über den Bildschirmrand hinaus ----
Zwischen 401 und 640 Pixel sind die Tiere sichtbar (unter 401 werden sie
ausgeblendet, siehe weiter oben). Ihre Lage kommt aus den Prototypen, wo sie
für breite Bildschirme gesetzt wurde: `right:-14px` oder `left:-26px` lässt
ein Tier bewusst über die Kartenkante ragen. Auf einem 420 Pixel breiten
Bildschirm ragt es damit über die Seitenkante und erzeugt eine waagrechte
Rollleiste.
Die Tiere werden deshalb in diesem Bereich kleiner und die Überhänge
zurückgenommen — die überschriebenen Werte stehen als Inline-Stil am Element,
deshalb ist hier !important nötig. Der Kater im Cookie-Hinweis ist
ausgenommen, er hat seine eigene Lage. */
@media(min-width:401px) and (max-width:640px){
.pet:not(.kk){
width:46px!important;
max-width:46px!important;
}
/* Überhänge nach aussen aufheben: negative Werte werden zu 0, positive
bleiben. Ein Tier darf innerhalb der Karte sitzen, aber nicht daneben. */
.pet:not(.kk){right:6px!important; left:auto!important}
}
/* ---- Waagrechte Rollleiste am Handy: die letzten zwei Stellen ----
1. Filterknöpfe und Vergleichstabelle auf /alle-therapien
Für beide war `overflow-x:auto` vorgesehen — es hat nur nichts bewirkt. Der
Grund ist eine Eigenheit von Flexbox: ein Flex-Element bekommt als kleinste
Breite `min-width:auto`, also die Breite seines Inhalts. Ein Rollbereich
darin weigert sich damit, kleiner zu werden als sein Inhalt, und schiebt
stattdessen das Elternelement auf. Sichtbar war das als Seite mit 516 Pixel
Inhaltsbreite auf einem 390 Pixel breiten Schirm.
`min-width:0` hebt das auf. Es muss an jedem Flex-Element auf dem Weg
stehen, nicht nur am Rollbereich selbst — sonst gibt eine Ebene weiter oben
nicht nach.
2. Tiere auf Karten zwischen 401 und 640 Pixel
Ihre Lage kommt aus den Prototypen als Inline-Stil und ist für breite
Schirme gedacht: `right:-14px` oder `left:-26px` lässt ein Tier bewusst über
die Kartenkante ragen. Auf einem schmalen Schirm ragt es damit über den
Bildschirmrand. Ein vorheriger Versuch mit `right:6px!important` griff nicht,
weil einige Tiere über `left` positioniert sind — bei denen wirkt `right`
nicht, solange `left` gesetzt ist. Deshalb wird hier beides zurückgesetzt und
das Tier über `inset-inline-end` innerhalb der Karte gehalten. */
@media(max-width:900px){
/* `.filter-bar` wird hier zur Spalte, behält aber `flex-wrap:wrap` aus der
Grundregel. Bei einer umbrechenden Spalte streckt der Browser die Elemente
nicht auf die Containerbreite — sie behalten ihre Inhaltsbreite, und die
Knopfreihe (480px) schob die Seite auf. `width:100%` gibt eine feste
Quergröße; erst dadurch greift `overflow-x:auto` an der Knopfreihe. */
.filter-bar{min-width:0; flex-wrap:nowrap}
.filter-group{min-width:0; width:100%}
.chip-row,
.gal-tools,
.ov-row,
.trust-row{min-width:0; max-width:100%}
.cmp-wrap,
.tbl-wrap{min-width:0; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch}
}
/* Gespiegelte Tiere: Bezugspunkt der Spiegelung festlegen.
Die Tiere mit `transform:scaleX(-1)` standen am Handy über dem rechten
Bildschirmrand — und zwar um genau eine Tierbreite, gleichbleibend bei jeder
Bildschirmbreite. Die berechneten Werte (`right:8px`, Breite 46px) waren
dabei völlig richtig; das Tier lag laut Zahlen innerhalb der Karte.
Die Ursache ist derselbe Stolperstein wie bei den Krümeln im Cookie-Hinweis:
bei SVG ist der Bezugspunkt einer Transformation nicht die Mitte des
Elements. Die Spiegelung klappt das Tier deshalb um eine Kante statt an Ort
und Stelle, und sein sichtbarer Kasten wanders um seine eigene Breite nach
aussen. `transform-box:fill-box` macht die eigene Fläche zum Bezug,
`transform-origin:center` deren Mitte — dann bleibt das Tier stehen, wo die
Zahlen es hinsetzen.
Gilt für alle Breiten, nicht nur fürs Handy: am Schreibtisch war der Überhang
nur nicht störend, weil daneben genug Platz war. */
.pet{
transform-box:fill-box;
transform-origin:center;
}
@media(min-width:401px) and (max-width:640px){
.pet:not(.kk){
width:46px!important;
max-width:46px!important;
left:auto!important;
right:8px!important;
}
}
/* ---- Geschlossene Aufklappmenüs schieben die Seite auf ----
Die Menüs am Schreibtisch liegen absolut positioniert unter ihrem Menüpunkt
und sind im Ruhezustand nur durchsichtig (`opacity:0`), nicht entfernt — für
das Einblenden beim Überfahren. Sie zählen damit weiter zur Breite der Seite.
Beim rechten Menüpunkt reicht ein 440px breites Menü über den Rand: bei
1024px Bildschirmbreite wurde die Seite 1263px breit und bekam eine
waagrechte Rollleiste, ohne dass etwas sichtbar überstand.
Unter 1200px werden geschlossene Menüs deshalb ganz aus dem Fluss genommen.
Das Einblenden über opacity entfällt in diesem Bereich — dafür rollt die
Seite nicht mehr seitwärts. Ab 1200px ist genug Platz und die Überblendung
bleibt. */
@media(max-width:1279px){
.nav-item > .dropdown{display:none}
.nav-item:hover > .dropdown,
.nav-item:focus-within > .dropdown{display:block}
}
/* ---- Standortkarten auf sehr schmalen Geräten (320px, etwa iPhone SE) ----
Die Karte hat `min-width:auto` und wurde damit so breit wie ihr Inhalt
(319px bei 294px verfügbarer Breite). */
@media(max-width:400px){
.location-grid{grid-template-columns:minmax(0,1fr)}
.location-card{min-width:0}
.location-card *{min-width:0}
}
/* Hamburger überall dort, wo die Menüleiste ausgeblendet ist */
@media(max-width:1279px){
.hamburger{display:flex!important}
/* Die Regel für geschlossene Aufklappmenüs ist damit unnötig — die ganze
Leiste ist in diesem Bereich ausgeblendet. Sie bleibt als Absicherung
stehen, falls die Umschaltbreite wieder verschoben wird. */
}
/* ---- Sehr schmale Geräte (320px, etwa iPhone SE erster Generation) ----
Mehrere Karten haben `min-width:auto` und werden damit so breit wie ihr
Inhalt, statt sich in den verfügbaren Platz zu fügen. Bei 320px Breite ragen
sie über den Rand. Betroffen sind die Wertekarten auf „Über uns", die
Standortkarten auf „Kontakt" und die Ablaufkarten auf „Therapieablauf".
`min-width:0` an Karte und Inhalt erlaubt das Schrumpfen; `nowrap` an den
kleinen Auszeichnungen wird aufgehoben, weil eine nicht umbrechende Zeile
die Karte von innen aufdrückt. */
@media(max-width:360px){
.val-cell, .loc-card, .rd-card,
.val-cell > *, .loc-card > *, .rd-card > *,
.loc-head, .rd-head, .val-cell h3, .val-cell p{min-width:0}
.loc-kind, .rd-kind{white-space:normal}
/* Zweispaltige Raster auf sehr schmalen Geräten einspaltig */
.val-grid, .loc-grid, .rd-grid{grid-template-columns:minmax(0,1fr)}
}
/* ============================================================================
ABSTAND ZWISCHEN ÜBERSCHRIFT UND FOLGENDEM TEXT
============================================================================
Gemessen lagen die Abstände zwischen 0 und 12 Pixel — je Abschnitt anders,
weil sie an zwanzig Stellen einzeln gesetzt waren (teils als margin-bottom
an der Überschrift, teils als margin-top am Absatz, an einer Stelle gar
nicht). Der Text klebte an der Überschrift.
Eine Regel für alle: der Nachbar einer h2 bekommt 18 Pixel Abstand nach
oben, die Überschrift selbst keinen nach unten. Beides zusammen zu setzen
führte vorher dazu, dass sich die Werte an einigen Stellen addierten und an
anderen wegfielen.
`:where()` hält die Spezifität bei null, damit ein Abschnitt, der aus
gestalterischen Gründen einen anderen Abstand braucht, ihn ohne !important
überschreiben kann. */
:where(h2) + :where(p, ul, ol, div, .ansatz-text, .lede, .section-lede){
margin-top:18px;
}
:where(h2){margin-bottom:0}
/* Label über der Überschrift: etwas Luft nach unten, aber weniger als der
Textabstand — es gehört zur Überschrift und nicht zum Absatz. */
:where(.label) + :where(h2){margin-top:8px}
/* h3 innerhalb von Karten: dort ist weniger Platz, deshalb ein kleinerer Wert */
:where(h3) + :where(p, ul, ol){margin-top:10px}
/* Auf schmalen Schirmen etwas weniger, sonst wird der Abschnitt sehr lang */
@media(max-width:640px){
:where(h2) + :where(p, ul, ol, div, .ansatz-text, .lede, .section-lede){
margin-top:14px;
}
:where(h3) + :where(p, ul, ol){margin-top:8px}
}
/* Zwei Abschnitte hatten den engen Abstand über eigene Regeln beziehungsweise
ein style-Attribut. Die Inline-Angaben sind aus den Vorlagen entfernt (ein
Inline-Wert gewinnt gegen jede Regel hier), diese beiden bleiben: */
/* .panel-head wird in preise.css geregelt (wird spaeter geladen) */
.ch-innen h2 + .ch-text{margin-top:16px}
@media(max-width:640px){
.ch-innen h2 + .ch-text{margin-top:12px}
}
/* Überschriften in Karten: dort ist weniger Platz als in einem Abschnitt,
deshalb 12 statt 18 Pixel — aber nicht die gemessenen 0 bis 6 Pixel, bei
denen der Text an der Überschrift klebt. Die Klassen sind einzeln benannt,
weil die Kartenregeln in den Seiten-Stylesheets liegen und spezifischer sind
als eine allgemeine Regel. */
.pc-body h3 + p,
.price-card h3 + p,
.price-card h3 + ul,
.tm-head h3 + p,
.card h3 + p,
.rd-card h3 + p,
.loc-card h3 + p,
.val-cell h3 + p,
.device-card-body h3 + p{margin-top:12px}
/* ============================================================================
BAUSTEINE, DIE AUF JEDER SEITE EINSETZBAR SIND
============================================================================
Diese vier Bausteine kann die Redaktion überall hinzufügen. Ihre Regeln
gehören deshalb in site.css und nicht in ein Seiten-Stylesheet — dort wären
sie nur auf einer Seite wirksam. Genau dieser Fehler ist im Projekt schon
dreimal aufgetreten. */
/* Hinweis-Kasten. .early-box gab es nur in alle-diagnosen.css; hier eine
eigenständige Regel unter eigenem Namen. */
.hinweis-kasten{
display:flex; gap:18px; align-items:flex-start;
background:linear-gradient(135deg, var(--cream-bg) 0%, var(--white) 60%);
border:1px solid var(--cream-border); border-radius:18px;
padding:24px 26px;
}
/* Der Abstand haengt am h3, nicht am Absatz darunter. Grund: rich() packt
einen reinen Satz ohne Formatierung NICHT in ein
— dann griff die alte Regel `p{margin-top:10px}` ins Leere, und die Ueberschrift klebte mit 1px am Text. Am h3 gilt er fuer jeden Inhalt, auch fuer eine Liste. */ .hinweis-kasten h3{margin:0 0 12px; font-size:18px; line-height:1.35; color:var(--green-deepest)} .hinweis-kasten > div{color:var(--text-mid); font-size:15px; line-height:1.65} .hinweis-kasten p{margin:0 0 10px} .hinweis-kasten p:last-child{margin-bottom:0} .hinweis-kasten ul, .hinweis-kasten ol{margin:0 0 10px; padding-left:22px} .hinweis-kasten li{margin-bottom:4px} .hinweis-kasten li:last-child{margin-bottom:0} .hinweis-symbol{font-size:30px; line-height:1; flex:0 0 auto} /* Breites Bild mit Text darüber */ .bild-band{position:relative; min-height:320px; display:flex; align-items:center; overflow:hidden} .bild-band-foto{position:absolute; inset:0; width:100%; height:100%; object-fit:cover} .bild-band-schleier{position:absolute; inset:0} .bild-band-text{position:relative; z-index:1; padding:48px 0} .bild-band-text h2{color:var(--white); margin:0} .bild-band-text p{color:rgba(255,255,255,.82); font-size:17px; margin-top:14px; max-width:660px} /* Grüne Fläche für den Text-Abschnitt */ .section-green{background:var(--green-deepest)} .section-green h2, .section-green .label{color:var(--white)} .section-green p, .section-green li{color:rgba(255,255,255,.8)} @media(max-width:640px){ .hinweis-kasten{flex-direction:column; gap:12px; padding:20px 18px} .bild-band{min-height:240px} .bild-band-text{padding:32px 0} .bild-band-text p{font-size:15px} } /* ============================================================================ KARTEN-RASTER (Baustein „Karten mit Text") ============================================================================ Diese Regeln standen als .val-* nur in ueber-uns.css. Der Baustein ist auf jeder Seite einsetzbar, deshalb gehören sie nach site.css — genau dieser Fehler ist im Projekt schon mehrfach aufgetreten. Die alten Namen bleiben in ueber-uns.css stehen, damit dort nichts umbricht; hier die Fassung unter eigenem Namen. */ /* Die Karten fuellen die Reihe, egal wie viele es sind: auto-fit legt so viele Spalten an, wie bei 250px Mindestbreite hineingehen, und verteilt den Rest. Zwei Karten sind damit halb so breit wie die Reihe, drei ein Drittel, vier ein Viertel — vorher waren es immer vier Spalten, und bei drei Karten blieb die vierte leer. Die 250px sind gerechnet, nicht geraten: der Inhalt ist hoechstens 1240px breit (wrap 1320 minus 2x40 Innenabstand), also passen 4x250+3x18=1054 hinein und 5x250+4x18=1322 nicht mehr — vier Karten je Reihe bleiben damit das Maximum. */ .karten-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px} /* Eine einzelne Karte wuerde sonst ueber die ganze Breite laufen. */ .karten-raster > .karten-zelle:only-child{width:100%;max-width:560px;justify-self:center} .karten-zelle{background:var(--white);border:1px solid var(--cream-border);border-radius:16px;padding:24px 22px;transition:all .3s} .karten-zelle:hover{transform:translateY(-5px);box-shadow:0 14px 30px rgba(42,58,26,.09);border-color:var(--cat-main)} .karten-symbol{width:48px;height:48px;border-radius:13px;background:var(--cat-light);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:13px} .karten-zelle h3{font-size:16.5px;margin-bottom:6px;line-height:1.3} .karten-zelle p{color:var(--text-mid);font-size:13.5px;line-height:1.6} @media(max-width:900px){ .karten-raster{grid-template-columns:repeat(2,1fr)} } /* Ab hier untereinander statt zu zweit. Die Grenze lag bei 400 Pixeln; auf einem gewoehnlichen Telefon standen die vier Kacheln deshalb als 2x2, und der Text darin wurde in schmale Spalten gequetscht. Untereinander sind sie zwar zusammen hoeher, aber lesbar — so gewuenscht. */ @media(max-width:640px){ .karten-raster{grid-template-columns:minmax(0,1fr)} .karten-zelle, .karten-zelle > *, .karten-zelle h3, .karten-zelle p{min-width:0} } /* Am Handy kein Hebe-Effekt: :hover bleibt dort nach dem Antippen hängen */ @media(hover:none){ .karten-zelle:hover{transform:none; box-shadow:none} } /* ============================================================================ Bausteine aus „Über uns": Team-Karten, Gründerkarten, Zeitstrahl ============================================================================ Diese Regeln standen nur in ueber-uns.css. Die drei Bausteine sind auf jeder Seite einsetzbar, deshalb gehören sie hierher — sonst wären sie ausserhalb von „Über uns" ohne Gestaltung. Derselbe Fehler ist im Projekt mehrfach aufgetreten. In ueber-uns.css bleiben sie stehen; doppelte gleiche Regeln richten keinen Schaden an, und ein Entfernen dort wäre ein zweiter Eingriff ohne Gewinn. */ .team-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:14px;margin-top:24px} .team-chip{background:var(--white);border:1px solid var(--cream-border);border-radius:14px;padding:14px 12px 16px; text-align:center;transition:all .3s;position:relative} .team-chip:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(42,58,26,.11);border-color:var(--cat-main)} .team-chip img{width:96px;max-width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:12px; display:block;margin:0 auto;transition:transform .45s} .team-chip:hover img{transform:scale(1.04)} .team-chip b{display:block;font-family:'Playfair Display',serif;font-size:14px;color:var(--green-deepest);margin-top:11px;line-height:1.3} .team-chip span{font-size:11.5px;color:var(--text-muted);display:block;margin-top:2px;line-height:1.4} .team-chip .tc-more{display:block;font-size:11.5px;font-weight:700;color:var(--cat-mid);margin-top:8px;transition:color .2s} .team-chip:hover .tc-more{color:var(--cat-dark)} .fnd-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px} .fnd-card{background:var(--white);border:1px solid var(--cream-border);border-radius:18px;padding:26px;display:grid;grid-template-columns:110px 1fr;gap:22px;align-items:start;transition:all .3s;position:relative} .fnd-card:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(42,58,26,.11);border-color:var(--cat-main)} .fnd-photo{width:110px;aspect-ratio:3/4;object-fit:cover;border-radius:46% 54% 48% 52%/52% 44% 56% 48%;border:3px solid var(--cat-mid)} .fnd-role{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cat-dark);margin-bottom:4px} .fnd-card h3{font-size:19px;margin-bottom:8px} .fnd-card p{color:var(--text-mid);font-size:13.5px;line-height:1.6} .tl-list{display:flex;flex-direction:column;gap:14px} .tl-row{display:grid;grid-template-columns:86px 1fr;gap:20px;align-items:start;position:relative; scroll-margin-top:calc(var(--header-h) + 26px)} .tl-mark{display:flex;flex-direction:column;align-items:center;position:relative} .tl-num{width:62px;height:62px;border-radius:50%;background:var(--white);border:4px solid var(--cat-main); display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-weight:700; font-size:15px;color:var(--cat-dark);flex-shrink:0;z-index:2;transition:all .28s;box-shadow:0 4px 14px rgba(42,58,26,.12)} .tl-card{background:var(--white);border:1px solid var(--cream-border);border-left:5px solid var(--ac,var(--cat-main)); border-radius:16px;padding:20px 24px;transition:all .3s} .tl-card h3{font-size:18px;margin-bottom:7px;line-height:1.32} .tl-card p{color:var(--text-mid);font-size:14px;line-height:1.6} /* ============================================================================ BILDFORM DES BAUSTEINS „TEXT MIT FOTO" ============================================================================ Der Baustein zeigt das Bild normalerweise in einem umrandeten Band (`intensiv-band`). Auf „Über uns" hatte der Abschnitt „Wer wir sind" eine andere Form: ein Foto in organischer Rundung mit einem farbigen Kreis dahinter. Über das Feld „bildform" ist beides möglich. Die Regeln standen als .wer-photo nur in ueber-uns.css — der Baustein ist auf jeder Seite einsetzbar, deshalb hier. */ .tf-rund{ display:grid; grid-template-columns:auto 1fr; gap:40px; align-items:center; } .tf-rund-bild{position:relative; max-width:230px} .tf-rund-bild img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:48% 52% 45% 55%/50% 42% 58% 50%; border:4px solid var(--cat-mid); } /* Der Kreis dahinter. z-index:-1 setzt ihn hinter das Bild; das wirkt nur, wenn der Elternkasten position:relative hat — deshalb .tf-rund-bild. */ .tf-rund-bild::before{ content:''; position:absolute; width:70px; height:70px; border-radius:50%; background:var(--gold-mid); bottom:-12px; right:-8px; z-index:-1; opacity:.75; } @media(max-width:760px){ .tf-rund{grid-template-columns:1fr; gap:22px} .tf-rund-bild{max-width:180px} } /* ============================================================================ Baustein „Karten mit Foto und Schlagwörtern" ============================================================================ Die Regeln standen nur in apartments.css. Der Baustein ist auf jeder Seite einsetzbar, deshalb hier — sonst wäre er ausserhalb der Apartment-Seite ohne Gestaltung. */ .ap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .ap-card{background:var(--white);border:1px solid var(--cream-border);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:all .3s;position:relative} .ap-card:hover{transform:translateY(-7px);box-shadow:0 18px 40px rgba(42,58,26,.13);border-color:var(--cat-main)} .ap-photo{aspect-ratio:4/3;overflow:hidden} .ap-photo img{width:100%;height:100%;object-fit:cover;transition:transform .45s} .ap-card:hover .ap-photo img{transform:scale(1.06)} .ap-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1} .ap-tagline{font-size:12.5px;font-style:italic;color:var(--cat-dark);margin-bottom:12px} .ap-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px} .ap-tag{font-size:11.5px;background:var(--cat-light);border:1px solid var(--cat-mid);border-radius:14px;padding:4px 10px;color:var(--cat-deeptext);font-weight:600} .ap-link{font-size:13.5px;font-weight:700;color:var(--cat-dark);display:inline-flex;align-items:center;gap:5px;transition:gap .2s} .ap-card:hover .ap-link{gap:10px} /* ============================================================================ Baustein „Kasten mit Schaltfläche" ============================================================================ Die Regeln standen als .jobs-box nur in unser-team.css. Der Baustein ist auf jeder Seite einsetzbar, deshalb hier. */ .jobs-box{background:linear-gradient(135deg,var(--gold-light) 0%,var(--white) 58%);border:2px solid var(--gold-main); border-radius:22px;padding:34px 36px;position:relative;overflow:visible;box-shadow:0 16px 40px rgba(196,154,40,.15)} .jobs-box h3{font-size:23px;margin-bottom:9px} .jobs-box p{color:var(--text-mid);font-size:14px;line-height:1.6;margin-bottom:18px;max-width:760px} /* Name und Funktion unter dem runden Foto (Baustein „Text mit Foto"). Entspricht .wel-name aus therapieablauf.css — der Baustein ist überall einsetzbar, deshalb hier. */ .tf-rund-name{margin-top:14px; text-align:center; max-width:230px} .tf-rund-name b{display:block; font-size:14.5px; color:var(--green-deepest)} .tf-rund-name span{font-size:12.5px; color:var(--text-muted)} /* Hervorgehobener Satz im Baustein „Text mit Foto". Entspricht .wel-quote aus therapieablauf.css — der Baustein ist überall einsetzbar, deshalb hier. */ .tf-zitat{border-left:4px solid var(--gold-main);padding:14px 0 14px 18px;margin-top:18px;font-family:'Playfair Display',serif;font-style:italic;font-size:18px;color:var(--green-deepest);line-height:1.5} /* ============================================================================ Schrittfolge bei sehr schmalen Bildschirmen ============================================================================ Bei 320 Pixeln war die Seite 5 Pixel breiter als das Fenster. Kein Element überschritt den Rand — die Ursache lag im Raster: `grid-template-columns: var(--railw) 1fr` schrumpft die zweite Spalte nicht unter die Mindestbreite ihres Inhalts. Ein langes Wort oder eine Zahl drückt die Spalte auf und das Raster wird breiter als sein Kasten. `minmax(0, 1fr)` erlaubt das Schrumpfen; `min-width:0` an den Kindern verhindert dasselbe eine Ebene tiefer. Derselbe Fall wie zuvor bei den Filterknöpfen und den Standortkarten. */ @media(max-width:520px){ .road .rd-step{grid-template-columns:var(--railw) minmax(0, 1fr)} .road .rd-card, .road .rd-card > *{min-width:0} .road .rd-card{overflow-wrap:anywhere} } /* ============================================================================ Untermenü am rechten Rand ============================================================================ Die Untermenüs sind links am Menüpunkt ausgerichtet und 440 Pixel breit. Bei den letzten Punkten der Leiste ragten sie über den rechten Fensterrand hinaus — auf der englischen Fassung deutlicher, weil die Beschriftungen länger sind und die Punkte weiter rechts stehen. `right:0` beim letzten Menüpunkt richtet sein Untermenü nach rechts aus; die Breitenbegrenzung fängt schmale Fenster ab. */ .dropdown{max-width:min(440px, calc(100vw - 32px))} .dropdown.wide{min-width:min(440px, calc(100vw - 32px))} /* Ein Untermenü, das über den rechten Rand hinausreicht, wird nach rechts ausgerichtet. Über die Anzahl der Nachbarn zu zählen genügt nicht: in der Kopfzeile stehen zehn Punkte, und der überstehende war der sechste — nicht einer der letzten zwei. Deshalb entscheidet JavaScript, gemessen an der tatsächlichen Breite (siehe assets/js/app.js). */ .dropdown.nach-links{left:auto; right:0} /* Kein waagrechtes Scrollen durch ein Untermenü. Das JavaScript oben richtet ein überstehendes Untermenü nach rechts aus. Bis es läuft — und bei Fensterbreiten, bei denen das Menü trotzdem ein paar Pixel übersteht — verhindert diese Regel, dass die ganze Seite waagrecht scrollbar wird. `clip` und nicht `hidden`: `hidden` macht aus dem Element einen Scroll-Behälter und bricht `position:sticky` in der Kopfzeile. */ body{overflow-x:clip} /* ============================================================================ Bild gross anzeigen ============================================================================ Die Bildleisten trugen eine Lupe, aber kein Klick öffnete etwas. Diese Regeln gehören zu assets/js/bild-lupe.js. */ .ist-lupe{cursor:zoom-in} .ist-lupe:focus-visible{outline:3px solid var(--gold-main); outline-offset:2px} body.lupe-aktiv{overflow:hidden} .lupe-overlay{position:fixed; inset:0; z-index:9000; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(20,26,14,.88)} .lupe-overlay.offen{display:flex} .lupe-box{position:relative; max-width:min(1100px, 94vw); text-align:center} .lupe-bild{max-width:100%; max-height:76vh; border-radius:12px; background:#fff; box-shadow:0 20px 60px rgba(0,0,0,.4)} .lupe-text{color:#fff; margin:14px auto 0; max-width:70ch; font-size:14.5px; line-height:1.5} .lupe-zaehler{color:rgba(255,255,255,.7); margin:6px 0 0; font-size:13px} /* Fusszeile der Vergroesserung: Balken und Zaehler wie in der Bildleiste auf „Praxisraeume & Geraete" (.rail-foot). Am letzten Bild ist der Balken voll — man sieht, dass das Ende erreicht ist, statt es durch einen Sprung zurueck auf Bild 1 zu erfahren. */ .lupe-fuss{display:flex; align-items:center; gap:14px; margin:10px auto 0; max-width:420px} .lupe-fuss .lupe-zaehler{margin:0; white-space:nowrap} .lupe-balken{flex:1; height:4px; border-radius:3px; overflow:hidden; background:rgba(255,255,255,.22)} .lupe-fuellung{display:block; height:100%; width:0; border-radius:3px; background:linear-gradient(90deg, var(--cat-main,#91ABDA), var(--gold-main)); transition:width .15s linear} .lupe-nav[disabled]{opacity:.28; cursor:default} .lupe-nav[disabled]:hover{opacity:.28} .lupe-zu{position:absolute; top:-14px; right:-14px; width:40px; height:40px; border:none; border-radius:50%; background:#fff; color:var(--text-dark); font-size:24px; line-height:1; cursor:pointer} .lupe-nav{position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border:none; border-radius:50%; background:rgba(255,255,255,.9); color:var(--text-dark); font-size:26px; line-height:1; cursor:pointer} .lupe-vor{left:-58px} .lupe-nach{right:-58px} @media(max-width:900px){ .lupe-vor{left:6px} .lupe-nach{right:6px} .lupe-zu{top:6px; right:6px} } /* Verweis von der Gerätekarte auf die ausführliche Beschreibung. */ .device-mehr{display:inline-block; margin-top:10px; font-size:13.5px; font-weight:700; color:var(--cat-dark); text-decoration:none; border-bottom:1px solid currentColor} .device-mehr:hover{opacity:.75} /* Damit die Sprungmarke nicht unter der Kopfzeile landet. */ .gal-item[id]{scroll-margin-top:calc(var(--header-h) + 24px)} /* Hinweis-Kasten mit Foto: links Text, rechts Bild. Ohne Foto bleibt der Kasten mittig wie bisher. */ .jobs-box.hat-foto{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:34px; align-items:center; text-align:left} .jobs-box.hat-foto .jobs-text{max-width:56ch} .jobs-box.hat-foto .jobs-foto img{width:100%; height:auto; border-radius:16px; display:block} @media(max-width:820px){ .jobs-box.hat-foto{grid-template-columns:1fr; text-align:center} .jobs-box.hat-foto .jobs-text{max-width:none} .jobs-box.hat-foto .jobs-foto{order:-1} } /* Trennlinie zwischen Fragen. `--cream-border` (#EDE7DC) liegt zu dicht an der Cremefläche (#E2EADC): auf „Apartments" und „Preise" stand die FAQ auf Creme und die Linie war unsichtbar. Ein durchscheinendes Dunkelgrün wirkt auf jedem Untergrund — weiss, creme, grün — und bleibt so zurückhaltend wie gedacht. Steht hier und nicht in den elf Seiten-Stylesheets, in denen die Regel ursprünglich stand: eine Linie soll überall gleich aussehen. */ /* ===== FAQ-Akkordeon ===== Die Regeln standen in elf Seiten-Stylesheets, aber nicht hier — und `therapie-detail.css` war keines davon. Seit der Baustein „Häufige Fragen" seine Fragen über eine Kategorie zieht, lässt er sich auf jede Seite setzen; auf einer ohne eigene Kopie fehlte dann `.faq-a{display:none}`, und alle Antworten standen offen untereinander statt zugeklappt. Hier steht die Grundform, die neun der elf Dateien verwenden. Die Seiten-Stylesheets werden nach dieser Datei geladen und übersteuern sie weiterhin — wo eine Seite bewusst grössere Schrift hat (Angebotsseiten, 18px), bleibt das so. Deshalb werden die Kopien nicht entfernt. */ .faq-item{border-bottom:1px solid rgba(42, 58, 26, .14)} .faq-q{display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;font-weight:600;font-size:15.5px;color:var(--green-deepest);padding:16px 0;min-height:54px;transition:color .15s} .faq-q:hover{color:var(--cat-dark)} .faq-arrow{width:30px;height:30px;border-radius:50%;background:var(--cat-light);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--cat-deeptext);transition:all .25s;flex-shrink:0} .faq-item.open .faq-arrow{transform:rotate(180deg);background:var(--cat-main);color:var(--white)} .faq-a{color:var(--text-mid);font-size:14px;line-height:1.65;padding-bottom:16px;display:none} .faq-item.open .faq-a{display:block} /* Sprachschalter: ein zusammenhaengendes Feld statt zweier loser Eintraege mit Schraegstrich. Die laufende Sprache steht als heller Knopf darin — so ist auf einen Blick klar, wo man ist und wohin man wechseln kann. */ .sprach-schalter{display:inline-flex;align-items:center;gap:2px;padding:3px; background:rgba(42,58,26,.07);border:1px solid rgba(42,58,26,.10); border-radius:999px} .sprach-schalter a{display:inline-flex;align-items:center;justify-content:center; min-width:32px;padding:4px 9px;font-size:12px;font-weight:700;letter-spacing:.03em; color:rgba(42,58,26,.62);text-decoration:none;border-radius:999px; transition:background .15s,color .15s} .sprach-schalter a:hover{color:var(--green-deepest);background:rgba(255,255,255,.55)} .sprach-schalter a.aktiv{color:var(--green-deepest);background:#fff; box-shadow:0 1px 3px rgba(42,58,26,.14)} .sprach-schalter a.aktiv:hover{background:#fff} /* Zweiter Schalter fuers Telefon. Er steht neben dem Menuekopf und erscheint genau dann, wenn dieser erscheint — dieselben Grenzen wie bei .hamburger, und die haengen an der Sprache, weil die englische Menueleiste breiter ist. .hamburger schiebt sich sonst mit margin-left:auto ganz nach rechts; steht der Schalter davor, uebernimmt er das Schieben und die beiden bleiben nebeneinander. */ .sprach-mobil{margin-left:auto;margin-right:10px} .sprach-mobil+.hamburger{margin-left:0} @media(min-width:1420px){html[lang^="de"] .sprach-mobil{display:none}} @media(min-width:1760px){html[lang^="en"] .sprach-mobil{display:none}} /* Anrufen in der Kopfzeile, mittig zwischen Logo und Sprachwahl. Erscheint und verschwindet mit dem Burger: ist die Menueleiste ausgeklappt, steht rechts schon „Informationstermin", und zwei Handlungsknoepfe nebeneinander waeren einer zu viel. Die Breiten sind deshalb dieselben wie bei `.sprach-mobil` darueber. Die Gestalt ist die von `.btn-header` — derselbe Knopf wie der Terminknopf der breiten Leiste, nur mit anderer Beschriftung. Ein eigenes Aussehen fuer eine Handlung, die es schon gibt, waere eine zweite Sprache in derselben Zeile. `margin:0 auto` stellt ihn in die Mitte des freien Raums zwischen Logo und Sprachwahl; das `margin-left:auto` der Sprachwahl wird dafuer aufgehoben, sonst draengte es den Knopf nach links. */ .tel-mobil{margin:0 auto;min-height:44px;display:inline-flex;align-items:center} .tel-mobil+.sprach-mobil{margin-left:0} @media(min-width:1420px){html[lang^="de"] .tel-mobil{display:none}} @media(min-width:1760px){html[lang^="en"] .tel-mobil{display:none}} /* Der Blog-Eintrag wird hervorgehoben. **Zwei Anlaeufe waren falsch:** ein goldener Punkt verschwand auf dem gelben Band — zwei helle Warmtoene nebeneinander loesen sich ineinander auf. Ein gruener Punkt war sichtbar, stiess aber an den Nachbarn „Kontakt". Eine leichte Plakette braucht keinen Platz daneben und ist auf jedem Untergrund des Kopfbands zu erkennen. */ .nav-link-blog{ background:rgba(42,58,26,.09); border:1px solid rgba(42,58,26,.14); border-radius:999px; padding-left:12px;padding-right:12px; } .nav-link-blog:hover{background:rgba(42,58,26,.16);border-color:rgba(42,58,26,.28)} /* Auf breiten Bildschirmen etwas mehr Raum, aber nicht ueber die ganze Breite: 1660 und 1800 waren zu viel — die Kopfzeile lief dann quer ueber den ganzen Bildschirm und stand nicht mehr im Verhaeltnis zum Inhalt darunter. 1300 reicht, damit sich die Eintraege loesen, ohne dass das Band ausufert. */ /* **1300 reichen mit den Sinnbildern nicht.** Gemessen bei 1440: Logo 113 + Menue 1045 + rechte Seite 225 + Abstand = 1397. Alles Weitere waere von den Namen selbst abgezwackt worden — jeder Pixel dort haengt an einem Wort oder einem Sinnbild, waehrend im Band nur Luft fehlt. Deshalb 1400 statt 1300. Das ist knapp ueber der gewuenschten Grenze, aber weit entfernt von „ueber die ganze Breite": bei einem Bildschirm von 1920 bleiben links und rechts je 260 Pixel Rand. */ @media (min-width: 1400px) { .header-inner { max-width: 1400px; } } /* ── Mittlere Bildschirme: der Terminknopf wurde abgeschnitten ──────────────── Gemessen bei 1440 Pixeln: Logo 113 + Menue 1130 + rechte Seite 256 = 1499 bei 1300 verfuegbaren. Der Ueberschuss ging zulasten des Knopfes ganz rechts — er lief aus dem Band heraus, waehrend links neben dem Logo noch Platz war. Zwei Massnahmen, beide dort, wo am wenigsten verloren geht: **Die Sinnbilder vor den Therapienamen entfallen.** Sechs Bilder mal achtzehn Pixel sind gut hundert — und der Name allein sagt dasselbe. Auf grossen Bildschirmen bleiben sie. **Engere Abstaende.** Bei zehn Eintraegen bringen drei Pixel je Seite noch einmal sechzig. Ein Knopf, der auf halber Strecke abgeschnitten ist, wiegt schwerer als ein fehlendes Sinnbild: er ist der Weg zum Termin. */ /* Die Kopfzeile ist auf 1300 Pixel begrenzt — auch auf einem Bildschirm von 1920. Der Platz im Band haengt also nicht von der Bildschirmbreite ab, und die folgenden Regeln gelten ueberall. **Die Sinnbilder bleiben.** Sie gehoeren zum Auftritt und waren der falsche Sparposten; die noetigen Pixel kommen aus lauter Kleinigkeiten, die niemand vermisst: etwas kleinere Sinnbilder, engere Abstaende, ein schmalerer Pfeil, kein Trennstrich. */ .nav-link .ico { font-size: 12px; } .nav-link { padding: 7px 5px; font-size: 13px; gap: 2px; } .nav-arrow { font-size: 7px; margin-left: 1px; } .nav-logo { margin-right: 8px; } .nav-link-blog { padding-left: 9px; padding-right: 9px; } /* Der Trennstrich vor der rechten Seite entfaellt — bei diesem Platz zaehlt jeder Pixel mehr als eine Linie. */ .nav-divider { display: none; } /* Damit das Menue ueberhaupt schrumpfen darf: ohne `min-width:0` weigert sich ein Flex-Element, unter seine Inhaltsbreite zu gehen — es waechst dann nach rechts aus dem Band heraus, statt enger zu werden. **Aber Schrumpfen allein genuegt nicht.** Beim ersten Versuch passte der Knopf zwar, dafuer schob sich „Kontakt" ueber den Sprachschalter: das Menue wurde schmaler als sein Inhalt und lief in den Nachbarn. Ein Mindestabstand nach rechts haelt beide auseinander, und `overflow:hidden` verhindert, dass ein Eintrag darueber hinausragt. */ /* **`overflow:hidden` war der falsche Weg.** Es verhinderte zwar das Herausragen, aber die Eintraege wurden dann einfach abgeschnitten — auf breiten Bildschirmen ueberlappte „Kontakt" plötzlich den Sprachschalter, obwohl dort reichlich Platz ist. Ein Element, das zu wenig Raum bekommt, soll enger werden, nicht abgeschnitten. Deshalb nur: das Menue darf schrumpfen (`min-width:0`), die rechte Seite nicht (`flex-shrink:0`), und dazwischen bleibt ein fester Abstand. */ .nav-main { min-width: 0; margin-right: 14px; } .nav-right { flex-shrink: 0; } /* Die letzten fehlenden Pixel kommen aus der rechten Seite, nicht aus dem Menue. **Gemessen:** Sprachschalter 81, Knopf 154, zusammen mit dem Zwischenraum 239. Der Knopf traegt links und rechts je 18 Pixel Polster; 13 genuegen ihm ebenso, und der Schalter kommt mit etwas engeren Feldern aus. Zusammen rund achtzig — genau das, was noch fehlte. Warum nicht am Menue: dort haengt an jedem Pixel ein Wort oder ein Sinnbild, hier nur Luft. */ .nav-right { gap: 8px; } .btn-header { padding-left: 13px; padding-right: 13px; } .sprach-schalter a { min-width: 28px; padding-left: 7px; padding-right: 7px; } /* ===== DREI KLASSEN AUS DER PHP-UMSTELLUNG ============================= `.mehr-link`, `.bild-folgt` und `.tt-initialen` stehen in sechs Bausteinen im Markup, hatten aber keine einzige Regel. Ohne Regel erbt ein Link die Grundfarbe: „Alle Diagnosen ansehen →" erschien als schwarzer Fliesstext, nicht als Link. In den 23 Prototypen kommt keine dieser Klassen vor — sie sind bei der Umstellung auf PHP entstanden, für Fälle, die der Prototyp nicht kannte: ein Datensatz ohne Foto, eine Liste, die im Adminbereich einen Link angehängt bekommt. Die Regeln sind deshalb nicht neu erfunden, sondern von den Vorbildern im Prototyp abgeleitet; woher jeder Wert kommt, steht jeweils dabei. Sollte der Kunde für einen dieser Fälle eine eigene Gestaltung wünschen, ist das eine Entscheidung, keine Reparatur. */ /* Textlink unter einer Liste — „Alle Diagnosen ansehen →", „Ganzes Team →". Vorbild: .dx-link in alle-diagnosen.html, dazu .plink, .info-link und .subtherapy-link. Alle vier teilen fett, Kategoriefarbe, inline-flex und einen Abstand, der beim Zeigen wächst — das ist die Hausform für einen Textlink mit Pfeil. Übernommen sind die Werte von .dx-link, weil er denselben Zweck hat: aus einer Liste heraus weiterführen. */ .mehr-link{font-size:14px;font-weight:700;color:var(--cat-dark); display:inline-flex;align-items:center;gap:5px;transition:gap .2s} .mehr-link:hover{gap:10px} /* Platzhalter, solange kein Foto hinterlegt ist. Vorbild: .gal-ph und .rail-ph in therapiegeraete.html — mittig, gestapelt, gedämpft, die Beschriftung klein und in Grossbuchstaben gesperrt. **Nicht absolut positioniert, obwohl .gal-ph das ist.** Der Platzhalter steht in vier verschiedenen Eltern: .dg-fig, .intensiv-photo, .adult-photo und .sub-photo. Nur .dg-fig trägt `position:relative`. Mit `inset:0` wäre der Platzhalter in den anderen drei bis zum nächsten positionierten Vorfahren gewandert — quer über die Seite. Die Alternative wäre, drei Regeln aus dem Prototyp um `position:relative` zu ergänzen; die Fläche ganz zu füllen erreicht dasselbe, ohne bestehende Regeln anzufassen. Alle vier Eltern geben ihre Höhe über `aspect-ratio` vor, deshalb genügt 100 % in beiden Richtungen. Das Sinnbild ist hier ein SVG statt eines Emoji, deshalb Grösse über width/height statt font-size. */ .bild-folgt{width:100%;height:100%;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:8px; color:var(--cat-deeptext);background:var(--cat-light)} .bild-folgt svg{width:30px;height:30px;opacity:.4} .bild-folgt span{font-size:10.5px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;opacity:.5} /* Anfangsbuchstabe, wenn zu einer Person kein Foto vorliegt. Die Kachel .tt im Prototyp (index.html) hat immer ein Bild: .tt img{width:96px;aspect-ratio:3/4;object-fit:cover; border-radius:14px;border:2.5px solid var(--cat-mid)} Damit die Zeile nicht springt, hält der Buchstabe genau dieselbe Fläche und denselben Rahmen. Die Schrift ist Playfair mit 44px und gedämpft — die Werte von .gal-ph .ini, dem Buchstaben-Platzhalter des Prototyps. */ .tt-initialen{width:96px;aspect-ratio:3/4;border-radius:14px; border:2.5px solid var(--cat-mid);background:var(--cat-light); display:flex;align-items:center;justify-content:center; font-family:'Playfair Display',serif;font-size:44px;font-weight:700; line-height:1;color:var(--cat-deeptext);opacity:.55} @media (max-width:860px){ /* Mitgezogen mit `.tt img{width:120px}` aus dem Prototyp. */ .tt-initialen{width:120px} } /* ===== KARTENRASTER DES BAUSTEINS „vorteile-raster" =================== Standen in apartments.css und galten damit nur auf einer Seite. Der Baustein laesst sich aber an jede Seite haengen — auf der Logopaedie- Seite fiel er dadurch auf blanke Absaetze zurueck: kein Raster, keine Karte, das Zeichen in Textgroesse. Unveraendert uebernommen. */ .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .why-cell{background:var(--white);border:1px solid var(--cream-border);border-radius:16px;padding:24px 22px;transition:all .3s} .why-cell:hover{transform:translateY(-5px);box-shadow:0 12px 28px rgba(42,58,26,.09);border-color:var(--cat-main)} .why-ic{width:48px;height:48px;border-radius:13px;background:var(--cat-light);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:13px} .why-cell h3{font-size:16.5px;margin-bottom:5px} .why-cell p{color:var(--text-mid);font-size:13.5px;line-height:1.6} /* Abschlusszeile unter einem Kartenraster — gehört zum Baustein, nicht in einen eigenen Abschnitt. Mittig und gedämpft, damit sie die Aufzählung abschliesst, ohne mit den Karten zu konkurrieren. */ .why-abschluss{margin:26px auto 0;max-width:640px;text-align:center; color:var(--text-mid);font-size:14.5px;line-height:1.6} /* ===== Sprungmarken der Bausteine ===== block_rendern() setzt vor jedem Baustein ein leeres mit id. Ohne scroll-margin-top verschwindet die Ueberschrift hinter der klebenden Kopfzeile, und der Sprung sieht aus, als haette er die falsche Stelle getroffen. */ .baustein-anker{display:block;height:0;overflow:hidden;scroll-margin-top:calc(var(--header-h) + 16px)} /* ── Vorschau eines Entwurfs ───────────────────────────────────────────────── Nur sichtbar, wenn die Seite über einen Vorschau-Token geöffnet wurde (blocks/vorschau-band.php, lib/vorschau.php). Fest am Bildschirm statt im Textfluss: der Seitenkopf klebt bereits oben, ein zweites klebendes Band darüber hätte seinen Versatz und den des mobilen Menüs (`top:var(--header-h)`) verschoben. Im Fluss wäre es nach dem ersten Scrollen weg — und gerade dann soll noch zu sehen sein, dass das nicht die fertige Seite ist. Unter dem Kopf (z-index 200) und unter dem mobilen Menü (190): der Hinweis darf die Bedienung nicht verdecken. */ .vorschau-band{position:fixed;top:calc(var(--header-h) + 12px);right:12px;z-index:180; max-width:min(340px,calc(100vw - 24px));display:flex;gap:10px;align-items:flex-start; background:var(--green-deepest);color:#fff;border:2px solid var(--gold-main); border-radius:12px;padding:10px 14px;font-size:13px;line-height:1.45; box-shadow:0 6px 20px rgba(0,0,0,.25)} .vorschau-marke{flex:0 0 auto;background:var(--gold-main);color:var(--green-deepest); font-weight:800;font-size:11px;letter-spacing:.06em;text-transform:uppercase; border-radius:999px;padding:3px 9px;white-space:nowrap} .vorschau-text b{color:var(--gold-main)} @media(max-width:600px){.vorschau-band{left:12px;right:12px;max-width:none}}