/*
Theme Name: Weberhaus Dr. Larissa Kanz Entwurf
Theme URI: https://weberhaus-zahnaerzte.de
Author: Erol Oezcicek
Description: Custom Theme für die Weberhaus Zahnarztpraxis am Moritzplatz Augsburg. Editorial, ruhig, vertrauenswürdig. Migration aus Framer.
Version: 2.0.0
Text Domain: weberhaus
*/
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%;overflow-x:clip}
body{overflow-x:clip;max-width:100vw}
img{max-width:100%;height:auto;display:block}
iframe{max-width:100%}
a{text-decoration:none;color:inherit}
:root{
--primary:#4487A6;
--primary-dark:#336a85;
--primary-darker:#1A4358;
--gold:#C9A961;
--gold-dark:#B89548;
--text:#2C3A47;
--muted:#5C6973;
--bg:#ffffff;
--bg-light:#F7FAFB;
--bg-cream:#FAF7F1;
--border:rgba(44,58,71,0.08);
--font-heading:'Roboto','Helvetica Neue',Arial,sans-serif;
--font-body:'Roboto','Helvetica Neue',Arial,sans-serif;
--max-width:1440px;
--pad-x:60px;
}
body{font-family:var(--font-body);font-size:17px;line-height:1.65;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:600;line-height:1.15;color:var(--text);letter-spacing:-.02em}
h1{font-size:60px;line-height:1.05}
h2{font-size:40px;line-height:1.15}
h3{font-size:22px;letter-spacing:-.01em}
h4{font-size:17px}
p{margin-bottom:1em}
p:last-child{margin-bottom:0}
.wh-container{max-width:var(--max-width);margin:0 auto;padding:0 var(--pad-x)}
/* ============ MOTION REVEAL (Scroll-In Animation) ============ */
[data-reveal]{opacity:0;transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1);will-change:opacity, transform}
[data-reveal="left"]{transform:translateX(-32px)}
[data-reveal="right"]{transform:translateX(32px)}
[data-reveal="up"]{transform:translateY(28px)}
[data-reveal].is-revealed{opacity:1;transform:translate(0,0)}
@media (prefers-reduced-motion:reduce){
[data-reveal]{opacity:1;transform:none;transition:none}
}
/* ============ HEADER ============ */
.wh-header{
position:sticky;top:0;z-index:200;
background:linear-gradient(to bottom, rgba(255,255,255,.82) 0%, rgba(255,255,255,.72) 60%, rgba(255,255,255,.55) 100%);
backdrop-filter:blur(24px) saturate(180%);
-webkit-backdrop-filter:blur(24px) saturate(180%);
border-bottom:none;
}
.wh-header::after{
content:"";
position:absolute;left:0;right:0;top:100%;height:24px;
background:linear-gradient(to bottom, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 100%);
-webkit-backdrop-filter:blur(8px);
backdrop-filter:blur(8px);
pointer-events:none;
-webkit-mask-image:linear-gradient(to bottom, #000 0%, transparent 100%);
mask-image:linear-gradient(to bottom, #000 0%, transparent 100%);
}
.wh-header-inner{display:flex;align-items:center;justify-content:space-between;height:80px;max-width:var(--max-width);margin:0 auto;padding:0 var(--pad-x);gap:32px}
.wh-header-right{display:flex;align-items:center;gap:24px}
.wh-logo{display:flex;align-items:center;gap:11px;color:var(--text);flex-shrink:0;text-decoration:none}
.wh-logo-mark{
width:34px;height:34px;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
border-radius:8px;
background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color:#fff;
box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 4px 10px -3px rgba(68,135,166,.45);
}
.wh-logo-mark-letter{font-family:var(--font-heading);font-weight:600;font-size:17px;letter-spacing:-.02em;line-height:1}
.wh-logo-text{font-family:var(--font-heading);font-weight:500;font-size:17px;color:var(--text);white-space:nowrap;letter-spacing:-.005em}
.wh-nav{display:flex;align-items:center;gap:28px;list-style:none}
.wh-nav > li{position:relative}
.wh-nav a{font-family:var(--font-heading);font-size:15px;font-weight:400;color:var(--text);transition:color .2s;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.wh-nav a:hover{color:var(--primary)}
.wh-nav a.active{color:var(--primary);font-weight:500}
.wh-nav-arrow{transition:transform .25s ease;opacity:.65}
.wh-nav-has-sub:hover > a .wh-nav-arrow,
.wh-nav-has-sub:focus-within > a .wh-nav-arrow{transform:rotate(180deg);opacity:1}
/* Dropdown */
.wh-nav-sub{
position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
min-width:220px;
list-style:none;padding:10px;margin:0;
background:rgba(255,255,255,.85);
-webkit-backdrop-filter:blur(24px) saturate(180%);
backdrop-filter:blur(24px) saturate(180%);
border:1px solid rgba(255,255,255,.55);
border-radius:14px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
0 4px 12px -2px rgba(31,71,93,.08),
0 16px 40px -10px rgba(31,71,93,.22);
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity .25s ease, transform .35s cubic-bezier(.2,.8,.2,1), visibility .25s;
z-index:100;
}
.wh-nav-has-sub:hover > .wh-nav-sub,
.wh-nav-has-sub:focus-within > .wh-nav-sub{
opacity:1;visibility:visible;pointer-events:auto;
transform:translateX(-50%) translateY(0);
}
.wh-nav-sub::before{
/* Bridge zwischen Link und Dropdown — verhindert Flackern beim Hover-Wechsel */
content:"";position:absolute;top:-12px;left:0;right:0;height:12px;
}
.wh-nav-sub li{margin:0}
.wh-nav-sub a{display:block;padding:10px 14px;font-size:14.5px;border-radius:8px;color:var(--text);transition:background .2s, color .2s;white-space:nowrap}
.wh-nav-sub a:hover{background:rgba(68,135,166,.1);color:var(--primary)}
/* Mobile Sub-Nav */
.wh-mobile-has-sub > a{position:relative}
.wh-mobile-subnav{list-style:none;padding:0 0 12px 18px;margin:-4px 0 0;border-top:none !important}
.wh-mobile-subnav li{border:none !important;padding:0}
.wh-mobile-subnav a{font-size:17px !important;font-weight:400 !important;padding:10px 4px !important;color:var(--muted) !important}
.wh-mobile-subnav a:hover,.wh-mobile-subnav a:focus{color:var(--primary) !important}
.wh-nav-phone{
display:inline-flex;align-items:center;gap:9px;padding:0 20px;height:44px;
background:rgba(255,255,255,.55);
backdrop-filter:blur(16px) saturate(180%);
border:1px solid rgba(255,255,255,.6);
box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 4px 16px -4px rgba(0,0,0,.08);
border-radius:10px;color:#1A1A1A;font-size:14px;font-weight:500;font-variant-numeric:tabular-nums;transition:all .2s
}
.wh-nav-phone:hover{background:rgba(255,255,255,.75);border-color:var(--primary)}
.wh-nav-phone-ico{color:var(--primary);flex-shrink:0}
.wh-header .wh-btn--primary{
height:44px;padding:0 22px;font-size:14px;
background:rgba(68,135,166,.92);
backdrop-filter:blur(8px);
box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 6px 16px -4px rgba(68,135,166,.35);
}
/* ============ BUTTONS ============
Rules werden mit !important gesetzt damit Safari-Defaults
und WP-Block-Library-Styles (.wp-block-button etc) sie nicht ueberschreiben.
Border-Radius bleibt klar 10px (12px fuer --lg) - keine Pill-Shapes. */
.wh-btn{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
padding:0 28px !important;
height:48px !important;
box-sizing:border-box !important;
border:1.5px solid transparent !important;
border-radius:10px !important;
font-family:var(--font-heading) !important;
font-size:15px !important;
font-weight:500 !important;
letter-spacing:-.005em !important;
cursor:pointer !important;
transition:all .2s !important;
line-height:1 !important;
text-decoration:none !important;
-webkit-appearance:none !important;
appearance:none !important;
-webkit-tap-highlight-color:transparent !important;
white-space:nowrap !important;
}
.wh-btn--primary{background:var(--primary) !important;color:#fff !important}
.wh-btn--primary:hover{background:var(--primary-dark) !important;transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(68,135,166,.45)}
.wh-btn--ghost{background:transparent !important;color:var(--text) !important;border-color:#C2CCD3 !important}
.wh-btn--ghost:hover{border-color:var(--text) !important;background:#FAFAFA !important}
.wh-btn--lg{padding:0 36px !important;height:56px !important;font-size:16px !important;border-radius:12px !important}
.wh-eyebrow{font-family:var(--font-heading);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--primary);margin-bottom:18px;display:inline-block;font-weight:500}
/* ============ HERO Homepage · split layout ============ */
.hp-hero{position:relative;overflow:hidden;margin-top:-80px;padding-top:80px;background:#fff}
.hp-hero-inner{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center;padding:65px 0 112px}
.hp-hero h1{font-size:66px;letter-spacing:-.025em;line-height:1.02}
.hp-hero h1 em{font-style:normal;color:var(--primary);font-weight:500}
.hp-hero-lead{color:#3A3A3A;font-size:19px;line-height:1.6;max-width:520px;margin-top:24px}
.hp-hero-cta{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap;max-width:540px}
.hp-hero-cta .wh-btn{flex:1 1 0;min-width:0}
/* Address-Pill (mobile-only, ersetzt eyebrow auf Mobile) */
.hp-hero-address{display:none;align-items:center;gap:8px;font-family:var(--font-heading);font-size:15px;font-weight:500;color:var(--text);margin:0 0 12px;line-height:1.3;text-decoration:none;transition:color .15s ease;-webkit-tap-highlight-color:transparent}
.hp-hero-address:hover,.hp-hero-address:focus-visible{color:var(--primary);text-decoration:none;outline:none}
.hp-hero-address svg{color:var(--primary);flex-shrink:0;transition:transform .15s ease}
.hp-hero-address:hover svg{transform:scale(1.1)}
.hp-hero-trust{display:flex;align-items:stretch;gap:0;margin-top:48px;flex-wrap:wrap}
.hp-trust-item{display:flex;align-items:center;gap:14px;padding:14px 24px 14px 0}
.hp-trust-item + .hp-trust-item{border-left:1px solid var(--border);padding-left:24px}
.hp-trust-line{width:32px;height:1px;background:var(--text);flex-shrink:0}
.hp-trust-num{font-family:var(--font-heading);font-size:24px;font-weight:500;color:var(--text);letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.hp-trust-label{font-size:12px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-top:4px;font-family:var(--font-heading);font-weight:500}
.hp-trust-block{display:flex;flex-direction:column}
.hp-trust-stars{display:inline-flex;gap:1px;color:var(--primary)}
.hp-trust-stars svg{width:14px;height:14px;fill:currentColor}
.hp-trust-rating{display:flex;align-items:baseline;gap:6px}
.hp-trust-rating-num{font-family:var(--font-heading);font-size:24px;font-weight:500;letter-spacing:-.02em;line-height:1}
.hp-trust-rating-of{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.hp-trust-google{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);margin-top:6px}
.hp-trust-google-logo{width:13px;height:13px;flex-shrink:0}
.hp-hero-img{position:relative;aspect-ratio:4/5;border-radius:24px;overflow:hidden;box-shadow:0 32px 64px -32px rgba(0,0,0,.25);width:90%;margin-left:auto}
.hp-hero-img img{width:100%;height:100%;object-fit:cover}
.hp-card{
position:absolute;left:0;right:0;bottom:0;
background:linear-gradient(to bottom, rgba(255,255,255,.55) 0%, rgba(255,255,255,.78) 100%);
-webkit-backdrop-filter:blur(28px) saturate(180%);
backdrop-filter:blur(28px) saturate(180%);
border-top:1px solid rgba(255,255,255,.45);
display:flex;align-items:center;justify-content:space-between;
padding:14px 22px;
gap:18px;flex-wrap:wrap;
}
.hp-card-l{display:flex;align-items:baseline;gap:8px;min-width:0}
.hp-card-addr{font-family:var(--font-heading);font-size:15px;font-weight:500;color:var(--text);letter-spacing:-.005em;line-height:1.2;white-space:nowrap;text-decoration:none;transition:color .15s ease}
.hp-card-addr:hover,.hp-card-addr:focus-visible{color:var(--primary);text-decoration:none;outline:none}
.hp-card-phone{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-heading);font-size:14.5px;font-weight:500;color:var(--text);text-decoration:none;font-variant-numeric:tabular-nums}
.hp-card-phone svg{width:14px;height:14px;color:var(--primary);flex-shrink:0}
.hp-card-phone:hover{color:var(--primary)}
.hp-hero-badge-dot{width:10px;height:10px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.2)}
.hp-hero-badge-txt{font-family:var(--font-heading);font-size:14px;font-weight:500}
.hp-hero-badge-sub{font-size:12px;color:var(--muted);margin-top:2px}
/* Google-Rating UNTER dem Bild (mobile-only, default versteckt) - originaler Google-Look */
.hp-hero-google-rating{display:none;align-items:center;gap:8px;text-decoration:none;color:var(--text);font-family:var(--font-heading)}
.hp-google-logo{flex-shrink:0;display:inline-flex;align-items:center;line-height:0}
.hp-rating-num{font-size:16px;font-weight:600;color:var(--text);letter-spacing:-.005em;line-height:1;font-variant-numeric:tabular-nums}
.hp-rating-stars-google{display:inline-flex;gap:1px;align-items:center;line-height:0}
.hp-rating-count{font-size:13.5px;color:var(--muted);font-weight:400;letter-spacing:.005em}
/* ============ USP STRIP ============ */
.hp-usp{padding:32px 0;border-bottom:1px solid var(--border);background:#fff}
.hp-usp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.hp-usp-cell{display:flex;align-items:center;gap:14px}
.hp-usp-icon{width:42px;height:42px;border-radius:12px;background:#EFF5F8;color:var(--primary);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hp-usp-title{font-family:var(--font-heading);font-size:14.5px;font-weight:500}
.hp-usp-sub{font-size:13px;color:var(--muted);margin-top:2px}
/* ============ SECTIONS ============ */
.wh-section{padding:112px 0}
.wh-section-head{max-width:780px;margin:0 auto 64px;text-align:center}
.wh-section-head p{color:var(--muted);font-size:18px;margin-top:16px}
.wh-section--alt{background:#fff}
.wh-section--cream{background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
/* ============ PRAXIS-STORY ============ */
.hp-story{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.hp-story-img{aspect-ratio:4/5;border-radius:20px;overflow:hidden}
.hp-story-img img{width:100%;height:100%;object-fit:cover}
.hp-story h2{margin-bottom:20px}
.hp-story p{color:#3A3A3A;font-size:17px;line-height:1.75;margin-bottom:18px}
.hp-story-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:36px;padding-top:32px;border-top:1px solid var(--border)}
.hp-story-stat-num{font-family:var(--font-heading);font-size:34px;font-weight:500;color:var(--primary);letter-spacing:-.02em;line-height:1}
.hp-story-stat-lbl{font-size:13.5px;color:var(--muted);margin-top:8px}
/* ============ BEHANDLUNGEN · icon cards ============ */
/* ============= BEHANDLUNGEN — Apple Liquid Glass mit echter Refraktion ============= */
.hp-treat-section{position:relative;overflow:hidden;isolation:isolate;padding:200px 0 200px}
.hp-treat-section.wh-section--alt{
background:
/* Top + Bottom Fade je 720px — überlappt Content leicht für sanfteren Übergang */
linear-gradient(to bottom,
/* TOP-Fade in (720px) */
#fff 0,
rgba(255,255,255,.95) 90px,
rgba(255,255,255,.72) 240px,
rgba(255,255,255,.42) 420px,
rgba(255,255,255,.18) 580px,
transparent 720px,
/* MITTE: nur farbiger Original-Verlauf */
transparent calc(100% - 720px),
/* BOTTOM-Fade out (720px) */
rgba(255,255,255,.18) calc(100% - 580px),
rgba(255,255,255,.42) calc(100% - 420px),
rgba(255,255,255,.72) calc(100% - 240px),
rgba(255,255,255,.95) calc(100% - 90px),
#fff 100%
),
/* Farbiger Original-Verlauf */
linear-gradient(135deg, #DDE9F0 0%, #E8DCC4 40%, #C8DDEA 70%, #E5C9A8 100%);
}
/* Vorherige + Nächste Section: keine Border-Top/Bottom (sonst harte Linie sichtbar) */
.hp-treat-section + .wh-section--cream,
.hp-treat-section + .wh-section{border-top:none}
.wh-section--cream:has(+ .hp-treat-section),
.wh-section:has(+ .hp-treat-section){border-bottom:none}
/* Grid-Pattern (damit die Refraktion sichtbar wird — wie im Apple-Demo) */
/* Grid-Pattern entfernt (User-Wunsch — wirkte zu technisch/unruhig) */
/* Background-Color-Blobs (für farbige Refraktion durchs Glas) */
.hp-treat-bg{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.hp-treat-blob{position:absolute;border-radius:50%;filter:blur(80px)}
.hp-treat-blob--1{width:680px;height:680px;top:-120px;left:-120px;background:radial-gradient(circle, #6FB3D2 0%, transparent 60%);opacity:.8}
.hp-treat-blob--2{width:720px;height:720px;top:20%;right:-180px;background:radial-gradient(circle, #E8C988 0%, transparent 60%);opacity:.65}
.hp-treat-blob--3{width:560px;height:560px;bottom:-160px;left:35%;background:radial-gradient(circle, #B8E0EE 0%, transparent 60%);opacity:.75}
.hp-treat-section .wh-container{position:relative;z-index:1}
/* Grid = normales 3-Spalten-Grid mit Gap (kein eigenes Glas-Panel) */
.hp-treat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
/* Cards = individuelle Apple Liquid Glass Karten */
.hp-treat-card{
position:relative;
display:flex;flex-direction:column;
padding:32px 30px 28px;
min-height:300px;
text-decoration:none;color:inherit;
background:linear-gradient(135deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.18) 100%);
border:none;
border-radius:26px;
box-shadow:
/* Apple Glas-Rim */
inset 0 2px 0 rgba(255,255,255,.95),
inset 0 -1px 0 rgba(255,255,255,.4),
inset 0 0 0 1.5px rgba(255,255,255,.55),
/* Float-Shadow */
0 6px 16px -4px rgba(31,71,93,.12),
0 18px 36px -10px rgba(31,71,93,.18),
0 36px 72px -20px rgba(31,71,93,.24);
transition:transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .55s cubic-bezier(.2,.8,.2,1), background .4s;
overflow:hidden;
isolation:isolate;
}
/* Refraktion-Layer (echte Apple-Distortion via SVG-Filter) */
.hp-treat-card::before{
content:"";position:absolute;inset:0;
border-radius:inherit;
-webkit-backdrop-filter:blur(8px) saturate(170%);
backdrop-filter:blur(8px) saturate(170%);
filter:url(#wh-lg-distort);
pointer-events:none;
z-index:-1;
}
/* Top-Shimmer */
.hp-treat-card::after{
content:"";position:absolute;top:1px;left:10%;right:10%;height:1px;
background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.95) 50%, transparent 100%);
pointer-events:none;z-index:2;
}
.hp-treat-card > *{position:relative;z-index:1}
.hp-treat-card:hover{
transform:translateY(-8px);
background:linear-gradient(135deg, rgba(255,255,255,.36) 0%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.28) 100%);
box-shadow:
inset 0 2px 0 rgba(255,255,255,1),
inset 0 -1px 0 rgba(255,255,255,.55),
inset 0 0 0 1.5px rgba(255,255,255,.7),
0 10px 24px -4px rgba(31,71,93,.16),
0 28px 56px -12px rgba(31,71,93,.24),
0 52px 96px -24px rgba(31,71,93,.32);
}
.hp-treat-card:hover::before{filter:url(#wh-lg-distort-hover);-webkit-backdrop-filter:blur(10px) saturate(190%);backdrop-filter:blur(10px) saturate(190%)}
.hp-treat-card:focus-visible{outline:2px solid var(--primary);outline-offset:4px}
/* Akzent-Linie unten weglassen (User-Wunsch: nicht abgehakt) */
.hp-treat-line{display:none}
/* Icon-Badge (Apple Settings-Style) */
.hp-treat-icon-wrap{
width:56px;height:56px;border-radius:16px;
display:inline-flex;align-items:center;justify-content:center;
background:linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(244,249,251,.85) 100%);
border:1px solid rgba(184,210,222,.6);
box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 4px 10px -4px rgba(31,71,93,.18);
margin-bottom:24px;
color:var(--primary);
transition:all .35s cubic-bezier(.2,.8,.2,1);
flex-shrink:0;
}
.hp-treat-card:hover .hp-treat-icon-wrap{
background:linear-gradient(135deg, var(--primary) 0%, #3a7591 100%);
color:#fff;
border-color:rgba(255,255,255,.4);
transform:scale(1.05) rotate(-3deg);
box-shadow:0 8px 18px -6px rgba(68,135,166,.5);
}
.hp-treat-icon{width:28px;height:28px}
/* Eyebrow (Kategorie) */
.hp-treat-eyebrow{
font-family:var(--font-heading);font-size:11px;font-weight:600;
letter-spacing:.12em;text-transform:uppercase;
color:var(--primary);
margin-bottom:10px;
}
/* H3 + P */
.hp-treat-card h3{font-family:var(--font-heading);font-size:24px;letter-spacing:-.018em;margin:0 0 12px;font-weight:600;line-height:1.2;color:var(--text)}
.hp-treat-card p{color:#5A6B73;font-size:15px;line-height:1.6;flex:1;margin:0}
/* Mehr-erfahren-Link (Animation) */
.hp-treat-link{
margin-top:22px;font-size:14px;font-weight:500;
color:var(--primary);
display:inline-flex;align-items:center;gap:6px;
transition:color .25s ease, gap .35s cubic-bezier(.2,.8,.2,1);
align-self:flex-start;
}
.hp-treat-link svg{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.hp-treat-card:hover .hp-treat-link{color:#3a7591}
.hp-treat-card:hover .hp-treat-link svg{transform:translateX(4px)}
/* Akzent-Linie unten (animiert beim Hover von 0 auf 100%) */
.hp-treat-line{
position:absolute;left:0;bottom:0;height:2px;width:0;
background:linear-gradient(90deg, var(--primary), #6FB3D2);
transition:width .55s cubic-bezier(.2,.8,.2,1);
}
.hp-treat-card:hover .hp-treat-line{width:100%}
@media (prefers-reduced-motion: reduce){
.hp-treat-card,.hp-treat-icon-wrap,.hp-treat-link,.hp-treat-link svg,.hp-treat-line{transition:none}
.hp-treat-card:hover{transform:none}
.hp-treat-card:hover .hp-treat-icon-wrap{transform:none}
}
/* ============ WERTE / VERSPRECHEN ============ */
.hp-values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.hp-values-card{padding:40px 36px;background:#fff;border:1px solid var(--border);border-radius:20px}
.hp-values-card h3{font-size:22px;margin-bottom:14px}
.hp-values-card p{font-size:15.5px;color:var(--muted);line-height:1.65}
.hp-values-num{font-family:var(--font-heading);font-size:36px;font-weight:500;color:var(--primary);margin-bottom:14px;letter-spacing:-.02em;display:block;line-height:1}
/* ============ REVIEWS ============ */
.hp-rev-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:48px;flex-wrap:wrap;gap:24px}
.hp-rev-rating{display:inline-flex;align-items:center;gap:14px;padding:12px 20px;background:#fff;border:1px solid var(--border);border-radius:99px}
.hp-rev-rating strong{font-family:var(--font-heading);font-size:20px;font-weight:600}
.hp-rev-stars{display:flex;gap:2px;color:var(--primary)}
.hp-rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.hp-rev-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:30px 32px;display:flex;flex-direction:column}
.hp-rev-card .hp-rev-stars{margin-bottom:16px}
.hp-rev-text{font-size:15.5px;line-height:1.65;color:#2A2A2A;margin-bottom:20px;flex:1}
.hp-rev-author{display:flex;align-items:center;gap:12px;margin-top:auto}
.hp-rev-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#EFF5F8,#D5E4ED);color:var(--primary);display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-weight:600;font-size:14px}
.hp-rev-name{font-family:var(--font-heading);font-size:14.5px;font-weight:500}
.hp-rev-when{font-size:12.5px;color:var(--muted);margin-top:1px}
/* ============ BOOKING (Inline-Vorschau auf Homepage) ============ */
.hp-book{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:80px;background:#fff;border:1px solid var(--border);border-radius:32px;box-shadow:0 24px 64px -32px rgba(0,0,0,.08)}
.hp-book h2{margin-bottom:20px}
.hp-book-lead{color:var(--muted);font-size:17px;line-height:1.65;margin-bottom:32px}
.hp-book-phone{display:inline-flex;align-items:center;gap:14px;padding:18px 24px;background:var(--bg-cream);border-radius:14px}
.hp-book-phone-icon{width:44px;height:44px;border-radius:12px;background:#fff;color:var(--primary);display:flex;align-items:center;justify-content:center}
.hp-book-phone-num{font-family:var(--font-heading);font-size:22px;font-weight:600;letter-spacing:-.01em}
.hp-book-phone-lbl{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.hp-book-form{background:var(--bg-light);border-radius:20px;padding:32px}
.hp-book-step{font-family:var(--font-heading);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--primary);font-weight:500;margin-bottom:6px}
.hp-book-q{font-family:var(--font-heading);font-size:18px;font-weight:500;margin-bottom:18px}
.hp-book-opt{display:flex;align-items:center;gap:14px;padding:14px 16px;background:#fff;border:1.5px solid var(--border);border-radius:12px;margin-bottom:8px;cursor:pointer;transition:all .15s}
.hp-book-opt:hover{border-color:#B8D2DE}
.hp-book-opt.active{border-color:var(--primary);background:#EFF5F8}
.hp-book-radio{width:20px;height:20px;border-radius:50%;border:2px solid #D5DCE0;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hp-book-opt.active .hp-book-radio{border-color:var(--primary);background:var(--primary)}
.hp-book-opt.active .hp-book-radio::after{content:"";width:7px;height:7px;border-radius:50%;background:#fff}
.hp-book-opt-t{font-family:var(--font-heading);font-size:15px;font-weight:500}
.hp-book-opt-s{font-size:13px;color:var(--muted);margin-top:2px}
.hp-book-progress{display:flex;gap:6px;margin-bottom:20px}
.hp-book-progress span{flex:1;height:4px;border-radius:99px;background:#E5EBEE}
.hp-book-progress span.active{background:var(--primary)}
.hp-book-cta{width:100%;justify-content:center;margin-top:18px}
/* ============ ANFAHRT ============ */
.hp-anf{display:grid;grid-template-columns:1.4fr 1fr;gap:24px}
.hp-anf-map{position:relative;aspect-ratio:4/3;background:#EFF5F8;border-radius:20px;overflow:hidden;border:1px solid var(--border);box-shadow:0 12px 32px -16px rgba(20,40,60,.18)}
.hp-anf-map iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.15) contrast(.97)}
.hp-anf-map-overlay{position:absolute;left:18px;bottom:18px;background:#fff;border-radius:12px;padding:12px 16px;box-shadow:0 8px 24px -8px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.04);display:flex;align-items:center;gap:12px;max-width:calc(100% - 36px)}
.hp-anf-map-overlay-pin{width:32px;height:32px;border-radius:10px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hp-anf-map-overlay-t{font-family:var(--font-heading);font-size:14px;font-weight:500;color:var(--text);line-height:1.3}
.hp-anf-map-overlay-s{font-size:12px;color:var(--muted);margin-top:2px}
.hp-anf-map-link{position:absolute;top:14px;left:14px;background:#fff;color:var(--text);font-family:var(--font-heading);font-size:12px;font-weight:500;padding:8px 12px;border-radius:8px;text-decoration:none;box-shadow:0 4px 12px -4px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.05);display:inline-flex;align-items:center;gap:6px;transition:transform .15s}
.hp-anf-map-link:hover{transform:translateY(-1px);color:var(--primary)}
.hp-anf-info{display:flex;flex-direction:column;gap:16px}
.hp-anf-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:28px 32px}
.hp-anf-card-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.hp-anf-card-icon{width:38px;height:38px;border-radius:11px;background:#EFF5F8;color:var(--primary);display:flex;align-items:center;justify-content:center}
.hp-anf-card-eyebrow{font-family:var(--font-heading);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500}
.hp-anf-addr{font-family:var(--font-heading);font-size:20px;font-weight:500;line-height:1.4}
.hp-anf-btns{display:flex;gap:8px;margin-top:18px}
.hp-anf-btn{padding:9px 16px !important;background:var(--bg-light) !important;border:1px solid var(--border) !important;border-radius:10px !important;font-family:var(--font-heading) !important;font-size:13px !important;font-weight:500 !important;color:var(--text) !important;cursor:pointer;transition:all .15s;text-decoration:none !important;display:inline-block !important;-webkit-appearance:none !important;appearance:none !important}
.hp-anf-btn:hover{background:#EFF5F8;border-color:#B8D2DE}
.hp-anf-hours{display:flex;flex-direction:column}
.hp-anf-hours-row{display:flex;justify-content:space-between;padding:10px 0;font-size:14.5px;border-top:1px solid var(--border)}
.hp-anf-hours-row:first-of-type{border-top:none}
.hp-anf-hours-row span:last-child{font-variant-numeric:tabular-nums;font-weight:500}
.hp-anf-hours-row.closed span:last-child{color:var(--muted);font-weight:400}
/* ============ TEAM ============ */
.team-intro{padding:80px 0 40px;background:#fff;border-top:1px solid var(--border)}
.team-intro-inner{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:760px;margin:0 auto;gap:24px}
.team-intro-l{display:flex;flex-direction:column;align-items:center;gap:16px}
.team-intro h2{font-size:44px;letter-spacing:-.022em;line-height:1.1;margin:0;font-weight:500}
.team-intro-lead{color:#3A3A3A;font-size:17px;line-height:1.6;max-width:560px;margin:0}
.wh-org-hint{display:flex;justify-content:center;margin-bottom:64px}
.wh-org-pill{display:inline-flex;align-items:center;gap:14px;padding:14px 24px;background:rgba(255,255,255,.7);backdrop-filter:blur(16px) saturate(180%);border:1px solid var(--border);border-radius:99px;font-size:14px;color:var(--muted)}
.wh-org-pill strong{color:var(--text);font-weight:600}
.wh-org-dot{width:6px;height:6px;border-radius:50%;background:var(--primary)}
/* Editorial-Anchor (ersetzt Pill mit Bullet) */
.wh-org-anchor{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:56px;text-align:center}
.wh-org-anchor-line{width:32px;height:1px;background:var(--text);opacity:.4}
.wh-org-anchor-label{font-family:var(--font-heading);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0;font-weight:500}
.wh-org-anchor-name{font-family:var(--font-heading);font-size:22px;font-weight:500;letter-spacing:-.012em;color:var(--text);margin:0;line-height:1.2}
.inhaber-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;align-items:stretch;grid-template-rows:auto auto auto 1fr auto}
.inhaber-card{background:#fff;border:1px solid var(--border);border-radius:24px;overflow:hidden;transition:all .35s cubic-bezier(.2,.8,.2,1);position:relative;display:grid;grid-template-rows:subgrid;grid-row:span 5}
.inhaber-card:hover{transform:translateY(-6px);box-shadow:0 32px 64px -32px rgba(0,0,0,.22)}
.inhaber-card::before{content:"";position:absolute;top:24px;right:24px;background:var(--primary);color:#fff;font-family:var(--font-heading);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:99px;z-index:2}
.inhaber-card[data-tag="inhaber"]::before{content:"Inhaberin seit 2026"}
.inhaber-card[data-tag="senior"]::before{content:"Inhaber · Seniorpartner"}
.inhaber-photo{aspect-ratio:4/3;overflow:hidden;background:#F0F0F0}
.inhaber-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.inhaber-body{display:contents}
.inhaber-name{font-size:28px;margin:36px 36px 10px;padding:0}
.inhaber-spec{font-size:14.5px;color:var(--primary);font-family:var(--font-heading);font-weight:500;margin:0 36px 20px;letter-spacing:.01em}
.inhaber-bio{font-size:16px;color:#3A3A3A;line-height:1.7;margin:0 36px 24px;padding:0}
.inhaber-meta{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--border);padding:20px 36px 40px;margin:0}
.inhaber-meta-row{display:flex;gap:14px;font-size:14.5px;color:var(--muted);align-items:flex-start}
.inhaber-meta-row b{color:var(--text);font-weight:600;min-width:128px;font-family:var(--font-heading)}
.behandeln-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.behandeln-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:32px 28px;transition:all .25s}
.behandeln-card:hover{transform:translateY(-3px);box-shadow:0 20px 40px -20px rgba(68,135,166,.18);border-color:#B8D2DE}
.behandeln-photo{width:96px;height:96px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#EFF5F8,#D5E4ED);display:flex;align-items:center;justify-content:center;margin-bottom:20px;border:3px solid #fff;box-shadow:0 8px 20px -6px rgba(0,0,0,.12)}
.behandeln-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.behandeln-photo-init{font-family:var(--font-heading);font-size:30px;font-weight:500;color:var(--primary);letter-spacing:-.02em}
.behandeln-card h3{font-size:20px;margin-bottom:6px}
.behandeln-role{font-size:13.5px;color:var(--primary);font-weight:500;margin-bottom:12px;font-family:var(--font-heading)}
.behandeln-bio{font-size:14.5px;color:var(--muted);line-height:1.6}
/* Behandlungsteam: Team-Aerztin dezent hervorheben (Option 1) */
.behandeln-card--lead{border:1.5px solid var(--primary);box-shadow:0 10px 30px -12px rgba(68,135,166,.28);background:linear-gradient(180deg,#fff 0%,#F6FAFC 100%)}
.behandeln-card--lead:hover{border-color:var(--primary)}
.behandeln-card--lead .behandeln-photo{width:154px;height:196px;border-radius:16px}
.behandeln-card--lead h3{font-size:21px}
.behandeln-badge{display:inline-block;font-family:var(--font-heading);font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--primary);background:#EAF3F7;border:1px solid #CFE3EC;padding:4px 11px;border-radius:999px;margin-bottom:16px}
.team-subhead{margin:80px auto 48px;text-align:center;max-width:780px}
.praxis-team{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;background:#fff;border:1px solid var(--border);border-radius:24px;overflow:hidden;margin-top:64px}
.praxis-team-img{aspect-ratio:5/4;overflow:hidden;background:#F0F0F0}
.praxis-team-img img{width:100%;height:100%;object-fit:cover}
.praxis-team-body{padding:48px}
.praxis-team-body h3{font-size:32px;margin-bottom:18px}
.praxis-team-body p{color:#3A3A3A;line-height:1.7;font-size:16.5px}
.praxis-team-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:28px;list-style:none;padding:0}
.praxis-team-list li{display:flex;align-items:center;gap:12px;font-size:15px;color:#3A3A3A}
.praxis-team-list li svg{color:var(--primary);flex-shrink:0}
/* ============ CTA ============ */
.wh-cta{padding:80px 0;background:linear-gradient(135deg,#1A4358 0%,#356A85 60%,#4487A6 100%);color:#fff;position:relative;overflow:hidden}
.wh-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(255,255,255,.08),transparent 50%);pointer-events:none}
.wh-cta-inner{display:grid;grid-template-columns:1.5fr 1fr;gap:48px;align-items:center;position:relative}
.wh-cta h2{color:#fff;font-size:38px;margin-bottom:16px}
.wh-cta p{color:rgba(255,255,255,.8);font-size:18px;max-width:540px}
.wh-cta-btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.wh-cta .wh-btn--primary{background:#fff;color:var(--primary)}
.wh-cta .wh-btn--ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.wh-cta .wh-btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
/* ============ FOOTER ============ */
.wh-footer{background:var(--bg-cream);color:rgba(44,58,71,.78);padding:88px 0 32px;position:relative;overflow:hidden;border-top:1px solid rgba(44,58,71,.08)}
.wh-footer::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(to right, transparent, rgba(44,58,71,.1), transparent)}
.wh-footer-top{display:grid;grid-template-columns:1.3fr .8fr .8fr 1.25fr;gap:48px;padding-bottom:56px;border-bottom:1px solid rgba(44,58,71,.1)}
.wh-footer-brand{max-width:380px}
.wh-footer-eyebrow{font-family:var(--font-heading);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:rgba(44,58,71,.5);margin-bottom:14px}
.wh-footer-logo{font-family:var(--font-heading);font-size:28px;font-weight:500;color:var(--text);letter-spacing:-.015em;line-height:1.15;margin-bottom:6px}
.wh-footer-logo-sub{font-family:var(--font-heading);font-size:15px;font-weight:400;color:rgba(44,58,71,.6);letter-spacing:.01em}
.wh-footer-address{font-size:14.5px;line-height:1.75;color:rgba(44,58,71,.78);font-style:normal;margin-top:28px}
.wh-footer-address strong{font-family:var(--font-heading);font-weight:500;color:var(--text);font-variant-numeric:tabular-nums}
.wh-footer-address a{color:inherit;transition:color .2s}
.wh-footer-address a:hover{color:var(--primary)}
.wh-footer-col h4{font-family:var(--font-heading);font-size:11px;font-weight:500;color:rgba(44,58,71,.5);text-transform:uppercase;letter-spacing:.18em;margin-bottom:22px}
.wh-footer-links{list-style:none;padding:0;margin:0}
.wh-footer-links li{margin-bottom:12px}
.wh-footer-links a{font-size:15px;color:rgba(44,58,71,.78);transition:color .2s,padding-left .2s;display:inline-block;line-height:1.4}
.wh-footer-links a:hover,.wh-footer-links a:focus-visible{color:var(--primary);padding-left:4px}
.wh-footer-bottom{padding-top:28px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}
.wh-footer-bottom p{font-size:13px;color:rgba(44,58,71,.5);margin:0}
.wh-footer-bottom-meta{font-size:13px;color:rgba(44,58,71,.5);display:flex;align-items:center;gap:10px}
.wh-footer-bottom-meta::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--primary)}
/* ===== Footer Öffnungszeiten ===== */
.wh-hours{margin:0;max-width:420px}
.wh-hours-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:7px 0;border-bottom:1px solid rgba(44,58,71,.07)}
.wh-hours-row:last-child{border-bottom:none}
.wh-hours-row dt{font-size:14px;color:rgba(44,58,71,.66);display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.wh-hours-row dd{margin:0;font-family:var(--font-heading);font-size:13.5px;font-weight:500;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:.005em;white-space:nowrap}
.wh-hours-row--closed dd{color:rgba(44,58,71,.45);font-weight:400}
.wh-hours-row.is-today dt{color:var(--text);font-weight:600}
.wh-hours-row.is-today dd{color:var(--primary)}
.wh-hours-today-tag{font-family:var(--font-heading);font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);background:rgba(68,135,166,.1);border-radius:999px;padding:2px 7px;position:relative;top:-1px}
.wh-hours-status{display:flex;align-items:center;gap:9px;font-family:var(--font-heading);font-size:13px;font-weight:500;color:rgba(44,58,71,.6);margin:-6px 0 14px}
.wh-hours-status.is-open{color:var(--primary)}
.wh-hours-dot{width:8px;height:8px;border-radius:50%;background:rgba(44,58,71,.35);flex:none}
.wh-hours-status.is-open .wh-hours-dot{background:var(--primary)}
@media (prefers-reduced-motion: no-preference){
.wh-hours-status.is-open .wh-hours-dot{animation:wh-hours-pulse 2.4s ease-out infinite}
}
@keyframes wh-hours-pulse{0%{box-shadow:0 0 0 0 rgba(68,135,166,.35)}70%{box-shadow:0 0 0 7px rgba(68,135,166,0)}100%{box-shadow:0 0 0 0 rgba(68,135,166,0)}}
/* Einfliegen */
.wh-hours-will-reveal .wh-hours-status,.wh-hours-will-reveal .wh-hours-row{opacity:0;transform:translateY(12px)}
.wh-hours-in .wh-hours-status,.wh-hours-in .wh-hours-row{opacity:1;transform:none;transition:opacity .55s ease,transform .55s cubic-bezier(.22,.7,.25,1)}
.wh-hours-in .wh-hours-row:nth-child(1){transition-delay:.06s}
.wh-hours-in .wh-hours-row:nth-child(2){transition-delay:.12s}
.wh-hours-in .wh-hours-row:nth-child(3){transition-delay:.18s}
.wh-hours-in .wh-hours-row:nth-child(4){transition-delay:.24s}
.wh-hours-in .wh-hours-row:nth-child(5){transition-delay:.3s}
.wh-hours-in .wh-hours-row:nth-child(6){transition-delay:.36s}
/* ===== Header Öffnungszeiten-Chip + Klapp-Panel ===== */
.wh-hours-menu{position:relative;display:flex;align-items:center}
.wh-hours-chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-heading);font-size:13.5px;font-weight:500;color:var(--text);background:rgba(255,255,255,.6);border:1px solid var(--border);border-radius:999px;padding:8px 13px;cursor:pointer;line-height:1;white-space:nowrap;transition:border-color .2s,background .2s}
.wh-hours-chip:hover,.wh-hours-chip:focus-visible{background:rgba(255,255,255,.85);border-color:var(--primary)}
.wh-hours-chip-dot{width:8px;height:8px;border-radius:50%;background:rgba(44,58,71,.35);flex:none}
.wh-hours-chip.is-open .wh-hours-chip-dot{background:var(--primary)}
@media (prefers-reduced-motion:no-preference){.wh-hours-chip.is-open .wh-hours-chip-dot{animation:wh-hours-pulse 2.4s ease-out infinite}}
.wh-hours-chip-till{color:rgba(44,58,71,.6);font-weight:400}
.wh-hours-chip-caret{color:rgba(44,58,71,.5);transition:transform .25s;flex:none}
.wh-hours-menu.is-open .wh-hours-chip-caret{transform:rotate(180deg)}
.wh-hours-pop{position:absolute;top:calc(100% + 12px);right:0;width:min(300px,calc(100vw - 24px));background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 26px 64px -22px rgba(44,58,71,.4);padding:20px 22px;z-index:250}
.wh-hours-pop::before{content:"";position:absolute;top:-6px;right:24px;width:12px;height:12px;background:#fff;border-left:1px solid var(--border);border-top:1px solid var(--border);transform:rotate(45deg)}
.wh-hours-pop .wh-hours{max-width:none}
.wh-hours-pop .wh-hours-status{margin:0 0 12px}
@media (prefers-reduced-motion:no-preference){.wh-hours-menu.is-open .wh-hours-pop{animation:wh-hours-drop .26s cubic-bezier(.22,.7,.25,1)}}
@keyframes wh-hours-drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
/* Öffnungszeiten sind jetzt der Hero-Button -> Header-Chip aus, Telefon normal */
.wh-hours-menu{display:none}
.wh-header-contact{display:contents}
/* Tablet/Mobil: Header-Chip aus -> Hero-Milchglas */
/* Öffnungszeiten: Desktop = Hero-Button (scrollt zum Footer), Tablet/Mobil = Karte unter Google-Bewertungen */
.hp-hero-hours{display:none}
.hp-hero-hours-btn{display:none}
@media (max-width:1024px){
.hp-hero-hours{display:block;order:4;align-self:center;width:100%;max-width:440px;margin:14px auto 0;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 14px 36px -22px rgba(44,58,71,.3);padding:16px 20px}
.hp-hero-hours-title{font-family:var(--font-heading);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(44,58,71,.5);margin-bottom:12px}
.hp-hero-hours .wh-hours-status{display:none}
.hp-hero-hours .wh-hours-row--closed{display:none}
.hp-hero-hours .wh-hours{max-width:none}
.hp-hero-hours .wh-hours-row{padding:5px 0;border-bottom-color:rgba(44,58,71,.1)}
}
@media (min-width:1025px){
.hp-hero-hours-btn{display:flex;align-items:center;gap:11px;width:100%;max-width:540px;margin-top:14px;padding:14px 20px;background:rgba(68,135,166,.08);border:1px solid rgba(68,135,166,.35);border-radius:14px;cursor:pointer;text-align:left;transition:background .2s,border-color .2s,box-shadow .2s}
.hp-hero-hours-btn:hover{background:rgba(68,135,166,.14);border-color:var(--primary);box-shadow:0 12px 28px -18px rgba(68,135,166,.55)}
.hp-hours-btn-ico{color:var(--primary);flex:none}
.hp-hours-btn-label{flex:1;font-family:var(--font-heading);font-size:15px;font-weight:600;color:var(--text)}
.hp-hours-btn-arrow{color:var(--primary);flex:none;transition:transform .2s}
.hp-hero-hours-btn:hover .hp-hours-btn-arrow{transform:translateY(2px)}
}
@keyframes wh-hours-flash{0%,100%{background:transparent}12%{background:rgba(68,135,166,.16)}}
.wh-hours-flash{animation:wh-hours-flash 1.6s ease-out;border-radius:14px}
/* Geschlossene Tage überall ausblenden - nur offene Tage */
.wh-hours-row--closed{display:none}
@media (max-width:780px){
.wh-hours-chip-till{display:none}
.wh-hours-chip{padding:7px 11px;font-size:13px}
.wh-hours-pop{position:fixed;top:64px;left:12px;right:12px;width:auto}
.wh-hours-pop::before{display:none}
}
/* ============ MOBILE BURGER + MENU ============ */
.wh-burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--border);background:rgba(255,255,255,.6);border-radius:10px;cursor:pointer;color:var(--text);flex-shrink:0;padding:0;-webkit-tap-highlight-color:transparent;position:relative;z-index:110;transition:background .2s}
.wh-burger:hover{background:rgba(255,255,255,.85)}
.wh-burger-lines{position:relative;width:18px;height:14px}
.wh-burger-lines span{position:absolute;left:0;right:0;height:1.5px;background:currentColor;border-radius:2px;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .2s,top .3s cubic-bezier(.2,.8,.2,1)}
.wh-burger-lines span:nth-child(1){top:2px}
.wh-burger-lines span:nth-child(2){top:50%;margin-top:-.75px}
.wh-burger-lines span:nth-child(3){top:calc(100% - 2px - 1.5px)}
.wh-burger.is-open .wh-burger-lines span:nth-child(1){top:50%;margin-top:-.75px;transform:rotate(45deg)}
.wh-burger.is-open .wh-burger-lines span:nth-child(2){opacity:0}
.wh-burger.is-open .wh-burger-lines span:nth-child(3){top:50%;margin-top:-.75px;transform:rotate(-45deg)}
.wh-mobile-overlay{position:fixed;inset:0;background:rgba(15,30,40,.55);opacity:0;pointer-events:none;transition:opacity .35s ease;z-index:90;-webkit-backdrop-filter:blur(8px) saturate(140%);backdrop-filter:blur(8px) saturate(140%)}
.wh-mobile-overlay.is-open{opacity:1;pointer-events:auto}
.wh-mobile-menu{position:fixed;top:0;right:0;bottom:0;width:min(420px,90vw);background:#FAF9F7;z-index:100;transform:translateX(100%);transition:transform .45s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;box-shadow:-32px 0 80px -32px rgba(0,0,0,.35)}
.wh-mobile-menu.is-open{transform:translateX(0)}
.wh-mobile-head{display:flex;align-items:center;padding:0 24px;height:80px;flex-shrink:0}
.wh-mobile-head-eyebrow{font-family:var(--font-heading);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500}
.wh-mobile-head-title{font-family:var(--font-heading);font-size:20px;font-weight:600;color:var(--text);letter-spacing:-.01em;margin-top:2px}
.wh-mobile-body{flex:1;overflow-y:auto;padding:32px 0 0;display:flex;flex-direction:column}
.wh-mobile-nav{list-style:none;padding:0 24px;margin:0;display:flex;flex-direction:column}
.wh-mobile-nav li{border-top:1px solid rgba(0,0,0,.08)}
.wh-mobile-nav li:last-child{border-bottom:1px solid rgba(0,0,0,.08)}
.wh-mobile-nav a{display:flex;align-items:center;justify-content:space-between;padding:22px 4px;font-family:var(--font-heading);font-size:24px;font-weight:500;color:var(--text);letter-spacing:-.015em;line-height:1;transition:color .2s,padding .25s cubic-bezier(.2,.8,.2,1)}
.wh-mobile-nav a::after{content:"";width:14px;height:14px;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg);opacity:.25;transition:opacity .2s,transform .25s cubic-bezier(.2,.8,.2,1)}
.wh-mobile-nav a:hover,.wh-mobile-nav a:focus-visible{color:var(--primary);padding-left:8px}
.wh-mobile-nav a:hover::after,.wh-mobile-nav a:focus-visible::after{opacity:.7;transform:rotate(45deg) translate(2px,-2px)}
.wh-mobile-nav a.active{color:var(--primary)}
.wh-mobile-meta{padding:36px 24px 0;display:flex;flex-direction:column;gap:6px}
.wh-mobile-meta-eyebrow{font-family:var(--font-heading);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:6px}
.wh-mobile-meta-row{font-size:15px;color:var(--text);line-height:1.55}
.wh-mobile-meta-row a{color:var(--text)}
.wh-mobile-meta-row a:hover{color:var(--primary)}
.wh-mobile-meta-row strong{font-family:var(--font-heading);font-weight:500;font-variant-numeric:tabular-nums}
.wh-mobile-foot{padding:24px;display:flex;flex-direction:column;gap:10px;flex-shrink:0;border-top:1px solid rgba(0,0,0,.08);background:linear-gradient(to bottom,#FAF9F7,#F4F2EE)}
.wh-mobile-foot .wh-btn{width:100%}
body.wh-no-scroll{overflow:hidden}
/* ============ SUBPAGE-SPECIFIC EXTENSIONS ============ */
.sp-hero{padding:96px 0 72px;background:#fff;border-bottom:1px solid var(--border)}
.sp-hero-inner{display:grid;grid-template-columns:1.2fr 1fr;gap:72px;align-items:center}
.sp-crumb{font-size:14px;color:var(--muted);margin-bottom:20px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sp-crumb a{color:var(--primary)}
.sp-crumb a:hover{text-decoration:underline}
.sp-hero h1{font-size:56px;letter-spacing:-.025em;margin-bottom:20px;line-height:1.05}
.sp-hero-lead{font-size:19px;color:#3A3A3A;line-height:1.6;margin-bottom:32px;max-width:560px}
.sp-hero-meta{display:flex;gap:28px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--border);margin-top:32px}
.sp-hero-meta-item{display:flex;flex-direction:column;gap:4px}
.sp-hero-meta-lbl{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500}
.sp-hero-meta-val{font-size:15px;font-weight:600;color:var(--text)}
.sp-hero-img{aspect-ratio:4/5;border-radius:20px;overflow:hidden;background:#EFF5F8;position:relative}
.sp-hero-img img{width:100%;height:100%;object-fit:cover}
.sp-hero-img svg{width:100%;height:100%;display:block}
.sp-hero-icon-bg{background:linear-gradient(145deg,#EFF5F8 0%,#D5E4ED 100%);display:flex;align-items:center;justify-content:center}
.sp-hero-icon-bg svg{width:45%;height:45%;color:var(--primary);opacity:.6}
.sp-section{padding:80px 0}
.sp-section--alt{background:#FAFBFC;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.sp-body{display:grid;grid-template-columns:1fr 380px;gap:80px;align-items:start}
.sp-prose{font-size:17px;line-height:1.75;color:#2A2A2A}
.sp-prose h2{font-size:32px;margin:0 0 20px;letter-spacing:-.02em}
.sp-prose h2:not(:first-child){margin-top:56px}
.sp-prose h3{font-size:20px;margin:36px 0 12px}
.sp-prose p{margin-bottom:18px}
.sp-prose ul{margin:0 0 24px;padding-left:0;list-style:none}
.sp-prose ul li{position:relative;padding-left:28px;margin-bottom:10px;font-size:16px;line-height:1.6}
.sp-prose ul li::before{content:"";position:absolute;left:0;top:11px;width:14px;height:2px;background:var(--primary);border-radius:2px}
.sp-prose strong{color:var(--text);font-weight:600}
.sp-aside{position:sticky;top:100px;display:flex;flex-direction:column;gap:16px}
.sp-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:28px}
.sp-card-eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:14px}
.sp-card h4{font-size:18px;margin-bottom:10px;font-weight:600}
.sp-card p{font-size:14.5px;color:var(--muted);line-height:1.6;margin-bottom:18px}
.sp-card .wh-btn{width:100%;justify-content:center}
.sp-card-list{list-style:none;padding:0;margin:0}
.sp-card-list li{display:flex;justify-content:space-between;align-items:center;padding:10px 0;font-size:14.5px;border-top:1px solid var(--border)}
.sp-card-list li:first-child{border-top:none;padding-top:0}
.sp-card-list li span:last-child{font-weight:600;font-variant-numeric:tabular-nums}
.sp-facts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:48px 0}
.sp-fact{padding:28px 24px;background:#fff;border:1px solid var(--border);border-radius:16px}
.sp-fact-num{font-size:32px;font-weight:600;color:var(--primary);letter-spacing:-.02em;line-height:1;margin-bottom:10px}
.sp-fact-lbl{font-size:14px;color:var(--muted);line-height:1.4}
.sp-faq{max-width:880px;margin:0 auto}
.sp-faq-item{border-bottom:1px solid var(--border);padding:24px 0}
.sp-faq-item:first-child{padding-top:0}
.sp-faq-q{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;cursor:pointer;font-size:18px;font-weight:600;line-height:1.4;list-style:none}
.sp-faq-q::-webkit-details-marker{display:none}
.sp-faq-q::after{content:"+";font-weight:400;font-size:22px;color:var(--primary);flex-shrink:0;line-height:1}
.sp-faq-item[open] .sp-faq-q::after{content:"–"}
.sp-faq-a{padding-top:14px;color:#3A3A3A;font-size:16px;line-height:1.7}
.sp-cta{margin:80px auto 0;padding:56px;background:linear-gradient(135deg,#1A4358 0%,#356A85 60%,#4487A6 100%);border-radius:24px;color:#fff;display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:center}
.sp-cta h3{color:#fff;font-size:28px;margin-bottom:10px}
.sp-cta p{color:rgba(255,255,255,.8);font-size:16px;max-width:480px}
.sp-cta-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.sp-cta .wh-btn--primary{background:#fff;color:var(--primary)}
.sp-cta .wh-btn--ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.sp-related{padding:80px 0;background:#fff;border-top:1px solid var(--border)}
.sp-related-head{margin:0 auto 40px}
.sp-related-head h2{font-size:28px;margin-bottom:6px}
.sp-related-head p{color:var(--muted);font-size:15px}
.sp-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0 auto}
.sp-related-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:28px;transition:border-color .2s}
.sp-related-card:hover{border-color:#B8D2DE}
.sp-related-card h3{font-size:18px;margin-bottom:8px;font-weight:600}
.sp-related-card p{font-size:14px;color:var(--muted);line-height:1.55;margin-bottom:16px}
.sp-related-link{font-size:14px;color:var(--primary);font-weight:500;display:inline-flex;gap:5px;align-items:center}
.sp-overview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1200px;margin:0 auto}
.sp-contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;max-width:1200px;margin:0 auto;align-items:start}
.sp-contact-info{display:flex;flex-direction:column;gap:14px}
.sp-form{background:#fff;border:1px solid var(--border);border-radius:20px;padding:40px}
.sp-form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.sp-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.sp-field label{font-size:13px;font-weight:600;color:var(--text)}
.sp-field input,.sp-field textarea,.sp-field select{font-family:inherit;font-size:15px;padding:12px 14px;border:1.5px solid var(--border);border-radius:10px;background:#fff;color:var(--text);transition:border-color .15s;font:inherit}
.sp-field input:focus,.sp-field textarea:focus,.sp-field select:focus{outline:none;border-color:var(--primary)}
.sp-field textarea{min-height:120px;resize:vertical}
.sp-legal-body{max-width:820px;margin:0 auto}
.sp-legal-body h2{font-size:24px;margin:48px 0 14px;letter-spacing:-.015em}
.sp-legal-body h2:first-child{margin-top:0}
.sp-legal-body h3{font-size:17px;margin:24px 0 8px;font-weight:600}
.sp-legal-body p{font-size:15px;line-height:1.7;color:#3A3A3A;margin-bottom:14px}
.sp-legal-body ul{padding-left:20px;margin-bottom:16px;font-size:15px;line-height:1.7;color:#3A3A3A}
.sp-legal-body a{color:var(--primary);text-decoration:underline}
.sp-legal-tabs{display:flex;gap:6px;margin-bottom:48px;border-bottom:1px solid var(--border);max-width:820px;margin-left:auto;margin-right:auto}
.sp-legal-tab{padding:12px 20px;font-size:14.5px;font-weight:500;color:var(--muted);border:none;background:transparent;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;font-family:inherit;text-decoration:none;display:inline-block}
.sp-legal-tab.active{color:var(--text);border-bottom-color:var(--primary)}
/* ============ TERMIN-MODAL (Iframe-Overlay) ============ */
html.wh-tm-open, html.wh-tm-open body{overflow:hidden}
#wh-termin-modal{
position:fixed;inset:0;z-index:9999;
display:none;align-items:center;justify-content:center;
padding:32px 16px;
}
#wh-termin-modal.open{display:flex}
.wh-tm-backdrop{
position:absolute;inset:0;
background:rgba(15,28,36,.58);
backdrop-filter:blur(4px);
animation:wh-tm-fade .22s ease-out;
}
.wh-tm-frame{
position:relative;
width:100%;max-width:920px;
height:min(88vh,900px);height:min(88dvh,900px);
max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);min-height:0;
background:#fff;
border-radius:18px;
box-shadow:0 30px 80px -20px rgba(15,28,36,.45),0 0 0 1px rgba(0,0,0,.05);
overflow:hidden;
animation:wh-tm-pop .26s cubic-bezier(.2,.8,.2,1);
}
.wh-tm-iframe{
width:100%;height:100%;
border:0;display:block;
background:#FBFAF7;
}
.wh-tm-close{
position:absolute;top:14px;right:14px;
width:40px;height:40px;
display:inline-flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.92);
border:1px solid rgba(0,0,0,.08);
border-radius:50%;
color:#1A1A1A;
cursor:pointer;
transition:background .15s,transform .15s;
z-index:2;
}
.wh-tm-close:hover{background:#fff;transform:scale(1.05)}
@keyframes wh-tm-fade{from{opacity:0}to{opacity:1}}
@keyframes wh-tm-pop{
from{opacity:0;transform:translateY(12px) scale(.98)}
to{opacity:1;transform:translateY(0) scale(1)}
}
/* ============ MAGAZIN — Hub + Listings + Single ============ */
.mag-hero{background:linear-gradient(180deg,#fff 0%,#FAFCFD 100%);padding:96px 0 56px}
.mag-hero-inner{max-width:760px;margin:0 auto;text-align:center}
.mag-hero-inner .sp-crumb{justify-content:center}
.mag-hero h1{font-size:52px;letter-spacing:-.025em;margin:14px 0 18px;font-weight:500;line-height:1.05}
.mag-hero .sp-hero-lead{margin:0 auto;text-align:center}
.mag-filter{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:32px}
.mag-filter-btn{display:inline-flex;align-items:center;padding:10px 20px;font-family:var(--font-heading);font-size:14px;font-weight:500;color:var(--text);background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(184,210,222,.5);border-radius:99px;text-decoration:none;transition:all .25s}
.mag-filter-btn:hover{border-color:var(--primary);color:var(--primary)}
.mag-filter-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.mag-section{padding-top:48px;padding-bottom:96px}
.mag-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.mag-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--border);border-radius:18px;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .25s}
.mag-card:hover{transform:translateY(-5px);border-color:rgba(184,210,222,.8);box-shadow:0 18px 40px -16px rgba(31,71,93,.18)}
.mag-card-img{aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,#EFF5F8,#D5E4ED)}
.mag-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.mag-card:hover .mag-card-img img{transform:scale(1.04)}
.mag-card-img--ph{display:flex;align-items:center;justify-content:center}
.mag-card-img--ph::after{content:"📰";font-size:48px;opacity:.35}
.mag-card-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.mag-card-cat{display:inline-flex;align-items:center;font-family:var(--font-heading);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:99px;margin-bottom:14px;align-self:flex-start}
.mag-card-cat[data-cat="news"]{background:#E8F5EE;color:#1F6F3D}
.mag-card-cat[data-cat="presse"]{background:#FFF7E6;color:#7A4D00}
.mag-card-cat[data-cat="ratgeber"]{background:#EDF4F8;color:#2A5F7A}
.mag-card-title{font-family:var(--font-heading);font-size:20px;font-weight:600;letter-spacing:-.015em;line-height:1.25;margin:0 0 10px;color:var(--text)}
.mag-card-excerpt{font-size:14.5px;color:#5A6B73;line-height:1.55;margin:0 0 18px;flex:1}
.mag-card-meta{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--muted);font-family:var(--font-heading);margin-top:auto}
.mag-card-link{color:var(--primary);font-weight:500;transition:gap .35s}
.mag-card:hover .mag-card-link{gap:9px}
.mag-pagination{display:flex;justify-content:center;gap:8px;margin-top:48px}
.mag-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;font-family:var(--font-heading);font-size:14px;color:var(--text);background:#fff;border:1px solid var(--border);border-radius:8px;text-decoration:none;transition:all .2s}
.mag-pagination .page-numbers:hover{border-color:var(--primary);color:var(--primary)}
.mag-pagination .page-numbers.current{background:var(--primary);color:#fff;border-color:var(--primary)}
.mag-empty{text-align:center;padding:80px 20px;max-width:520px;margin:0 auto}
.mag-empty h2{font-size:26px;font-weight:500;margin-bottom:8px}
.mag-empty p{color:var(--muted)}
/* Single-Beitrag */
.mag-single-hero{padding:72px 0 32px;text-align:center;background:linear-gradient(180deg,#fff 0%,#FAFCFD 100%)}
.mag-single-hero .sp-crumb{justify-content:center;margin-bottom:18px}
.mag-single-hero .mag-card-cat{margin-bottom:18px}
.mag-single-title{font-family:var(--font-heading);font-size:44px;letter-spacing:-.025em;line-height:1.1;font-weight:500;max-width:840px;margin:0 auto 18px}
.mag-single-meta{font-size:14px;color:var(--muted);font-family:var(--font-heading)}
.mag-single-img{margin:32px 0 56px}
.mag-single-img img{width:100%;max-width:1080px;margin:0 auto;display:block;border-radius:16px;aspect-ratio:16/9;object-fit:cover}
.mag-single-body{padding-top:0}
.mag-single-prose{max-width:760px;margin:0 auto;font-size:18px;line-height:1.75}
.mag-single-back{max-width:760px;margin:48px auto 0;padding-top:32px;border-top:1px solid var(--border)}
@media (max-width:780px){
.mag-hero{padding:56px 0 32px}
.mag-hero h1{font-size:32px}
.mag-grid{grid-template-columns:1fr;gap:18px}
.mag-section{padding-bottom:64px}
.mag-filter{margin-top:22px}
.mag-filter-btn{padding:8px 14px;font-size:13px}
.mag-single-title{font-size:28px}
.mag-single-prose{font-size:16px}
.mag-single-img img{border-radius:12px}
}
/* ============ ZAHNTECHNIK IM HAUS (Sub-Section innerhalb Behandlungsteam) ============ */
.zt-section{margin-top:96px;padding-top:80px;border-top:1px solid var(--border)}
.zt-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:880px;margin:0 auto 48px}
.zt-usp{list-style:none;padding:0;margin:0 auto;max-width:680px;display:grid;grid-template-columns:1fr 1fr;gap:14px 32px}
.zt-usp li{display:flex;align-items:flex-start;gap:10px;font-size:15px;color:var(--text);line-height:1.5}
.zt-usp li svg{color:var(--primary);flex-shrink:0;margin-top:2px}
.zt-cta{display:flex;justify-content:center;margin-top:36px}
@media (max-width:780px){
.zt-section{margin-top:64px;padding-top:48px}
.zt-grid{grid-template-columns:1fr;gap:16px;margin-bottom:32px}
.zt-usp{grid-template-columns:1fr;gap:12px}
.zt-usp li{font-size:14.5px}
}
/* ============ SUB-PAGES — Premium Liquid Glass Polish ============ */
/* Greift global auf alle Sub-Pages (Erstuntersuchung, Implantate, Wurzelbeh., Veneers, Prophylaxe, Bleaching) */
/* SP-HERO: subtile Background-Blobs für Apple-Glass-Atmosphäre */
.sp-hero{position:relative;overflow:hidden;isolation:isolate}
.sp-hero::before, .sp-hero::after{content:"";position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0}
.sp-hero::before{width:520px;height:520px;top:-180px;right:-100px;background:radial-gradient(circle, rgba(184,210,222,.4) 0%, transparent 70%)}
.sp-hero::after{width:420px;height:420px;bottom:-180px;left:5%;background:radial-gradient(circle, rgba(217,197,160,.3) 0%, transparent 70%)}
.sp-hero .wh-container{position:relative;z-index:1}
/* SP-SECTION--alt: subtiler Verlauf */
.sp-section--alt{background:linear-gradient(180deg, #FAFCFD 0%, #F4F8FB 100%);border-top:1px solid rgba(184,210,222,.4);border-bottom:1px solid rgba(184,210,222,.4)}
/* SP-CARD (Aside-Cards): Glass-Touch */
.sp-card{
background:rgba(255,255,255,.7);
-webkit-backdrop-filter:blur(20px) saturate(180%);
backdrop-filter:blur(20px) saturate(180%);
border:1px solid rgba(255,255,255,.6);
box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 8px 24px -12px rgba(31,71,93,.12);
transition:transform .35s, box-shadow .35s;
}
.sp-card:hover{box-shadow:0 1px 0 rgba(255,255,255,.85) inset, 0 12px 28px -10px rgba(31,71,93,.16)}
/* SP-FACT (Facts-Grid): Glass + Hover-Lift */
.sp-fact{
background:rgba(255,255,255,.7);
-webkit-backdrop-filter:blur(20px) saturate(180%);
backdrop-filter:blur(20px) saturate(180%);
border:1px solid rgba(255,255,255,.6);
box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 8px 24px -12px rgba(31,71,93,.12);
transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.sp-fact:hover{transform:translateY(-3px);box-shadow:0 1px 0 rgba(255,255,255,.85) inset, 0 16px 32px -12px rgba(31,71,93,.18)}
/* SP-RELATED Section: Top-Fade weiß + Bottom-Fade ins Footer-Schwarz (720px Strecke) */
.sp-related{
position:relative;overflow:hidden;isolation:isolate;
border-top:none;
padding:200px 0 200px;
background:
/* TOP- und BOTTOM-Fade je 720px */
linear-gradient(to bottom,
/* TOP-Fade in (720px) */
#fff 0,
rgba(255,255,255,.95) 90px,
rgba(255,255,255,.72) 240px,
rgba(255,255,255,.42) 420px,
rgba(255,255,255,.18) 580px,
transparent 720px,
/* MITTE */
transparent calc(100% - 720px),
/* BOTTOM-Fade ins dunkle Footer (720px) */
rgba(26,26,26,.05) calc(100% - 580px),
rgba(26,26,26,.16) calc(100% - 420px),
rgba(26,26,26,.38) calc(100% - 240px),
rgba(26,26,26,.75) calc(100% - 90px),
#1A1A1A 100%
),
/* Farbiger Original-Verlauf */
linear-gradient(135deg, #DDE9F0 0%, #E8DCC4 40%, #C8DDEA 70%, #E5C9A8 100%);
}
/* Vorherige Section: keine Border-Bottom + Footer keine Top-Border */
.sp-related + .wh-footer::before{display:none}
.sp-section--alt:has(+ .sp-related){border-bottom:none}
.sp-related::before, .sp-related::after{content:"";position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none}
.sp-related::before{width:620px;height:620px;top:-200px;right:-120px;background:radial-gradient(circle, #6FB3D2 0%, transparent 60%);opacity:.75}
.sp-related::after{width:520px;height:520px;bottom:-160px;left:5%;background:radial-gradient(circle, #E8C988 0%, transparent 60%);opacity:.6}
/* Grid = normales 3-Spalten-Grid mit Gap */
.sp-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.sp-related .wh-container{position:relative;z-index:1}
/* SP-RELATED-CARD = individuelle Apple Liquid Glass Karte */
.sp-related-card{
position:relative;
display:flex;flex-direction:column;
text-decoration:none;color:inherit;
padding:30px 28px 26px;
background:linear-gradient(135deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.18) 100%);
border:none;
border-radius:24px;
box-shadow:
inset 0 2px 0 rgba(255,255,255,.95),
inset 0 -1px 0 rgba(255,255,255,.4),
inset 0 0 0 1.5px rgba(255,255,255,.55),
0 6px 16px -4px rgba(31,71,93,.12),
0 18px 36px -10px rgba(31,71,93,.18),
0 36px 72px -20px rgba(31,71,93,.24);
transition:transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .55s cubic-bezier(.2,.8,.2,1), background .4s;
overflow:hidden;
isolation:isolate;
}
.sp-related-card::before{
content:"";position:absolute;inset:0;
border-radius:inherit;
-webkit-backdrop-filter:blur(8px) saturate(170%);
backdrop-filter:blur(8px) saturate(170%);
filter:url(#wh-lg-distort);
pointer-events:none;
z-index:-1;
}
.sp-related-card::after{
content:"";position:absolute;top:1px;left:10%;right:10%;height:1px;
background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.95) 50%, transparent 100%);
pointer-events:none;z-index:2;
}
.sp-related-card > *{position:relative;z-index:1}
.sp-related-card:hover{
transform:translateY(-8px);
background:linear-gradient(135deg, rgba(255,255,255,.36) 0%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.28) 100%);
box-shadow:
inset 0 2px 0 rgba(255,255,255,1),
inset 0 -1px 0 rgba(255,255,255,.55),
inset 0 0 0 1.5px rgba(255,255,255,.7),
0 10px 24px -4px rgba(31,71,93,.16),
0 28px 56px -12px rgba(31,71,93,.24),
0 52px 96px -24px rgba(31,71,93,.32);
}
.sp-related-card:hover::before{filter:url(#wh-lg-distort-hover);-webkit-backdrop-filter:blur(10px) saturate(190%);backdrop-filter:blur(10px) saturate(190%)}
.sp-related-card .sp-related-line{display:none}
.sp-related-card h3{font-size:20px;margin:0 0 10px;font-weight:600;letter-spacing:-.012em;line-height:1.25;position:relative;z-index:1}
.sp-related-card p{font-size:14.5px;color:#5A6B73;line-height:1.55;margin:0 0 16px;flex:1;position:relative;z-index:1}
.sp-related-link{font-size:14px;color:var(--primary);font-weight:500;display:inline-flex;gap:5px;align-items:center;align-self:flex-start;transition:color .25s, gap .35s;position:relative;z-index:1}
.sp-related-card:hover .sp-related-link{color:#3a7591;gap:9px}
/* SP-CTA: Premium Box-Shadow + subtle Highlight */
.sp-cta{box-shadow:0 24px 60px -24px rgba(26,67,88,.45);position:relative;overflow:hidden}
.sp-cta::before{content:"";position:absolute;top:-50%;right:-30%;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle, rgba(255,255,255,.15) 0%, transparent 70%);pointer-events:none}
.sp-cta > *{position:relative;z-index:1}
/* SP-HERO-IMG: Polish */
.sp-hero-img{box-shadow:0 24px 56px -24px rgba(31,71,93,.28)}
@media (prefers-reduced-motion: reduce){
.sp-card,.sp-fact,.sp-related-card,.sp-related-card::after{transition:none}
.sp-fact:hover,.sp-related-card:hover{transform:none}
}
/* ============ RESPONSIVE BREAKPOINTS ============ */
@media (max-width:1024px){
:root{--pad-x:24px}
h1{font-size:48px}
h2{font-size:36px}
.hp-hero h1{font-size:48px}
/* Tablet/Mobile: Hero als Flex-Column mit reduziertem Aufbau:
Address > H1 > Bild > Termin > Anrufen > Trust > Team
Eyebrow + Lead auf Mobile versteckt damit der Kern (Termin/Anrufen/Team)
ohne langen Scroll erreichbar ist. */
.hp-hero-inner{display:flex;flex-direction:column;grid-template-columns:none;gap:18px;padding:32px 0 48px}
/* :not() schliesst Rating UND Bild aus damit beide ihre eigene display behalten */
.hp-hero-inner > div:not(.hp-hero-img):not(.hp-hero-google-rating):not(.hp-hero-hours){display:contents}
/* Eyebrow auf Mobile WEG - war Doppelung zur Adresse darunter (User-Feedback).
SEO-Keywords kommen jetzt aus Title-Tag + H2s in der Page. */
.hp-hero-inner .wh-eyebrow{display:none}
/* width:100% explizit weil display:contents-Parent das auto-stretch verhindert */
.hp-hero-inner .hp-hero-address{display:flex;width:100%;justify-content:flex-start;order:1;margin:0;align-self:flex-start;font-size:14.5px}
.hp-hero-inner h1{order:2;margin:0}
.hp-hero-inner .hp-hero-lead{display:none} /* Lead-Text weg auf Mobile - H1 sagt alles */
/* Bild bei 15px vom Bildschirmrand: Container hat 10px, also +5px margin fuer 15 total */
.hp-hero-img{order:3;margin:0 5px;aspect-ratio:16/10;border-radius:14px;width:auto}
/* Google-Rating UNTER Bild, linksbuendig am Bild ausgerichtet */
.hp-hero-inner .hp-hero-google-rating{
display:flex;order:4;margin:4px 5px 0;align-self:flex-start;
padding:4px 0;
}
.hp-hero-inner .hp-hero-cta{order:5;margin:0;max-width:none}
/* Standalone Trust-Strip weg auf Mobile - Google-Rating ersetzt es */
.hp-hero-inner .hp-hero-trust{display:none}
/* Address-Overlay aufm Bild aus (Adresse ist oben als pin-text) */
.hp-hero-img .hp-card{display:none}
.hp-usp-grid{grid-template-columns:1fr 1fr;gap:24px}
.hp-story{grid-template-columns:1fr;gap:40px}
.hp-treat-grid{grid-template-columns:1fr 1fr}
.hp-values-grid{grid-template-columns:1fr 1fr}
.hp-rev-grid{grid-template-columns:1fr 1fr}
.hp-book{grid-template-columns:1fr;padding:48px;gap:40px}
.hp-anf{grid-template-columns:1fr}
.team-intro-inner{gap:14px}
.team-intro h2{font-size:28px;font-weight:500;line-height:1.18}
.team-intro h2 br{display:none}
.team-intro-lead{font-size:15.5px;line-height:1.55}
.inhaber-grid{grid-template-columns:1fr;gap:24px}
.inhaber-card[data-tag="inhaber"]{order:1}
.inhaber-card[data-tag="senior"]{order:2}
.behandeln-grid{grid-template-columns:1fr 1fr}
.praxis-team{grid-template-columns:1fr}
.praxis-team-body{padding:36px 28px}
.wh-footer-top{grid-template-columns:1fr 1fr;gap:40px}
.wh-nav{gap:18px}
.wh-nav-phone{display:none}
.wh-nav a{font-size:14px}
.sp-hero-inner{grid-template-columns:1fr;gap:40px}
.sp-hero h1{font-size:42px}
.sp-body{grid-template-columns:1fr;gap:40px}
.sp-aside{position:static}
.sp-facts-grid{grid-template-columns:1fr}
.sp-overview-grid{grid-template-columns:1fr 1fr}
.sp-contact-grid{grid-template-columns:1fr}
.sp-cta{grid-template-columns:1fr;padding:40px;gap:20px;text-align:center}
.sp-cta-btns{justify-content:center}
.sp-related-grid{grid-template-columns:1fr}
}
@media (max-width:780px){
/* Mobile: Container-Padding 10px (User-Korrektur: 5 war zu eng fuer Text).
Bilder kommen via Margin auf 15px vom Bildschirmrand fuer Rahmen-Look. */
:root{--pad-x:10px}
/* Stats 2x2 auf Mobile statt 4x1 (sonst zu schmal) */
.hp-story-stats{grid-template-columns:1fr 1fr;gap:18px}
h1{font-size:32px;text-wrap:balance;-webkit-text-wrap:balance;line-height:1.08}
h2{font-size:26px;text-wrap:balance;-webkit-text-wrap:balance;line-height:1.18}
.wh-nav{display:none !important}
.wh-burger{display:inline-flex !important}
/* !important hier zwingend, weil .wh-btn{display:inline-flex !important} sonst Vorrang hat */
.wh-header .wh-btn--primary{display:none !important}
.wh-header .wh-nav-phone{display:none !important}
/* Hero selbst behaelt margin-top:-80px (steht unterm sticky-Header).
padding-top muss mindestens Header-Hoehe (80px) sein damit Content nicht verdeckt wird. */
.hp-hero{padding-top:96px}
.hp-hero-inner{padding:16px 0 48px;gap:14px}
/* H1 deutlich kleiner auf Mobile - User-Wunsch: nicht so dominant trotz H1-Status */
.hp-hero h1{font-size:26px;line-height:1.15;letter-spacing:-.018em}
.hp-hero h1 br{display:none} /* Br auf mobile killen, lass den Text natuerlich brechen */
.hp-hero-lead{font-size:16px;line-height:1.55;margin-top:0;max-width:none}
/* Trust 1-Zeile MAXIMAL kompakt: nur "★★★★ 4,5 aus 244 Google Bewertungen".
"Seit 1962" Item versteckt - war Redundanz mit Address-Bereich (User-Feedback). */
.hp-hero-trust{
flex-direction:row;
align-items:center;
justify-content:flex-start;
gap:0;
margin:12px 0 0;
padding:12px 0 0;
border-top:1px solid var(--border);
flex-wrap:nowrap;
}
/* "Seit 1962" Item komplett ausblenden auf Mobile */
.hp-hero-trust .hp-trust-item:first-child{display:none}
.hp-hero-trust .hp-trust-item + .hp-trust-item{padding:0;border:0!important}
.hp-trust-block{flex-direction:row;align-items:center;gap:8px}
.hp-trust-rating{gap:6px}
.hp-trust-rating-num{font-size:15px;font-weight:600}
.hp-trust-stars svg{width:14px;height:14px}
.hp-trust-label{font-size:12.5px;color:var(--muted);text-transform:none;letter-spacing:0;margin-top:0;font-weight:400;white-space:nowrap}
.wh-eyebrow{font-size:12px;margin-bottom:8px}
.hp-usp-grid{grid-template-columns:1fr}
.hp-treat-grid{grid-template-columns:1fr}
.hp-values-grid{grid-template-columns:1fr}
.hp-rev-grid{grid-template-columns:1fr}
.hp-book{padding:32px}
.wh-section{padding:64px 0}
.wh-section-head{margin-bottom:40px}
.team-intro{padding:48px 0 16px}
.team-intro h2{font-size:26px;font-weight:500}
.behandeln-grid{grid-template-columns:1fr}
.wh-cta-inner{grid-template-columns:1fr;gap:24px;text-align:center}
.wh-cta-btns{justify-content:center;flex-direction:column;align-items:stretch}
.wh-cta-btns .wh-btn{width:100%;justify-content:center}
.hp-hero-cta{flex-direction:column;align-items:stretch;width:100%;max-width:none;gap:10px}
/* Mobile-Buttons "fett" + Inhalt zentriert (Icon+Text als Block in der Mitte) */
.hp-hero-cta .wh-btn{
width:100%;
justify-content:center !important;
flex:0 0 auto !important;
}
.hp-hero-cta .wh-btn--lg{
height:62px !important;
padding:0 22px !important;
font-size:16.5px !important;
border-radius:14px !important;
gap:14px !important;
font-weight:500 !important;
}
.hp-hero-cta .wh-btn--lg svg{width:20px;height:20px;flex-shrink:0}
/* Phone-Button: Telefon-Nummer mit tabular-nums fuer saubere Zahnabstaende */
.hp-hero-cta-phone .wh-btn-text{font-variant-numeric:tabular-nums;letter-spacing:.005em}
.wh-footer{padding:64px 0 28px}
.wh-footer-top{grid-template-columns:1fr;gap:40px;padding-bottom:40px}
.wh-footer-bottom{flex-direction:column;align-items:flex-start;gap:8px}
/* Trust-Regeln stehen oben (Zeile 618ff, horizontal kompakt) - keine Doppelung mehr */
.hp-card{padding:12px 16px;gap:10px}
.hp-card-addr{font-size:14px}
.sp-hero{padding:56px 0 48px}
.sp-hero h1{font-size:32px}
.sp-section{padding:48px 0}
.sp-prose h2{font-size:24px}
.sp-form{padding:28px}
.sp-form-row{grid-template-columns:1fr}
.sp-cta{padding:32px}
.sp-overview-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
#wh-termin-modal{padding:0}
.wh-tm-frame{
max-width:none;
height:100vh;height:100dvh;
max-height:none;min-height:0;
border-radius:0;
}
}
@media (max-width:480px){
/* Auf <=480px: --pad-x bleibt 5px wie in 780px-Breakpoint definiert */
h1{font-size:28px}
.hp-hero h1{font-size:28px;line-height:1.1}
.hp-hero-lead{font-size:15.5px}
.hp-hero-inner{padding:20px 0 48px;gap:28px}
.wh-section{padding:48px 0}
.wh-section-head{margin-bottom:32px}
.hp-trust-num,.hp-trust-rating-num{font-size:20px}
/* Inhaber-Card: aggressiv reduziertes inner padding (User: max Flaeche nutzen) */
.inhaber-name{font-size:23px;margin:20px 14px 6px}
.inhaber-spec,.inhaber-bio,.inhaber-meta{margin-left:14px;margin-right:14px}
.inhaber-meta{padding-left:0;padding-right:0;padding-bottom:20px;padding-top:14px}
.inhaber-bio{font-size:15.5px;line-height:1.6;margin-bottom:18px}
/* Anti-Overflow auf inhaber-meta-row: min-width killen, Text wraps */
.inhaber-meta-row{flex-direction:column;gap:2px}
.inhaber-meta-row b{min-width:0;width:100%}
/* Praxis-Adresse darf brechen wenn zu eng */
.hp-card-addr{white-space:normal}
.hp-card{flex-direction:column;align-items:flex-start;gap:6px;padding:12px 14px}
/* Rating-Overlay aufm Bild bleibt HORIZONTAL trotz <480 Override */
.hp-card--rating{flex-direction:row !important;align-items:center !important;justify-content:center !important;flex-wrap:nowrap !important;gap:10px !important}
/* Treatment + Values + Reviews + Anfahrt: alle inner padding reduziert */
/* Mobile: Grid Single-Column, Padding halbiert */
.hp-treat-section{padding:160px 0 160px}
.hp-treat-grid{grid-template-columns:1fr;gap:16px}
/* sp-related Mobile padding ebenfalls */
.sp-related{padding:160px 0 160px}
.hp-treat-card{padding:24px 22px;min-height:0;border-radius:20px}
.hp-treat-icon-wrap{width:48px;height:48px;border-radius:14px;margin-bottom:18px}
.hp-treat-icon{width:24px;height:24px}
.hp-treat-card h3{font-size:20px}
.hp-treat-card p{font-size:14.5px}
.hp-treat-eyebrow{font-size:10.5px}
/* Mobile: Blobs dezenter */
.hp-treat-blob{filter:blur(60px);opacity:.5}
.hp-treat-blob--1{width:300px;height:300px}
.hp-treat-blob--2{width:340px;height:340px}
.hp-treat-blob--3{width:280px;height:280px}
/* Mobile sp-related */
.sp-related-grid{grid-template-columns:1fr;gap:16px}
.sp-related-card{padding:24px 22px;border-radius:20px}
.hp-values-card{padding:24px 20px}
.hp-rev-card{padding:20px 18px}
.hp-anf-card{padding:18px 20px}
.praxis-team-body{padding:22px 18px}
.praxis-team-list{grid-template-columns:1fr}
.wh-cta{padding:48px 0}
.wh-cta h2{font-size:28px}
.wh-footer{padding:40px 0 20px}
.wh-footer-top{padding-bottom:28px;gap:24px}
/* Inhaber-Pill kompakter, darf brechen */
.inhaber-card::before{padding:5px 10px;font-size:10px;letter-spacing:.05em;top:18px;right:18px}
/* Reviews-Header darf brechen */
.hp-rev-rating{flex-wrap:wrap;justify-content:center}
/* Behandeln-Cards (Behandlungsteam) inner padding reduziert */
.behandeln-card{padding:24px 18px}
/* Section-Heads + Container etwas mehr "atmen" lassen wenn Container nur 5px hat */
.wh-section-head{padding:0 12px}
}
/* WP Admin bar fix */
body.admin-bar .wh-header{top:32px}
@media (max-width:782px){body.admin-bar .wh-header{top:46px}}
/* Screen reader only */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}
/* ============================================================
TREATMENT TABS — Sticky Sub-Page Navigation
============================================================ */
.wh-treatment-tabs{
position:sticky; top:0; z-index:30;
background:rgba(255,255,255,.82);
-webkit-backdrop-filter:blur(20px) saturate(180%);
backdrop-filter:blur(20px) saturate(180%);
border-bottom:1px solid rgba(15,23,42,.06);
padding:14px 0;
box-shadow:0 1px 0 rgba(15,23,42,.02);
}
.wh-treatment-tabs-inner{
display:flex; align-items:center; gap:24px; flex-wrap:nowrap;
min-width:0;
}
.wh-treatment-tabs-back{
display:inline-flex; align-items:center; gap:8px;
font-family:var(--font-heading,'Instrument Sans',sans-serif);
font-size:12px; letter-spacing:.08em; text-transform:uppercase;
color:#5A6B73; font-weight:600; text-decoration:none;
flex-shrink:0; white-space:nowrap;
transition:color .2s ease;
}
.wh-treatment-tabs-back:hover{ color:var(--primary,#4487A6); }
.wh-treatment-tabs-back svg{ flex-shrink:0; }
.wh-treatment-tabs-list{
display:flex; gap:6px; flex:1; min-width:0;
overflow-x:auto; -webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.wh-treatment-tabs-list::-webkit-scrollbar{ display:none; }
.wh-treatment-tab{
display:inline-flex; align-items:center;
padding:9px 18px; border-radius:999px;
font-family:var(--font-heading,'Instrument Sans',sans-serif);
font-size:14px; font-weight:500; line-height:1;
color:#5A6B73; text-decoration:none;
background:rgba(15,23,42,.04);
white-space:nowrap; flex-shrink:0;
transition:background .2s ease, color .2s ease, transform .2s ease;
}
.wh-treatment-tab:hover{
background:rgba(15,23,42,.08);
color:var(--text,#1A1A1A);
}
.wh-treatment-tab.is-active{
background:var(--primary,#4487A6);
color:#fff;
cursor:default;
}
@media (max-width:780px){
.wh-treatment-tabs{ padding:10px 0; }
.wh-treatment-tabs-inner{ flex-direction:column; align-items:flex-start; gap:8px; }
.wh-treatment-tabs-list{ width:100%; padding:2px 0; }
.wh-treatment-tab{ padding:8px 14px; font-size:13.5px; }
.wh-treatment-tabs-back{ font-size:11px; }
}
/* Anchor-Nav auf /behandlungen/ — sticky Kategorie-Reiter */
.wh-cat-anchor-nav{
position:sticky; top:0; z-index:30;
background:rgba(255,255,255,.82);
-webkit-backdrop-filter:blur(20px) saturate(180%);
backdrop-filter:blur(20px) saturate(180%);
border-bottom:1px solid rgba(15,23,42,.06);
padding:14px 0;
}
.wh-cat-anchor-nav-inner{
display:flex; gap:6px; overflow-x:auto;
-webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.wh-cat-anchor-nav-inner::-webkit-scrollbar{ display:none; }
.wh-cat-anchor-nav-inner a{
padding:9px 18px; border-radius:999px;
font-family:var(--font-heading,'Instrument Sans',sans-serif);
font-size:14px; font-weight:500; line-height:1;
color:#5A6B73; text-decoration:none;
background:rgba(15,23,42,.04);
white-space:nowrap; flex-shrink:0;
transition:background .2s ease, color .2s ease;
}
.wh-cat-anchor-nav-inner a:hover{
background:rgba(15,23,42,.08);
color:var(--text,#1A1A1A);
}
@media (max-width:780px){
.wh-cat-anchor-nav{ padding:10px 0; }
.wh-cat-anchor-nav-inner a{ padding:8px 14px; font-size:13.5px; }
}
/* ============================================================
PROPHYLAXE — Zwei-Varianten Vergleich (Standard vs Intensiv)
============================================================ */
.prophy-variants{
display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
gap:24px; max-width:980px; margin:0 auto;
}
.prophy-variant{
position:relative;
background:#fff;
border:1px solid rgba(15,23,42,.08);
border-radius:24px;
padding:36px 32px 32px;
display:flex; flex-direction:column;
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.prophy-variant:hover{
transform:translateY(-3px);
box-shadow:0 18px 40px -18px rgba(15,23,42,.18);
border-color:rgba(68,135,166,.25);
}
.prophy-variant--premium{
background:linear-gradient(180deg, rgba(68,135,166,.04) 0%, rgba(157,200,221,.06) 100%);
border-color:rgba(68,135,166,.22);
}
.prophy-variant--premium::before{
content:'Empfohlen bei Parodontitis-Risiko';
position:absolute; top:-13px; left:50%; transform:translateX(-50%);
background:var(--primary,#4487A6); color:#fff;
padding:5px 14px; border-radius:999px;
font-family:var(--font-heading,'Instrument Sans',sans-serif);
font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
white-space:nowrap;
}
.prophy-variant-eyebrow{
display:inline-block;
font-family:var(--font-heading,'Instrument Sans',sans-serif);
font-size:11px; font-weight:600; letter-spacing:.12em;
text-transform:uppercase; color:#5A6B73;
margin-bottom:10px;
}
.prophy-variant--premium .prophy-variant-eyebrow{ color:var(--primary,#4487A6); }
.prophy-variant-title{
font-family:var(--font-heading,'Instrument Sans',sans-serif);
font-size:24px; font-weight:600; line-height:1.2;
color:var(--text,#1A1A1A); margin:0 0 16px;
letter-spacing:-.018em;
}
.prophy-variant-price{
font-family:var(--font-heading,'Instrument Sans',sans-serif);
font-size:38px; font-weight:600; line-height:1; color:var(--text,#1A1A1A);
letter-spacing:-.02em; margin-bottom:24px;
display:flex; align-items:baseline; gap:8px;
}
.prophy-variant-price-from{
font-size:14px; font-weight:500; color:#5A6B73;
letter-spacing:0;
}
.prophy-variant-list{
list-style:none; padding:0; margin:0 0 28px; flex:1;
}
.prophy-variant-list li{
position:relative; padding:10px 0 10px 26px;
font-size:15px; line-height:1.55; color:#3F4B53;
border-bottom:1px solid rgba(15,23,42,.06);
}
.prophy-variant-list li:last-child{ border-bottom:0; }
.prophy-variant-list li::before{
content:''; position:absolute; left:0; top:16px;
width:14px; height:14px;
background:url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
.prophy-variant-list strong{ color:var(--text,#1A1A1A); font-weight:600; }
.prophy-variant-cta{ width:100%; justify-content:center; }
@media (max-width:780px){
.prophy-variants{ grid-template-columns:1fr; gap:20px; }
.prophy-variant{ padding:30px 24px 24px; }
.prophy-variant-title{ font-size:21px; }
.prophy-variant-price{ font-size:32px; }
}
/* ============================================================
PZR INTENSIV-SPOTLIGHT — Premium-Sektion für Dentalhygienikerin
============================================================ */
.pzr-spotlight{
position:relative;
padding:120px 0 110px;
background:linear-gradient(180deg, #0E2230 0%, #15364A 60%, #1A4258 100%);
color:#E8EFF3;
overflow:hidden;
scroll-margin-top:90px;
}
.pzr-spotlight-bg{
position:absolute; inset:0; pointer-events:none; overflow:hidden;
}
.pzr-spotlight-blob{
position:absolute; border-radius:50%; filter:blur(80px); opacity:.55;
}
.pzr-spotlight-blob--1{
top:-15%; left:-10%; width:540px; height:540px;
background:radial-gradient(circle at center, rgba(68,135,166,.85), rgba(68,135,166,0) 70%);
}
.pzr-spotlight-blob--2{
bottom:-20%; right:-8%; width:620px; height:620px;
background:radial-gradient(circle at center, rgba(157,200,221,.55), rgba(157,200,221,0) 70%);
}
.pzr-spotlight-blob--3{
top:35%; right:30%; width:380px; height:380px;
background:radial-gradient(circle at center, rgba(122,93,184,.35), rgba(122,93,184,0) 70%);
}
.pzr-spotlight .wh-container{ position:relative; z-index:1; }
.pzr-spotlight-head{
text-align:center; max-width:760px; margin:0 auto 64px;
}
.pzr-spotlight-eyebrow{
display:inline-flex; align-items:center; gap:8px;
padding:7px 16px; border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
font-family:var(--font-heading,'Instrument Sans',sans-serif);
font-size:12px; font-weight:600; letter-spacing:.08em;
text-transform:uppercase; color:rgba(255,255,255,.92);
margin-bottom:24px;
}
.pzr-spotlight-eyebrow svg{ color:#9DC8DD; }
.pzr-spotlight-h2{
font-family:var(--font-heading,'Instrument Sans',sans-serif);
font-size:clamp(40px, 6vw, 68px);
font-weight:600; line-height:1.05;
letter-spacing:-.025em; color:#fff;
margin:0 0 22px;
}
.pzr-spotlight-lead{
font-size:19px; line-height:1.6;
color:rgba(232,239,243,.82);
margin:0 auto; max-width:660px;
}
.pzr-spotlight-lead strong{ color:#fff; font-weight:600; }
.pzr-spotlight-grid{
display:grid; grid-template-columns:minmax(0, 1.45fr) minmax(320px, 1fr);
gap:48px; align-items:start; max-width:1180px; margin:0 auto;
}
/* Features */
.pzr-spotlight-features{
display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
gap:18px; margin-bottom:36px;
}
.pzr-spotlight-feat{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.09);
-webkit-backdrop-filter:blur(14px) saturate(140%);
backdrop-filter:blur(14px) saturate(140%);
border-radius:18px;
padding:22px 22px 20px;
transition:background .3s ease, border-color .3s ease, transform .3s ease;
}
.pzr-spotlight-feat:hover{
background:rgba(255,255,255,.08);
border-color:rgba(157,200,221,.28);
transform:translateY(-2px);
}
.pzr-spotlight-feat-icon{
width:38px; height:38px; border-radius:11px;
background:linear-gradient(135deg, rgba(68,135,166,.4), rgba(157,200,221,.25));
border:1px solid rgba(157,200,221,.3);
display:flex; align-items:center; justify-content:center;
color:#9DC8DD; margin-bottom:14px;
}
.pzr-spotlight-feat-icon svg{ width:18px; height:18px; }
.pzr-spotlight-feat h4{
font-family:var(--font-heading,'Instrument Sans',sans-serif);
font-size:17px; font-weight:600; line-height:1.25;
color:#fff; margin:0 0 8px;
letter-spacing:-.012em;
}
.pzr-spotlight-feat p{
font-size:14px; line-height:1.55;
color:rgba(232,239,243,.7); margin:0;
}
/* Quote */
.pzr-spotlight-quote{
position:relative;
padding:30px 32px 26px 70px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
border-radius:18px;
}
.pzr-spotlight-quote-mark{
position:absolute; top:24px; left:22px;
color:rgba(157,200,221,.45);
}
.pzr-spotlight-quote p{
font-size:18px; line-height:1.55;
color:rgba(232,239,243,.92);
font-style:italic;
margin:0 0 12px;
}
.pzr-spotlight-quote-author{
display:block; font-family:var(--font-heading,'Instrument Sans',sans-serif);
font-size:13px; letter-spacing:.06em; text-transform:uppercase;
color:rgba(157,200,221,.85); font-weight:600;
}
/* Booking-Card */
.pzr-spotlight-card{
position:sticky; top:90px;
background:rgba(255,255,255,.96);
-webkit-backdrop-filter:blur(20px) saturate(180%);
backdrop-filter:blur(20px) saturate(180%);
border-radius:22px;
padding:34px 28px 28px;
color:#1A1A1A;
box-shadow:0 30px 70px -25px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
}
.pzr-spotlight-card-badge{
position:absolute; top:-12px; left:50%; transform:translateX(-50%);
background:linear-gradient(135deg, #4487A6, #5B9CC2);
color:#fff;
padding:6px 16px; border-radius:999px;
font-family:var(--font-heading,'Instrument Sans',sans-serif);
font-size:11px; font-weight:600; letter-spacing:.1em;
text-transform:uppercase;
box-shadow:0 6px 16px -4px rgba(68,135,166,.5);
white-space:nowrap;
}
.pzr-spotlight-card-avatar{
width:88px; height:88px; border-radius:50%;
background:linear-gradient(135deg, #4487A6, #9DC8DD);
color:#fff;
display:flex; align-items:center; justify-content:center;
font-family:var(--font-heading,'Instrument Sans',sans-serif);
font-size:32px; font-weight:600; letter-spacing:.04em;
margin:8px auto 16px;
box-shadow:0 12px 28px -10px rgba(68,135,166,.5);
}
.pzr-spotlight-card-name{
font-family:var(--font-heading,'Instrument Sans',sans-serif);
font-size:22px; font-weight:600; text-align:center;
color:#1A1A1A; margin-bottom:4px; letter-spacing:-.015em;
}
.pzr-spotlight-card-role{
text-align:center; font-size:13px; letter-spacing:.06em;
text-transform:uppercase; color:#5A6B73; font-weight:600;
margin-bottom:24px;
}
.pzr-spotlight-card-list{
list-style:none; padding:0; margin:0 0 24px;
border-top:1px solid rgba(15,23,42,.08);
}
.pzr-spotlight-card-list li{
display:flex; justify-content:space-between; gap:16px;
padding:11px 0; align-items:flex-start;
border-bottom:1px solid rgba(15,23,42,.06);
font-size:14px; line-height:1.45;
}
.pzr-spotlight-card-list li:last-child{ border-bottom:0; }
.pzr-spotlight-card-list li > span{
color:#5A6B73; font-weight:500; flex-shrink:0;
}
.pzr-spotlight-card-list li > strong{
color:#1A1A1A; font-weight:600; text-align:right;
font-family:var(--font-heading,'Instrument Sans',sans-serif);
}
.pzr-spotlight-card-cta{
width:100%; justify-content:center; margin-bottom:10px;
}
.pzr-spotlight-card-phone{
display:block; text-align:center; padding:8px 0;
font-size:13.5px; color:#5A6B73; text-decoration:none;
transition:color .2s ease;
}
.pzr-spotlight-card-phone:hover{ color:var(--primary,#4487A6); }
.pzr-spotlight-card-phone strong{
color:var(--text,#1A1A1A); font-weight:600;
font-family:var(--font-heading,'Instrument Sans',sans-serif);
}
.pzr-spotlight-card-foot{
margin-top:16px; padding-top:16px;
border-top:1px solid rgba(15,23,42,.06);
display:flex; align-items:flex-start; gap:10px;
font-size:12.5px; line-height:1.45; color:#5A6B73;
}
.pzr-spotlight-card-foot svg{
flex-shrink:0; margin-top:2px; color:#3B7A4F;
}
@media (max-width:980px){
.pzr-spotlight-grid{ grid-template-columns:1fr; gap:36px; }
.pzr-spotlight-card{ position:static; max-width:520px; margin:0 auto; }
}
@media (max-width:680px){
.pzr-spotlight{ padding:84px 0 78px; }
.pzr-spotlight-head{ margin-bottom:40px; }
.pzr-spotlight-features{ grid-template-columns:1fr; gap:14px; }
.pzr-spotlight-feat{ padding:20px 20px 18px; }
.pzr-spotlight-quote{ padding:24px 22px 22px 60px; }
.pzr-spotlight-quote p{ font-size:16px; }
.pzr-spotlight-card{ padding:30px 22px 22px; }
}
/* ============================================================
TEAM-PAGE — Hero, Anchor-Nav, Org-Cards, Tasks, Zust-Tags
============================================================ */
.team-hero{
padding:96px 0 72px;
background:#fff;
border-bottom:1px solid var(--border);
position:relative;
overflow:hidden;
isolation:isolate;
}
.team-hero::before{
content:""; position:absolute;
width:520px; height:520px;
top:-180px; right:-100px;
background:radial-gradient(circle, rgba(184,210,222,.4) 0%, transparent 70%);
border-radius:50%; filter:blur(90px);
pointer-events:none; z-index:0;
}
.team-hero::after{
content:""; position:absolute;
width:420px; height:420px;
bottom:-180px; left:5%;
background:radial-gradient(circle, rgba(217,197,160,.3) 0%, transparent 70%);
border-radius:50%; filter:blur(90px);
pointer-events:none; z-index:0;
}
.team-hero .wh-container{position:relative; z-index:1;}
/* Anchor-Nav — sticky Pills */
.team-anchor-nav{
position:sticky; top:80px; z-index:30;
background:rgba(255,255,255,.92);
-webkit-backdrop-filter:blur(20px) saturate(180%);
backdrop-filter:blur(20px) saturate(180%);
border-bottom:1px solid var(--border);
padding:16px 0;
}
.team-anchor-nav-inner{
display:flex; gap:8px; flex-wrap:nowrap;
overflow-x:auto; -webkit-overflow-scrolling:touch;
scrollbar-width:none;
justify-content:center;
}
.team-anchor-nav-inner::-webkit-scrollbar{display:none}
.team-anchor-nav a{
display:inline-flex; align-items:center;
padding:9px 18px;
font-family:var(--font-heading,'Instrument Sans',sans-serif);
font-size:14px; font-weight:500;
color:var(--text); text-decoration:none;
background:rgba(15,23,42,.04);
border-radius:99px;
white-space:nowrap; flex-shrink:0;
transition:background .2s, color .2s;
}
.team-anchor-nav a:hover{
background:rgba(15,23,42,.08);
color:var(--primary);
}
/* Org-Cards — drei Bereiche */
.team-org{
display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
gap:24px; margin-top:48px;
}
.team-org-card{
background:#fff; border:1px solid var(--border);
border-radius:18px; padding:32px 28px;
display:flex; flex-direction:column;
}
.team-org-card .team-org-eyebrow{
display:block;
font-size:12px; letter-spacing:.06em; text-transform:uppercase;
color:var(--primary); font-weight:600;
margin-bottom:10px;
}
.team-org-card h3{
font-size:22px; margin-bottom:14px;
letter-spacing:-.01em;
}
.team-org-card p{
font-size:15px; color:#3A3A3A;
line-height:1.65; margin-bottom:20px; flex:1;
}
.team-org-card ul{
list-style:none; padding:0; margin:0;
border-top:1px solid var(--border);
}
.team-org-card li{
font-size:14.5px; color:var(--text);
padding:10px 0;
border-bottom:1px solid var(--border);
display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.team-org-card li:last-child{border-bottom:none}
.team-org-card li b{font-weight:500}
.team-org-card li > span{
font-size:12.5px; color:var(--muted); text-align:right;
}
.team-org-li-left{
display:flex; align-items:center; gap:10px;
min-width:0; flex:1;
}
.team-tasks-avatar.team-org-avatar{
width:32px; height:32px; margin:0;
flex-shrink:0; font-size:11px;
}
/* Tasks-Matrix — wer macht was */
.team-tasks{
margin-top:48px; border:1px solid var(--border);
border-radius:18px; overflow:hidden; background:#fff;
}
.team-tasks-row{
display:grid; grid-template-columns:1.2fr 130px 2fr;
gap:24px; padding:18px 28px;
border-bottom:1px solid var(--border);
align-items:center;
}
.team-tasks-row:last-child{border-bottom:none}
.team-tasks-row > b{
font-size:15.5px; color:var(--text); font-weight:600;
}
.team-tasks-row > span{
font-size:14.5px; color:#3A3A3A; line-height:1.55;
}
.team-tasks-people{
display:flex; align-items:center; min-height:40px;
}
.team-tasks-avatar{
display:inline-flex; align-items:center; justify-content:center;
width:40px; height:40px; border-radius:50%;
border:2.5px solid #fff;
box-shadow:0 3px 8px -2px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.04);
margin-left:-10px; flex-shrink:0;
background:linear-gradient(135deg,#EFF5F8,#D5E4ED);
font-family:var(--font-heading);
font-size:13px; font-weight:600;
color:var(--primary); letter-spacing:.02em;
text-transform:uppercase;
}
.team-tasks-avatar:first-child{margin-left:0}
.team-tasks-avatar--photo{
background-size:cover; background-position:center top;
font-size:0;
}
/* Behandeln Zustaendig-Tag */
.behandeln-card .behandeln-zust{
margin-top:14px; padding-top:14px;
border-top:1px solid var(--border);
font-size:13px; color:#3A3A3A; line-height:1.55;
}
.behandeln-card .behandeln-zust b{
display:block;
letter-spacing:.06em; text-transform:uppercase;
font-weight:600; color:var(--primary);
font-size:11px; margin-bottom:4px;
}
/* === Mobile Breakpoints === */
@media (max-width:1024px){
.team-org{grid-template-columns:1fr; gap:16px}
}
@media (max-width:780px){
.team-hero{padding:64px 0 48px}
.team-anchor-nav{position:relative; top:0; padding:12px 0}
.team-anchor-nav-inner{justify-content:flex-start}
.team-anchor-nav a{padding:8px 14px; font-size:13.5px}
.team-tasks-row{
grid-template-columns:1fr;
gap:6px; padding:14px 18px;
}
.team-tasks-row > b{font-size:14.5px}
.team-tasks-row > span{font-size:14px}
.team-tasks-people{min-height:0; margin:2px 0}
.team-tasks-people:empty{display:none}
.team-tasks-avatar{width:32px; height:32px; font-size:11px}
.team-org-card{padding:24px 22px}
.team-org-card h3{font-size:20px}
}
@media (max-width:480px){
.team-hero{padding:48px 0 36px}
.team-tasks{border-radius:14px}
.team-tasks-row{padding:12px 16px}
.team-org-card{padding:22px 18px; border-radius:16px}
}
/* ================================================== */
/* === Karriere-Page — Premium Job Listing System === */
/* ================================================== */
/* Anchor-Nav inherit von .team-anchor-nav */
.career-anchor-nav .team-anchor-nav-inner{justify-content:center}
/* Why-Grid */
.career-why-grid{
display:grid; grid-template-columns:repeat(2,1fr);
gap:18px; margin-top:32px;
}
.career-why-card{
background:#fff; border:1px solid var(--border);
border-radius:18px; padding:32px 28px;
transition:all .25s;
position:relative;
}
.career-why-card:hover{
transform:translateY(-3px);
box-shadow:0 20px 40px -20px rgba(68,135,166,.18);
border-color:#B8D2DE;
}
.career-why-num{
display:inline-block;
font-family:var(--font-heading);
font-size:13px; font-weight:600;
color:var(--primary); letter-spacing:.06em;
margin-bottom:14px;
}
.career-why-card h3{font-size:20px; margin-bottom:8px; letter-spacing:-.01em}
.career-why-card p{font-size:14.5px; color:#3A3A3A; line-height:1.65; margin:0}
/* Benefits-Grid */
.career-benefits-grid{
display:grid; grid-template-columns:repeat(3,1fr);
gap:18px; margin-top:32px;
}
.career-benefit{
background:#fff; border:1px solid var(--border);
border-radius:18px; padding:28px 26px;
transition:all .25s;
}
.career-benefit:hover{
transform:translateY(-3px);
box-shadow:0 20px 40px -20px rgba(68,135,166,.18);
border-color:#B8D2DE;
}
.career-benefit-ico{
width:46px; height:46px; border-radius:12px;
background:linear-gradient(135deg,#EFF5F8,#D5E4ED);
display:flex; align-items:center; justify-content:center;
color:var(--primary); margin-bottom:18px;
}
.career-benefit h3{font-size:17px; margin-bottom:6px; letter-spacing:-.005em}
.career-benefit p{font-size:14px; color:#3A3A3A; line-height:1.6; margin:0}
/* Jobs-Section (premium) */
.career-jobs{
margin-top:36px; display:flex; flex-direction:column; gap:20px;
}
.career-jobs-count{
font-family:var(--font-heading); font-weight:600; color:var(--primary);
}
.career-job{
background:#fff; border:1px solid var(--border);
border-radius:22px; padding:32px 32px 28px;
transition:border-color .25s, box-shadow .25s, transform .25s;
position:relative;
}
.career-job:hover{
border-color:#B8D2DE;
box-shadow:0 24px 48px -28px rgba(68,135,166,.22);
}
.career-job-head{
display:flex; align-items:flex-start; justify-content:space-between;
gap:24px; flex-wrap:wrap;
}
.career-job-head-left{
display:flex; align-items:flex-start; gap:18px; flex:1; min-width:0;
}
.career-job-num{
display:inline-flex; align-items:center; justify-content:center;
width:46px; height:46px; border-radius:50%;
background:linear-gradient(135deg,#EFF5F8,#D5E4ED);
font-family:var(--font-heading);
font-size:16px; font-weight:600; color:var(--primary);
letter-spacing:.02em; flex-shrink:0;
border:2.5px solid #fff;
box-shadow:0 3px 8px -2px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.04);
}
.career-job-subtitle{
font-size:13px; letter-spacing:.06em; text-transform:uppercase;
color:var(--primary); font-weight:600; margin-bottom:4px;
}
.career-job-title{
font-size:24px; margin:0 0 12px; letter-spacing:-.015em;
line-height:1.25;
}
.career-job-tags{
display:flex; flex-wrap:wrap; gap:6px; margin-bottom:0;
}
.career-job-tag{
display:inline-flex; align-items:center;
font-size:12px; padding:5px 11px; border-radius:999px;
background:#F5F8FA; color:#3A3A3A;
border:1px solid var(--border);
letter-spacing:.01em;
}
.career-job-head-right{flex-shrink:0}
.career-job-apply{padding:12px 22px; font-size:14px}
.career-job-short{
font-size:15.5px; color:#3A3A3A; line-height:1.65;
margin:22px 0 18px; max-width:760px;
}
.career-job-highlights{
display:flex; flex-wrap:wrap; gap:8px 24px;
margin-bottom:6px;
}
.career-job-highlight{
display:inline-flex; align-items:center; gap:8px;
font-size:14px; color:var(--text);
}
.career-job-highlight svg{
color:var(--primary); flex-shrink:0;
background:#EFF5F8; border-radius:50%;
padding:3px; width:22px; height:22px;
}
/* Details-Akkordeon */
.career-job-details{
margin-top:22px; border-top:1px solid var(--border); padding-top:0;
}
.career-job-details[open]{padding-top:0}
.career-job-details-toggle{
display:flex; align-items:center; gap:8px;
cursor:pointer; padding:18px 0 4px;
font-family:var(--font-heading);
font-size:14px; font-weight:500;
color:var(--primary);
list-style:none;
user-select:none;
transition:color .2s;
}
.career-job-details-toggle::-webkit-details-marker{display:none}
.career-job-details-toggle:hover{color:var(--text)}
.career-job-details-toggle-hide{display:none}
.career-job-details[open] .career-job-details-toggle-show{display:none}
.career-job-details[open] .career-job-details-toggle-hide{display:inline}
.career-job-details-chev{
transition:transform .25s; margin-left:2px;
}
.career-job-details[open] .career-job-details-chev{transform:rotate(180deg)}
.career-job-details-body{
display:grid; grid-template-columns:repeat(3,1fr);
gap:32px; padding:24px 0 8px;
animation:wh-fadeIn .35s ease both;
}
.career-job-details-col h4.career-job-details-h{
font-size:13px; letter-spacing:.06em; text-transform:uppercase;
color:var(--primary); font-weight:600; margin-bottom:12px;
}
.career-job-details-col ul{
list-style:none; padding:0; margin:0;
display:flex; flex-direction:column; gap:9px;
}
.career-job-details-col ul li{
position:relative; padding-left:18px;
font-size:14px; color:#3A3A3A; line-height:1.55;
}
.career-job-details-col ul li::before{
content:""; position:absolute; left:0; top:8px;
width:6px; height:6px; border-radius:50%;
background:var(--primary); opacity:.55;
}
.career-job-details-foot{
display:flex; align-items:center; justify-content:space-between;
gap:20px; padding:20px 0 4px; margin-top:8px;
border-top:1px solid var(--border); flex-wrap:wrap;
}
.career-job-details-foot-info{display:flex; flex-direction:column; gap:2px}
.career-job-details-foot-lbl{
font-size:11px; letter-spacing:.06em; text-transform:uppercase;
color:var(--muted); font-weight:600;
}
.career-job-details-foot-val{font-size:14px; color:var(--text)}
@keyframes wh-fadeIn{
from{opacity:0; transform:translateY(-4px)}
to{opacity:1; transform:translateY(0)}
}
/* Apply-Section */
.career-apply{
background:#fff; border:1px solid var(--border);
border-radius:24px; padding:48px 44px;
text-align:center;
}
.career-apply-head{max-width:640px; margin:0 auto 32px}
.career-apply-head .wh-eyebrow{display:inline-block; margin-bottom:10px}
.career-apply-head h2{font-size:32px; margin-bottom:12px; letter-spacing:-.015em}
.career-apply-head p{font-size:16px; color:#3A3A3A; line-height:1.65; margin:0}
.career-apply-grid{
display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
}
.career-apply-card{
display:flex; flex-direction:column; align-items:center; gap:8px;
padding:30px 22px; border-radius:18px;
background:#F8FBFC; border:1px solid var(--border);
text-decoration:none; color:var(--text);
transition:all .25s;
}
a.career-apply-card:hover{
transform:translateY(-3px); border-color:#B8D2DE;
box-shadow:0 20px 40px -20px rgba(68,135,166,.18);
}
.career-apply-card-ico{
width:52px; height:52px; border-radius:14px;
background:linear-gradient(135deg,#EFF5F8,#D5E4ED);
display:flex; align-items:center; justify-content:center;
color:var(--primary); margin-bottom:6px;
}
.career-apply-card-lbl{
font-size:11px; letter-spacing:.06em; text-transform:uppercase;
color:var(--muted); font-weight:600;
}
.career-apply-card-val{
font-size:15px; color:var(--text); font-weight:500;
text-align:center; line-height:1.4;
}
.career-apply-card--info{cursor:default}
/* Mobile Breakpoints */
@media (max-width:1024px){
.career-why-grid{grid-template-columns:1fr}
.career-benefits-grid{grid-template-columns:repeat(2,1fr)}
.career-job-details-body{grid-template-columns:1fr; gap:24px}
}
@media (max-width:780px){
.career-job{padding:24px 20px}
.career-job-head{flex-direction:column; gap:16px}
.career-job-head-right{width:100%}
.career-job-apply{width:100%; justify-content:center}
.career-job-title{font-size:20px}
.career-job-num{width:40px; height:40px; font-size:14px}
.career-job-highlights{flex-direction:column; gap:8px}
.career-benefits-grid{grid-template-columns:1fr}
.career-apply{padding:36px 24px}
.career-apply-head h2{font-size:24px}
.career-apply-grid{grid-template-columns:1fr}
}
@media (max-width:480px){
.career-why-card{padding:24px 22px}
.career-benefit{padding:24px 22px}
.career-job{padding:22px 18px; border-radius:18px}
.career-job-head-left{gap:14px}
.career-job-details-foot{flex-direction:column; align-items:flex-start; gap:14px}
.career-job-details-foot .wh-btn{width:100%; justify-content:center}
}
/* === Karriere-Bewerbungsformular === */
.career-form{
background:#fff; border:1px solid var(--border);
border-radius:22px; padding:40px 40px 32px;
max-width:880px; margin:32px auto 0;
}
.career-form-grid{
display:grid; grid-template-columns:repeat(2,1fr);
gap:18px; margin-bottom:18px;
}
.career-form-field{
display:flex; flex-direction:column; gap:6px;
margin-bottom:18px;
}
.career-form-field--full{width:100%}
.career-form-grid .career-form-field{margin-bottom:0}
.career-form-label{
font-size:13px; font-weight:600; color:var(--text);
letter-spacing:.01em;
}
.career-form-req{color:#C44; font-weight:600; margin-left:2px}
.career-form input[type="text"],
.career-form input[type="email"],
.career-form input[type="tel"],
.career-form select,
.career-form textarea{
width:100%; padding:12px 14px;
font-family:inherit; font-size:15px; color:var(--text);
background:#F8FBFC; border:1.5px solid var(--border);
border-radius:12px; transition:border-color .2s, background .2s;
-webkit-appearance:none; appearance:none;
}
.career-form select{
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 16px center;
padding-right:38px; cursor:pointer;
}
.career-form textarea{resize:vertical; min-height:110px; line-height:1.55}
.career-form input:focus,
.career-form select:focus,
.career-form textarea:focus{
outline:none; border-color:var(--primary);
background:#fff;
box-shadow:0 0 0 3px rgba(68,135,166,.15);
}
/* Drop-Zone */
.career-form-files{margin-bottom:22px}
.career-form-files .career-form-label{display:block; margin-bottom:10px}
.career-form-drop{
display:block; cursor:pointer;
border:2px dashed #B8D2DE; border-radius:16px;
background:#F8FBFC;
padding:36px 24px; text-align:center;
transition:all .2s;
}
.career-form-drop:hover,
.career-form-drop.is-dragover{
border-color:var(--primary); background:#EFF5F8;
}
.career-form-drop-inner{display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:none}
.career-form-drop-ico{
width:60px; height:60px; border-radius:16px;
background:linear-gradient(135deg,#EFF5F8,#D5E4ED);
display:flex; align-items:center; justify-content:center;
color:var(--primary); margin-bottom:8px;
}
.career-form-drop-h{
font-size:15.5px; color:var(--text); margin:0; font-weight:500;
}
.career-form-drop-h span{color:var(--primary); text-decoration:underline; text-underline-offset:3px}
.career-form-drop-sub{
font-size:13px; color:var(--muted); margin:2px 0 0;
}
/* File-Liste */
.career-form-files-list{
list-style:none; padding:0; margin:14px 0 0;
display:flex; flex-direction:column; gap:8px;
}
.career-form-file{
display:flex; align-items:center; gap:12px;
padding:10px 14px; background:#F8FBFC;
border:1px solid var(--border); border-radius:10px;
}
.career-form-file-ico{flex-shrink:0; color:var(--primary)}
.career-form-file-name{
flex:1; min-width:0; font-size:14px; color:var(--text);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.career-form-file-size{
font-size:12.5px; color:var(--muted); flex-shrink:0;
}
.career-form-file-rm{
background:transparent; border:none; padding:6px;
border-radius:6px; cursor:pointer; color:var(--muted);
display:flex; align-items:center; justify-content:center;
transition:all .15s;
}
.career-form-file-rm:hover{background:#FCEBEB; color:#C44}
/* Honeypot — visuell versteckt für Menschen, sichtbar für Bots */
.career-form-hp{
position:absolute !important; left:-9999px;
width:1px; height:1px; overflow:hidden;
clip:rect(0 0 0 0); pointer-events:none;
}
/* DSGVO-Checkbox */
.career-form-checkbox{
display:flex; align-items:flex-start; gap:10px;
font-size:13.5px; color:#3A3A3A; line-height:1.55;
margin-bottom:24px; cursor:pointer;
}
.career-form-checkbox input{
margin-top:3px; flex-shrink:0;
width:18px; height:18px; accent-color:var(--primary);
cursor:pointer;
}
.career-form-checkbox a{color:var(--primary); text-decoration:underline; text-underline-offset:2px}
/* Submit + Note */
.career-form-foot{
display:flex; align-items:center; justify-content:space-between;
gap:20px; flex-wrap:wrap;
border-top:1px solid var(--border); padding-top:22px;
}
.career-form-submit{
position:relative; min-width:230px;
justify-content:center;
}
.career-form-submit-loading{display:none}
.career-form.is-loading .career-form-submit-label,
.career-form.is-loading .career-form-submit-arrow{display:none}
.career-form.is-loading .career-form-submit-loading{display:inline-flex; align-items:center; gap:8px}
.career-form.is-loading .career-form-submit-loading::before{
content:""; width:14px; height:14px; border-radius:50%;
border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
animation:wh-spin .7s linear infinite;
}
@keyframes wh-spin{to{transform:rotate(360deg)}}
.career-form-foot-note{
flex:1; min-width:240px; max-width:380px;
font-size:12px; color:var(--muted); line-height:1.5; margin:0;
}
/* Status Messages */
.career-form-state{
margin-top:18px; padding:0;
font-size:14px; line-height:1.55;
border-radius:12px;
transition:all .2s;
}
.career-form-state:empty{display:none}
.career-form-state.is-loading{
background:#EFF5F8; color:var(--primary);
border:1px solid #B8D2DE; padding:12px 16px;
}
.career-form-state.is-success{
background:#EBF8EF; color:#1F6B3A;
border:1px solid #A6D9B8; padding:14px 18px;
font-weight:500;
}
.career-form-state.is-error{
background:#FCEBEB; color:#A53737;
border:1px solid #E8B0B0; padding:12px 16px;
}
.career-form-phone-hint{
margin:18px 0 0; padding:0;
text-align:center; font-size:13.5px; color:var(--muted);
}
.career-form-phone-hint a{
color:var(--primary); text-decoration:none; font-weight:500;
border-bottom:1px solid transparent; transition:border-color .15s;
}
.career-form-phone-hint a:hover{border-bottom-color:var(--primary)}
.career-form-prefilled{
border-color:var(--primary) !important;
box-shadow:0 0 0 3px rgba(68,135,166,.18) !important;
animation:wh-prefill-flash .9s ease;
}
@keyframes wh-prefill-flash{
0% { background:#EFF5F8; }
60% { background:#EFF5F8; }
100% { background:#F8FBFC; }
}
@media (max-width:780px){
.career-form{padding:28px 22px 24px; border-radius:18px}
.career-form-grid{grid-template-columns:1fr; gap:0}
.career-form-grid .career-form-field{margin-bottom:18px}
.career-form-foot{flex-direction:column; align-items:stretch}
.career-form-submit{width:100%}
.career-form-foot-note{max-width:none; text-align:center}
}
@media (max-width:480px){
.career-form{padding:22px 18px 20px}
.career-form-drop{padding:28px 16px}
.career-form-drop-h{font-size:14px}
}
/* Ein einzelnes zahnärztliches Profil auf der Teamseite. */
.inhaber-grid.inhaber-grid--solo{grid-template-columns:minmax(0,1fr);max-width:820px;margin-inline:auto}
.inhaber-grid.inhaber-grid--solo{grid-template-rows:auto}.inhaber-grid--solo .inhaber-card{grid-row:auto;grid-template-rows:auto}@media(min-width:761px){.inhaber-grid--solo .inhaber-card{grid-template-columns:minmax(220px,38%) minmax(0,1fr)}.inhaber-grid--solo .inhaber-body{display:block;padding:32px}.inhaber-grid--solo .inhaber-name,.inhaber-grid--solo .inhaber-spec,.inhaber-grid--solo .inhaber-bio{margin:0 0 16px}.inhaber-grid--solo .inhaber-name{font-size:26px}.inhaber-grid--solo .inhaber-meta{margin:0;padding:20px 0 0}.inhaber-grid--solo .inhaber-meta-row{flex-direction:column;gap:3px}.inhaber-grid--solo .inhaber-photo{height:100%;aspect-ratio:auto;min-height:440px}.inhaber-grid--solo .inhaber-photo img{height:100%;object-fit:cover;object-position:center top}.inhaber-grid--solo .inhaber-card::before{left:16px;right:auto;top:16px;font-size:10px}}
/* Booking shell: measured before display on desktop, full screen on phones. */
#wh-termin-modal {
inset: auto 0 0;
top: 0;
height: 100vh;
height: 100dvh;
box-sizing: border-box;
align-items: center;
justify-content: center;
padding: max(24px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px));
overflow: hidden;
overscroll-behavior: contain;
}
#wh-termin-modal[hidden] { display: none; }
#wh-termin-modal .wh-tm-backdrop { animation: none; }
#wh-termin-modal:not(.is-ready) .wh-tm-frame { visibility: hidden; pointer-events: none; }
#wh-termin-modal .wh-tm-loading { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:24px; color:#fff; font:500 18px/1.5 var(--font-body,sans-serif); text-align:center; }
#wh-termin-modal .wh-tm-loading[hidden] { display:none; }
#wh-termin-modal .wh-tm-loading p { margin:0; color:inherit; }
#wh-termin-modal .wh-tm-loading a { display:inline-flex; align-items:center; min-height:44px; color:inherit; text-decoration:underline; text-underline-offset:4px; }
#wh-termin-modal .wh-tm-loading a[hidden] { display:none; }
#wh-termin-modal .wh-tm-loading button { min-height:44px; padding:10px 20px; border:1px solid currentColor; border-radius:12px; color:inherit; background:transparent; font:inherit; cursor:pointer; }
#wh-termin-modal .wh-tm-loading button:focus-visible { outline:3px solid currentColor; outline-offset:4px; }
#wh-termin-modal .wh-tm-frame {
display: flex;
flex-direction: column;
width: 100%;
max-width: 720px;
height: min(520px, 100%);
min-height: 0;
max-height: 100%;
border: 0;
border-radius: 22px;
background: #fff;
box-shadow: 0 24px 90px -24px rgba(15,28,36,.45);
overflow: hidden;
animation: none;
transform: none;
transition: none;
}
#wh-termin-modal .wh-tm-iframe {
width: 100%;
height: 0;
flex: 1 1 auto;
min-height: 0;
border: 0;
background: #fff;
color-scheme: light;
}
#wh-termin-modal .wh-tm-toolbar {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 104px;
padding: 16px 28px;
background: #f4f8f9;
border-bottom: 1px solid #e0eaee;
color: #3e5966;
font: 500 17px/1.4 var(--font-body, sans-serif);
}
#wh-termin-modal .wh-tm-brand { display:flex; align-items:center; gap:16px; min-width:0; }
#wh-termin-modal .wh-tm-brand > div { min-width:0; }
#wh-termin-modal .wh-tm-brand strong { display:block; font-size:23px; line-height:1.3; letter-spacing:-.015em; color:#203944; }
#wh-termin-modal .wh-tm-eyebrow { display:block; margin-bottom:3px; font-size:16px; line-height:1.4; color:#4e6570; }
#wh-termin-modal .wh-tm-photo { display:block; width:76px; height:76px; flex:0 0 76px; overflow:hidden; border-radius:50%; background:#eaf1f5; }
#wh-termin-modal .wh-tm-photo img { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 22%; transform:scale(1.35); transform-origin:50% 22%; }
#wh-termin-modal .wh-tm-close {
position: static;
flex: 0 0 44px;
top: 14px;
right: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 44px;
min-width: 44px;
height: 44px;
padding: 8px;
font-family: inherit;
font-size: 16px;
font-weight: 600;
line-height: 1.2;
border: 0;
border-radius: 50%;
background: #eaf1f4;
color: #204354;
box-shadow: none;
z-index: 5;
touch-action: manipulation;
}
#wh-termin-modal .wh-tm-close svg { width:22px; height:22px; flex:0 0 22px; }
#wh-termin-modal .wh-tm-close > span { display:none; }
#wh-termin-modal .wh-tm-close:hover { background: #f0f6f8; transform: none; }
#wh-termin-modal .wh-tm-close:focus-visible { outline: 3px solid #4487a6; outline-offset: 2px; }
@media (max-width: 640px), (max-width: 960px) and (max-height: 500px) and (pointer: coarse) {
#wh-termin-modal {
align-items: stretch;
padding: 0;
background: #fff;
}
#wh-termin-modal .wh-tm-backdrop { display:none; }
#wh-termin-modal .wh-tm-loading { color:#203944; }
#wh-termin-modal .wh-tm-frame { max-width:none; height:100%; border-radius:0; box-shadow:none; padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px); }
#wh-termin-modal .wh-tm-toolbar { min-height:96px; padding:max(16px,env(safe-area-inset-top,0px)) 16px 16px; gap:8px; }
#wh-termin-modal .wh-tm-brand { gap:10px; flex:1 1 auto; }
#wh-termin-modal .wh-tm-brand strong { font-size:19px; }
#wh-termin-modal .wh-tm-eyebrow { font-size:16px; }
#wh-termin-modal .wh-tm-photo { width:64px; height:64px; flex-basis:64px; }
#wh-termin-modal .wh-tm-close { flex:0 0 44px; width:44px; min-width:44px; height:44px; padding:8px; }
#wh-termin-modal .wh-tm-close svg { width:22px; height:22px; flex-basis:22px; }
}
@media (prefers-reduced-motion: reduce) {
#wh-termin-modal .wh-tm-frame, #wh-termin-modal .wh-tm-backdrop { animation: none; }
}