: kommt er ohne Auszeichnung aus der Datenbank, ist es blosser Text im Kopf. Die Regel griff dann nicht und der Satz blieb dunkel auf dunklem Grund — von Alex gemeldet. Deshalb die Farbe am Kopf selbst; Marke und Überschrift setzen ihre eigene und bleiben. */ .pg-band .section-head{color:rgba(255,255,255,.78)} .pg-band .section-head p{color:rgba(255,255,255,.78)} .pg-band .section-head a{color:var(--gold-main)} /* Abstand zur Überschrift. Der Einleitungstext kommt bei manchen Angeboten ohne
aus der Datenbank; dann greift `.section-head p{margin-top:18px}` nicht und der Satz klebte an der Zeile darüber. Der Abstand hängt deshalb an der Überschrift, nicht am Absatz. */ .pg-band .section-head h2{margin-bottom:18px} .pg-band .mehr-link{color:var(--gold-main);border-bottom-color:var(--gold-main)} .pg-band .mehr-link:hover{color:#fff;border-color:#fff} .device-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .device-card{border-radius:16px;overflow:hidden;background:var(--white); border:1px solid transparent;transition:all .3s} .device-card:hover{transform:translateY(-7px); box-shadow:0 18px 38px rgba(0,0,0,.35);border-color:var(--cat-main)} .device-card-photo{overflow:hidden;aspect-ratio:4/3;background:var(--cat-light)} .device-card-photo img{width:100%;height:100%;object-fit:cover; transition:transform .4s} .device-card:hover .device-card-photo img{transform:scale(1.06)} .device-card-body{padding:18px 20px 22px} .device-tag{font-size:11px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--text-muted);margin-bottom:4px} .device-card h3{font-size:18px;margin-bottom:5px;line-height:1.3} .device-card p{color:var(--text-mid);font-size:14px;line-height:1.6} @media(max-width:900px){.device-grid{grid-template-columns:1fr}} /* ── Therapeut:innen ────────────────────────────────────────────────── */ /* Aufbau aus dem Kids-Projekt (.team-section), aber das Bild ist ein Rechteck mit weichen Ecken. Die organische Rundung („Blob") ist Kids-Handschrift und kommt auf der Erwachsenensite nicht vor. */ .team-section{display:grid;grid-template-columns:auto 1fr;gap:44px; align-items:center} .team-photos{display:flex;gap:18px} .team-card{width:140px;flex:0 0 140px} .team-photo-wrap{width:140px;height:170px;margin-bottom:10px;border-radius:14px; overflow:hidden;background:var(--cat-light);border:1px solid var(--cat-mid); display:flex;align-items:center;justify-content:center; transition:border-color .3s,box-shadow .3s} .team-photo-wrap img{width:100%;height:100%;object-fit:cover} .team-ini{font-family:'Playfair Display',serif;font-size:44px;font-weight:700; color:var(--cat-dark);opacity:.45} .team-card:hover .team-photo-wrap{border-color:var(--cat-main); box-shadow:0 12px 28px -14px rgba(46,74,115,.45)} .team-name{font-size:14px;font-weight:700;color:var(--green-deepest); transition:color .2s} .team-card:hover .team-name{color:var(--cat-dark)} .team-role{font-size:12px;color:var(--text-muted);margin-top:2px; line-height:1.35} /* Kennzahlen als schmale Zeile, nicht als Kacheln — sie begleiten den Text und sind nicht die Aussage des Abschnitts. */ .pz-reihe{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px} .pz{background:var(--cat-light);border:1px solid var(--cat-mid); border-radius:20px;padding:7px 16px;display:inline-flex;align-items:baseline; gap:8px} .pz b{font-family:'Playfair Display',serif;font-size:17px; color:var(--cat-dark);line-height:1} .pz span{font-size:12.5px;color:var(--text-mid);line-height:1.3} @media(max-width:1000px){ .team-section{grid-template-columns:1fr;gap:26px} .team-photos{flex-wrap:wrap} } @media(max-width:600px){ .team-card,.team-photo-wrap{width:120px;flex-basis:120px} .team-photo-wrap{height:146px} } /* ── Für wen ─────────────────────────────────────────────────────────── */ /* Drei nummerierte Karten mit Kopfstreifen in der Bereichsfarbe. Die vorige Fassung (Zeile mit Punkt) sah aus wie die Aufzählung darüber. */ .pw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .pw-karte{position:relative;background:var(--white); border:1px solid var(--cream-border);border-radius:16px; padding:26px 24px 24px;transition:all .25s} .pw-karte::before{content:'';position:absolute;top:0;left:0;right:0;height:4px; background:var(--cat-main);border-radius:16px 16px 0 0} .pw-karte:hover{transform:translateY(-4px);border-color:var(--cat-main); box-shadow:0 14px 32px -16px rgba(46,74,115,.4)} .pw-karte p{color:var(--text-mid);font-size:13.5px;line-height:1.7} .pw-karte strong{color:var(--cat-deeptext);font-weight:700} @media(max-width:900px){.pw-grid{grid-template-columns:1fr}} /* ── Schritte und Verweise darunter ──────────────────────────────────── */ .st4-cell{height:100%} .st4-card{flex:1;display:flex;flex-direction:column} .weg-links{margin-top:34px;display:flex;gap:26px;flex-wrap:wrap} /* ── Erfolgsgeschichte ───────────────────────────────────────────────── */ /* Kasten wie im Kids-Projekt (.story-box): Plakette auf der Kante, Text links, Foto rechts. Ohne das Baertier. */ .story-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 -22px rgba(46,74,115,.4);position:relative; overflow:visible;display:grid;grid-template-columns:1.1fr .9fr;gap:36px; align-items:center} .story-badge{position:absolute;top:-15px;left:36px;background:var(--cat-dark); color:#fff;font-size:12px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;padding:6px 16px;border-radius:20px; box-shadow:0 4px 10px rgba(46,74,115,.35)} .story-box p{color:var(--text-mid);font-size:14px;margin-bottom:16px; line-height:1.7} .story-btns{display:flex; gap:14px; flex-wrap:wrap} .story-photo{border-radius:16px;overflow:hidden;aspect-ratio:4/3; box-shadow:0 12px 28px -14px rgba(46,74,115,.45)} .story-photo img{width:100%;height:100%;object-fit:cover} @media(max-width:900px){ .story-box{grid-template-columns:1fr;padding:30px 22px} } /* ── Galerie: eine Reihe mit Pfeilknöpfen, dunkler Grund ─────────────── */ /* Nur die Bildreihe steht auf dunklem Grund; Beschriftung und Überschrift darüber auf hellem Grund. Der Kopf ist ein eigener Abschnitt und braucht deshalb unten Luft — ohne sie klebte die Überschrift am dunklen Band. */ .gal-kopf{padding-bottom:30px} .gal-kopf .section-head{margin-bottom:0} .gal-band{background:#4A5168;padding:30px 0} .gal-band .gal-item{border-color:rgba(255,255,255,.16)} .gal-band .gal-item:hover{border-color:var(--gold-main); box-shadow:0 16px 34px rgba(0,0,0,.35)} .gal-huelle{position:relative} .gal-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2; width:42px;height:42px;border-radius:50%;background:var(--white); border:1px solid var(--cream-border);color:#3A4053;font-size:20px; line-height:1;display:flex;align-items:center;justify-content:center; box-shadow:0 6px 18px rgba(58,64,83,.25);transition:all .2s} .gal-nav.prev{left:-14px} .gal-nav.next{right:-14px} .gal-nav:hover:not(:disabled){background:var(--gold-main);color:#fff; border-color:var(--gold-main)} .gal-nav:disabled{opacity:.3;cursor:default} @media(max-width:600px){.gal-nav{display:none}} .gal-reihe{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity; scrollbar-width:none;-ms-overflow-style:none;padding:4px 0 10px} .gal-reihe::-webkit-scrollbar{display:none} .gal-reihe:focus-visible{outline:2px solid var(--cat-main);outline-offset:6px; border-radius:12px} .gal-item{flex:0 0 var(--w,260px);height:230px;scroll-snap-align:start; position:relative;padding:0;border:1px solid var(--cream-border); border-radius:12px;overflow:hidden;cursor:zoom-in;background:none; transition:transform .25s,border-color .25s,box-shadow .25s} .gal-item img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .5s} .gal-item:hover{transform:translateY(-4px);border-color:var(--cat-main); box-shadow:0 16px 34px -18px rgba(46,74,115,.45)} .gal-item:hover img{transform:scale(1.05)} .gal-zoom{position:absolute;bottom:10px;right:10px;width:32px;height:32px; border-radius:50%;background:rgba(255,255,255,.92);display:flex; align-items:center;justify-content:center;font-size:13px;color:#3A4053; opacity:0;transform:scale(.85);transition:all .22s} .gal-item:hover .gal-zoom{opacity:1;transform:scale(1)} @media(max-width:600px){ .gal-item{height:180px;flex-basis:min(var(--w,260px),70vw)} } /* ── Fragen ──────────────────────────────────────────────────────────── */ .faq-liste{max-width:1200px} /* Auf weissem Grund braucht die Karte einen deutlicheren Rahmen, sonst verschwindet sie. */ .qa{background:var(--white);border:1.5px solid var(--cat-mid); border-radius:14px;margin-bottom:10px;transition:all .25s;overflow:hidden} .qa[open]{border-color:var(--cat-main); box-shadow:0 8px 22px -8px rgba(46,74,115,.35)} .qa summary{cursor:pointer;list-style:none;display:flex;align-items:center; gap:14px;padding:16px 20px;min-height:56px;font-weight:600;font-size:15px; color:var(--green-deepest);line-height:1.45;transition:background .18s} .qa summary::-webkit-details-marker{display:none} .qa summary:hover{background:var(--cat-light)} .qa summary:focus-visible{outline:3px solid var(--cat-main);outline-offset:-3px} .qa-mark{width:28px;height:28px;border-radius:50%;background:var(--cat-light); color:var(--cat-dark);display:flex;align-items:center;justify-content:center; font-size:12px;flex-shrink:0;margin-left:auto;transition:all .25s} .qa[open] .qa-mark{transform:rotate(180deg);background:var(--cat-main); color:#fff} .qa-a{padding:0 20px 18px;color:var(--text-mid);font-size:14px; line-height:1.7} /* Die Fotogalerie stand auf dem Telefon in drei Spalten — bei 390 Pixeln sind das gut 110 Pixel je Bild. Zwei Spalten ab 700, eine ab 480; dieselben Grenzen wie bei den übrigen Rastern. Gemeldet von Alex am 29.09.2026. */ @media(max-width:700px){.gal{grid-template-columns:repeat(2,1fr)}} @media(max-width:480px){.gal{grid-template-columns:1fr}} /* ────────────────────────────────────────────────────────────────────────── TELEFON: DAS FOTO IM ERSTEN ABSCHNITT Die Regel dafür steht auch in nachtraege.css — dort verliert sie aber, weil die Seitenstylesheets ZULETZT geladen werden und hier `.pd-bild img{height:auto}` steht. Deshalb dieselbe Regel noch einmal an der Stelle, an der sie gewinnt. Gemeldet von Alex am 29.09.2026: die Bilder blieben trotz der Änderung gross. Nur der Abschnitt NACH dem Titelbereich; in Karten bleibt das Bild wie es ist. ────────────────────────────────────────────────────────────────────────── */ @media(max-width:760px){ .pd-bild{ aspect-ratio:16/9; max-height:210px; overflow:hidden; max-width:100%; } .pd-bild img{ width:100%; height:100%; object-fit:cover; display:block; } } /* Auf dem Telefon nahm das Foto des ersten Abschnitts fast die ganze Ansicht ein. 16:9 statt der vollen Bildhöhe; 260px, weil 200 zu klein wirkte. Die Regel steht HIER, weil produkt-detail.css nach nachtraege.css geladen wird und dort gewinnt. Gemeldet von Alex am 29.09.2026. */ @media(max-width:760px){ .pd-bild{aspect-ratio:16/9; max-height:260px; overflow:hidden; max-width:100%} .pd-bild img{width:100%; height:100%; object-fit:cover} } /* ────────────────────────────────────────────────────────────────────────── ERFOLGSGESCHICHTE AUF DEM TELEFON Zwei Punkte, beide von Alex am 29.09.2026 gemeldet: 1. Das Foto stand UNTER dem Text — im Markup kommt es nach dem Textblock, und einspaltig heisst das: ganz unten, nach zwei Knöpfen. Mit `order` rutscht es nach oben, ohne die Reihenfolge im Markup zu ändern (dort gehört der Text zuerst, das ist auch für Screenreader richtig). 2. Die beiden Knöpfe waren verschieden breit — jeder so breit wie sein Text. Nebeneinander fällt das nicht auf, untereinander schon. Jetzt beide über die volle Breite. ────────────────────────────────────────────────────────────────────────── */ @media(max-width:760px){ .story-box{display:flex; flex-direction:column; gap:20px} .story-photo{order:-1; aspect-ratio:16/9; max-height:240px; width:100%} .story-photo img{width:100%; height:100%; object-fit:cover} .story-btns{flex-direction:column; align-items:stretch; width:100%} .story-box .btn{width:100%; justify-content:center} }