/* ==========================================================================
   Beauty Point Moselle — Designsystem-CSS v3
   "Porcelain & Ink" — Instrument Serif (Display) + Hanken Grotesk (Body)
   Split-Screen als Leitmotiv, Editorial Motion, ruhige Bewegung statt Baukasten
   ========================================================================== */

/* Selbst gehostete Schriften statt Google-Fonts-CDN -- ein direkter Aufruf von
   fonts.googleapis.com uebertraegt die IP-Adresse der Besucherin an Google, noch bevor
   irgendeine Cookie-Zustimmung erfolgt ist (DSGVO-Problem, u.a. LG Muenchen 2022). */
@font-face{font-family:'Instrument Serif'; font-style:normal; font-weight:400; font-display:block; src:url('/assets/fonts/instrument-serif-400-normal.woff2') format('woff2');}
@font-face{font-family:'Instrument Serif'; font-style:italic; font-weight:400; font-display:block; src:url('/assets/fonts/instrument-serif-400-italic.woff2') format('woff2');}
@font-face{font-family:'Hanken Grotesk'; font-style:normal; font-weight:400; font-display:block; src:url('/assets/fonts/hanken-grotesk-400.woff2') format('woff2');}
@font-face{font-family:'Hanken Grotesk'; font-style:normal; font-weight:500; font-display:block; src:url('/assets/fonts/hanken-grotesk-500.woff2') format('woff2');}
@font-face{font-family:'Hanken Grotesk'; font-style:normal; font-weight:600; font-display:block; src:url('/assets/fonts/hanken-grotesk-600.woff2') format('woff2');}
@font-face{font-family:'Hanken Grotesk'; font-style:normal; font-weight:700; font-display:block; src:url('/assets/fonts/hanken-grotesk-700.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:block; src:url('/assets/fonts/ibm-plex-mono-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:block; src:url('/assets/fonts/ibm-plex-mono-500.woff2') format('woff2');}

:root{
  --bg:#f7f6f4; --surface:#ffffff; --surface-2:#efece7; --ink:#121212; --ink-muted:#68655f; --border:#e5e1da;
  --accent:#8c7250; --accent-soft:#ece4d7; --accent-ink:#ffffff;
  --error:#a23b3b; --error-soft:#f6e2e0;
  --radius-sm:2px; --radius-md:2px; --radius-lg:2px; --radius-pill:999px;
  --shadow-sm: 0 2px 8px -4px rgba(18,18,18,0.12);
  --shadow-md: 0 16px 40px -20px rgba(18,18,18,0.28);
  --shadow-lg: 0 30px 70px -30px rgba(18,18,18,0.4);
  --gradient-warm: linear-gradient(135deg, #f2efe9 0%, #ece4d7 55%, #e3d8c4 100%);
  --gradient-dark: linear-gradient(180deg, rgba(18,18,18,0) 0%, rgba(18,18,18,0.8) 100%);
  --font-display:'Instrument Serif', ui-serif, Georgia, serif;
  --font-body:'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --container: 1240px;
  --photo-filter: saturate(0.88) contrast(1.04) brightness(1.02) sepia(0.08);
  /* Motion-System — feste Tokens statt beliebiger Transition-Werte */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-fast: 280ms;      /* kleine UI-Reaktionen: Hover, Fokus */
  --motion-standard: 750ms;  /* Menüs, Content-Wechsel */
  --motion-cinematic: 1600ms;/* große Reveals: Intro, Hero-Crossfade */
  --hero-autoplay: 5s;       /* Bildwechsel im Hero-Slider */
  --header-h: 80px;          /* Sticky-Header-Höhe — Fullscreen-Hero rechnet sie heraus */
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;} }
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
/* Mobile: keine Fallback-Schrift zeigen, waehrend lokale Fonts noch eintreffen. */
@media (max-width:899px){ html.mobile-font-loading body{visibility:hidden;} }
h1,h2,h3,h4{font-family:var(--font-body); margin:0; text-wrap:balance; letter-spacing:-0.01em; font-weight:700;}
h1{font-family:var(--font-display); font-weight:400; letter-spacing:-0.01em;}
h1 em, .disp-serif{font-family:var(--font-display); font-style:italic; font-weight:400;}
p{margin:0 0 1rem;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; height:auto; display:block; filter:var(--photo-filter); }
.container{max-width:var(--container); margin:0 auto; padding:0 clamp(1.1rem,4vw,2.5rem);}
.kicker{font-size:0.74rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); font-weight:700; margin-bottom:0.8rem; display:block;}
.lede{color:var(--ink-muted); font-size:1.05rem; max-width:62ch;}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.skip-link{position:absolute; left:1rem; top:-3rem; background:var(--ink); color:var(--bg); padding:0.7rem 1.1rem; border-radius:var(--radius-sm); z-index:100; transition:top .15s;}
.skip-link:focus{top:1rem;}
:where(a,button,summary,input,textarea,select):focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
:where(a,button){touch-action:manipulation;}

/* ---------- media placeholder (used until real photography is supplied) ---------- */
.mediaph{
  background:linear-gradient(135deg,var(--surface-2),var(--accent-soft));
  border-radius:var(--radius-md);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.6rem;
  text-align:center; padding:1.4rem; color:var(--ink-muted);
}
.mediaph svg{width:32px; height:32px; opacity:0.55;}
.mediaph span{font-family:var(--font-mono); font-size:0.7rem; line-height:1.5; max-width:26ch;}
.mediaph-photo{background:none; padding:0; overflow:hidden;}
.mediaph-photo img{width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit;}
.map-embed{aspect-ratio:4/3; border-radius:var(--radius-md); overflow:hidden;}
.map-embed iframe{width:100%; height:100%; border:0; display:block;}

