/* DENT AESTHETIC - Premium-One-Page (Salbei-Petrol + Gold, Fraunces/Inter) */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:340 560;font-display:swap;src:url("assets/fonts/fraunces-latin.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url("assets/fonts/inter-latin.woff2") format("woff2")}

:root{
  --background:#FBFAF7;--surface:#FFFFFF;--surface-2:#F4F1EB;--surface-inverse:#15201C;
  --foreground:#1B2420;--muted:#7C857F;--muted-fg:#525B55;
  --border:#E7E2D8;--border-strong:#D6CFC1;--hairline:#ECE8DF;
  --primary:#0E3A33;--primary-fg:#FBFAF7;--accent:#1E6F5C;--accent-fg:#FFFFFF;--accent-soft:#E4EEE9;
  --gold:#B89A5E;--gold-soft:#F2EBDC;--enamel:#FDFCFA;--ring:#1E6F5C;
  --font-display:"Fraunces","Cormorant Garamond",ui-serif,Georgia,serif;
  --font-sans:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --r-sm:10px;--r-md:16px;--r-lg:24px;
  --space-section:clamp(3.5rem,2.5rem + 5vw,7.5rem);
  --gutter:clamp(1.25rem,0.8rem + 2vw,2rem);
  --shadow-sm:0 1px 2px rgba(21,32,28,.05),0 2px 8px rgba(21,32,28,.05);
  --shadow-md:0 2px 6px rgba(21,32,28,.06),0 12px 32px rgba(21,32,28,.10);
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--background);color:var(--foreground);font-family:var(--font-sans);
  font-size:clamp(1rem,.96rem + .2vw,1.0938rem);line-height:1.72;letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:4px}
button,a,[role="button"],label.chip{cursor:pointer}

h1,h2,h3,.display{font-family:var(--font-display);font-weight:400;margin:0;color:var(--primary)}
h1{font-size:clamp(2.375rem,1.6rem + 3.4vw,4.125rem);line-height:1.06;letter-spacing:-.02em;font-weight:380}
h2{font-size:clamp(1.75rem,1.3rem + 2vw,2.75rem);line-height:1.12;letter-spacing:-.015em;font-weight:400}
h3{font-size:clamp(1.1875rem,1.05rem + .6vw,1.5rem);line-height:1.25;font-weight:440}
p{margin:0 0 1em}
.lead{font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);color:var(--muted-fg);max-width:64ch}
.measure{max-width:64ch}

.kicker{display:inline-flex;align-items:center;gap:.65em;font-size:.75rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-block-end:1.1rem}
.kicker::before{content:"";inline-size:1.75rem;block-size:1px;background:var(--accent);flex:none}

.container{max-inline-size:1240px;margin-inline:auto;padding-inline:var(--gutter)}
section{padding-block:var(--space-section)}
[id]{scroll-margin-block-start:88px}
.section-head{max-inline-size:760px;margin-block-end:clamp(2rem,1.5rem + 2vw,3.5rem)}
.alt{background:var(--surface-2)}
.hairline-t{border-block-start:1px solid var(--hairline)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-block-size:48px;
  padding:.78em 1.5em;border-radius:999px;border:1px solid transparent;font:600 .9688rem/1.2 var(--font-sans);
  letter-spacing:.01em;transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s;white-space:nowrap}
