/* ============================================================
   SCHRIFTEN - lokal ausgeliefert
   Keine Verbindung zu einem Schrift-CDN:
   Google Fonts vom CDN uebertraegt die IP-Adresse der Besucher in
   die USA, das ist ohne Einwilligung nicht zulaessig (LG Muenchen I,
   3 O 17493/20). Die Dateien liegen deshalb unter assets/fonts/.
   font-display:swap - Text ist sofort lesbar, die Webfont tauscht
   sich nach. Pfade sind relativ zu dieser CSS-Datei.
   ============================================================ */
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('../fonts/montserrat-300-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('../fonts/montserrat-300-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/montserrat-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/montserrat-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/montserrat-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/montserrat-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/montserrat-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/montserrat-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Playfair Display';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/playfair-display-400-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Playfair Display';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/playfair-display-400-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Playfair Display';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/playfair-display-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Playfair Display';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/playfair-display-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Playfair Display';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/playfair-display-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Playfair Display';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/playfair-display-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Playfair Display';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/playfair-display-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Playfair Display';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/playfair-display-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Playfair Display';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/playfair-display-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Playfair Display';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/playfair-display-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   Studio – Referenzseite
   Farb- und Typo-System abgeleitet aus dem Logo
   ============================================================ */

:root{
  /* Markenfarben aus dem Logo */
  --pink:        #E5006E;
  --pink-light:  #FF6FA8;
  --pink-soft:   #FFE4EF;
  --purple:      #8A2E8F;
  --blue:        #0B62B4;
  --blue-dark:   #0A3D73;
  --blue-soft:   #E3EEF9;

  --grad:        linear-gradient(100deg, #E5006E 0%, #C21C86 34%, #6A3EA1 64%, #0B62B4 100%);
  --grad-soft:   linear-gradient(115deg, #FFF1F7 0%, #FFFFFF 45%, #EEF5FC 100%);

  /* Neutrale Töne */
  --ink:         #16161E;
  --ink-soft:    #43434F;   /* Fliesstext, 9,8:1 auf Weiss */
  --muted-strong:#5A5A6B;   /* Sekundaertext, 6,8:1 */
  --muted:       #74748A;   /* nur Labels und Kleingedrucktes, 4,6:1 */
  --line:        #ECE6EC;
  --bg:          #FFFFFF;
  --bg-soft:     #FBF8FA;

  /* Typografie */
  --serif: "Playfair Display", "Times New Roman", Georgia, serif;
  --sans:  "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Layout */
  --wrap: 1200px;
  --r-sm: 12px;
  --r:    18px;
  --r-lg: 26px;
  --shadow:       0 18px 44px -26px rgba(22,22,30,.30);
  --shadow-lg:    0 34px 80px -34px rgba(138,46,143,.38);
  --shadow-hover: 0 22px 50px -24px rgba(138,46,143,.45);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--sans);
  font-weight:400;
  font-size:16.5px;
  line-height:1.72;
  color:var(--ink-soft);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* Notbremse fuer lange Komposita wie "Behandlungsdokumentation":
     greift nur, wenn das Wort sonst aus seiner Spalte laufen wuerde. */
  overflow-wrap:break-word;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family:var(--serif);
  color:var(--ink);
  font-weight:600;
  line-height:1.16;
  letter-spacing:-.015em;
  margin:0 0 .5em;
}
h1{ font-size:clamp(2.15rem, 4.6vw, 3.6rem); font-weight:500; hyphens:none; }
h2{ font-size:clamp(1.95rem, 3.4vw, 2.9rem); font-weight:500; }
h3{ font-size:1.24rem; }
h4{ font-size:1rem; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
sup{ font-size:.5em; vertical-align:super; color:var(--pink); }

/* ---------- Zeilenumbruch: kein einzelnes Wort in der letzten Zeile ---------- */
h1, h2, h3, h4,
.eyebrow,
.floater strong,
.floater small,
.hero__trust span,
.stats__list span,
.zones__note,
.footer__nav h4{
  text-wrap:balance;
}

p, li, blockquote, summary, figcaption, label,
.lead, .sec-head__lead, .booking__info li, .footer__about{
  text-wrap:pretty;
}

/* Schmale Spalten: lange deutsche Komposita sauber trennen statt umbrechen */
.card p,
.zone__body p,
.step p,
.tech__item p,
.qa__body p,
.review blockquote,
.footer__about,
.booking__info li{
  hyphens:auto;
  -webkit-hyphens:auto;
  overflow-wrap:break-word;
}

/* ---------- Layout-Helfer ---------- */
.container{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:26px; }
section{ padding:clamp(64px, 8vw, 116px) 0; position:relative; }
.section--soft{ background:var(--bg-soft); }

.grid{ display:grid; gap:26px; }
/* Rasterelemente haben von Haus aus min-width:auto. Ein langes Wort wie
   "Behandlungsdokumentation" macht die Spalte dadurch breiter als 1fr und
   schiebt sie auf schmalen Geraeten ueber den Rand. min-width:0 hebt das auf,
   den Umbruch uebernimmt die Silbentrennung aus der Grundtypografie. */
.grid > *{ min-width:0; }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }

.grad{
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.grad-bg{ background:var(--grad); color:#fff; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:0 0 10px 0;
}
.skip-link:focus{ left:0; }
/* Der Nach-oben-Button setzt den Fokus bewusst auf den Skip-Link, damit die
   Tastaturnavigation wieder oben startet. Per Maus soll er dabei aber nicht
   aufblitzen – deshalb bleibt er ausserhalb der Tastaturbedienung versteckt. */
.skip-link:focus:not(:focus-visible){ left:-9999px; }

:focus-visible{ outline:2px solid var(--pink); outline-offset:3px; border-radius:4px; }

/* ---------- Sektions-Kopf ---------- */
.eyebrow{
  font-size:.735rem; font-weight:600; letter-spacing:.19em; text-transform:uppercase;
  margin:0 0 .95em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.eyebrow--light{ background:none; color:rgba(255,255,255,.72); -webkit-text-fill-color:currentColor; }
.sec-head{ max-width:660px; margin-bottom:clamp(38px,4.5vw,60px); }
.sec-head--center{ margin-inline:auto; text-align:center; }
.sec-head__lead{ color:var(--muted); font-size:1.04rem; font-weight:300; }
.sec-head__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.sec-head--center .sec-head__actions{ justify-content:center; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--sans); font-size:.875rem; font-weight:500; letter-spacing:.055em;
  text-transform:uppercase;
  padding:15px 30px; border-radius:999px; border:1px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease),
             background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn--primary{
  background:var(--grad); color:#fff;
  box-shadow:0 12px 30px -14px rgba(196,20,132,.85);
  background-size:170% 100%;
}
.btn--primary:hover{ transform:translateY(-2px); background-position:100% 0; box-shadow:0 20px 40px -16px rgba(196,20,132,.9); }
.btn--ghost{ border-color:var(--line); color:var(--ink); background:#fff; }
.btn--ghost:hover{ border-color:var(--pink); color:var(--pink); transform:translateY(-2px); }
.btn--lg{ padding:18px 38px; font-size:.9rem; }
.btn--block{ display:flex; width:100%; }

/* Zielgruppen-Schaltflaechen: die beiden Enden des Markenverlaufs.
   Pink und Blau sind im Logo den beiden Silhouetten zugeordnet. */
.btn--damen{
  background:var(--pink); color:#fff;
  box-shadow:0 12px 30px -14px rgba(229,0,110,.85);
}
.btn--damen:hover{ background:#C10060; color:#fff; transform:translateY(-2px); }
.btn--herren{
  background:var(--blue); color:#fff;
  box-shadow:0 12px 30px -14px rgba(11,98,180,.85);
}
.btn--herren:hover{ background:#094E90; color:#fff; transform:translateY(-2px); }

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar{ background:var(--grad); color:#fff; font-size:.8rem; letter-spacing:.02em; }
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:42px; flex-wrap:wrap; }
.topbar p{ margin:0; }
.topbar__claim{ display:flex; align-items:center; gap:10px; font-weight:400; }
.topbar .dot{ width:7px; height:7px; border-radius:50%; background:#fff; flex:none; animation:pulse 2.4s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.45; transform:scale(.72); } }
.topbar__meta{ display:flex; align-items:center; gap:14px; opacity:.92; }
.topbar__meta a{ font-weight:600; }
.topbar__meta a:hover{ text-decoration:underline; }
.topbar .sep{ width:1px; height:13px; background:rgba(255,255,255,.45); }

/* ============================================================
   HEADER
   ============================================================ */
.header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.header.is-stuck{ border-color:var(--line); box-shadow:0 10px 34px -28px rgba(22,22,30,.5); }
.header__inner{ display:flex; align-items:center; justify-content:space-between; gap:28px; min-height:86px; }

/* ---------- Wortmarke ---------- */
.brand{ display:flex; align-items:center; gap:13px; flex:none; }
.brand__mark{ width:52px; height:52px; transition:transform .5s var(--ease); }
.brand:hover .brand__mark{ transform:scale(1.06); }
.brand__text{ display:flex; flex-direction:column; line-height:1; }
.brand__word{
  font-family:var(--serif); font-weight:700; font-size:1.72rem; letter-spacing:-.015em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand__word em{ font-style:normal; font-weight:400; }
.brand__claim{
  font-size:.545rem; font-weight:300; letter-spacing:.235em; text-transform:lowercase;
  color:var(--muted); margin-top:5px; padding-left:2px;
}

/* ---------- Navigation ---------- */
.nav{ display:flex; align-items:center; gap:26px; margin-left:auto; }
.nav__list{ display:flex; align-items:center; gap:24px; }
.nav__list a{
  position:relative; font-size:.875rem; font-weight:500; letter-spacing:.03em; color:var(--ink);
  padding:6px 0; transition:color .25s var(--ease);
}
.nav__list a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px; border-radius:2px;
  background:var(--grad); transition:width .3s var(--ease);
}
.nav__list a:hover{ color:var(--pink); }
.nav__list a:hover::after{ width:100%; }
.nav__cta{ padding:13px 26px; font-size:.8rem; }

.burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:46px; height:46px; padding:0 11px; border:1px solid var(--line); border-radius:12px;
  background:#fff; cursor:pointer;
}
.burger span{ display:block; height:2px; border-radius:2px; background:var(--ink); transition:transform .3s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
/* Der Hero fuellt den ersten Bildschirm komplett aus. Abgezogen werden
   Topbar (42px) und Header (86px), damit zusammen genau eine Viewport-Hoehe
   entsteht. dvh beruecksichtigt die ein- und ausfahrende Browserleiste auf
   dem Handy, vh bleibt als Rueckfallwert stehen. */
.hero{
  --hero-offset: 128px;
  min-height:calc(100vh - var(--hero-offset));
  min-height:calc(100dvh - var(--hero-offset));
  display:flex; align-items:center;
  padding:clamp(52px,6vw,92px) 0 clamp(70px,8vw,120px);
  background:var(--grad-soft); overflow:hidden;
}
.hero__inner{ display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:clamp(30px,5vw,70px); }
.hero h1{ margin-bottom:.35em; }
.lead{ font-size:1.09rem; font-weight:300; color:var(--ink-soft); max-width:53ch; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin:34px 0 42px; }

.hero__trust{ display:flex; flex-wrap:wrap; gap:14px 40px; padding-top:28px; border-top:1px solid rgba(138,46,143,.14); }
.hero__trust li{ display:flex; flex-direction:column; gap:1px; }
.hero__trust strong{ font-family:var(--serif); font-size:1.4rem; font-weight:600; color:var(--ink); }
.hero__trust span{ font-size:.78rem; color:var(--muted); letter-spacing:.03em; }
.stars{ color:#F5A623; letter-spacing:.12em; font-size:.8rem; line-height:1.4; }

/* Bewertungseintrag: Sterne links neben der Note, die Quelle darunter ueber
   beide Spalten. Die uebrigen Eintraege bleiben einspaltig. */
.hero__trust .rating{ display:grid; grid-template-columns:auto auto; justify-content:start; align-items:center; gap:0 10px; }
.hero__trust .rating span:last-child{ grid-column:1 / -1; }

/* Blobs */
.blob{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.5; pointer-events:none; }
.blob--rose{ width:460px; height:460px; background:#FFC9DF; top:-150px; left:-160px; }
.blob--azur{ width:520px; height:520px; background:#C9DFF6; bottom:-220px; right:-180px; }

/* Emblem */
.hero__visual{ position:relative; display:flex; align-items:center; justify-content:center; min-height:440px; }
/* Die Logodatei hat eine eigene, fast weisse Leinwand (#FDFDFD).
   Die Karte nimmt exakt diesen Ton auf, damit keine Kante sichtbar wird. */
.emblem{
  position:relative; display:flex; padding:16px; border-radius:34px;
  background:#FDFDFD;
  border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--shadow-lg);
  animation:float 7s ease-in-out infinite;
}
.emblem__logo{ width:min(400px,74vw); height:auto; }

/* Imagefilm im Hero: 16:9-Video in einer Karte, darunter eine angehaengte
   Leiste mit den beiden Badges – sie gehoeren zum Video, verdecken es aber nicht. */
.hero-video{
  position:relative; width:100%; max-width:620px;
  padding:10px; border-radius:30px;
  background:#fff; border:1px solid var(--line);
  box-shadow:var(--shadow-lg);
}
.hero-video__frame{
  position:relative; aspect-ratio:16 / 9;
  border-radius:22px; overflow:hidden; background:#F6EEF3;
}
.hero-video__media{ display:block; width:100%; height:100%; object-fit:cover; }
.hero-video__sound{
  position:absolute; left:12px; bottom:12px; z-index:2;
  display:grid; place-items:center; width:32px; height:32px; padding:0;
  border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.55); color:var(--ink);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .25s var(--ease), transform .25s var(--ease);
}
/* Kennzeichnung des KI-generierten Videos (Transparenzpflicht), bleibt immer sichtbar */
.hero-video__badge{
  position:absolute; right:12px; bottom:12px; z-index:2;
  padding:5px 11px; border-radius:999px;
  background:rgba(255,255,255,.75); color:var(--ink);
  font-size:.62rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  pointer-events:none;
}
.hero-video__sound:hover{ background:#fff; transform:scale(1.06); }
.hero-video__sound:focus-visible{ outline:2px solid var(--pink); outline-offset:3px; }
.hero-video__sound svg{ width:16px; height:16px; }
.hero-video__sound .hero-video__wave{ display:none; }
.hero-video__sound[aria-pressed="true"] .hero-video__wave{ display:inline; }
.hero-video__sound[aria-pressed="true"] .hero-video__mute{ display:none; }

.hero-video__meta{
  display:flex; justify-content:space-around; align-items:center;
  margin-top:10px;
}
.hero-video__meta .floater{
  position:static; transform:none;
  gap:10px; padding:8px 12px; border:0; border-radius:0; box-shadow:none; background:none;
}
.hero-video__meta .floater + .floater{ border-left:1px solid var(--line); }
.hero-video__meta .floater strong,
.hero-video__meta .floater small{ white-space:nowrap; }

@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }

/* Sitzen in der Logo-Karte und werden per translateY genau auf deren
   Ober- bzw. Unterkante zentriert – unabhaengig von ihrer eigenen Hoehe.
   Die Schwebebewegung kommt von der Karte, damit sie an ihr kleben bleiben. */
.floater{
  position:absolute; display:flex; align-items:center; gap:12px;
  padding:13px 20px 13px 14px; border-radius:16px;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow);
}
.floater--a{ left:-38px; top:0;    transform:translateY(-50%); }
.floater--b{ right:-38px; bottom:0; transform:translateY(50%); }
.floater__icon{
  display:grid; place-items:center; width:36px; height:36px; border-radius:50%;
  font-size:.85rem; flex:none;
}
.floater strong{ display:block; font-size:.83rem; font-weight:600; color:var(--ink); line-height:1.3; }
.floater small{ display:block; font-size:.7rem; color:var(--muted); }

/* ============================================================
   USP-KARTEN
   ============================================================ */
.card{
  padding:34px 30px 32px; border-radius:var(--r-lg);
  background:#fff; border:1px solid var(--line);
}
.card__icon{
  display:grid; place-items:center; width:52px; height:52px; border-radius:16px; margin-bottom:22px;
}
.card__icon svg{ width:24px; height:24px; }
.card h3{ margin-bottom:.5em; }
.card p{ font-size:.94rem; font-weight:300; color:var(--muted); }

/* ============================================================
   KÖRPERZONEN
   ============================================================ */
.tabs{ display:inline-flex; gap:4px; padding:5px; border-radius:999px; background:#fff; border:1px solid var(--line); margin-top:24px; }
.tab{
  border:0; background:none; cursor:pointer; padding:11px 30px; border-radius:999px;
  font-family:var(--sans); font-size:.83rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); transition:color .25s var(--ease), background .3s var(--ease);
}
.tab.is-active{ background:var(--grad); color:#fff; }

.zonepanel{ display:none; }
.zonepanel.is-active{ display:grid; }

.zone{
  overflow:hidden; border-radius:var(--r-lg); background:#fff; border:1px solid var(--line);
}
.zone__media{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  background:linear-gradient(140deg,#FFE4EF,#E3EEF9); /* Ladezustand */
}
.zone__media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
}
/* Zarter Markenschleier, damit die Fotos zum Farbklang der Seite passen */
.zone__media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(160deg,
    rgba(229,0,110,.10) 0%,
    rgba(138,46,143,.05) 45%,
    rgba(11,98,180,.14) 100%);
}

.zone__body{ padding:24px 24px 26px; }
.zone__body h3{ font-size:1.1rem; margin-bottom:.35em; }
.zone__body p{ font-size:.87rem; font-weight:300; color:var(--muted); margin-bottom:.9em; }

.zones__note{ margin-top:34px; font-size:.92rem; font-weight:300; color:var(--muted); text-align:center; }
.zones__note a{ font-weight:500; color:var(--pink); }
.zones__note a:hover{ text-decoration:underline; }

/* ============================================================
   ABLAUF
   ============================================================ */
.steps__list{ display:grid; grid-template-columns:repeat(5,1fr); gap:24px; position:relative; }
.steps__list::before{
  content:""; position:absolute; left:6%; right:6%; top:27px; height:2px;
  background:linear-gradient(90deg, rgba(229,0,110,.28), rgba(138,46,143,.28), rgba(11,98,180,.28));
}
.step{ position:relative; text-align:center; padding:0 6px; }
.step__num{
  display:grid; place-items:center; width:56px; height:56px; margin:0 auto 20px;
  border-radius:50%; background:#fff; border:2px solid transparent;
  background-image:linear-gradient(#fff,#fff), var(--grad);
  background-origin:border-box; background-clip:padding-box, border-box;
  font-family:var(--serif); font-size:1.02rem; font-weight:600;
  color:var(--pink); position:relative; z-index:1;
  transition:transform .35s var(--ease);
}
.step:hover .step__num{ transform:translateY(-5px) scale(1.06); }
.step h3{ font-size:1.06rem; margin-bottom:.45em; }
.step p{ font-size:.87rem; font-weight:300; color:var(--muted); }

/* ============================================================
   TECHNOLOGIE
   ============================================================ */
.tech__inner{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(34px,5vw,72px); align-items:start; }
.tech__copy{ position:sticky; top:120px; }
.tech__copy .btn{ margin-top:14px; }
.tech__list{ display:grid; gap:16px; }
.tech__item{
  padding:28px 30px; border-radius:var(--r); background:#fff; border:1px solid var(--line);
}
.tech__item h3{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:.4em; }
.tech__item h3 span{
  font-family:var(--sans); font-size:.68rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  padding:4px 11px; border-radius:999px; background:var(--pink-soft); color:var(--pink);
}
.tech__item:nth-child(3) h3 span,
.tech__item:nth-child(4) h3 span{ background:var(--blue-soft); color:var(--blue); }
.tech__item p{ font-size:.93rem; font-weight:300; color:var(--muted); }
.tech__meta{ font-size:.8rem !important; letter-spacing:.03em; font-weight:400; color:var(--muted-strong) !important; margin:.7em 0 0 !important; }

/* ============================================================
   ZAHLEN
   ============================================================ */
.stats{ padding:clamp(34px,4vw,56px) 0 0; }
.stats__list{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  background:var(--grad); border-radius:var(--r-lg);
  padding:clamp(34px,4vw,52px) clamp(24px,3vw,44px); color:#fff; text-align:center;
  box-shadow:var(--shadow-lg);
}
.stats__list li{ display:flex; flex-direction:column; gap:4px; }
.stats__list li + li{ border-left:1px solid rgba(255,255,255,.22); }
.stats__list strong{ font-family:var(--serif); font-size:clamp(1.9rem,3.2vw,2.7rem); font-weight:600; line-height:1; }
.stats__list span{ font-size:.79rem; font-weight:300; letter-spacing:.07em; text-transform:uppercase; opacity:.85; hyphens:auto; overflow-wrap:break-word; }

/* ============================================================
   KUNDENSTIMMEN
   ============================================================ */
.review{
  margin:0; padding:36px 32px 30px; border-radius:var(--r-lg);
  background:#fff; border:1px solid var(--line); position:relative;
}
.review::before{
  content:"\201C"; position:absolute; top:6px; right:24px;
  font-family:var(--serif); font-size:5.4rem; line-height:1; color:var(--pink-soft);
}
.review .stars{ font-size:1rem; margin-bottom:16px; }
.review blockquote{ margin:0 0 22px; font-size:.98rem; font-weight:300; font-style:italic; color:var(--ink-soft); position:relative; }
.review blockquote::before{ content:"\201E"; }
.review blockquote::after{ content:"\201C"; }
.review figcaption{ display:flex; flex-direction:column; padding-top:18px; border-top:1px solid var(--line); }
.review figcaption strong{ font-size:.92rem; color:var(--ink); font-weight:600; }
.review figcaption span{ font-size:.76rem; color:var(--muted); }

/* ============================================================
   FAQ
   ============================================================ */
.faq__inner{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(34px,5vw,72px); align-items:start; }
.faq__aside{ position:sticky; top:120px; }
.faq__aside p{ font-size:.96rem; font-weight:300; color:var(--muted); margin-bottom:1.6em; }
.faq__list{ display:grid; gap:12px; }
.qa{ border:1px solid var(--line); border-radius:var(--r); background:#fff; overflow:hidden; }
.qa[open]{ border-color:var(--purple); box-shadow:var(--shadow-hover); }
.qa summary{
  position:relative; list-style:none; cursor:pointer;
  padding:22px 62px 22px 26px;
  font-family:var(--serif); font-size:1.05rem; font-weight:500; color:var(--ink);
  transition:color .25s var(--ease);
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ color:var(--pink); }
.qa summary::after{
  content:""; position:absolute; right:26px; top:50%; width:11px; height:11px;
  border-right:2px solid var(--pink); border-bottom:2px solid var(--pink);
  transform:translateY(-70%) rotate(45deg); transition:transform .3s var(--ease);
}
.qa[open] summary::after{ transform:translateY(-20%) rotate(-135deg); }
.qa__body{ padding:0 26px 24px; }
.qa__body p{ font-size:.93rem; font-weight:300; color:var(--muted); }

/* ---------- TEST: Online-Buchung (Salonkee) ---------- */
.onlinebook{ padding:clamp(40px,5vw,64px) 0; }
.onlinebook__card{
  display:flex; align-items:center; justify-content:space-between; gap:24px 40px; flex-wrap:wrap;
  padding:clamp(28px,3.4vw,42px); border-radius:var(--r-lg);
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow);
}
.onlinebook__card > div{ flex:1 1 380px; }
.onlinebook__card h2{ margin-bottom:.4em; }
.onlinebook__card p:not(.eyebrow){ font-weight:300; color:var(--muted); max-width:58ch; margin:0; }

/* ============================================================
   TERMIN
   ============================================================ */
.booking{ background:var(--grad); color:#fff; }
.booking__inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,68px); align-items:center; }
.booking h2{ color:#fff; }
.booking__copy > p{ font-weight:300; color:rgba(255,255,255,.86); max-width:46ch; }
.booking__info{ display:grid; gap:18px; margin-top:36px; padding-top:30px; border-top:1px solid rgba(255,255,255,.25); }
.booking__info li{ font-size:.9rem; font-weight:300; color:rgba(255,255,255,.86); }
.booking__info strong{ display:block; font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#fff; margin-bottom:3px; }

.booking__form{ background:#fff; border-radius:var(--r-lg); padding:clamp(28px,3.4vw,42px); box-shadow:0 40px 90px -40px rgba(0,0,0,.5); }
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field label{ font-size:.72rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); }
.field input, .field select, .field textarea{
  font-family:var(--sans); font-size:.94rem; font-weight:300; color:var(--ink);
  padding:14px 16px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:#FDFBFC; width:100%; resize:vertical;
  transition:border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--pink); background:#fff;
  box-shadow:0 0 0 4px rgba(229,0,110,.09);
}
.field input::placeholder, .field textarea::placeholder{ color:#B7B7C6; }

/* ---------- Pflichtfelder ---------- */
.form-legend{
  margin:0 0 20px; font-size:.72rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.req{ color:var(--pink); font-weight:600; }
.opt{
  font-size:.62rem; font-weight:400; letter-spacing:.09em;
  color:#A9A9BA; text-transform:none;
}

/* Auswahlfeld im Platzhalter-Zustand grau, gewaehlter Wert normal */
.field select:required:invalid{ color:#B7B7C6; }
.field select option{ color:var(--ink); }

/* Fehlerzustand erst nach der Eingabe, nicht schon beim Laden */
.field input:user-invalid,
.field select:user-invalid,
.field textarea:user-invalid{
  border-color:var(--pink);
  background:#FFF7FA;
  box-shadow:0 0 0 4px rgba(229,0,110,.09);
}
/* Honigtopf gegen Bots: aus dem Blickfeld, aber nicht display:none –
   manche Bots ueberspringen ausgeblendete Felder gezielt. Fuer Screenreader
   ist das Feld ueber aria-hidden am Container ausgenommen. */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.check:has(input:user-invalid){ color:var(--pink); }
.check input:user-invalid{ outline:2px solid var(--pink); outline-offset:2px; }
.check{ display:flex; align-items:flex-start; gap:11px; margin:8px 0 22px; font-size:.8rem; font-weight:300; color:var(--muted); }
.check input{ margin-top:3px; width:17px; height:17px; accent-color:var(--pink); flex:none; }
.check a{ color:var(--pink); text-decoration:underline; }
.form-note{ margin:16px 0 0; font-size:.83rem; text-align:center; color:var(--pink); min-height:1em; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:#0E1420; color:rgba(255,255,255,.62); padding:clamp(54px,6vw,84px) 0 32px; font-size:.9rem; font-weight:300; }
.footer__top{ display:grid; grid-template-columns:1.25fr 1.75fr; gap:clamp(34px,5vw,64px); padding-bottom:46px; border-bottom:1px solid rgba(255,255,255,.1); }
.brand--footer .brand__claim{ color:rgba(255,255,255,.5); }
/* Helle Kachel, weil die Logodatei einen weissen Grund hat */
.brand--footer .brand__mark{ width:58px; height:58px; padding:5px; border-radius:15px; background:#FDFDFD; }
.footer__about{ margin-top:22px; max-width:38ch; }
.socials{ display:flex; gap:11px; margin-top:24px; }
.socials a{
  display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.75);
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.socials a:hover{ background:var(--grad); color:#fff; border-color:transparent; transform:translateY(-3px); }
.socials svg{ width:18px; height:18px; }

.footer__nav{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.footer__nav h4{ color:#fff; font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; margin-bottom:20px; }
.footer__nav ul{ display:grid; gap:11px; }
.footer__nav a{ transition:color .25s var(--ease), padding-left .25s var(--ease); }
.footer__nav a:hover{ color:#fff; padding-left:5px; }

.footer__bottom{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; padding-top:26px; font-size:.8rem; }
.footer__legal{ display:flex; gap:22px; flex-wrap:wrap; margin:0; }
.footer__legal a:hover{ color:#fff; }
.footer__copy{ margin:0; opacity:.65; }
.footnote{ margin-top:22px; font-size:.72rem; line-height:1.7; opacity:.45; max-width:88ch; }

/* ============================================================
   GENAUER ABLAUF
   ============================================================ */
.phase{ padding:32px 30px; border-radius:var(--r-lg); background:#fff; border:1px solid var(--line); }
.phase__tag{
  display:inline-block; margin-bottom:14px; padding:5px 13px; border-radius:999px;
  background:var(--pink-soft); color:var(--pink);
  font-size:.65rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
}
.phase h3{ font-size:1.16rem; margin-bottom:1.1em; }
.phase__list{ display:grid; gap:18px; counter-reset:none; }
.phase__list li{
  position:relative; padding-left:20px; font-size:.88rem; font-weight:300; color:var(--muted);
}
.phase__list li::before{
  content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; border-radius:50%;
  background:var(--grad);
}
.phase__when{
  display:block; margin-bottom:2px;
  font-size:.7rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--ink);
}

.durations{ margin-top:26px; padding:32px 30px; border-radius:var(--r-lg); background:#fff; border:1px solid var(--line); }
.durations h3{ font-size:1.16rem; margin-bottom:1em; }
.durations__scroll{ overflow-x:auto; }
.durations__table{ width:100%; border-collapse:collapse; font-size:.88rem; font-weight:300; min-width:480px; }
.durations__table th{
  text-align:left; padding:0 0 12px; border-bottom:1px solid var(--line);
  font-family:var(--sans); font-size:.68rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.durations__table td{ padding:13px 0; border-bottom:1px solid var(--line); color:var(--ink-soft); }
.durations__table td:nth-child(2), .durations__table td:nth-child(4){ color:var(--muted); white-space:nowrap; }
.durations__table th + th, .durations__table td + td{ padding-left:16px; }
.durations__table tr:last-child td{ border-bottom:0; }
.durations__note{ margin-top:16px; font-size:.83rem; font-weight:400; color:var(--muted-strong); }
.durations__note a{ color:var(--pink); text-decoration:underline; }

/* ============================================================
   VORHER / NACHHER
   ============================================================ */
.results__grid{ grid-template-columns:repeat(2,1fr); }
.ba{ margin:0; }
.ba__stage{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  border-radius:var(--r-lg); border:1px solid var(--line);
  background:linear-gradient(140deg,#FFE4EF,#E3EEF9);
  --ba-pos:50%; --ba-clip:50%;
}
.ba__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba__clip{
  position:absolute; inset:0; overflow:hidden;
  clip-path:inset(0 var(--ba-clip) 0 0);
}
.ba__label{
  position:absolute; bottom:14px; z-index:2;
  padding:6px 14px; border-radius:999px;
  background:rgba(22,22,30,.62); color:#fff;
  font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.ba__label--before{ left:14px; }
.ba__label--after{ right:14px; }
.ba__badge{
  position:absolute; top:14px; right:14px; z-index:2;
  padding:6px 13px; border-radius:999px; background:var(--grad); color:#fff;
  font-size:.62rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
}
.ba__handle{
  position:absolute; top:0; bottom:0; left:var(--ba-pos); z-index:2;
  width:2px; margin-left:-1px; background:#fff; pointer-events:none;
  box-shadow:0 0 0 1px rgba(22,22,30,.16);
}
.ba__handle::after{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%; background:var(--grad);
  box-shadow:0 10px 26px -10px rgba(22,22,30,.7);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m10 8-4 4 4 4M14 8l4 4-4 4'/%3E%3C/svg%3E"),
    var(--grad);
  background-repeat:no-repeat; background-position:center; background-size:22px, cover;
}
.ba__range{
  position:absolute; inset:0; z-index:3; width:100%; height:100%; margin:0;
  -webkit-appearance:none; appearance:none; background:none; cursor:ew-resize; opacity:0;
}
.ba__range::-webkit-slider-thumb{ -webkit-appearance:none; width:46px; height:100%; }
.ba__range::-moz-range-thumb{ width:46px; height:100%; border:0; border-radius:0; }
.ba__range:focus-visible + .ba__handle::after{ outline:3px solid var(--pink); outline-offset:3px; }
.ba figcaption{ display:flex; flex-direction:column; gap:2px; padding:18px 4px 0; }
.ba figcaption strong{ font-family:var(--serif); font-size:1.08rem; font-weight:600; color:var(--ink); }
.ba figcaption span{ font-size:.8rem; font-weight:300; color:var(--muted); }

.results__facts{
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
  margin-top:44px; padding:34px 30px; border-radius:var(--r-lg);
  background:var(--bg-soft); border:1px solid var(--line);
}
.results__facts div{ display:flex; flex-direction:column; gap:5px; text-align:center; }
.results__facts strong{
  font-family:var(--serif); font-size:1.75rem; font-weight:600; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.results__facts span{ font-size:.84rem; font-weight:300; color:var(--muted); }
.results__disclaimer{
  margin-top:20px; text-align:center;
  font-size:.76rem; font-weight:300; line-height:1.7; color:var(--muted);
}

/* ============================================================
   RISIKEN & SICHERHEIT
   ============================================================ */
.risk{ padding:32px 30px; border-radius:var(--r-lg); background:#fff; border:1px solid var(--line); }
.risk h3{ font-size:1.12rem; margin-bottom:.6em; }
.risk > p{ font-size:.86rem; font-weight:300; color:var(--muted); margin-bottom:1.2em; }
.risk__tag{
  display:inline-block; margin-bottom:14px; padding:5px 13px; border-radius:999px;
  font-size:.65rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
}
.risk--ok .risk__tag{ background:#E6F4EC; color:#1E7A4C; }
.risk--warn .risk__tag{ background:#FDF1DF; color:#9A6412; }
.risk--stop .risk__tag{ background:var(--pink-soft); color:var(--pink); }
.risk--ok .ticks li::before{ background:#1E7A4C; }
.risk--ok .ticks li::after{ border-color:#fff; }
.risk--warn .ticks li::before{ background:#C68A22; }
.risk--warn .ticks li::after{ border-color:#fff; }
.risk--stop .ticks li::before{ background:var(--pink); }
.risk--stop .ticks li::after{ border-color:#fff; }

.safety__bottom{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:20px; }
.safety__box{ padding:32px 30px; border-radius:var(--r-lg); background:#fff; border:1px solid var(--line); }
.safety__box h3{ font-size:1.12rem; margin-bottom:1em; }
.safety__box p{ font-size:.88rem; font-weight:300; color:var(--muted); }
.safety__box p + p{ margin-top:.9em; }
.safety__legal{
  margin-top:18px !important; padding-top:16px; border-top:1px solid var(--line);
  font-size:.8rem !important; font-style:italic; color:var(--muted-strong);
}

/* ============================================================
   STANDORT
   ============================================================ */
.location__grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:start; }
.location__map{ position:sticky; top:120px; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:var(--bg-soft); }
.location__map iframe{ display:block; width:100%; height:440px; border:0; }
.location__maplink{
  display:block; padding:15px 22px; font-size:.83rem; font-weight:500; color:var(--pink);
  background:#fff; border-top:1px solid var(--line);
}
.location__maplink:hover{ text-decoration:underline; }
.location__info{ display:grid; gap:20px; }
.loc{ padding:30px 28px; border-radius:var(--r-lg); background:#fff; border:1px solid var(--line); }
.loc h3{ font-size:1.12rem; margin-bottom:.9em; }
.loc address{ font-style:normal; font-size:.92rem; font-weight:300; color:var(--muted); margin-bottom:20px; }
.loc address strong{ display:block; font-weight:600; color:var(--ink); margin-bottom:3px; }
.hours{ width:100%; border-collapse:collapse; font-size:.88rem; font-weight:300; }
.hours th{ text-align:left; padding:9px 0; font-weight:400; color:var(--muted); border-bottom:1px solid var(--line); }
.hours td{ text-align:right; padding:9px 0; color:var(--ink); border-bottom:1px solid var(--line); white-space:nowrap; }
.hours tr:last-child th, .hours tr:last-child td{ border-bottom:0; }
.loc__contact{ margin-top:18px; font-size:.92rem; font-weight:500; }
.loc__contact a{ color:var(--pink); }
.loc__contact a:hover{ text-decoration:underline; }

.arrival{ display:grid; gap:20px; }
.arrival li{ display:flex; gap:15px; }
.arrival__icon{ display:grid; place-items:center; width:42px; height:42px; border-radius:13px; flex:none; }
.arrival__icon svg{ width:21px; height:21px; }
.arrival div{ font-size:.87rem; font-weight:300; color:var(--muted); }
.arrival strong{ display:block; font-size:.9rem; font-weight:600; color:var(--ink); margin-bottom:2px; }
.loc__hint{ margin-top:18px; font-size:.83rem; font-weight:300; color:var(--muted); }

/* ============================================================
   BEWERTUNGSÜBERSICHT
   ============================================================ */
.ratings{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(28px,4vw,56px); align-items:center;
  margin-bottom:34px; padding:30px 34px; border-radius:var(--r-lg);
  background:#fff; border:1px solid var(--line);
}
.ratings__score{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.ratings__score strong{
  font-family:var(--serif); font-size:3.2rem; font-weight:600; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ratings__score .stars{ font-size:1rem; }
.ratings__count{ font-size:.76rem; color:var(--muted); }
.ratings__bars{ display:grid; gap:9px; }
.ratings__bars li{ display:grid; grid-template-columns:64px 1fr 40px; align-items:center; gap:14px; font-size:.78rem; color:var(--muted); }
.ratings__bars .bar{ height:7px; border-radius:999px; background:var(--line); overflow:hidden; }
.ratings__bars .bar i{ display:block; height:100%; border-radius:999px; background:var(--grad); }
.ratings__bars li span:last-child{ text-align:right; }
.stars__off{ color:var(--line); }

/* Nur für Screenreader */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============================================================
   RECHTSSEITEN (Impressum, Datenschutz, AGB, Barrierefreiheit)
   ============================================================ */
.header--legal .header__inner{ justify-content:space-between; }

.legal{ padding:clamp(44px,6vw,76px) 0 clamp(60px,8vw,104px); background:#fff; }
.legal__inner{ max-width:800px; }
.legal h1{ font-size:clamp(1.9rem,4vw,2.9rem); margin-bottom:.25em; }
.legal__meta{ font-size:.8rem; color:var(--muted); margin-bottom:2rem; }

.legal__note{
  padding:20px 24px; border-radius:var(--r);
  background:#FFF6FA; border:1px solid rgba(229,0,110,.18);
  font-size:.86rem; line-height:1.7; color:var(--ink-soft);
}
.legal__note strong{ color:var(--pink); font-weight:600; }

/* padding:0 setzt die globale section-Regel zurueck – sonst kaemen zu den
   Abstaenden noch einmal bis zu 116 px Innenabstand oben und unten dazu. */
.legal__sec{ padding:0; margin-top:clamp(30px,3.4vw,42px); }
.legal__sec h2{
  position:relative; padding-top:20px; margin-bottom:.65em;
  font-size:1.26rem; font-weight:500;
}
.legal__sec h2::before{
  content:""; position:absolute; top:0; left:0; width:44px; height:3px;
  border-radius:3px; background:var(--grad);
}
.legal__sec p{ font-size:.95rem; font-weight:400; color:var(--ink-soft); }
.legal__sec a{ color:var(--pink); text-decoration:underline; text-underline-offset:2px; }
.legal__sec a:hover{ text-decoration-thickness:2px; }

.legal__list{ display:grid; gap:10px; margin:0 0 1.1em; }
.legal__list li{
  position:relative; padding-left:22px; font-size:.95rem; font-weight:400; color:var(--ink-soft);
}
.legal__list li::before{
  content:""; position:absolute; left:0; top:.62em; width:7px; height:7px;
  border-radius:50%; background:var(--grad);
}

/* Redaktioneller Hinweis an die Betreiber, kein Vertragstext */
.legal__hint{
  margin-top:.9em !important; padding:12px 16px; border-left:3px solid var(--blue);
  background:var(--blue-soft); border-radius:0 10px 10px 0;
  font-size:.83rem !important; color:var(--blue-dark) !important;
}

/* Beispielwerte, die vor dem Go-Live ersetzt werden muessen.
   Bewusst nur als Markierung, nicht als Kasten - der Text soll sich
   wie ein fertiges Impressum lesen lassen. */
.ph{
  padding:0 2px;
  background:linear-gradient(transparent 60%, var(--pink-soft) 60%);
  border-bottom:2px dotted rgba(229,0,110,.5);
  color:inherit;
}

/* Nummerierte Checkliste am Seitenende */
.legal__todo{
  margin-top:clamp(48px,6vw,72px); padding:clamp(26px,3vw,36px);
  border-radius:var(--r-lg); background:var(--bg-soft); border:1px solid var(--line);
}
.legal__todo h2{ padding-top:0; }
.legal__todo h2::before{ display:none; }

.legal__list--num{ counter-reset:todo; gap:12px; }
.legal__list--num li{ padding-left:38px; }
.legal__list--num li::before{
  counter-increment:todo; content:counter(todo);
  display:grid; place-items:center;
  top:0; width:24px; height:24px; border-radius:50%;
  color:#fff; font-size:.68rem; font-weight:600; line-height:1;
}

.footer--legal{ padding:32px 0 28px; }
.footer--legal .footer__bottom{ padding-top:0; }

/* ============================================================
   NACH-OBEN-BUTTON
   ============================================================ */
.totop{
  position:fixed; right:24px; bottom:24px; z-index:90;
  display:grid; place-items:center;
  width:52px; height:52px; padding:0; border:0; border-radius:50%;
  background:var(--grad); background-size:170% 100%; color:#fff; cursor:pointer;
  box-shadow:0 14px 34px -12px rgba(196,20,132,.8);
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .3s var(--ease), transform .3s var(--ease),
             visibility .3s var(--ease), background-position .3s var(--ease);
}
.totop.is-visible{ opacity:1; visibility:visible; transform:none; }
.totop.is-visible:hover{ transform:translateY(-3px); background-position:100% 0; }
.totop svg{ width:21px; height:21px; }

@media (max-width:620px){
  .totop{ right:16px; bottom:16px; width:46px; height:46px; }
  .totop svg{ width:19px; height:19px; }
}

/* ============================================================
   STANDORT-BAND UNTER DEM HERO
   ============================================================ */
/* Das Band nimmt den Markenverlauf auf: oben als scharfe Kante in voller
   Saettigung, in der Flaeche als sehr helle Tonung. Die Kacheln stehen
   weiss darauf und treten dadurch hervor. */
.locbar{
  position:relative; padding:0;
  background:linear-gradient(100deg, #FFF1F7 0%, #FCF4FA 42%, #EEF5FC 100%);
  border-bottom:1px solid var(--line);
}
.locbar::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--grad);
}
.locbar__inner{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:14px; padding:24px 0;
}
.locbar__label{
  flex:none; margin:0;
  font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Jeder Standort als eigene Kachel mit Nadel-Symbol: so hebt sich das
   Band vom weissen Hero darueber ab, ohne eine Flaeche einzufaerben. */
.locbar__item{
  position:relative;
  display:flex; flex-direction:column; gap:2px;
  padding:13px 22px 13px 48px;
  border-radius:16px; border:1px solid rgba(255,255,255,.9); background:#fff;
  box-shadow:0 10px 26px -18px rgba(138,46,143,.4);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease),
             transform .25s var(--ease);
}
.locbar__item::before{
  content:""; position:absolute; left:17px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; background:var(--grad);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.locbar__item strong{ font-size:1.02rem; font-weight:600; color:var(--ink); }
.locbar__item span{ font-size:.85rem; font-weight:400; color:var(--muted-strong); }
.locbar__item:hover{
  border-color:var(--purple);
  box-shadow:var(--shadow-hover);
  transform:translateY(-2px);
}

/* Die Trennlinie war noetig, solange die Eintraege blosser Text waren */
.locbar__sep{ display:none; }
.locbar__cta{ margin-left:auto; padding:12px 24px; font-size:.76rem; }

@media (max-width:900px){
  .locbar__label{ width:100%; }
  .locbar__item{ flex:1 1 240px; }
  .locbar__cta{ margin-left:0; width:100%; }
}

/* ============================================================
   VERWEIS-REIHE (auf den Zielgruppenseiten)
   ============================================================ */
.linkrow__inner{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.linkrow__item{
  display:flex; flex-direction:column; gap:5px;
  padding:26px 28px; border-radius:var(--r-lg);
  background:#fff; border:1px solid var(--line);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.linkrow__item:hover{
  transform:translateY(-6px);
  border-color:var(--purple);
  box-shadow:var(--shadow-hover);
}
.linkrow__item strong{
  font-family:var(--serif); font-size:1.1rem; font-weight:600; color:var(--ink);
}
.linkrow__item strong::after{ content:" \2192"; color:var(--pink); }
.linkrow__item span{ font-size:.88rem; font-weight:400; color:var(--muted-strong); line-height:1.5; }

@media (max-width:900px){
  .linkrow__inner{ grid-template-columns:1fr; }
}

/* ============================================================
   CTA-BLOCK (verweist auf die Kontaktseite)
   ============================================================ */
.cta{ background:var(--grad); color:#fff; text-align:center; }
.cta__inner{ max-width:740px; }
.cta h2{ color:#fff; }
.cta__lead{
  font-size:1.02rem; font-weight:400; color:rgba(255,255,255,.93);
  margin-bottom:2.2rem;
}
.cta__actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
/* Die beiden Rufnummern stehen oben, das Formular als Hauptweg darunter
   in eigener Zeile - sonst bricht die Reihe unsymmetrisch um. */
.cta__actions--form{ margin-top:14px; }

/* Schaltflaechen auf dem Farbverlauf */
.btn--light{ background:#fff; color:var(--ink); box-shadow:0 14px 34px -16px rgba(0,0,0,.55); }
.btn--light:hover{ transform:translateY(-2px); color:var(--pink); box-shadow:0 20px 44px -18px rgba(0,0,0,.6); }
.btn--outline{ border-color:rgba(255,255,255,.55); color:#fff; }
.btn--outline:hover{ border-color:#fff; background:rgba(255,255,255,.14); transform:translateY(-2px); }

@media (max-width:760px){
  .cta__actions .btn{ width:100%; }
}

/* ============================================================
   LESBARKEIT DES FLIESSTEXTES
   Laufender Text stand im 300er Schnitt in --muted (#74748A) auf Weiss.
   Das sind 4,6:1 - formal AA-konform, in Montserrat Light bei 14 px aber
   duenn und blass. Laufender Text bekommt daher den Normalschnitt, den
   dunkleren Ton und etwas mehr Groesse. --muted bleibt fuer Labels,
   Meta-Angaben, Preiszeilen und Kleingedrucktes reserviert.
   ============================================================ */
.card p,
.zone__body p,
.tech__item p,
.phase__list li,
.risk > p,
.safety__box p,
.qa__body p,
.ticks li,
.arrival div,
.loc address,
.loc__hint,
.review blockquote,
.durations__table td,
.hours th,
.zones__note{
  font-weight:400;
  color:var(--ink-soft);
}

/* Etwas mehr Schriftgroesse und Zeilenabstand, wo laenger gelesen wird */
.card p,
.tech__item p,
.phase__list li,
.risk > p,
.safety__box p,
.qa__body p,
.ticks li{
  font-size:.94rem;
  line-height:1.74;
}

.zone__body p{ font-size:.89rem; line-height:1.65; }

/* Einleitungen und Bildunterschriften: eine Stufe leichter als Fliesstext,
   aber deutlich kraeftiger als vorher */
.sec-head__lead,
.ba figcaption span,
.results__facts span,
.review figcaption span,
.step p{
  font-weight:400;
  color:var(--muted-strong);
}
.sec-head__lead{ font-size:1.05rem; }
.step p{ font-size:.9rem; }

/* Auf dem Farbverlauf: hoehere Deckkraft statt duennerem Schnitt */
.booking__copy > p,
.booking__info li{ font-weight:400; color:rgba(255,255,255,.93); }

/* ============================================================
   HAKEN-LISTEN
   Basis fuer alle Aufzaehlungen mit Haken. Die farbigen Varianten
   stehen bei den jeweiligen Sektionen und gewinnen ueber ihre
   hoehere Spezifitaet.
   ============================================================ */
.ticks{ display:grid; gap:16px; }
.ticks li{
  position:relative; padding-left:30px;
  font-size:.92rem;
  /* Enger als der Fliesstext: dadurch haengen umgebrochene Zeilen
     sichtbar am Punkt und der Abstand zum naechsten Eintrag bleibt
     groesser als der Zeilenabstand innerhalb eines Eintrags. */
  line-height:1.5;
}
.ticks li::before{
  content:""; position:absolute; left:0; top:.28em;
  width:18px; height:18px; border-radius:50%; background:var(--grad);
}
.ticks li::after{
  content:""; position:absolute; left:5.2px; top:.6em;
  width:7px; height:4px;
  border-left:1.9px solid #fff; border-bottom:1.9px solid #fff;
  transform:rotate(-45deg);
}
.ticks--neutral li::before{ background:var(--line); }
.ticks--neutral li::after{ border-color:var(--muted-strong); }

/* Etwas Luft zwischen Einleitungssatz und Liste */
.risk > p{ margin-bottom:1.5em; }

/* ============================================================
   EINHEITLICHER KARTEN-HOVER
   Gilt fuer USP-Karten, Zonen, Technologie, Preise, Reviews, FAQ.
   Ein Effekt fuer alle: anheben + lila Rahmen + lila getoenter Schatten.
   ============================================================ */
.card,
.zone,
.tech__item,
.review,
.qa,
.phase,
.risk,
.safety__box,
.loc{
  transition:transform .35s var(--ease),
             box-shadow .35s var(--ease),
             border-color .35s var(--ease);
}

.card:hover,
.zone:hover,
.tech__item:hover,
.review:hover,
.qa:hover,
.phase:hover,
.risk:hover,
.safety__box:hover,
.loc:hover{
  transform:translateY(-6px);
  border-color:var(--purple);
  box-shadow:var(--shadow-hover);
}

/* Ausnahme: das hervorgehobene Preispaket behaelt seinen Verlaufsrahmen */

/* ============================================================
   REVEAL-ANIMATION
   ============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* ============================================================
   SCROLLBALKEN – Verlauf Pink oben, Blau unten, Wechsel in der Mitte
   ============================================================ */

/* Firefox (nur einfarbig moeglich – Mischton aus der Mitte des Verlaufs) */
html{ scrollbar-width:thin; scrollbar-color:#8A2E8F #F6EDF4; }

/* Chrome, Edge, Safari, Opera */
::-webkit-scrollbar{ width:13px; height:13px; }

::-webkit-scrollbar-track{
  background:linear-gradient(180deg, #FFEAF3 0%, #F7ECF5 48%, #F1EDF8 52%, #E6F0FA 100%);
}
::-webkit-scrollbar-track:horizontal{
  background:linear-gradient(90deg, #FFEAF3 0%, #F7ECF5 48%, #F1EDF8 52%, #E6F0FA 100%);
}

::-webkit-scrollbar-thumb{
  border-radius:999px;
  border:3px solid transparent;
  background-clip:content-box;
  background-image:linear-gradient(180deg,
    #E5006E 0%, #E5006E 40%,
    #8A2E8F 50%,
    #0B62B4 60%, #0B62B4 100%);
  transition:filter .25s var(--ease);
}
::-webkit-scrollbar-thumb:horizontal{
  background-image:linear-gradient(90deg,
    #E5006E 0%, #E5006E 40%,
    #8A2E8F 50%,
    #0B62B4 60%, #0B62B4 100%);
}
::-webkit-scrollbar-thumb:hover{ filter:saturate(1.15) brightness(1.06); }
::-webkit-scrollbar-corner{ background:transparent; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .steps__list{ grid-template-columns:repeat(2,1fr); gap:34px 24px; }
  .steps__list::before{ display:none; }
  .step{ text-align:left; }
  .step__num{ margin:0 0 16px; }
  .hero__inner{ grid-template-columns:1fr; }
  .hero__visual{ order:-1; min-height:auto; margin-bottom:12px; }
  .emblem{ animation:none; }
  .hero-video{ margin-inline:auto; }
  .floater--a{ left:-12px; }
  .floater--b{ right:-12px; }
  .tech__inner, .faq__inner, .booking__inner{ grid-template-columns:1fr; }
  .tech__copy, .faq__aside{ position:static; }

  .location__grid{ grid-template-columns:1fr; }
  .location__map{ position:static; }
  .location__map iframe{ height:340px; }
}

/* Die Desktop-Navigation braucht rund 1200 px. Darunter bricht sie um,
   deshalb uebernimmt das Burger-Menue schon auf Tablets im Hochformat. */
@media (max-width:1150px){
  .header{
    backdrop-filter:none; -webkit-backdrop-filter:none;
    background:#fff;
  }
  body.nav-open::before{
    content:""; position:fixed; inset:0; z-index:98;
    background:rgba(22,22,30,.45);
  }

  .nav{
    position:fixed; inset:0 0 0 auto; width:min(340px,86vw);
    flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0;
    padding:104px 30px 40px; background:#fff; box-shadow:-24px 0 60px -30px rgba(0,0,0,.35);
    transform:translateX(100%); transition:transform .38s var(--ease); z-index:99;
  }
  .nav.is-open{ transform:none; }
  .nav__list{ flex-direction:column; align-items:stretch; gap:0; }
  .nav__list li + li{ border-top:1px solid var(--line); }
  .nav__list a{ display:block; padding:16px 0; font-size:1rem; }
  .nav__list a::after{ display:none; }
  .nav__cta{ margin-top:26px; }
  .burger{ display:flex; z-index:101; }
  body.nav-open{ overflow:hidden; }
}

@media (max-width:900px){

  /* Ein Element mit backdrop-filter wird zum Bezugsrahmen fuer alle
     Nachfahren mit position:fixed. Das Menue waere dadurch nur so hoch
     wie der Header, die Eintraege liefen darunter ins Leere. Auf dem
     Handy deshalb ohne Weichzeichner und mit deckendem Hintergrund. */

  /* Abdunklung hinter dem offenen Menue */

  .grid--3{ grid-template-columns:1fr; }
  .stats__list{ grid-template-columns:repeat(2,1fr); gap:30px; }
  .stats__list li:nth-child(odd){ border-left:0; }
  .stats__list li:nth-child(3){ border-left:0; }
  .footer__top{ grid-template-columns:1fr; }

  .results__grid{ grid-template-columns:1fr; }
  .safety__bottom{ grid-template-columns:1fr; }
  .ratings{ grid-template-columns:1fr; gap:24px; }
}

@media (max-width:620px){
  body{ font-size:16px; }
  .container{ padding-inline:20px; }
  .topbar__meta{ display:none; }
  .topbar__claim{ font-size:.74rem; }
  .grid--4{ grid-template-columns:1fr; }
  .steps__list{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  .hero__actions .btn{ width:100%; }
  .hero__trust{ gap:16px 26px; }
  .floater{ display:none; }
  .emblem{ padding:26px 22px 22px; }
  .hero-video{ padding:8px; border-radius:24px; }
  .hero-video__frame{ border-radius:17px; }
  .hero-video__meta{ flex-direction:column; align-items:stretch; }
  .hero-video__meta .floater{ display:flex; padding:8px 6px; }
  .hero-video__meta .floater + .floater{ border-left:0; border-top:1px solid var(--line); }
  .footer__nav{ grid-template-columns:1fr; gap:26px; }
  /* Mit dem Finger getroffen werden Links erst ab rund 44 px Hoehe
     zuverlaessig. Im Fussbereich stehen sie eng untereinander. */
  .footer__nav ul{ gap:4px; }
  .footer__nav a{ display:inline-block; padding-block:9px; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
  .footer__legal{ gap:4px 22px; }
  .footer__legal a{ display:inline-block; padding-block:9px; }
  .tabs{ width:100%; }
  .tab{ flex:1; padding:14px 12px; min-height:46px; }
  /* Kasten der Einwilligung groesser: 17 px sind auf dem Handy zu klein. */
  .check input{ width:22px; height:22px; margin-top:1px; }
  .check{ font-size:.82rem; gap:13px; }

  .phase, .risk, .safety__box, .loc, .durations{ padding:26px 22px; }
  .results__facts{ grid-template-columns:1fr; gap:22px; }
  .ratings__bars li{ grid-template-columns:56px 1fr 36px; gap:10px; }

  /* Kopf der Rechtsseiten: Wortmarke und Schaltflaeche stehen nebeneinander.
     Der Zusatz unter dem Namen ist breiter als der Name selbst und faellt
     deshalb zuerst weg, bevor etwas ueber den Rand laeuft. */
  .header--legal .header__inner{ gap:14px; flex-wrap:wrap; }
  .header--legal .brand__claim{ display:none; }
}

/* ============================================================
   STUDIO-ÜBERSICHT (Startseite) – zwei Standorte nebeneinander
   ============================================================ */
.studios{ display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:stretch; }
.studio{
  display:flex; flex-direction:column; overflow:hidden;
  border-radius:var(--r-lg); background:#fff; border:1px solid var(--line);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.studio:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover); border-color:rgba(229,0,110,.28); }
/* ============================================================
   DATENSCHUTZ-EINSTELLUNGEN
   Mittiger Dialog mit Abdunklung, keine Leiste am unteren Rand.
   "Alle akzeptieren" und "Nur notwendige" sind gleich gross und gleich
   gut lesbar - eine versteckte Ablehnung waere keine wirksame Einwilligung.
   ============================================================ */
.cookie-overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(22,22,30,.55);
}
.cookie{
  position:fixed; z-index:201;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(520px,calc(100vw - 32px));
  max-height:calc(100svh - 32px); overflow-y:auto;
  padding:clamp(24px,3.5vw,34px);
  background:#fff; border-radius:var(--r-lg); border:1px solid var(--line);
  box-shadow:var(--shadow-lg);
}
.cookie[hidden], .cookie-overlay[hidden]{ display:none; }

.cookie__title{
  font-family:var(--serif); font-size:1.32rem; font-weight:600;
  color:var(--ink); margin-bottom:.6em;
}
.cookie__text{
  font-size:.87rem; font-weight:300; color:var(--ink-soft);
  line-height:1.65; margin-bottom:1.4em; text-wrap:pretty;
}
.cookie__link{ color:var(--pink); text-decoration:underline; text-underline-offset:2px; }
.cookie__link:hover{ text-decoration-thickness:2px; }

.cookie__options{ display:grid; gap:12px; margin-bottom:22px; }
.cookie__opt{
  display:grid; grid-template-columns:auto 1fr; gap:13px; align-items:start;
  padding:15px 16px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--bg-soft); cursor:pointer;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.cookie__opt:hover{ border-color:rgba(229,0,110,.28); background:#fff; }
.cookie__opt--fixed{ cursor:default; }
.cookie__opt--fixed:hover{ border-color:var(--line); background:var(--bg-soft); }

/* Das echte Kaestchen bleibt bedienbar und fokussierbar, wird aber vom
   gezeichneten Feld verdeckt - so ist die Tastaturbedienung unveraendert. */
.cookie__opt input{ position:absolute; opacity:0; width:22px; height:22px; margin:0; }
.cookie__box{
  width:22px; height:22px; flex:none; margin-top:1px;
  border:2px solid var(--muted); border-radius:6px; background:#fff;
  display:grid; place-items:center;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.cookie__box::after{
  content:""; width:11px; height:6px; margin-top:-3px;
  border-left:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(-45deg) scale(.4); opacity:0;
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.cookie__opt input:checked ~ .cookie__box{ background:var(--pink); border-color:var(--pink); }
.cookie__opt input:checked ~ .cookie__box::after{ opacity:1; transform:rotate(-45deg) scale(1); }
.cookie__opt input:disabled ~ .cookie__box{ background:var(--muted); border-color:var(--muted); }
.cookie__opt input:focus-visible ~ .cookie__box{ outline:2px solid var(--pink); outline-offset:3px; }

.cookie__label{ font-size:.87rem; color:var(--ink); line-height:1.5; }
.cookie__note{ font-weight:300; color:var(--muted-strong); }
.cookie__desc{
  display:block; margin-top:5px;
  font-size:.79rem; font-weight:300; color:var(--muted-strong); line-height:1.55;
}

.cookie__actions{ display:grid; gap:10px; }
.cookie__btn{
  width:100%; padding:14px 18px; border-radius:999px; border:1px solid transparent;
  font-family:var(--sans); font-size:.76rem; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; cursor:pointer;
  transition:transform .3s var(--ease), background .3s var(--ease),
             border-color .3s var(--ease), color .3s var(--ease);
}
.cookie__btn:focus-visible{ outline:2px solid var(--pink); outline-offset:3px; }
.cookie__btn--primary{
  background:var(--grad); background-size:170% 100%; color:#fff;
  box-shadow:0 12px 30px -14px rgba(196,20,132,.85);
}
.cookie__btn--primary:hover{ background-position:100% 0; transform:translateY(-2px); }
.cookie__btn--save{ background:#fff; border-color:var(--line); color:var(--ink); }
.cookie__btn--save:hover{ border-color:var(--pink); color:var(--pink); transform:translateY(-2px); }
.cookie__btn--reject{ background:#fff; border-color:var(--line); color:var(--ink); }
.cookie__btn--reject:hover{ border-color:var(--pink); color:var(--pink); transform:translateY(-2px); }

/* Widerruf im Fussbereich: sieht aus wie die Nachbarlinks, ist aber ein
   Button - er oeffnet einen Dialog, er fuehrt nicht auf eine Seite. */
.footer__legal-btn{
  padding:0; border:0; background:none; cursor:pointer;
  font:inherit; color:inherit; text-decoration:none;
  transition:color .25s var(--ease);
}
.footer__legal-btn:hover{ color:#fff; text-decoration:underline; }
.footer__legal-btn:focus-visible{ outline:2px solid var(--pink); outline-offset:3px; border-radius:4px; }

body.cookie-open{ overflow:hidden; }

/* Seit drei Auswahlpunkten (Notwendig, Karten, Marketing): kompakter, damit
   alle drei Knoepfe ohne Scrollen sichtbar sind - "Nur notwendige" muss so
   leicht erreichbar sein wie "Alle akzeptieren". */
.cookie__text{ margin-bottom:1.1em; line-height:1.55; }
.cookie__options{ gap:8px; margin-bottom:18px; }
.cookie__opt{ padding:11px 14px; gap:12px; }
.cookie__desc{ margin-top:3px; font-size:.76rem; line-height:1.45; }
@media (min-width:621px){
  .cookie{ width:min(620px,calc(100vw - 32px)); }
  .cookie__actions{ grid-template-columns:repeat(3,1fr); }
  .cookie__btn{ padding:14px 8px; letter-spacing:.04em; white-space:nowrap; }
}

@media (max-width:620px){
  .cookie{ width:calc(100vw - 24px); padding:20px 18px; border-radius:var(--r); max-height:calc(100svh - 24px); }
  .cookie__title{ font-size:1.2rem; }
  .cookie__text{ font-size:.82rem; }
  .cookie__btn{ padding:12px 16px; }
  /* Kleine Handys: Muss der Dialog scrollen, bleiben die Knoepfe unten stehen */
  .cookie__actions{
    gap:8px; position:sticky; bottom:-20px; z-index:1;
    margin:0 -18px -20px; padding:10px 18px 20px; background:#fff;
  }
}

/* ============================================================
   KARTEN-EINWILLIGUNG (Zwei-Klick-Loesung)
   Die OpenStreetMap-Kachelserver sehen beim Laden die IP-Adresse der
   Besucherin. Das ist eine Uebermittlung an einen Dritten, deshalb laedt
   die Karte erst nach einem bewussten Klick. Der Platzhalter liegt ueber
   dem iframe und verschwindet, sobald die Karte geladen ist.
   ============================================================ */
.mapconsent{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:24px 22px; text-align:center;
  background:var(--grad-soft); border:0;
}
.mapconsent__text{ max-width:42ch; font-size:.84rem; font-weight:300; color:var(--ink-soft); }
.mapconsent__btn{ padding:12px 22px; font-size:.72rem; }
.mapconsent__link{ font-size:.76rem; color:var(--muted-strong); text-decoration:underline; text-underline-offset:2px; }
.mapconsent__link:hover{ color:var(--pink); }
/* Der Platzhalter wird versteckt statt entfernt - so kann er beim
   Widerruf der Einwilligung wieder auftauchen. display:flex oben
   wuerde hidden sonst uebersteuern. */
.mapconsent[hidden]{ display:none; }
/* Solange die Einwilligung fehlt, bleibt der Rahmen leer statt weiss zu blitzen. */
.studio__map, .location__map{ position:relative; }

.studio__map{ position:relative; background:var(--bg-soft); border-bottom:1px solid var(--line); }
.studio__map iframe{ display:block; width:100%; height:240px; border:0; }
.studio__body{ display:flex; flex-direction:column; flex:1; padding:30px 28px 30px; }
.studio__city{
  font-size:.72rem; font-weight:600; letter-spacing:.19em; text-transform:uppercase;
  margin:0 0 .8em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.studio h3{ font-size:1.22rem; margin-bottom:.6em; }
.studio address{ font-style:normal; font-size:.92rem; font-weight:300; color:var(--muted); }
.studio__facts{ display:grid; gap:11px; margin:22px 0 0; padding-top:20px; border-top:1px solid var(--line); }
.studio__facts li{ display:flex; gap:12px; font-size:.87rem; font-weight:300; color:var(--muted); }
.studio__facts strong{ flex:none; width:96px; font-size:.7rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ink); padding-top:3px; }
/* Kennzeichnung hinter einer Rufnummer, z. B. "Mobil & WhatsApp".
   Klein und zurueckhaltend - die Nummer soll die Hauptsache bleiben. */
.contact-tag{
  display:inline-block; margin-left:6px;
  font-size:.66rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted-strong); white-space:nowrap;
}

.studio__contact{ margin-top:20px; font-size:.92rem; font-weight:500; }
.studio__contact a{ color:var(--pink); }
.studio__contact a:hover{ text-decoration:underline; }
/* Drei Schaltflaechen in einer Reihe: dafuer etwas kompakter als sonst,
   sonst bricht "Termin anfragen" in die naechste Zeile um. */
.studio__actions{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:9px; margin-top:auto; padding-top:26px;
}
.studio__actions .btn{ padding:12px 15px; font-size:.71rem; letter-spacing:.04em; gap:.42em; }

/* WhatsApp bewusst im Originalgruen statt in den Markenfarben:
   der Dienst wird ueber diese Farbe erkannt, nicht ueber den Schriftzug. */
.btn--whatsapp{
  background:#25D366; color:#fff;
  box-shadow:0 12px 30px -14px rgba(37,211,102,.85);
}
.btn--whatsapp:hover{ background:#1DAE52; color:#fff; transform:translateY(-2px); }
.btn--whatsapp svg{ width:17px; height:17px; flex:none; }
.btn--lg.btn--whatsapp svg{ width:19px; height:19px; }

/* ============================================================
   STUDIO-AUFNAHMEN (Standortseiten)
   Aufmacher im Querformat, darunter eine Galerie der Raeume.
   ============================================================ */
.studioshot{ padding:clamp(34px,4vw,56px) 0 0; }
.studioshot__figure{ margin:0; }
.studioshot__figure img{
  display:block; width:100%; height:auto;
  border-radius:var(--r-lg); border:1px solid var(--line); box-shadow:var(--shadow-lg);
}
.studioshot__figure figcaption{
  margin-top:14px; text-align:center;
  font-size:.83rem; font-weight:300; color:var(--muted);
}

.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.gallery__item{
  margin:0; overflow:hidden; background:#fff;
  border-radius:var(--r-lg); border:1px solid var(--line);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
/* Gleicher Hover wie bei allen anderen Karten der Seite. */
.gallery__item:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover); border-color:rgba(229,0,110,.28); }
/* Die Motive haben zwei Seitenverhaeltnisse (4:3 und 4:5). Ein festes
   Format fuer alle Kacheln haelt die Reihen gerade. */
.gallery__item img{ display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; }
.gallery__item figcaption{
  padding:15px 18px; font-size:.82rem; font-weight:500; color:var(--ink);
}

@media (max-width:900px){ .gallery{ grid-template-columns:repeat(2,1fr); gap:18px; } }
@media (max-width:620px){ .gallery{ grid-template-columns:1fr; } }

/* ============================================================
   STANDORTSEITEN – Kopfbereich, Brotkrume, Querverweis
   ============================================================ */
.crumb{ font-size:.79rem; font-weight:400; color:var(--muted); margin:0 0 1.4em; }
.crumb a{ color:var(--muted-strong); text-decoration:underline; text-underline-offset:2px; }
.crumb a:hover{ color:var(--pink); }
.crumb span[aria-current]{ color:var(--ink); }

.shero{ padding:clamp(38px,4.5vw,62px) 0 clamp(56px,7vw,96px); background:var(--grad-soft); overflow:hidden; }
.shero__inner{ display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(30px,5vw,66px); align-items:center; }
.shero h1{ font-size:clamp(1.95rem,4vw,3.1rem); margin-bottom:.32em; }
/* Ortsname bekommt eine eigene Zeile, damit die Ueberschrift auf jeder
   Breite gleich umbricht und der Farbverlauf als Block wirkt. */
.shero h1 .grad{ display:block; }
.shero__addr{
  font-style:normal; font-size:1.02rem; font-weight:300; color:var(--ink-soft);
  padding-left:18px; border-left:3px solid transparent;
  border-image:var(--grad) 1; margin-bottom:1.2em;
}
.shero__addr strong{ display:block; font-weight:600; color:var(--ink); }
.shero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.shero .hero__trust{ margin-top:38px; }
.loc__hint a{ color:var(--pink); text-decoration:underline; text-underline-offset:2px; }
.shero__card{
  background:#fff; border-radius:var(--r-lg); border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--shadow-lg); padding:clamp(26px,3vw,36px);
}
.shero__card h2{ font-family:var(--serif); font-size:1.18rem; font-weight:600; margin-bottom:.9em; }
.shero__card .hours{ margin-bottom:22px; }
.shero__note{
  margin-top:20px; padding-top:18px; border-top:1px solid var(--line);
  font-size:.82rem; font-weight:300; color:var(--muted);
}

/* Querverweis auf den jeweils anderen Standort */
.otherloc{ background:var(--bg-soft); }
.otherloc__box{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:clamp(22px,3vw,44px);
  padding:clamp(30px,3.4vw,44px) clamp(26px,3vw,44px);
  border-radius:var(--r-lg); background:#fff; border:1px solid var(--line);
}
.otherloc__box h2{ font-size:clamp(1.4rem,2.4vw,1.9rem); margin-bottom:.4em; }
.otherloc__box p{ font-size:.94rem; font-weight:300; color:var(--muted); max-width:56ch; }
.otherloc__box address{ font-style:normal; font-weight:500; color:var(--ink); font-size:.94rem; margin-top:14px; }

@media (max-width:1080px){
  .shero__inner{ grid-template-columns:1fr; }
  .studios{ grid-template-columns:1fr; }
}

/* Variante mit Bild: schmale Bildspalte, dann Text, dann die Schaltflaeche. */
.otherloc__box--photo{ grid-template-columns:minmax(0,clamp(220px,26vw,330px)) 1fr auto; }
.otherloc__media{ margin:0; }
.otherloc__media img{
  display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover;
  border-radius:var(--r); border:1px solid var(--line);
}

@media (max-width:900px){
  .otherloc__box{ grid-template-columns:1fr; }
  .otherloc__box--photo{ grid-template-columns:1fr; }
}

@media (max-width:620px){
  .studio__body{ padding:26px 22px; }
  .studio__facts strong{ width:82px; }
  .studio__actions{ flex-wrap:wrap; }
  .studio__actions .btn{ width:100%; }
  .shero__actions .btn{ width:100%; }
  .otherloc__box .btn{ width:100%; }
}

/* ============================================================
   SEHR SCHMALE GERAETE (iPhone SE, kleine Androiden)
   Unterhalb von 420 px reicht die Breite fuer lange Beschriftungen
   wie "Henstedt-Ulzburg anrufen" nicht mehr. Der Standardwert
   white-space:nowrap auf .btn haette sie ueber den Rand geschoben.
   ============================================================ */
@media (max-width:420px){
  .container{ padding-inline:18px; }

  /* Vier Kennzahlen nebeneinander lassen pro Spalte rund 95 px – zu wenig
     fuer Woerter wie "Behandlungen". Ab hier deshalb untereinander. */
  .stats__list{ grid-template-columns:1fr; gap:22px; padding:30px 24px; }
  .stats__list li + li{ border-left:0; border-top:1px solid rgba(255,255,255,.22); padding-top:22px; }

  .header--legal .btn{ padding:10px 14px; font-size:.7rem; }

  .btn{ white-space:normal; }
  .btn--lg{ padding:16px 22px; font-size:.82rem; }
  .sec-head__actions .btn{ flex:1 1 100%; }

  .locbar__item{ padding:12px 16px 12px 44px; }
  .locbar__item strong{ font-size:.96rem; }

  .studio__facts strong{ width:74px; }
  .studio__map iframe{ height:200px; }

  .ratings__score strong{ font-size:2.6rem; }
  .legal__list--num li{ padding-left:32px; }
  .durations__table{ font-size:.84rem; }
}

/* ============================================================
   SICHERE BEREICHE AUF GERAETEN MIT RUNDEN ECKEN
   ============================================================ */
.totop{
  right:calc(24px + env(safe-area-inset-right, 0px));
  bottom:calc(24px + env(safe-area-inset-bottom, 0px));
}
@media (max-width:1150px){
  .nav{
    padding-top:calc(104px + env(safe-area-inset-top, 0px));
    padding-bottom:calc(40px + env(safe-area-inset-bottom, 0px));
    padding-right:calc(30px + env(safe-area-inset-right, 0px));
  }
}
@media (max-width:620px){
  .totop{
    right:calc(16px + env(safe-area-inset-right, 0px));
    bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}