/* ---------- header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.site-header .container{display:flex; align-items:center; justify-content:space-between; padding-top:1rem; padding-bottom:1rem;}
.logo-mark{
  width:230px; height:44px; flex-shrink:0;
  -webkit-mask-image:var(--logo-svg); mask-image:var(--logo-svg);
  -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:left center; mask-position:left center;
  background-color:var(--ink);
  transition:background-color .15s ease;
}
@media (max-width:400px){ .logo-mark{width:176px; height:34px;} }
.logo-mark:hover{background-color:var(--accent);}
.nav-actions{display:flex; align-items:center; gap:0.9rem;}
.nav-toggle{
  display:inline-flex; align-items:center; gap:0.6rem;
  background:none; border:none; padding:0.3rem 0; cursor:pointer; color:var(--ink);
}
.nav-toggle-label{font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase;}
.nav-toggle svg{width:18px; height:18px; transition:transform var(--motion-fast) var(--ease);}
.nav-toggle:hover svg{transform:translateY(2px);}

/* ---------- Sprachumschalter ---------- */
.lang-switch{position:relative; display:none;}
@media (min-width:900px){ .lang-switch{display:block;} }
.lang-toggle{display:inline-flex; align-items:center; gap:0.4rem; background:none; border:1px solid var(--border); border-radius:var(--radius-pill); padding:0.45rem 0.8rem; cursor:pointer; color:var(--ink); font-family:var(--font-mono); font-size:0.74rem; letter-spacing:0.04em; transition:border-color .15s ease, background-color .15s ease;}
.lang-toggle:hover, .lang-toggle:focus-visible{border-color:var(--accent); background:var(--accent-soft);}
.lang-toggle svg{width:16px; height:16px; flex-shrink:0;}
.lang-menu{position:absolute; right:0; top:calc(100% + 0.5rem); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); padding:0.4rem; min-width:140px; display:none; flex-direction:column; gap:0.1rem; z-index:60;}
.lang-switch.open .lang-menu{display:flex;}
.lang-option{background:none; border:none; text-align:left; padding:0.55rem 0.7rem; border-radius:var(--radius-sm); cursor:pointer; color:var(--ink); font-size:0.86rem; font-family:var(--font-body); transition:background-color .15s ease;}
.lang-option:hover, .lang-option:focus-visible{background:var(--accent-soft);}
.lang-option[aria-current="true"]{color:var(--accent); font-weight:600;}
.lang-switch-inline{margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--border);}
.lang-switch-label{font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-muted); display:block; margin-bottom:0.7rem;}
.lang-menu-inline{display:flex; gap:0.6rem; flex-wrap:wrap;}
.lang-menu-inline .lang-option{border:1px solid var(--border); border-radius:var(--radius-pill); padding:0.5rem 1rem;}
.lang-menu-inline .lang-option[aria-current="true"]{border-color:var(--accent); background:var(--accent-soft);}
.goog-hidden-el{display:none !important;}
/* Google-Standardleiste unterdruecken -- eigenes UI uebernimmt die Umschaltung */
.goog-te-banner-frame, .skiptranslate > iframe{display:none !important; visibility:hidden !important; height:0 !important;}
body{top:0 !important; position:static !important;}
body.goog-te-hl-en, body.goog-te-hl-ru, body.goog-te-hl-tr{top:0 !important;}
.goog-text-highlight{background:none !important; box-shadow:none !important; border:none !important;
  /* Unterbindet Googles Hover/Klick-Listener direkt an der Quelle -- Klicks faller durch
     auf das dahinterliegende Element (z.B. den Link), nur der Tooltip wird nie ausgeloest. */
  pointer-events:none !important;}
.goog-tooltip, .goog-tooltip:hover, .goog-tooltip-content{display:none !important;}
/* Aktuelle Google-Translate-Version nutzt eine eigene ID statt der alten .goog-tooltip-Klasse. */
#goog-gt-vt, #goog-gt-tt{display:none !important;}

/* ---------- Overlay-Navigation (Vollbild-Menü, ersetzt Standard-Dropdown) ---------- */
.overlay-nav{
  position:fixed; inset:0; z-index:200; background:var(--bg); color:var(--ink);
  display:flex; flex-direction:column;
  clip-path:inset(0 0 100% 0); transition:clip-path var(--motion-standard) var(--ease);
  pointer-events:none;
}
.overlay-nav.open{clip-path:inset(0 0 0 0); pointer-events:auto;}
.overlay-nav-top{display:flex; align-items:center; justify-content:space-between; padding-top:1.1rem; padding-bottom:1.1rem;}
.overlay-nav-close{background:none; border:none; cursor:pointer; color:var(--ink); padding:0.4rem;}
.overlay-nav-close svg{width:22px; height:22px;}
.overlay-nav-body{flex:1; display:flex; flex-direction:column; justify-content:center; gap:2.5rem; padding-top:1rem; padding-bottom:1rem; overflow-y:auto;}
.overlay-nav-main{display:flex; flex-direction:column; gap:0.3rem;}
.overlay-nav-main a{
  font-family:var(--font-display); font-size:clamp(2.2rem,6vw,3.6rem); font-style:italic;
  padding:0.25rem 0; color:var(--ink); opacity:0.55; transition:opacity var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease);
}
.overlay-nav-main a:hover{opacity:1; transform:translateX(0.4rem);}
.overlay-nav-sub-label{display:block; font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:0.8rem;}
.overlay-nav-sub ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.55rem;}
.overlay-nav-sub a{font-size:0.98rem; color:var(--ink-muted); border-bottom:1px solid var(--border); display:block; padding:0.4rem 0; transition:color var(--motion-fast) var(--ease);}
.overlay-nav-sub a:hover{color:var(--accent);}
.overlay-nav-bottom{display:flex; gap:1.6rem; flex-wrap:wrap; padding-top:1.2rem; padding-bottom:1.6rem; border-top:1px solid var(--border); font-size:0.85rem; color:var(--ink-muted);}
body.nav-open{overflow:hidden;}
@media (max-width:899px){
  /* Bei kleinen Hoehen passt der komplette Menueinhalt nicht in den Viewport.
     Oben beginnen verhindert, dass der erste Navigationspunkt abgeschnitten wird; der Body bleibt scrollbar. */
  .overlay-nav-body{justify-content:flex-start;}
}
@media (min-width:900px){
  .overlay-nav-body{flex-direction:row; align-items:center; justify-content:space-between; gap:4rem;}
}

/* ---------- buttons ---------- */
.btn{font-family:var(--font-body); font-weight:600; font-size:0.9rem; padding:0.85rem 1.6rem; border-radius:var(--radius-pill); border:none; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; transition:transform .15s ease, opacity .15s ease, box-shadow .15s ease, background-color .15s ease; white-space:nowrap;}
.btn-primary{background:var(--ink); color:var(--bg);}
.btn-primary:hover{transform:translateY(-1px); opacity:0.9;}
.btn-accent{background:var(--accent); color:var(--accent-ink);}
.btn-accent:hover{transform:translateY(-1px); box-shadow:0 10px 22px -10px var(--accent);}
.btn-outline{background:none; border:1.5px solid var(--ink); color:var(--ink);}
.btn-outline:hover{background:var(--ink); color:var(--bg);}
.btn-sm{padding:0.6rem 1.1rem; font-size:0.8rem;}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
.btn[disabled]{opacity:0.5; cursor:not-allowed;}

/* ---------- hero ---------- */
.hero{padding:3rem 0 2.5rem;}
.hero .container{display:grid; gap:2rem; align-items:center;}
.hero h1{font-size:clamp(2.1rem,5vw,3.6rem); line-height:1.05; margin-bottom:1.1rem;}
.hero h1 em{font-style:italic; color:var(--accent); font-weight:500;}
.hero .lede{margin-bottom:1.6rem;}
.hero-ctas{display:flex; gap:0.8rem; margin-bottom:1.6rem; flex-wrap:wrap;}
.hero-media{aspect-ratio:4/3; width:100%;}
@media (min-width:900px){
  .hero{padding:4.5rem 0;}
  .hero .container{grid-template-columns:0.95fr 1.05fr; gap:3.5rem;}
  .hero-media{aspect-ratio:auto; height:100%; min-height:460px;}
}