.btn:hover{text-decoration:none}
.btn svg{flex:none}
.btn-solid{background:var(--accent);color:var(--accent-fg)}
.btn-solid:hover{background:var(--primary)}
.btn-outline{background:var(--surface);border-color:var(--border-strong);color:var(--primary)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent)}
.btn-ghost{background:transparent;color:var(--primary);border-color:var(--hairline)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-lg{min-block-size:54px;padding:.9em 1.9em;font-size:1.0313rem}

/* Header */
.site-header{position:fixed;inset-block-start:0;inset-inline:0;z-index:60;background:transparent;
  transition:background-color .25s,box-shadow .25s,border-color .25s;border-block-end:1px solid transparent}
.site-header.solid{background:rgba(251,250,247,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-color:var(--hairline);box-shadow:0 1px 0 rgba(21,32,28,.02),0 6px 24px rgba(21,32,28,.05)}
.header-bar{display:flex;align-items:center;gap:1.5rem;min-block-size:76px}
.brand{display:flex;align-items:center;gap:.7rem;color:var(--primary);font-weight:600;
  flex:0 0 auto;margin-inline-end:clamp(1rem,2.5vw,2.5rem)}
.brand:hover{text-decoration:none}
.brand img{inline-size:34px;block-size:auto}
.brand b{font:600 1.0313rem/1.1 var(--font-sans);letter-spacing:.14em;white-space:nowrap}
.brand small{display:block;font:400 .6875rem/1.3 var(--font-sans);letter-spacing:.04em;color:var(--muted-fg)}
.main-nav{display:flex;align-items:center;gap:clamp(.9rem,.4rem + .9vw,1.6rem);margin-inline-start:auto}
.main-nav a{color:var(--foreground);font:500 .9063rem/1 var(--font-sans);padding:.4rem .1rem;white-space:nowrap}
.main-nav a:hover{color:var(--accent);text-decoration:none}
.header-cta{margin-inline-start:auto;display:flex;align-items:center;gap:.75rem}
.main-nav+.header-cta{margin-inline-start:0}
.tel-inline{display:inline-flex;align-items:center;gap:.45em;color:var(--primary);font:600 .9063rem/1 var(--font-sans);white-space:nowrap}
.nav-toggle{display:none;background:none;border:1px solid var(--border-strong);border-radius:var(--r-sm);
  inline-size:46px;block-size:46px;align-items:center;justify-content:center;color:var(--primary)}

/* Hero */
.hero{position:relative;padding-block:calc(76px + clamp(2.5rem,2rem + 3vw,5rem)) clamp(3rem,2rem + 4vw,5.5rem);
  background:linear-gradient(180deg,var(--surface-2),var(--background) 78%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,1.5rem + 3vw,4.5rem);align-items:center}
.hero .lead{margin-block:1.4rem 2rem}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center;margin-block-end:2.2rem}
.hero-media{position:relative}
.hero-media img{inline-size:100%;aspect-ratio:13/10;object-fit:cover;border-radius:38% 24px 38% 24px/24px 38% 24px 38%;
  border:1px solid var(--gold);padding:6px;background:var(--surface)}
.trust-pill{position:absolute;inset-block-start:1.1rem;inset-inline-start:-1rem;display:inline-flex;align-items:center;gap:.5em;
  background:var(--surface);border:1px solid var(--hairline);border-radius:999px;padding:.55em 1.05em;
  font:600 .7813rem/1.3 var(--font-sans);color:var(--primary);box-shadow:var(--shadow-md)}
.trust-pill .dot{inline-size:.5em;block-size:.5em;border-radius:50%;background:var(--gold);flex:none}

/* Quick-Booking-Karte */
.booking-card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-lg);
  padding:clamp(1.25rem,1rem + 1vw,1.75rem);box-shadow:var(--shadow-md);max-inline-size:560px}
.booking-card h2{font-size:1.375rem;font-weight:460}
.booking-card>p{margin:.35em 0 1em;color:var(--muted-fg);font-size:.9375rem}
.chip-row{display:flex;flex-wrap:wrap;gap:.55rem}
.chip{display:inline-flex;align-items:center;gap:.5em;border:1px solid var(--border-strong);background:var(--enamel);
  color:var(--primary);border-radius:999px;padding:.6em 1.1em;font:600 .875rem/1.2 var(--font-sans);
  transition:border-color .15s,background-color .15s,color .15s}
.chip:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.chip svg{color:var(--accent)}
.booking-card .tel-row{margin-block-start:1.1rem;padding-block-start:1rem;border-block-start:1px solid var(--hairline);
  font-size:.9063rem;color:var(--muted-fg)}
.booking-card .tel-row a{font-weight:600;color:var(--primary)}

/* Trust-Leiste */
.trustbar{background:var(--surface-2);border-block:1px solid var(--hairline);padding-block:1.6rem}
.trust-items{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem 2rem}
.trust-item{display:flex;align-items:center;gap:.9rem;min-inline-size:0}
.trust-item>div{min-inline-size:0;overflow-wrap:anywhere}
.trust-item+ .trust-item{border-inline-start:1px solid var(--hairline);padding-inline-start:2rem}
.trust-item img{block-size:46px;inline-size:auto;filter:grayscale(1) opacity(.82);transition:filter .2s}
.trust-item:hover img{filter:none}
.trust-item .t-icon{inline-size:44px;block-size:44px;border-radius:14px;background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;flex:none}
.trust-item b{display:block;font:600 .875rem/1.3 var(--font-sans);color:var(--primary)}
.trust-item span{font:400 .7813rem/1.35 var(--font-sans);color:var(--muted-fg)}

