/* ============================================================
   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;
}
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; }
.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:34px; margin-left:auto; }
.nav__list{ display:flex; align-items:center; gap:30px; }
.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; }

@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; }

/* ============================================================
   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); }

/* ============================================================
   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);
}
.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; }
  .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; }
}

@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. */
  .header{
    backdrop-filter:none; -webkit-backdrop-filter:none;
    background:#fff;
  }

  /* Abdunklung hinter dem offenen Menue */
  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; }

  .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; }
  .footer__nav{ grid-template-columns:1fr; gap:26px; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
  .tabs{ width:100%; }
  .tab{ flex:1; padding:11px 12px; }

  .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; }
}

/* ============================================================
   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); }
.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; }
.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:nowrap; 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; }

/* ============================================================
   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; }
}

@media (max-width:900px){
  .otherloc__box{ 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%; }
}

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