.badge{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-pill); padding:0.5rem 1rem; font-size:0.8rem; font-weight:600; display:inline-flex; align-items:center; gap:0.4rem;}

/* ---------- sections ---------- */
.section{padding:3.2rem 0;}
/* Seiten ohne Fullscreen-Hero: knapper Abstand zur Sticky-Menueleiste reicht auf dem Handy,
   wirkt auf Desktop aber zu gedrängt -- dort deutlich mehr Luft lassen. */
.page-top{padding-top:1rem !important;}
@media (min-width:900px){ .page-top{padding-top:4rem !important;} }
.section.alt{background:var(--surface-2);}
.section.dark{background:var(--ink); color:var(--bg);}
.section.dark h2, .section.dark h3{color:var(--bg);}
.section.dark .lede, .section.dark .kicker{color:color-mix(in srgb, var(--bg) 72%, transparent);}
.section-head{margin-bottom:1.8rem;}
.section-head h2{font-size:clamp(1.6rem,3vw,2.2rem);}
@media (min-width:900px){ .section{padding:5.5rem 0;} }

/* ---------- grids & cards ---------- */
.grid-3{display:grid; grid-template-columns:1fr; gap:1.2rem;}
.grid-3 .mediaph{aspect-ratio:4/3;}
.grid-2{display:grid; grid-template-columns:1fr; gap:1.2rem;}
@media (min-width:700px){ .grid-3{grid-template-columns:repeat(2,1fr);} }
@media (min-width:980px){ .grid-3{grid-template-columns:repeat(3,1fr);} .grid-2{grid-template-columns:repeat(2,1fr);} }

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .18s ease;}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);}
.card .mediaph{border-radius:0; aspect-ratio:4/3;}
.card-body{padding:1.2rem 1.3rem 1.4rem;}
.card-body h3{font-size:1.12rem; margin-bottom:0.4rem;}
.card-body p{font-size:0.87rem; color:var(--ink-muted); margin:0 0 0.9rem;}
.card-foot{display:flex; justify-content:space-between; align-items:center; font-size:0.84rem;}
.price-tag{font-weight:700; color:var(--accent); font-family:var(--font-mono); font-size:0.85rem;}
.text-link{font-weight:600; font-size:0.84rem; text-decoration:none; border-bottom:1.5px solid var(--accent); padding-bottom:1px; transition:color .15s ease;}
.text-link:hover{color:var(--accent);}

/* ---------- split (text/media) ---------- */
.split{display:grid; grid-template-columns:1fr; gap:2rem; align-items:center;}
.split .mediaph{aspect-ratio:4/3;}
.split.reverse .split-media{order:-1;}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr; gap:3.5rem;}
}

/* ---------- feature grid ---------- */
.feat-grid{display:grid; grid-template-columns:1fr; gap:1rem;}
@media (min-width:700px){ .feat-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:980px){ .feat-grid{grid-template-columns:repeat(3,1fr);} }
.feat{background:var(--surface); border-radius:var(--radius-md); padding:1.5rem; border:1px solid var(--border); box-shadow:var(--shadow-sm);}
.section.dark .feat{background:color-mix(in srgb, var(--bg) 8%, transparent); border-color:color-mix(in srgb, var(--bg) 20%, transparent); box-shadow:none;}
.section.dark .feat p{color:color-mix(in srgb, var(--bg) 70%, transparent);}
.feat .num{font-family:var(--font-mono); font-size:0.72rem; color:var(--accent); margin-bottom:0.7rem; display:block;}
.feat h4{font-size:1rem; margin-bottom:0.5rem;}
.feat p{font-size:0.87rem; color:var(--ink-muted); margin:0;}

/* ---------- about ---------- */
.intro-grid{display:grid; grid-template-columns:1fr; gap:2rem; align-items:start;}
.intro-grid .pricing-card{margin:0;}
.intro-grid .treatment-summary-card{margin:0;}
@media (min-width:900px){ .intro-grid{grid-template-columns:1.3fr 0.7fr; gap:3rem;} }
.local-context-grid{display:grid; grid-template-columns:1fr; gap:2rem; align-items:start;}
.local-facts{margin:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:1.1rem 1.3rem; box-shadow:var(--shadow-sm);}
.local-facts > div{display:flex; justify-content:space-between; gap:1rem; padding:0.75rem 0; border-bottom:1px solid var(--border);}
.local-facts > div:last-child{border-bottom:none;}
.local-facts dt{font-size:0.78rem; color:var(--ink-muted);}
.local-facts dd{margin:0; text-align:right; font-size:0.84rem; font-weight:600;}
@media (min-width:900px){ .local-context-grid{grid-template-columns:1.2fr 0.8fr; gap:3rem;} }
.about{display:grid; grid-template-columns:1fr; gap:2rem; align-items:center;}
.about .mediaph{aspect-ratio:4/5;}
.about blockquote{font-size:1.2rem; font-style:italic; margin:1.1rem 0; color:var(--ink); border-left:3px solid var(--accent); padding-left:1rem;}
@media (min-width:900px){ .about{grid-template-columns:0.8fr 1.2fr; gap:3.5rem;} }
.about-quals{grid-column:1/-1; margin-top:1rem; padding-top:2rem; border-top:1px solid var(--border);}
.about-quals h2{font-size:1.3rem; margin-bottom:1.2rem;}
.quals-grid{display:grid; grid-template-columns:1fr; gap:1rem;}
@media (min-width:700px){ .quals-grid{grid-template-columns:repeat(2,1fr);} }
.quals-item{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:1.2rem 1.4rem;}
.quals-item b{display:block; font-size:0.95rem; margin-bottom:0.3rem;}
.quals-item span{display:block; font-size:0.84rem; color:var(--ink-muted); line-height:1.4;}

/* ---------- price list ---------- */
.price-groups{display:grid; grid-template-columns:1fr; gap:1.1rem; margin:1.3rem 0;}
@media (min-width:800px){ .price-groups{grid-template-columns:repeat(2,1fr);} }
.price-group{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:1.5rem 1.7rem; box-shadow:var(--shadow-sm);}
.price-group h3{font-family:var(--font-body); font-size:1.08rem; font-weight:700; margin:0 0 0.7rem; padding-bottom:0.7rem; border-bottom:1px solid var(--border);}
.price-list{max-width:none;}
.price-row{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:0.6rem 0; border-bottom:1px dashed var(--border); font-size:0.98rem;}
.price-row:last-child{border-bottom:none;}
.price-row span:first-child{font-weight:700; color:var(--ink);}
.price-row .p{font-weight:700; font-family:var(--font-mono); color:var(--accent); white-space:nowrap;}
.price-group-compact{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:1.3rem 1.5rem; box-shadow:var(--shadow-sm); margin:1.1rem 0;}
.price-group-compact h3{font-family:var(--font-body); font-size:1rem; font-weight:700; margin:0 0 0.6rem;}