/* Leistungen */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.1rem}
.card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-md);
  padding:1.5rem 1.4rem 1.4rem;display:flex;flex-direction:column;gap:.7rem;
  transition:box-shadow .2s,transform .2s,border-color .2s}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--border)}
.card .icon{inline-size:48px;block-size:48px;border-radius:38% 12px 38% 12px/12px 38% 12px 38%;
  background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center}
.card h3{font-size:1.25rem}
.card p{margin:0;color:var(--muted-fg);font-size:.9375rem;line-height:1.6}
.card .more{margin-block-start:auto;padding-block-start:.6rem;font:600 .875rem/1 var(--font-sans);display:inline-flex;gap:.4em;align-items:center}

/* Ästhetik-Highlight */
.split{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(2rem,1.5rem + 3vw,4.5rem);align-items:center}
.img-duo{display:grid;grid-template-columns:1.25fr 1fr;gap:1rem;align-items:start}
.img-duo img{border-radius:var(--r-md);object-fit:cover;inline-size:100%}
.img-duo img:first-child{border-radius:38% 18px 38% 18px/18px 38% 18px 38%;border:1px solid var(--gold);padding:5px;background:var(--surface)}
.img-duo img:last-child{margin-block-start:2.5rem;aspect-ratio:1/1}
.checklist{list-style:none;margin:1.2rem 0 1.8rem;padding:0;display:grid;gap:.65rem}
.checklist li{display:flex;gap:.7em;align-items:flex-start;color:var(--muted-fg)}
.checklist svg{flex:none;color:var(--accent);margin-block-start:.3em}

