/* Feinschliff Weberhaus Zahnärzte, 01.11.2026: Layout, Abstände und Raster für Computer, Tablet und Handy. Zusammengesetzt aus 10-grundlagen.css, 20-kopf-menue-cookie.css, 30-fuss-buttons-cta.css, 40-startseite.css, 45-einstieg.css, 50-profil-team.css, 60-unterseiten-vorlage.css, 62-behandlungsseiten.css, 70-magazin-uebersichten.css, 72-magazin-artikel.css, 80-service.css, 90-nacharbeit.css, 95-zeitenkarte.css, 96-zeiten-kanz.css, 97-zeiten-uebersicht.css, 98-held-tablet-computer.css, 98-kopf-tablet-computer.css, 98-motion.css, 99-handy-menue.css. */ /* ===== 10-grundlagen.css ===== */ /* ===================================================================== G3 Grundlagen: Raster, Typografie, Abstände (alle Seiten von Dr. Kanz) Breakpoints: Handy bis 760 · Tablet 761 bis 1199 (hoch bis 1024, quer ab 1025) · Computer ab 1200 · breit ab 1600. Alte Ebenen (780/1024) werden hier abgefangen. Alle Regeln mit Präfix "html body.wh-kanz-site" (gewinnt gegen kanz-site.css und wz-polish.css ohne !important). !important nur gegen ältere !important-Regeln. Andere Teil-Stylesheets bauen auf den Variablen in Abschnitt 1 auf. ===================================================================== */ /* ---------- 1. Variablen ---------- */ html body.wh-kanz-site{ --max-width:1600px; /* Containerbreite inkl. Randabstand */ --pad-x:clamp(48px,4vw,64px); /* Randabstand links/rechts: schließt bei 1200 an das Tablet (48) an und wächst bis 1600 auf 64 */ --wz-section-y:96px; /* Abschnitt oben/unten */ --wz-head-gap:48px; /* Abschnittskopf bis Inhalt */ --wz-gap:24px; /* Kartenabstand im Raster */ --wz-card-pad:28px; /* Innenabstand Karten */ --wz-radius:16px; --wz-col-main:1.15fr; /* Grundraster Hero und Text: Hauptspalte */ --wz-col-side:.85fr; /* Grundraster: Bild- bzw. Seitenspalte */ --wz-col-gap:clamp(48px,5vw,96px); --wz-measure:72ch; /* Lesebreite Fließtext */ --wz-fs-prose:17px; --wz-lh-prose:1.75; --wz-fs-lead:19px; --wz-fs-head-p:18px; --wz-fs-card:16px; --wz-h1:clamp(46px,3.4vw,60px); --wz-h1-hero:clamp(50px,4vw,66px); --wz-h2:clamp(32px,2.3vw,40px); --wz-h2-sm:clamp(26px,1.9vw,30px); /* Zwischenüberschrift im Text, Weiterlesen */ --wz-h3:21px; } @media (min-width:1600px){ html body.wh-kanz-site{--wz-section-y:112px;--wz-head-gap:56px;--wz-gap:28px;--wz-card-pad:32px;--wz-fs-prose:18px} } @media (min-width:761px) and (max-width:1199px){ html body.wh-kanz-site{ --pad-x:clamp(32px,4vw,48px); --wz-section-y:72px;--wz-head-gap:40px;--wz-gap:20px;--wz-card-pad:24px; --wz-col-gap:clamp(28px,3.5vw,48px); --wz-fs-lead:18px;--wz-fs-head-p:17px; --wz-h1:clamp(36px,4.4vw,46px);--wz-h1-hero:clamp(38px,4.6vw,50px); --wz-h2:clamp(26px,3vw,32px);--wz-h2-sm:clamp(23px,2.4vw,26px);--wz-h3:20px; } } @media (max-width:760px){ html body.wh-kanz-site{ --pad-x:20px; --wz-section-y:48px;--wz-head-gap:28px;--wz-gap:16px;--wz-card-pad:20px;--wz-radius:14px; --wz-fs-prose:16px;--wz-lh-prose:1.7;--wz-fs-lead:17px;--wz-fs-head-p:16px;--wz-fs-card:15px; --wz-h1:clamp(30px,8vw,36px);--wz-h1-hero:clamp(31px,8.4vw,38px); --wz-h2:clamp(23px,6.2vw,26px);--wz-h2-sm:clamp(21px,5.6vw,23px);--wz-h3:19px; } } @media (max-width:359px){html body.wh-kanz-site{--pad-x:16px}} /* ---------- 2. Container: alle festen 1320er-Breiten folgen dem Token ---------- */ html body.wh-kanz-site :is(.wh-page-guide details,.wh-consent-inner,.wh-contextual-links){max-width:var(--max-width)} html body.wh-kanz-site.wh-nd-page .wh-nd-container{box-sizing:border-box;width:auto;max-width:var(--max-width);padding-inline:var(--pad-x);margin-inline:auto} /* Notdienst-FAQ: Der Kopf steht schon in der linken Rasterspalte. Das zweispaltige Kopfraster aus 80-service.css (ab 1200) würde den Titel dort auf die halbe Breite drücken ("Zahnärztli/cher") */ @media (min-width:1200px){ html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-section > .wh-nd-container.wh-nd-faq-wrap > .wh-nd-section-head{display:block;margin-bottom:0} } /* Innere Inseln an die Containerkante binden (Befund: springende linke Kanten) */ html body.wh-kanz-site :is(.sp-overview-grid,.sp-contact-grid,.pzr-spotlight-grid){max-width:none} /* ---------- 3. Typografie-Skala ---------- */ html body.wh-kanz-site main :is(h1,h2,h3){font-weight:600} html body.wh-kanz-site main h1, html body.wh-kanz-site main .sp-hero h1, html body.wh-kanz-site .mag-hero h1, html body.wh-kanz-site .mag-single-hero h1{font-size:var(--wz-h1);line-height:1.1;letter-spacing:-.03em} html body.wh-kanz-site main .hp-hero h1{font-size:var(--wz-h1-hero);line-height:1.08;letter-spacing:-.035em} html body.wh-kanz-site main h2{font-size:var(--wz-h2);line-height:1.18;letter-spacing:-.022em} html body.wh-kanz-site :is(.sp-prose,.sp-related-head) h2{font-size:var(--wz-h2-sm);line-height:1.25;letter-spacing:-.018em} html body.wh-kanz-site .sp-prose h3{font-size:var(--wz-h3);line-height:1.3} html body.wh-kanz-site :is(.hp-treat-card,.sp-related-card,.behandeln-card,.career-why-card,.career-benefit,.hp-values-card) h3{font-size:var(--wz-h3);line-height:1.3;letter-spacing:-.012em} /* Keine Silbentrennung in Hauptüberschriften, nur auf sehr kleinen Geräten als Notnagel */ html body.wh-kanz-site main h1{hyphens:manual;-webkit-hyphens:manual;overflow-wrap:break-word;text-wrap:balance} @media (max-width:359px){html body.wh-kanz-site main h1{hyphens:auto;-webkit-hyphens:auto}} /* Lead, Abschnittsunterzeile, Fließtext, Kartentext */ html body.wh-kanz-site :is(.sp-hero-lead,.hp-hero-lead){font-size:var(--wz-fs-lead);line-height:1.6} html body.wh-kanz-site .wh-section-head p{font-size:var(--wz-fs-head-p);line-height:1.6;text-wrap:balance} html body.wh-kanz-site .sp-prose{font-size:var(--wz-fs-prose);line-height:var(--wz-lh-prose)} html body.wh-kanz-site :is(.hp-treat-card p,.sp-related-card p,.behandeln-bio,.career-why-card p,.career-benefit p,.hp-values-card p,.sp-card p,.sp-card-list li,.sp-fact-lbl){font-size:var(--wz-fs-card);line-height:1.6} html body.wh-kanz-site :is(.sp-card p,.sp-fact-lbl,.sp-related-card p,.sp-faq-a,.sp-hero-lead,.hp-hero-lead){text-wrap:pretty} /* Kleine Beschriftungen nicht unter 11,5 px */ html body.wh-kanz-site .wh-eyebrow{font-size:12px;letter-spacing:.12em} html body.wh-kanz-site :is(.sp-hero-meta-lbl,.hp-trust-label){font-size:11.5px} html body.wh-kanz-site .wh-hours-today-tag,html body.wh-kanz-site .wh-footer .wh-hours-today-tag{font-size:10.5px!important} @media (max-width:760px){ html body.wh-kanz-site main .sp-hero h1{font-size:var(--wz-h1)!important} html body.wh-kanz-site :is(.hp-hero-inner .wh-eyebrow,.hp-treat-eyebrow){font-size:11.5px} html body.wh-kanz-site .wh-section-head p{text-wrap:pretty} } /* ---------- 4. Abschnittsrhythmus ---------- */ html body.wh-kanz-site :is(.wh-section,.sp-section,.pzr-spotlight):not(.mag-section,.mag-single-body){padding-top:var(--wz-section-y);padding-bottom:var(--wz-section-y)} html body.wh-kanz-site .sp-related{padding-top:var(--wz-section-y)!important;padding-bottom:var(--wz-section-y)!important} html body.wh-kanz-site .wh-section-head{margin-bottom:var(--wz-head-gap);padding-inline:0} html body.wh-kanz-site .wh-section-head h2{margin-bottom:0} html body.wh-kanz-site .wh-section-head p{margin-top:16px} html body.wh-kanz-site .sp-related-head{margin-bottom:calc(var(--wz-head-gap) * .75)} html body.wh-kanz-site .sp-hero{padding-top:56px;padding-bottom:56px} @media (min-width:761px) and (max-width:1199px){html body.wh-kanz-site .sp-hero{padding-top:44px;padding-bottom:48px}} @media (max-width:760px){ html body.wh-kanz-site .sp-hero{padding-top:28px;padding-bottom:36px} html body.wh-kanz-site .wh-section-head{text-align:left;margin-inline:0;max-width:none} } /* ---------- 5. Grundraster Hero und Text mit Seitenspalte ---------- */ @media (min-width:1025px){ html body.wh-kanz-site .sp-hero-inner{grid-template-columns:minmax(0,var(--wz-col-main)) minmax(0,var(--wz-col-side));column-gap:var(--wz-col-gap)} /* Hero-Foto mit max-height 430 (5:4) bleibt bei 1920 schmaler als die Spalte: an die rechte Containerkante */ html body.wh-kanz-site .sp-hero-inner > .sp-hero-img{justify-self:end} } @media (min-width:1200px){ html body.wh-kanz-site .sp-body{grid-template-columns:minmax(0,var(--wz-col-main)) minmax(0,var(--wz-col-side));column-gap:var(--wz-col-gap)} html body.wh-kanz-site .sp-body > .sp-prose{max-width:var(--wz-measure)} html body.wh-kanz-site .sp-aside{top:112px} } /* ---------- 6. Kartenraster: gleiche Innenabstände, keine 2+1-Waisen ---------- */ html body.wh-kanz-site :is(.sp-related-grid,.sp-overview-grid,.hp-values-grid,.behandeln-grid,.career-why-grid,.career-benefits-grid){gap:var(--wz-gap)} @media (min-width:761px){html body.wh-kanz-site :is(.hp-treat-grid,.sp-facts-grid){gap:var(--wz-gap)}} html body.wh-kanz-site :is(.sp-card,.sp-related-card,.hp-values-card,.behandeln-card,.career-why-card,.career-benefit){padding:var(--wz-card-pad);border-radius:var(--wz-radius)} /* Raster mit genau zwei Karten: zwei Spalten statt leerer dritter Zelle */ @media (min-width:761px){ html body.wh-kanz-site :is(.hp-treat-grid,.sp-related-grid,.sp-overview-grid,.hp-values-grid):has(> :nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))} } /* Tablet hoch (761 bis 1024): alte 780/1024-Regeln neutralisieren, drei kurze Karten bleiben dreispaltig */ @media (min-width:761px) and (max-width:1024px){ html body.wh-kanz-site :is(.sp-related-grid,.sp-overview-grid,.hp-values-grid,.hp-treat-grid,.career-benefits-grid):has(> :nth-child(3):last-child), html body.wh-kanz-site .sp-facts-grid{grid-template-columns:repeat(3,minmax(0,1fr))} html body.wh-kanz-site :is(.behandeln-grid,.career-why-grid,.zt-grid,.prophy-variants){grid-template-columns:repeat(2,minmax(0,1fr))} html body.wh-kanz-site :is(.hp-treat-grid,.behandeln-grid,.career-benefits-grid,.sp-aside):not(:has(> :nth-child(3):last-child)) > :last-child:nth-child(odd){grid-column:1/-1} html body.wh-kanz-site .sp-aside > .sp-card:last-child:nth-child(odd) .wh-btn{width:auto;min-width:240px} html body.wh-kanz-site .sp-related-card{padding:20px} /* Schmale Dreierkarten: Titel etwas kleiner, lange Wörter mit Trennstrich statt hartem Umbruch */ html body.wh-kanz-site :is(.sp-related-grid,.hp-treat-grid,.hp-values-grid,.sp-overview-grid,.career-benefits-grid):has(> :nth-child(3):last-child) h3{font-size:18px;hyphens:auto;-webkit-hyphens:auto} html body.wh-kanz-site .hp-treat-grid:has(> :nth-child(3):last-child) > .hp-treat-card{padding:20px} /* Artikel: lange Fragetitel untereinander statt in drei schmalen Spalten */ html body.wh-kanz-site.single-wh_magazin .sp-related-grid:has(> :nth-child(3):last-child){grid-template-columns:1fr} html body.wh-kanz-site .sp-fact{padding:20px} html body.wh-kanz-site .sp-fact-num{font-size:22px;overflow-wrap:normal;white-space:nowrap} html body.wh-kanz-site .hp-story-stats{grid-template-columns:repeat(4,minmax(0,1fr))} } /* Alte 1024er-Regel zentriert den CTA-Text, die Knöpfe stehen aber links: einheitlich linksbündig */ @media (max-width:1024px){html body.wh-kanz-site .sp-cta{text-align:left}} /* Zwei-Karten-Gruppen einheitlich breit statt 880/980/680 (Prophylaxe-Varianten, Eigenlabor) */ html body.wh-kanz-site :is(.prophy-variants,.zt-grid,.zt-usp){max-width:1200px} @media (min-width:1200px){html body.wh-kanz-site .zt-usp{grid-template-columns:repeat(4,minmax(0,1fr))}} /* Breite Bildschirme: mehr Spalten statt breiterer Karten */ @media (min-width:1200px){html body.wh-kanz-site .career-why-grid:has(> :nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}} @media (min-width:1600px){html body.wh-kanz-site .mag-section .mag-grid{grid-template-columns:repeat(4,minmax(0,1fr))}} /* Anker-Leisten: zentriert nur, solange alles passt; sonst ab dem linken Rand scrollbar. Tablet wie Computer zentriert (die Abschnittsköpfe darunter sind es auch), nur am Handy linksbündig */ html body.wh-kanz-site :is(.wh-cat-anchor-nav-inner,.team-anchor-nav-inner){justify-content:safe center;gap:10px} @media (max-width:760px){html body.wh-kanz-site :is(.wh-cat-anchor-nav-inner,.team-anchor-nav-inner){justify-content:flex-start}} /* Kacheln sind keine Links: kein Anheben beim Überfahren */ html body.wh-kanz-site .sp-fact:hover{transform:none;box-shadow:none} /* ---------- 7. Hero-Kennzahlen (.sp-hero-meta) ohne verwaiste Einträge ---------- */ @media (min-width:761px) and (max-width:1199px){ html body.wh-kanz-site .sp-hero-meta{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,max-content);column-gap:28px;justify-content:start} } @media (max-width:760px){ html body.wh-kanz-site .sp-hero-meta{display:grid;grid-template-columns:1fr;gap:0;padding-top:4px} html body.wh-kanz-site .sp-hero-meta-item{display:grid;grid-template-columns:minmax(104px,auto) minmax(0,1fr);align-items:baseline;column-gap:16px;padding:11px 0;border-bottom:1px solid var(--border)} html body.wh-kanz-site .sp-hero-meta-item:last-child{border-bottom:0} html body.wh-kanz-site .sp-hero-meta-val{font-size:15px;text-align:right;overflow-wrap:break-word} } /* ---------- 8. Fakten am Handy: gleiche Spalte, kein Umbruch mitten im Wort ---------- */ @media (max-width:760px){ html body.wh-kanz-site .sp-facts-grid{grid-template-columns:max-content minmax(0,1fr);column-gap:20px} html body.wh-kanz-site .sp-fact{grid-column:1/-1;grid-template-columns:150px minmax(0,1fr);grid-template-columns:subgrid;column-gap:20px;padding:18px 0} html body.wh-kanz-site .sp-fact-num{font-size:20px;white-space:nowrap;overflow-wrap:normal;hyphens:manual} } /* ---------- 9. FAQ: am Computer zweispaltig, ruhiges Plus/Minus statt Strich ---------- */ @media (min-width:1025px){ html body.wh-kanz-site .wh-container:has(> .sp-faq){display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:var(--wz-col-gap);align-items:start} html body.wh-kanz-site .wh-container:has(> .sp-faq) > .wh-section-head{position:sticky;top:120px;margin:0;max-width:none;text-align:left} html body.wh-kanz-site .wh-container:has(> .sp-faq) > .sp-faq{max-width:none;margin:0} html body.wh-kanz-site .wh-container:has(> .sp-faq) > :not(.wh-section-head,.sp-faq){grid-column:1/-1;margin-inline:0} } html body.wh-kanz-site .sp-faq-q::after{content:"";flex:0 0 14px;width:14px;height:14px;margin:0;font-size:0;background:linear-gradient(var(--primary),var(--primary)) center/14px 2px no-repeat,linear-gradient(var(--primary),var(--primary)) center/2px 14px no-repeat;transition:background-size .2s ease} html body.wh-kanz-site .sp-faq-item[open] .sp-faq-q::after{content:"";background-size:14px 2px,2px 0} @media (prefers-reduced-motion:reduce){html body.wh-kanz-site .sp-faq-q::after{transition:none}} /* ---------- 10. Listen und Zitate im Fließtext ---------- */ html body.wh-kanz-site .sp-prose ul li{font-size:inherit;line-height:1.7;padding-left:24px;margin-bottom:10px} html body.wh-kanz-site .sp-prose ul li::before{top:.66em;width:7px;height:7px;border-radius:50%;background:var(--primary)} html body.wh-kanz-site .sp-prose ol{margin:0 0 28px;padding-left:1.6em} html body.wh-kanz-site .sp-prose ol > li{padding-left:.35em;margin-bottom:12px;line-height:1.7} html body.wh-kanz-site .sp-prose ol > li::marker{color:var(--primary-dark);font-weight:600} html body.wh-kanz-site :is(.sp-prose ul,.sp-prose ol) + p{margin-top:4px} html body.wh-kanz-site .sp-prose blockquote{margin:28px 0 40px;padding:24px 28px;background:#f3f8fa;border:1px solid var(--border);border-left:4px solid var(--primary);border-radius:0 16px 16px 0} html body.wh-kanz-site .sp-prose blockquote p{margin:0;font-size:inherit;line-height:1.7;text-wrap:pretty} @media (max-width:760px){html body.wh-kanz-site .sp-prose blockquote{padding:18px 20px;margin:24px 0 32px}} /* ---------- 11. Weiterlesen (.sp-related): ruhige Fläche, Links auf einer Linie ---------- */ html body.wh-kanz-site .sp-related{background:#f8fbfc!important;border-top:1px solid var(--border)} html body.wh-kanz-site .sp-related::before,html body.wh-kanz-site .sp-related::after, html body.wh-kanz-site .sp-related-card::before,html body.wh-kanz-site .sp-related-card::after{display:none} html body.wh-kanz-site .sp-related-card{display:flex;flex-direction:column;height:100%;background:#fff;box-shadow:none} html body.wh-kanz-site .sp-related-card p{flex:1 1 auto} html body.wh-kanz-site .sp-related-link{margin-top:auto;padding-top:4px} html body.wh-kanz-site .sp-related-card:hover{transform:none;box-shadow:none;border-color:var(--primary)} /* ---------- 12. Brotkrumen: 44 px Tippfläche, am Handy einzeilig ---------- */ html body.wh-kanz-site .sp-crumb{margin-top:-6px} html body.wh-kanz-site .sp-crumb a{display:inline-flex;align-items:center;min-height:44px;padding:0} @media (max-width:760px){ html body.wh-kanz-site .sp-crumb{font-size:13px;margin-bottom:6px} html body.wh-kanz-site .sp-crumb:has(> span:last-child) > span:nth-last-child(-n+2){display:none} html body.wh-kanz-site .mag-single-hero .sp-crumb > a:last-child, html body.wh-kanz-site .mag-single-hero .sp-crumb:has(> a:last-child) > span:nth-last-child(2){display:none} } /* ---------- 13. Magazinartikel: Lesebreite, Bildhinweis, Einstieg ---------- */ html body.wh-kanz-site .mag-single-prose,html body.wh-kanz-site .mag-single-back{max-width:var(--wz-measure)!important;margin-inline:auto} html body.wh-kanz-site .mag-single-hero{background:#fff} /* Titelbild in Textbreite: erster Satz früher sichtbar, Bildhinweis bündig mit dem Bild */ html body.wh-kanz-site.single-wh_magazin .mag-single-img{font-size:var(--wz-fs-prose)} html body.wh-kanz-site.single-wh_magazin .mag-single-img img{max-width:var(--wz-measure)!important;margin-inline:auto} html body.wh-kanz-site.single-wh_magazin .mag-single-body{padding-top:0;padding-bottom:var(--wz-section-y)} html body.wh-kanz-site.single-wh_magazin .mag-single-prose > .wh-ai-image-note{margin:10px 0 32px!important;font-size:13px} html body.wh-kanz-site.single-wh_magazin .mag-single-prose > .wh-ai-image-note + p{font-size:calc(var(--wz-fs-prose) + 2px);line-height:1.65;color:var(--text)} html body.wh-kanz-site .mag-single-prose h2:not(:first-child){margin-top:52px;margin-bottom:14px} html body.wh-kanz-site .mag-single-prose blockquote + h2:not(:first-child){margin-top:44px} @media (max-width:760px){html body.wh-kanz-site .mag-single-prose h2:not(:first-child){margin-top:38px}} /* ---------- 14. Öffnungszeiten: Heute-Zeile mit Luft an den Rändern ---------- */ html body.wh-kanz-site .wh-hours-row.is-today{padding-inline:10px;margin-inline:-10px} /* ===== 20-kopf-menue-cookie.css ===== */ /* ========================================================================== Feinschliff 01.11.2026, Bereich G1: Kopfzeile, Hauptmenü, Handy- und Tablet-Menü, Infoleiste (wh-smartbar), Cookie-Hinweis und Cookie-Fenster. Breakpoints: Handy bis 760, Tablet 761 bis 1199 (hoch bis 1024, quer ab 1025), Computer ab 1200, breit ab 1600. Ab 1025 px gibt es das Computer-Menü (Tablet quer wirkt wie ein kleiner Computer). ========================================================================== */ /* ---------- Kopfzeile: Grundlage ---------- */ html body.wh-kanz-site .wh-header{background:#f8fbfc;transition:box-shadow .25s ease} html body.wh-kanz-site .wh-smartbar ~ .wh-header{background:#f8fbfc!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important} /* Ruhiger Schatten erst, wenn Inhalt unter dem klebenden Kopf läuft (Klasse aus wz-nav.js). */ html body.wh-kanz-site .wh-header.is-scrolled, html body.wh-kanz-site .wh-smartbar ~ .wh-header.is-scrolled{box-shadow:0 10px 26px -20px rgba(22,44,54,.38)!important} /* Logo: ganze Fläche als Tippziel, Name von Dr. Kanz gut lesbar. */ html body.wh-kanz-site .wh-header .wh-logo{min-height:44px;border-radius:10px} html body.wh-kanz-site .wh-header .wh-logo:focus-visible{outline:2px solid var(--primary);outline-offset:4px} html body.wh-kanz-site .wh-logo-text small{font-size:12.5px;letter-spacing:.01em;margin-top:4px;color:var(--muted)} /* Das Logo-Bild hat rund 4 px transparenten Rand: optisch bündig mit der Inhaltskante (Text, Karten) setzen. */ html body.wh-kanz-site .wh-header .wh-logo-img{margin-left:-4px} /* Termin-Knopf im Kopf wie alle Hauptknöpfe (Radius 12, 15 px, halbfett), 46 px hoch wie Anruf und Menü, ohne Schatten. */ html body.wh-kanz-site .wh-header .wh-btn--primary.wh-header-cta{height:46px!important;min-height:46px!important;padding:0 22px!important;font-size:15px!important;font-weight:600!important;letter-spacing:0;border-radius:12px!important;box-shadow:none!important;transform:none} html body.wh-kanz-site .wh-header .wh-btn--primary.wh-header-cta:focus-visible{outline:2px solid var(--primary-dark);outline-offset:3px} /* Ab 761 px immer sichtbar (alte Regeln blendeten ihn bis 1100 px aus). */ @media (min-width:761px){ html body.wh-kanz-site .wh-header .wh-btn--primary.wh-header-cta{display:inline-flex!important} } /* ---------- Computer-Menü (ab 1025 px) ---------- */ @media (min-width:1025px){ html body.wh-kanz-site .wh-header .wh-header-right>nav{display:block} html body.wh-kanz-site .wh-header .wh-nav{display:flex!important;gap:16px} html body.wh-kanz-site .wh-header .wh-nav a{font-size:14.5px;letter-spacing:-.003em} html body.wh-kanz-site .wh-header .wh-nav > li > a{position:relative;min-height:44px;color:var(--text)} html body.wh-kanz-site .wh-header .wh-nav > li > a:hover{color:var(--primary-dark)} html body.wh-kanz-site .wh-header .wh-nav > li > a.active{color:var(--primary-dark);font-weight:500} /* Feine Linie unter dem aktiven Punkt; beim Überfahren dezent angedeutet. */ html body.wh-kanz-site .wh-header .wh-nav > li > a::after, html body.wh-kanz-site .wh-header .wh-nav > li > a.active::after{content:"";display:block!important;position:absolute;left:0;right:0;bottom:7px;height:2px;border-radius:2px;background:var(--primary);transform:scaleX(0);transform-origin:left center;opacity:0;transition:transform .3s cubic-bezier(.22,.8,.28,1),opacity .2s ease} html body.wh-kanz-site .wh-header .wh-nav > li.wh-nav-has-sub > a::after{right:15px} html body.wh-kanz-site .wh-header .wh-nav > li > a.active::after{transform:scaleX(1);opacity:1} html body.wh-kanz-site .wh-header .wh-nav > li > a:hover::after{transform:scaleX(1);opacity:.35} html body.wh-kanz-site .wh-header .wh-nav > li > a.active:hover::after{opacity:1} html body.wh-kanz-site .wh-header .wh-nav a:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:6px} /* Aufklappmenü: hängt sauber unter der Kopfzeile, klare Karte, 44 px hohe Einträge. */ html body.wh-kanz-site .wh-header .wh-nav-sub{top:calc(100% + 28px);min-width:236px;padding:8px;border:1px solid var(--border);border-radius:14px;background:#fff;box-shadow:0 22px 44px -22px rgba(22,44,54,.32),0 2px 6px rgba(22,44,54,.05)} html body.wh-kanz-site .wh-header .wh-nav-sub::before{top:-30px;height:30px} html body.wh-kanz-site .wh-header .wh-nav-sub li + li{margin-top:2px} html body.wh-kanz-site .wh-header .wh-nav-sub a{display:flex;align-items:center;min-height:44px;padding:0 14px;font-size:15px;line-height:1.3;border-radius:10px;color:var(--text)} html body.wh-kanz-site .wh-header .wh-nav-sub a:hover, html body.wh-kanz-site .wh-header .wh-nav-sub a:focus-visible{background:#edf4f6;color:var(--primary-dark)} html body.wh-kanz-site .wh-header .wh-nav-sub a:focus-visible{outline:2px solid var(--primary);outline-offset:-2px} /* Touch-Geräte: erster Tipp öffnet das Untermenü (Klasse aus wz-nav.js). */ html body.wh-kanz-site .wh-header .wh-nav-has-sub.is-sub-open > .wh-nav-sub{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)} html body.wh-kanz-site .wh-header .wh-nav-has-sub.is-sub-open > a .wh-nav-arrow{transform:rotate(180deg);opacity:1} } /* Tablet quer (1025 bis 1199): Computer-Menü statt Menüknopf, kompakt gesetzt. */ @media (min-width:1025px) and (max-width:1199px){ html body.wh-kanz-site .wh-header .wh-header-inner{gap:20px} html body.wh-kanz-site .wh-header .wh-header-right, html body.wh-kanz-site .wh-smartbar ~ .wh-header .wh-header-right{gap:18px!important} html body.wh-kanz-site .wh-header .wh-nav{gap:14px} html body.wh-kanz-site .wh-header .wh-nav a{font-size:14px} html body.wh-kanz-site .wh-header .wz-menu-btn, html body.wh-kanz-site .wh-header .wz-call-btn{display:none} html body.wh-kanz-site .wz-sheet, html body.wh-kanz-site .wz-backdrop{display:none} html body.wh-kanz-site .wh-header .wh-btn--primary.wh-header-cta{padding:0 18px!important} /* Aufklappmenü bleibt bei 15 px wie am Computer (Touch-Bedienung, gute Lesbarkeit). */ html body.wh-kanz-site .wh-header .wh-nav-sub a{font-size:15px} } @media (min-width:1280px){ html body.wh-kanz-site .wh-header .wh-header-right{gap:28px} html body.wh-kanz-site .wh-header .wh-nav{gap:22px} html body.wh-kanz-site .wh-header .wh-nav a{font-size:15px} } @media (min-width:1600px){ html body.wh-kanz-site .wh-header .wh-nav{gap:28px} } /* ---------- Tablet hoch (761 bis 1024): Termin, Anruf und Menü als einheitliche Knopfreihe ---------- */ @media (min-width:761px) and (max-width:1024px){ html body.wh-kanz-site .wh-header .wh-btn--primary.wh-header-cta{padding:0 18px!important} html body.wh-kanz-site .wh-header .wz-menu-btn, html body.wh-kanz-site .wh-header .wz-call-btn{height:46px;border-radius:12px} html body.wh-kanz-site .wh-header .wz-menu-btn{padding:0 18px 0 16px;gap:10px} } /* ---------- Handy (bis 760): gleiche Randabstände wie der Inhalt ---------- */ @media (max-width:760px){ html body.wh-kanz-site .wh-header .wh-header-inner, html body.wh-kanz-site .wh-smartbar ~ .wh-header .wh-header-inner{padding:0 var(--pad-x)!important;gap:12px} html body.wh-kanz-site .wh-logo-text small{font-size:12px;margin-top:3px} html body.wh-kanz-site .wh-header .wz-menu-btn, html body.wh-kanz-site .wh-header .wz-call-btn{width:46px;height:46px;border-radius:12px} } @media (max-width:360px){ html body.wh-kanz-site .wh-logo-text small{font-size:11.5px} } /* Sehr schmale Handys (bis 340, z. B. 320 px): Logo und beide Knöpfe passen mit gleichem Rand links und rechts. */ @media (max-width:340px){ html body.wh-kanz-site .wh-header .wh-header-inner, html body.wh-kanz-site .wh-smartbar ~ .wh-header .wh-header-inner{gap:8px} html body.wh-kanz-site .wh-header .wh-logo-text{font-size:15px} html body.wh-kanz-site .wh-header .wz-menu-btn, html body.wh-kanz-site .wh-header .wz-call-btn{width:44px;min-width:44px;height:44px} } /* ---------- Infoleiste oben (wh-smartbar) ---------- */ @media (min-width:761px){ html body.wh-kanz-site{--wh-smartbar-height:36px} html body.wh-kanz-site .wh-smartbar{height:36px;background:#edf4f6!important;border-bottom:1px solid #dce6e9!important;box-shadow:none!important;color:#3f5561} html body.wh-kanz-site .wh-smartbar .wh-smartbar__inner{font-size:13px!important;letter-spacing:0;gap:24px} html body.wh-kanz-site .wh-smartbar svg{color:var(--primary)} html body.wh-kanz-site .wh-smartbar a{color:#3f5561} html body.wh-kanz-site .wh-smartbar a:hover, html body.wh-kanz-site .wh-smartbar a:focus-visible{color:var(--primary-dark)} html body.wh-kanz-site .wh-smartbar a:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px} /* Größere Trefferfläche für Adresse und Telefon, ohne die Leiste zu vergrößern. */ html body.wh-kanz-site .wh-smartbar .wh-smartbar__group a{position:relative} html body.wh-kanz-site .wh-smartbar .wh-smartbar__group a::after{content:"";position:absolute;inset:-8px -4px} html body.wh-kanz-site .wh-smartbar .wh-smartbar__today{color:#2f4652} html body.wh-kanz-site .wh-smartbar .wh-smartbar__today-text{font-variant-numeric:tabular-nums} html body.wh-kanz-site .wh-smartbar .wh-smartbar__day{font-weight:600} } /* Tablet hoch: Adresse links, Tagesstatus rechts (Anruf sitzt im Kopf). */ @media (min-width:761px) and (max-width:1024px){ html body.wh-kanz-site .wh-smartbar .wh-smartbar__inner{grid-template-columns:auto minmax(0,1fr)!important;padding:0 var(--pad-x)!important} html body.wh-kanz-site .wh-smartbar .wh-smartbar__group--left{display:flex!important} html body.wh-kanz-site .wh-smartbar .wh-smartbar__group--right{display:none!important} html body.wh-kanz-site .wh-smartbar .wh-smartbar__today{justify-content:flex-end;overflow:hidden} html body.wh-kanz-site .wh-smartbar .wh-smartbar__today-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} } /* Ab 1025: Adresse links, Status mittig, Telefon rechts. "Termin anfragen" entfällt, der Knopf steht im Kopf. */ @media (min-width:1025px){ html body.wh-kanz-site .wh-smartbar .wh-smartbar__group--right{display:flex!important} html body.wh-kanz-site .wh-smartbar .wh-smartbar__separator, html body.wh-kanz-site .wh-smartbar .wh-smartbar__appointment{display:none!important} html body.wh-kanz-site .wh-smartbar .wh-smartbar__group--right a{font-variant-numeric:tabular-nums} } /* ---------- Menü für Handy und Tablet (wz-sheet) ---------- */ /* Kopf der Schublade deckungsgleich mit der Kopfzeile: gleiche Höhe, gleiche Ränder. */ html body.wh-kanz-site .wz-sheet-head{height:68px;padding:0 var(--pad-x)} html body.wh-kanz-site .wz-sheet-logo{height:30px;margin-left:-4px} html body.wh-kanz-site .wz-sheet-brand{min-height:44px} html body.wh-kanz-site .wz-sheet-brand-text{font-size:16px;font-weight:650;letter-spacing:-.025em} html body.wh-kanz-site .wz-sheet-brand-text small{font-size:12px;font-weight:500;letter-spacing:.01em} html body.wh-kanz-site .wz-sheet-close{border-radius:12px} html body.wh-kanz-site .wz-sheet-brand:focus-visible{outline:2px solid var(--wz-accent);outline-offset:3px;border-radius:8px} html body.wh-kanz-site .wz-sheet-body{display:flex;flex-direction:column;padding:20px var(--pad-x) 16px} html body.wh-kanz-site .wz-tiles{gap:10px} html body.wh-kanz-site .wz-tile{border-radius:16px} html body.wh-kanz-site .wz-tile-icon{border-radius:12px} html body.wh-kanz-site .wz-tile-label{overflow-wrap:normal;hyphens:manual} html body.wh-kanz-site .wz-tile-note{font-size:14px} /* Infokarte: heutiger Status (aus der Infoleiste) und Adresse mit Kartenlink. Beide Zeilen 44 px hoch, damit der Abstand oben und unten in der Karte gleich ist. */ html body.wh-kanz-site .wz-sheet-info{display:grid;gap:4px;margin-top:16px;padding:6px 16px;border:1px solid var(--wz-line);border-radius:16px;background:#fff} html body.wh-kanz-site .wz-sheet-today{display:flex;align-items:center;gap:10px;min-height:44px;margin:0;font-size:15px;font-weight:500;line-height:1.4;color:var(--wz-ink);font-variant-numeric:tabular-nums} html body.wh-kanz-site .wz-sheet-today[hidden]{display:none} html body.wh-kanz-site .wz-sheet-today-dot{flex:0 0 auto;width:8px;height:8px;margin:0 3px;border-radius:50%;background:#2f9467;box-shadow:0 0 0 4px rgba(47,148,103,.12)} html body.wh-kanz-site .wz-sheet-today.is-closed .wz-sheet-today-dot{background:#a66b5d;box-shadow:0 0 0 4px rgba(166,107,93,.12)} html body.wh-kanz-site .wz-sheet-info .wz-sheet-address{display:flex;align-items:center;gap:10px;min-height:44px;margin:0;font-size:14px;line-height:1.4;color:var(--wz-muted);text-align:left;text-decoration:none} html body.wh-kanz-site .wz-sheet-info .wz-sheet-address::before{content:"";flex:0 0 auto;width:14px;height:14px;background:var(--wz-accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M19 10.2c0 5.2-7 10.3-7 10.3s-7-5.1-7-10.3a7 7 0 0 1 14 0Z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M19 10.2c0 5.2-7 10.3-7 10.3s-7-5.1-7-10.3a7 7 0 0 1 14 0Z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E") center/contain no-repeat} html body.wh-kanz-site .wz-sheet-info .wz-sheet-address:hover{color:var(--wz-accent-dark);text-decoration:underline;text-underline-offset:3px} html body.wh-kanz-site .wz-sheet-info .wz-sheet-address:focus-visible{outline:2px solid var(--wz-accent);outline-offset:2px;border-radius:6px} html body.wh-kanz-site .wz-sheet-foot{padding:12px var(--pad-x) max(14px,env(safe-area-inset-bottom))} html body.wh-kanz-site .wz-sheet-cta, html body.wh-kanz-site .wz-sheet-call{height:56px;border-radius:14px;font-weight:600} /* Handy: Kacheln etwas kompakter, damit Kacheln und Infokarte über der Fußleiste stehen (iPhone 390 x 844). */ @media (max-width:760px){ html body.wh-kanz-site .wz-tile{min-height:0;gap:10px;padding:14px 16px} html body.wh-kanz-site .wz-tile-icon{width:44px;height:44px} html body.wh-kanz-site .wz-tile-icon svg{width:24px;height:24px} } /* Kleine Handys (Höhe bis 700, z. B. iPhone SE): noch kompakter, Adresszeile entfällt, alles über der Fußleiste. */ @media (max-height:700px) and (max-width:760px){ html body.wh-kanz-site .wz-sheet-body{padding-top:12px} html body.wh-kanz-site .wz-tiles{gap:6px} html body.wh-kanz-site .wz-tile{gap:8px;padding:10px 12px} html body.wh-kanz-site .wz-tile-icon{width:34px;height:34px;border-radius:10px} html body.wh-kanz-site .wz-tile-icon svg{width:20px;height:20px} html body.wh-kanz-site .wz-tile-item--wide .wz-tile{gap:12px} html body.wh-kanz-site .wz-sheet-info{margin-top:10px;padding:6px 14px} html body.wh-kanz-site .wz-sheet-today{min-height:36px} html body.wh-kanz-site .wz-sheet-info .wz-sheet-address{display:none} html body.wh-kanz-site .wz-sheet-foot{padding-top:10px} html body.wh-kanz-site .wz-sheet-cta, html body.wh-kanz-site .wz-sheet-call{height:52px} } /* Tablet-Schublade (761 bis 1024): Kopf 84 px wie die Kopfzeile, Infokarte unten, Kacheln füllen die Höhe. */ @media (min-width:761px){ html body.wh-kanz-site .wz-sheet-head{height:84px;padding:0 28px} html body.wh-kanz-site .wz-sheet-logo{height:34px} html body.wh-kanz-site .wz-sheet-brand-text{font-size:18px} html body.wh-kanz-site .wz-sheet-brand-text small{font-size:12.5px} html body.wh-kanz-site .wz-sheet-body{padding:28px 28px 20px} html body.wh-kanz-site .wz-tiles{gap:12px} html body.wh-kanz-site .wz-tiles{margin-bottom:20px} html body.wh-kanz-site .wz-sheet-info{margin-top:auto;padding:8px 18px} html body.wh-kanz-site .wz-sheet-foot{padding:16px 28px max(20px,env(safe-area-inset-bottom))} } @media (min-width:761px) and (min-height:1000px){ html body.wh-kanz-site .wz-tile{min-height:140px;padding:20px} html body.wh-kanz-site .wz-tile-item--wide .wz-tile{min-height:0} } /* ---------- Cookie-Hinweis und Cookie-Fenster (nur Darstellung) ---------- */ /* Akzentfarbe wie "Termin buchen"; auf der Weberhaus-Übersicht deren Blau. */ html body.wh-kanz-site :is(#wh-cc-bar,#wh-cc-modal){--cc-accent:var(--primary);--cc-accent-dark:var(--primary-dark);--cc-text:var(--text);--cc-muted:var(--muted)} html body.wz-entry:not(.weida-open) :is(#wh-cc-bar,#wh-cc-modal){--cc-accent:#326f89;--cc-accent-dark:#27596f;--cc-text:#243e43;--cc-muted:#56696d} /* Leiste: Inhalt im Seitenraster (gleiche Kante wie Logo und Text). 100% = Breite der festen Leiste ohne Scrollbalken, damit die Kante auch mit klassischem Scrollbalken (Windows) bündig bleibt. */ html body:is(.wh-kanz-site,.wz-entry:not(.weida-open)) #wh-cc-bar.wh-cc-bar{border:0!important} html body.wh-kanz-site #wh-cc-bar .wh-cc-bar-inner{padding-left:max(var(--pad-x),calc((100% - var(--max-width))/2 + var(--pad-x)))!important;padding-right:max(var(--pad-x),calc((100% - var(--max-width))/2 + var(--pad-x)))!important} /* Weberhaus-Übersicht: dieselbe Kante wie deren Kopf und Inhalt (Raster aus Teil A2: 1600 inkl. Rand, Rand --a2-pad). */ html body.wz-entry:not(.weida-open) #wh-cc-bar .wh-cc-bar-inner{padding-left:max(var(--a2-pad,20px),calc((100% - 1600px)/2 + var(--a2-pad,20px)))!important;padding-right:max(var(--a2-pad,20px),calc((100% - 1600px)/2 + var(--a2-pad,20px)))!important} html body:is(.wh-kanz-site,.wz-entry:not(.weida-open)) #wh-cc-bar .wh-cc-bar-inner{padding-top:22px!important;padding-bottom:calc(22px + env(safe-area-inset-bottom))!important;border-width:1px 0 0!important;border-color:#e3ecef!important;border-radius:20px 20px 0 0!important;background:rgba(248,251,252,.97)!important} html body:is(.wh-kanz-site,.wz-entry:not(.weida-open)) #wh-cc-bar-title{font-weight:650!important;letter-spacing:-.025em!important;color:var(--cc-text)!important;text-wrap:balance} html body:is(.wh-kanz-site,.wz-entry:not(.weida-open)) #wh-cc-bar-desc{font-size:14.5px!important;line-height:1.55!important;color:var(--cc-muted)!important;max-width:72ch!important} html body:is(.wh-kanz-site,.wz-entry:not(.weida-open)) #wh-cc-bar-desc a{color:var(--cc-accent-dark)!important;text-decoration-color:currentColor!important} /* Knöpfe: gleich hoch, 15 px, klare Rangfolge, sichtbarer Fokus. */ html body:is(.wh-kanz-site,.wz-entry:not(.weida-open)) :is(#wh-cc-bar,#wh-cc-modal) .wh-cc-btn{min-height:48px!important;padding:10px 16px!important;border-radius:12px!important;font-size:15px!important;font-weight:600!important;line-height:1.25!important} html body:is(.wh-kanz-site,.wz-entry:not(.weida-open)) :is(#wh-cc-bar,#wh-cc-modal) .wh-cc-btn:focus-visible{outline:3px solid var(--cc-accent-dark)!important;outline-offset:3px!important} html body:is(.wh-kanz-site,.wz-entry:not(.weida-open)) #wh-cc-bar .wh-cc-btn--primary, html body:is(.wh-kanz-site,.wz-entry:not(.weida-open)) #wh-cc-modal .wh-cc-modal-foot .wh-cc-btn--secondary{background:var(--cc-accent)!important;border:1px solid var(--cc-accent)!important;color:#fff!important;box-shadow:none!important} html body:is(.wh-kanz-site,.wz-entry:not(.weida-open)) #wh-cc-bar .wh-cc-btn--primary:hover, html body:is(.wh-kanz-site,.wz-entry:not(.weida-open)) #wh-cc-modal .wh-cc-modal-foot .wh-cc-btn--secondary:hover{background:var(--cc-accent-dark)!important;border-color:var(--cc-accent-dark)!important} html body:is(.wh-kanz-site,.wz-entry:not(.weida-open)) #wh-cc-bar .wh-cc-btn--secondary, html body:is(.wh-kanz-site,.wz-entry:not(.weida-open)) #wh-cc-modal .wh-cc-modal-foot :is(.wh-cc-btn--ghost,.wh-cc-btn--primary){background:#fff!important;border:1px solid var(--cc-accent)!important;color:var(--cc-accent-dark)!important} html body:is(.wh-kanz-site,.wz-entry:not(.weida-open)) #wh-cc-bar .wh-cc-btn--secondary:hover, html body:is(.wh-kanz-site,.wz-entry:not(.weida-open)) #wh-cc-modal .wh-cc-modal-foot :is(.wh-cc-btn--ghost,.wh-cc-btn--primary):hover{background:#edf4f6!important} html body:is(.wh-kanz-site,.wz-entry:not(.weida-open)) #wh-cc-bar .wh-cc-btn--ghost{background:transparent!important;border:1px solid #cfdde2!important;color:var(--cc-muted)!important} html body:is(.wh-kanz-site,.wz-entry:not(.weida-open)) #wh-cc-bar .wh-cc-btn--ghost:hover{background:#fff!important;color:var(--cc-text)!important} /* Tablet hoch: Text oben, drei gleich breite Knöpfe darunter. */ @media (min-width:761px) and (max-width:1024px){ html body:is(.wh-kanz-site,.wz-entry:not(.weida-open)) #wh-cc-bar .wh-cc-bar-inner{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto auto!important;row-gap:8px!important} html body:is(.wh-kanz-site,.wz-entry:not(.weida-open)) #wh-cc-bar .wh-cc-bar-actions{grid-column:1!important;grid-row:3!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;width:100%!important;margin-top:10px!important} } /* Ab 1025: Text links, rechts drei gleich breite Knöpfe. */ @media (min-width:1025px){ html body:is(.wh-kanz-site,.wz-entry:not(.weida-open)) #wh-cc-bar .wh-cc-bar-inner{grid-template-columns:minmax(0,1fr) minmax(0,560px)!important;column-gap:48px!important;row-gap:6px!important} html body:is(.wh-kanz-site,.wz-entry:not(.weida-open)) #wh-cc-bar .wh-cc-bar-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important} } /* Handy: gleiche Randabstände wie der Inhalt, Titel bricht nach "unserer" statt am Bindestrich, Text mindestens 15 px. */ @media (max-width:760px){ html body.wh-kanz-site #wh-cc-bar .wh-cc-bar-inner{padding:20px var(--pad-x) calc(18px + env(safe-area-inset-bottom))!important} html body:is(.wh-kanz-site,.wz-entry:not(.weida-open)) #wh-cc-bar-title{font-size:21px!important;margin-bottom:8px!important;max-width:13.5em!important;text-wrap:pretty} html body:is(.wh-kanz-site,.wz-entry:not(.weida-open)) #wh-cc-bar-desc{font-size:15px!important;line-height:1.55!important} html body:is(.wh-kanz-site,.wz-entry:not(.weida-open)) #wh-cc-bar .wh-cc-bar-actions{gap:10px!important;margin-top:16px!important} /* Fenster: "Datenschutz-Einstellungen" bleibt neben dem Schließen-Knopf in einer Zeile (kein Bruch am Bindestrich). */ html body:is(.wh-kanz-site,.wz-entry:not(.weida-open)) #wh-cc-modal .wh-cc-modal-h{font-size:21px!important;letter-spacing:-.03em!important} } /* Fenster "Cookie-Einstellungen": Schließen 44 px, Überschrift kräftiger, Text lesbarer, Farben wie die Seite. */ html body:is(.wh-kanz-site,.wz-entry:not(.weida-open)) #wh-cc-modal .wh-cc-modal-h{font-weight:650!important;letter-spacing:-.025em!important;color:var(--cc-text)!important} html body:is(.wh-kanz-site,.wz-entry:not(.weida-open)) #wh-cc-modal .wh-cc-eyebrow{color:var(--cc-accent-dark)!important;font-size:11.5px!important} html body:is(.wh-kanz-site,.wz-entry:not(.weida-open)) #wh-cc-modal .wh-cc-modal-close{width:44px!important;height:44px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;color:var(--cc-text)!important} html body:is(.wh-kanz-site,.wz-entry:not(.weida-open)) #wh-cc-modal .wh-cc-modal-close:focus-visible{outline:3px solid var(--cc-accent-dark)!important;outline-offset:2px!important} html body:is(.wh-kanz-site,.wz-entry:not(.weida-open)) #wh-cc-modal .wh-cc-modal-intro{font-size:15px!important;line-height:1.6!important;color:var(--cc-muted)!important} html body:is(.wh-kanz-site,.wz-entry:not(.weida-open)) #wh-cc-modal .wh-cc-modal-disclaimers{font-size:14px!important;line-height:1.55!important;color:#4c636e!important} html body:is(.wh-kanz-site,.wz-entry:not(.weida-open)) #wh-cc-modal .wh-cc-cat-name{font-size:15.5px!important;font-weight:600!important} html body:is(.wh-kanz-site,.wz-entry:not(.weida-open)) #wh-cc-modal .wh-cc-cat-desc{font-size:14px!important;line-height:1.5!important;color:#5b6e78!important} html body:is(.wh-kanz-site,.wz-entry:not(.weida-open)) #wh-cc-modal .wh-cc-badge{font-size:11.5px!important} html body:is(.wh-kanz-site,.wz-entry:not(.weida-open)) #wh-cc-modal input:checked + .wh-cc-switch{background:var(--cc-accent)!important;border-color:var(--cc-accent)!important} html body:is(.wh-kanz-site,.wz-entry:not(.weida-open)) #wh-cc-modal .wh-cc-cat-toggle input:focus-visible + .wh-cc-switch{outline:3px solid var(--cc-accent-dark)!important;outline-offset:3px!important} html body:is(.wh-kanz-site,.wz-entry:not(.weida-open)) #wh-cc-modal .wh-cc-details summary{min-height:44px;display:flex;align-items:center;font-size:14px} @media (prefers-reduced-motion:reduce){ html body.wh-kanz-site .wh-header .wh-nav > li > a::after, html body.wh-kanz-site .wh-header{transition:none} } @media print{ html body.wh-kanz-site .wz-sheet-info{display:none} } /* ===== 30-fuss-buttons-cta.css ===== */ /* ========================================================================== G2 Fuß, Buttons, Abschlussbänder, Kontextlinks, Weiterlesen-Karten Feinschliff 01.11.2026. Nur Praxisseiten Dr. Kanz (body.wh-kanz-site). Breakpoints: Handy bis 760, Tablet 761 bis 1199 (hoch bis 1024), Computer ab 1200. Farben: Petrol dunkel #28566b (Bänder), --primary-dark #285c70 (Links), Fußfläche #edf4f6. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Buttons: alte !important-Kaskade aus style.css ablösen. Feste Höhe 48/56 und Zeilenhöhe 1 ließen umbrochene Beschriftungen aus dem Knopf laufen. Jetzt: Mindesthöhe, Höhe wächst mit dem Text. Der Startseiten-Hero (.hp-hero-inner) behält seine eigenen Maße (A1). -------------------------------------------------------------------------- */ html body.wh-kanz-site main .wh-btn{ border-radius:12px!important; font-weight:600!important; letter-spacing:0!important; transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease!important; } html body.wh-kanz-site main .wh-btn:not(.hp-hero-inner .wh-btn){ height:auto!important; min-height:48px!important; padding:12px 24px!important; font-size:15px!important; line-height:1.25!important; } html body.wh-kanz-site main .wh-btn--lg:not(.hp-hero-inner .wh-btn){ min-height:56px!important; padding:14px 30px!important; font-size:16px!important; } html body.wh-kanz-site main .wh-btn--primary{background:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important} html body.wh-kanz-site main .wh-btn--primary:hover{background:var(--primary-dark)!important;border-color:var(--primary-dark)!important;color:#fff!important} html body.wh-kanz-site main .wh-btn--ghost{background:#fff!important;border-color:#b6cad2!important;color:var(--primary-dark)!important} html body.wh-kanz-site main .wh-btn--ghost:hover{background:#f2f7f9!important;border-color:var(--primary-dark)!important;color:var(--primary-dark)!important} /* Buttons auf dunklem Petrol (Handlungsbox, Abschlussband): Hauptbutton weiß */ html body.wh-kanz-site main :is(.sp-cta,.wh-cta) .wh-btn.wh-btn--primary{background:#fff!important;border-color:#fff!important;color:#1f4a5c!important} html body.wh-kanz-site main :is(.sp-cta,.wh-cta) .wh-btn.wh-btn--primary:hover{background:#e3eef2!important;border-color:#e3eef2!important;color:#1f4a5c!important} html body.wh-kanz-site main :is(.sp-cta,.wh-cta) .wh-btn.wh-btn--ghost{background:transparent!important;border-color:rgba(255,255,255,.62)!important;color:#fff!important} html body.wh-kanz-site main :is(.sp-cta,.wh-cta) .wh-btn.wh-btn--ghost:hover{background:rgba(255,255,255,.1)!important;border-color:#fff!important;color:#fff!important} html body.wh-kanz-site main :is(.sp-cta,.wh-cta) .wh-btn:focus-visible{outline:3px solid #fff;outline-offset:3px} /* Hero-Buttons der Unterseiten: Computer natürliche Breite ohne Umbruch, Tablet untereinander */ @media (min-width:1025px){ html body.wh-kanz-site .sp-hero .hp-hero-cta{max-width:none;flex-wrap:wrap;gap:12px} html body.wh-kanz-site .sp-hero .hp-hero-cta .wh-btn{flex:0 0 auto;min-width:0;white-space:nowrap!important} } @media (min-width:761px) and (max-width:1024px){ html body.wh-kanz-site .sp-hero .hp-hero-cta{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;max-width:400px} html body.wh-kanz-site .sp-hero .hp-hero-cta .wh-btn{width:100%;white-space:nowrap!important} } /* Handy: Beschriftung darf umbrechen, der Knopf wächst mit (statt seitlich überzulaufen) */ @media (max-width:760px){ html body.wh-kanz-site main .wh-btn:not(.hp-hero-inner .wh-btn){white-space:normal!important;text-align:center} html body.wh-kanz-site .mag-single-back .wh-btn{width:100%} } /* -------------------------------------------------------------------------- 2. Handlungsbox .sp-cta (Unterseiten) und Abschlussband .wh-cta (Startseite) Eine Farbwelt (Petrol #28566b), eine linke Kante, keine Lichtflecken. Flex mit Umbruch: Computer Text links und Buttons rechts, sobald es eng wird (Tablet, schmale Spalten) rutschen die Buttons linksbündig darunter. -------------------------------------------------------------------------- */ html body.wh-kanz-site .sp-cta{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 48px; padding:40px 48px;border-radius:20px;text-align:left;color:#fff; background:linear-gradient(135deg,#22505f 0%,#28566b 55%,#2c6074 100%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 18px 40px -30px rgba(20,52,66,.6); } html body.wh-kanz-site .sp-cta::before{display:none} html body.wh-kanz-site .sp-cta > div:first-child{flex:1 1 420px;min-width:0} html body.wh-kanz-site .sp-cta h3{color:#fff;font-size:26px;line-height:1.25;margin:0 0 8px;text-wrap:balance} html body.wh-kanz-site .sp-cta p{color:rgba(255,255,255,.88);font-size:16.5px;line-height:1.6;max-width:62ch;margin:0;text-wrap:pretty} html body.wh-kanz-site .sp-cta-btns{flex:0 1 auto;display:flex;flex-direction:row;flex-wrap:wrap;gap:12px;justify-content:flex-start} html body.wh-kanz-site .wh-cta{padding:72px 0;background:linear-gradient(135deg,#1f4a5c 0%,#28566b 55%,#2d6276 100%)} html body.wh-kanz-site .wh-cta::before{display:none} html body.wh-kanz-site .wh-cta-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px 56px;text-align:left} html body.wh-kanz-site .wh-cta-inner > div:first-child{flex:1 1 460px;min-width:0} html body.wh-kanz-site .wh-cta h2{color:#fff;font-size:clamp(28px,2.6vw,38px);line-height:1.2;margin:0 0 12px;text-wrap:balance} html body.wh-kanz-site .wh-cta p{color:rgba(255,255,255,.88);font-size:18px;line-height:1.6;max-width:56ch;margin:0;text-wrap:pretty} html body.wh-kanz-site .wh-cta-btns{flex:0 1 auto;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px;justify-content:flex-start} @media (min-width:761px) and (max-width:1024px){ html body.wh-kanz-site .sp-cta{padding:36px} html body.wh-kanz-site .wh-cta{padding:64px 0} } /* iPad mini (761 bis 780): style.css setzt dort die Abschluss-Buttons noch auf volle Breite, sie stünden gestapelt statt wie ab 781 nebeneinander */ @media (min-width:761px){ html body.wh-kanz-site .wh-cta-btns .wh-btn{width:auto} } @media (max-width:760px){ html body.wh-kanz-site .sp-cta{padding:28px 22px;border-radius:16px;gap:20px} html body.wh-kanz-site .sp-cta > div:first-child, html body.wh-kanz-site .wh-cta-inner > div:first-child{flex-basis:100%} html body.wh-kanz-site .sp-cta h3{font-size:23px} html body.wh-kanz-site .sp-cta p{font-size:16px} html body.wh-kanz-site :is(.sp-cta-btns,.wh-cta-btns){flex:1 1 100%;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:0} html body.wh-kanz-site :is(.sp-cta-btns,.wh-cta-btns) .wh-btn{width:100%} html body.wh-kanz-site .wh-cta{padding:48px 0} html body.wh-kanz-site .wh-cta-inner{gap:24px} html body.wh-kanz-site .wh-cta h2{font-size:28px} html body.wh-kanz-site .wh-cta p{font-size:16px} } /* -------------------------------------------------------------------------- 3. Weiterlesen-Karten (.sp-related): Fläche, Abstände, Raster und Karten- Innenabstand kommen aus G3 (10-grundlagen.css, Tokens). Hier nur, was die Karte als ganze Tippfläche braucht: Linkzeile, Hover, Fokus, Umbruch. -------------------------------------------------------------------------- */ html body.wh-kanz-site .sp-related-card{color:inherit;text-decoration:none;transition:border-color .2s ease,box-shadow .2s ease} html body.wh-kanz-site .sp-related-card:hover{border-color:#9fbfcb;box-shadow:0 14px 30px -26px rgba(36,59,70,.55)} html body.wh-kanz-site .sp-related-card:focus-visible{outline:3px solid #216881;outline-offset:3px} html body.wh-kanz-site .sp-related-card h3{color:var(--text);margin:0 0 8px;text-wrap:balance} html body.wh-kanz-site .sp-related-card p{color:var(--muted);margin:0 0 16px} html body.wh-kanz-site .sp-related-head p{color:var(--muted);text-wrap:pretty} html body.wh-kanz-site .sp-related-link{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:600;color:var(--primary-dark)} html body.wh-kanz-site .sp-related-card:hover .sp-related-link{color:var(--primary-dark);gap:6px;text-decoration:underline;text-underline-offset:3px} /* Einzelne Textlinks dieser Art (Profilseite) als 44-px-Tippfläche */ html body.wh-kanz-site a.sp-related-link{min-height:44px} /* -------------------------------------------------------------------------- 4. Kontextlinks "Passend zum Thema" (Plugin, Magazinartikel): Als Kachelzeile auf derselben hellen Fläche wie "Weitere Patientenratgeber", Kante und Breite wie Container. Kacheln ganz tippbar, Pfeil rechts. -------------------------------------------------------------------------- */ html body.wh-kanz-site main > .wh-contextual-links{max-width:none;margin:0;padding:64px 0 0;background:#f8fbfc;border-top:1px solid var(--border)} html body.wh-kanz-site main > .wh-contextual-links > .wh-contextual-links__inner{max-width:var(--max-width,1320px);margin:0 auto;padding:0 var(--pad-x);background:none;border:0;border-radius:0} html body.wh-kanz-site main > .wh-contextual-links + .sp-related{border-top:0;padding-top:48px!important} html body.wh-kanz-site main > .wh-contextual-links:not(:has(+ .sp-related)){padding-bottom:64px} html body.wh-kanz-site .wh-contextual-links h2{font-size:22px;line-height:1.3;margin:0 0 16px;color:var(--text)} /* auto-fit: wenige Kacheln (meist 3) laufen bis zur Containerkante, keine leeren Spalten rechts */ html body.wh-kanz-site .wh-contextual-links ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px;list-style:none;margin:0;padding:0} html body.wh-kanz-site .wh-contextual-links li, html body.wh-kanz-site .wh-contextual-links li+li{margin:0;border:0} html body.wh-kanz-site .wh-contextual-links a{ display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;height:100%; min-height:56px;padding:14px 20px;background:#fff;border:1px solid var(--border);border-radius:12px; color:var(--primary-dark);font-size:16px;font-weight:600;line-height:1.35;text-decoration:none; transition:border-color .2s ease,box-shadow .2s ease; } /* Pfeil als Linien-Symbol wie in den Buttons (Zeichen "→" saß in Arial zu tief) */ html body.wh-kanz-site .wh-contextual-links a::after{ content:"";flex:none;width:16px;height:16px;margin-left:auto;background:var(--primary); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform .2s ease; } html body.wh-kanz-site .wh-contextual-links a:hover{border-color:#9fbfcb;box-shadow:0 12px 26px -22px rgba(36,59,70,.5);text-decoration:none} html body.wh-kanz-site .wh-contextual-links a:hover::after{transform:translateX(3px)} @media (max-width:760px){ html body.wh-kanz-site main > .wh-contextual-links{padding-top:48px} html body.wh-kanz-site main > .wh-contextual-links + .sp-related{padding-top:40px!important} html body.wh-kanz-site .wh-contextual-links h2{font-size:20px;margin-bottom:12px} html body.wh-kanz-site .wh-contextual-links ul{gap:8px} html body.wh-kanz-site .wh-contextual-links a{padding:12px 20px;min-height:52px} } /* -------------------------------------------------------------------------- 5. Fußzeile. Computer und Tablet quer: Marke | Behandlungen | Navigation über Rechtliches | Öffnungszeiten. Tablet hoch: Marke | Zeiten, darunter Behandlungen (zweispaltig) | Navigation | Rechtliches. Handy: gestapelte Gruppen mit feinen Linien, Behandlungen zweispaltig. -------------------------------------------------------------------------- */ html body.wh-kanz-site .wh-footer{background:#edf4f6;color:var(--text);padding:64px 0 28px;border-top:1px solid #d3e2e7} html body.wh-kanz-site .wh-footer::before{display:none} html body.wh-kanz-site .wh-footer > .wh-container{container:whfoot / inline-size} html body.wh-kanz-site .wh-footer-top{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1.05fr) minmax(0,.85fr) minmax(300px,1.4fr); grid-template-areas:"brand treat nav hours" "brand treat legal hours"; grid-template-rows:auto 1fr; column-gap:clamp(28px,3vw,48px);row-gap:28px; padding-bottom:40px;border-bottom:1px solid #cedde2; } html body.wh-kanz-site .wh-footer-brand{grid-area:brand;max-width:none;min-width:0} html body.wh-kanz-site .wh-footer-col--treat{grid-area:treat;min-width:0} html body.wh-kanz-site .wh-footer-col--nav{grid-area:nav;min-width:0} html body.wh-kanz-site .wh-footer-col--legal{grid-area:legal;min-width:0} html body.wh-kanz-site .wh-footer-col--hours{grid-area:hours;min-width:0} /* Spaltenköpfe und Marken-Eyebrow gleich gesetzt, damit die Oberkanten fluchten */ html body.wh-kanz-site .wh-footer :is(.wh-footer-col h4,.wh-footer-eyebrow){ font-family:var(--font-heading);font-size:12px;line-height:1.5;font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:var(--primary-dark);margin:0 0 12px; } html body.wh-kanz-site .wh-footer .wh-footer-logo{font-size:25px;line-height:1.2;font-weight:500;letter-spacing:-.015em;color:var(--text);margin:0 0 6px;text-wrap:balance} html body.wh-kanz-site .wh-footer .wh-footer-logo-sub{font-size:15px;line-height:1.5;color:var(--muted)} /* Kontaktblock: Zeilen mit Symbol, Telefon und Mail als volle Tippflächen */ html body.wh-kanz-site .wh-footer-address{display:flex;flex-direction:column;align-items:flex-start;margin-top:20px;font-size:15px;line-height:1.45;font-style:normal;color:var(--muted)} html body.wh-kanz-site .wh-footer-address br{display:none} html body.wh-kanz-site .wh-footer-address :is(.wh-footer-address-line,a){display:inline-flex;align-items:center;gap:10px;min-height:36px;max-width:100%} html body.wh-kanz-site .wh-footer-address a{color:var(--muted);text-decoration:none;overflow-wrap:anywhere} html body.wh-kanz-site .wh-footer-address a strong{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums} html body.wh-kanz-site .wh-footer-address a:hover{color:var(--primary-dark);text-decoration:underline;text-underline-offset:3px} html body.wh-kanz-site .wh-footer-address a:hover strong{color:var(--primary-dark)} html body.wh-kanz-site .wh-footer-ico{flex:none;width:16px;height:16px;color:var(--primary)} /* Linklisten: 36-px-Raster am Computer, 44 px bei Berührung (siehe unten) */ html body.wh-kanz-site .wh-footer-links{list-style:none;margin:0;padding:0} html body.wh-kanz-site .wh-footer-links li{margin:0} html body.wh-kanz-site .wh-footer-links a{display:inline-flex;align-items:center;min-height:36px;padding:0;font-size:15px;line-height:1.35;color:var(--muted);text-decoration:none} html body.wh-kanz-site .wh-footer-links a:hover, html body.wh-kanz-site .wh-footer-links a:focus-visible{padding-left:0;color:var(--primary-dark);text-decoration:underline;text-underline-offset:3px} html body.wh-kanz-site .wh-footer a:focus-visible{outline:3px solid #216881;outline-offset:2px;border-radius:4px} /* Öffnungszeiten: Liste bis zur Spaltenkante, Heute-Zeile mit Luft nach außen */ html body.wh-kanz-site .wh-footer .wh-hours{max-width:none;margin:0} html body.wh-kanz-site .wh-footer .wh-hours-date{font-size:13px;line-height:1.5;color:var(--muted);margin:0 0 6px} html body.wh-kanz-site .wh-footer .wh-hours-status{font-size:14px;line-height:1.5;color:var(--primary-dark);margin:0 0 10px} html body.wh-kanz-site .wh-footer .wh-hours-row{grid-template-columns:auto minmax(0,1fr)!important;gap:16px;align-items:center;padding:8px 0;border-bottom:1px solid #d6e4e9} html body.wh-kanz-site .wh-footer .wh-hours-row:last-child{border-bottom:0} html body.wh-kanz-site .wh-footer .wh-hours-row dt{font-size:14px;line-height:1.5;color:var(--muted);align-items:center} html body.wh-kanz-site .wh-footer .wh-hours-row dd{font-size:14px;line-height:1.5;font-weight:500;color:var(--text);text-align:right;font-variant-numeric:tabular-nums} html body.wh-kanz-site .wh-footer .wh-hours-row--closed dd{color:var(--muted);font-weight:400} html body.wh-kanz-site .wh-footer .wh-hours-row.is-today{margin-inline:-10px;padding-inline:10px;border-radius:10px;border-bottom-color:transparent} html body.wh-kanz-site .wh-footer .wh-hours-row.is-today dt{color:var(--text);font-weight:600} html body.wh-kanz-site .wh-footer .wh-hours-row.is-today dd{color:var(--primary-dark)} html body.wh-kanz-site .wh-footer .wh-hours-today-tag{font-size:12px!important;font-weight:700!important;letter-spacing:.07em;line-height:1.4;padding:2px 7px;border-radius:6px;color:var(--primary-dark);background:#cfe3ea} /* Schlusszeile */ html body.wh-kanz-site .wh-footer-bottom{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px;margin-top:0;padding-top:22px;border:0} html body.wh-kanz-site .wh-footer-bottom :is(p,.wh-footer-bottom-meta){font-size:13px;line-height:1.6;color:var(--muted);margin:0} /* Computer mit genug Inhaltsbreite (ab 1300 px Inhalt, also etwa ab 1440 Bildschirm): fünf Spalten in einer Reihe. Schmaler steht Rechtliches unter Navigation, damit auch breitere Systemschriften (Helvetica am Mac) ohne Umbruch in die Spalten passen. */ @container whfoot (min-width:1300px){ html body.wh-kanz-site .wh-footer-top{ grid-template-columns:minmax(0,1.35fr) minmax(0,1.05fr) minmax(0,.8fr) minmax(0,.8fr) minmax(300px,1.4fr); grid-template-areas:"brand treat nav legal hours"; grid-template-rows:auto; column-gap:clamp(24px,2.4vw,44px); } } /* Tablet quer und alles mit Berührung: Tippflächen 44 px */ @media (max-width:1199px), (pointer:coarse){ html body.wh-kanz-site .wh-footer-links a, html body.wh-kanz-site .wh-footer-address :is(.wh-footer-address-line,a){min-height:44px} html body.wh-kanz-site .wh-footer :is(.wh-footer-col h4,.wh-footer-eyebrow){margin-bottom:6px} } @media (max-width:1024px){ html body.wh-kanz-site .wh-footer :is(.wh-footer-col h4,.wh-footer-eyebrow){font-size:13px;letter-spacing:.12em} } /* Tablet hoch */ @media (min-width:761px) and (max-width:1024px){ html body.wh-kanz-site .wh-footer{padding:56px 0 26px} html body.wh-kanz-site .wh-footer-top{ grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-areas:"brand brand hours hours" "treat treat nav legal"; grid-template-rows:auto auto; column-gap:24px;row-gap:36px; } html body.wh-kanz-site .wh-footer-links--treat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,auto);grid-auto-flow:column;column-gap:16px} } /* Tablet hoch und Handy: Behandlungen zweispaltig. Zweizeilige Namen (Professionelle Zahnreinigung, Zahnersatz und Implantate, Zahntechnik im Eigenlabor) bekommen oben und unten Luft, statt die 44-px-Zeile ganz auszufüllen; der einzeilige Nachbar in derselben Rasterzeile füllt die Zeile mit und steht mittig daneben. */ @media (max-width:1024px){ html body.wh-kanz-site .wh-footer-links--treat li{display:flex} html body.wh-kanz-site .wh-footer-links--treat a{width:100%;padding-block:6px;text-wrap:balance} } /* Handy */ @media (max-width:760px){ html body.wh-kanz-site .wh-footer{padding:40px 0 24px} html body.wh-kanz-site .wh-footer-top{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-areas:"brand brand" "hours hours" "treat treat" "nav legal"; grid-template-rows:auto; column-gap:0;row-gap:0;padding-bottom:4px; } html body.wh-kanz-site .wh-footer-top > *{padding:20px 0;border-top:1px solid #d3e2e7} html body.wh-kanz-site .wh-footer .wh-hours-row{padding-block:7px} /* Öffnungszeiten am Handy in Lesegröße wie die Linklisten (15 px statt 14 px) */ html body.wh-kanz-site .wh-footer .wh-hours-date{font-size:14px} html body.wh-kanz-site .wh-footer .wh-hours-status{font-size:15px} html body.wh-kanz-site .wh-footer .wh-hours-row :is(dt,dd){font-size:15px} html body.wh-kanz-site .wh-footer .wh-hours-today-tag{font-size:13px!important;letter-spacing:.06em;padding:1px 7px} html body.wh-kanz-site .wh-footer-top > .wh-footer-brand{padding-top:0;border-top:0} /* Rechtliches auf dieselbe Kante wie die zweite Behandlungsspalte */ html body.wh-kanz-site .wh-footer-top > .wh-footer-col--legal{padding-left:8px} html body.wh-kanz-site .wh-footer .wh-footer-logo{font-size:24px} html body.wh-kanz-site .wh-footer-address{margin-top:14px} html body.wh-kanz-site .wh-footer-links--treat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,auto);grid-auto-flow:column;column-gap:16px} html body.wh-kanz-site .wh-footer-bottom{flex-direction:column;align-items:flex-start;gap:4px;padding-top:20px} } @media (max-width:360px){ html body.wh-kanz-site .wh-footer .wh-hours-row.is-today{margin-inline:-8px;padding-inline:8px} } /* -------------------------------------------------------------------------- 6. Kleinere gemeinsame Punkte aus den Befunden -------------------------------------------------------------------------- */ /* Keine Einzelwörter in der letzten Zeile von Abschnittsköpfen (Absätze regelt G3) */ html body.wh-kanz-site :is(.wh-section-head,.sp-related-head) h2{text-wrap:balance} /* FAQ-Antworten in Lesebreite */ html body.wh-kanz-site .sp-faq-a{max-width:68ch} /* Links im Fließtext in der Linkfarbe der Seite */ html body.wh-kanz-site .sp-prose a:not(.wh-btn){color:var(--primary-dark);text-decoration-color:rgba(40,92,112,.45);text-underline-offset:3px} html body.wh-kanz-site .sp-prose a:not(.wh-btn):hover{text-decoration-color:currentColor} /* Seitenleisten-Karten: Button unten bündig, wenn zwei Karten nebeneinander gleich hoch sind */ html body.wh-kanz-site .sp-aside .sp-card{display:flex;flex-direction:column} html body.wh-kanz-site .sp-aside .sp-card .wh-btn{margin-top:auto} /* Behandlungs-Reiter bei Berührung mindestens 44 px hoch */ @media (pointer:coarse){ html body.wh-kanz-site :is(.wh-treatment-tabs-back,.wh-treatment-tab){display:inline-flex;align-items:center;min-height:44px} } /* ===== 40-startseite.css ===== */ /* ===================================================================== A1 Startseite Dr. Kanz (/startseite/), Feinschliff 01.11.2026 Gilt nur für die Vorlage template-larissa-startseite. Breakpoints: Handy bis 760, Tablet 761 bis 1199 (hoch bis 1024, quer ab 1025), Computer ab 1200, breit ab 1600. Baut auf den Variablen aus 10-grundlagen.css auf (--wz-section-y, --wz-gap, --wz-card-pad, --wz-radius, --wz-col-*); Abschlussband und Grund-Buttons kommen aus 30-fuss-buttons-cta.css. Alte Ebenen (style.css 1024/780/480, Customizer) werden hier gezielt überstimmt. ===================================================================== */ /* ---------- Gemeinsame Werte der Seite ---------- */ html body.wh-kanz-site.page-template-template-larissa-startseite{ --a1-tint:#f4f8f9; /* helle Abschnittsfläche */ --a1-line:#dce6e9; /* Kartenrand und Trennlinie */ --a1-ph:linear-gradient(135deg,#eef4f7,#e2ecf0); /* ruhiger Bildplatzhalter beim Nachladen */ } /* ---------- Typo: keine Einzelwörter am Absatzende ---------- */ html body.wh-kanz-site.page-template-template-larissa-startseite main :is(.wh-section-head p,.hp-story p,.wh-profile-bio,.behandeln-bio,.hp-treat-card p,.team-intro-lead,.hp-values-card p,.praxis-team-body p,.zt-usp li){text-wrap:pretty} html body.wh-kanz-site.page-template-template-larissa-startseite main :is(h1,h2,h3,.wh-eyebrow){text-wrap:balance} /* ---------- Abschnitts-Takt: gleiche Abstände, Flächen im Wechsel weiß / hell, keine Zufallslinien ---------- */ html body.wh-kanz-site.page-template-template-larissa-startseite main>.wh-section{padding-top:var(--wz-section-y,96px);padding-bottom:var(--wz-section-y,96px)} html body.wh-kanz-site.page-template-template-larissa-startseite main>.wh-section.wh-section--alt:not(.hp-treat-section), html body.wh-kanz-site.page-template-template-larissa-startseite main>.wh-section.wh-section--cream{background:var(--a1-tint);border:0} /* ---------- Nebenaktionen als ruhige Rahmen-Buttons, gefüllt bleibt nur "Termin buchen" ---------- */ html body.wh-kanz-site.page-template-template-larissa-startseite main :is(.wh-profile-actions,.zt-cta,.hp-reviews .wh-section-head) .wh-btn--primary, html body.wh-kanz-site.page-template-template-larissa-startseite main .wh-more-treatments, html body.wh-kanz-site.page-template-template-larissa-startseite main .hp-anf-btn{ display:inline-flex!important;align-items:center;justify-content:center;gap:10px!important; height:auto!important;min-height:48px!important;padding:12px 24px!important; background:#fff!important;color:var(--primary-dark)!important; border:1px solid #b6cad2!important;border-radius:12px!important; font-size:15px!important;font-weight:600!important;line-height:1.25!important; text-decoration:none!important;box-shadow:none!important;transform:none!important; } html body.wh-kanz-site.page-template-template-larissa-startseite main :is(.wh-profile-actions,.zt-cta,.hp-reviews .wh-section-head) .wh-btn--primary:hover, html body.wh-kanz-site.page-template-template-larissa-startseite main .wh-more-treatments:hover, html body.wh-kanz-site.page-template-template-larissa-startseite main .hp-anf-btn:hover{ background:#f2f7f9!important;border-color:var(--primary-dark)!important;color:var(--primary-dark)!important; } /* ===================================================================== 1. HERO ===================================================================== */ html body.wh-kanz-site.page-template-template-larissa-startseite .hp-hero{background:linear-gradient(112deg,#fff 38%,#eef5f7 100%)} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-hero .hp-hero-img{background:var(--a1-ph);box-shadow:0 32px 64px -44px rgba(25,62,78,.45)} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-hero-lead{max-width:56ch} /* Hero-Buttons: feste 62-px-Höhe und Umbruch aus style.css (bis 780) aufheben */ html body.wh-kanz-site.page-template-template-larissa-startseite .hp-hero .hp-hero-cta .wh-btn{ height:auto!important;min-height:56px;padding:0 22px!important;font-size:16px!important;line-height:1.2!important; border-radius:12px!important;gap:10px!important;white-space:nowrap!important; } html body.wh-kanz-site.page-template-template-larissa-startseite .hp-hero-img .hp-card{min-height:44px;align-items:center} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-hero-img .hp-card-place{font-size:13px} /* Vertrauenszeile: gleich breit wie Buttons und Zeitenzeile, nur eine Linie darüber */ html body.wh-kanz-site.page-template-template-larissa-startseite .hp-hero-inner .hp-hero-trust{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:540px;margin:22px 0 0;padding:0;border:0;gap:0; } html body.wh-kanz-site.page-template-template-larissa-startseite .hp-hero-trust .hp-trust-item{display:flex;padding:2px 20px 2px 0;border:0} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-hero-trust .hp-trust-item+.hp-trust-item{padding-left:20px;border-left:1px solid var(--a1-line)!important} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-hero-trust .hp-trust-block{flex-direction:column;align-items:flex-start;gap:4px} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-hero-trust .hp-trust-num{font-size:22px} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-hero-trust .hp-trust-label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin:0;white-space:normal;color:var(--muted)} /* Computer und Tablet quer: Grundraster der Seite, Porträt bündig an der rechten Containerkante, H1 auf allen Breiten zweizeilig (Name / Unterzeile) */ @media (min-width:1025px){ html body.wh-kanz-site.page-template-template-larissa-startseite .hp-hero-inner{grid-template-columns:minmax(0,var(--wz-col-main,1.15fr)) minmax(0,var(--wz-col-side,.85fr));gap:var(--wz-col-gap,64px);padding:clamp(48px,4.4vw,80px) 0} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-hero h1{font-size:clamp(40px,3.6vw,64px)} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-hero .hp-hero-img{justify-self:end;width:100%;max-height:640px} } /* Tablet hoch: Hero wieder zweispaltig (die alte 1024er-Regel löste die Textspalte per display:contents auf) */ @media (min-width:761px) and (max-width:1024px){ html body.wh-kanz-site.page-template-template-larissa-startseite .hp-hero-inner{display:grid!important;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:32px;align-items:center;padding:40px 0 48px} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-hero-inner>div:first-child{display:block!important;grid-column:1;grid-row:1} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-hero-inner .wh-eyebrow{display:inline-block;margin:0 0 4px} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-hero-inner .hp-hero-lead{display:block;margin:0 0 24px;max-width:none} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-hero h1{margin:14px 0 18px} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-hero .hp-hero-img{grid-column:2;grid-row:1;order:0;align-self:center;width:100%;margin:0;aspect-ratio:4/5;max-height:none;border-radius:20px} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-hero .hp-hero-img .hp-card{display:flex} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-hero .hp-hero-cta{display:grid;grid-template-columns:1fr;gap:10px;width:100%;max-width:none} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-hero .hp-hero-cta .wh-btn{min-height:52px;width:100%} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-hero-inner .hp-hero-hours-btn{margin:12px 0 0} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-hero-inner .hp-hero-trust{max-width:none;margin-top:18px} } /* Handy: Einleitung zurück (lokaler Bezug Moritzplatz), Buttons ohne Umbruch, ab 430 untereinander */ @media (max-width:760px){ html body.wh-kanz-site.page-template-template-larissa-startseite .hp-hero-inner{gap:16px;padding:24px 0 32px} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-hero-inner .wh-eyebrow{letter-spacing:.08em} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-hero-inner .hp-hero-lead{display:block;max-width:none;margin:0} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-hero .hp-hero-cta .wh-btn{min-height:52px;font-size:16px!important;white-space:nowrap!important;line-height:1.2!important} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-hero .hp-hero-img{border-radius:var(--wz-radius,14px)} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-hero-inner .hp-hero-trust{display:none} } @media (max-width:430px){ html body.wh-kanz-site.page-template-template-larissa-startseite .hp-hero-inner .hp-hero-cta{grid-template-columns:1fr} } /* Kleine Handys (iPhone SE 375): Dachzeile im Hero bleibt einzeilig statt umzubrechen */ @media (max-width:380px){ html body.wh-kanz-site.page-template-template-larissa-startseite .hp-hero-inner .wh-eyebrow{letter-spacing:.045em} } /* ===================================================================== 2. BEHANDLUNGEN ===================================================================== */ /* Ruhige helle Fläche ohne harte Verlaufskante (die alten Pixel-Stopps überlappten sich bei 720 px) */ html body.wh-kanz-site.page-template-template-larissa-startseite .hp-treat-section.wh-section--alt{ background:radial-gradient(1100px 520px at 88% 0%,rgba(236,226,207,.45),rgba(236,226,207,0) 70%),radial-gradient(900px 520px at 0% 100%,rgba(214,232,240,.55),rgba(214,232,240,0) 70%),var(--a1-tint); } html body.wh-kanz-site.page-template-template-larissa-startseite .hp-treat-card{padding:var(--wz-card-pad,28px);border-radius:var(--wz-radius,16px);border-color:var(--a1-line);transition:border-color .2s ease,box-shadow .2s ease} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-treat-card:hover{border-color:#9fbfcb;box-shadow:0 18px 36px -24px rgba(25,62,78,.38)} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-treat-eyebrow{font-size:12px;letter-spacing:.1em} /* Symbol beim Überfahren nur einfärben, nicht drehen (ruhiger) */ html body.wh-kanz-site.page-template-template-larissa-startseite .hp-treat-card:hover .hp-treat-icon-wrap{transform:none} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-treat-link{font-weight:600;color:var(--primary-dark)} /* "Alle Behandlungen": Rahmen-Button mittig unter dem Raster statt unterstrichenem Textlink */ html body.wh-kanz-site.page-template-template-larissa-startseite main .wh-more-treatments{display:flex!important;width:max-content;margin:36px auto 0} @media (max-width:760px){ html body.wh-kanz-site.page-template-template-larissa-startseite .hp-treat-card{padding:20px 0;border-radius:0;box-shadow:none} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-treat-card:hover{box-shadow:none} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-treat-card p{font-size:15px;line-height:1.6} html body.wh-kanz-site.page-template-template-larissa-startseite main .wh-more-treatments{width:100%;margin-top:28px} } /* ===================================================================== 3. IHRE ZAHNÄRZTIN (Intro + Profil) ===================================================================== */ /* Intro sichtbar auch ohne Einblend-Skript, Überschrift wie alle Abschnitte, keine Linie oben */ html body.wh-kanz-site.page-template-template-larissa-startseite .team-intro{padding:var(--wz-section-y,96px) 0 0;border:0} html body.wh-kanz-site.page-template-template-larissa-startseite .team-intro [data-reveal]{opacity:1;transform:none} html body.wh-kanz-site.page-template-template-larissa-startseite .team-intro-inner{max-width:740px;gap:16px} html body.wh-kanz-site.page-template-template-larissa-startseite .team-intro-l{gap:0} html body.wh-kanz-site.page-template-template-larissa-startseite .team-intro-l .wh-eyebrow{margin-bottom:12px} html body.wh-kanz-site.page-template-template-larissa-startseite .team-intro h2{font-weight:600;line-height:1.18} html body.wh-kanz-site.page-template-template-larissa-startseite .team-intro-lead{max-width:60ch;font-size:var(--wz-fs-head-p,18px);line-height:1.6;color:var(--muted)} html body.wh-kanz-site.page-template-template-larissa-startseite .team-intro+.wh-section{padding-top:var(--wz-head-gap,48px)!important} /* Das Intro trägt schon die Dachzeile "Ihre Zahnärztin": im Profil darunter nicht ein zweites Mal (stand auf allen Größen doppelt) */ html body.wh-kanz-site.page-template-template-larissa-startseite .team-intro+.wh-section .wh-profile-content>.wh-eyebrow{display:none} html body.wh-kanz-site.page-template-template-larissa-startseite .team-intro+.wh-section .wh-profile-content>h3{margin-top:0} @media (min-width:1025px){html body.wh-kanz-site.page-template-template-larissa-startseite .wh-profile-feature{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--wz-col-gap,64px);align-items:center}} html body.wh-kanz-site.page-template-template-larissa-startseite .wh-profile-visual{border-radius:var(--wz-radius,16px);background:var(--a1-ph);aspect-ratio:4/3} html body.wh-kanz-site.page-template-template-larissa-startseite .wh-profile-content h3{font-size:clamp(28px,2.4vw,38px);margin-bottom:16px} /* Name als Link: Tippfläche 44 px ohne Verschiebung */ html body.wh-kanz-site.page-template-template-larissa-startseite .wh-profile-content h3 a{display:inline-block;padding:6px 0;margin:-6px 0} html body.wh-kanz-site.page-template-template-larissa-startseite .wh-profile-bio{font-size:17px;line-height:1.7;max-width:62ch} html body.wh-kanz-site.page-template-template-larissa-startseite .wh-profile-facts div{font-size:15px} @media (min-width:761px) and (max-width:1024px){ html body.wh-kanz-site.page-template-template-larissa-startseite .wh-profile-feature{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:32px;align-items:stretch} html body.wh-kanz-site.page-template-template-larissa-startseite .wh-profile-visual{align-self:stretch;aspect-ratio:auto;height:auto;min-height:360px} html body.wh-kanz-site.page-template-template-larissa-startseite .wh-profile-content{padding:8px 0} html body.wh-kanz-site.page-template-template-larissa-startseite .wh-profile-facts div{grid-template-columns:1fr;gap:2px} } @media (max-width:760px){ html body.wh-kanz-site.page-template-template-larissa-startseite .team-intro-inner, html body.wh-kanz-site.page-template-template-larissa-startseite .team-intro-l{text-align:left;align-items:flex-start} /* Abstand H2 zu Einleitung wie bei allen Abschnittsköpfen (16 px); das Intro ist hier display:block, gap greift nicht */ html body.wh-kanz-site.page-template-template-larissa-startseite .team-intro-lead{font-size:16px;margin-top:16px} html body.wh-kanz-site.page-template-template-larissa-startseite .wh-profile-visual{aspect-ratio:3/2} html body.wh-kanz-site.page-template-template-larissa-startseite .wh-profile-content h3{font-size:27px} html body.wh-kanz-site.page-template-template-larissa-startseite .wh-profile-bio{font-size:16px} html body.wh-kanz-site.page-template-template-larissa-startseite .wh-profile-actions .wh-btn{width:100%} } /* ===================================================================== 4. PRAXISTEAM, EIGENLABOR, EMPFANG (eine helle Fläche, weiße Karten) ===================================================================== */ html body.wh-kanz-site.page-template-template-larissa-startseite .behandeln-grid{margin-top:0} html body.wh-kanz-site.page-template-template-larissa-startseite .behandeln-card{background:#fff;border-color:var(--a1-line);transform:none} html body.wh-kanz-site.page-template-template-larissa-startseite .behandeln-card:hover{transform:none;box-shadow:none;border-color:var(--a1-line)} /* Name und Rolle mit feiner Akzentlinie wie auf der Teamseite */ html body.wh-kanz-site.page-template-template-larissa-startseite .behandeln-card h3{margin:0;padding:0 0 4px 14px;border-left:3px solid var(--primary)} html body.wh-kanz-site.page-template-template-larissa-startseite .behandeln-role{margin:0 0 14px;padding:0 0 2px 14px;border-left:3px solid var(--primary);font-size:14px;line-height:1.45;color:var(--primary-dark)} html body.wh-kanz-site.page-template-template-larissa-startseite .behandeln-bio{color:var(--muted)} /* 7 Karten ohne Lücke: breit 4 Spalten (erste Karte doppelt), Computer und Tablet quer 3 (erste und letzte doppelt), Tablet hoch 2 (erste über die volle Breite). Hängt an genau 7 Karten, bei Teamänderung neu prüfen. */ @media (min-width:1600px){ html body.wh-kanz-site.page-template-template-larissa-startseite .behandeln-grid{grid-template-columns:repeat(4,minmax(0,1fr))} html body.wh-kanz-site.page-template-template-larissa-startseite .behandeln-grid>.behandeln-card:first-child{grid-column:span 2} } @media (min-width:1025px) and (max-width:1599px){ html body.wh-kanz-site.page-template-template-larissa-startseite .behandeln-grid{grid-template-columns:repeat(3,minmax(0,1fr))} html body.wh-kanz-site.page-template-template-larissa-startseite .behandeln-grid>.behandeln-card:first-child, html body.wh-kanz-site.page-template-template-larissa-startseite .behandeln-grid>.behandeln-card:last-child{grid-column:span 2} } @media (min-width:761px) and (max-width:1024px){ /* Über #team verankert, damit die allgemeine "letzte ungerade Karte volle Breite"-Regel hier nicht greift */ html body.wh-kanz-site.page-template-template-larissa-startseite main>#team~.wh-section .behandeln-grid>.behandeln-card:first-child{grid-column:1/-1} html body.wh-kanz-site.page-template-template-larissa-startseite main>#team~.wh-section .behandeln-grid>.behandeln-card:last-child{grid-column:auto} } /* Doppelt breite Karten: Name und Rolle links, Text rechts (keine überlangen Zeilen) */ @media (min-width:1600px){ html body.wh-kanz-site.page-template-template-larissa-startseite .behandeln-grid>.behandeln-card:first-child{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto auto 1fr;column-gap:32px} } @media (min-width:1025px) and (max-width:1599px){ html body.wh-kanz-site.page-template-template-larissa-startseite .behandeln-grid>.behandeln-card:is(:first-child,:last-child){display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto auto 1fr;column-gap:32px} } @media (min-width:761px) and (max-width:1024px){ html body.wh-kanz-site.page-template-template-larissa-startseite .behandeln-grid>.behandeln-card:first-child{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto auto 1fr;column-gap:28px} } @media (min-width:761px){ html body.wh-kanz-site.page-template-template-larissa-startseite .behandeln-grid>.behandeln-card>h3{grid-column:1;grid-row:1} html body.wh-kanz-site.page-template-template-larissa-startseite .behandeln-grid>.behandeln-card>.behandeln-role{grid-column:1;grid-row:2;align-self:start} html body.wh-kanz-site.page-template-template-larissa-startseite .behandeln-grid>.behandeln-card>.behandeln-bio{grid-column:2;grid-row:1/-1} } /* Eigenlabor: keine drei verschieden breiten Inseln mehr; ab Tablet quer zweispaltig auf voller Breite */ html body.wh-kanz-site.page-template-template-larissa-startseite .zt-section{margin-top:calc(var(--wz-section-y,96px) * .75);padding-top:calc(var(--wz-section-y,96px) * .75);border-top:1px solid var(--a1-line)} html body.wh-kanz-site.page-template-template-larissa-startseite .zt-section>.wh-section-head{margin-bottom:var(--wz-head-gap,48px)!important} html body.wh-kanz-site.page-template-template-larissa-startseite .zt-grid{max-width:none;gap:var(--wz-gap,24px);margin:0} html body.wh-kanz-site.page-template-template-larissa-startseite .zt-usp{max-width:none;margin:28px 0 0;gap:12px 32px} html body.wh-kanz-site.page-template-template-larissa-startseite .zt-usp li{font-size:15px} html body.wh-kanz-site.page-template-template-larissa-startseite .zt-cta{margin-top:32px} @media (min-width:761px){ html body.wh-kanz-site.page-template-template-larissa-startseite .zt-grid{grid-template-columns:repeat(2,minmax(0,1fr))} html body.wh-kanz-site.page-template-template-larissa-startseite .zt-usp{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (min-width:1025px){ html body.wh-kanz-site.page-template-template-larissa-startseite .zt-section{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;gap:0 var(--wz-col-gap,64px);align-items:start} html body.wh-kanz-site.page-template-template-larissa-startseite .zt-section>.wh-section-head{grid-column:1;grid-row:1;max-width:none;margin:0!important;text-align:left} html body.wh-kanz-site.page-template-template-larissa-startseite .zt-section>.zt-cta{grid-column:1;grid-row:2;justify-content:flex-start;margin-top:28px} html body.wh-kanz-site.page-template-template-larissa-startseite .zt-section>:is(.wh-mobile-details,.zt-grid){grid-column:2;grid-row:1} html body.wh-kanz-site.page-template-template-larissa-startseite .zt-section>.zt-usp{grid-column:2;grid-row:2;align-self:start} } /* Empfang-Karte: Bild füllt die ganze Kartenhöhe, Text mit klaren Abständen */ html body.wh-kanz-site.page-template-template-larissa-startseite .praxis-team{gap:0;align-items:stretch;margin-top:calc(var(--wz-section-y,96px) * .75);border-color:var(--a1-line);border-radius:var(--wz-radius,16px)} @media (min-width:1025px){html body.wh-kanz-site.page-template-template-larissa-startseite .praxis-team{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}} html body.wh-kanz-site.page-template-template-larissa-startseite .praxis-team-img{aspect-ratio:auto;height:auto;min-height:400px;background:var(--a1-ph)} /* Bild füllt die gestreckte Spalte, ohne selbst die Kartenhöhe zu bestimmen */ html body.wh-kanz-site.page-template-template-larissa-startseite .praxis-team-img img{width:100%;height:0;min-height:100%;object-fit:cover} html body.wh-kanz-site.page-template-template-larissa-startseite .praxis-team-body{padding:clamp(32px,4vw,56px);align-self:center} html body.wh-kanz-site.page-template-template-larissa-startseite .praxis-team-body .wh-eyebrow{margin-bottom:12px} html body.wh-kanz-site.page-template-template-larissa-startseite .praxis-team-body h2{margin:0 0 16px;font-size:clamp(26px,2.2vw,34px)} html body.wh-kanz-site.page-template-template-larissa-startseite .praxis-team-body p{font-size:17px;line-height:1.7;color:var(--muted)} html body.wh-kanz-site.page-template-template-larissa-startseite .praxis-team-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;margin-top:24px} html body.wh-kanz-site.page-template-template-larissa-startseite .praxis-team-list li{align-items:flex-start;line-height:1.5} html body.wh-kanz-site.page-template-template-larissa-startseite .praxis-team-list li svg{margin-top:2px} @media (min-width:1025px) and (max-width:1199px){ html body.wh-kanz-site.page-template-template-larissa-startseite .praxis-team-list{grid-template-columns:1fr} } @media (min-width:761px) and (max-width:1024px){ html body.wh-kanz-site.page-template-template-larissa-startseite .praxis-team{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)} html body.wh-kanz-site.page-template-template-larissa-startseite .praxis-team-img{min-height:320px} html body.wh-kanz-site.page-template-template-larissa-startseite .praxis-team-body{padding:28px} html body.wh-kanz-site.page-template-template-larissa-startseite .praxis-team-list{grid-template-columns:1fr} } @media (max-width:760px){ html body.wh-kanz-site.page-template-template-larissa-startseite .zt-usp{margin-top:20px} html body.wh-kanz-site.page-template-template-larissa-startseite .zt-cta .wh-btn{width:100%} html body.wh-kanz-site.page-template-template-larissa-startseite .praxis-team{grid-template-columns:1fr} html body.wh-kanz-site.page-template-template-larissa-startseite .praxis-team-img{min-height:0;aspect-ratio:3/2} html body.wh-kanz-site.page-template-template-larissa-startseite .praxis-team-body{padding:var(--wz-card-pad,20px)} html body.wh-kanz-site.page-template-template-larissa-startseite .praxis-team-body p{font-size:16px} html body.wh-kanz-site.page-template-template-larissa-startseite .praxis-team-list{grid-template-columns:1fr;gap:10px} } /* ===================================================================== 5. HAUS MIT GESCHICHTE ===================================================================== */ html body.wh-kanz-site.page-template-template-larissa-startseite .hp-story-img{border-radius:var(--wz-radius,16px);aspect-ratio:5/4;background:var(--a1-ph)} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-story h2{margin-bottom:18px} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-story p{color:var(--muted);font-size:17px;line-height:1.75;max-width:62ch} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-story-stats{gap:20px 24px;margin-top:28px;padding-top:24px;border-top-color:var(--a1-line)} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-story-stat-num{font-size:26px} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-story-stat-lbl{font-size:14px;line-height:1.4} @media (min-width:1025px){ html body.wh-kanz-site.page-template-template-larissa-startseite .hp-story{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--wz-col-gap,64px);align-items:center} /* Bild rechts: Wechsel zur Empfang-Karte darüber (Bild links) */ html body.wh-kanz-site.page-template-template-larissa-startseite .hp-story>.hp-story-img{order:2} } @media (min-width:1025px) and (max-width:1599px){ html body.wh-kanz-site.page-template-template-larissa-startseite .hp-story-stats{grid-template-columns:repeat(2,minmax(0,1fr))} } /* Tablet hoch: zweispaltig, Bild auf Texthöhe */ @media (min-width:761px) and (max-width:1024px){ html body.wh-kanz-site.page-template-template-larissa-startseite .hp-story{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:32px;align-items:stretch} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-story-img{aspect-ratio:auto;height:auto;min-height:360px} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-story-img img{height:0;min-height:100%} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-story-stats{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:760px){ html body.wh-kanz-site.page-template-template-larissa-startseite .hp-story-img{aspect-ratio:3/2} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-story p{font-size:16px;line-height:1.7} } /* ===================================================================== 6. WOFÜR WIR STEHEN ===================================================================== */ html body.wh-kanz-site.page-template-template-larissa-startseite .hp-values-card{background:#fff;border-color:var(--a1-line)} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-values-num{font-size:30px;margin-bottom:16px;color:var(--primary)} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-values-card h3{margin-bottom:10px} /* Handy: Karten als ruhige Zeilen mit Nummer links (statt drei hoher Karten mit großen Ziffern) */ @media (max-width:760px){ html body.wh-kanz-site.page-template-template-larissa-startseite .hp-values-card{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:12px;align-items:start} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-values-num{grid-row:span 2;margin:1px 0 0;font-size:24px} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-values-card h3{margin-bottom:6px} } /* ===================================================================== 7. BEWERTUNGEN: schmales Band statt leerem Abschnitt ===================================================================== */ html body.wh-kanz-site.page-template-template-larissa-startseite main>.hp-reviews{padding-bottom:0} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-reviews .wh-section-head{ display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 48px;max-width:none;margin:0;text-align:left; padding:clamp(28px,3vw,40px) clamp(28px,3.4vw,48px);border:1px solid var(--a1-line);border-radius:var(--wz-radius,16px); background:linear-gradient(110deg,#f8fbfc 0%,#eef5f7 100%); } html body.wh-kanz-site.page-template-template-larissa-startseite .hp-reviews .wh-section-head>*{grid-column:1} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-reviews .wh-section-head .wh-eyebrow{margin:0} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-reviews .wh-section-head h2{margin:0;font-size:clamp(24px,2.2vw,32px)} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-reviews .wh-section-head p{margin:4px 0 0} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-reviews .wh-section-head>.wh-btn{grid-column:2;grid-row:1/span 3;justify-self:end} @media (max-width:760px){ html body.wh-kanz-site.page-template-template-larissa-startseite .hp-reviews .wh-section-head{grid-template-columns:1fr;padding:var(--wz-card-pad,20px)} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-reviews .wh-section-head>.wh-btn{grid-column:1;grid-row:auto;justify-self:stretch;margin-top:16px} } /* ===================================================================== 8. ANFAHRT ===================================================================== */ html body.wh-kanz-site.page-template-template-larissa-startseite .hp-anf, html body.wh-kanz-site.page-template-template-larissa-startseite .hp-anf-info{gap:var(--wz-gap,24px)} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-anf-map{border-radius:var(--wz-radius,16px);border-color:var(--a1-line);box-shadow:none;background:var(--a1-ph)} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-anf-card{padding:var(--wz-card-pad,28px);border-radius:var(--wz-radius,16px);border-color:var(--a1-line)} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-anf-card-head{margin-bottom:16px} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-anf-addr{font-size:20px} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-anf-btns{margin-top:18px} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-anf-map-link{min-height:44px;padding:0 14px;font-size:13px;border-radius:10px} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-anf-hours-row{font-size:15px;padding:10px 0} /* Heute-Zeile: Tag und Zeit bündig mit den anderen Zeilen, Etikett neben dem Tag, Markierung ragt nach außen */ html body.wh-kanz-site.page-template-template-larissa-startseite .hp-anf-hours .wh-hours-day-label{flex-direction:row;align-items:center;gap:8px;padding-left:0} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-anf-hours-row.is-today{margin-inline:-10px;padding-inline:10px} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-anf-hours .wh-hours-today-tag{font-size:11px!important;letter-spacing:.08em} @media (min-width:1025px){ html body.wh-kanz-site.page-template-template-larissa-startseite .hp-anf{align-items:stretch} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-anf-map{aspect-ratio:auto;height:auto;min-height:420px} } /* Tablet hoch: Karte breit, Adresse als kompakte Zeile, darunter die Zeiten */ @media (min-width:761px) and (max-width:1024px){ html body.wh-kanz-site.page-template-template-larissa-startseite .hp-anf-map{aspect-ratio:16/9;min-height:0} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-anf-info>.hp-anf-card:first-child{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px 28px} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-anf-info>.hp-anf-card:first-child .hp-anf-card-head{margin:0} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-anf-info>.hp-anf-card:first-child .hp-anf-btns{margin:0} } @media (max-width:760px){ html body.wh-kanz-site.page-template-template-larissa-startseite .hp-anf-map{aspect-ratio:4/3;min-height:0} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-anf-addr{font-size:19px} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-anf-btns .hp-anf-btn{width:100%} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-anf-hours-row{font-size:15px} } /* ===== 45-einstieg.css ===== */ /* ===================================================================== A2 Einstieg: Weberhaus-Übersicht "/" (gemeinsamer Einstieg Dr. Kanz und Dres. Weida) Präfix "html body.wz-entry:not(.weida-open)" = nur die Übersicht. Die Weida-Seite /dr-weida/ bleibt unverändert (dort lädt dieses Stylesheet nicht, zusätzlich schließt :not(.weida-open) sie aus). Ersetzt das alte Ein-Bildschirm-Layout, bei dem Schrift und Knöpfe an der Fensterhöhe hingen (8 bis 12 px auf Laptops), durch ein ruhiges, scrollbares Raster mit festen Stufen. Stufen: Handy bis 760 · Tablet hoch 761 bis 1024 · Tablet quer 1025 bis 1199 · Computer ab 1200 · breit ab 1600. Die alten Brüche der Einstiegs-CSS (639/640, 700/701, 1000, 1023/1024, 1099/1100 und die Höhen-Abfragen) werden hier vollständig überschrieben. Container und Randabstand folgen den Praxisseiten (Teil 10-grundlagen: 1600 inkl. Rand). ===================================================================== */ /* ---------- 1. Variablen ---------- */ html body.wz-entry:not(.weida-open){ --a2-ink:var(--wz-ink,#243746); --a2-text:#3f4f5a; /* Zeiten, gut lesbar auf hellem Grund */ --a2-muted:var(--wz-secondary,#52616d); --a2-soft:#5f6e78; /* leiseste Textstufe, noch 4,8:1 auf Fläche */ --a2-accent:var(--wz-accent,#326f89); --a2-accent-hover:var(--wz-accent-hover,#27596f); --a2-line:var(--wz-border,#dfe5e7); --a2-control:var(--wz-control-border,#a0b7c2); --a2-surface:var(--wz-surface,#f8f9f9); --a2-head-bg:var(--wz-header,#f2f7fa); --a2-today:#e6eff3; --a2-font:var(--font-body,'Helvetica Neue',Helvetica,Arial,sans-serif); --a2-pad:clamp(20px,3.5vw,64px); --a2-inline:max(var(--a2-pad),calc((100% - 1600px) / 2 + var(--a2-pad))); --a2-gap:clamp(40px,4vw,64px); --a2-radius:16px; --a2-header-h:76px; } @media (min-width:761px) and (max-width:1199px){html body.wz-entry:not(.weida-open){--a2-pad:clamp(32px,4vw,48px);--a2-header-h:72px}} @media (max-width:760px){html body.wz-entry:not(.weida-open){--a2-header-h:64px;--a2-radius:14px}} @media (max-width:359px){html body.wz-entry:not(.weida-open){--a2-pad:16px}} /* ---------- 2. Seitengerüst: normal scrollen statt fester Bildschirmhöhe ---------- */ /* Das alte html{overflow:hidden} sperrt das Scrollen; nur auf der Übersicht aufheben. */ html:has(> body.wz-entry:not(.weida-open)){height:auto;overflow-x:hidden;overflow-y:auto} html body.wz-entry:not(.weida-open){ display:flex;flex-direction:column; height:auto;min-height:100vh;min-height:var(--app-height,100dvh); overflow-x:clip;overflow-y:visible;grid-template-rows:none; background:#fff;color:var(--a2-ink); font-family:var(--a2-font);font-size:16px;line-height:1.5; } /* Browser ohne :has(): der Body wird selbst zum Scrollbereich */ @supports not selector(:has(a)){html body.wz-entry:not(.weida-open){height:var(--app-height,100dvh);overflow-y:auto}} /* ---------- 3. Kopf ---------- */ /* Sprunglink: absolut am Seitenanfang statt fixed. Seit die Seite selbst scrollt, rutschte der versteckte fixe Link in Ganzseitenaufnahmen ins Bild (über Logo bzw. Einleitung). Mit Fokus weiter sichtbar. */ html body.wz-entry:not(.weida-open) > .skip{position:absolute;top:8px;left:8px} html body.wz-entry:not(.weida-open) > .header{ flex:none;height:var(--a2-header-h);min-height:0;margin:0; padding:0 var(--a2-inline); background:var(--a2-head-bg);border:0;border-bottom:1px solid var(--a2-line);box-shadow:none; } html body.wz-entry:not(.weida-open) .header-inner{height:100%;gap:24px} html body.wz-entry:not(.weida-open) .header .brand{gap:12px;min-height:44px;color:var(--a2-ink)} html body.wz-entry:not(.weida-open) .header .brand img{width:38px;height:38px} html body.wz-entry:not(.weida-open) .header .brand-name{font:600 22px/1.2 var(--a2-font);letter-spacing:-.015em;color:var(--a2-ink)} html body.wz-entry:not(.weida-open) .header .header-actions{gap:16px} /* Telefon als ruhige, klar tippbare Fläche mit Live-Zustand (Telefonzeiten vom 31.10.) */ html body.wz-entry:not(.weida-open) .header .phone{ position:relative;display:flex;align-items:center;gap:12px; width:auto;height:auto;min-height:52px;margin:0;padding:6px 18px 6px 16px; background:#fff;border:1px solid #cfdde4;border-radius:12px; font:500 17px/1.2 var(--a2-font);color:var(--a2-accent); transition:border-color .18s ease,background-color .18s ease; } html body.wz-entry:not(.weida-open) .header .phone:hover{border-color:var(--a2-accent);background:#fbfdfe;color:var(--a2-accent-hover)} html body.wz-entry:not(.weida-open) .header .phone .icon{width:20px;height:20px;color:var(--a2-accent)} html body.wz-entry:not(.weida-open) .header .phone .phone-text{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1.15} html body.wz-entry:not(.weida-open) .header .phone .phone-number{font-size:18px;font-weight:600;letter-spacing:.01em;color:var(--a2-ink)} html body.wz-entry:not(.weida-open) .header .phone .phone-state{margin-top:3px;font-size:13px;font-weight:500;line-height:1.3;color:var(--a2-soft);white-space:nowrap} html body.wz-entry:not(.weida-open) .header .phone .phone-state.is-on{color:var(--a2-accent)} html body.wz-entry:not(.weida-open) .header .phone .phone-dot{display:none} /* ---------- 4. Hauptbereich ---------- */ html body.wz-entry:not(.weida-open) .home-view.zip-design{ display:flex;flex-direction:column;flex:1 0 auto; height:auto;min-height:0;overflow:visible;gap:0;grid-template-rows:none;background:#fff; } /* ---------- 5. Hero: Begrüßung links, Hausfoto rechts (gleiche Spalten wie die Karten) ---------- */ html body.wz-entry:not(.weida-open) .zip-design .home-building{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--a2-gap);row-gap:0;align-items:center; position:relative;isolation:auto; width:100%;max-width:none;height:auto;min-height:0;flex:none; margin:0;padding:clamp(32px,3vw,56px) var(--a2-inline) 0;box-sizing:border-box;background:transparent; } html body.wz-entry:not(.weida-open) .zip-design .home-building::after{display:none;content:none} /* Ortszeile, Überschrift und Text als ein Block mittig neben dem Bild (vorher space-between mit Loch) */ html body.wz-entry:not(.weida-open) .zip-design .home-building-copy{ position:static;display:flex;flex-direction:column;justify-content:center;gap:0;align-self:center; width:auto;height:auto;min-height:0;padding:0;z-index:auto;pointer-events:auto; } html body.wz-entry:not(.weida-open) .zip-design .home-eyebrow{margin:0 0 22px;font:700 13px/1.3 var(--a2-font);letter-spacing:.14em;text-transform:uppercase;color:var(--a2-accent)} html body.wz-entry:not(.weida-open) .zip-design .hero-text{display:flex;flex-direction:column;gap:22px} html body.wz-entry:not(.weida-open) .zip-design .home-building h1{margin:0;font:600 clamp(50px,4vw,66px)/1.04 var(--a2-font);letter-spacing:-.032em;color:var(--a2-ink);text-shadow:none} html body.wz-entry:not(.weida-open) .zip-design .home-building h1 span{display:block;color:var(--a2-accent)} html body.wz-entry:not(.weida-open) .zip-design .hero-text>p{margin:0;max-width:34em;font:400 18px/1.6 var(--a2-font);color:var(--a2-muted)} /* Hausfoto im echten Verhältnis: nie gestreckt; höchstens unten (Pflaster) beschnitten. Die Skizze darüber nutzt dieselbe Ausrichtung (preserveAspectRatio xMidYMin slice). */ html body.wz-entry:not(.weida-open) .zip-design .building-photo{ position:relative;inset:auto;display:block;order:0;align-self:stretch; width:100%;height:auto;min-width:0;min-height:0;aspect-ratio:12/7; margin:0;border:0;border-radius:var(--a2-radius);overflow:hidden;background:#e9eff2; box-shadow:none;mask:none;-webkit-mask:none;filter:none; } html body.wz-entry:not(.weida-open) .zip-design .home-building-image{ position:absolute;inset:0;display:block;width:100%;height:100%;min-height:0;max-height:none; object-fit:cover;object-position:50% 0;border-radius:0;background:transparent;mask:none;-webkit-mask:none;filter:none; } html body.wz-entry:not(.weida-open) .zip-design .building-photo .house-sketch{inset:0;width:100%;height:100%} /* Zeichen-Animation kürzer (rund 1,3 s statt 2,8 s); das Skript zeigt sie nur einmal je Sitzung */ html body.wz-entry:not(.weida-open) .house-drawing .house-sketch{animation:house-color-reveal .75s .55s ease-in-out both} html body.wz-entry:not(.weida-open) .house-drawing .house-sketch path{animation-duration:calc(var(--stroke-duration) * .6);animation-delay:calc(var(--stroke-delay) * .6)} /* ---------- 6. Praxiskarten: Foto links, Name und Knöpfe rechts ---------- */ html body.wz-entry:not(.weida-open) .zip-design .portraits{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;grid-auto-rows:auto; gap:20px var(--a2-gap);align-items:stretch; width:100%;max-width:none;height:auto;min-height:0;flex:none; margin:0;padding:clamp(32px,2.8vw,48px) var(--a2-inline) clamp(40px,3vw,56px);box-sizing:border-box;background:none;overflow:visible; } html body.wz-entry:not(.weida-open) .zip-design .portrait-card{ position:relative;isolation:isolate;display:grid;grid-template-columns:34% minmax(0,1fr);grid-template-rows:auto; align-items:stretch;gap:0;flex-direction:row; width:auto;height:auto;min-height:0;margin:0;padding:0;text-align:left; background:var(--a2-surface);border:1px solid var(--a2-line);border-radius:var(--a2-radius);overflow:hidden; box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none; transition:border-color .2s ease,box-shadow .2s ease; } html body.wz-entry:not(.weida-open) .zip-design .portrait-card::before,html body.wz-entry:not(.weida-open) .zip-design .portrait-card::after{display:none;content:none} html body.wz-entry:not(.weida-open) .zip-design .portrait-card:hover{border-color:#c9d8df;box-shadow:0 14px 34px -24px rgba(36,55,70,.45)} html body.wz-entry:not(.weida-open) .zip-design .portrait-card:focus-within{border-color:var(--a2-accent)} html body.wz-entry:not(.weida-open) .zip-design .portrait-photo{ position:relative;align-self:stretch;flex:none; width:auto;height:auto;min-width:0;min-height:0;max-width:none;margin:0; border-radius:0;background:#e6edf3;overflow:hidden; } html body.wz-entry:not(.weida-open) .zip-design .portrait-photo>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 18%;border-radius:0;filter:none;mask:none;-webkit-mask:none} /* Ganze Fotofläche ist ein Link (jetzt in beiden Karten gleich) */ html body.wz-entry:not(.weida-open) .zip-design .portrait-entry{position:absolute;top:0;left:0;bottom:0;right:auto;width:34%;height:auto;max-width:none;transform:none;border-radius:0;z-index:2} html body.wz-entry:not(.weida-open) .zip-design .portrait-entry:focus-visible{outline:3px solid var(--a2-accent);outline-offset:-6px} html body.wz-entry:not(.weida-open) .zip-design .portrait-content{ position:relative;inset:auto;display:flex;flex-direction:column;justify-content:space-between;align-self:stretch; gap:22px;width:auto;height:auto;min-height:0;box-sizing:border-box;padding:28px 28px 30px; transform:none;text-align:left;color:var(--a2-ink);background:none;border:0;box-shadow:none;z-index:1; } html body.wz-entry:not(.weida-open) .zip-design .portrait-content .identity{display:block} html body.wz-entry:not(.weida-open) .zip-design .portrait-content .doctor-title,html body.wz-entry:not(.weida-open) .zip-design .portrait-content .identity .doctor-title{margin:0 0 6px;font:500 14px/1.4 var(--a2-font);letter-spacing:.02em;color:var(--a2-muted);text-shadow:none} html body.wz-entry:not(.weida-open) .zip-design .portrait-content h2{margin:0;font:600 32px/1.1 var(--a2-font);letter-spacing:-.022em;color:var(--a2-ink);text-shadow:none} html body.wz-entry:not(.weida-open) .zip-design .portrait-content h2 span{display:block;white-space:normal} html body.wz-entry:not(.weida-open) .zip-design .portrait-content h2 span+span::before{content:none} /* Knöpfe nebeneinander, sobald beide hineinpassen, sonst untereinander; ein einzelner Knopf (Weida) behält die halbe Breite, damit beide Karten dieselbe Startkante und Knopfgröße zeigen */ /* Zeilenhöhe aus dem Knopf: die alte Einstiegs-CSS setzt 46 px bzw. 40 px (grid-template-rows/grid-auto-rows), dadurch ragte der 48-px-Knopf in den Innenabstand und die unteren Knöpfe beider Karten standen versetzt */ html body.wz-entry:not(.weida-open) .zip-design .actions{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(176px,calc(50% - 5px)),1fr));grid-template-rows:none;grid-auto-rows:auto;gap:10px;width:100%;max-width:none;min-height:0;margin:0;flex-shrink:0} html body.wz-entry:not(.weida-open) .zip-design .action,html body.wz-entry:not(.weida-open) .zip-design .action[data-entry-link="booking"]{ display:flex;align-items:center;justify-content:center;gap:9px; grid-column:auto;grid-row:auto;flex:none;width:100%;max-width:none;min-width:0;height:48px;min-height:48px;margin:0;padding:0 14px;box-sizing:border-box; font:600 16px/1.2 var(--a2-font);letter-spacing:0;white-space:nowrap;border-radius:10px;box-shadow:none; transition:background-color .18s ease,border-color .18s ease,color .18s ease; } html body.wz-entry:not(.weida-open) .zip-design .action .icon,html body.wz-entry:not(.weida-open) .zip-design .action[data-entry-link="booking"] .icon{display:block;flex:none;width:18px;height:18px} html body.wz-entry:not(.weida-open) .zip-design .action[data-entry-link="booking"]{order:0;color:#fff;background:var(--a2-accent);border:1px solid var(--a2-accent)} html body.wz-entry:not(.weida-open) .zip-design .action[data-entry-link="booking"]:hover{color:#fff;background:var(--a2-accent-hover);border-color:var(--a2-accent-hover)} html body.wz-entry:not(.weida-open) .zip-design .action[data-entry-link="more"],html body.wz-entry:not(.weida-open) .zip-design .action[data-entry-link="weida"]{order:1;color:var(--a2-accent);background:#fff;border:1px solid var(--a2-control)} html body.wz-entry:not(.weida-open) .zip-design .action[data-entry-link="more"]:hover,html body.wz-entry:not(.weida-open) .zip-design .action[data-entry-link="weida"]:hover{color:var(--a2-accent-hover);background:#edf4f7;border-color:var(--a2-accent)} /* ---------- 7. Öffnungs- und Telefonzeiten: Tabelle mit Tagen als Spalten ---------- */ html body.wz-entry:not(.weida-open) .zip-design .home-hours{ flex:1 0 auto;position:relative;margin:0;padding:32px var(--a2-inline) 34px;box-sizing:border-box; background:var(--a2-surface);border:0;border-top:1px solid var(--a2-line);border-radius:0; } html body.wz-entry:not(.weida-open) .zip-design .home-hours::before{display:none;content:none} html body.wz-entry:not(.weida-open) .zip-design .home-hours-inner{display:grid;grid-template-columns:200px minmax(0,1fr);gap:0;align-items:start;max-width:none;margin:0} html body.wz-entry:not(.weida-open) .zip-design .home-hours-label{grid-column:1;grid-row:1;display:block;margin:0;padding:6px 24px 0 0;pointer-events:auto} html body.wz-entry:not(.weida-open) .zip-design .home-hours h2,html body.wz-entry:not(.weida-open) .zip-design .home-phone-label h3{margin:0;font:700 16px/22px var(--a2-font);letter-spacing:-.005em;color:var(--a2-ink)} html body.wz-entry:not(.weida-open) #today-summary,html body.wz-entry:not(.weida-open) #today-phone{display:none} html body.wz-entry:not(.weida-open) .zip-design .hours-disclosure{display:none} html body.wz-entry:not(.weida-open) .zip-design .weida-hours{display:block;grid-column:2;grid-row:1;margin:0;padding:0;border:0} html body.wz-entry:not(.weida-open) .zip-design .home-phone-label{grid-column:1;grid-row:2;display:block;margin:14px 0 0;padding:20px 24px 0 0;border-top:1px solid var(--a2-line)} html body.wz-entry:not(.weida-open) .zip-design .weida-hours.home-phone-hours{grid-column:2;grid-row:2;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--a2-line)} html body.wz-entry:not(.weida-open) .zip-design .weida-hours dl{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 8px;margin:0} html body.wz-entry:not(.weida-open) .zip-design .weida-hours .day{display:block;margin:0;padding:6px 12px 8px;border:0;border-radius:10px;background:none} html body.wz-entry:not(.weida-open) .zip-design .weida-hours dt{margin:0 0 4px;font:700 14px/20px var(--a2-font);color:var(--a2-ink)} html body.wz-entry:not(.weida-open) .zip-design .weida-hours dd{margin:0;font:400 14px/22px var(--a2-font);color:var(--a2-text);white-space:nowrap;text-align:left} html body.wz-entry:not(.weida-open) .zip-design .weida-hours dd span{display:block} html body.wz-entry:not(.weida-open) .zip-design .weida-hours dd span+span::before{content:none} html body.wz-entry:not(.weida-open) .zip-design .home-phone-hours .day.is-off dd{color:var(--a2-soft)} /* Heute: Spalte in beiden Zeilen leicht hinterlegt (Klasse kommt aus weberhaus-entry.js) */ html body.wz-entry:not(.weida-open) .zip-design .weida-hours .day.is-today{background:var(--a2-today)} html body.wz-entry:not(.weida-open) .zip-design .home-phone-hours .day.is-today dt{color:var(--a2-accent)} /* Telefonzeile steht direkt unter den Tagen: Tagesnamen dort nur für Vorleseprogramme */ html body.wz-entry:not(.weida-open) .zip-design .home-phone-hours dt{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ---------- 8. Fuß ---------- */ html body.wz-entry:not(.weida-open) > .footer{flex:none;height:auto;min-height:0;margin:0;padding:0 var(--a2-inline);background:var(--a2-surface);border:0} html body.wz-entry:not(.weida-open) .footer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 32px;height:auto;min-height:68px;margin:0;padding:10px 0;border-top:1px solid var(--a2-line)} html body.wz-entry:not(.weida-open) .footer-inner>div{display:block;min-width:0} html body.wz-entry:not(.weida-open) .footer .bottom-contact{display:flex;flex-wrap:wrap;align-items:center;gap:0 24px;font:400 14px/1.4 var(--a2-font);color:var(--a2-muted)} html body.wz-entry:not(.weida-open) .footer .bottom-contact>span,html body.wz-entry:not(.weida-open) .footer .bottom-contact a{display:inline-flex;align-items:center;min-height:44px;color:inherit} /* Drei Links (Impressum, Datenschutz, Cookie-Einstellungen): ganze Wörter umbrechen statt "Cookie-/Einstellungen" */ html body.wz-entry:not(.weida-open) .footer .footer-legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:0 28px;width:auto;margin:0} html body.wz-entry:not(.weida-open) .footer .legal-button{display:inline-flex;align-items:center;min-height:44px;padding:0;font:400 14px/1.4 var(--a2-font);color:var(--a2-muted);white-space:nowrap;background:none;border:0} html body.wz-entry:not(.weida-open) .footer .bottom-contact a:hover,html body.wz-entry:not(.weida-open) .footer .legal-button:hover{color:var(--a2-accent-hover);text-decoration:underline;text-underline-offset:4px} /* ---------- 8b. Zeiten-Tabelle ab Tablet quer: 15 px statt 14 px (gleiche Stufe wie breit) ---------- */ @media (min-width:1025px){ html body.wz-entry:not(.weida-open) .zip-design .weida-hours dt{font-size:15px;line-height:21px} html body.wz-entry:not(.weida-open) .zip-design .weida-hours dd{font-size:15px;line-height:23px} } /* ---------- 9. Breit ab 1600 ---------- */ @media (min-width:1600px){ html body.wz-entry:not(.weida-open) .zip-design .portrait-content{padding:32px 40px 34px} html body.wz-entry:not(.weida-open) .zip-design .portrait-content h2{font-size:36px} html body.wz-entry:not(.weida-open) .zip-design .portrait-content .doctor-title,html body.wz-entry:not(.weida-open) .zip-design .portrait-content .identity .doctor-title{font-size:15px} html body.wz-entry:not(.weida-open) .zip-design .hero-text>p{font-size:19px} html body.wz-entry:not(.weida-open) .zip-design .home-hours-inner{grid-template-columns:220px minmax(0,1fr)} } /* ---------- 10. Tablet quer (1025 bis 1199): Computer-Raster, Knöpfe untereinander ---------- */ @media (min-width:1025px) and (max-width:1199px){ html body.wz-entry:not(.weida-open) .zip-design .home-building h1{font-size:50px} html body.wz-entry:not(.weida-open) .zip-design .portrait-card{grid-template-columns:40% minmax(0,1fr)} html body.wz-entry:not(.weida-open) .zip-design .portrait-entry{width:40%} html body.wz-entry:not(.weida-open) .zip-design .portrait-content{padding:24px 26px 26px;gap:20px} html body.wz-entry:not(.weida-open) .zip-design .portrait-content h2{font-size:30px} html body.wz-entry:not(.weida-open) .zip-design .home-hours-inner{grid-template-columns:170px minmax(0,1fr)} html body.wz-entry:not(.weida-open) .zip-design .weida-hours .day{padding-inline:10px} } /* ---------- 11. Tablet hoch (761 bis 1024, inkl. iPad mini 768) ---------- */ @media (min-width:761px) and (max-width:1024px){ html body.wz-entry:not(.weida-open) .zip-design .home-building{column-gap:32px;padding-top:36px} html body.wz-entry:not(.weida-open) .zip-design .building-photo{aspect-ratio:3/2} html body.wz-entry:not(.weida-open) .zip-design .home-eyebrow{margin-bottom:16px;font-size:13px;letter-spacing:.12em} html body.wz-entry:not(.weida-open) .zip-design .hero-text{gap:16px} html body.wz-entry:not(.weida-open) .zip-design .home-building h1{font-size:42px;line-height:1.05} html body.wz-entry:not(.weida-open) .zip-design .hero-text>p{font-size:17px;line-height:1.55} /* Karten untereinander in voller Breite, gleiche Querform wie am Computer und Handy */ html body.wz-entry:not(.weida-open) .zip-design .portraits{grid-template-columns:minmax(0,1fr);gap:20px;padding:36px var(--a2-inline) 44px} html body.wz-entry:not(.weida-open) .zip-design .portrait-card{grid-template-columns:38% minmax(0,1fr);min-height:236px} html body.wz-entry:not(.weida-open) .zip-design .portrait-entry{width:38%} html body.wz-entry:not(.weida-open) .zip-design .portrait-content{justify-content:center;gap:24px;padding:28px 32px} html body.wz-entry:not(.weida-open) .zip-design .portrait-content h2{font-size:30px} html body.wz-entry:not(.weida-open) .zip-design .actions{max-width:480px} /* Zeiten als zwei Listen nebeneinander: Öffnungszeiten | Telefonzeiten */ html body.wz-entry:not(.weida-open) .zip-design .home-hours{padding:32px var(--a2-inline) 36px} html body.wz-entry:not(.weida-open) .zip-design .home-hours-inner{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px} html body.wz-entry:not(.weida-open) .zip-design .home-hours-label{grid-column:1;grid-row:1;padding:0 0 12px} html body.wz-entry:not(.weida-open) .zip-design .weida-hours{grid-column:1;grid-row:2} html body.wz-entry:not(.weida-open) .zip-design .home-phone-label{grid-column:2;grid-row:1;margin:0;padding:0 0 12px;border:0} html body.wz-entry:not(.weida-open) .zip-design .weida-hours.home-phone-hours{grid-column:2;grid-row:2;margin:0;padding:0;border:0} html body.wz-entry:not(.weida-open) .zip-design .weida-hours dl{display:block} html body.wz-entry:not(.weida-open) .zip-design .weida-hours .day{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;min-height:67px;padding:11px 0;border-top:1px solid var(--a2-line);border-radius:0;background:none} html body.wz-entry:not(.weida-open) .zip-design .weida-hours .day:last-child{min-height:0;border-bottom:1px solid var(--a2-line)} html body.wz-entry:not(.weida-open) .zip-design .weida-hours .day.is-today{background:none} html body.wz-entry:not(.weida-open) .zip-design .weida-hours .day.is-today dt{color:var(--a2-accent)} html body.wz-entry:not(.weida-open) .zip-design .weida-hours dt{margin:0;font-size:15px;line-height:22px} html body.wz-entry:not(.weida-open) .zip-design .weida-hours dd{font-size:15px;line-height:22px;text-align:right} html body.wz-entry:not(.weida-open) .zip-design .home-phone-hours dt{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal} } /* ---------- 12. Handy (bis 760) ---------- */ @media (max-width:760px){ /* Kopf: Logo und runder Telefonknopf mit Statuspunkt */ html body.wz-entry:not(.weida-open) .header-inner{gap:12px} html body.wz-entry:not(.weida-open) .header .brand{gap:10px} html body.wz-entry:not(.weida-open) .header .brand img{width:32px;height:32px} html body.wz-entry:not(.weida-open) .header .brand-name{font-size:18px;letter-spacing:-.02em} html body.wz-entry:not(.weida-open) .header .phone{justify-content:center;gap:0;width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;border-color:var(--a2-control)} html body.wz-entry:not(.weida-open) .header .phone .phone-text{display:none} html body.wz-entry:not(.weida-open) .header .phone .icon{width:19px;height:19px} html body.wz-entry:not(.weida-open) .header .phone .phone-dot{display:block;position:absolute;top:5px;right:5px;width:10px;height:10px;border-radius:50%;background:#b9c5cd;box-shadow:0 0 0 2px #fff} html body.wz-entry:not(.weida-open) .header .phone .phone-dot.is-on{background:#2f9a62} /* Hero: Hausfoto zuerst (ein Bild für alle Größen), dann Begrüßung */ html body.wz-entry:not(.weida-open) .zip-design .home-building{display:flex;flex-direction:column;align-items:stretch;gap:24px;padding:20px var(--a2-inline) 0} html body.wz-entry:not(.weida-open) .zip-design .building-photo{order:-1;aspect-ratio:3/2} html body.wz-entry:not(.weida-open) .zip-design .home-building-copy{align-self:stretch} html body.wz-entry:not(.weida-open) .zip-design .home-eyebrow{margin-bottom:14px;font-size:13px;letter-spacing:.12em} html body.wz-entry:not(.weida-open) .zip-design .hero-text{gap:14px} html body.wz-entry:not(.weida-open) .zip-design .home-building h1{font-size:38px;line-height:1.05;letter-spacing:-.03em} html body.wz-entry:not(.weida-open) .zip-design .hero-text>p{max-width:none;font-size:17px;line-height:1.55} /* Karten: kompakte Querkarten, beide Ärzte früh im Bild, alles linksbündig */ html body.wz-entry:not(.weida-open) .zip-design .portraits{grid-template-columns:minmax(0,1fr);gap:12px;padding:28px var(--a2-inline) 0} html body.wz-entry:not(.weida-open) .zip-design .portrait-card{grid-template-columns:124px minmax(0,1fr)} html body.wz-entry:not(.weida-open) .zip-design .portrait-photo{min-height:160px} html body.wz-entry:not(.weida-open) .zip-design .portrait-photo>img{object-position:50% 20%} html body.wz-entry:not(.weida-open) .zip-design .portrait-entry{width:124px} html body.wz-entry:not(.weida-open) .zip-design .portrait-content{justify-content:space-between;gap:14px;padding:16px} html body.wz-entry:not(.weida-open) .zip-design .portrait-content .doctor-title,html body.wz-entry:not(.weida-open) .zip-design .portrait-content .identity .doctor-title{margin-bottom:4px;font-size:13px} html body.wz-entry:not(.weida-open) .zip-design .portrait-content h2{font-size:22px;line-height:1.12;letter-spacing:-.02em} html body.wz-entry:not(.weida-open) .zip-design .actions{grid-template-columns:minmax(0,1fr);gap:8px} html body.wz-entry:not(.weida-open) .zip-design .action,html body.wz-entry:not(.weida-open) .zip-design .action[data-entry-link="booking"]{height:44px;min-height:44px;padding:0 12px;gap:8px;font-size:15px} html body.wz-entry:not(.weida-open) .zip-design .action .icon,html body.wz-entry:not(.weida-open) .zip-design .action[data-entry-link="booking"] .icon{width:16px;height:16px} /* Zeiten als Karte; die ganze Kopfzeile klappt auf (nicht nur der Pfeil) */ html body.wz-entry:not(.weida-open) .zip-design .home-hours{flex:none;margin:24px var(--a2-inline) 32px;padding:0 16px;border:1px solid var(--a2-line);border-radius:var(--a2-radius)} html body.wz-entry:not(.weida-open) .zip-design .home-hours-inner{grid-template-columns:minmax(0,1fr) 44px;align-items:center} html body.wz-entry:not(.weida-open) .zip-design .home-hours-label{grid-column:1;grid-row:1;padding:14px 0;pointer-events:none} html body.wz-entry:not(.weida-open) .zip-design .home-hours h2{font-size:16px;line-height:22px} html body.wz-entry:not(.weida-open) #today-summary{display:block;margin-top:4px;font:400 15px/1.45 var(--a2-font);color:var(--a2-text);text-wrap:balance} html body.wz-entry:not(.weida-open) #today-phone{display:block;margin-top:2px;font:400 15px/1.45 var(--a2-font);color:var(--a2-muted)} html body.wz-entry:not(.weida-open) #today-phone.is-on{color:var(--a2-accent)} html body.wz-entry:not(.weida-open) .zip-design .hours-disclosure{ grid-column:1/-1;grid-row:1;align-self:stretch;display:flex;align-items:center;justify-content:flex-end; width:100%;min-height:64px;margin:0;padding:0;background:none;border:0;border-radius:10px;color:var(--a2-accent);cursor:pointer; } html body.wz-entry:not(.weida-open) .zip-design .hours-disclosure .icon{width:22px;height:22px;transition:transform .2s ease} html body.wz-entry:not(.weida-open) .zip-design .hours-disclosure[aria-expanded="true"] .icon{transform:rotate(180deg)} html body.wz-entry:not(.weida-open) .zip-design .hours-disclosure:focus-visible{outline:3px solid var(--a2-accent);outline-offset:2px} html body.wz-entry:not(.weida-open) .zip-design .weida-hours,html body.wz-entry:not(.weida-open) .zip-design .weida-hours.home-phone-hours{display:none;grid-column:1/-1;grid-row:auto;margin:0;padding:0;border:0} html body.wz-entry:not(.weida-open) .zip-design.hours-expanded .weida-hours,html body.wz-entry:not(.weida-open) .zip-design.hours-expanded .weida-hours.home-phone-hours{display:block} html body.wz-entry:not(.weida-open) .zip-design .weida-hours.home-phone-hours{padding-bottom:6px} html body.wz-entry:not(.weida-open) .zip-design .home-phone-label{display:none;grid-column:1/-1;grid-row:auto;margin:0;padding:18px 0 6px;border:0} html body.wz-entry:not(.weida-open) .zip-design.hours-expanded .home-phone-label{display:block} html body.wz-entry:not(.weida-open) .zip-design .home-phone-label h3{font-size:15px} html body.wz-entry:not(.weida-open) .zip-design .weida-hours dl{display:block} html body.wz-entry:not(.weida-open) .zip-design .weida-hours .day{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--a2-line);border-radius:0;background:none} html body.wz-entry:not(.weida-open) .zip-design .weida-hours .day.is-today{background:none} html body.wz-entry:not(.weida-open) .zip-design .weida-hours .day.is-today dt{color:var(--a2-accent)} html body.wz-entry:not(.weida-open) .zip-design .weida-hours dt{margin:0;font-size:15px;line-height:22px} html body.wz-entry:not(.weida-open) .zip-design .weida-hours dd{font-size:15px;line-height:22px;text-align:right} html body.wz-entry:not(.weida-open) .zip-design .home-phone-hours dt{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal} /* Fuß: Kontakt und Rechtliches mit 44 px Tippfläche */ html body.wz-entry:not(.weida-open) .footer-inner{display:block;min-height:0;padding:12px 0 20px} html body.wz-entry:not(.weida-open) .footer .bottom-contact{gap:0 20px;font-size:15px} html body.wz-entry:not(.weida-open) .footer .footer-legal{gap:0 24px;margin-top:2px} html body.wz-entry:not(.weida-open) .footer .legal-button{font-size:15px} } @media (max-width:359px){ html body.wz-entry:not(.weida-open) .header .brand-name{font-size:16px} html body.wz-entry:not(.weida-open) .zip-design .home-building h1{font-size:34px} html body.wz-entry:not(.weida-open) .zip-design .portrait-card{grid-template-columns:108px minmax(0,1fr)} html body.wz-entry:not(.weida-open) .zip-design .portrait-entry{width:108px} html body.wz-entry:not(.weida-open) .zip-design .action,html body.wz-entry:not(.weida-open) .zip-design .action[data-entry-link="booking"]{padding:0 10px;font-size:14px} } /* ===== 50-profil-team.css ===== */ /* ===================================================================== A3 Profil Dr. Larissa Kanz (Seite 43) und Teamseite (Seite 281) Feinschliff 01.11.2026. Breakpoints: Handy bis 760, Tablet 761 bis 1199 (hoch bis 1024, quer ab 1025), Computer ab 1200. Präfix je Seite: body.page-id-43 (Profil), body.page-id-281 (Team). Grundraster, Abschnittsköpfe, Knöpfe und Handlungsbox kommen aus den gemeinsamen Teilen (10, 30); hier nur, was diese beiden Seiten brauchen. Das Team-Raster steht als Inline-Style in der Vorlage (lädt später im Body), deshalb tragen alle Regeln html body.wh-kanz-site.page-id-NN. ===================================================================== */ /* Gemeinsame Werte beider Seiten */ html body.wh-kanz-site:is(.page-id-43, .page-id-281) { --a3-line: #dce6e9; --a3-soft: #f1f7f9; --a3-card-shadow: 0 1px 2px rgba(20, 48, 60, .05), 0 18px 40px -28px rgba(20, 48, 60, .30); --a3-photo-shadow: 0 1px 2px rgba(20, 48, 60, .06), 0 34px 64px -34px rgba(20, 48, 60, .42); } /* ===================================================================== PROFIL DR. LARISSA KANZ (nur CSS, Inhalt liegt in der Datenbank) ===================================================================== */ /* Hero: Porträt mit ruhigem Schatten, Überschrift ausgeglichen umbrechen */ html body.wh-kanz-site.page-id-43 .dr-kanz-hero { background: linear-gradient(180deg, #f8fbfc 0%, #f1f7f9 100%); } html body.wh-kanz-site.page-id-43 .dr-kanz-hero h1 { text-wrap: balance; } html body.wh-kanz-site.page-id-43 .dr-kanz-hero .dr-kanz-hero-img { border-radius: 24px; background: #e6eff2; box-shadow: var(--a3-photo-shadow); } html body.wh-kanz-site.page-id-43 .dr-kanz-hero .dr-kanz-hero-img img { object-position: 50% 14%; } /* Eckdaten ab Tablet: ruhige Leiste mit feinen Trennlinien (Handy: Tabelle aus dem Grundteil) */ @media (min-width: 761px) { html body.wh-kanz-site.page-id-43 .dr-kanz-hero .sp-hero-meta { display: flex; flex-wrap: wrap; gap: 14px 0; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--a3-line); } html body.wh-kanz-site.page-id-43 .dr-kanz-hero .sp-hero-meta-item { min-width: 0; flex: 0 1 auto; padding: 2px 28px; border-left: 1px solid var(--a3-line); } html body.wh-kanz-site.page-id-43 .dr-kanz-hero .sp-hero-meta-item:first-child { padding-left: 0; border-left: 0; } html body.wh-kanz-site.page-id-43 .dr-kanz-hero .sp-hero-meta-val { font-size: 15px; line-height: 1.45; } } /* Computer und Tablet quer: Porträt größer, bündig mit der rechten Containerkante, Text mittig daneben */ @media (min-width: 1025px) { html body.wh-kanz-site.page-id-43 .dr-kanz-hero { padding-top: 44px; padding-bottom: 64px; } html body.wh-kanz-site.page-id-43 .dr-kanz-hero .sp-hero-inner { align-items: center; } html body.wh-kanz-site.page-id-43 .dr-kanz-hero .dr-kanz-hero-img { justify-self: end; width: 100%; max-width: clamp(400px, 33vw, 520px); max-height: none; aspect-ratio: 4 / 5; margin: 0; } } /* Tablet hoch: Text links, Porträt rechts mittig, Eckdaten über die volle Breite darunter */ @media (min-width: 761px) and (max-width: 1024px) { html body.wh-kanz-site.page-id-43 .dr-kanz-hero { padding-top: 32px; padding-bottom: 40px; } html body.wh-kanz-site.page-id-43 .dr-kanz-hero .sp-hero-inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-rows: 1fr auto auto auto auto 1fr auto; column-gap: 32px; row-gap: 0; align-items: start; } html body.wh-kanz-site.page-id-43 .dr-kanz-hero .sp-hero-inner > div:first-child { display: contents; } html body.wh-kanz-site.page-id-43 .dr-kanz-hero .wh-eyebrow { grid-column: 1; grid-row: 2; display: block; margin: 0 0 12px; } html body.wh-kanz-site.page-id-43 main .dr-kanz-hero h1 { grid-column: 1; grid-row: 3; margin: 0 0 16px; } html body.wh-kanz-site.page-id-43 .dr-kanz-hero .sp-hero-lead { grid-column: 1; grid-row: 4; margin: 0 0 22px; } html body.wh-kanz-site.page-id-43 .dr-kanz-hero .hp-hero-cta { grid-column: 1; grid-row: 5; margin: 0; } html body.wh-kanz-site.page-id-43 .dr-kanz-hero .dr-kanz-hero-img { grid-column: 2; grid-row: 1 / 7; align-self: center; width: 100%; max-width: none; max-height: none; aspect-ratio: 4 / 5; margin: 0; } html body.wh-kanz-site.page-id-43 .dr-kanz-hero .sp-hero-meta { grid-column: 1 / -1; grid-row: 7; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 32px; } html body.wh-kanz-site.page-id-43 .dr-kanz-hero .sp-hero-meta-item { padding: 2px 24px; } } /* Handy: Gesicht direkt unter dem Namen, danach Einleitung, Knöpfe und Eckdaten */ @media (max-width: 760px) { html body.wh-kanz-site.page-id-43 .dr-kanz-hero { padding-top: 24px; padding-bottom: 32px; } html body.wh-kanz-site.page-id-43 .dr-kanz-hero .sp-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 0; } html body.wh-kanz-site.page-id-43 .dr-kanz-hero .sp-hero-inner > div:first-child { display: contents; } html body.wh-kanz-site.page-id-43 .dr-kanz-hero .wh-eyebrow { order: 0; display: block; margin: 0 0 10px; } html body.wh-kanz-site.page-id-43 main .dr-kanz-hero h1 { order: 1; margin: 0 0 20px; } html body.wh-kanz-site.page-id-43 .dr-kanz-hero .dr-kanz-hero-img { order: 2; width: 100%; max-width: none; max-height: none; aspect-ratio: 5 / 4; margin: 0 0 20px; border-radius: 18px; } html body.wh-kanz-site.page-id-43 .dr-kanz-hero .dr-kanz-hero-img img { object-position: 50% 10%; } html body.wh-kanz-site.page-id-43 .dr-kanz-hero .sp-hero-lead { order: 3; margin: 0 0 20px; } html body.wh-kanz-site.page-id-43 .dr-kanz-hero .hp-hero-cta { order: 4; margin: 0; } html body.wh-kanz-site.page-id-43 .dr-kanz-hero .sp-hero-meta { order: 5; margin-top: 24px; } } /* Über-mich-Abschnitt: Augenbraue dicht an der H2, erster Absatz als Einleitung */ html body.wh-kanz-site.page-id-43 .sp-prose .wh-eyebrow { display: block; margin: 0 0 12px; } html body.wh-kanz-site.page-id-43 .sp-prose .wh-eyebrow + h2 { margin-top: 0; } html body.wh-kanz-site.page-id-43 .sp-prose > h2 + p { font-size: 1.12em; line-height: 1.7; color: var(--text, #243b46); } html body.wh-kanz-site.page-id-43 .sp-prose h3 { margin-top: 36px; } /* Seitenleiste: dritte Karte doppelt die Schwerpunkte direkt darunter und entfällt */ html body.wh-kanz-site.page-id-43 .sp-aside > .sp-card:nth-child(3) { display: none; } /* Schwerpunkte: Symbol statt doppelter Augenbraue, weiße Karten auf der getönten Fläche */ html body.wh-kanz-site.page-id-43 .dr-kanz-focus-grid .sp-card-eyebrow { display: none; } html body.wh-kanz-site.page-id-43 .dr-kanz-focus-grid .sp-card { padding: var(--wz-card-pad, 28px); background: #fff; border: 1px solid var(--a3-line); box-shadow: var(--a3-card-shadow); } html body.wh-kanz-site.page-id-43 .dr-kanz-focus-grid .sp-card::before { content: ""; display: block; flex: 0 0 auto; width: 48px; height: 48px; margin: 0 0 20px; border-radius: 14px; background: var(--a3-soft) center / 24px 24px no-repeat; } html body.wh-kanz-site.page-id-43 .dr-kanz-focus-grid .sp-card:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23285c70' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 13.8 9l5.7 1.8-5.7 1.8L12 18.5l-1.8-5.9L4.5 10.8 10.2 9Z'/%3E%3Cpath d='M19 3.5v3M17.5 5h3'/%3E%3C/svg%3E"); } html body.wh-kanz-site.page-id-43 .dr-kanz-focus-grid .sp-card:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23285c70' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17.5 3 7.5l5 4 4-6.5 4 6.5 5-4-1 10Z'/%3E%3Cpath d='M5 20.5h14'/%3E%3C/svg%3E"); } html body.wh-kanz-site.page-id-43 .dr-kanz-focus-grid .sp-card:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23285c70' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7.5-4.6-7.5-10.2A4.2 4.2 0 0 1 12 7.2a4.2 4.2 0 0 1 7.5 2.6C19.5 15.4 12 20 12 20Z'/%3E%3C/svg%3E"); } html body.wh-kanz-site.page-id-43 .dr-kanz-focus-grid .sp-card h3 { text-wrap: balance; } /* Tablet hoch: drei volle Zeilen mit Symbol links statt drei schmaler Spalten (angenehme Lesebreite) */ @media (min-width: 761px) and (max-width: 1024px) { html body.wh-kanz-site.page-id-43 #schwerpunkte .dr-kanz-focus-grid { grid-template-columns: minmax(0, 1fr); } html body.wh-kanz-site.page-id-43 .dr-kanz-focus-grid .sp-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 20px; align-content: start; } html body.wh-kanz-site.page-id-43 .dr-kanz-focus-grid .sp-card::before { grid-column: 1; grid-row: 1 / span 3; margin: 0; } html body.wh-kanz-site.page-id-43 .dr-kanz-focus-grid .sp-card > * { grid-column: 2; } html body.wh-kanz-site.page-id-43 .dr-kanz-focus-grid .sp-card h3 { margin: 2px 0 8px; } html body.wh-kanz-site.page-id-43 .dr-kanz-focus-grid .sp-card p { margin: 0 0 4px; max-width: 72ch; } } /* Handy: Symbol links neben der Überschrift */ @media (max-width: 760px) { html body.wh-kanz-site.page-id-43 .dr-kanz-focus-grid .sp-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: center; } html body.wh-kanz-site.page-id-43 .dr-kanz-focus-grid .sp-card::before { grid-column: 1; grid-row: 1; width: 44px; height: 44px; margin: 0; } html body.wh-kanz-site.page-id-43 .dr-kanz-focus-grid .sp-card h3 { grid-column: 2; grid-row: 1; margin: 0; } html body.wh-kanz-site.page-id-43 .dr-kanz-focus-grid .sp-card p { grid-column: 1 / -1; margin: 14px 0 6px; } html body.wh-kanz-site.page-id-43 .dr-kanz-focus-grid .sp-card .sp-related-link { grid-column: 1 / -1; } } /* ===================================================================== TEAMSEITE (Vorlage page-team-zahnarzt-augsburg.php) ===================================================================== */ /* Hilfsklassen aus der Vorlage */ html body.wh-kanz-site.page-id-281 .tp-nowrap { white-space: nowrap; } html body.wh-kanz-site.page-id-281 .tp-line { display: block; } /* Hero-Kennzahlen auf Tablet hoch: umbrechen statt Wörter zu trennen (z. B. 768 px, iPad mini) */ @media (min-width: 761px) and (max-width: 1024px) { html body.wh-kanz-site.page-id-281 .team-hero .sp-hero-meta { display: flex; flex-wrap: wrap; gap: 14px 28px; } html body.wh-kanz-site.page-id-281 .team-hero .sp-hero-meta-val { overflow-wrap: normal; white-space: nowrap; } } /* Sprungmarken auf dem Handy in zwei Reihen statt abgeschnittener Scroll-Leiste */ @media (max-width: 760px) { html body.wh-kanz-site.page-id-281 .team-anchor-nav { padding: 12px 0; } html body.wh-kanz-site.page-id-281 .team-anchor-nav-inner { flex-wrap: wrap; overflow: visible; justify-content: flex-start; gap: 8px; padding-block: 0; } html body.wh-kanz-site.page-id-281 .team-anchor-nav-inner a { min-height: 44px; padding: 0 14px; font-size: 14.5px; } } /* Raster einheitlich: Computer und Tablet quer 3, Tablet hoch 2, Handy 1 Spalte. Kartenabstand und Innenabstand wie alle Karten der Seite (Grundteil-Variablen) */ html body.wh-kanz-site.page-id-281 .tp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wz-gap, 20px); } html body.wh-kanz-site.page-id-281 .tp-card { padding: var(--wz-card-pad, 28px); } @media (min-width: 761px) and (max-width: 1024px) { html body.wh-kanz-site.page-id-281 .tp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { html body.wh-kanz-site.page-id-281 .tp-grid { grid-template-columns: minmax(0, 1fr); } html body.wh-kanz-site.page-id-281 .tp-avatar { width: 56px; height: 56px; font-size: 17px; } html body.wh-kanz-site.page-id-281 .tp-avatar--sm { width: 48px; height: 48px; font-size: 15px; } html body.wh-kanz-site.page-id-281 .tp-rows dt { font-size: 13px; } } /* Zahnärzte: Leitkarte Dr. Kanz mit großem Porträt über die volle Breite, darunter die Dres. Weida */ @media (min-width: 761px) { html body.wh-kanz-site.page-id-281 #zahnaerzte .tp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } html body.wh-kanz-site.page-id-281 .tp-card.tp-card--lead { grid-column: 1 / -1; padding: 0; gap: 0; overflow: hidden; box-shadow: var(--a3-card-shadow); } html body.wh-kanz-site.page-id-281 .tp-portrait { margin: 0; overflow: hidden; background: #e6eff2; } html body.wh-kanz-site.page-id-281 .tp-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; } html body.wh-kanz-site.page-id-281 .tp-lead-body { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: var(--wz-card-pad, 28px); } html body.wh-kanz-site.page-id-281 .tp-card--lead .tp-name { font-size: clamp(22px, 2.1vw, 28px); line-height: 1.2; letter-spacing: -.015em; overflow-wrap: normal; } html body.wh-kanz-site.page-id-281 .tp-card--lead .tp-role { margin-top: 6px; font-size: 15px; } html body.wh-kanz-site.page-id-281 .tp-card--lead .tp-tags li { font-size: 13.5px; padding: 6px 12px; } html body.wh-kanz-site.page-id-281 .tp-card--lead .tp-more { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 4px; padding: 0 18px; border: 1px solid #b6cad2; border-radius: 12px; background: #fff; } html body.wh-kanz-site.page-id-281 .tp-card--lead .tp-more:hover { border-color: var(--primary-dark, #285c70); background: #f2f7f9; text-decoration: none; } html body.wh-kanz-site.page-id-281 .tp-more { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; } html body.wh-kanz-site.page-id-281 .tp-more:focus-visible { outline: 2px solid var(--primary, #367b94); outline-offset: 3px; border-radius: 6px; } html body.wh-kanz-site.page-id-281 .tp-card--lead .tp-more:focus-visible { border-radius: 12px; } @media (min-width: 761px) { html body.wh-kanz-site.page-id-281 .tp-card.tp-card--lead { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } /* Porträt füllt die Kartenhöhe, ohne sie selbst zu bestimmen (contain: size statt absoluter Position) */ html body.wh-kanz-site.page-id-281 .tp-portrait { contain: size; height: 100%; min-height: 0; } html body.wh-kanz-site.page-id-281 .tp-lead-body { justify-content: center; padding: clamp(28px, 3.6vw, 52px); } } @media (min-width: 1025px) { html body.wh-kanz-site.page-id-281 .tp-card.tp-card--lead { min-height: clamp(420px, 28vw, 540px); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } html body.wh-kanz-site.page-id-281 .tp-card--lead .tp-rows { grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: 48px; } } @media (max-width: 760px) { html body.wh-kanz-site.page-id-281 .tp-portrait { aspect-ratio: 4 / 3; } html body.wh-kanz-site.page-id-281 .tp-lead-body { gap: 16px; } } /* Praxisteam: erste Karte (Empfang und Verwaltung) als breite Leitzeile, darunter volle Reihen 3+3 bzw. 2+2+2 */ @media (min-width: 761px) { html body.wh-kanz-site.page-id-281 .tp-team > .tp-card:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: clamp(28px, 4vw, 56px); row-gap: 14px; align-items: start; } html body.wh-kanz-site.page-id-281 .tp-team > .tp-card:first-child .tp-person { grid-column: 1; grid-row: 1 / span 2; align-self: center; } html body.wh-kanz-site.page-id-281 .tp-team > .tp-card:first-child .tp-bio { grid-column: 2; grid-row: 1; } html body.wh-kanz-site.page-id-281 .tp-team > .tp-card:first-child .tp-tags { grid-column: 2; grid-row: 2; } } /* Computer: drei Spalten Person, Text, Aufgaben, damit die Zeilen lesbar kurz bleiben. Tablet quer (1025 bis 1199) bleibt bei zwei Spalten wie Tablet hoch: dort brach die Rolle vor dem Mittelpunkt ("· Empfang") und der Text lief auf sieben Zeilen (Gesamtprüfung 01.11.) */ @media (min-width: 1200px) { html body.wh-kanz-site.page-id-281 .tp-team > .tp-card:first-child { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1fr); align-items: center; } html body.wh-kanz-site.page-id-281 .tp-team > .tp-card:first-child .tp-person { grid-row: 1; } html body.wh-kanz-site.page-id-281 .tp-team > .tp-card:first-child .tp-tags { grid-column: 3; grid-row: 1; align-content: center; } } /* 1200 bis 1439: Personen- und Aufgaben-Spalte breiter, damit Rolle und längstes Etikett sauber umbrechen */ @media (min-width: 1200px) and (max-width: 1439px) { html body.wh-kanz-site.page-id-281 .tp-team > .tp-card:first-child { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(0, 1.2fr); column-gap: 32px; } } /* Handy: Etiketten wiederholen die Kurzbiografie und entfallen (Übergang bis zur Entscheidung) */ @media (max-width: 760px) { html body.wh-kanz-site.page-id-281 .tp-team .tp-tags { display: none; } } /* Eigenlabor: Karten bis an die Containerkanten, Knopf mittig (Handy volle Breite) */ html body.wh-kanz-site.page-id-281 .tp-grid--2 { max-width: none; } @media (min-width: 761px) { html body.wh-kanz-site.page-id-281 .tp-grid.tp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } html body.wh-kanz-site.page-id-281 .tp-lab-more { display: flex; justify-content: center; margin-top: 28px; } @media (max-width: 760px) { html body.wh-kanz-site.page-id-281 .tp-lab-more { margin-top: 20px; } html body.wh-kanz-site.page-id-281 .tp-lab-more .wh-btn { width: 100%; } } /* Wegweiser: Beschreibung in Fließtextgröße (Vorlage 14,5 px); Kartentexte ohne Einzelwort in der letzten Zeile wie die übrigen Karten der Seite (Grundteil: .sp-card p) */ html body.wh-kanz-site.page-id-281 .tp-guide-text { font-size: 15px; } html body.wh-kanz-site.page-id-281 :is(.tp-bio, .tp-guide-text) { text-wrap: pretty; } /* Wegweiser: Handy als kompakte Zeilen mit Symbol links */ @media (max-width: 760px) { html body.wh-kanz-site.page-id-281 .tp-guide .tp-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: start; } html body.wh-kanz-site.page-id-281 .tp-guide .tp-guide-icon { grid-column: 1; grid-row: 1 / span 3; } html body.wh-kanz-site.page-id-281 .tp-guide .tp-card > :not(.tp-guide-icon) { grid-column: 2; } html body.wh-kanz-site.page-id-281 .tp-guide h3 { margin: 0; font-size: 17px; } html body.wh-kanz-site.page-id-281 .tp-guide-text { margin-top: 2px; font-size: 15px; } html body.wh-kanz-site.page-id-281 .tp-urgent { padding: var(--wz-card-pad, 22px); } } /* ===== 60-unterseiten-vorlage.css ===== */ /* ===================================================================== A4a Unterseiten-Vorlage: gemeinsame Bausteine aller Unterseiten (.sp-hero, Unternavigation, .sp-body/.sp-aside, Faktenleiste, FAQ, Weiterlesen) sowie die Seiten /behandlungen/, /standort/, /kontakt/. Baut auf G3 (10-grundlagen: Tokens, Raster, FAQ-Grundraster) und G2 (30-fuss-buttons-cta: Buttons, Handlungsbox, Weiterlesen-Karten) auf. Breakpoints: Handy bis 760 · Tablet 761 bis 1199 (hoch bis 1024, quer ab 1025) · Computer ab 1200. Präfix immer "html body.wh-kanz-site". ===================================================================== */ /* ---------- 1. Hero der Unterseiten ---------- */ /* Standortfoto: Platzhalter in Markenfarbe statt weißer Lücke, solange das Bild lädt */ html body.wh-kanz-site .sp-hero-img.wh-building-hero{background:#eaf2f5} /* Link in den Kennzahlen (E-Mail schreiben) mit 44-px-Tippfläche, ohne die Zeile höher zu machen */ html body.wh-kanz-site .sp-hero-meta-val a{display:inline-flex;align-items:center;min-height:44px;margin-block:-14px;color:var(--primary-dark)} /* Kennzahlen, die auf Kontakt und Standort direkt darunter noch einmal stehen: nur am Computer */ @media (max-width:1024px){ html body.wh-kanz-site .sp-hero .sp-hero-inner .sp-hero-meta.sp-hero-meta--desk{display:none} } @media (min-width:761px) and (max-width:1024px){ /* Tablet hoch: beide Spalten beginnen auf einer Linie, Fotos im Hochformat füllen die Bildspalte (Profil- und Teamseite haben eigene Heros aus A3 und bleiben ausgenommen) */ html body.wh-kanz-site .sp-hero:not(.dr-kanz-hero,.team-hero) .sp-hero-inner{align-items:start} html body.wh-kanz-site .sp-hero:not(.dr-kanz-hero,.team-hero) .sp-hero-inner > .sp-hero-img{align-self:start;margin-top:56px} html body.wh-kanz-site .sp-hero:not(.dr-kanz-hero,.team-hero) .sp-hero-img:not(.wh-illustration-hero,.wh-building-hero,.dr-kanz-hero-img){aspect-ratio:4/5;height:auto;max-height:none} /* Illustrationen und Gebäudefoto: ebenfalls hochkant statt 3:2, sonst bleibt unter dem Bild eine leere Fläche neben der Textspalte. Gebäude rechts ausgerichtet, damit die bemalte Giebelfassade ganz im Bild bleibt. */ html body.wh-kanz-site .sp-hero:not(.dr-kanz-hero,.team-hero) .sp-hero-img.wh-illustration-hero{aspect-ratio:4/5} html body.wh-kanz-site .sp-hero:not(.dr-kanz-hero,.team-hero) .sp-hero-img.wh-illustration-hero img{height:100%;aspect-ratio:auto;object-fit:cover;object-position:center} html body.wh-kanz-site .sp-hero:not(.dr-kanz-hero,.team-hero) .sp-hero-img.wh-building-hero{aspect-ratio:1/1} html body.wh-kanz-site .sp-hero:not(.dr-kanz-hero,.team-hero) .sp-hero-img.wh-building-hero img{height:100%;aspect-ratio:auto;object-position:78% 50%} /* Kennzahlen in der schmalen Textspalte als ruhige Zeilen (Bezeichnung links, Wert rechts) */ html body.wh-kanz-site .sp-hero:not(.dr-kanz-hero,.team-hero) .sp-hero-meta{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-flow:row;gap:0;padding-top:4px} html body.wh-kanz-site .sp-hero:not(.dr-kanz-hero,.team-hero) .sp-hero-meta-item{display:grid;grid-template-columns:minmax(104px,auto) minmax(0,1fr);align-items:baseline;column-gap:16px;padding:10px 0;border-bottom:1px solid var(--border)} html body.wh-kanz-site .sp-hero:not(.dr-kanz-hero,.team-hero) .sp-hero-meta-item:last-child{border-bottom:0} html body.wh-kanz-site .sp-hero:not(.dr-kanz-hero,.team-hero) .sp-hero-meta-val{font-size:15px;text-align:right;overflow-wrap:break-word} /* Brotkrume einzeilig wie am Handy: die aktuelle Seite steht in der Überschrift */ html body.wh-kanz-site .sp-hero .sp-crumb:has(> span:last-child) > span:nth-last-child(-n+2){display:none} } /* ---------- 2. Unternavigation: Kategorie-Sprungleiste, Behandlungs-Reiter, Inhaltsübersicht ---------- */ /* Gemeinsame Chips (auch Sprungleisten auf Team und Karriere): weiß mit feinem Rand, aktiv gefüllt, 44 px Tippfläche, sichtbarer Fokus. Abstände der Team- und Karriereleiste bleiben bei A3 und Service. */ html body.wh-kanz-site :is(.wh-cat-anchor-nav-inner a,.team-anchor-nav-inner a,.wh-treatment-tab){ display:inline-flex;align-items:center;min-height:44px;padding:0 18px; background:#fff;border:1px solid #cfdde2;border-radius:999px; color:var(--primary-dark);font-size:14.5px;font-weight:500;line-height:1.2;text-decoration:none;white-space:nowrap; transition:border-color .2s ease,background-color .2s ease,color .2s ease; } html body.wh-kanz-site :is(.wh-cat-anchor-nav-inner a,.team-anchor-nav-inner a,a.wh-treatment-tab):hover{background:#f2f7f9;border-color:var(--primary);color:var(--primary-dark)} html body.wh-kanz-site .wh-treatment-tab.is-active{background:var(--primary);border-color:var(--primary);color:#fff} html body.wh-kanz-site :is(.wh-cat-anchor-nav-inner a,.team-anchor-nav-inner a,.wh-treatment-tab,.wh-treatment-tabs-back):focus-visible{outline:3px solid #216881;outline-offset:2px} /* Kategorie-Sprungleiste (/behandlungen/): mittig unter dem Hero wie die Abschnittsköpfe */ html body.wh-kanz-site .wh-cat-anchor-nav{position:static;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-block:1px solid var(--border);padding:0} html body.wh-kanz-site .wh-cat-anchor-nav-inner{gap:10px;padding-block:16px} @media (min-width:761px){html body.wh-kanz-site .wh-cat-anchor-nav-inner{justify-content:safe center}} /* Behandlungs-Reiter: nicht mehr klebend (rutschte unter den Kopf und verschleierte Text) */ html body.wh-kanz-site .wh-treatment-tabs{position:static;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-top:0;border-bottom:1px solid var(--border);padding:14px 0} html body.wh-kanz-site .wh-treatment-tabs-inner{gap:12px 24px} html body.wh-kanz-site .wh-treatment-tabs-list{gap:8px;padding:0} html body.wh-kanz-site .wh-treatment-tabs-back{min-height:44px;font-size:12px;letter-spacing:.1em;color:var(--muted)} html body.wh-kanz-site .wh-treatment-tabs-back:hover{color:var(--primary-dark)} @media (max-width:760px){ /* Handy: alle Chips sichtbar (umbrechen statt rechts abgeschnitten) */ html body.wh-kanz-site :is(.wh-cat-anchor-nav-inner,.wh-treatment-tabs-list){flex-wrap:wrap;overflow:visible;gap:8px} html body.wh-kanz-site .wh-cat-anchor-nav-inner{padding-block:14px} html body.wh-kanz-site :is(.wh-cat-anchor-nav-inner a,.wh-treatment-tab){padding:0 15px;font-size:14.5px} html body.wh-kanz-site .wh-treatment-tabs{padding:10px 0 14px} html body.wh-kanz-site .wh-treatment-tabs-inner{gap:4px} } /* Inhaltsübersicht "Auf dieser Seite" (per Skript nach dem Hero eingefügt): gehört optisch zum Hero */ html body.wh-kanz-site .wh-page-guide{background:#f8fbfc;border-top:1px solid var(--border);border-bottom:0} html body.wh-kanz-site .wh-page-guide summary{min-height:52px;gap:16px} html body.wh-kanz-site .wh-page-guide summary::after{content:"";flex:0 0 14px;width:14px;height:14px;font-size:0;background:linear-gradient(var(--primary),var(--primary)) center/14px 2px no-repeat,linear-gradient(var(--primary),var(--primary)) center/2px 14px no-repeat} html body.wh-kanz-site .wh-page-guide details[open] summary::after{background-size:14px 2px,2px 0} html body.wh-kanz-site .wh-page-guide summary:focus-visible{outline:3px solid #216881;outline-offset:-3px} html body.wh-kanz-site .wh-page-guide nav a{color:var(--primary-dark);text-decoration-color:rgba(40,92,112,.45)} /* Computer und Tablet quer: Übersicht offen als eine ruhige Zeile Ankerlinks statt leerem Klappbalken. Nur wo der Browser den Klappinhalt gestalten kann; sonst bleibt der normale Klappbalken. */ @media (min-width:1025px){ @supports selector(::details-content){ html body.wh-kanz-site .wh-page-guide details{display:flex;flex-wrap:wrap;align-items:center;column-gap:32px;padding-block:6px} html body.wh-kanz-site .wh-page-guide details::details-content{content-visibility:visible;display:block} html body.wh-kanz-site .wh-page-guide summary{min-height:44px;pointer-events:none;cursor:default;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} html body.wh-kanz-site .wh-page-guide summary::after{display:none} html body.wh-kanz-site .wh-page-guide nav{padding:0;gap:0 28px} html body.wh-kanz-site .wh-page-guide nav a{font-size:15px} } } /* ---------- 3. Text mit Seitenspalte (.sp-body, .sp-aside, .sp-card) ---------- */ /* Karten auf heller Abschnittsfläche weiß, damit sie sich abheben */ html body.wh-kanz-site .sp-section--alt .sp-card{background:#fff} /* Links in Karten-Listen als 44-px-Tippfläche, ohne den Zeilenrhythmus zu ändern */ html body.wh-kanz-site .sp-card-list li a{display:inline-flex;align-items:center;min-height:44px;margin-block:-12px;color:var(--primary-dark)} html body.wh-kanz-site .sp-card-list li a:hover{text-decoration:underline;text-underline-offset:3px} html body.wh-kanz-site .sp-card h4{font-size:19px;line-height:1.3;text-wrap:balance} /* ---------- 4. Faktenleiste (.sp-facts-grid): eine ruhige Tafel statt drei Kacheln in Linkoptik ---------- */ html body.wh-kanz-site .sp-fact-num{color:var(--text);letter-spacing:-.01em} @media (min-width:761px){ html body.wh-kanz-site .sp-facts-grid{gap:0;margin:56px 0 0;background:#f8fbfc;border:1px solid var(--border);border-radius:var(--wz-radius);overflow:hidden} html body.wh-kanz-site .sp-fact, html body.wh-kanz-site .sp-fact:hover{background:transparent;border:0;border-radius:0;box-shadow:none;transform:none} html body.wh-kanz-site .sp-fact{padding:28px 32px 30px} html body.wh-kanz-site .sp-fact + .sp-fact{border-left:1px solid var(--border)} html body.wh-kanz-site .sp-fact-num{font-size:24px;line-height:1.25;margin:0 0 6px;overflow-wrap:normal;white-space:nowrap} html body.wh-kanz-site .sp-fact-num::before{content:"";display:block;width:28px;height:2px;margin-bottom:18px;border-radius:2px;background:var(--primary)} html body.wh-kanz-site .sp-fact-lbl{color:var(--muted)} } @media (min-width:761px) and (max-width:1024px){ html body.wh-kanz-site .sp-fact{padding:22px 22px 24px} html body.wh-kanz-site .sp-fact-num{font-size:21px} } @media (max-width:760px){ html body.wh-kanz-site .sp-facts-grid{margin:32px 0 0} } /* ---------- 5. FAQ: Kopf links, Fragen rechts (Computer aus G3, hier zusätzlich Tablet hoch) ---------- */ @media (min-width:761px) and (max-width:1024px){ html body.wh-kanz-site .wh-container:has(> .sp-faq){display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:36px;align-items:start} html body.wh-kanz-site .wh-container:has(> .sp-faq) > .wh-section-head{position:sticky;top:108px;margin:0;max-width:none;text-align:left} html body.wh-kanz-site .wh-container:has(> .sp-faq) > .sp-faq{max-width:none;margin:0} html body.wh-kanz-site .wh-container:has(> .sp-faq) > :not(.wh-section-head,.sp-faq){grid-column:1/-1;margin-inline:0} } @media (min-width:761px){ /* Linie über der ersten Frage: Liste beginnt auf derselben Höhe wie der Kopf */ html body.wh-kanz-site .sp-faq{border-top:1px solid var(--border)} html body.wh-kanz-site .sp-faq-item:first-child{padding-top:24px} html body.wh-kanz-site .wh-container:has(> .sp-faq) > .wh-section-head{padding-top:22px;border-top:1px solid var(--border)} html body.wh-kanz-site .wh-container:has(> .sp-faq) > .sp-cta{margin-top:56px} } html body.wh-kanz-site .sp-faq-q{border-radius:6px;transition:color .2s ease} html body.wh-kanz-site .sp-faq-q:hover{color:var(--primary-dark)} html body.wh-kanz-site .sp-faq-q:focus-visible{outline:3px solid #216881;outline-offset:4px} html body.wh-kanz-site .sp-faq-a{color:var(--muted);line-height:1.7} /* ---------- 6. Weiterlesen auf den Behandlungsseiten (Handy): kompakte Zeilen mit Pfeil ---------- */ @media (max-width:760px){ html body.wh-kanz-site main:has(> .wh-treatment-tabs) .sp-related-card{display:grid;grid-template-columns:minmax(0,1fr) 20px;column-gap:16px;align-items:center;height:auto;padding:18px 20px} html body.wh-kanz-site main:has(> .wh-treatment-tabs) .sp-related-card h3{grid-column:1;margin:0;font-size:18px} html body.wh-kanz-site main:has(> .wh-treatment-tabs) .sp-related-card p{grid-column:1;margin:4px 0 0} html body.wh-kanz-site main:has(> .wh-treatment-tabs) .sp-related-link{grid-column:2;grid-row:1/span 2;align-self:center;min-height:0;margin:0;padding:0;font-size:0;line-height:0} html body.wh-kanz-site main:has(> .wh-treatment-tabs) .sp-related-link::after{ content:"";width:18px;height:18px;background:var(--primary); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat; } } /* ---------- 7. /behandlungen/: Karten wie auf der Startseite, Zweiergruppe als Querkarten ---------- */ html body.wh-kanz-site .sp-section.hp-treat-section .hp-treat-card{min-height:0;padding:var(--wz-card-pad);border-radius:var(--wz-radius);transition:border-color .2s ease,box-shadow .2s ease} html body.wh-kanz-site .sp-section.hp-treat-section .hp-treat-card:hover{border-color:#9fbfcb;box-shadow:0 18px 36px -24px rgba(25,62,78,.38);transform:none} html body.wh-kanz-site .sp-section.hp-treat-section .hp-treat-card:hover .hp-treat-icon-wrap{transform:none} html body.wh-kanz-site .sp-section.hp-treat-section .hp-treat-card:focus-visible{outline:3px solid #216881;outline-offset:3px} html body.wh-kanz-site .sp-section.hp-treat-section .hp-treat-eyebrow{font-size:12px;letter-spacing:.1em;color:var(--primary-dark)} html body.wh-kanz-site .sp-section.hp-treat-section .hp-treat-link{font-weight:600;color:var(--primary-dark)} @media (min-width:761px){html body.wh-kanz-site .sp-section.hp-treat-section .hp-treat-link{font-size:15px}} /* Zwei Karten (Zahnersatz & Chirurgie): Symbol links, Text rechts, damit die breiten Karten nicht leer wirken */ @media (min-width:1025px){ html body.wh-kanz-site .hp-treat-grid:has(> :nth-child(2):last-child) > .hp-treat-card{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:24px;align-content:start} html body.wh-kanz-site .hp-treat-grid:has(> :nth-child(2):last-child) > .hp-treat-card > :not(.hp-treat-icon-wrap,.hp-treat-line){grid-column:2} html body.wh-kanz-site .hp-treat-grid:has(> :nth-child(2):last-child) > .hp-treat-card > .hp-treat-icon-wrap{grid-column:1;grid-row:1/span 4;margin:0} html body.wh-kanz-site .hp-treat-grid:has(> :nth-child(2):last-child) > .hp-treat-card p{max-width:62ch} } /* Handy: Liste mit lesbarer Schrift */ @media (max-width:760px){ html body.wh-kanz-site .sp-section.hp-treat-section .hp-treat-card{padding:20px 0;border-radius:0} html body.wh-kanz-site .sp-section.hp-treat-section .hp-treat-card:hover{box-shadow:none} } /* ---------- 8. /kontakt/: Karten mit Symbol, Buchungskarte als breite Abschlusskarte ---------- */ html body.wh-kanz-site .sp-card-head{display:flex;align-items:center;gap:12px;margin-bottom:16px} html body.wh-kanz-site .sp-card-head .sp-card-eyebrow{margin:0} html body.wh-kanz-site .sp-card-icon{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:11px;background:#eaf2f5;color:var(--primary-dark)} html body.wh-kanz-site .sp-contact-info h4{display:flex;align-items:center;min-height:44px;margin:0 0 4px} html body.wh-kanz-site .sp-contact-info .sp-contact-number{font-size:24px;line-height:1.25;letter-spacing:-.01em} html body.wh-kanz-site .sp-contact-info h4 a{display:inline-flex;align-items:center;min-height:44px;color:var(--text);text-decoration:none;overflow-wrap:anywhere} html body.wh-kanz-site .sp-contact-info h4 a:hover{color:var(--primary-dark);text-decoration:underline;text-underline-offset:3px} html body.wh-kanz-site .sp-contact-info [data-wh-hours-status]{margin:2px 0 12px;font-size:15px;font-weight:600;color:var(--primary-dark)} html body.wh-kanz-site .sp-contact-info .sp-card{display:flex;flex-direction:column} html body.wh-kanz-site .sp-contact-info .sp-card > :is(.wh-btn,.wh-card-link){margin-top:auto} html body.wh-kanz-site .sp-contact-info .sp-card > p:last-of-type{margin-bottom:18px} html body.wh-kanz-site .sp-contact-info .sp-card > p:last-child{margin-bottom:0} /* Textlink mit Pfeil (Karte "Besuchen"): eine Zeile, eigene Tippfläche */ html body.wh-kanz-site .wh-card-link{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;min-height:44px;font-size:15.5px;font-weight:600;color:var(--primary-dark);text-decoration:none;white-space:nowrap} html body.wh-kanz-site .wh-card-link:hover{text-decoration:underline;text-underline-offset:3px} html body.wh-kanz-site .wh-card-link svg{flex:none;transition:transform .2s ease} html body.wh-kanz-site .wh-card-link:hover svg{transform:translateX(3px)} html body.wh-kanz-site .sp-contact-grid .wh-contact-booking .wh-btn svg{flex:none} @media (min-width:761px){ /* Buchungskarte über die volle Breite: links Einladung und Button, rechts die drei Schritte */ html body.wh-kanz-site .sp-contact-grid .wh-contact-booking{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--wz-col-gap);align-items:start;align-self:stretch;border-radius:var(--wz-radius)} html body.wh-kanz-site .sp-contact-grid .wh-contact-booking > :not(ol){grid-column:1} html body.wh-kanz-site .sp-contact-grid .wh-contact-booking > ol{grid-column:2;grid-row:1/span 4;align-self:center;margin:0} html body.wh-kanz-site .sp-contact-grid .wh-contact-booking > .wh-btn{justify-self:start;margin-top:4px} html body.wh-kanz-site .sp-contact-grid .wh-contact-booking > p{margin-bottom:24px} html body.wh-kanz-site .sp-contact-info{display:contents} } @media (min-width:1025px){ /* Computer und Tablet quer: Anrufen, Schreiben, Besuchen nebeneinander, gleich hoch */ html body.wh-kanz-site .sp-contact-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--wz-gap);align-items:stretch} html body.wh-kanz-site .sp-contact-grid .wh-contact-booking{padding:44px 48px} } @media (min-width:761px) and (max-width:1024px){ /* Tablet hoch: Anrufen als breite Karte (Nummer links, Button rechts), darunter Schreiben und Besuchen nebeneinander. Vorher stand Anrufen über zwei Zeilen mit großer Leerfläche über dem Button. */ html body.wh-kanz-site .sp-contact-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--wz-gap);align-items:stretch} html body.wh-kanz-site .sp-contact-info > .sp-card:first-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:32px;align-items:center} html body.wh-kanz-site .sp-contact-info > .sp-card:first-child > :not(.wh-btn){grid-column:1} html body.wh-kanz-site .sp-contact-info > .sp-card:first-child > .wh-btn{grid-column:2;grid-row:1/span 4;align-self:center;width:auto;min-width:220px;margin:0} html body.wh-kanz-site .sp-contact-info > .sp-card:first-child > p:last-of-type{margin-bottom:0!important} html body.wh-kanz-site .sp-contact-grid .wh-contact-booking{padding:32px} } @media (max-width:760px){ html body.wh-kanz-site .sp-contact-grid .wh-contact-booking{padding:var(--wz-card-pad);border-radius:var(--wz-radius)} html body.wh-kanz-site .sp-contact-grid .wh-contact-booking .wh-btn{width:100%;justify-content:center} } /* ---------- 9. /standort/: Anfahrt in drei gleich hohen Karten, Wege als Dreierraster ---------- */ /* Anfahrt: Route | Adresse | Öffnungszeiten */ html body.wh-kanz-site .hp-anf--route{gap:var(--wz-gap);align-items:stretch} html body.wh-kanz-site .hp-anf--route .hp-anf-info{gap:var(--wz-gap)} html body.wh-kanz-site .hp-anf--route .wh-contact-booking{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;padding:var(--wz-card-pad);border-radius:var(--wz-radius)} html body.wh-kanz-site .hp-anf--route .wh-contact-booking h2{margin:12px 0 16px} html body.wh-kanz-site .hp-anf--route .wh-contact-booking p{max-width:60ch} html body.wh-kanz-site .hp-anf--route .wh-contact-booking > .wh-btn{margin-top:auto} html body.wh-kanz-site .hp-anf--route .wh-contact-booking > .wh-btn svg{flex:none} html body.wh-kanz-site .hp-anf--route .hp-anf-card{display:flex;flex-direction:column;padding:var(--wz-card-pad);border-radius:var(--wz-radius);border-color:var(--border)} html body.wh-kanz-site .hp-anf--route .hp-anf-card-head{margin-bottom:16px} html body.wh-kanz-site .hp-anf--route .hp-anf-card-icon{color:var(--primary-dark);background:#eaf2f5} html body.wh-kanz-site .hp-anf--route .hp-anf-card-eyebrow{color:var(--muted)} html body.wh-kanz-site .hp-anf--route .hp-anf-addr{font-size:21px;font-weight:600;line-height:1.4;color:var(--text)} /* Karten-Buttons: gleich breit, 48 px hoch, unten bündig */ html body.wh-kanz-site .hp-anf--route .hp-anf-btns{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px;margin-top:auto;padding-top:20px} html body.wh-kanz-site .hp-anf--route .hp-anf-btn{ display:inline-flex!important;align-items:center;justify-content:center;min-height:48px;padding:10px 14px!important; background:#fff!important;border:1px solid #b6cad2!important;border-radius:12px!important; color:var(--primary-dark)!important;font-size:15px!important;font-weight:600!important;line-height:1.25;text-align:center; } html body.wh-kanz-site .hp-anf--route .hp-anf-btn:hover{background:#f2f7f9!important;border-color:var(--primary-dark)!important} html body.wh-kanz-site .hp-anf--route .hp-anf-btn:focus-visible{outline:3px solid #216881;outline-offset:2px} /* Öffnungszeiten: "Heute" neben dem Tag, farbige Zeile mit Luft an beiden Rändern */ html body.wh-kanz-site .hp-anf--route .hp-anf-hours-row{font-size:15px;padding:10px 0;column-gap:12px} html body.wh-kanz-site .hp-anf--route .hp-anf-hours .wh-hours-day-label{flex-direction:row;align-items:center;gap:8px;padding-left:0} html body.wh-kanz-site .hp-anf--route .hp-anf-hours-row > span:last-child{text-align:right} html body.wh-kanz-site .hp-anf--route .hp-anf-hours-row.is-today{margin-inline:-10px;padding-inline:10px} html body.wh-kanz-site .hp-anf--route .hp-anf-hours .wh-hours-today-tag{font-size:10.5px!important;letter-spacing:.08em} /* Zwei Zeitfenster je Tag: in einer Zeile nur, wenn die Karte breit genug ist (sonst ragte die Heute-Zeile bei schmaler Karte, z. B. Tablet quer, über den Rand); bei schmaler Karte untereinander ohne Trennpunkt */ html body.wh-kanz-site .hp-anf--route .hp-anf-hours{container:wz-anf-hours / inline-size} @container wz-anf-hours (max-width:312px){ html body.wh-kanz-site .hp-anf--route .hp-anf-hours .wz-t{display:block} html body.wh-kanz-site .hp-anf--route .hp-anf-hours .wz-t + .wz-t::before{content:none} } @media (min-width:1025px){ /* Computer und Tablet quer: drei gleich hohe Karten (wie die Wege darunter und die Kontaktkarten) */ html body.wh-kanz-site .hp-anf--route{grid-template-columns:repeat(3,minmax(0,1fr))} html body.wh-kanz-site .hp-anf--route .hp-anf-info{display:contents} } @media (min-width:761px) and (max-width:1024px){ /* Tablet hoch: Route über die volle Breite, darunter Adresse und Öffnungszeiten nebeneinander */ html body.wh-kanz-site .hp-anf--route{grid-template-columns:repeat(2,minmax(0,1fr))} html body.wh-kanz-site .hp-anf--route .hp-anf-info{display:contents} html body.wh-kanz-site .hp-anf--route .wh-contact-booking{grid-column:1/-1} /* Adresskarte: Buttons direkt unter der Adresse, freie Fläche unten statt in der Mitte */ html body.wh-kanz-site .hp-anf--route .hp-anf-btns{margin-top:0} } @media (max-width:760px){ html body.wh-kanz-site .hp-anf--route{gap:16px} html body.wh-kanz-site .hp-anf--route .hp-anf-info{gap:16px} html body.wh-kanz-site .hp-anf--route .wh-contact-booking > .wh-btn{width:100%;justify-content:center} html body.wh-kanz-site .hp-anf--route .hp-anf-hours-row{font-size:14.5px} } /* Wege zur Praxis und Geschichte: Dreierraster, das am Computer mit der Zeile darunter fluchtet */ html body.wh-kanz-site .sp-body--standort{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--wz-head-gap) 0} html body.wh-kanz-site .sp-body--standort > .sp-prose{max-width:none} html body.wh-kanz-site .sp-route > h2{margin:0 0 28px} html body.wh-kanz-site .sp-route-grid{display:grid;grid-template-columns:minmax(0,1fr)} html body.wh-kanz-site .sp-route-item{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:20px;align-content:start;padding:24px 0;border-top:1px solid var(--border)} html body.wh-kanz-site .sp-route-item > :not(.sp-route-icon){grid-column:2} html body.wh-kanz-site .sp-route-icon{grid-column:1;grid-row:1/span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#eaf2f5;color:var(--primary-dark)} html body.wh-kanz-site .sp-prose .sp-route-item h3{margin:8px 0 8px} html body.wh-kanz-site .sp-route-item p{margin:0;max-width:62ch} html body.wh-kanz-site .sp-history > h2{margin-top:0} html body.wh-kanz-site .sp-history p{max-width:62ch} html body.wh-kanz-site .sp-body--standort > .sp-aside{position:static} @media (min-width:1025px){ html body.wh-kanz-site .sp-body--standort{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(28px,3vw,48px);align-items:stretch} html body.wh-kanz-site .sp-body--standort > .sp-route{grid-column:1/-1} html body.wh-kanz-site .sp-route-grid{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(28px,3vw,48px)} html body.wh-kanz-site .sp-route-item{display:block;padding:28px 0 0} html body.wh-kanz-site .sp-route-icon{margin-bottom:18px} html body.wh-kanz-site .sp-prose .sp-route-item h3{margin:0 0 10px} html body.wh-kanz-site .sp-body--standort > .sp-history{grid-column:1;padding-top:28px;border-top:1px solid var(--border)} html body.wh-kanz-site .sp-body--standort > .sp-aside{grid-column:2/-1;display:grid;grid-template-columns:subgrid;align-items:stretch;column-gap:normal;row-gap:0} } @media (min-width:761px) and (max-width:1024px){ html body.wh-kanz-site .sp-body--standort > .sp-aside{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--wz-gap)} } @media (max-width:760px){ html body.wh-kanz-site .sp-route-item{grid-template-columns:40px minmax(0,1fr);column-gap:16px;padding:20px 0} html body.wh-kanz-site .sp-route-icon{width:40px;height:40px;border-radius:11px} html body.wh-kanz-site .sp-prose .sp-route-item h3{margin-top:6px} } /* ===== 62-behandlungsseiten.css ===== */ /* ===================================================================== A4b Behandlungsseiten (Dr. Kanz): Erstuntersuchung, Prophylaxe, Bleaching, Kinder, Wurzelbehandlung, Implantate, Veneers/Kronen, Zahnentfernung, Zahntechnik. Seiten: page-id-29, 30, 31, 32, 33, 34, 35, 238, 376. Neue Bausteine: Kasten "Ihre Zahnärztin" (.wz-doc) und "Mehr dazu im Magazin" (.wz-mag), beide aus functions.php. Baut auf den Variablen aus 10-grundlagen auf. Breakpoints: Handy bis 760 · Tablet 761 bis 1199 · Computer ab 1200. ===================================================================== */ /* ---------- 1. Zweite Navigationsleiste "Auf dieser Seite" weg, wenn Behandlungs-Reiter folgen ---------- */ html body.wh-kanz-site main > .wh-page-guide:has(+ .wh-treatment-tabs){display:none} /* ---------- 2. Kasten "Ihre Zahnärztin" (Porträt, Name, ein Satz, zwei Links) ---------- */ html body.wh-kanz-site .wz-doc{ display:grid;grid-template-columns:clamp(168px,13vw,208px) minmax(0,1fr) auto;align-items:center;column-gap:clamp(32px,3vw,48px); margin:56px 0 0;padding:28px clamp(28px,3vw,44px) 28px 28px; background:linear-gradient(180deg,#f6fafb 0%,#eef5f7 100%);border:1px solid var(--border);border-radius:var(--wz-radius,16px); } html body.wh-kanz-site .wz-doc-photo{margin:0;border-radius:12px;overflow:hidden;aspect-ratio:4/5;background:#e3edf1;box-shadow:0 14px 30px -22px rgba(36,59,70,.55)} html body.wh-kanz-site .wz-doc-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 18%} html body.wh-kanz-site .wz-doc-body{min-width:0;max-width:62ch} html body.wh-kanz-site .wz-doc-eyebrow{display:block;font-size:12px;line-height:1.5;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--primary-dark)} html body.wh-kanz-site main .wz-doc-name{margin:8px 0 12px;font-size:var(--wz-h2-sm);line-height:1.2;letter-spacing:-.018em;color:var(--text);text-wrap:balance} html body.wh-kanz-site .wz-doc-text{margin:0;font-size:var(--wz-fs-prose);line-height:1.65;color:var(--text);text-wrap:pretty} html body.wh-kanz-site .wz-doc-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end} html body.wh-kanz-site main .wz-doc-actions .wh-btn{white-space:nowrap!important} /* Tablet: Porträt links, rechts Text und darunter die Links */ @media (min-width:761px) and (max-width:1199px){ html body.wh-kanz-site .wz-doc{grid-template-columns:clamp(140px,17vw,176px) minmax(0,1fr);grid-template-areas:"photo body" "photo actions";align-items:start;row-gap:20px;margin-top:40px;padding:24px} html body.wh-kanz-site .wz-doc-photo{grid-area:photo} html body.wh-kanz-site .wz-doc-body{grid-area:body;align-self:end;max-width:none} /* Lesebreite: auf dem Tablet quer sonst rund 97 Zeichen je Zeile */ html body.wh-kanz-site .wz-doc-text{max-width:68ch} html body.wh-kanz-site .wz-doc-actions{grid-area:actions;justify-content:flex-start;align-self:start} } /* Handy: kleines Porträt neben Name, Satz und Links in voller Breite */ @media (max-width:760px){ html body.wh-kanz-site .wz-doc{grid-template-columns:88px minmax(0,1fr);column-gap:16px;align-items:center;margin-top:32px;padding:20px} html body.wh-kanz-site .wz-doc-body{display:contents} html body.wh-kanz-site .wz-doc-photo{grid-column:1;grid-row:1 / span 2;align-self:start;border-radius:10px} html body.wh-kanz-site .wz-doc-eyebrow{grid-column:2;grid-row:1;align-self:end;font-size:12px} html body.wh-kanz-site main .wz-doc-name{grid-column:2;grid-row:2;align-self:start;margin:4px 0 0;font-size:20px;line-height:1.25} html body.wh-kanz-site .wz-doc-text{grid-column:1 / -1;grid-row:3;margin-top:16px;font-size:16px} html body.wh-kanz-site .wz-doc-actions{grid-column:1 / -1;grid-row:4;display:grid;grid-template-columns:1fr;gap:10px;margin-top:20px} html body.wh-kanz-site main .wz-doc-actions .wh-btn{width:100%;justify-content:center} } /* ---------- 3. "Mehr dazu im Magazin": Computer 3, Tablet 2, Handy 1 ---------- */ html body.wh-kanz-site .wz-mag{padding:var(--wz-section-y) 0;background:#fff} html body.wh-kanz-site .wz-mag-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:12px 32px;margin-bottom:calc(var(--wz-head-gap) * .75)} /* "Zum Magazin" steht auf der Grundlinie der Überschrift (vorher 5 bis 8 px zu hoch); ohne Unterstützung bleibt flex-end */ @media (min-width:761px){html body.wh-kanz-site .wz-mag-head{align-items:last baseline}} html body.wh-kanz-site .wz-mag-head .wh-eyebrow{margin-bottom:0} html body.wh-kanz-site main .wz-mag-head h2{margin:10px 0 0;font-size:var(--wz-h2-sm);line-height:1.25;letter-spacing:-.018em} html body.wh-kanz-site .wz-mag-all{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:15px;font-weight:600;color:var(--primary-dark);text-decoration:none} html body.wh-kanz-site .wz-mag-all:hover{text-decoration:underline;text-underline-offset:4px} html body.wh-kanz-site .wz-mag-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--wz-gap)} html body.wh-kanz-site .wz-mag-card{ display:flex;flex-direction:column;min-width:0;padding:var(--wz-card-pad); background:#fff;border:1px solid var(--border);border-radius:var(--wz-radius,16px);color:var(--text);text-decoration:none; transition:border-color .2s ease,box-shadow .2s ease; } /* Ruhiges Buchsymbol statt Bild: kennzeichnet die Karte als Ratgeber */ html body.wh-kanz-site .wz-mag-card::before{ content:"";flex:0 0 auto;width:40px;height:40px;border-radius:50%; background:#eaf2f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23285c70' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5A2.5 2.5 0 0 1 6.5 3H20v15H6.5A2.5 2.5 0 0 0 4 20.5z'/%3E%3Cpath d='M4 20.5A2.5 2.5 0 0 0 6.5 23H20v-5'/%3E%3Cpath d='M9 8h7M9 11.5h5'/%3E%3C/svg%3E") center/20px 20px no-repeat; } html body.wh-kanz-site main .wz-mag-card h3{margin:18px 0 10px;font-size:var(--wz-h3);line-height:1.3;letter-spacing:-.012em;color:var(--text);text-wrap:balance} html body.wh-kanz-site .wz-mag-card p{flex:1 1 auto;margin:0 0 18px;font-size:var(--wz-fs-card);line-height:1.6;color:var(--muted);text-wrap:pretty} html body.wh-kanz-site .wz-mag-more{display:inline-flex;align-items:center;gap:8px;margin-top:auto;font-size:15px;font-weight:600;color:var(--primary-dark)} html body.wh-kanz-site .wz-mag-more svg,html body.wh-kanz-site .wz-mag-all svg{flex:0 0 auto;transition:transform .2s ease} html body.wh-kanz-site .wz-mag-card:hover{border-color:var(--primary);box-shadow:0 16px 36px -26px rgba(36,59,70,.45)} html body.wh-kanz-site .wz-mag-card:hover .wz-mag-more svg,html body.wh-kanz-site .wz-mag-all:hover svg{transform:translateX(3px)} html body.wh-kanz-site :is(.wz-mag-card,.wz-mag-all):focus-visible{outline:3px solid #216881;outline-offset:3px} @media (prefers-reduced-motion:reduce){html body.wh-kanz-site :is(.wz-mag-card,.wz-mag-more svg,.wz-mag-all svg){transition:none}} /* Ab Tablet: Titel, Text und Link der Nachbarkarten stehen auf einer Linie */ @media (min-width:761px){ html body.wh-kanz-site .wz-mag-card{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;align-content:start} html body.wh-kanz-site .wz-mag-more{align-self:end} } /* Tablet: zwei Spalten; die dritte Karte läuft breit mit Symbol links */ @media (min-width:761px) and (max-width:1199px){ html body.wh-kanz-site .wz-mag-grid{grid-template-columns:repeat(2,minmax(0,1fr))} html body.wh-kanz-site .wz-mag-card:last-child:nth-child(odd){grid-column:1 / -1;grid-row:auto;grid-template-rows:none;grid-template-columns:40px minmax(0,1fr);column-gap:20px} html body.wh-kanz-site .wz-mag-card:last-child:nth-child(odd)::before{grid-row:1 / span 3} html body.wh-kanz-site main .wz-mag-card:last-child:nth-child(odd) h3{margin-top:6px} html body.wh-kanz-site .wz-mag-card:last-child:nth-child(odd) p{max-width:72ch} } /* Handy: eine Spalte, Symbol links neben dem Titel, gleiche Innenabstände */ @media (max-width:760px){ html body.wh-kanz-site .wz-mag-head{align-items:flex-start;flex-direction:column;gap:4px} html body.wh-kanz-site .wz-mag-grid{grid-template-columns:1fr} html body.wh-kanz-site .wz-mag-card{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:14px;padding:20px} html body.wh-kanz-site .wz-mag-card::before{grid-column:1;grid-row:1;align-self:start;width:36px;height:36px;background-size:18px 18px} html body.wh-kanz-site main .wz-mag-card h3{grid-column:2;grid-row:1;align-self:center;margin:0;font-size:18px} html body.wh-kanz-site .wz-mag-card p{grid-column:1 / -1;margin:12px 0;font-size:15px} html body.wh-kanz-site .wz-mag-more{grid-column:1 / -1} } /* ---------- 4. Ablauf als nummerierte Schritte (Erstuntersuchung, Wurzelbehandlung) ---------- */ html body.wh-kanz-site .sp-prose ol.sp-steps{list-style:none;margin:8px 0 32px;padding:0;counter-reset:wz-step} html body.wh-kanz-site .sp-prose ol.sp-steps > li{counter-increment:wz-step;position:relative;margin:0;padding:0 0 18px 52px;line-height:1.7} html body.wh-kanz-site .sp-prose ol.sp-steps > li:last-child{padding-bottom:0} html body.wh-kanz-site .sp-prose ol.sp-steps > li::marker{content:none} html body.wh-kanz-site .sp-prose ol.sp-steps > li::before{ content:counter(wz-step);position:absolute;left:0;top:calc(.85em - 16px); display:flex;align-items:center;justify-content:center;width:32px;height:32px;box-sizing:border-box; border:1.5px solid var(--primary);border-radius:50%;background:#fff; font-size:15px;font-weight:600;line-height:1;color:var(--primary-dark);font-variant-numeric:tabular-nums; } /* Verbindungslinie zwischen den Schritten */ html body.wh-kanz-site .sp-prose ol.sp-steps > li:not(:last-child)::after{content:"";position:absolute;left:15.25px;top:calc(.85em + 18px);bottom:2px;width:1.5px;background:#cfe0e6} html body.wh-kanz-site .sp-prose ol.sp-steps strong{color:var(--text);font-weight:600} @media (max-width:760px){ html body.wh-kanz-site .sp-prose ol.sp-steps > li{padding-left:46px;padding-bottom:16px} html body.wh-kanz-site .sp-prose ol.sp-steps > li::before{width:30px;height:30px;top:calc(.85em - 15px);font-size:14px} html body.wh-kanz-site .sp-prose ol.sp-steps > li:not(:last-child)::after{left:14.25px;top:calc(.85em + 17px)} } /* ---------- 5. Seitenleiste: Kartentitel ausgewogen, Wert mit Zusatz rechtsbündig ---------- */ html body.wh-kanz-site:is(.page-id-29,.page-id-30,.page-id-31,.page-id-32,.page-id-33,.page-id-34,.page-id-35,.page-id-238,.page-id-376) .sp-aside .sp-card-eyebrow{text-wrap:balance;letter-spacing:.06em} html body.wh-kanz-site:is(.page-id-29,.page-id-30,.page-id-31,.page-id-32,.page-id-33,.page-id-34,.page-id-35,.page-id-238,.page-id-376) .sp-card-list li > span:last-child{margin-left:auto;text-align:right} html body.wh-kanz-site .sp-card-list li small{display:block;margin-top:2px;font-size:13.5px;font-weight:500;line-height:1.4;color:var(--muted)} /* ---------- 6. Prophylaxe: Vergleichskarten auf einer Linie (Titel, Preis, Liste, Knopf) ---------- */ @media (min-width:761px){ html body.wh-kanz-site .prophy-variant{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0;align-content:start} html body.wh-kanz-site .prophy-variant-cta{align-self:end} } /* Handy: Kartenknöpfe mit schmalerem Seitenabstand, damit "Mehr zur Intensiv-Prophylaxe" auf 360 bis 375 px einzeilig bleibt (G2 setzt .wh-btn--lg auf 30 px mit !important) */ @media (max-width:760px){ html body.wh-kanz-site main .prophy-variant .wh-btn.prophy-variant-cta{padding-left:16px!important;padding-right:16px!important} } html body.wh-kanz-site .prophy-variant:hover{transform:none} html body.wh-kanz-site .prophy-variant-price .prophy-variant-price-from{font-size:16px;font-weight:500;color:var(--muted)} /* Hinweis-Pille auf der Intensiv-Karte: dunkler Grund für ausreichenden Kontrast */ html body.wh-kanz-site .prophy-variant--premium::before{background:var(--primary-dark)} /* ---------- 7. Prophylaxe: Intensiv-Abschnitt ruhig und hell statt dunkler Verlauf mit Farbflecken ---------- */ html body.wh-kanz-site .pzr-spotlight{background:#eef5f7;color:var(--text);border-top:1px solid var(--border);border-bottom:1px solid var(--border)} html body.wh-kanz-site .pzr-spotlight-bg{display:none} html body.wh-kanz-site .pzr-spotlight-head{max-width:760px;margin:0 auto var(--wz-head-gap)} html body.wh-kanz-site .pzr-spotlight-eyebrow{display:inline-flex;gap:8px;margin:0 0 14px;padding:0;background:none;border:0;border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none;font-size:12px;letter-spacing:.12em;color:var(--primary-dark)} html body.wh-kanz-site .pzr-spotlight-eyebrow svg{color:var(--primary)} html body.wh-kanz-site main .pzr-spotlight-h2{margin:0 0 16px;color:var(--text)} html body.wh-kanz-site .pzr-spotlight-lead{max-width:62ch;font-size:var(--wz-fs-head-p);line-height:1.65;color:var(--muted)} html body.wh-kanz-site .pzr-spotlight-grid{grid-template-columns:minmax(0,1.35fr) minmax(340px,1fr);gap:var(--wz-col-gap);align-items:start} html body.wh-kanz-site .pzr-spotlight-features{gap:var(--wz-gap);margin-bottom:var(--wz-gap)} html body.wh-kanz-site .pzr-spotlight-feat{background:#fff;border:1px solid var(--border);border-radius:var(--wz-radius,16px);padding:24px;-webkit-backdrop-filter:none;backdrop-filter:none} html body.wh-kanz-site .pzr-spotlight-feat:hover{background:#fff;border-color:var(--border);transform:none} html body.wh-kanz-site .pzr-spotlight-feat-icon{width:40px;height:40px;border-radius:50%;background:#eaf2f5;border:0;color:var(--primary-dark)} html body.wh-kanz-site .pzr-spotlight-feat h4{font-size:18px;color:var(--text)} html body.wh-kanz-site .pzr-spotlight-feat p{font-size:15px;line-height:1.6;color:var(--muted)} /* Zitatkasten ohne Platz für ein fehlendes Anführungszeichen, gerade Schrift */ html body.wh-kanz-site .pzr-spotlight-quote{padding:24px 28px;background:#fff;border:1px solid var(--border);border-left:4px solid var(--primary);border-radius:0 16px 16px 0} html body.wh-kanz-site .pzr-spotlight-quote p{font-size:17px;line-height:1.65;font-style:normal;color:var(--text)} html body.wh-kanz-site .pzr-spotlight-quote-author{font-size:12px;letter-spacing:.12em;color:var(--primary-dark)} /* Buchungskarte: weiß, feiner Rand, Zahn-Symbol statt Initialen */ html body.wh-kanz-site .pzr-spotlight-card{top:112px;background:#fff;border:1px solid var(--border);border-radius:20px;padding:36px 28px 26px;color:var(--text);box-shadow:0 22px 48px -34px rgba(36,59,70,.5);-webkit-backdrop-filter:none;backdrop-filter:none} html body.wh-kanz-site .pzr-spotlight-card-badge{background:var(--primary-dark);box-shadow:none;font-size:11.5px} html body.wh-kanz-site .pzr-spotlight-card-avatar{ width:56px;height:56px;margin:4px auto 14px;box-shadow:none; background:#eaf2f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23285c70' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M7 3C4.8 3 3 4.8 3 7.2c0 2 .7 3.2 1.3 4.6.6 1.5.7 3 1 4.8.3 2 .8 4.4 2.2 4.4 1.6 0 1.6-2.6 2.2-4.6.3-1 .8-1.6 2.3-1.6s2 .6 2.3 1.6c.6 2 .6 4.6 2.2 4.6 1.4 0 1.9-2.4 2.2-4.4.3-1.8.4-3.3 1-4.8.6-1.4 1.3-2.6 1.3-4.6C21 4.8 19.2 3 17 3c-1.9 0-2.9 1-5 1S8.9 3 7 3z'/%3E%3C/svg%3E") center/28px 28px no-repeat; } html body.wh-kanz-site .pzr-spotlight-card-avatar span{display:none} html body.wh-kanz-site .pzr-spotlight-card-name{color:var(--text)} html body.wh-kanz-site .pzr-spotlight-card-role{color:var(--muted)} html body.wh-kanz-site .pzr-spotlight-card-list li{font-size:15px} html body.wh-kanz-site .pzr-spotlight-card-list li > span{color:var(--muted)} html body.wh-kanz-site .pzr-spotlight-card-list li > strong{color:var(--text)} html body.wh-kanz-site .pzr-spotlight-card-phone{display:flex;align-items:center;justify-content:center;gap:4px;min-height:44px;padding:0;font-size:15px;color:var(--muted)} html body.wh-kanz-site .pzr-spotlight-card-phone strong{color:var(--text)} html body.wh-kanz-site .pzr-spotlight-card-foot{font-size:14px;color:var(--muted)} /* Tablet: Merkmale als Liste links, Buchungskarte rechts daneben */ @media (min-width:761px) and (max-width:1199px){ html body.wh-kanz-site .pzr-spotlight-grid{grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);gap:var(--wz-gap)} html body.wh-kanz-site .pzr-spotlight-features{grid-template-columns:1fr} html body.wh-kanz-site .pzr-spotlight-card{position:sticky;max-width:none;margin:0} } @media (min-width:761px) and (max-width:1199px){ html body.wh-kanz-site .pzr-spotlight-feat{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:16px;padding:20px} html body.wh-kanz-site .pzr-spotlight-feat-icon{grid-row:1 / span 2;margin:0} html body.wh-kanz-site .pzr-spotlight-feat h4{margin-bottom:4px} } /* Handy: linksbündig, kompakte Merkmalszeilen, Augenbraue ohne Pille */ @media (max-width:760px){ html body.wh-kanz-site .pzr-spotlight-head{text-align:left;margin-bottom:28px} html body.wh-kanz-site .pzr-spotlight-eyebrow{display:block;font-size:12px;line-height:1.5} html body.wh-kanz-site .pzr-spotlight-eyebrow svg{display:none} html body.wh-kanz-site .pzr-spotlight-lead{font-size:16px} html body.wh-kanz-site .pzr-spotlight-grid{grid-template-columns:minmax(0,1fr);gap:20px} html body.wh-kanz-site .pzr-spotlight-features{grid-template-columns:1fr;gap:12px;margin-bottom:12px} html body.wh-kanz-site .pzr-spotlight-feat{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:16px;padding:20px} html body.wh-kanz-site .pzr-spotlight-feat-icon{grid-row:1 / span 2;margin:0} html body.wh-kanz-site .pzr-spotlight-feat h4{margin-bottom:4px;font-size:17px} html body.wh-kanz-site .pzr-spotlight-quote{padding:20px} html body.wh-kanz-site .pzr-spotlight-quote p{font-size:16px} html body.wh-kanz-site .pzr-spotlight-card{position:relative;top:auto;padding:32px 20px 20px} } /* ===== 70-magazin-uebersichten.css ===== */ /* ===================================================================== A5a Magazin-Übersichten: /magazin/ (auch /aktuelles/), /magazin/news/, /magazin/ratgeber/, /magazin/presse/ (Body page-id-240 bis 243). Bausteine: .mag-hero (Kopf mit Filter), .mag-section .mag-grid > .mag-card, .mag-pagination, .mag-empty. Baut auf den Variablen aus 10-grundlagen.css auf (--wz-gap, --wz-card-pad, --wz-radius, --wz-col-gap, --wz-fs-*, --wz-h3). Breakpoints: Handy bis 760 · Tablet hoch 761 bis 1024 · quer 1025 bis 1199 · Computer ab 1200 · breit ab 1600 (dort 4 Spalten aus 10-grundlagen.css). Kategorieseiten tragen parent-pageid-240 (dort entfällt das Kartenlabel). ===================================================================== */ /* ---------- 1. Kopf: linksbündig an der Rasterkante wie alle Unterseiten ---------- */ html body.wh-kanz-site .mag-hero{padding:56px 0 52px;text-align:left} html body.wh-kanz-site .mag-hero .mag-hero-inner{max-width:none;margin:0;text-align:left} html body.wh-kanz-site .mag-hero .sp-crumb{justify-content:flex-start;margin:-6px 0 10px} /* Kategorie steht schon in Brotkrumen, H1 und Filter: Eyebrow nur ohne Brotkrumen */ html body.wh-kanz-site .mag-hero .sp-crumb ~ .wh-eyebrow{display:none} html body.wh-kanz-site .mag-hero h1{margin:0 0 16px} html body.wh-kanz-site .mag-hero .sp-hero-lead{max-width:62ch;margin:0;text-align:left;font-size:var(--wz-fs-lead);line-height:1.6;color:var(--muted)} /* Filter: gleiche Form wie die Knöpfe der Seite (Radius 10), 44 px Tippfläche */ html body.wh-kanz-site .mag-hero .mag-filter{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px;margin:28px 0 0;padding:0} html body.wh-kanz-site .mag-hero .mag-filter-btn{justify-content:center;min-height:44px;padding:0 18px;border-radius:10px;border:1px solid #c9d9df;background:#fff;color:var(--text);font-size:15px;font-weight:500;line-height:1.2;white-space:nowrap} html body.wh-kanz-site .mag-hero .mag-filter-btn:hover{border-color:var(--primary);color:var(--primary-dark)} html body.wh-kanz-site .mag-hero .mag-filter-btn.active{background:var(--primary);border-color:var(--primary);color:#fff} html body.wh-kanz-site .mag-hero .mag-filter-btn:focus-visible{outline:2px solid var(--primary-dark);outline-offset:3px} /* Computer: Titel über die volle Breite (bricht am Laptop sonst unnötig in zwei Zeilen), darunter Einleitung links und Filter rechts auf der Grundlinie der Einleitung */ @media (min-width:1200px){ html body.wh-kanz-site .mag-hero .mag-hero-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--wz-col-gap);row-gap:0;align-items:end} html body.wh-kanz-site .mag-hero .mag-hero-inner > *{grid-column:1} html body.wh-kanz-site .mag-hero .mag-hero-inner > :is(.sp-crumb,.wh-eyebrow){grid-row:1;grid-column:1/-1;align-self:start} html body.wh-kanz-site .mag-hero .mag-hero-inner > h1{grid-row:2;grid-column:1/-1} html body.wh-kanz-site .mag-hero .mag-hero-inner > .sp-hero-lead{grid-row:3} html body.wh-kanz-site .mag-hero .mag-hero-inner > .mag-filter{grid-row:3;grid-column:2;align-self:end;flex-wrap:nowrap;justify-content:flex-end;margin:0} } @media (min-width:761px) and (max-width:1199px){ html body.wh-kanz-site .mag-hero{padding:44px 0 44px} } /* ---------- 2. Karten: gemeinsame Gestalt (alle Größen) ---------- */ html body.wh-kanz-site .mag-section{padding-top:var(--wz-head-gap);padding-bottom:var(--wz-section-y)} html body.wh-kanz-site .mag-section .mag-grid{gap:var(--wz-gap)} html body.wh-kanz-site .mag-section .mag-card-img{background:#eef4f6} html body.wh-kanz-site .mag-section .mag-card-img--ph::after{content:none} html body.wh-kanz-site .mag-section .mag-card-title{color:var(--text);text-wrap:pretty} /* Auszug: nicht mehr gestreckt, sonst erscheint unter der Auslassung eine weitere Zeile */ html body.wh-kanz-site .mag-section .mag-card-excerpt{flex:0 0 auto;color:var(--muted);-webkit-line-clamp:var(--mag-lines,3)} /* Kategorie als ruhiges Textlabel mit Farbpunkt statt Pille; auf Kategorieseiten überflüssig */ html body.wh-kanz-site .mag-section .mag-card-cat{display:flex;align-items:center;gap:8px;padding:0;margin:0 0 10px;background:none;border-radius:0;font-size:12px;font-weight:600;letter-spacing:.08em;line-height:1.4;text-transform:uppercase} html body.wh-kanz-site .mag-section .mag-card-cat::before{content:"";flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:currentColor} html body.wh-kanz-site .mag-section .mag-card-cat[data-cat="news"]{color:#1f6f3d} html body.wh-kanz-site .mag-section .mag-card-cat[data-cat="presse"]{color:#7a4d00} html body.wh-kanz-site .mag-section .mag-card-cat[data-cat="ratgeber"]{color:#2a5f7a} html body.wh-kanz-site.parent-pageid-240 .mag-section .mag-card-cat{display:none} html body.wh-kanz-site .mag-section .mag-card-link{color:var(--primary-dark);font-weight:600} @media (prefers-reduced-motion:reduce){ html body.wh-kanz-site .mag-section .mag-card-img img{transition:none} html body.wh-kanz-site .mag-section .mag-card:hover .mag-card-img img{transform:none} } /* ---------- 3. Raster ab Tablet: Karten einer Reihe stehen auf gemeinsamen Linien ---------- Karten einer Reihe sind gleich hoch (Raster streckt sie): Bild, Label und Titelanfang liegen durch gleiche Bildformate auf einer Linie, die Datumszeile sitzt unten auf einer gemeinsamen Linie. Titel und Auszug laufen dazwischen mit festem Abstand. Frühere Fassung mit subgrid hat den Auszug an der längsten Überschrift der Reihe ausgerichtet; kürzere Titel bekamen darunter ein Loch (bis zu zwei Zeilen bei vier Spalten). Der Ausgleich liegt jetzt ruhig über der Datumszeile. */ @media (min-width:761px){ html body.wh-kanz-site .mag-section .mag-grid{gap:var(--wz-gap);align-items:stretch} html body.wh-kanz-site .mag-section .mag-grid > .mag-card{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--border);border-radius:var(--wz-radius);transition:border-color .2s ease} html body.wh-kanz-site .mag-section .mag-grid > .mag-card:hover{border-color:var(--primary)} html body.wh-kanz-site .mag-section .mag-grid > .mag-card:hover .mag-card-title{color:var(--primary-dark)} html body.wh-kanz-site .mag-section .mag-grid > .mag-card > .mag-card-img{flex:0 0 auto} html body.wh-kanz-site .mag-section .mag-card-img--ph{display:block;aspect-ratio:16/10} html body.wh-kanz-site .mag-section .mag-grid > .mag-card > .mag-card-body{display:flex;flex-direction:column;flex:1 1 auto;padding:22px var(--wz-card-pad)} html body.wh-kanz-site .mag-section .mag-card-cat{margin:0 0 10px;align-self:flex-start} html body.wh-kanz-site .mag-section .mag-card-title{margin:0 0 10px;font-size:var(--wz-h3);line-height:1.3;letter-spacing:-.012em} html body.wh-kanz-site .mag-section .mag-card-excerpt{margin:0 0 20px;font-size:var(--wz-fs-card);line-height:1.6} html body.wh-kanz-site .mag-section .mag-card-meta{margin-top:auto;padding-top:14px;border-top:1px solid var(--border);font-size:14px;color:var(--muted)} html body.wh-kanz-site .mag-section .mag-card-link{font-size:14px} /* Zwei Beiträge: zwei gleich breite Spalten statt leerer dritter Zelle */ html body.wh-kanz-site .mag-section .mag-grid:has(> .mag-card:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))} } /* Breite Karte (Bild links, Text rechts): ein einzelner Beitrag (z. B. Praxis-News) ab 1025 */ @media (min-width:1025px){ html body.wh-kanz-site .mag-section .mag-grid > .mag-card:only-child{display:grid;grid-column:1/-1;grid-row:auto;grid-template-columns:minmax(0,7fr) minmax(0,5fr)} html body.wh-kanz-site .mag-section .mag-grid > .mag-card:only-child > .mag-card-img{position:relative;aspect-ratio:auto;height:auto;min-height:clamp(280px,27vw,420px)} html body.wh-kanz-site .mag-section .mag-grid > .mag-card:only-child > .mag-card-img img{position:absolute;inset:0} html body.wh-kanz-site .mag-section .mag-grid > .mag-card:only-child > .mag-card-body{grid-row:1;grid-column:2;display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,2.6vw,44px) calc(var(--wz-card-pad) + clamp(4px,1vw,20px))} html body.wh-kanz-site .mag-section .mag-grid > .mag-card:only-child .mag-card-title{margin-top:0;font-size:clamp(24px,2.2vw,32px);line-height:1.22;letter-spacing:-.02em} html body.wh-kanz-site .mag-section .mag-grid > .mag-card:only-child .mag-card-excerpt{--mag-lines:6;margin-bottom:28px;font-size:var(--wz-fs-head-p)} html body.wh-kanz-site .mag-section .mag-grid > .mag-card:only-child .mag-card-meta{margin-top:0} } /* Tablet hoch (2 Spalten): erste Karte als Aufmacher über die volle Breite, eine sonst allein stehende letzte Karte ebenso (Kinoformat statt verwaister Zelle). Text darunter in voller Breite. */ @media (min-width:761px) and (max-width:1024px){ html body.wh-kanz-site .mag-section .mag-grid > .mag-card:is(:first-child,:last-child:nth-child(even)){grid-column:1/-1} html body.wh-kanz-site .mag-section .mag-grid > .mag-card:is(:first-child,:last-child:nth-child(even)) > .mag-card-img{aspect-ratio:21/9} html body.wh-kanz-site .mag-section .mag-grid > .mag-card:first-child .mag-card-title{font-size:24px;line-height:1.25} html body.wh-kanz-site .mag-section .mag-grid > .mag-card:is(:first-child,:last-child:nth-child(even)) .mag-card-excerpt{max-width:68ch} } /* Tablet quer: drei Spalten wie am Laptop statt zwei grober Karten */ @media (min-width:1025px) and (max-width:1199px){ html body.wh-kanz-site .mag-section .mag-grid{grid-template-columns:repeat(3,minmax(0,1fr))} html body.wh-kanz-site .mag-section .mag-card-title{font-size:19px} } /* ---------- 3b. Aufmacher ab 1025 je nach Beitragszahl: jede Reihe wird voll ---------- Der erste Beitrag ist der Aufmacher. Seine Form richtet sich nach der Zahl der Beiträge auf der Seite, damit keine leere Zelle am Ende stehen bleibt (die letzte Seite hat oft weniger als 12): 3 Spalten (1025 bis 1599), N Beiträge: N durch 3 teilbar (6, 9, 12) groß über 2 Spalten und 2 Reihen, daneben 2 schlanke Karten Rest 1 (4, 7, 10, 13) breite Karte über alle 3 Spalten, Bild links, Text rechts Rest 2 (5, 8, 11) über 2 Spalten in einer Reihe, daneben 1 Karte 4 Spalten (ab 1600), N Beiträge: Rest 1 (5, 9, 13) groß über 2 x 2, daneben 4 schlanke Karten Rest 0 (8, 12, 16) groß über 2 x 2, Karte 2 im Kinoformat über 2 Spalten Rest 3 (7, 11) groß über 2 x 2, Karten 2 und 3 im Kinoformat Rest 2 (6, 10, 14) Aufmacher und Karte 2 je über 2 Spalten in einer Reihe 3 Beiträge 3 Spalten statt leerer vierter Zelle */ @media (min-width:1025px) and (max-width:1599px){ html body.wh-kanz-site .mag-section .mag-grid:has(> .mag-card:nth-child(4)):has(> .mag-card:nth-child(3n+1):last-child) > .mag-card:first-child{display:grid;grid-column:1/-1;grid-row:auto;grid-template-columns:minmax(0,7fr) minmax(0,5fr)} html body.wh-kanz-site .mag-section .mag-grid:has(> .mag-card:nth-child(4)):has(> .mag-card:nth-child(3n+1):last-child) > .mag-card:first-child > .mag-card-img{position:relative;aspect-ratio:auto;height:auto;min-height:clamp(280px,27vw,420px)} html body.wh-kanz-site .mag-section .mag-grid:has(> .mag-card:nth-child(4)):has(> .mag-card:nth-child(3n+1):last-child) > .mag-card:first-child > .mag-card-img img{position:absolute;inset:0} html body.wh-kanz-site .mag-section .mag-grid:has(> .mag-card:nth-child(4)):has(> .mag-card:nth-child(3n+1):last-child) > .mag-card:first-child > .mag-card-body{grid-row:1;grid-column:2;display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,2.6vw,44px) calc(var(--wz-card-pad) + clamp(4px,1vw,20px))} html body.wh-kanz-site .mag-section .mag-grid:has(> .mag-card:nth-child(4)):has(> .mag-card:nth-child(3n+1):last-child) > .mag-card:first-child .mag-card-title{margin-top:0;font-size:clamp(24px,2.2vw,32px);line-height:1.22;letter-spacing:-.02em} html body.wh-kanz-site .mag-section .mag-grid:has(> .mag-card:nth-child(4)):has(> .mag-card:nth-child(3n+1):last-child) > .mag-card:first-child .mag-card-excerpt{--mag-lines:6;margin-bottom:28px;font-size:var(--wz-fs-head-p)} html body.wh-kanz-site .mag-section .mag-grid:has(> .mag-card:nth-child(4)):has(> .mag-card:nth-child(3n+1):last-child) > .mag-card:first-child .mag-card-meta{margin-top:0} html body.wh-kanz-site .mag-section .mag-grid:has(> .mag-card:nth-child(5)):not(:has(> .mag-card:nth-child(3n+1):last-child)) > .mag-card:first-child > .mag-card-img{position:relative;flex:1 1 auto;aspect-ratio:auto;height:auto;min-height:320px} html body.wh-kanz-site .mag-section .mag-grid:has(> .mag-card:nth-child(5)):not(:has(> .mag-card:nth-child(3n+1):last-child)) > .mag-card:first-child > .mag-card-img img{position:absolute;inset:0} html body.wh-kanz-site .mag-section .mag-grid:has(> .mag-card:nth-child(5)):not(:has(> .mag-card:nth-child(3n+1):last-child)) > .mag-card:first-child > .mag-card-body{flex:0 0 auto;padding:28px calc(var(--wz-card-pad) + 8px) 26px} html body.wh-kanz-site .mag-section .mag-grid:has(> .mag-card:nth-child(5)):not(:has(> .mag-card:nth-child(3n+1):last-child)) > .mag-card:first-child .mag-card-title{font-size:clamp(26px,2.1vw,34px);line-height:1.2;letter-spacing:-.02em;margin-bottom:12px} html body.wh-kanz-site .mag-section .mag-grid:has(> .mag-card:nth-child(5)):not(:has(> .mag-card:nth-child(3n+1):last-child)) > .mag-card:first-child .mag-card-excerpt{--mag-lines:3;font-size:var(--wz-fs-head-p);max-width:62ch} html body.wh-kanz-site .mag-section .mag-grid:has(> .mag-card:nth-child(6)):has(> .mag-card:nth-child(3n):last-child) > .mag-card:first-child{grid-column:span 2;grid-row:span 2} /* schlanke Nebenaufmacher (Bild, Titel, Datum), damit das Aufmacherbild nicht hochgezogen wird */ html body.wh-kanz-site .mag-section .mag-grid:has(> .mag-card:nth-child(6)):has(> .mag-card:nth-child(3n):last-child) > .mag-card:is(:nth-child(2),:nth-child(3)) .mag-card-excerpt{display:none} html body.wh-kanz-site .mag-section .mag-grid:has(> .mag-card:nth-child(5)):has(> .mag-card:nth-child(3n+2):last-child) > .mag-card:first-child{grid-column:span 2} html body.wh-kanz-site .mag-section .mag-grid:has(> .mag-card:nth-child(5)):has(> .mag-card:nth-child(3n+2):last-child) > .mag-card:first-child > .mag-card-img{min-height:clamp(260px,22vw,320px)} } @media (min-width:1600px){ html body.wh-kanz-site .mag-section .mag-grid:has(> .mag-card:nth-child(5)) > .mag-card:first-child > .mag-card-img{position:relative;flex:1 1 auto;aspect-ratio:auto;height:auto;min-height:320px} html body.wh-kanz-site .mag-section .mag-grid:has(> .mag-card:nth-child(5)) > .mag-card:first-child > .mag-card-img img{position:absolute;inset:0} html body.wh-kanz-site .mag-section .mag-grid:has(> .mag-card:nth-child(5)) > .mag-card:first-child > .mag-card-body{flex:0 0 auto;padding:28px calc(var(--wz-card-pad) + 8px) 26px} html body.wh-kanz-site .mag-section .mag-grid:has(> .mag-card:nth-child(5)) > .mag-card:first-child .mag-card-title{font-size:clamp(26px,2.1vw,34px);line-height:1.2;letter-spacing:-.02em;margin-bottom:12px} html body.wh-kanz-site .mag-section .mag-grid:has(> .mag-card:nth-child(5)) > .mag-card:first-child .mag-card-excerpt{--mag-lines:3;font-size:var(--wz-fs-head-p);max-width:62ch} html body.wh-kanz-site .mag-section .mag-grid:has(> .mag-card:nth-child(5)):not(:has(> .mag-card:nth-child(4n+2):last-child)) > .mag-card:first-child{grid-column:span 2;grid-row:span 2} html body.wh-kanz-site .mag-section .mag-grid:has(> .mag-card:nth-child(5)):not(:has(> .mag-card:nth-child(4n+2):last-child)) > .mag-card:is(:nth-child(2),:nth-child(3),:nth-child(4),:nth-child(5)) .mag-card-excerpt{display:none} html body.wh-kanz-site .mag-section .mag-grid:has(> .mag-card:nth-child(8)):has(> .mag-card:nth-child(4n):last-child) > .mag-card:nth-child(2){grid-column:span 2} html body.wh-kanz-site .mag-section .mag-grid:has(> .mag-card:nth-child(8)):has(> .mag-card:nth-child(4n):last-child) > .mag-card:nth-child(2) > .mag-card-img{aspect-ratio:21/9} html body.wh-kanz-site .mag-section .mag-grid:has(> .mag-card:nth-child(8)):has(> .mag-card:nth-child(4n):last-child) > .mag-card:nth-child(5) .mag-card-excerpt{display:-webkit-box} html body.wh-kanz-site .mag-section .mag-grid:has(> .mag-card:nth-child(7)):has(> .mag-card:nth-child(4n+3):last-child) > .mag-card:is(:nth-child(2),:nth-child(3)){grid-column:span 2} html body.wh-kanz-site .mag-section .mag-grid:has(> .mag-card:nth-child(7)):has(> .mag-card:nth-child(4n+3):last-child) > .mag-card:is(:nth-child(2),:nth-child(3)) > .mag-card-img{aspect-ratio:21/9} html body.wh-kanz-site .mag-section .mag-grid:has(> .mag-card:nth-child(7)):has(> .mag-card:nth-child(4n+3):last-child) > .mag-card:is(:nth-child(4),:nth-child(5)) .mag-card-excerpt{display:-webkit-box} html body.wh-kanz-site .mag-section .mag-grid:has(> .mag-card:nth-child(6)):has(> .mag-card:nth-child(4n+2):last-child) > .mag-card:is(:first-child,:nth-child(2)){grid-column:span 2} html body.wh-kanz-site .mag-section .mag-grid:has(> .mag-card:nth-child(6)):has(> .mag-card:nth-child(4n+2):last-child) > .mag-card:first-child > .mag-card-img{flex:0 0 auto;aspect-ratio:21/9;min-height:0} html body.wh-kanz-site .mag-section .mag-grid:has(> .mag-card:nth-child(6)):has(> .mag-card:nth-child(4n+2):last-child) > .mag-card:nth-child(2) > .mag-card-img{aspect-ratio:21/9} html body.wh-kanz-site .mag-section .mag-grid:has(> .mag-card:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))} } /* ---------- 4. Handy: Aufmacher, dann ruhige Liste mit Bild links ---------- */ @media (max-width:760px){ html body.wh-kanz-site .mag-hero{padding:28px 0 28px} /* Filter als 2 x 2 Raster: alle vier sichtbar, gleich breit, bündige Kanten */ html body.wh-kanz-site .mag-hero .mag-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow:visible;scroll-snap-type:none;margin:22px 0 0;padding:0} html body.wh-kanz-site .mag-hero .mag-filter-btn{flex:none;min-width:0;min-height:44px;padding:0 10px;font-size:14px} html body.wh-kanz-site .mag-section{padding-top:16px;padding-bottom:var(--wz-section-y)} html body.wh-kanz-site .mag-section .mag-card-cat{font-size:13px;letter-spacing:.05em;margin:0 0 6px} /* Titel nie kürzen: medizinische Überschriften bleiben vollständig */ html body.wh-kanz-site .mag-section .mag-card .mag-card-title, html body.wh-kanz-site:not(.paged) .mag-section .mag-card:first-child .mag-card-title{display:block;-webkit-line-clamp:unset;overflow:visible} html body.wh-kanz-site .mag-section .mag-card-meta{font-size:13.5px;color:var(--muted)} html body.wh-kanz-site .mag-section .mag-card-img, html body.wh-kanz-site:not(.paged) .mag-section .mag-card:first-child .mag-card-img{border-radius:var(--wz-radius)} html body.wh-kanz-site:not(.paged) .mag-section .mag-card:first-child .mag-card-excerpt{-webkit-line-clamp:3;font-size:15px} html body.wh-kanz-site:not(.paged) .mag-section .mag-card:first-child .mag-card-link{font-size:14px} /* Kein abgerissenes Listenende vor Seitenzahlen oder Fußzeile */ html body.wh-kanz-site .mag-section .mag-grid > .mag-card:last-child{border-bottom:0} } /* ---------- 5. Seitenzahlen: gleich große Felder, Pfeil lesbar ---------- */ html body.wh-kanz-site .mag-section .mag-pagination{flex-wrap:wrap;gap:8px;margin-top:calc(var(--wz-head-gap) * .85)} html body.wh-kanz-site .mag-section .mag-pagination > .page-numbers{box-sizing:border-box;min-width:44px;height:44px;min-height:44px;padding:0 12px;border-radius:10px;border:1px solid #c9d9df;font-size:15px;font-weight:500;color:var(--text);background:#fff} html body.wh-kanz-site .mag-section .mag-pagination > :is(.prev,.next){width:44px;padding:0} html body.wh-kanz-site .mag-section .mag-pagination > a.page-numbers:hover{border-color:var(--primary);color:var(--primary-dark)} html body.wh-kanz-site .mag-section .mag-pagination > .page-numbers.current{background:var(--primary);border-color:var(--primary);color:#fff} html body.wh-kanz-site .mag-section .mag-pagination > .page-numbers.dots{border-color:transparent;background:none} html body.wh-kanz-site .mag-section .mag-pagination > a.page-numbers:focus-visible{outline:2px solid var(--primary-dark);outline-offset:3px} /* kanz-site.css gibt auch den inneren span 44 px Mindestmaß: zurücksetzen */ html body.wh-kanz-site .mag-section .mag-pagination .page-numbers > span{display:inline;min-width:0;min-height:0} html body.wh-kanz-site .mag-section .mag-pagination .page-numbers > span[aria-hidden]{font-size:19px;line-height:1} html body.wh-kanz-site .mag-section .mag-pagination .page-numbers > .screen-reader-text{position:absolute;width:1px;height:1px} /* ---------- 6. Leere Kategorie: ruhige Fläche mit zwei Wegen weiter ---------- */ html body.wh-kanz-site .mag-section .mag-empty{box-sizing:border-box;max-width:none;margin:0;padding:clamp(28px,3.6vw,52px);text-align:left;background:#f8fbfc;border:1px solid var(--border);border-radius:var(--wz-radius)} html body.wh-kanz-site .mag-section .mag-empty::before{content:"";display:block;width:48px;height:48px;margin:0 0 20px;border-radius:12px;background:#e6f0f3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23285c70' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4.5h11a1.5 1.5 0 0 1 1.5 1.5v13a1.5 1.5 0 0 0 1.5 1.5H6.5A1.5 1.5 0 0 1 5 19z'/%3E%3Cpath d='M17.5 9H20v10a1.5 1.5 0 0 1-3 0M8 8.5h6M8 12h6M8 15.5h4'/%3E%3C/svg%3E") center/26px no-repeat} html body.wh-kanz-site .mag-section .mag-empty h2{margin:0 0 10px;font-size:var(--wz-h2-sm);font-weight:600;line-height:1.25;letter-spacing:-.018em;color:var(--text)} html body.wh-kanz-site .mag-section .mag-empty p{max-width:62ch;margin:0;font-size:var(--wz-fs-prose);line-height:1.65;color:var(--muted)} html body.wh-kanz-site .mag-section .mag-empty-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px} @media (min-width:1025px){ html body.wh-kanz-site .mag-section .mag-empty{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:28px;align-items:center} html body.wh-kanz-site .mag-section .mag-empty::before{grid-column:1;grid-row:1/3;margin:0;align-self:start} html body.wh-kanz-site .mag-section .mag-empty > :is(h2,p){grid-column:2} html body.wh-kanz-site .mag-section .mag-empty-actions{grid-column:3;grid-row:1/3;margin:0 0 0 var(--wz-col-gap)} } @media (max-width:760px){ html body.wh-kanz-site .mag-section .mag-empty{padding:24px var(--wz-card-pad)} html body.wh-kanz-site .mag-section .mag-empty-actions{display:grid;grid-template-columns:1fr;gap:10px;margin-top:24px} html body.wh-kanz-site .mag-section .mag-empty-actions .wh-btn{width:100%} } /* ===== 72-magazin-artikel.css ===== */ /* ===================================================================== A5b Magazinartikel (single-wh_magazin.php, alle 33 Beiträge) Aufbau: Kopf (Titel links, Bild rechts) · Lesespalte mit "Auf dieser Seite" und Seitenspalte (Praxis, Termin, passende Behandlungen) · Weiterlesen. Breakpoints: Handy bis 760 · Tablet hoch 761 bis 1024 (eine Spalte) · Tablet quer 1025 bis 1199 (Text + Seitenspalte) · Computer ab 1200 (Inhalt | Text | Seitenspalte) · breit ab 1600. Baut auf 10-grundlagen.css auf (--wz-*). Präfix überall "html body.wh-kanz-site.single-wh_magazin", !important nur gegen alte !important-Regeln (Customizer 960 px, style.css, Grundlagen-Lesebreite). ===================================================================== */ html body.wh-kanz-site.single-wh_magazin{ --mag-measure:680px; /* Lesespalte: 18 px Schrift, rund 75 Zeichen */ --mag-fs:18px; --mag-lh:1.75; --mag-top:112px; /* klebende Elemente unter dem Kopf */ --mag-tint:#f5f9fa; --mag-warn-bg:#fdf7f0; --mag-warn-line:#c26a1a; --mag-warn-ink:#7a3e10; /* Kontrast auf --mag-warn-bg rund 8:1 */ } @media (min-width:1600px){html body.wh-kanz-site.single-wh_magazin{--mag-measure:720px}} /* 1200 bis 1439 px: Lesespalte etwas schmaler (rund 70 Zeichen), damit "Auf dieser Seite" nicht auf 160 px gedrückt wird */ @media (min-width:1200px) and (max-width:1439px){html body.wh-kanz-site.single-wh_magazin{--mag-measure:640px}} @media (max-width:760px){html body.wh-kanz-site.single-wh_magazin{--mag-fs:17px;--mag-lh:1.7}} /* ---------- 1. Kopf: Brotkrumen, Rubrik, Titel, Einleitung, Datum, Bild ---------- */ html body.wh-kanz-site.single-wh_magazin .mag-single-hero{padding:44px 0 52px;text-align:left;background:#fff} html body.wh-kanz-site.single-wh_magazin .mag-single-head{min-width:0} html body.wh-kanz-site.single-wh_magazin .mag-single-hero .sp-crumb{justify-content:flex-start;flex-wrap:wrap;margin:-6px 0 8px} /* Rubrik als ruhiges Textlabel mit Farbpunkt, wie in der Magazinübersicht */ html body.wh-kanz-site.single-wh_magazin .mag-single-hero .mag-card-cat{display:inline-flex;align-items:center;gap:8px;padding:0;margin:0 0 14px;background:none;border-radius:0;font-size:12px;font-weight:600;letter-spacing:.1em;line-height:1.4} html body.wh-kanz-site.single-wh_magazin .mag-single-hero .mag-card-cat::before{content:"";flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:currentColor} html body.wh-kanz-site.single-wh_magazin .mag-single-hero h1.mag-single-title{max-width:22em;margin:0 0 18px;font-size:clamp(36px,2.9vw,54px);font-weight:600;line-height:1.12;letter-spacing:-.028em;text-wrap:balance;hyphens:manual;-webkit-hyphens:manual} html body.wh-kanz-site.single-wh_magazin .mag-single-lead{max-width:60ch;margin:0 0 20px;font-size:19px;line-height:1.6;color:var(--muted);text-wrap:pretty} html body.wh-kanz-site.single-wh_magazin .mag-single-hero .mag-single-meta{margin:0;font-size:14px;line-height:1.5;color:var(--muted)} html body.wh-kanz-site.single-wh_magazin :is(.mag-nobr,.mag-single-readtime){white-space:nowrap} /* Titelbild mit Bildhinweis als Bildunterschrift (statt 80 px darunter im Text) */ html body.wh-kanz-site.single-wh_magazin .mag-single-figure{margin:0;min-width:0} html body.wh-kanz-site.single-wh_magazin .mag-single-figure .mag-single-img{margin:0!important;padding:0} html body.wh-kanz-site.single-wh_magazin .mag-single-figure .mag-single-img img.mag-single-photo{display:block;width:100%;max-width:none!important;height:auto;margin:0;aspect-ratio:auto;object-fit:cover;border-radius:16px;background:#eef4f6} html body.wh-kanz-site.single-wh_magazin .mag-single-figcap{margin:10px 0 0;font-size:13px;line-height:1.4;color:var(--muted);text-align:right} /* Tablet quer und Computer: Text und Bild nebeneinander, erster Absatz im ersten Bildschirm */ @media (min-width:1025px){ html body.wh-kanz-site.single-wh_magazin .mag-single-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:var(--wz-col-gap);align-items:center} html body.wh-kanz-site.single-wh_magazin .mag-single:not(.has-figure) .mag-single-hero-grid{grid-template-columns:minmax(0,1fr)} } @media (min-width:1025px) and (max-width:1199px){ html body.wh-kanz-site.single-wh_magazin .mag-single-hero{padding:36px 0 44px} html body.wh-kanz-site.single-wh_magazin .mag-single-hero h1.mag-single-title{font-size:36px} html body.wh-kanz-site.single-wh_magazin .mag-single-lead{font-size:18px} } /* Tablet hoch: untereinander, alles an derselben linken Kante */ @media (min-width:761px) and (max-width:1024px){ html body.wh-kanz-site.single-wh_magazin .mag-single-hero{padding:36px 0 44px} html body.wh-kanz-site.single-wh_magazin .mag-single-hero h1.mag-single-title{font-size:clamp(34px,4.6vw,42px)} html body.wh-kanz-site.single-wh_magazin .mag-single-lead{font-size:18px} html body.wh-kanz-site.single-wh_magazin .mag-single-figure{margin-top:32px} } /* Handy: linksbündig, wenig Luft über den Brotkrumen, Titel ohne Silbentrennung */ @media (max-width:760px){ html body.wh-kanz-site.single-wh_magazin .mag-single-hero{padding:16px 0 28px} html body.wh-kanz-site.single-wh_magazin .mag-single-hero .sp-crumb{margin:0 0 4px} html body.wh-kanz-site.single-wh_magazin .mag-single-hero .mag-card-cat{margin-bottom:10px;font-size:13px} html body.wh-kanz-site.single-wh_magazin .mag-single-hero h1.mag-single-title{font-size:clamp(27px,7.4vw,32px);line-height:1.15;letter-spacing:-.022em;margin-bottom:14px} html body.wh-kanz-site.single-wh_magazin .mag-single-lead{font-size:17px;margin-bottom:14px} html body.wh-kanz-site.single-wh_magazin .mag-single-hero .mag-single-meta{font-size:14px} html body.wh-kanz-site.single-wh_magazin .mag-single-figure{margin-top:22px} html body.wh-kanz-site.single-wh_magazin .mag-single-figure .mag-single-img img.mag-single-photo{border-radius:14px} html body.wh-kanz-site.single-wh_magazin .mag-single-figcap{margin-top:8px;font-size:13px} } /* ---------- 2. Raster: Inhalt | Lesespalte | Seitenspalte ---------- */ html body.wh-kanz-site.single-wh_magazin .mag-single-body{padding-top:8px;padding-bottom:var(--wz-section-y)} html body.wh-kanz-site.single-wh_magazin .mag-main, html body.wh-kanz-site.single-wh_magazin .mag-aside{min-width:0} html body.wh-kanz-site.single-wh_magazin .mag-toc{display:none} html body.wh-kanz-site.single-wh_magazin .mag-aside{display:grid;gap:20px;margin-top:48px} /* Tablet quer: Text links, rechts Praxis-Karte und darunter das klebende Inhaltsverzeichnis */ @media (min-width:1025px) and (max-width:1199px){ html body.wh-kanz-site.single-wh_magazin .mag-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,300px);grid-template-rows:auto 1fr auto;grid-template-areas:"main aside" "main toc" "back .";column-gap:var(--wz-col-gap);align-items:start} html body.wh-kanz-site.single-wh_magazin .mag-layout:not(.has-toc){grid-template-areas:"main aside" "main ." "back ."} html body.wh-kanz-site.single-wh_magazin .mag-toc{display:block;grid-area:toc;position:sticky;top:var(--mag-top);margin-top:32px} } /* Computer: drei Spalten; die Lesespalte bekommt zuerst ihre Breite, die Seiten den Rest */ @media (min-width:1200px){ html body.wh-kanz-site.single-wh_magazin .mag-layout{display:grid;grid-template-columns:minmax(160px,1fr) minmax(0,var(--mag-measure)) minmax(270px,1.2fr);grid-template-areas:"toc main aside" ". back .";column-gap:clamp(32px,3vw,64px);align-items:start} html body.wh-kanz-site.single-wh_magazin .mag-layout:not(.has-toc){grid-template-columns:minmax(0,var(--mag-measure)) minmax(260px,340px);grid-template-areas:"main aside" "back .";justify-content:space-between} html body.wh-kanz-site.single-wh_magazin .mag-toc{display:block;grid-area:toc;position:sticky;top:var(--mag-top)} } @media (min-width:1025px){ html body.wh-kanz-site.single-wh_magazin .mag-main{grid-area:main} html body.wh-kanz-site.single-wh_magazin .mag-aside{grid-area:aside;margin-top:0} html body.wh-kanz-site.single-wh_magazin .mag-layout > .mag-single-back{grid-area:back} html body.wh-kanz-site.single-wh_magazin .mag-toc-m{display:none} html body.wh-kanz-site.single-wh_magazin .mag-toc{max-height:calc(100vh - var(--mag-top) - 24px);overflow:auto;overscroll-behavior:contain} } /* Seitenspalte klebt mit, wenn der Bildschirm hoch genug ist */ @media (min-width:1200px) and (min-height:860px){ html body.wh-kanz-site.single-wh_magazin .mag-aside{position:sticky;top:var(--mag-top)} } /* ---------- 3. Inhaltsverzeichnis "Auf dieser Seite" ---------- */ html body.wh-kanz-site.single-wh_magazin .mag-toc-title{margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} html body.wh-kanz-site.single-wh_magazin .mag-toc-list{list-style:none;margin:0;padding:0} html body.wh-kanz-site.single-wh_magazin .mag-toc .mag-toc-list{border-left:2px solid var(--border)} html body.wh-kanz-site.single-wh_magazin .mag-toc .mag-toc-list li{margin:0;padding:0} html body.wh-kanz-site.single-wh_magazin .mag-toc .mag-toc-list li::before{display:none} html body.wh-kanz-site.single-wh_magazin .mag-toc .mag-toc-list a{display:block;margin-left:-2px;padding:7px 0 7px 16px;border-left:2px solid transparent;font-size:14.5px;line-height:1.4;color:var(--muted);text-decoration:none;text-wrap:pretty;transition:color .15s ease,border-color .15s ease} html body.wh-kanz-site.single-wh_magazin .mag-toc .mag-toc-list a:hover{color:var(--primary-dark)} html body.wh-kanz-site.single-wh_magazin .mag-toc .mag-toc-list a[aria-current]{color:var(--primary-dark);border-left-color:var(--primary);font-weight:600} html body.wh-kanz-site.single-wh_magazin .mag-toc-list a:focus-visible{outline:2px solid var(--primary-dark);outline-offset:2px;border-radius:4px} /* Lange Wörter wie "Wurzelkanalbehandlung" nie abschneiden; in der schmalen Spalte (1200 bis 1439 px) nur lange Wörter trennen */ html body.wh-kanz-site.single-wh_magazin .mag-toc .mag-toc-list a{overflow-wrap:break-word} @media (min-width:1200px) and (max-width:1439px){ html body.wh-kanz-site.single-wh_magazin .mag-toc .mag-toc-list a{hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:14 6 5} } @media (pointer:coarse){ html body.wh-kanz-site.single-wh_magazin .mag-toc .mag-toc-list a{padding-block:12px} } /* Handy und Tablet hoch: eingeklappt über dem Text */ html body.wh-kanz-site.single-wh_magazin .mag-toc-m{margin:0 0 36px;background:var(--mag-tint);border:1px solid var(--border);border-radius:14px} html body.wh-kanz-site.single-wh_magazin .mag-toc-m summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 20px;font-size:15px;font-weight:600;color:var(--primary-dark);list-style:none;cursor:pointer;border-radius:14px} html body.wh-kanz-site.single-wh_magazin .mag-toc-m summary::-webkit-details-marker{display:none} html body.wh-kanz-site.single-wh_magazin .mag-toc-m summary::after{content:"";flex:none;width:18px;height:18px;background:var(--primary); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform .2s ease} html body.wh-kanz-site.single-wh_magazin .mag-toc-m[open] summary::after{transform:rotate(180deg)} html body.wh-kanz-site.single-wh_magazin .mag-toc-m summary:focus-visible{outline:2px solid var(--primary-dark);outline-offset:2px} html body.wh-kanz-site.single-wh_magazin .mag-toc-m .mag-toc-list{padding:0 20px 8px;counter-reset:mag-toc} html body.wh-kanz-site.single-wh_magazin .mag-toc-m .mag-toc-list li{margin:0;padding:0;border-top:1px solid var(--border);counter-increment:mag-toc} html body.wh-kanz-site.single-wh_magazin .mag-toc-m .mag-toc-list li::before{display:none} html body.wh-kanz-site.single-wh_magazin .mag-toc-m .mag-toc-list a{display:flex;align-items:baseline;gap:12px;min-height:44px;padding:11px 0;font-size:15.5px;line-height:1.4;color:var(--text);text-decoration:none} html body.wh-kanz-site.single-wh_magazin .mag-toc-m .mag-toc-list a::before{content:counter(mag-toc);flex:0 0 18px;font-size:13px;font-weight:600;color:var(--primary-dark);font-variant-numeric:tabular-nums} @media (min-width:761px) and (max-width:1024px){ html body.wh-kanz-site.single-wh_magazin .mag-toc-m .mag-toc-list{columns:2;column-gap:32px} html body.wh-kanz-site.single-wh_magazin .mag-toc-m .mag-toc-list li{break-inside:avoid} } @media (prefers-reduced-motion:reduce){ html body.wh-kanz-site.single-wh_magazin .mag-toc-m summary::after, html body.wh-kanz-site.single-wh_magazin .mag-toc .mag-toc-list a{transition:none} } /* ---------- 4. Lesetext: Spaltenbreite, Einleitung, Überschriften, Listen ---------- */ html body.wh-kanz-site.single-wh_magazin .mag-single-prose{max-width:none!important;margin-inline:0;font-size:var(--mag-fs);line-height:var(--mag-lh)} html body.wh-kanz-site.single-wh_magazin .mag-single-prose p{margin-bottom:20px} html body.wh-kanz-site.single-wh_magazin .mag-single-prose > p:first-child:not(.mag-kurz){font-size:calc(var(--mag-fs) + 2px);line-height:1.65;color:var(--text)} html body.wh-kanz-site.single-wh_magazin .mag-single-prose h2{text-wrap:balance} /* Sprungziele aus "Auf dieser Seite" nicht unter dem klebenden Kopf verstecken */ html body.wh-kanz-site.single-wh_magazin .mag-single-prose h2[id]{scroll-margin-top:104px} html body.wh-kanz-site.single-wh_magazin .mag-single-prose .mag-callout--warn > h2[id]{scroll-margin-top:132px} @media (max-width:760px){ html body.wh-kanz-site.single-wh_magazin .mag-single-prose h2[id]{scroll-margin-top:84px} html body.wh-kanz-site.single-wh_magazin .mag-single-prose .mag-callout--warn > h2[id]{scroll-margin-top:106px} } html body.wh-kanz-site.single-wh_magazin .mag-single-prose h3{margin:34px 0 10px} /* Ablauf "Schritt 1, 2, 3": Schrittmarke über der Überschrift */ html body.wh-kanz-site.single-wh_magazin .mag-step-no{display:block;margin-bottom:6px;font-size:13px;font-weight:700;letter-spacing:.08em;line-height:1.4;text-transform:uppercase;color:var(--primary-dark)} html body.wh-kanz-site.single-wh_magazin .mag-single-prose ul li{font-size:inherit;line-height:1.7} html body.wh-kanz-site.single-wh_magazin .mag-single-prose a[href^="tel:"]{white-space:nowrap} /* Nummerierte Schritte: Ziffer im Kreis innerhalb der Textspalte, Abstand zum folgenden Absatz */ html body.wh-kanz-site.single-wh_magazin .mag-single-prose ol{list-style:none;counter-reset:mag-step;margin:8px 0 30px;padding:0} html body.wh-kanz-site.single-wh_magazin .mag-single-prose ol > li{counter-increment:mag-step;position:relative;margin:0 0 14px;padding-left:44px;line-height:1.7} html body.wh-kanz-site.single-wh_magazin .mag-single-prose ol > li::marker{content:none} html body.wh-kanz-site.single-wh_magazin .mag-single-prose ol > li::before{content:counter(mag-step);position:absolute;left:0;top:calc((1.7em - 28px) / 2);display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#e4eff3;color:var(--primary-dark);font-size:14px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums} @media (max-width:760px){ html body.wh-kanz-site.single-wh_magazin .mag-single-prose ol > li{padding-left:40px} html body.wh-kanz-site.single-wh_magazin .mag-single-prose ol > li::before{width:26px;height:26px;top:calc((1.7em - 26px) / 2);font-size:13px} } /* Silbentrennung im Fließtext nur auf schmalen Handys und nur bei langen Wörtern */ @media (max-width:420px){ html body.wh-kanz-site.single-wh_magazin .mag-single-prose :is(p,li){hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:14 6 5} } /* ---------- 5. Kurzantwort (Zitatblock oder Absatz) als ruhiger Hinweiskasten ---------- */ html body.wh-kanz-site.single-wh_magazin .mag-single-prose :is(blockquote,p.mag-kurz){margin:8px 0 40px;padding:24px 28px;background:#f1f7f9;border:1px solid #d7e6ec;border-left:4px solid var(--primary);border-radius:0 16px 16px 0;font-size:var(--mag-fs);line-height:1.7;color:var(--text)} html body.wh-kanz-site.single-wh_magazin .mag-single-prose blockquote p{margin:0 0 12px} html body.wh-kanz-site.single-wh_magazin .mag-single-prose blockquote p:last-child{margin-bottom:0} html body.wh-kanz-site.single-wh_magazin .mag-single-prose :is(blockquote > p:first-child,p.mag-kurz) > strong:first-child{display:block;margin-bottom:6px;font-size:15px;letter-spacing:.01em;color:var(--primary-dark)} @media (max-width:760px){ html body.wh-kanz-site.single-wh_magazin .mag-single-prose :is(blockquote,p.mag-kurz){margin:4px 0 32px;padding:18px 20px} } /* ---------- 6. Warnzeichen und Notruf: eigener Kasten, Notruf antippbar ---------- */ html body.wh-kanz-site.single-wh_magazin .mag-callout--warn{margin:44px 0 40px;padding:26px 28px 8px;background:var(--mag-warn-bg);border:1px solid #f0dcc4;border-left:4px solid var(--mag-warn-line);border-radius:0 16px 16px 0} html body.wh-kanz-site.single-wh_magazin .mag-single-prose .mag-callout--warn > h2{position:relative;margin:0 0 14px;padding-left:36px;font-size:clamp(21px,1.6vw,25px);line-height:1.3;color:var(--mag-warn-ink)} html body.wh-kanz-site.single-wh_magazin .mag-callout--warn > h2::before{content:"";position:absolute;left:0;top:.12em;width:24px;height:24px;background:var(--mag-warn-line); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18.2A2 2 0 0 0 3.5 21h17a2 2 0 0 0 1.7-2.8L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18.2A2 2 0 0 0 3.5 21h17a2 2 0 0 0 1.7-2.8L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E") center/contain no-repeat} html body.wh-kanz-site.single-wh_magazin .mag-callout--warn ul li::before{background:var(--mag-warn-line)} html body.wh-kanz-site.single-wh_magazin .mag-callout--warn ol > li::before{background:#f6e3cd;color:var(--mag-warn-ink)} /* Notruf: großzügige, unsichtbare Tippfläche am Link, sichtbare Marke am inneren span; der negative Außenrand gleicht die Polsterung aus, damit vor dem Punkt keine Lücke steht */ html body.wh-kanz-site.single-wh_magazin .mag-single-prose .mag-callout--warn a.mag-tel{display:inline;padding:13px 4px;margin-inline:-4px;color:var(--mag-warn-ink);font-weight:700;text-decoration:none;white-space:nowrap} html body.wh-kanz-site.single-wh_magazin .mag-single-prose .mag-callout--warn a.mag-tel > span{padding:1px 6px;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 1px #e7c9a6} html body.wh-kanz-site.single-wh_magazin .mag-single-prose .mag-callout--warn a.mag-tel:hover > span{background:#fbeedd} /* Links in Listenpunkten: Tippfläche nach oben und unten vergrößern, ohne die Zeile zu verändern */ html body.wh-kanz-site.single-wh_magazin .mag-single-prose li a:not(.wh-btn){padding-block:13px} html body.wh-kanz-site.single-wh_magazin .mag-single-prose .mag-sources li > a:only-child{padding-block:11px} html body.wh-kanz-site.single-wh_magazin .mag-single-prose .mag-callout--warn a:focus-visible{outline:2px solid var(--mag-warn-ink);outline-offset:2px} html body.wh-kanz-site.single-wh_magazin .mag-callout--warn + .mag-callout--warn{margin-top:-16px} @media (max-width:760px){ html body.wh-kanz-site.single-wh_magazin .mag-callout--warn{margin:36px 0 32px;padding:20px 20px 4px;border-left-width:3px} html body.wh-kanz-site.single-wh_magazin .mag-callout--warn ol > li{padding-left:36px} html body.wh-kanz-site.single-wh_magazin .mag-single-prose .mag-callout--warn > h2{padding-left:32px;font-size:20px} html body.wh-kanz-site.single-wh_magazin .mag-callout--warn > h2::before{width:22px;height:22px} } /* ---------- 7. Quellen: eigener, leiser Block am Ende ---------- */ html body.wh-kanz-site.single-wh_magazin .mag-sources{margin-top:56px;padding-top:28px;border-top:1px solid var(--border);font-size:15px;line-height:1.6;color:var(--muted)} html body.wh-kanz-site.single-wh_magazin .mag-single-prose .mag-sources > h2{margin:0 0 10px;font-size:17px;line-height:1.35;letter-spacing:0;color:var(--text)} html body.wh-kanz-site.single-wh_magazin .mag-sources :is(p,ul){max-width:42em;margin:0 0 12px;font-size:15px;line-height:1.6} html body.wh-kanz-site.single-wh_magazin .mag-sources ul li{margin:0;padding-left:20px;font-size:15px;line-height:1.5} html body.wh-kanz-site.single-wh_magazin .mag-sources ul li::before{top:1.15em;width:5px;height:5px;background:#8aa6b1} html body.wh-kanz-site.single-wh_magazin .mag-sources li > a:only-child{display:block;padding:11px 0} html body.wh-kanz-site.single-wh_magazin .mag-sources a{color:var(--primary-dark)} /* nur der Stand-Hinweis nach einer Quellenliste ist kleiner; ein einzelner Quellenabsatz bleibt bei 15 px */ html body.wh-kanz-site.single-wh_magazin .mag-sources p:not(:only-of-type):last-child, html body.wh-kanz-site.single-wh_magazin .mag-sources ul + p:last-child{margin-top:16px;font-size:14px} /* ---------- 8. Seitenspalte: Praxis-Karte mit Termin und "Passend zum Thema" ---------- */ html body.wh-kanz-site.single-wh_magazin .mag-kanz{display:grid;grid-template-columns:60px minmax(0,1fr);align-items:center;gap:14px 16px;padding:24px;background:var(--mag-tint);border:1px solid var(--border);border-radius:16px} html body.wh-kanz-site.single-wh_magazin .mag-kanz-img{grid-column:1;grid-row:2;width:60px;height:60px;object-fit:cover;object-position:center 18%;border-radius:50%;background:#e4eef2} html body.wh-kanz-site.single-wh_magazin .mag-kanz-text{display:contents} html body.wh-kanz-site.single-wh_magazin .mag-kanz-eyebrow{grid-column:1/-1;grid-row:1;margin:0 0 -2px;font-size:12px;font-weight:600;letter-spacing:.1em;line-height:1.45;text-transform:uppercase;color:var(--primary-dark)} html body.wh-kanz-site.single-wh_magazin .mag-kanz-name{grid-column:2;grid-row:2;margin:0;font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--text)} html body.wh-kanz-site.single-wh_magazin .mag-kanz-name a{color:inherit;text-decoration:none;white-space:normal} html body.wh-kanz-site.single-wh_magazin .mag-kanz-name a:hover{color:var(--primary-dark);text-decoration:underline;text-underline-offset:3px} html body.wh-kanz-site.single-wh_magazin .mag-kanz-name a:focus-visible{outline:2px solid var(--primary-dark);outline-offset:3px;border-radius:4px} html body.wh-kanz-site.single-wh_magazin .mag-kanz-addr{grid-column:1/-1;margin:0 0 4px;font-size:15px;line-height:1.5;color:var(--muted)} html body.wh-kanz-site.single-wh_magazin .mag-kanz-btns{grid-column:1/-1;display:grid;gap:10px} html body.wh-kanz-site.single-wh_magazin main .mag-kanz-btns .wh-btn{width:100%;justify-content:center;white-space:nowrap!important} html body.wh-kanz-site.single-wh_magazin .mag-kanz-btns .wh-btn:focus-visible{outline:3px solid var(--primary-dark);outline-offset:2px} /* "Passend zum Thema" (Plugin-Baustein) in der Seitenspalte: kompakte Zeilen statt breitem Band */ html body.wh-kanz-site.single-wh_magazin .mag-aside .wh-contextual-links{max-width:none;margin:0;padding:0;background:none;border:0} html body.wh-kanz-site.single-wh_magazin .mag-aside .wh-contextual-links__inner{max-width:none;margin:0;padding:20px 24px 12px;background:#fff;border:1px solid var(--border);border-radius:16px} html body.wh-kanz-site.single-wh_magazin .mag-aside .wh-contextual-links h2{margin:0 0 4px;font-size:12px;font-weight:600;letter-spacing:.1em;line-height:1.45;text-transform:uppercase;color:var(--muted)} html body.wh-kanz-site.single-wh_magazin .mag-aside .wh-contextual-links ul{display:block;margin:0;padding:0} html body.wh-kanz-site.single-wh_magazin .mag-aside .wh-contextual-links li{margin:0;padding:0} html body.wh-kanz-site.single-wh_magazin .mag-aside .wh-contextual-links li + li{border-top:1px solid var(--border)} html body.wh-kanz-site.single-wh_magazin .mag-aside .wh-contextual-links li::before{display:none} html body.wh-kanz-site.single-wh_magazin .mag-aside .wh-contextual-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;height:auto;padding:12px 0;background:none;border:0;border-radius:0;box-shadow:none;font-size:15.5px;font-weight:600;line-height:1.35;color:var(--primary-dark);text-decoration:none} html body.wh-kanz-site.single-wh_magazin .mag-aside .wh-contextual-links a:hover{color:var(--text);box-shadow:none} html body.wh-kanz-site.single-wh_magazin .mag-aside .wh-contextual-links a:focus-visible{outline:2px solid var(--primary-dark);outline-offset:2px;border-radius:6px} /* Handy und Tablet hoch: die Seitenspalte steht als Abschluss unter dem Text */ @media (min-width:761px) and (max-width:1024px){ html body.wh-kanz-site.single-wh_magazin .mag-aside{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start} html body.wh-kanz-site.single-wh_magazin .mag-aside > :only-child{grid-column:1/-1} html body.wh-kanz-site.single-wh_magazin .mag-kanz{align-content:start} /* Kasten nur so hoch wie sein Inhalt, auch bei nur einem oder zwei Links (Nacharbeit 01.11.) */ } @media (max-width:760px){ html body.wh-kanz-site.single-wh_magazin .mag-aside{gap:16px;margin-top:40px} html body.wh-kanz-site.single-wh_magazin .mag-kanz{padding:20px} html body.wh-kanz-site.single-wh_magazin :is(.mag-kanz-eyebrow,.mag-aside .wh-contextual-links h2){font-size:13px;letter-spacing:.08em} html body.wh-kanz-site.single-wh_magazin .mag-aside .wh-contextual-links__inner{padding:18px 20px 8px} } /* ---------- 9. Zurück-Link: unter der Lesespalte, gleiche Kante ---------- */ html body.wh-kanz-site.single-wh_magazin .mag-single-back{max-width:none!important;margin:48px 0 0;padding-top:28px;border-top:1px solid var(--border)} @media (min-width:1025px){html body.wh-kanz-site.single-wh_magazin .mag-layout > .mag-single-back{margin-top:44px}} @media (max-width:760px){html body.wh-kanz-site.single-wh_magazin .mag-single-back{margin-top:32px;padding-top:24px}} /* ---------- 10. Weiterlesen: Karten mit Bild, Links auf einer Linie ---------- */ html body.wh-kanz-site.single-wh_magazin .sp-related-card.has-img{padding:0;overflow:hidden} html body.wh-kanz-site.single-wh_magazin .sp-related-img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:#eef4f6;transition:transform .35s ease} html body.wh-kanz-site.single-wh_magazin .sp-related-card:hover .sp-related-img{transform:scale(1.02)} html body.wh-kanz-site.single-wh_magazin .sp-related-body{display:flex;flex-direction:column;flex:1 1 auto;min-width:0} html body.wh-kanz-site.single-wh_magazin .sp-related-card.has-img .sp-related-body{padding:22px var(--wz-card-pad) 20px} html body.wh-kanz-site.single-wh_magazin .sp-related-body p{flex:1 1 auto;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden} html body.wh-kanz-site.single-wh_magazin .sp-related-body .sp-related-link{margin-top:auto} @media (prefers-reduced-motion:reduce){html body.wh-kanz-site.single-wh_magazin .sp-related-img{transition:none}html body.wh-kanz-site.single-wh_magazin .sp-related-card:hover .sp-related-img{transform:none}} /* Tablet hoch: Karten untereinander (Grundlagen), Bild links, Text rechts */ @media (min-width:761px) and (max-width:1024px){ html body.wh-kanz-site.single-wh_magazin .sp-related-card.has-img{display:grid;grid-template-columns:minmax(0,34%) minmax(0,1fr);align-items:stretch} html body.wh-kanz-site.single-wh_magazin .sp-related-card.has-img .sp-related-img{height:100%;aspect-ratio:auto;min-height:168px} html body.wh-kanz-site.single-wh_magazin .sp-related-card.has-img .sp-related-body{padding:20px 24px} } /* Handy: kompakte Zeilen mit quadratischem Vorschaubild wie in der Magazinübersicht */ @media (max-width:760px){ html body.wh-kanz-site.single-wh_magazin .sp-related-grid{gap:12px} html body.wh-kanz-site.single-wh_magazin .sp-related-card{padding:20px} html body.wh-kanz-site.single-wh_magazin .sp-related-card.has-img{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:start;column-gap:16px;padding:20px} html body.wh-kanz-site.single-wh_magazin .sp-related-card.has-img .sp-related-img{width:88px;height:88px;aspect-ratio:1;border-radius:10px} html body.wh-kanz-site.single-wh_magazin .sp-related-card.has-img .sp-related-body{padding:0} html body.wh-kanz-site.single-wh_magazin .sp-related-card h3{font-size:17px;line-height:1.3;margin-bottom:6px} html body.wh-kanz-site.single-wh_magazin .sp-related-body p{font-size:15px;line-height:1.5;-webkit-line-clamp:2;margin-bottom:6px} html body.wh-kanz-site.single-wh_magazin .sp-related-link{min-height:32px} } /* ---------- 11. Druck: nur der Artikel ---------- */ @media print{ html body.wh-kanz-site.single-wh_magazin :is(.mag-toc,.mag-toc-m,.mag-aside,.mag-single-back,.sp-related){display:none!important} html body.wh-kanz-site.single-wh_magazin .mag-layout{display:block} } /* ===== 80-service.css ===== */ /* ===================================================================== A6 Service: Rechtsseiten, 404, Karriere, Online-Buchung (Einstieg), Zahnarzt-Notdienst. Feinschliff 01.11.2026. Baut auf den Variablen aus 10-grundlagen.css auf (--max-width, --pad-x, --wz-*). Breakpoints: Handy bis 760 · Tablet 761 bis 1199 (hoch bis 1024, quer ab 1025) · Computer ab 1200 · breit ab 1600. wz-booking.css lädt im Body, notfall.css vor dem Theme: dort gewinnen die Regeln über die höhere Spezifität (html body.wh-kanz-site ...). ===================================================================== */ /* ---------- 1. Rechtsseiten: Kopf und Lesetext ---------- */ /* Kopf an der Containerkante wie alle Unterseiten, H1 aus der normalen Skala statt fester 48 px */ html body.wh-kanz-site .sp-legal-hero{padding-top:48px;padding-bottom:48px;border-bottom:1px solid var(--border)} html body.wh-kanz-site .sp-legal-hero-inner{max-width:none;margin:0} html body.wh-kanz-site .sp-legal-hero .sp-hero-lead{max-width:60ch;margin-bottom:0} html body.wh-kanz-site main .sp-section.sp-legal-section{padding-top:clamp(40px,4.5vw,64px);padding-bottom:var(--wz-section-y)} @media (min-width:761px) and (max-width:1199px){html body.wh-kanz-site .sp-legal-hero{padding-top:40px;padding-bottom:40px}} @media (max-width:760px){ html body.wh-kanz-site .sp-legal-hero{padding-top:24px;padding-bottom:32px} html body.wh-kanz-site main .sp-section.sp-legal-section{padding-top:32px} } /* Lesetext: Fließtextgröße der Seite, ruhige Überschriften-Stufen, Wörter brechen mit Trennstrich */ html body.wh-kanz-site .sp-legal-body{max-width:var(--wz-measure);margin:0;font-size:var(--wz-fs-prose);overflow-wrap:break-word} html body.wh-kanz-site .sp-legal-body :is(p,ul,ol){font-size:var(--wz-fs-prose);line-height:1.75;color:#33454e;margin:0 0 16px} html body.wh-kanz-site main .sp-legal-body h2{font-size:clamp(22px,.9vw + 13px,26px);line-height:1.3;letter-spacing:-.015em;margin:56px 0 14px;hyphens:auto;-webkit-hyphens:auto;text-wrap:balance;scroll-margin-top:112px} html body.wh-kanz-site main .sp-legal-body h3{font-size:18px;line-height:1.4;letter-spacing:-.005em;margin:32px 0 8px} html body.wh-kanz-site main .sp-legal-body :is(.sp-legal-meta,.sp-legal-toc-mobile) + h2{margin-top:8px} html body.wh-kanz-site .sp-legal-body strong{font-weight:600;color:var(--text)} html body.wh-kanz-site .sp-legal-body a:not(.wh-btn){color:var(--primary-dark);text-decoration:underline;text-decoration-color:rgba(40,92,112,.4);text-underline-offset:3px;overflow-wrap:anywhere} html body.wh-kanz-site .sp-legal-body a:not(.wh-btn):hover{text-decoration-color:currentColor} html body.wh-kanz-site .sp-legal-body ul{list-style:none;padding-left:0} html body.wh-kanz-site .sp-legal-body ul > li{position:relative;padding-left:22px;margin-bottom:8px} html body.wh-kanz-site .sp-legal-body ul > li::before{content:"";position:absolute;left:3px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--primary)} @media (max-width:760px){ html body.wh-kanz-site main .sp-legal-body h2{font-size:22px;margin-top:44px} html body.wh-kanz-site main .sp-legal-body h3{font-size:17px;margin-top:28px} } /* Stand der Angaben als ruhige Marke über dem Text */ html body.wh-kanz-site .sp-legal-body .sp-legal-meta{margin:0 0 32px} html body.wh-kanz-site .sp-legal-body .sp-legal-meta p{display:inline-flex;align-items:center;gap:8px;margin:0;padding:6px 14px;border-radius:999px;background:#eef5f7;color:var(--primary-dark);font-size:14px;line-height:1.5} html body.wh-kanz-site .sp-legal-body .sp-legal-meta p::before{content:"";flex:none;width:15px;height:15px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='16' rx='2'/%3E%3Cpath d='M4 10h16M9 3v4M15 3v4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='16' rx='2'/%3E%3Cpath d='M4 10h16M9 3v4M15 3v4'/%3E%3C/svg%3E") center/contain no-repeat} html body.wh-kanz-site .sp-legal-body .sp-legal-meta em{font-style:normal} /* Seitenende: ein klarer Weiter-Knopf statt Pfeilzeichen-Link */ html body.wh-kanz-site .sp-legal-body .sp-legal-next{margin:56px 0 0;padding-top:28px;border-top:1px solid var(--border)} html body.wh-kanz-site .sp-legal-next .wh-btn{gap:10px} /* Tabellen (Cookies): Köpfe links, Namen in fester Breite, auf dem Handy als Karten */ html body.wh-kanz-site .sp-legal-body table{width:100%;table-layout:auto;border-collapse:separate;border-spacing:0;margin:16px 0 28px;font-size:15px;border:1px solid var(--border);border-radius:14px;overflow:hidden} html body.wh-kanz-site .sp-legal-body :is(th,td){padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border);overflow-wrap:break-word} html body.wh-kanz-site .sp-legal-body tbody tr:last-child td{border-bottom:0} html body.wh-kanz-site .sp-legal-body th{background:#f4f8fa;color:var(--muted);font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase} html body.wh-kanz-site .sp-legal-body td{color:#33454e;line-height:1.55} html body.wh-kanz-site .sp-legal-body td:first-child{white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;color:var(--text)} @media (max-width:600px){ html body.wh-kanz-site .sp-legal-body :is(table,tbody,tr,td){display:block;width:auto} html body.wh-kanz-site .sp-legal-body table{border:0;border-radius:0;overflow:visible} html body.wh-kanz-site .sp-legal-body thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} html body.wh-kanz-site .sp-legal-body tr{margin:0 0 12px;padding:12px 16px;border:1px solid var(--border);border-radius:14px;background:#fff} html body.wh-kanz-site .sp-legal-body tbody tr td, html body.wh-kanz-site .sp-legal-body tbody tr:last-child td{display:grid;grid-template-columns:120px minmax(0,1fr);column-gap:12px;padding:6px 0;border:0;white-space:normal} html body.wh-kanz-site .sp-legal-body td{hyphens:auto;-webkit-hyphens:auto} html body.wh-kanz-site .sp-legal-body td[data-label]::before{content:attr(data-label);padding-top:2px;color:var(--muted);font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase} html body.wh-kanz-site .sp-legal-body td:first-child{font-size:15px;overflow-wrap:anywhere} } /* ---------- 2. Datenschutz: Inhaltsübersicht ---------- */ /* Computer und Tablet quer: Übersicht als klebende Spalte links, Text in Lesebreite daneben */ html body.wh-kanz-site .sp-legal-toc{display:none} @media (min-width:1025px){ html body.wh-kanz-site .sp-legal-layout.has-toc{display:grid;grid-template-columns:minmax(232px,1fr) minmax(0,var(--wz-measure)) minmax(0,.4fr);column-gap:var(--wz-col-gap);align-items:start;font-size:var(--wz-fs-prose)} html body.wh-kanz-site .sp-legal-layout.has-toc > .sp-legal-body{max-width:none} html body.wh-kanz-site .sp-legal-toc{display:block;position:sticky;top:112px;max-height:calc(100vh - 136px);overflow:auto;overscroll-behavior:contain;padding:2px 4px 8px 0} html body.wh-kanz-site .sp-legal-toc-mobile{display:none} } @media (min-width:1025px) and (max-width:1199px){ html body.wh-kanz-site .sp-legal-layout.has-toc{grid-template-columns:minmax(220px,260px) minmax(0,var(--wz-measure))} /* Tablet quer ist ein Touch-Gerät: Einträge der Übersicht mit 44 px Tippfläche */ html body.wh-kanz-site .sp-legal-toc li > a{min-height:44px;padding-top:12px;padding-bottom:12px} } html body.wh-kanz-site .sp-legal-toc-title{margin:0 0 12px;font-size:12px;font-weight:600;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--primary-dark)} html body.wh-kanz-site .sp-legal-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--border)} html body.wh-kanz-site .sp-legal-toc li{margin:0} html body.wh-kanz-site .sp-legal-toc a{display:block;margin-left:-1px;padding:7px 0 7px 16px;border-left:2px solid transparent;color:var(--muted);font-size:14.5px;line-height:1.4;text-decoration:none;transition:color .2s ease,border-color .2s ease} html body.wh-kanz-site .sp-legal-toc a:hover{color:var(--primary-dark);border-left-color:var(--primary)} html body.wh-kanz-site :is(.sp-legal-toc,.sp-legal-toc-mobile) a:focus-visible, html body.wh-kanz-site .sp-legal-toc-mobile summary:focus-visible{outline:3px solid #216881;outline-offset:2px;border-radius:6px} /* Tablet und Handy: aufklappbare Übersicht über dem ersten Abschnitt */ html body.wh-kanz-site .sp-legal-body .sp-legal-toc-mobile{margin:0 0 36px;border:1px solid var(--border);border-radius:var(--wz-radius);background:#f8fbfc} html body.wh-kanz-site .sp-legal-toc-mobile summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 18px;font-size:15px;font-weight:600;color:var(--primary-dark);cursor:pointer;list-style:none} html body.wh-kanz-site .sp-legal-toc-mobile summary::-webkit-details-marker{display:none} html body.wh-kanz-site .sp-legal-toc-mobile summary::after{content:"";flex:0 0 14px;width:14px;height:14px;background:linear-gradient(var(--primary),var(--primary)) center/14px 2px no-repeat,linear-gradient(var(--primary),var(--primary)) center/2px 14px no-repeat} html body.wh-kanz-site .sp-legal-toc-mobile[open] summary::after{background-size:14px 2px,2px 0} html body.wh-kanz-site .sp-legal-body .sp-legal-toc-mobile ol{list-style:none;margin:0;padding:4px 18px 10px;border-top:1px solid var(--border)} html body.wh-kanz-site .sp-legal-toc-mobile li{margin:0;padding:0} html body.wh-kanz-site .sp-legal-body .sp-legal-toc-mobile a{display:flex;align-items:center;min-height:44px;padding:6px 0;border-bottom:1px solid #e3ecef;color:var(--text);font-size:15px;line-height:1.4;text-decoration:none} html body.wh-kanz-site .sp-legal-toc-mobile li:last-child a{border-bottom:0} /* ---------- 3. Impressum: Angaben als Karten in Spalten ---------- */ /* Computer drei, Tablet zwei, Handy eine Spalte. Spaltenfluss statt Zeilenraster: keine leeren Kartenenden */ html body.wh-kanz-site .sp-legal-body.sp-legal-body--cards{max-width:none} html body.wh-kanz-site .sp-legal-grid{column-count:3;column-gap:var(--wz-gap)} html body.wh-kanz-site .sp-legal-card{break-inside:avoid;margin:0 0 var(--wz-gap);padding:var(--wz-card-pad);border:1px solid var(--border);border-radius:var(--wz-radius);background:#fff} html body.wh-kanz-site .sp-legal-card:first-child{background:#f4f9fa;border-color:#cfe1e7} html body.wh-kanz-site main .sp-legal-body .sp-legal-card h2{margin:0 0 12px;font-size:19px;line-height:1.35;letter-spacing:-.01em;hyphens:manual;-webkit-hyphens:manual;text-wrap:pretty;scroll-margin-top:112px} html body.wh-kanz-site main .sp-legal-body .sp-legal-card h3{margin:20px 0 6px;font-size:16px;line-height:1.4} html body.wh-kanz-site .sp-legal-body .sp-legal-card :is(p,ul){font-size:16px;line-height:1.65;margin:0 0 12px} html body.wh-kanz-site .sp-legal-body .sp-legal-card ul > li{margin-bottom:4px} html body.wh-kanz-site .sp-legal-card > :last-child{margin-bottom:0} html body.wh-kanz-site .sp-legal-body--cards .sp-legal-next{margin-top:32px} @media (max-width:1199px){html body.wh-kanz-site .sp-legal-grid{column-count:2}} @media (max-width:760px){ html body.wh-kanz-site .sp-legal-grid{column-count:1} html body.wh-kanz-site .sp-legal-card{margin-bottom:12px} html body.wh-kanz-site .sp-legal-body .sp-legal-card :is(p,ul){font-size:16px} } /* ---------- 4. Fehlerseite 404 ---------- */ /* Füllt den Bildschirm bis zum Fuß (kein weißer Streifen), klarer Hauptknopf, ruhige 404 als Bildzeichen */ html body.wh-kanz-site.error404 #main-content{display:flex;flex-direction:column;min-height:min(calc(100svh - 120px),760px);background:linear-gradient(180deg,#f8fbfc 0%,#eef5f7 100%);border-bottom:1px solid var(--border)} html body.wh-kanz-site .wh-container.wh-404{position:relative;flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;width:100%;padding-top:clamp(56px,8vh,112px);padding-bottom:clamp(64px,10vh,128px);overflow:hidden} html body.wh-kanz-site .wh-404 > *{position:relative;z-index:1;max-width:620px} html body.wh-kanz-site .wh-404 .wh-eyebrow{margin:0 0 14px} html body.wh-kanz-site main .wh-404 h1{font-size:var(--wz-h1-hero);line-height:1.06;letter-spacing:-.035em;margin:0 0 20px} html body.wh-kanz-site .wh-404 p{font-size:var(--wz-fs-lead);line-height:1.65;color:var(--muted);margin:0 0 32px;text-wrap:pretty} html body.wh-kanz-site .wh-404 p a{color:var(--primary-dark);font-weight:500;text-decoration:underline;text-decoration-color:rgba(40,92,112,.35);text-underline-offset:3px;white-space:nowrap} html body.wh-kanz-site .wh-404 p a:hover{text-decoration-color:currentColor} html body.wh-kanz-site .wh-404 .wh-btn{gap:10px} @media (min-width:1025px){ html body.wh-kanz-site .wh-404::after{content:"404";content:"404"/"";position:absolute;right:var(--pad-x);top:50%;z-index:0;transform:translateY(-50%);font-family:var(--font-heading);font-size:clamp(200px,19vw,340px);font-weight:600;line-height:.9;letter-spacing:-.06em;padding-right:.06em;color:#e1edf1;pointer-events:none;user-select:none} html body.wh-kanz-site .wh-404 > *{max-width:min(620px,52%)} } @media (min-width:761px) and (max-width:1199px){html body.wh-kanz-site.error404 #main-content{min-height:600px}} @media (max-width:760px){ html body.wh-kanz-site.error404 #main-content{min-height:0} html body.wh-kanz-site .wh-container.wh-404{justify-content:flex-start;padding-top:48px;padding-bottom:56px} html body.wh-kanz-site .wh-404 .wh-btn{width:100%} } /* ---------- 5. Karriere ---------- */ /* Ankerleiste: Handy und Tablet randlos wischbar, Computer klebend unter dem Kopf */ html body.wh-kanz-site .career-anchor-nav .team-anchor-nav-inner{gap:10px} @media (max-width:1024px){ html body.wh-kanz-site .career-anchor-nav .team-anchor-nav-inner{margin-inline:calc(var(--pad-x) * -1);padding-inline:var(--pad-x);scroll-padding-inline:var(--pad-x)} } @media (max-width:760px){ html body.wh-kanz-site .career-anchor-nav .team-anchor-nav-inner{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)} html body.wh-kanz-site .career-anchor-nav a{font-size:14.5px} } @media (min-width:1025px){ html body.wh-kanz-site .career-anchor-nav{position:sticky;top:84px;z-index:60;padding:10px 0;background:rgba(255,255,255,.95);-webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px)} html body.wh-kanz-site.page-id-41 main section[id]{scroll-margin-top:164px} } /* Warum Weberhaus: ruhige Zahlenleiste, deutlich anders als die Vorteil-Karten darunter */ html body.wh-kanz-site :is(.career-why-grid,.career-benefits-grid,.career-jobs){margin-top:0} html body.wh-kanz-site .career-why-grid > .career-why-card{position:relative;padding:28px 8px 0 0;background:none;border:0;border-top:1px solid #cfdfe5;border-radius:0;box-shadow:none;transform:none} html body.wh-kanz-site .career-why-grid > .career-why-card::before{content:"";position:absolute;left:0;top:-1px;width:44px;height:2px;background:var(--primary)} html body.wh-kanz-site .career-why-card .career-why-num{display:block;margin:0 0 12px;font-size:13px;letter-spacing:.1em;color:var(--primary-dark);font-variant-numeric:tabular-nums} html body.wh-kanz-site .career-why-card h3{margin:0 0 8px} html body.wh-kanz-site .career-why-card p{color:var(--muted)} @media (max-width:760px){ html body.wh-kanz-site .career-why-grid{gap:0} html body.wh-kanz-site .career-why-grid > .career-why-card{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:12px;padding:20px 0} html body.wh-kanz-site .career-why-card .career-why-num{grid-row:1/span 2;margin:4px 0 0} html body.wh-kanz-site .career-why-grid > .career-why-card:last-child{padding-bottom:0} } /* Vorteile: Symbol links, Text rechts. Kürzere Karten, gleiche Innenabstände, kein Anheben (keine Links) */ html body.wh-kanz-site .career-benefits-grid > .career-benefit{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:18px;align-content:start;box-shadow:none;transform:none} html body.wh-kanz-site .career-benefits-grid > .career-benefit:hover{transform:none;box-shadow:none;border-color:var(--border)} html body.wh-kanz-site .career-benefit .career-benefit-ico{grid-row:1/span 2;width:48px;height:48px;margin:0;border-radius:12px;background:#eaf3f6;color:var(--primary-dark)} html body.wh-kanz-site .career-benefit-ico svg{width:24px;height:24px} html body.wh-kanz-site .career-benefit h3{margin:3px 0 6px} html body.wh-kanz-site .career-benefit p{color:var(--muted)} @media (max-width:760px){ html body.wh-kanz-site .career-benefits-grid{gap:12px} html body.wh-kanz-site .career-benefits-grid > .career-benefit{grid-template-columns:44px minmax(0,1fr);column-gap:16px} html body.wh-kanz-site .career-benefit .career-benefit-ico{width:44px;height:44px} html body.wh-kanz-site .career-benefit h3{margin-top:1px} } /* Stellen: in jeder Karte eine linke Kante (Nummer neben dem Bereich, Titel darunter), Knopf unter den Stichpunkten; ab Tablet quer zwei Stellen nebeneinander mit bündigen Zeilen */ html body.wh-kanz-site .career-jobs{gap:var(--wz-gap)} html body.wh-kanz-site .career-jobs > .career-job{display:flex;flex-direction:column;padding:var(--wz-card-pad);border-radius:var(--wz-radius);box-shadow:none} html body.wh-kanz-site .career-jobs > .career-job:hover{box-shadow:none;border-color:#b6cad2} html body.wh-kanz-site .career-job .career-job-head{display:contents} html body.wh-kanz-site .career-job .career-job-head-left{order:1;display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;align-items:center} html body.wh-kanz-site .career-job .career-job-head-left > div{display:contents} html body.wh-kanz-site .career-job .career-job-num{width:40px;height:40px;font-size:14px;border:0;box-shadow:none;background:#eaf3f6;color:var(--primary-dark)} html body.wh-kanz-site .career-job .career-job-subtitle{grid-column:2;margin:0;font-size:13px;letter-spacing:.08em;color:var(--primary-dark)} html body.wh-kanz-site .career-job .career-job-title{grid-column:1/-1;margin:16px 0 12px;font-size:clamp(21px,1.5vw,25px);line-height:1.25;overflow-wrap:break-word} html body.wh-kanz-site .career-job .career-job-tags{grid-column:1/-1} html body.wh-kanz-site .career-job .career-job-tag{padding:6px 12px;font-size:13px;color:var(--text);background:#f4f8fa} html body.wh-kanz-site .career-job .career-job-short{order:2;max-width:62ch;margin:20px 0 16px;font-size:16px;line-height:1.65;color:#33454e} html body.wh-kanz-site .career-job .career-job-highlights{order:3;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:0} html body.wh-kanz-site .career-job .career-job-highlight{align-items:flex-start;font-size:15px;line-height:1.45} html body.wh-kanz-site .career-job .career-job-highlight svg{margin-top:-1px} html body.wh-kanz-site .career-job .career-job-head-right{order:4;width:auto;margin-top:24px} html body.wh-kanz-site .career-job .career-job-details{order:5;margin-top:24px} html body.wh-kanz-site .career-job .career-job-details-toggle{min-height:44px;padding:10px 0 0;font-size:15px} html body.wh-kanz-site .career-job .career-job-details-col ul li{font-size:15px;line-height:1.55} html body.wh-kanz-site .career-job .career-job-details-foot-lbl{font-size:12px} html body.wh-kanz-site .career-job .career-job-details-foot-val{font-size:15px} @media (min-width:761px) and (max-width:1024px){ html body.wh-kanz-site .career-job .career-job-highlights{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 24px} } @media (min-width:1025px){ html body.wh-kanz-site .career-jobs:has(> .career-job:nth-child(2)){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--wz-gap)} html body.wh-kanz-site .career-jobs:has(> .career-job:nth-child(2)) > .career-job{display:grid;grid-template-rows:subgrid;grid-row:span 5;row-gap:0;align-content:start} html body.wh-kanz-site .career-jobs:has(> .career-job:nth-child(2)) .career-job-head-right{align-self:end} html body.wh-kanz-site .career-jobs:has(> .career-job:nth-child(2)) .career-job-details{align-self:start} html body.wh-kanz-site .career-jobs:has(> .career-job:nth-child(2)) .career-job-details-body{grid-template-columns:minmax(0,1fr);gap:24px} } @media (max-width:760px){ html body.wh-kanz-site .career-job .career-job-num{width:36px;height:36px;font-size:13px} html body.wh-kanz-site .career-job .career-job-head-left{grid-template-columns:36px minmax(0,1fr);column-gap:12px} html body.wh-kanz-site .career-job .career-job-title{margin-top:14px;font-size:21px} html body.wh-kanz-site .career-job .career-job-head-right{margin-top:20px} } /* Online-Bewerbung: ab Tablet quer zweispaltig (Kopf und Telefon links, Formular rechts), sonst mittig darüber */ html body.wh-kanz-site .career-apply-intro .career-apply-phone{margin:20px 0 0;padding:0;font-size:16px;line-height:1.5;color:var(--muted)} html body.wh-kanz-site .career-apply-intro .career-apply-phone a{display:inline-flex;align-items:center;min-height:44px;margin-left:4px;border:0;font-size:17px;font-weight:600;color:var(--primary-dark);font-variant-numeric:tabular-nums} html body.wh-kanz-site .career-apply-intro .career-apply-phone a:hover{text-decoration:underline;text-underline-offset:3px} @media (min-width:1025px){ html body.wh-kanz-site #online-bewerbung > .wh-container{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--wz-col-gap);align-items:start} html body.wh-kanz-site .career-apply-intro{position:sticky;top:164px} html body.wh-kanz-site .career-apply-intro .wh-section-head{max-width:none;margin:0;text-align:left} html body.wh-kanz-site .career-apply-intro .career-apply-phone{margin-top:32px;padding-top:20px;border-top:1px solid var(--border);text-align:left} html body.wh-kanz-site #online-bewerbung .career-form{max-width:none;margin:0} } @media (max-width:1024px){ html body.wh-kanz-site .career-apply-intro{max-width:740px;margin:0 auto var(--wz-head-gap);text-align:center} html body.wh-kanz-site .career-apply-intro .wh-section-head{margin-bottom:0} html body.wh-kanz-site #online-bewerbung .career-form{max-width:880px;margin:0 auto} } @media (max-width:760px){ html body.wh-kanz-site .career-apply-intro{margin-inline:0;text-align:left} /* Telefonhinweis bündig mit dem linksbündigen Kopf (style.css zentriert .career-form-phone-hint) */ html body.wh-kanz-site .career-apply-intro .career-apply-phone{text-align:left} } /* Formular: ein Kartenmaß, gleiche Feldabstände, lesbare Hinweise, Kästchen auf der ersten Textzeile */ html body.wh-kanz-site .career-form{padding:var(--wz-card-pad);border-radius:var(--wz-radius);box-shadow:none} @media (min-width:1200px){html body.wh-kanz-site .career-form{padding:calc(var(--wz-card-pad) + 8px)}} html body.wh-kanz-site .career-form .career-form-grid{gap:20px;margin-bottom:20px} html body.wh-kanz-site .career-form .career-form-grid .career-form-field{margin:0} html body.wh-kanz-site .career-form .career-form-field{gap:8px;margin-bottom:20px} html body.wh-kanz-site .career-form .career-form-label{font-size:14px} html body.wh-kanz-site .career-form :is(input,select,textarea):focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(54,123,148,.3)} html body.wh-kanz-site .career-form .career-form-files{margin-bottom:24px} html body.wh-kanz-site .career-form .career-form-drop-h{font-size:16px} html body.wh-kanz-site .career-form .career-form-drop-sub{font-size:14px;line-height:1.5} html body.wh-kanz-site .career-form .career-form-checkbox{align-items:flex-start;gap:12px;margin-bottom:24px;padding-block:4px;font-size:15px;line-height:1.55;color:#33454e} html body.wh-kanz-site .career-form .career-form-checkbox input[type=checkbox]{flex:0 0 22px;width:22px;height:22px;min-height:0;margin:1px 0 0} html body.wh-kanz-site .career-form .career-form-checkbox a{color:var(--primary-dark)} html body.wh-kanz-site .career-form .career-form-foot{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px 24px} html body.wh-kanz-site .career-form .career-form-foot-note{max-width:none;min-width:0;margin:0;font-size:14px;line-height:1.55;text-align:left;color:var(--muted)} @media (max-width:760px){ html body.wh-kanz-site .career-form .career-form-grid{grid-template-columns:minmax(0,1fr)} html body.wh-kanz-site .career-form .career-form-foot{grid-template-columns:minmax(0,1fr)} html body.wh-kanz-site .career-form .career-form-drop{padding:24px 16px} } /* ---------- 6. Online-Buchung: Einstieg /termin/ und /termin-dr-kanz/ (nur CSS) ---------- */ /* Kanten wie Kopf und Fuß, lesbare Graustufe (4,9:1 statt 2,9:1) */ html body.wh-kanz-site .wh-termin-wrap.wh-booking{--bk-soft:#5f727b;padding-left:var(--pad-x);padding-right:var(--pad-x)} html body.wh-kanz-site .wh-termin-wrap.wh-booking :is(.wh-group-text small,.wh-svc-desc,.wh-callback-card small,.wh-prophy-role,.wh-prophy-note){font-size:15px;line-height:1.45} html body.wh-kanz-site .wh-termin-wrap.wh-booking .wh-booking-location{text-wrap:balance} html body.wh-kanz-site .wh-termin-wrap.wh-booking .wh-booking-outlook-list small{font-size:13.5px;line-height:1.4} html body.wh-kanz-site .wh-termin-wrap.wh-booking .wh-booking-outlook-note{font-size:14px;line-height:1.45} html body.wh-kanz-site .wh-termin-wrap.wh-booking :is(.wh-booking-kicker,.wh-booking-side-title){font-size:12.5px} /* Abbrechen: Kreuz statt Haus (das Haus las sich wie "Startseite") */ html body.wh-kanz-site .wh-termin-wrap.wh-booking .wh-flow-cancel-icon svg{display:none} html body.wh-kanz-site .wh-termin-wrap.wh-booking .wh-flow-cancel-icon::before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/contain no-repeat} /* Handy: erste Zeile mit Dr. Larissa Kanz links und Abbrechen rechts, Leisten randlos bis zum Bildschirmrand */ @media (max-width:599px){ html body.wh-kanz-site .wh-termin-wrap.wh-booking :is(.wh-flow-top,.wh-step-nav){margin-left:calc(var(--pad-x) * -1);margin-right:calc(var(--pad-x) * -1);padding-left:var(--pad-x);padding-right:var(--pad-x)} html body.wh-kanz-site .wh-termin-wrap.wh-booking .wh-flow-top:has(.wh-flow-actions[hidden]) .wh-flow-brand{display:flex!important;grid-column:1/3;grid-row:1;align-items:center;gap:10px;min-width:0} html body.wh-kanz-site .wh-termin-wrap.wh-booking .wh-flow-photo{display:block;flex:0 0 40px;width:40px;height:40px;overflow:hidden;border-radius:50%;background:var(--bk-tint)} html body.wh-kanz-site .wh-termin-wrap.wh-booking .wh-flow-avatar{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%} html body.wh-kanz-site .wh-termin-wrap.wh-booking .wh-flow-identity{min-width:0} html body.wh-kanz-site .wh-termin-wrap.wh-booking .wh-flow-identity > div{display:flex;flex-direction:column;line-height:1.25} html body.wh-kanz-site .wh-termin-wrap.wh-booking .wh-flow-name{font-size:15.5px;font-weight:600;color:var(--bk-ink);white-space:nowrap} html body.wh-kanz-site .wh-termin-wrap.wh-booking .wh-flow-name-short{display:none} html body.wh-kanz-site .wh-termin-wrap.wh-booking .wh-flow-eyebrow{font-size:13px;color:var(--bk-muted)} html body.wh-kanz-site .wh-termin-wrap.wh-booking .wh-progress-caption{font-size:14px} } @media (max-width:389px){ html body.wh-kanz-site .wh-termin-wrap.wh-booking .wh-flow-cancel{padding-right:12px;font-size:14.5px} html body.wh-kanz-site .wh-termin-wrap.wh-booking .wh-flow-name{font-size:15px} } /* Ab 600: Schrittzahl genau mittig über der Karte, egal ob Zurück sichtbar ist */ @media (min-width:600px){ html body.wh-kanz-site .wh-termin-wrap.wh-booking{max-width:var(--max-width)} html body.wh-kanz-site .wh-termin-wrap.wh-booking .wh-flow-top{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)} html body.wh-kanz-site .wh-termin-wrap.wh-booking .wh-flow-actions{justify-self:start} html body.wh-kanz-site .wh-termin-wrap.wh-booking .wh-flow-cancel{justify-self:end} } /* Tablet: Praxis und Terminlage als kompakte Karte über der Buchung (vorher fehlte beides). Die drei Terminlagen stehen nebeneinander, die leere Auswahl-Liste entfällt hier. */ @media (min-width:600px) and (max-width:999px){ html body.wh-kanz-site .wh-termin-wrap.wh-booking .wh-booking-sidebar{display:block;margin:0 0 20px;padding:20px 24px;border:1.5px solid var(--bk-line);border-radius:22px;background:#fff} html body.wh-kanz-site .wh-termin-wrap.wh-booking .wh-booking-outlook{margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--bk-line)} html body.wh-kanz-site .wh-termin-wrap.wh-booking .wh-booking-outlook-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 24px} html body.wh-kanz-site .wh-termin-wrap.wh-booking .wh-booking-side-title{margin-bottom:6px} html body.wh-kanz-site .wh-termin-wrap.wh-booking .wh-booking-outlook-lead{margin:0 0 12px} html body.wh-kanz-site .wh-termin-wrap.wh-booking .wh-booking-outlook-lead b{display:inline;font-size:15px} html body.wh-kanz-site .wh-termin-wrap.wh-booking .wh-booking-outlook-note{margin-top:14px} html body.wh-kanz-site .wh-termin-wrap.wh-booking .wh-booking-side-summary{display:none} } /* Computer: Breite und Kante wie die übrigen Seiten; in Schritt 1 ohne leere Auswahl-Liste */ @media (min-width:1000px){ html body.wh-kanz-site .wh-termin-wrap.wh-booking{padding-top:56px;padding-bottom:80px} html body.wh-kanz-site .wh-termin-wrap.wh-booking .wh-booking-layout{grid-template-columns:minmax(300px,340px) minmax(0,1fr);gap:32px} html body.wh-kanz-site .wh-termin-wrap.wh-booking .wh-booking-layout:has(.wh-step.active[data-step="2"]) .wh-booking-side-summary{display:none} html body.wh-kanz-site .wh-termin-wrap.wh-booking :is(.wh-group-text small,.wh-svc-desc,.wh-callback-card small,.wh-prophy-role,.wh-prophy-note){font-size:14.5px} } @media (min-width:1600px){ html body.wh-kanz-site .wh-termin-wrap.wh-booking .wh-booking-layout{grid-template-columns:360px minmax(0,1fr);gap:40px} } /* ---------- 7. Zahnarzt-Notdienst (Plugin-Seite) ---------- */ /* Rhythmus, Schrift und Knöpfe wie auf den Praxisseiten; Container kommt aus 10-grundlagen.css */ html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-section{padding-top:var(--wz-section-y);padding-bottom:var(--wz-section-y)} html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-section.wh-nd-section--related{padding-top:24px} html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-eyebrow{gap:0;font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--primary-dark)} html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-eyebrow::before{display:none} html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-eyebrow.wh-nd-eyebrow--light{color:#a9d8ed} /* Kleine Beschriftungen (Hinweis-Kicker, Kartenetiketten, Nummern) nicht unter 12 px */ html body.wh-kanz-site.wh-nd-page .wh-nd :is(.wh-nd-triage-kicker,.wh-nd-related-card > span,.wh-nd-essential-number,.wh-nd-help-icon,.wh-nd-steps li > span){font-size:12px} html body.wh-kanz-site.wh-nd-page main .wh-nd .wh-nd-triage--danger h2{font-size:clamp(22px,1.9vw,27px);line-height:1.22;letter-spacing:-.015em} html body.wh-kanz-site.wh-nd-page main .wh-nd .wh-nd-finder-panel h2{font-size:clamp(28px,2.4vw,36px);line-height:1.15} html body.wh-kanz-site.wh-nd-page main .wh-nd .wh-nd-embed-head h2{font-size:clamp(20px,1.8vw,26px)} html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-section-head > p{font-size:var(--wz-fs-head-p);line-height:1.6} /* Abschnittsköpfe am Computer zweispaltig: Titel links, Einleitung rechts (statt 650 px Leerfläche) */ @media (min-width:1200px){ html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-section > .wh-nd-container > .wh-nd-section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--wz-col-gap);align-items:end;max-width:none;margin-bottom:var(--wz-head-gap)} html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-section > .wh-nd-container > .wh-nd-section-head > :is(.wh-nd-eyebrow,h2){grid-column:1} html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-section > .wh-nd-container > .wh-nd-section-head > p{grid-column:2;grid-row:1/span 2;max-width:62ch;margin:0} } /* Karten: ein Radius, Text 15,5 px, runde Punkte statt strichartiger Balken */ html body.wh-kanz-site.wh-nd-page .wh-nd :is(.wh-nd-essential-card,.wh-nd-help-card,.wh-nd-related-card,.wh-nd-steps){border-radius:18px} html body.wh-kanz-site.wh-nd-page .wh-nd :is(.wh-nd-essential-card p,.wh-nd-essential-card li,.wh-nd-help-card li,.wh-nd-steps p,.wh-nd-related-card p){font-size:15.5px;line-height:1.6} html body.wh-kanz-site.wh-nd-page .wh-nd :is(.wh-nd-essential-card,.wh-nd-help-card) li{padding-left:20px} html body.wh-kanz-site.wh-nd-page .wh-nd :is(.wh-nd-essential-card,.wh-nd-help-card) li::before{left:2px;top:.66em;width:6px;height:6px;border-radius:50%;background:var(--primary)} html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-essential-card--wide p{max-width:75ch} /* Breite Karte am Computer: Titel links, Text rechts in Lesebreite (statt Absatz in zwei Textspalten mitten im Satz). 44px 1fr 1fr mit 18 px Abstand setzt den Text genau auf die Innenkante der Karte darüber (Rastergap 18 px, Polster 31 px). */ @media (min-width:1200px){ html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-essential-card--wide{grid-template-columns:44px minmax(0,1fr) minmax(0,1fr);column-gap:18px} html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-essential-card--wide > div{display:contents} html body.wh-kanz-site.wh-nd-page main .wh-nd .wh-nd-essential-card--wide h3{grid-column:2;margin:7px 0 0} html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-essential-card--wide p{grid-column:3;max-width:none;margin:7px 0 0} } html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-medication-note{padding:18px max(22px,calc(100% - 92ch)) 18px 22px;font-size:15px;line-height:1.6} html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-legal-note{padding-right:max(0px,calc(100% - 100ch));font-size:13.5px} html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-hours > p{font-size:13.5px} /* Sprechzeiten: Tag links, Zeit rechts auf jeder Größe; Heute-Zeile mit Luft an den Rändern */ html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-hours > [data-days]{grid-template-columns:minmax(96px,max-content) minmax(0,1fr);gap:12px;align-items:center;font-size:14.5px} html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-hours > [data-days] dd{text-align:right} html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-hours .wh-hours-day-label{flex-direction:row;align-items:center;gap:8px;padding-left:0} html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-hours > [data-days].is-today{margin-inline:-10px;padding-inline:10px;border-bottom-color:transparent} /* Heute-Marke wie in der Fußzeile (12 px statt 10,5 px) */ html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-hours .wh-hours-today-tag{font-size:12px!important;font-weight:700!important;letter-spacing:.07em;line-height:1.4;padding:2px 7px;border-radius:6px;color:var(--primary-dark);background:#cfe3ea} /* Knöpfe wie .wh-btn: Radius 12, 48 px, kräftige Schrift, kein Schlagschatten */ html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-button{min-height:48px;padding:12px 24px;border-radius:12px;font-weight:600;line-height:1.25;text-align:center;box-shadow:none;transform:none} html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-button--primary{background:var(--primary);border-color:var(--primary);color:#fff} html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-button--primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);color:#fff;box-shadow:none} html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-button--quiet{background:#fff;border-color:#b6cad2;color:var(--primary-dark)} html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-button--quiet:hover{background:#f2f7f9;border-color:var(--primary-dark);color:var(--primary-dark)} html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-button:hover{transform:none} /* Verweis zur Suche im dunklen Kasten als echter Knopf */ html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-triage--calm a{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid rgba(255,255,255,.45);border-radius:12px;font-weight:600} html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-triage--calm a:hover{background:rgba(255,255,255,.1);border-color:#fff} /* Tablet quer: schmale Spalte, Knopf unter den Text statt daneben (vorher fünf gequetschte Zeilen) */ @media (min-width:1081px) and (max-width:1279px){ html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-triage--calm{display:flex;flex-direction:column;align-items:flex-start;gap:14px} } /* Brotkrumen und kleine Links: 44 px Tippfläche, Umbruch nur zwischen den Gliedern */ html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-crumbs{flex-wrap:wrap;column-gap:8px;row-gap:0;margin-bottom:24px;font-size:13px} html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-crumbs a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;color:var(--primary-dark)} html body.wh-kanz-site.wh-nd-page .wh-nd :is(.wh-nd-related-all,.wh-nd-source-link){display:inline-flex;align-items:center;min-height:44px} html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-finder-facts a{display:inline-flex;align-items:center;align-self:flex-start;min-height:44px} /* Suchmodul: kein dunkler Rand um die helle Fläche, lesbare Hinweise */ html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-finder{border:0} html body.wh-kanz-site.wh-nd-page .wh-nd :is(.wh-nd-search-help,.wh-nd-finder-facts span,.wh-nd-finder-facts small){font-size:13.5px;color:rgba(226,240,246,.86)} html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-search-status{font-size:13.5px} html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-search label{font-size:14px} html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-finder-facts strong{text-wrap:balance} /* Außenlink-Symbol als klares Pfeilzeichen, nicht mehr an der Kante angeschnitten */ html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-sources a{align-items:center;padding-right:4px} html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-external-icon{width:15px;height:15px;margin:0 0 0 6px;border:0;background:currentColor;vertical-align:-2px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center/contain no-repeat} html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-external-icon::after{display:none} /* FAQ bis zur Containerkante (die .sp-faq-Regel aus style.css setzte Auto-Ränder) */ html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-faq{max-width:none;margin:0} /* Tablet: Suchmodul einspaltig ohne Deko-Karte, Ratgeber-Karten dreispaltig statt drei hoher Streifen */ @media (max-width:1080px){ html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-finder{grid-template-columns:minmax(0,1fr);min-height:0} html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-finder-map{display:none} } @media (min-width:761px) and (max-width:1080px){ html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-related-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-related-card{min-height:0;padding:22px} html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-related-card h3{font-size:18px;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word} } /* Handy: Nummer neben der Überschrift statt darüber, gleiche Innenabstände, Seite deutlich kürzer */ @media (max-width:760px){ html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-crumbs > :nth-last-child(-n+2){display:none} html body.wh-kanz-site.wh-nd-page .wh-nd :is(.wh-nd-help-grid,.wh-nd-essentials-grid){gap:12px} html body.wh-kanz-site.wh-nd-page .wh-nd :is(.wh-nd-help-card,.wh-nd-essential-card,.wh-nd-essential-card--wide){display:grid;grid-template-columns:36px minmax(0,1fr);gap:0 14px;align-items:center;padding:20px} html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-essential-card--wide > div{display:contents} html body.wh-kanz-site.wh-nd-page .wh-nd :is(.wh-nd-help-icon,.wh-nd-essential-number){width:36px;height:36px;margin:0} html body.wh-kanz-site.wh-nd-page .wh-nd :is(.wh-nd-help-card,.wh-nd-essential-card) h3{margin:0;font-size:19px;line-height:1.3} html body.wh-kanz-site.wh-nd-page .wh-nd :is(.wh-nd-help-card,.wh-nd-essential-card) :is(ul,p){grid-column:1/-1;margin-top:12px} html body.wh-kanz-site.wh-nd-page .wh-nd :is(.wh-nd-essential-card p,.wh-nd-essential-card li,.wh-nd-help-card li,.wh-nd-steps p,.wh-nd-related-card p){font-size:15.5px} html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-steps li{grid-template-columns:36px minmax(0,1fr);gap:0 14px;align-items:center;padding:20px} html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-steps li > div{display:contents} html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-steps li > span{width:36px;height:36px} html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-steps h3{grid-column:2;margin:0;font-size:19px;line-height:1.3} html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-steps p{grid-column:1/-1;margin-top:12px} html body.wh-kanz-site.wh-nd-page .wh-nd :is(.wh-nd-triage,.wh-nd-finder-panel,.wh-nd-related-card,.wh-nd-practice-card){padding:22px 20px} html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-triage--calm a{width:100%} html body.wh-kanz-site.wh-nd-page .wh-nd :is(.wh-nd-search-help,.wh-nd-finder-facts span,.wh-nd-finder-facts small,.wh-nd-search-status){font-size:14px} html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-medication-note{padding:16px 18px} /* Sprechzeiten wie in der Fußzeile: Tag links, Zeitfenster rechts untereinander (statt Tag über Zeit, halb so lang) */ html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-hours{padding:16px} html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-hours > [data-days]{grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding-block:10px} html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-hours > [data-days] dd{text-align:right} html body.wh-kanz-site.wh-nd-page .wh-nd .wh-nd-legal-note{font-size:14px} } /* ===== 90-nacharbeit.css ===== */ /* Nacharbeit 01.11.2026: Öffnungszeiten mit zwei Zeitfenstern je Tag (Elemente .wz-t). Am Computer und Tablet in einer Zeile mit Trennpunkt, am Handy untereinander ohne Punkt. In der Fußzeile immer untereinander, weil die Spalte schmal ist. */ html body.wh-kanz-site .wz-t{white-space:nowrap} html body.wh-kanz-site .wz-t + .wz-t::before{content:"\00a0·\00a0"} html body.wh-kanz-site .wh-footer .wz-t{display:block} html body.wh-kanz-site .wh-footer .wz-t + .wz-t::before{content:none} @media (max-width:760px){ html body.wh-kanz-site .wz-t{display:block} html body.wh-kanz-site .wz-t + .wz-t::before{content:none} } /* Standort, Tablet quer (1025 bis 1199): drei Karten nebeneinander sind dort schmal; Zeitfenster untereinander, damit Dienstag nicht über den Kartenrand läuft. */ @media (min-width:1025px) and (max-width:1199px){ html body.wh-kanz-site .hp-anf-hours .wz-t{display:block} html body.wh-kanz-site .hp-anf-hours .wz-t + .wz-t::before{content:none} } /* Magazinartikel, Tablet hoch: Praxis-Karte und "Passend zum Thema" untereinander in voller Breite, damit neben der höheren Praxis-Karte keine leere Fläche bleibt. */ @media (min-width:761px) and (max-width:1024px){ html body.wh-kanz-site.single-wh_magazin .mag-aside{grid-template-columns:minmax(0,1fr)} html body.wh-kanz-site.single-wh_magazin .mag-aside > *{grid-column:1 / -1} } /* "Mehr dazu im Magazin" auf Tablet quer wie am Computer dreispaltig, passend zu "Weitere Behandlungen" darunter. */ @media (min-width:1025px) and (max-width:1199px){ html body.wh-kanz-site .wz-mag-grid{grid-template-columns:repeat(3,minmax(0,1fr))} html body.wh-kanz-site .wz-mag-card:last-child:nth-child(odd){grid-column:auto;grid-template-columns:none;column-gap:0} } /* Zahntechnik (Seite 238) hat keine Behandlungs-Reiter: Weiterlesen am Handy trotzdem als kompakte Zeilen wie auf den übrigen Behandlungsseiten. */ @media (max-width:760px){ html body.wh-kanz-site.page-id-238 main .sp-related-card{display:grid;grid-template-columns:minmax(0,1fr) 20px;column-gap:16px;align-items:center;height:auto;padding:18px 20px} html body.wh-kanz-site.page-id-238 main .sp-related-card h3{grid-column:1;margin:0;font-size:18px} html body.wh-kanz-site.page-id-238 main .sp-related-card p{grid-column:1;margin:4px 0 0} html body.wh-kanz-site.page-id-238 main .sp-related-link{grid-column:2;grid-row:1/span 2;align-self:center;min-height:0;margin:0;padding:0;font-size:0;line-height:0} html body.wh-kanz-site.page-id-238 main .sp-related-link::after{ content:"";width:18px;height:18px;background:var(--primary); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat; } } /* Karte auf /startseite/ (01.11.2026): lädt erst mit Zustimmung zu externen Medien. Ohne Zustimmung eine ruhige Fläche mit Knopf "Karte laden"; sobald die Karte geladen ist (iframe hat src), verschwindet die Fläche. */ html body.wh-kanz-site .hp-anf-map-load{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;margin:0;border:0;background:radial-gradient(circle at 50% 42%,#ffffff 0,#eef5f7 55%,#e3eef2 100%);color:var(--text);font:inherit;text-align:center;cursor:pointer} html body.wh-kanz-site .hp-anf-map-load-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:12px;background:var(--primary-dark,#285c70);color:#fff;font-size:16px;font-weight:600} html body.wh-kanz-site .hp-anf-map-load:hover .hp-anf-map-load-btn{background:var(--primary,#367b94)} html body.wh-kanz-site .hp-anf-map-load:focus-visible{outline:3px solid var(--primary-dark,#285c70);outline-offset:-3px} html body.wh-kanz-site .hp-anf-map-load small{max-width:34ch;font-size:14px;line-height:1.45;color:var(--muted)} html body.wh-kanz-site .hp-anf-map iframe[src] ~ .hp-anf-map-load{display:none} /* Zugang zur Praxis (01.11.2026): 2. Stock, kein Aufzug. a) Kurzhinweis bei der Adresse (Standort, Kontakt, Startseite): ruhige Marke mit Treppensymbol, Fläche wie die Symbolkacheln. b) Kasten "Zugang zur Praxis" auf /standort/ direkt unter den Anfahrtskarten, gleiche Karte wie Adresse und Öffnungszeiten. c) Zeile in beiden Fußzeilen (Praxisseiten und Weberhaus-Übersicht; die Weida-Seite bekommt das Markup nicht). */ html body.wh-kanz-site main p.wz-access-line{ display:flex;align-items:center;gap:8px;align-self:flex-start;width:fit-content;max-width:100%; margin:14px 0 0;padding:7px 14px 7px 11px;border-radius:10px;background:#eaf2f5; color:var(--primary-dark);font-size:15px;font-weight:600;line-height:1.35;letter-spacing:0; } html body.wh-kanz-site .wz-access-line-ico{flex:none;width:18px;height:18px} /* Kontakt, Karte "Besuchen": Marke zwischen Adresse und Beschreibung */ html body.wh-kanz-site .sp-contact-info p.wz-access-line{margin:6px 0 14px} /* b) Kasten auf /standort/: Computer und Tablet quer mit Symbol links, Text Mitte, Anruf rechts */ html body.wh-kanz-site .wz-access{ display:grid;grid-template-columns:56px minmax(0,1fr) auto;column-gap:28px;row-gap:6px;align-items:center; margin-top:var(--wz-gap);padding:var(--wz-card-pad); background:#fff;border:1px solid var(--border);border-radius:var(--wz-radius);scroll-margin-top:120px; } html body.wh-kanz-site .wz-access-icon{grid-column:1;grid-row:1/span 2;display:grid;place-items:center;width:56px;height:56px;border-radius:14px;background:#eaf2f5;color:var(--primary-dark)} html body.wh-kanz-site main .wz-access-title{grid-column:2;grid-row:1;align-self:end;margin:0;font-size:22px;line-height:1.3;letter-spacing:-.012em;color:var(--text)} html body.wh-kanz-site main .wz-access-text{grid-column:2;grid-row:2;align-self:start;margin:0;max-width:76ch;font-size:var(--wz-fs-prose);line-height:1.6;color:var(--text);text-wrap:pretty} html body.wh-kanz-site .wz-access-call{grid-column:3;grid-row:1/span 2;align-self:center;justify-self:end} html body.wh-kanz-site .wz-access-call svg{flex:none} @media (min-width:761px) and (max-width:1024px){ /* Tablet hoch: Anruf unter dem Text, damit der Text nicht in eine schmale Spalte rutscht */ html body.wh-kanz-site .wz-access{grid-template-columns:52px minmax(0,1fr);column-gap:22px} html body.wh-kanz-site .wz-access-icon{width:52px;height:52px} html body.wh-kanz-site .wz-access-call{grid-column:2;grid-row:3;justify-self:start;margin-top:14px} } @media (max-width:760px){ /* Handy: Symbol und Überschrift in einer Zeile, darunter Text und Anruf über die volle Breite */ html body.wh-kanz-site .wz-access{grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:0;padding:var(--wz-card-pad);scroll-margin-top:88px} html body.wh-kanz-site .wz-access-icon{grid-row:1;width:44px;height:44px;border-radius:12px} html body.wh-kanz-site .wz-access-icon svg{width:24px;height:24px} html body.wh-kanz-site main .wz-access-title{grid-row:1;align-self:center;font-size:20px} html body.wh-kanz-site main .wz-access-text{grid-column:1/-1;grid-row:2;margin-top:14px} html body.wh-kanz-site .wz-access-call{grid-column:1/-1;grid-row:3;justify-self:stretch;width:100%;margin-top:18px} } @media (max-width:360px){ /* Kleines Handy: Anrufknopf etwas schmaler gepolstert, damit "Anrufen: 0821 / 51 03 21" in einer Zeile bleibt. Die Nummer ist im Markup mit geschützten Leerzeichen verbunden und bricht nie in sich um. */ html body.wh-kanz-site main .wz-access a.wh-btn.wz-access-call{padding-left:16px!important;padding-right:16px!important} } /* a) Startseite, Tablet hoch: Adresskarte ist dort eine Zeile (Kopf | Adresse | Knopf); Marke unter die Adresse */ @media (min-width:761px) and (max-width:1024px){ html body.wh-kanz-site.page-template-template-larissa-startseite .hp-anf-info>.hp-anf-card:first-child{row-gap:0} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-anf-info>.hp-anf-card:first-child .hp-anf-card-head{grid-column:1;grid-row:1/span 2} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-anf-info>.hp-anf-card:first-child .hp-anf-addr{grid-column:2;grid-row:1} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-anf-info>.hp-anf-card:first-child p.wz-access-line{grid-column:2;grid-row:2;margin-top:10px} html body.wh-kanz-site.page-template-template-larissa-startseite .hp-anf-info>.hp-anf-card:first-child .hp-anf-btns{grid-column:3;grid-row:1/span 2} } /* c) Fußzeile Praxisseiten: Zeile gehört zur Adresse darüber, daher etwas näher heran */ html body.wh-kanz-site .wh-footer-address .wh-footer-access{margin-top:-6px} @media (max-width:760px){html body.wh-kanz-site .wh-footer-address .wh-footer-access{margin-top:-10px}} /* c) Fußzeile Weberhaus-Übersicht */ html body.wz-entry:not(.weida-open) .footer .bottom-contact>.bottom-access{gap:8px} html body.wz-entry:not(.weida-open) .footer .bottom-access-ico{flex:none;width:16px;height:16px;color:var(--a2-accent)} @media (max-width:760px){ /* Handy: eigene Zeile direkt unter der Adresse */ html body.wz-entry:not(.weida-open) .footer .bottom-contact>.bottom-access{flex-basis:100%;min-height:0;margin:-8px 0 0;padding-bottom:10px} } /* ===== 95-zeitenkarte.css ===== */ /* ===================================================================== 95 Zeitenkarte und Kopf-Telefonblock (Zeiten-System 01.11.2026, inc/zeiten.php und assets/zeiten.js) Gilt auf allen Seiten von Dr. Kanz (html body.wh-kanz-site) und auf der Übersicht (html body.wz-entry:not(.weida-open)); die Seite /dr-weida/ lädt dieses Stylesheet nicht. Nur eigene Klassen (.wz-zeiten, .wz-tel, .wz-zeiten-link): ohne eingebaute Bausteine ändert sich nichts. Breakpoints: Handy bis 760 · Tablet 761 bis 1199 · Computer ab 1200. Die Karte kann zwischen und