/* ---------- reviews ---------- */
.rev-summary{display:flex; align-items:center; gap:1.2rem; margin-bottom:1.6rem; flex-wrap:wrap;}
.rev-score{font-size:2.4rem; font-weight:400; font-family:var(--font-display);}
.rev-stars{color:var(--accent); letter-spacing:2px;}
.rev-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:1.2rem; box-shadow:var(--shadow-sm);}
.rev-card p{font-size:0.92rem; margin:0 0 0.7rem;}
.rev-card span{font-size:0.8rem; color:var(--ink-muted); font-weight:600;}

/* ---------- city grid ---------- */
.city-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:0.9rem;}
@media (min-width:700px){ .city-grid{grid-template-columns:repeat(3,1fr);} }
.city-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:1.1rem 1.2rem;}
.city-card.home{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
.city-card h4{font-size:0.98rem; margin-bottom:0.2rem;}
.city-card span{font-size:0.78rem; opacity:0.85;}

/* ---------- FAQ accordion ---------- */
.faq-list{max-width:780px;}
.faq-item{border-bottom:1px solid var(--border);}
.faq-item summary{padding:1.1rem 0; font-weight:700; font-size:0.98rem; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-family:var(--font-mono); color:var(--accent); font-size:1.2rem; flex-shrink:0;}
.faq-item[open] summary::after{content:"–";}
.faq-item p{padding-bottom:1.1rem; margin:0; font-size:0.9rem; color:var(--ink-muted); max-width:65ch;}

/* ---------- Orte einklappen (Cities-Accordion) ---------- */
.cities-more{margin-top:1.2rem;}
.cities-more summary{cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:0.5rem; font-weight:600; font-size:0.92rem; color:var(--accent);}
.cities-more summary::-webkit-details-marker{display:none;}
.cities-more summary::after{content:"↓"; transition:transform var(--motion-fast) var(--ease); font-size:0.85rem;}
.cities-more[open] summary::after{transform:rotate(180deg);}
.cities-more .city-grid{margin-top:1.1rem;}
.locations-more{margin-top:0.6rem;}
.locations-more summary{cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:0.5rem; font-weight:600; font-size:0.88rem; color:var(--accent);}
.locations-more summary::-webkit-details-marker{display:none;}
.locations-more summary::after{content:"↓"; transition:transform var(--motion-fast) var(--ease); font-size:0.8rem;}
.locations-more[open] summary::after{transform:rotate(180deg);}
.locations-more .locations-list{margin-top:0.7rem;}

/* ---------- location ---------- */
.location{display:grid; grid-template-columns:1fr; gap:1.6rem;}
.location-info p{font-size:0.92rem; margin:0.35rem 0; color:var(--ink-muted);}
.location-info strong{color:var(--ink);}
.location .mediaph{aspect-ratio:4/3;}
.location-actions{display:flex; gap:0.8rem; flex-wrap:wrap; margin-top:1.3rem;}
.data-flag{display:inline-block; font-family:var(--font-mono); font-size:0.72rem; color:var(--accent); background:var(--accent-soft); padding:0.15rem 0.5rem; border-radius:6px; margin:0.3rem 0;}
@media (min-width:900px){ .location{grid-template-columns:1fr 1fr; gap:3rem;} }

/* ---------- final CTA ---------- */
.final-cta{text-align:center; padding:3.5rem 0;}
.final-cta h2{font-size:clamp(1.7rem,3.4vw,2.3rem); margin-bottom:1rem;}
.final-cta-ctas{display:flex; gap:0.8rem; justify-content:center; flex-wrap:wrap;}

/* ---------- footer ---------- */
.site-footer{padding:2.6rem 0; border-top:1px solid var(--border); font-size:0.85rem;}
.footer-grid{display:grid; grid-template-columns:1fr; gap:1.6rem;}
.footer-grid h5{font-weight:700; margin-bottom:0.7rem; font-size:0.8rem;}
.footer-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.5rem; color:var(--ink-muted);}
.footer-bottom{margin-top:2rem; padding-top:1.4rem; border-top:1px solid var(--border); display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.7rem; color:var(--ink-muted); font-size:0.78rem;}
.footer-credit{opacity:0.7;}
.footer-credit a{text-decoration:underline; text-underline-offset:2px;}
.footer-consent-button{background:none; border:0; padding:0; color:inherit; font:inherit; text-decoration:underline; text-underline-offset:2px; cursor:pointer;}
@media (min-width:900px){ .footer-grid{grid-template-columns:1.3fr 1fr 1fr 1fr;} }

/* ---------- sticky mobile CTA ---------- */
.sticky-cta{position:sticky; bottom:0; z-index:30; display:flex; gap:0.5rem; padding:0.7rem 0.9rem calc(0.7rem + env(safe-area-inset-bottom)); background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(10px); border-top:1px solid var(--border);}
.sticky-cta .btn{flex:1;}
@media (min-width:900px){ .sticky-cta{display:none;} }
@media (max-width:420px){ .sticky-cta{gap:0.35rem; padding-left:0.55rem; padding-right:0.55rem;} .sticky-cta .btn{padding-left:0.5rem; padding-right:0.5rem; font-size:0.78rem;} }

/* ---------- Zurueck-nach-oben: nur mobil ---------- */
.back-to-top{display:none;}
@media (max-width:899px){
  .back-to-top{
    position:fixed; right:1rem; bottom:calc(1rem + 5.5rem + env(safe-area-inset-bottom, 0px)); z-index:45;
    width:46px; height:46px; padding:0; border:1px solid var(--border); border-radius:50%;
    background:var(--surface); color:var(--ink); box-shadow:var(--shadow-md); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden; pointer-events:none; transform:translateY(0.5rem);
    transition:opacity var(--motion-fast) var(--ease), visibility 0s linear var(--motion-fast), transform var(--motion-fast) var(--ease), background-color var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
  }
  .back-to-top.visible{opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); transition-delay:0s;}
  .back-to-top svg{width:20px; height:20px;}
  .back-to-top:hover, .back-to-top:focus-visible{background:var(--accent); color:var(--accent-ink);}
}

/* ---- Schwebende Kontaktleiste: Desktop rechter Rand ---- */
.floating-contact{display:none;}
@media (min-width:900px){
  .floating-contact{position:fixed; right:1.6rem; top:50%; transform:translateY(-50%); z-index:35; display:flex; flex-direction:column; gap:0.7rem;}
  .fc-btn{
    position:relative; width:48px; height:48px; border-radius:50%;
    background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-md);
    display:flex; align-items:center; justify-content:center; color:var(--ink);
    transition:background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .fc-btn svg{width:20px; height:20px;}
  .fc-btn:hover, .fc-btn:focus-visible{background:var(--accent); color:var(--accent-ink); transform:scale(1.07); box-shadow:var(--shadow-lg);}
  .fc-tooltip{
    position:absolute; right:calc(100% + 0.8rem); top:50%; transform:translateY(-50%) translateX(6px);
    background:var(--ink); color:#fff; font-size:0.78rem; font-weight:600; white-space:nowrap;
    padding:0.4rem 0.8rem; border-radius:var(--radius-sm); opacity:0; pointer-events:none;
    transition:opacity .15s ease, transform .15s ease;
  }
  .fc-btn:hover .fc-tooltip, .fc-btn:focus-visible .fc-tooltip{opacity:1; transform:translateY(-50%) translateX(0);}
}