/* Angstpatienten Calm */
.calm{background:var(--surface-inverse);color:#E8EBE6}
.calm .kicker{color:#9FC4B5}.calm .kicker::before{background:#9FC4B5}
.calm h2,.calm h3{color:var(--enamel)}
.calm .lead,.calm p{color:#C2CCC4}
.calm-quote{font-family:var(--font-display);font-size:clamp(1.25rem,1.1rem + .8vw,1.625rem);line-height:1.45;
  color:var(--gold-soft);border-inline-start:2px solid var(--gold);padding-inline-start:1.2rem;margin:1.6rem 0 2rem}
.calm-media img{border-radius:38% 24px 38% 24px/24px 38% 24px 38%;border:1px solid rgba(184,154,94,.55);padding:6px;
  inline-size:100%;object-fit:cover;background:rgba(253,252,250,.04)}
.calm-points{list-style:none;margin:0 0 2rem;padding:0;display:grid;gap:.8rem}
.calm-points li{display:flex;gap:.8em;align-items:flex-start}
.calm-points svg{flex:none;color:#9FC4B5;margin-block-start:.25em}
.calm .btn-solid{background:var(--gold);color:#15201C}
.calm .btn-solid:hover{background:var(--gold-soft)}
.calm .btn-ghost{color:#E8EBE6;border-color:rgba(232,235,230,.3)}
.calm .btn-ghost:hover{border-color:#9FC4B5;color:#9FC4B5}

/* Praxis / Ambiente */
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}
.gallery figure{margin:0;position:relative;border-radius:var(--r-md);overflow:hidden}
.gallery img{inline-size:100%;block-size:100%;object-fit:cover}
.gallery figcaption{position:absolute;inset-block-end:0;inset-inline:0;padding:.65rem .95rem;
  font:600 .7813rem/1.3 var(--font-sans);color:#fff;background:linear-gradient(transparent,rgba(21,32,28,.62))}
.g1{grid-column:span 5;aspect-ratio:4/3}.g2{grid-column:span 4;aspect-ratio:4/3}.g3{grid-column:span 3;aspect-ratio:3/3.2}
.g4{grid-column:span 4;aspect-ratio:4/3}.g5{grid-column:span 8;aspect-ratio:21/9}

/* Team */
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.team-card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:1.6rem;display:flex;gap:1.4rem}
.team-card img{inline-size:128px;block-size:172px;object-fit:cover;border-radius:30% 12px 30% 12px/12px 30% 12px 30%;
  border:1px solid var(--gold);padding:4px;background:var(--surface);flex:none}
.team-card h3{font-size:1.3125rem}
.team-card .role{color:var(--accent);font:600 .8125rem/1.4 var(--font-sans);letter-spacing:.05em;margin:.2em 0 .7em}
.qual-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-block-end:.8rem}
.qual-chips span{background:var(--accent-soft);color:var(--primary);border-radius:999px;padding:.32em .8em;font:500 .75rem/1.3 var(--font-sans)}
.team-card blockquote{margin:0;font-style:italic;color:var(--muted-fg);font-size:.9063rem;line-height:1.6}
.anaesthesie-note{margin-block-start:1.1rem;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-md);
  padding:1.1rem 1.4rem;display:flex;gap:1rem;align-items:center;color:var(--muted-fg);font-size:.9375rem}
.anaesthesie-note .t-icon{inline-size:44px;block-size:44px;border-radius:14px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
.vita-box{margin-block-start:2.5rem;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,1rem + 2vw,3rem)}
.vita-list{list-style:none;margin:0;padding:0;border-inline-start:1px solid var(--hairline)}
.vita-list li{position:relative;padding-inline-start:1.6rem;padding-block-end:1.05rem;font-size:.9375rem;color:var(--muted-fg)}
.vita-list li::before{content:"";position:absolute;inset-inline-start:-4px;inset-block-start:.5em;inline-size:7px;block-size:7px;border-radius:50%;background:var(--gold)}
.vita-list b{color:var(--primary);font-weight:600}
.member-row{margin-block-start:2.2rem;padding-block-start:1.6rem;border-block-start:1px solid var(--hairline);
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.member-row span{border:1px solid var(--border);border-radius:999px;padding:.4em .95em;font:500 .7813rem/1.3 var(--font-sans);color:var(--muted-fg);background:var(--surface)}
.member-row b{inline-size:100%;font:600 .8125rem/1 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-fg);margin-block-end:.4rem}

/* Stimmen */
.score-line{display:flex;align-items:center;gap:.8rem;margin-block-end:1.8rem;color:var(--muted-fg);font-size:.9375rem}
.stars{display:inline-flex;gap:.15em;color:var(--gold);flex:none}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.review{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-md);padding:1.5rem;display:flex;flex-direction:column;gap:.8rem}
.review p{margin:0;color:var(--muted-fg);font-size:.9375rem;line-height:1.65}
.review .src{margin-block-start:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block-start:.9rem;border-block-start:1px solid var(--hairline)}
.review cite{font:600 .8438rem/1.4 var(--font-sans);font-style:normal;color:var(--primary)}
.review .badge{font:600 .6875rem/1 var(--font-sans);letter-spacing:.06em;color:var(--muted-fg);border:1px solid var(--border);border-radius:999px;padding:.4em .8em}

/* Ablauf + Kosten */
.flow{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,1.5rem + 3vw,4rem);align-items:start}
.steps{list-style:none;margin:0;padding:0;counter-reset:step}
.steps li{counter-increment:step;position:relative;padding-inline-start:4rem;padding-block-end:1.7rem}
.steps li::before{content:counter(step,decimal-leading-zero);position:absolute;inset-inline-start:0;inset-block-start:-.2em;
  font-family:var(--font-display);font-size:1.75rem;color:var(--gold);font-weight:400}
.steps li::after{content:"";position:absolute;inset-inline-start:1.05rem;inset-block-start:2.1rem;inset-block-end:.5rem;inline-size:1px;background:var(--hairline)}
.steps li:last-child{padding-block-end:0}.steps li:last-child::after{display:none}
.steps b{display:block;font:600 1.0313rem/1.4 var(--font-sans);color:var(--primary)}
.steps p{margin:.25em 0 0;color:var(--muted-fg);font-size:.9375rem}
.cost-card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:1.8rem;box-shadow:var(--shadow-sm)}
.cost-card h3{display:flex;align-items:center;gap:.6em}
.cost-card h3 svg{color:var(--gold)}
.cost-card ul{list-style:none;margin:1.1rem 0 1.4rem;padding:0;display:grid;gap:.85rem}
.cost-card li{display:flex;gap:.7em;align-items:flex-start;color:var(--muted-fg);font-size:.9375rem;line-height:1.6}
.cost-card li svg{flex:none;color:var(--accent);margin-block-start:.25em}
.cost-card small{display:block;color:var(--muted);font-size:.7813rem;line-height:1.55;margin-block-start:1.1rem;font-feature-settings:"tnum"}

/* Terminformular */
.form-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,1.5rem + 3vw,4rem);align-items:start}
form.termin{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:clamp(1.4rem,1rem + 1.5vw,2.2rem);box-shadow:var(--shadow-sm)}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.f-field{display:flex;flex-direction:column;gap:.35rem}
.f-field.full{grid-column:1/-1}
.f-field label{font:600 .8438rem/1.3 var(--font-sans);color:var(--primary)}
.f-field input,.f-field textarea{font:400 .9688rem/1.5 var(--font-sans);color:var(--foreground);background:var(--enamel);
  border:1px solid var(--border-strong);border-radius:var(--r-sm);padding:.7em .9em;min-block-size:48px;inline-size:100%}