/* ---------- forms ---------- */
.form{max-width:520px; display:flex; flex-direction:column; gap:1.1rem;}
.field label{display:block; font-size:0.8rem; font-weight:700; margin-bottom:0.4rem;}
.field .required{color:var(--accent);}
.field input, .field textarea{width:100%; font-family:var(--font-body); font-size:0.95rem; padding:0.85rem 1rem; border-radius:var(--radius-sm); border:1.5px solid var(--border); background:var(--surface); color:var(--ink);}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.field small{display:block; font-size:0.76rem; color:var(--ink-muted); margin-top:0.35rem;}
.field.has-error input, .field.has-error textarea{border-color:var(--error);}
.field .err-msg{display:none; font-size:0.78rem; color:var(--error); margin-top:0.35rem;}
.field.has-error .err-msg{display:block;}
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.form-status{padding:0.9rem 1.1rem; border-radius:var(--radius-sm); font-size:0.9rem; display:none;}
.form-status.visible{display:block;}
.form-status.success{background:#e3ebe1; color:#3d5a3f;}
.form-status.error{background:var(--error-soft); color:var(--error);}
.consent-checkbox{display:flex; align-items:flex-start; gap:0.6rem; font-size:0.82rem; color:var(--ink-muted);}
.consent-checkbox input{margin-top:0.2rem;}

/* ---------- cookie consent banner ---------- */
.consent-banner{
  position:fixed; left:1rem; right:1rem; bottom:calc(1rem + 5.5rem + env(safe-area-inset-bottom, 0px)); z-index:200;
  max-width:560px; margin:0 auto;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-md); padding:1.4rem 1.5rem; max-height:min(80vh, 620px); overflow:auto;
  transform:translateY(120%); visibility:hidden; pointer-events:none; transition:transform .3s ease, visibility 0s linear .3s;
}
.consent-banner.visible{transform:translateY(0); visibility:visible; pointer-events:auto; transition:transform .3s ease, visibility 0s linear 0s;}
/* Auf Desktop gibt es keine Sticky-CTA-Leiste am unteren Rand -- dort naeher an die Kante. */
@media (min-width:900px){ .consent-banner{bottom:1rem;} }
.consent-banner h3{font-size:1.02rem; margin-bottom:0.5rem;}
.consent-banner p{font-size:0.85rem; color:var(--ink-muted); margin:0 0 1rem;}
.consent-actions{display:flex; gap:0.6rem; flex-wrap:wrap;}
.consent-settings{display:none; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--border); flex-direction:column; gap:0.7rem;}
.consent-settings.open{display:flex;}
.consent-cat{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; font-size:0.84rem;}
.consent-cat b{display:block; font-size:0.86rem;}
.consent-cat span{color:var(--ink-muted); font-size:0.78rem;}
.consent-link-row{margin-top:0.8rem; font-size:0.78rem; color:var(--ink-muted);}
.consent-link-row a{text-decoration:underline;}
.map-placeholder{background:linear-gradient(135deg,var(--surface-2),var(--accent-soft)); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.65rem; padding:1.4rem; text-align:center; color:var(--ink-muted);}
.map-placeholder strong{color:var(--ink);}
.map-placeholder span{font-size:0.82rem;}
.map-placeholder .text-link{font-size:0.82rem;}
.switch{position:relative; width:38px; height:22px; flex-shrink:0;}
.switch input{opacity:0; width:0; height:0;}
.switch .track{position:absolute; inset:0; background:var(--border); border-radius:999px; transition:background .15s;}
.switch .track::before{content:""; position:absolute; width:16px; height:16px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform .15s;}
.switch input:checked + .track{background:var(--accent);}
.switch input:checked + .track::before{transform:translateX(16px);}
.switch input:disabled + .track{opacity:0.5;}

/* ---------- treatment page summary / proof ---------- */
.treatment-summary-card{background:var(--ink); color:var(--bg); border-radius:var(--radius-md); padding:1.6rem; display:flex; flex-direction:column; box-shadow:var(--shadow-md);}
.treatment-summary-label{font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:color-mix(in srgb, var(--bg) 68%, transparent); margin-bottom:0.7rem;}
.treatment-summary-card h3{color:var(--bg); font-size:1.2rem; margin-bottom:0.7rem;}
.treatment-summary-card p{margin:0 0 0.7rem; color:color-mix(in srgb, var(--bg) 82%, transparent);}
.treatment-summary-card .treatment-summary-note{font-size:0.85rem; color:color-mix(in srgb, var(--bg) 62%, transparent); margin-bottom:1.4rem;}
.treatment-summary-card .btn{align-self:flex-start; margin-top:auto;}
.treatment-proof .section-head{max-width:720px;}
.treatment-proof .section-head h2{color:var(--bg);}
.treatment-proof-grid{display:grid; grid-template-columns:1fr; gap:2rem;}
.treatment-proof-item{border-top:1px solid color-mix(in srgb, var(--bg) 24%, transparent); padding-top:1rem;}
.treatment-proof-item .num{font-family:var(--font-mono); font-size:0.72rem; color:var(--accent); display:block; margin-bottom:0.7rem;}
.treatment-proof-item h3{font-size:1rem; color:var(--bg); margin-bottom:0.4rem;}
.treatment-proof-item p{font-size:0.88rem; color:color-mix(in srgb, var(--bg) 68%, transparent); margin:0; max-width:34ch;}
@media (min-width:700px){ .treatment-proof-grid{grid-template-columns:repeat(3,1fr); gap:2.4rem;} }

/* ---------- scroll reveal ----------
   Nur sichtbar unsichtbar, wenn JS tatsaechlich laeuft (Klasse "js" wird per Inline-Script
   sofort im <head> gesetzt). Ohne JS oder bevor es geladen ist, bleibt aller Inhalt normal
   sichtbar — kein Risiko einer dauerhaft unsichtbaren Seite bei JS-Fehlern/Blockern. */