.f-field textarea{min-block-size:120px;resize:vertical}
.f-field input:focus,.f-field textarea:focus{outline:2px solid var(--ring);outline-offset:0;border-color:var(--accent)}
fieldset.anliegen{border:0;margin:0 0 1rem;padding:0}
fieldset.anliegen legend{font:600 .8438rem/1.3 var(--font-sans);color:var(--primary);padding:0;margin-block-end:.5rem}
.radio-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.radio-chips input{position:absolute;opacity:0;pointer-events:none}
.radio-chips label{display:inline-flex;align-items:center;border:1px solid var(--border-strong);background:var(--enamel);
  border-radius:999px;padding:.55em 1.05em;font:500 .875rem/1.3 var(--font-sans);color:var(--foreground);
  transition:background-color .15s,border-color .15s,color .15s}
.radio-chips input:checked+label{background:var(--accent);border-color:var(--accent);color:var(--accent-fg);font-weight:600}
.radio-chips input:focus-visible+label{outline:2px solid var(--ring);outline-offset:2px}
/* Kurzes Feedback: vom Hero-Chip vorbelegtes Anliegen wird im Formular hervorgehoben */
.radio-chips label.just-set{animation:chip-set 1.4s var(--ease) 1}
@keyframes chip-set{0%{box-shadow:0 0 0 0 rgba(30,111,92,.45)}55%{box-shadow:0 0 0 7px rgba(30,111,92,0)}100%{box-shadow:0 0 0 0 rgba(30,111,92,0)}}
@media (prefers-reduced-motion:reduce){.radio-chips label.just-set{animation:none}}
.consent{display:flex;gap:.7em;align-items:flex-start;margin:1.1rem 0 1.3rem;font-size:.8438rem;color:var(--muted-fg);line-height:1.55}
.consent input{inline-size:1.15em;block-size:1.15em;margin-block-start:.2em;accent-color:var(--accent);flex:none}
.form-note{display:none;margin-block-start:1rem;border-radius:var(--r-sm);padding:.85em 1.1em;font-size:.9063rem}
.form-note.ok{display:block;background:var(--accent-soft);color:var(--primary);border:1px solid var(--accent)}
.form-note.err{display:block;background:#F7E8E4;color:#7C2D1C;border:1px solid #B4452F}
.aside-contact{display:grid;gap:1rem}
.aside-contact .mini{display:flex;gap:1rem;align-items:flex-start;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-md);padding:1.1rem 1.3rem}
.aside-contact .t-icon{inline-size:44px;block-size:44px;border-radius:14px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
.aside-contact b{display:block;font:600 .9063rem/1.4 var(--font-sans);color:var(--primary)}
.aside-contact span,.aside-contact a{font-size:.9063rem;color:var(--muted-fg)}
.aside-contact a.big{font:600 1.125rem/1.3 var(--font-sans);color:var(--primary)}

/* Karriere */
.career{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(2rem,1.5rem + 2vw,3.5rem);align-items:start}
.career-card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-md);padding:1.6rem}
.career-card h3{font-size:1.1875rem;margin-block-end:.6rem}
.career-card ul{margin:0;padding-inline-start:1.2em;color:var(--muted-fg);font-size:.9375rem;display:grid;gap:.4rem}

/* Kontakt + Footer */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.contact-card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-md);padding:1.5rem}
.contact-card h3{font-size:1.125rem;margin-block-end:.8rem;display:flex;align-items:center;gap:.55em}
.contact-card h3 svg{color:var(--accent)}
.contact-card p,.contact-card li{color:var(--muted-fg);font-size:.9375rem}
.hours{inline-size:100%;border-collapse:collapse;font-feature-settings:"tnum"}
.hours td{padding:.42em 0;font-size:.9375rem;color:var(--muted-fg);border-block-end:1px solid var(--hairline)}
.hours tr:last-child td{border-block-end:0}
.hours td:last-child{text-align:end;color:var(--primary);font-weight:500;white-space:nowrap}
.site-footer{background:var(--surface-inverse);color:#A9B5AC;padding-block:3.5rem 7rem;font-size:.875rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2.5rem;margin-block-end:2.5rem}
.site-footer h4{font:600 .8125rem/1 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--enamel);margin:0 0 1rem}
.site-footer a{color:#C8D1C9}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.footer-brand img{inline-size:40px;margin-block-end:.9rem;filter:brightness(2.2) grayscale(1)}
.footer-quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.2rem 2.2rem;border-block-start:1px solid rgba(232,235,230,.14);padding-block:1.6rem;margin-block-end:1.4rem}
.footer-quotes blockquote{margin:0;font-style:italic;font-size:.84rem;color:#8E9C90}
.footer-quotes cite{display:block;margin-block-start:.3rem;font-style:normal;font-size:.75rem;letter-spacing:.04em;color:#6F7D71}
.footer-base{border-block-start:1px solid rgba(232,235,230,.14);padding-block-start:1.5rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center}
.footer-base nav{display:flex;gap:1.4rem}

/* Mobile Sticky Bar */
.mobile-bar{position:fixed;inset-block-end:0;inset-inline:0;z-index:70;display:none;gap:.6rem;
  background:rgba(251,250,247,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-block-start:1px solid var(--hairline);padding:.6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom))}
.mobile-bar .btn{flex:1;min-block-size:50px}

/* Reveal (nur Enhancement) */
html.js [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
html.js [data-reveal].in{opacity:1;transform:none}
@media print{[data-reveal]{opacity:1!important;transform:none!important}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  html.js [data-reveal]{opacity:1;transform:none}
}

/* Subpages (Referenzen/Impressum/Datenschutz) */
.page-hero{padding-block:calc(76px + 3rem) 2.5rem;background:var(--surface-2);border-block-end:1px solid var(--hairline)}
.page-hero h1{font-size:clamp(2rem,1.5rem + 2.4vw,3.25rem)}
.prose{max-inline-size:780px;overflow-wrap:anywhere}
.prose h2{font-size:1.5rem;margin:2.2em 0 .6em}
.prose h3{font-size:1.1875rem;margin:1.8em 0 .5em}
.prose ul{color:var(--muted-fg)}
.prose p{color:var(--muted-fg)}
.prose .addr{color:var(--primary);font-weight:500}
.ref-grid{columns:2;column-gap:1.1rem;max-inline-size:1000px}
.ref-grid .review{break-inside:avoid;margin-block-end:1.1rem}
.back-link{display:inline-flex;align-items:center;gap:.5em;font:600 .9063rem/1 var(--font-sans);margin-block-end:1rem}

/* Responsive */
/* Navbar-Budget: Brand(247) + 7-Link-Nav(695) + Select(151) + Tel(110) + Button(174)
   + Gaps/Padding brauchen ~1513px. Passt nicht in normale Laptops (1280-1440).
   Daher: Telefon nur auf grossen Monitoren, Nav auf Laptops kompakter, Hamburger
   erst wenn auch das nicht mehr reicht. Garantiert kein Ueberlauf des CTA-Buttons. */
/* Inline-Telefon nur auf sehr breiten Monitoren (>=1700px). Sonst weg - die Nummer
   ist im Footer, in der Mobile-Bar und am "Termin"-CTA erreichbar. Verhindert den
   Ueberlauf auf 1440/1536-Laptops. */
@media (max-width:1700px){
  .header-cta .tel-inline{display:none}
}
/* Nav kompakter bis 1600px, damit Brand + 7 Links + Select + Button passen. */
@media (max-width:1600px){
  .main-nav{gap:.7rem}
  .main-nav a{font-size:.8438rem}
}
/* Nav-Kollaps zum Hamburger ab 1300px (darunter wird die 7-Link-Navi zu eng). */
@media (max-width:1300px){
  .main-nav{display:none}
  .nav-toggle{display:flex;margin-inline-start:auto}
  .header-cta{margin-inline-start:0}
  .main-nav.open{display:flex;position:fixed;inset-block-start:76px;inset-inline:0;flex-direction:column;align-items:stretch;
    gap:0;background:var(--surface);border-block:1px solid var(--hairline);padding:1rem var(--gutter);box-shadow:var(--shadow-md)}
  .main-nav.open a{padding:.85rem .2rem;border-block-end:1px solid var(--hairline);font-size:1.0313rem}
  .main-nav.open a:last-child{border-block-end:0}
}
@media (max-width:1060px){
  .trust-items{grid-template-columns:1fr 1fr}
  .trust-item+ .trust-item{border-inline-start:0;padding-inline-start:0}
  .review-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .header-cta .btn{display:none}
  .hero{padding-block-start:calc(76px + 1.8rem)}
  .hero-grid,.split,.flow,.form-wrap,.career,.vita-box{grid-template-columns:1fr}
  .hero-media{order:-1;max-inline-size:520px}
  .trust-pill{inset-inline-start:.6rem}
  .booking-card{max-inline-size:none}
  .team-grid{grid-template-columns:1fr}
  .review-grid{grid-template-columns:1fr}
  .ref-grid{columns:1}
  .gallery{grid-template-columns:1fr 1fr}
  .g1,.g2,.g3,.g4{grid-column:span 1;aspect-ratio:4/3}
  .g5{grid-column:span 2;aspect-ratio:16/9}
  .footer-grid{grid-template-columns:1fr;gap:1.8rem}
  .mobile-bar{display:flex}
  .img-duo{max-inline-size:520px}
}
/* Mobile-Header: Brand + Sprach-Select + Hamburger muessen in die Breite passen.
   Enge Abstaende + kompaktes Select, sonst wird der Burger rechts abgeschnitten. */
@media (max-width:720px){
  .header-bar{gap:.6rem}
  .header-cta{gap:.5rem}
  .lang-select{font-size:.8125rem;padding:.4rem 1.7rem .4rem .6rem;min-block-size:40px}
  [dir="rtl"] .lang-select{padding:.4rem .6rem .4rem 1.7rem}
  .nav-toggle{flex:0 0 auto}
}
@media (max-width:620px){
  .header-cta .tel-inline{display:none}
  .brand small{display:none}
  /* Wortmarke einzeilig + kompakter, damit Brand + Sprach-Pille + Burger nebeneinander passen */
  .brand{gap:.45rem;margin-inline-end:.3rem;min-inline-size:0}
  .brand img{inline-size:26px}
  .brand b{font-size:.85rem;letter-spacing:.04em}
  /* Select auf Smartphones nur als Flaggen-Icon + Chevron (kein abgeschnittenes Wort),
     damit der Burger garantiert reinpasst. Volle Sprachnamen erscheinen beim Aufklappen. */
  .lang-select{inline-size:54px;max-inline-size:54px;padding:.4rem 1.25rem .4rem .5rem;background-position:right .4rem center;text-overflow:clip}
  [dir="rtl"] .lang-select{background-position:left .4rem center;padding:.4rem .5rem .4rem 1.25rem}
  /* Score-Zeile gestapelt: Sterne als eigene Zeile ueber dem Text statt schiefer Zwei-Spalten-Optik */
  .score-line{flex-direction:column;align-items:flex-start;gap:.55rem}
  .stars svg{inline-size:20px;block-size:20px}
}
@media (max-width:520px){
  .contact-grid{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr}
  .team-card{flex-direction:column}
  .hero-ctas .btn{inline-size:100%}
  .brand b{font-size:.875rem;letter-spacing:.05em}
}

/* ===================== Sprachumschalter (DE/EN/AR/UA) — Dropdown ===================== */
.lang-switch{position:relative;flex:0 0 auto}
.lang-switch>summary{list-style:none;cursor:pointer}
.lang-switch>summary::-webkit-details-marker{display:none}
.lang-switch>summary::marker{content:""}

/* Toggle-Pill (Globus + Flagge + aktueller Code + Chevron) */
.ls-toggle{display:inline-flex;align-items:center;gap:.4rem;
  min-block-size:40px;padding:.42rem .7rem;
  border:1px solid var(--border-strong);border-radius:999px;background:var(--surface);
  color:var(--primary);font:600 .8438rem/1 var(--font-sans);letter-spacing:.04em;
  box-shadow:0 1px 2px rgba(21,32,28,.04);
  transition:border-color .18s,background-color .18s,box-shadow .18s}
.ls-toggle:hover{border-color:var(--accent);background:var(--accent-soft)}
.lang-switch[open] .ls-toggle{border-color:var(--accent);background:var(--accent-soft);
  box-shadow:0 0 0 3px rgba(30,111,92,.12)}
.ls-toggle .ls-globe{color:var(--accent);flex:0 0 auto}
.ls-toggle .ls-flag{font-size:1.05rem;line-height:1}
.ls-toggle .ls-current{font-weight:700}
.ls-toggle .ls-chevron{color:var(--muted-fg);transition:transform .2s var(--ease)}
.lang-switch[open] .ls-toggle .ls-chevron{transform:rotate(180deg)}

/* Dropdown-Menue */
.ls-menu{position:absolute;inset-block-start:calc(100% + .5rem);inset-inline-end:0;z-index:80;
  min-inline-size:13rem;padding:.4rem;
  background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-md);
  box-shadow:var(--shadow-md)}
.ls-menu-label{margin:.25rem .55rem .35rem;padding:0;
  font:600 .625rem/1.2 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ls-item{display:flex;align-items:center;gap:.65rem;
  min-block-size:44px;padding:.5rem .55rem;border-radius:var(--r-sm);
  color:var(--foreground);text-decoration:none;
  transition:background-color .14s,color .14s}
.ls-item:hover{background:var(--surface-2);text-decoration:none}
.ls-item .ls-flag{font-size:1.2rem;line-height:1;flex:0 0 auto}
.ls-item .ls-name{font:500 .9375rem/1.1 var(--font-sans);flex:1 1 auto}
.ls-item .ls-code{font:600 .6875rem/1 var(--font-sans);letter-spacing:.08em;color:var(--muted-fg);
  padding:.2rem .42rem;border:1px solid var(--hairline);border-radius:999px;flex:0 0 auto}
.ls-item .ls-check{color:var(--accent);flex:0 0 auto}
.ls-item .ls-check-slot{inline-size:15px;flex:0 0 auto}
.ls-item.is-active{background:var(--accent-soft)}
.ls-item.is-active .ls-name{color:var(--accent);font-weight:600}
.ls-item.is-active .ls-code{border-color:transparent;background:var(--accent);color:var(--accent-fg)}
/* Arabische/kyrillische Endonyme duerfen etwas groesser stehen */
.ls-item[lang="ar"] .ls-name{font-size:1rem}

@media (max-width:820px){
  .ls-toggle{padding:.45rem .65rem;min-block-size:44px}
  .ls-menu{position:fixed;inset-block-start:72px;inset-inline-start:auto;inset-inline-end:var(--gutter);
    min-inline-size:min(15rem,calc(100vw - 2*var(--gutter)))}
}
@media (max-width:520px){
  .ls-toggle .ls-current{display:none}
  .ls-toggle{gap:.35rem;padding:.45rem .55rem}
}

/* ===================== Arabisch (RTL) ===================== */
html[lang="ar"]{
  --font-display:"Noto Naskh Arabic","Segoe UI","Geeza Pro",Tahoma,Arial,serif;
  --font-sans:"Segoe UI","Noto Naskh Arabic","Geeza Pro",Tahoma,Arial,sans-serif;
}
html[lang="ar"] *{letter-spacing:normal}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] .display{line-height:1.45}

/* Lange Nav-Labels (EN/UK): kompaktere Abstaende, damit der Header bei allen Desktop-Breiten passt */
html[lang="en"] .main-nav,html[lang="uk"] .main-nav{gap:clamp(.55rem,.15rem + .65vw,1.05rem)}
html[lang="uk"] .main-nav a{font-size:.8438rem}
html[lang="uk"] .header-bar{gap:1rem}