.js .reveal{opacity:0; transform:translateY(20px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease);}
.js .reveal.in{opacity:1; transform:translateY(0);}
/* Gestaffeltes Einblenden in Grids/Reihen -- die Seite soll beim Scrollen leben statt alles gleichzeitig zu zeigen */
.grid-3 .reveal:nth-child(2), .grid-2 .reveal:nth-child(2), .feat-grid .reveal:nth-child(2), .pricing-grid .reveal:nth-child(2), .city-grid .reveal:nth-child(2){transition-delay:.15s;}
.grid-3 .reveal:nth-child(3), .grid-2 .reveal:nth-child(3), .feat-grid .reveal:nth-child(3), .pricing-grid .reveal:nth-child(3), .city-grid .reveal:nth-child(3){transition-delay:.3s;}
.grid-3 .reveal:nth-child(4), .feat-grid .reveal:nth-child(4), .city-grid .reveal:nth-child(4){transition-delay:.45s;}
.grid-3 .reveal:nth-child(5), .feat-grid .reveal:nth-child(5), .city-grid .reveal:nth-child(5){transition-delay:.6s;}
.grid-3 .reveal:nth-child(6), .feat-grid .reveal:nth-child(6), .city-grid .reveal:nth-child(6){transition-delay:.75s;}
/* Sanfter Bild-Zoom beim Einblenden -- dezente Bewegung statt statischem Foto */
.split-media img, .card .mediaph-photo img, .hero-media .mediaph-photo img{transform:scale(1.06); transition:transform 1.1s var(--ease);}
.js .reveal.in .split-media img, .js .reveal.in .mediaph-photo img{transform:scale(1);}
/* Grosse Fotos: ruhige, kontinuierliche Bewegung statt einmaligem Zoom mit sichtbarem Ende.
   Startet erst, wenn das Bild ins Blickfeld scrollt. */
@keyframes cinematic-image-drift{
  from{transform:scale(1.02);}
  to{transform:scale(1.08);}
}
img.zoom-img{
  transform:scale(1.02);
  animation:cinematic-image-drift 18s ease-in-out infinite alternate;
  animation-play-state:paused;
}
.js .reveal.in img.zoom-img{animation-play-state:running;}
@media (prefers-reduced-motion: reduce){
  img.zoom-img{animation:none; transform:none;}
}

/* ---------- misc ---------- */
.breadcrumbs{font-size:0.8rem; color:var(--ink-muted); padding:1rem 0;}
.breadcrumbs a{text-decoration:underline;}
.legal-content h2{font-size:1.2rem; margin:1.8rem 0 0.7rem;}
.legal-content h3{font-size:1rem; margin:1.3rem 0 0.5rem;}
.legal-content p, .legal-content li{font-size:0.92rem; color:var(--ink-muted); margin:0 0 0.9rem;}
.legal-content{max-width:760px;}
.notice-box{background:var(--accent-soft); border-radius:var(--radius-sm); padding:1rem 1.2rem; font-size:0.85rem; margin:1.5rem 0;}

/* ==========================================================================
   HOMEPAGE v2 — Premium/SaaS-Komposition (Hero-Layering, Bento-Grid,
   Pricing-Cards, Social-Proof). Additiv, andere Seiten bleiben unberührt.
   ========================================================================== */

/* ---- Hero v2: großformatig, geschichtet ---- */
.hero-v2{padding:2.2rem 0 3rem; position:relative; overflow:clip;}
.hero-v2::before{
  content:""; position:absolute; inset:-10% -10% auto -10%; height:120%;
  background:var(--gradient-warm); opacity:0.6; filter:blur(60px); z-index:0; pointer-events:none;
}
.hero-v2 .container{position:relative; z-index:1; display:grid; grid-template-columns:1fr; gap:2.4rem; align-items:center;}
.hero-v2-eyebrow{display:inline-flex; align-items:center; gap:0.5rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-pill); padding:0.4rem 0.9rem 0.4rem 0.5rem; font-size:0.78rem; font-weight:700; margin-bottom:1.3rem; box-shadow:var(--shadow-sm);}
.hero-v2-eyebrow .dot{width:8px; height:8px; border-radius:50%; background:var(--accent); display:inline-block;}
.hero-v2 h1{font-size:clamp(2.4rem,6.5vw,4.6rem); line-height:0.98; letter-spacing:-0.03em; margin-bottom:1.3rem;}
.hero-v2 h1 em{font-style:italic; color:var(--accent); font-weight:500;}
.hero-v2 .lede{font-size:1.12rem; margin-bottom:1.8rem; max-width:46ch;}
.hero-v2-ctas{display:flex; gap:0.8rem; flex-wrap:wrap; margin-bottom:1.6rem;}
.hero-v2-trust{display:flex; gap:1.4rem; flex-wrap:wrap; font-size:0.82rem; color:var(--ink-muted); font-weight:600;}
.hero-v2-trust span{display:inline-flex; align-items:center; gap:0.4rem;}
.hero-v2-trust .stars{color:var(--accent); letter-spacing:1px;}

.hero-visual{position:relative; width:100%; aspect-ratio:1/1; max-width:520px; margin:0 auto;}
.hero-visual-main{position:absolute; inset:0; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg);}
.hero-visual-main img{width:100%; height:100%; object-fit:cover;}
.hero-float-card{
  position:absolute; background:var(--surface); border-radius:var(--radius-md); box-shadow:var(--shadow-md);
  padding:0.9rem 1.1rem; display:flex; align-items:center; gap:0.7rem; z-index:2; max-width:230px;
}
.hero-float-card.card-1{left:-8%; bottom:12%;}
.hero-float-card.card-2{right:-6%; top:8%;}
.hero-float-card .avatar{width:40px; height:40px; border-radius:50%; overflow:hidden; flex-shrink:0; background:var(--surface-2);}
.hero-float-card .avatar img{width:100%; height:100%; object-fit:cover;}
.hero-float-card b{display:block; font-size:0.84rem;}
.hero-float-card span{font-size:0.74rem; color:var(--ink-muted);}
@media (min-width:900px){
  .hero-v2{padding:4rem 0 5rem;}
  .hero-v2 .container{grid-template-columns:1fr 0.95fr; gap:3rem;}
  .hero-visual{margin:0;}
}


/* ---- Pricing cards ---- */
.pricing-grid{display:grid; grid-template-columns:1fr; gap:1rem;}
@media (min-width:700px){ .pricing-grid{grid-template-columns:repeat(3,1fr);} }
.pricing-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:1.5rem; display:flex; flex-direction:column; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease;}
.pricing-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
.pricing-card.featured{background:var(--ink); color:var(--bg); border-color:var(--ink);}
.pricing-card.featured .pricing-card-note{color:color-mix(in srgb, var(--bg) 70%, transparent);}
.pricing-card h3{font-size:1.05rem; margin-bottom:0.3rem;}
.pricing-card .pricing-value{font-family:var(--font-display); font-size:2.2rem; font-weight:400; margin:0.6rem 0 0.3rem;}
.pricing-card .pricing-value sup{font-size:0.9rem; font-weight:600; margin-right:0.15rem;}
.pricing-card-note{font-size:0.82rem; color:var(--ink-muted); margin-bottom:1.2rem; flex:1;}
.pricing-card .btn{align-self:flex-start;}

/* ---- Social proof v2 ---- */
.proof-head{display:flex; flex-wrap:wrap; align-items:center; gap:1.6rem; margin-bottom:2rem;}
.proof-score-block{display:flex; align-items:baseline; gap:0.6rem;}
.proof-score-block .score{font-family:var(--font-display); font-size:3rem; font-weight:400;}
.proof-masonry{display:grid; grid-template-columns:1fr; gap:1rem;}
@media (min-width:700px){ .proof-masonry{grid-template-columns:repeat(2,1fr);} }
.proof-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:1.4rem; box-shadow:var(--shadow-sm);}
.proof-card .stars{color:var(--accent); margin-bottom:0.7rem; letter-spacing:1px;}
.proof-card p{font-size:0.94rem; margin:0;}
.proof-card .who{display:flex; align-items:center; gap:0.6rem; margin-bottom:0.8rem;}
.proof-card .who .initial{width:34px; height:34px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.85rem; flex-shrink:0;}
.proof-card .who span{font-size:0.82rem; color:var(--ink-muted); font-weight:600;}

/* ---- Standort v2 ---- */
.location-v2{position:relative; border-radius:var(--radius-lg); overflow:hidden; min-height:420px; display:flex; align-items:flex-end; box-shadow:var(--shadow-md);}
.location-v2 img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.location-v2 .scrim{position:absolute; inset:0; background:linear-gradient(90deg, rgba(27,24,21,0.85) 0%, rgba(27,24,21,0.55) 45%, rgba(27,24,21,0.1) 80%); z-index:1;}
.location-v2-content{position:relative; z-index:2; color:#fff; padding:2.2rem 1.6rem; width:100%;}
@media (min-width:700px){ .location-v2-content{padding:3rem; max-width:480px;} }
.location-v2-content h2{color:#fff; margin-bottom:1rem;}
.location-v2-content p{color:rgba(255,255,255,0.85); font-size:0.92rem; margin:0.35rem 0;}
.location-v2-content strong{color:#fff;}
.location-v2-actions{display:flex; gap:0.7rem; flex-wrap:wrap; margin-top:1.3rem;}

/* ---- Vollflaechiges Bild-Feature mit Typografie ueber dem Bild (Layering statt Split) ---- */
.banner-feature{position:relative; border-radius:var(--radius-lg); overflow:hidden; min-height:460px; display:flex; align-items:flex-end; box-shadow:var(--shadow-md);}
.banner-feature img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.banner-feature .scrim{position:absolute; inset:0; background:linear-gradient(0deg, rgba(18,18,18,0.92) 0%, rgba(18,18,18,0.72) 60%, rgba(18,18,18,0.25) 100%); z-index:1;}
.banner-feature-content{position:relative; z-index:2; padding:2.4rem 1.6rem; max-width:640px;}
@media (min-width:700px){ .banner-feature-content{padding:3.2rem;} }
.banner-feature-content .kicker{color:#e6d7b8; text-shadow:0 1px 4px rgba(0,0,0,0.5);}
.banner-feature-content h2{color:#fff; margin-bottom:0.8rem;}
.banner-feature-content .lede{color:rgba(255,255,255,0.85);}
.banner-feature-content .stat-row .stat b{color:#fff;}
.banner-feature-content .stat-row .stat span{color:rgba(255,255,255,0.7);}
.banner-feature-content .text-link{color:#fff; border-bottom:1px solid rgba(255,255,255,0.5);}

/* ---- Section rhythm helpers ---- */
.section-tight{padding:2.6rem 0;}
.stat-row{display:flex; flex-wrap:wrap; gap:2.2rem; margin:1.6rem 0;}
.stat-row .stat b{display:block; font-family:var(--font-body); font-size:1.9rem; font-weight:700;}
.stat-row .stat span{font-size:0.8rem; color:var(--ink-muted);}

/* ==========================================================================
   INTRO — kurzer Lade-Moment vor dem eigentlichen Hero (nur Homepage)
   ========================================================================== */
#site-intro{
  position:fixed; inset:0; z-index:500; background:var(--ink); color:#fff; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.6rem;
  transition:opacity var(--motion-cinematic) var(--ease), visibility var(--motion-cinematic) var(--ease);
  pointer-events:none;
}
#site-intro.hide{opacity:0; visibility:hidden; pointer-events:none;}
#site-intro .intro-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.5; filter:saturate(0.75) brightness(0.75) sepia(0.08);}
#site-intro::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,18,18,0.55), rgba(18,18,18,0.82) 70%);}
#site-intro .intro-brand{position:relative; z-index:1; font-family:var(--font-display); font-style:italic; font-size:clamp(2.4rem,7vw,4.2rem); opacity:0; transform:translateY(14px); transition:opacity var(--motion-cinematic) var(--ease), transform var(--motion-cinematic) var(--ease);}
#site-intro .intro-sub{position:relative; z-index:1; font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase; opacity:0; transform:translateY(8px); transition:opacity var(--motion-cinematic) var(--ease) 0.25s, transform var(--motion-cinematic) var(--ease) 0.25s;}
#site-intro.in .intro-brand, #site-intro.in .intro-sub{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){ #site-intro{display:none;} }

/* ==========================================================================
   SPLIT-HERO — Fullscreen-Startansicht (Referenz: statisches Textpanel +
   rotierendes Bildpanel, kein direkter Sectionstapel darunter im ersten Blick)
   ========================================================================== */
.split-hero{
  display:grid; grid-template-columns:1fr;
  min-height:calc(100vh - var(--header-h)); min-height:calc(100svh - var(--header-h));
}
.split-hero-panel{
  padding:5.5rem clamp(1.2rem,5vw,4rem) 2.2rem;
  display:flex; flex-direction:column; justify-content:center;
  background:var(--bg);
}
.split-hero-kicker{display:flex; align-items:center; gap:0.7rem; font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); margin-bottom:1.3rem;}
.split-hero-kicker i{display:block; width:2.2rem; height:1px; background:var(--accent); flex-shrink:0;}
.split-hero-panel h1{font-size:clamp(2.3rem,5vw,3.6rem); line-height:1.05; margin-bottom:1.2rem; max-width:20ch;}
.split-hero-panel .lede{font-size:1.02rem; max-width:48ch; margin-bottom:1.8rem;}
.split-hero-ctas{display:flex; gap:0.8rem; flex-wrap:wrap; margin-bottom:1.8rem;}
.split-hero-trust{display:flex; align-items:center; gap:0.6rem; font-size:0.82rem; color:var(--ink-muted);}
.split-hero-trust .stars{color:var(--accent); letter-spacing:1px;}
.split-hero-rating{display:inline-flex; align-items:center; gap:0.55rem; font-size:0.86rem; color:var(--ink-muted); text-decoration:none;}
.split-hero-rating-stars{color:var(--accent); letter-spacing:1px; font-size:0.95rem;}
.split-hero-rating span:last-child{border-bottom:1px solid transparent; transition:border-color var(--motion-fast) var(--ease);}
.split-hero-rating:hover span:last-child{border-color:var(--ink-muted);}
.split-hero-features{display:flex; flex-direction:column; gap:0.6rem; margin-top:1.5rem; padding-top:1.3rem; border-top:1px solid var(--border);}
.split-hero-feature{display:flex; align-items:center; gap:0.7rem; font-size:0.9rem; color:var(--ink);}
.split-hero-feature svg{width:18px; height:18px; flex-shrink:0; color:var(--accent);}
@media (min-width:560px){ .split-hero-features{flex-direction:row; flex-wrap:wrap; gap:1.6rem;} }
.split-hero-media{position:relative; min-height:50vh; overflow:hidden; background:var(--ink); perspective:1400px;}
.split-hero-media::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0;
  background:radial-gradient(520px circle at var(--depth-light-x,50%) var(--depth-light-y,50%), rgba(255,255,255,0.16), transparent 62%);
  transition:opacity 1s var(--ease);
}
.split-hero-media.depth-active::after{opacity:1;}
.split-hero-slide{
  position:absolute; inset:0; opacity:0;
  transform:perspective(1400px) rotateX(var(--depth-y,0deg)) rotateY(var(--depth-x,0deg)) scale(1.012);
  transform-style:preserve-3d; transform-origin:center center;
  transition:opacity var(--motion-cinematic) var(--ease), transform 1.2s var(--ease);
}
.split-hero-slide.active{opacity:1;}
.split-hero-slide img{width:100%; height:100%; object-fit:cover; object-position:center center;}
.split-hero-home .split-hero-slide img{object-position:center 15%;}
.split-hero-slide .slide-caption{position:absolute; left:1.6rem; bottom:1.6rem; color:#fff; font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; background:rgba(18,18,18,0.45); padding:0.4rem 0.8rem; backdrop-filter:blur(6px);}
.split-hero-dots{position:absolute; left:1.6rem; top:1.6rem; display:flex; gap:0.4rem; z-index:2;}
.split-hero-dots button{width:6px; height:6px; padding:0; border-radius:50%; border:none; background:rgba(255,255,255,0.4); cursor:pointer; transition:background var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease);}
.split-hero-dots button.active{background:#fff; transform:scale(1.3);}
/* ---- Zertifikats-Hinweis: gleiches, dezentes Pill-Badge auf jeder Behandlungsseite statt
   wechselndem Text/Preis auf dem Bild -- ruhige, immer lesbare Loesung statt Drehelement. ---- */
.cert-seal{
  position:absolute; left:1.6rem; bottom:1.6rem; z-index:4;
  display:inline-flex; align-items:center; gap:0.55rem;
  background:var(--surface); padding:0.7rem 1.1rem; border-radius:var(--radius-pill);
  box-shadow:var(--shadow-lg); font-family:var(--font-mono); font-size:0.7rem; font-weight:600;
  letter-spacing:0.02em; color:var(--ink); white-space:nowrap;
}
.cert-seal-check{width:15px; height:15px; color:var(--accent); flex-shrink:0;}
@media (min-width:900px){
  .cert-seal{left:2.2rem; bottom:2.2rem; padding:0.85rem 1.3rem; font-size:0.8rem; gap:0.6rem;}
  .cert-seal-check{width:17px; height:17px;}
}
@media (min-width:900px){
  .split-hero{grid-template-columns:0.95fr 1.05fr;}
  .split-hero-media{min-height:calc(100vh - var(--header-h)); min-height:calc(100svh - var(--header-h));}
}
@media (max-width:699px){
  .split-hero-slide .slide-caption{left:1.6rem; bottom:auto; top:3.6rem;}
}
@media (max-width:899px){
  .split-hero-home .split-hero-panel{padding-top:4rem;}
}
/* Compact-Variante fuer Unterseiten: starkes Split-Screen-Statement, aber ohne
   Fullscreen-Scroll-Lock — die Seite darf sofort normal weiterscrollen. */
.split-hero.compact{min-height:auto;}
.split-hero.compact .split-hero-panel{padding-top:4rem; padding-bottom:2.6rem;}
.split-hero.compact .split-hero-media{min-height:60vh;}
@media (min-width:900px){
  .split-hero.compact .split-hero-media{min-height:calc(100vh - var(--header-h)); min-height:calc(100svh - var(--header-h));}
}
@media (prefers-reduced-motion: reduce){ .split-hero-slide{transition:none;} }
@media (prefers-reduced-motion: reduce){ .split-hero-media::after{display:none;} }

/* Hero uses same calm one-time zoom as location/contact and other homepage photos. */
.split-hero .split-hero-slide img.zoom-img{object-fit:cover; transform-origin:center center;}

/* ---------- 404 ---------- */
.not-found-hero .split-hero-panel{background:var(--ink); color:var(--bg);}
.not-found-hero .split-hero-kicker{color:var(--accent-soft);}
.not-found-hero .split-hero-kicker i{background:var(--accent-soft);}
.not-found-hero .split-hero-panel .lede{color:rgba(247,246,244,0.7);}
.not-found-code{font-family:var(--font-display); color:var(--accent-soft); font-size:clamp(6rem,13vw,11rem); letter-spacing:-0.08em; line-height:0.72; margin:-0.05rem 0 1.6rem -0.08em;}
.not-found-hero .btn-primary{background:var(--bg); color:var(--ink);}
.not-found-hero .btn-primary:hover{background:var(--accent-soft);}
.not-found-hero .btn-outline{border-color:rgba(247,246,244,0.45); color:var(--bg);}
.not-found-hero .btn-outline:hover{border-color:var(--bg); background:rgba(247,246,244,0.08);}
.not-found-backlink{display:inline-flex; align-items:center; gap:0.45rem; color:rgba(247,246,244,0.72); font-size:0.86rem; border-bottom:1px solid rgba(247,246,244,0.3); padding-bottom:0.15rem; width:max-content; transition:color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);}
.not-found-backlink:hover{color:var(--bg); border-color:var(--bg);}
.not-found-hero .split-hero-media{background:var(--surface-2);}
@media (max-width:699px){ .not-found-code{font-size:clamp(5.5rem,26vw,8rem); margin-bottom:1.4rem;} }

/* ==========================================================================
   PAGE TRANSITIONS — Progressive Enhancement, keine Abhängigkeit von JS.
   Unterstützende Browser (Chrome/Edge) blenden zwischen Seiten sanft über;
   alle anderen navigieren normal, ohne Fehler oder fehlende Funktion.
   ========================================================================== */
@media not (prefers-reduced-motion: reduce){
  @view-transition{ navigation: auto; }
}

/* ---------- Ortsnavigation: typografische Liste statt Button-Wand ---------- */
.locations-list{
  font-family:var(--font-display); font-style:italic; font-size:clamp(1.15rem,2.4vw,1.5rem);
  line-height:1.9; color:var(--ink-muted); max-width:920px;
}
.locations-list a{color:var(--ink); border-bottom:1px solid transparent; transition:border-color var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);}
.locations-list a:hover{color:var(--accent); border-color:var(--accent);}