/* ═══ Pearlux — Aever-Style Design System ═══ */
:root{
  --brand:#825546;
  --brand-dark:#3c2819;
  --brand-deep:#92654d;
  --cream:#fdfdfb;
  --cream-2:#f5f0e6;
  --cream-3:#faf8f3;
  --cream-4:#fcfbf7;
  --cream-5:#f6f1e7;
  --stone:#beb4af;
  --stone-2:#a39690;
  --stone-3:#e7e3e1;
  --stone-4:#8b7e77;
  --olive:#96916e;
  --olive-2:#7a7656;
  --gold:#c8a582;
  --ink:#171717;
  --ink-2:#3c2819;
  --ink-3:#404040;
  --muted:#9ca3af;
  --green:#4ba43b;
  --red:#e85852;
  --border:#e7e3e1;
  --r-sm:4px;
  --r-md:6px;
  --r-lg:8px;
  --r-xl:8px;
  --ease:cubic-bezier(.16,1.2,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* scroll-behavior:smooth nur für Anker-Sprünge, nicht globales Scroll */
@media(prefers-reduced-motion:no-preference){html:focus-within{scroll-behavior:smooth}}
body{
  margin:0;font-family:'Montserrat','Helvetica Neue',Arial,sans-serif;
  color:var(--ink-2);background:var(--cream-3);
  line-height:1.55;font-size:16px;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}

/* Typography */
h1,h2,h3,h4{font-family:inherit;color:var(--brand-dark);font-weight:600;letter-spacing:-.02em;line-height:1.1;margin:0}
h1{font-size:clamp(40px,6vw,72px);font-weight:500;letter-spacing:-.03em}
h2{font-size:clamp(32px,4.5vw,52px);font-weight:500;letter-spacing:-.025em;line-height:1.12}
h3{font-size:clamp(22px,2.5vw,28px);font-weight:600}
h4{font-size:18px;font-weight:600}
p{margin:0 0 12px;color:var(--ink-3);line-height:1.65}
.lead{font-size:clamp(16px,1.5vw,19px);color:var(--ink-3);max-width:640px;line-height:1.6}
.eyebrow{display:inline-block;font-size:12px;font-weight:600;color:var(--brand);letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px}

/* Layout */
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.container-wide{max-width:1200px;margin:0 auto;padding:0 24px}
.container-narrow{max-width:860px;margin:0 auto;padding:0 24px}
section{padding:80px 0}
@media(min-width:768px){section{padding:110px 0}}

/* ═══ Navigation — transparent im Ruhezustand, Liquid-Glass ab Scroll ═══
   Damit der Hero-Background komplett durch die Nav hochläuft. Beim
   Scrollen kippt die Nav in einen sanften Glas-Look (Blur + leichte
   Cream-Tönung + filigrane Unterlinie). */
.nav{
  position:sticky; top:0; z-index:100;
  background:transparent;
  border-bottom:1px solid transparent;
  transition: background .35s ease, backdrop-filter .35s ease, border-color .35s ease, box-shadow .35s ease;
  /* paint-containment entfernt — würde das Standorte-Dropdown clippen,
     weil das Menü unter der Nav absolute-positioniert nach unten ragt. */
  transform:translateZ(0);
}
.nav.nav-scrolled{
  background: rgba(253,253,251,0.58);
  -webkit-backdrop-filter: saturate(200%) blur(22px);
  backdrop-filter: saturate(200%) blur(22px);
  border-bottom-color: rgba(130,85,70,0.10);
  box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 8px 24px -16px rgba(60,40,25,0.18);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:80px;gap:32px}
.nav-logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav-logo img{height:32px;width:auto;display:block}
.nav-logo-text{font-weight:600;color:var(--brand-dark);font-size:18px;letter-spacing:-.01em}
.nav-links{display:none;align-items:center;gap:34px;list-style:none;margin:0;padding:0}
@media(min-width:1024px){.nav-links{display:flex}}
.nav-links a{font-size:14px;font-weight:500;color:var(--ink-2);transition:color .2s ease;position:relative}
.nav-links a:hover{color:var(--brand)}
/* Dropdown */
.nav-dropdown{position:relative}
.nav-dropdown > a,.nav-dropdown > button{display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:500;color:var(--ink-2);background:none;border:none;font-family:inherit;cursor:pointer;padding:0}
.nav-dropdown > a svg,.nav-dropdown > button svg{width:12px;height:12px;transition:transform .2s ease}
.nav-dropdown:hover > a,.nav-dropdown:hover > button,.nav-dropdown.open > a,.nav-dropdown.open > button{color:var(--brand)}
.nav-dropdown:hover > a svg,.nav-dropdown:hover > button svg,.nav-dropdown.open > a svg,.nav-dropdown.open > button svg{transform:rotate(180deg)}
.nav-dropdown-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);min-width:260px;background:#fff;border:1px solid var(--border);border-radius:6px;box-shadow:0 20px 48px -16px rgba(60,40,25,.2);padding:10px;opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease,visibility .2s;list-style:none;margin:0;z-index:120}
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown.open .nav-dropdown-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(4px)}
.nav-dropdown-menu a{display:flex;gap:12px;padding:12px 14px;border-radius:4px;transition:background .15s ease}
.nav-dropdown-menu a:hover{background:var(--cream-2);color:var(--brand-dark)}
.nav-dropdown-menu .ndm-icon{flex-shrink:0;width:36px;height:36px;border-radius:6px;background:rgba(130,85,70,.08);color:var(--brand);display:flex;align-items:center;justify-content:center}
.nav-dropdown-menu .ndm-icon svg{width:18px;height:18px}
.nav-dropdown-menu .ndm-title{display:block;font-size:14px;font-weight:600;color:var(--brand-dark);letter-spacing:-.005em;line-height:1.3}
.nav-dropdown-menu .ndm-sub{display:block;font-size:12px;color:var(--ink-3);margin-top:3px;line-height:1.45}
.nav-cta{display:none;align-items:center;gap:8px;padding:12px 22px;border-radius:6px;background:var(--brand);color:#fff;font-size:14px;font-weight:600;transition:background .2s,transform .2s;white-space:nowrap}
@media(min-width:1024px){.nav-cta{display:inline-flex}}
.nav-cta:hover{background:var(--brand-deep);transform:translateY(-1px)}
.nav-cta svg{width:14px;height:14px}
.nav-mobile-toggle{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;width:40px;height:40px;color:var(--brand-dark);position:relative;z-index:101;cursor:pointer;flex-shrink:0}
@media(min-width:1024px){.nav-mobile-toggle{display:none}}
.nav-mobile-toggle svg{position:absolute;top:50%;left:50%;width:22px;height:22px;transform:translate(-50%,-50%);transition:opacity .2s ease,transform .35s var(--ease)}
.nav-mobile-toggle .ico-close{opacity:0;transform:translate(-50%,-50%) rotate(-45deg)}
body.nav-open .nav-mobile-toggle .ico-open{opacity:0;transform:translate(-50%,-50%) rotate(45deg)}
body.nav-open .nav-mobile-toggle .ico-close{opacity:1;transform:translate(-50%,-50%) rotate(0)}

.nav-mobile{
  position:fixed;top:80px;left:0;right:0;bottom:0;z-index:99;
  background:linear-gradient(180deg,var(--cream-3) 0%,var(--cream-2) 100%);
  padding:24px 28px 48px;
  display:flex;flex-direction:column;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  opacity:0;transform:translateY(-14px);visibility:hidden;
  transition:opacity .32s ease,transform .48s cubic-bezier(.16,1.2,.3,1),visibility 0s .48s;
}
.nav-mobile.open{
  opacity:1;transform:translateY(0);visibility:visible;
  transition:opacity .3s ease,transform .48s cubic-bezier(.16,1.2,.3,1),visibility 0s 0s;
}
.nav-mobile a,.nav-mobile .nm-group-title{
  opacity:0;transform:translateY(10px);
  transition:opacity .4s ease,transform .45s var(--ease);
}
.nav-mobile.open a,.nav-mobile.open .nm-group-title{opacity:1;transform:translateY(0)}
.nav-mobile.open > *:nth-child(1){transition-delay:.06s}
.nav-mobile.open > *:nth-child(2){transition-delay:.09s}
.nav-mobile.open > *:nth-child(3){transition-delay:.12s}
.nav-mobile.open > *:nth-child(4){transition-delay:.15s}
.nav-mobile.open > *:nth-child(5){transition-delay:.18s}
.nav-mobile.open > *:nth-child(6){transition-delay:.21s}
.nav-mobile.open > *:nth-child(7){transition-delay:.24s}
.nav-mobile.open > *:nth-child(8){transition-delay:.27s}
.nav-mobile.open > *:nth-child(9){transition-delay:.3s}
.nav-mobile.open > *:nth-child(10){transition-delay:.33s}
.nav-mobile.open > *:nth-child(n+11){transition-delay:.36s}
/* Bulletproof SVG sizing inside mobile nav — forces all icons to fixed compact size */
.nav-mobile svg{width:16px;height:16px;flex-shrink:0}
.nav-mobile a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:17px;font-weight:500;color:var(--brand-dark);
  padding:13px 0;border-bottom:1px solid rgba(130,85,70,.08);
  letter-spacing:-.005em;text-decoration:none;
}
.nav-mobile a:hover{color:var(--brand)}
.nav-mobile a svg.nm-arrow{width:12px;height:12px;color:var(--stone-2);opacity:.55;transition:transform .25s ease,opacity .2s ease;flex-shrink:0}
.nav-mobile a:hover svg.nm-arrow{transform:translateX(4px);color:var(--brand);opacity:1}
.nav-mobile .nm-group-title{
  font-size:11px;font-weight:600;color:var(--stone-2);letter-spacing:.14em;text-transform:uppercase;
  margin:22px 0 6px;padding:0;border:none;display:block;
}
.nav-mobile .nm-sub{
  padding-left:14px;font-size:16px;font-weight:400;color:var(--ink-3);
}
.nav-mobile .nm-sub .nm-sub-sub{font-size:12px;color:var(--stone-2);letter-spacing:.01em;font-weight:400;display:block;margin-top:2px}
.nav-mobile .nm-cta{
  margin-top:24px;padding:14px 26px;font-size:15px;width:100%;justify-content:center;
  border-radius:6px;background:var(--brand);color:#fff;font-weight:600;
  display:flex;align-items:center;gap:10px;border-bottom:none;
}
.nav-mobile .nm-cta svg{width:14px;height:14px}
.nav-mobile .nm-cta:hover{background:var(--brand-deep);color:#fff}
.nav-mobile .nm-social{display:flex;gap:10px;justify-content:center;margin-top:24px;padding:0;border:none}
.nav-mobile .nm-social a{
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(130,85,70,.15);
  background:#fff;color:var(--brand);
  display:flex;align-items:center;justify-content:center;padding:0;
  flex-shrink:0;
}
.nav-mobile .nm-social a:hover{background:var(--brand);color:#fff}
.nav-mobile .nm-social svg{width:15px;height:15px;flex-shrink:0}
.nav-mobile .nm-legal{
  display:flex;gap:18px;justify-content:center;flex-wrap:wrap;
  font-size:12px;color:var(--stone-2);margin-top:22px;padding:0;border:none;
}
.nav-mobile .nm-legal a{
  font-size:12px;color:var(--stone-2);font-weight:500;padding:0;border:none;display:inline;
}
.nav-mobile .nm-legal a:hover{color:var(--brand)}
body.nav-open{overflow:hidden}

/* Announcement bar */
/* Announcement bar — zurückhaltend, editorial.
   Heller Beige-BG (nicht knallig), dunkles Braun für Text, zart gesäumt
   von Hairlines oben/unten. Wirkt wie ein feiner Pre-Header-Streifen. */
.announcement{
  position:relative;
  color:var(--brand-dark);
  background:var(--cream-5, #f6f1e7);
  border-top:1px solid rgba(130,85,70,.06);
  border-bottom:1px solid rgba(130,85,70,.08);
  font-size:12px;
  text-align:center;
  padding:9px 16px;
  font-weight:400;
  letter-spacing:.04em;
}
.announcement strong{ font-weight:600; color:var(--brand-dark); }
.announcement:hover{ background:var(--cream-2, #f5f0e6); }
@media(max-width:520px){
  .announcement{ font-size:11px; padding:8px 12px; letter-spacing:.03em; }
}

/* ═══ Buttons ═══ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;border-radius:6px;font-size:15px;font-weight:600;transition:all .25s var(--ease);border:none;cursor:pointer;text-align:center}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 8px 24px rgba(130,85,70,.22)}
.btn-primary:hover{background:var(--brand-deep);transform:translateY(-2px);box-shadow:0 12px 32px rgba(130,85,70,.3)}
.btn-outline{background:transparent;color:var(--brand-dark);border:1.5px solid var(--brand-dark)}
.btn-outline:hover{background:var(--brand-dark);color:#fff}
.btn-ghost{background:transparent;color:var(--brand);padding:10px 16px}
.btn-ghost:hover{color:var(--brand-deep)}
.btn-lg{padding:17px 34px;font-size:16px}
.btn-sm{padding:10px 18px;font-size:13px}
.btn svg{width:14px;height:14px;flex-shrink:0}

/* ═══ Hero ═══ */
/* Hero zieht sich UNTER die transparente Nav hoch, damit sein BG durch
   das Top-Menu durchscheint. Inneres Padding kompensiert die Nav-Höhe
   damit der Content nicht unter der Nav verschwindet. */
.hero{position:relative;margin-top:-80px;padding:140px 0 80px;overflow:hidden;background:linear-gradient(180deg,var(--cream-3) 0%,var(--cream-2) 100%)}
/* Home: fully seamless beige BG from hero to footer — gradient lives on body, every section transparent */
body.home-beige{
  background:
    radial-gradient(ellipse 80% 45% at 90% 8%,rgba(200,165,130,.22) 0%,transparent 55%),
    radial-gradient(ellipse 70% 50% at 10% 30%,rgba(130,85,70,.08) 0%,transparent 60%),
    radial-gradient(ellipse 70% 40% at 85% 60%,rgba(150,145,110,.10) 0%,transparent 55%),
    radial-gradient(ellipse 60% 40% at 15% 85%,rgba(200,165,130,.14) 0%,transparent 60%),
    linear-gradient(180deg,var(--cream-3) 0%,var(--cream-4) 35%,var(--cream-2) 70%,var(--cream-5) 100%);
  background-attachment:fixed;
}
body.home-beige .hero{background:transparent}
body.home-beige .hero-bg{background:none}
body.home-beige .sensation-section{background:transparent}
body.home-beige section{background:transparent!important}
.hero-bg{position:absolute;inset:0;background:
  radial-gradient(ellipse 60% 40% at 85% 15%,rgba(200,165,130,.18) 0%,transparent 55%),
  radial-gradient(ellipse 60% 50% at 15% 85%,rgba(130,85,70,.1) 0%,transparent 60%);z-index:0;pointer-events:none}
.hero > .container{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
@media(min-width:960px){.hero-grid{grid-template-columns:1.1fr 1fr;gap:72px}}
.hero-title{margin-bottom:22px}
.hero-title em{font-style:italic;color:var(--brand);font-weight:400}
.hero-sub{font-size:clamp(16px,1.4vw,19px);color:var(--ink-3);margin-bottom:32px;max-width:540px;line-height:1.6}
.hero-meta{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:28px;padding-top:24px;border-top:1px solid var(--border)}
.hero-meta-item{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3);font-weight:500}
.hero-meta-item svg{width:16px;height:16px;color:var(--brand);flex-shrink:0}
.hero-cta-row{display:flex;flex-wrap:wrap;gap:12px}
.hero-image{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/5;background:var(--cream-2);box-shadow:0 40px 80px -30px rgba(60,40,25,.3)}
.hero-image img{width:100%;height:100%;object-fit:cover}
.hero-image-badge{position:absolute;bottom:24px;left:24px;right:24px;padding:18px 22px;background:rgba(253,253,251,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:var(--r-md);display:flex;align-items:center;gap:14px;box-shadow:0 8px 28px rgba(60,40,25,.15)}
.hero-image-badge-icon{width:42px;height:42px;border-radius:8px;background:var(--brand);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.hero-image-badge-title{font-weight:600;color:var(--brand-dark);font-size:14px;letter-spacing:-.005em}
.hero-image-badge-sub{font-size:12px;color:var(--ink-3);margin-top:2px}

/* ═══ Section header ═══ */
.section-header{text-align:center;max-width:720px;margin:0 auto 56px}
.section-header.left{text-align:left;margin-left:0}
.section-header p{font-size:17px;color:var(--ink-3);margin-top:18px}

/* ═══ Treatment cards ═══ */
.tr-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:680px){.tr-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.tr-grid{grid-template-columns:repeat(3,1fr)}}
.tr-card{position:relative;display:flex;flex-direction:column;background:var(--cream-3);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s ease}
.tr-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -25px rgba(60,40,25,.25)}
.tr-card-img{aspect-ratio:4/3;overflow:hidden;background:var(--cream-2)}
.tr-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.tr-card:hover .tr-card-img img{transform:scale(1.05)}
.tr-card-body{padding:28px 26px 30px;display:flex;flex-direction:column;flex:1}
.tr-card-title{font-size:22px;font-weight:600;color:var(--brand-dark);margin-bottom:10px;letter-spacing:-.015em}
.tr-card-desc{font-size:14.5px;color:var(--ink-3);line-height:1.6;margin-bottom:20px;flex:1}
.tr-card-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.tr-card-tag{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:6px;background:rgba(130,85,70,.08);font-size:12px;font-weight:500;color:var(--brand)}
.tr-card-price{display:flex;align-items:baseline;gap:10px;margin-bottom:18px}
.tr-card-price-now{font-size:28px;font-weight:600;color:var(--brand-dark);letter-spacing:-.02em}
.tr-card-price-was{font-size:15px;color:var(--stone-2);text-decoration:line-through}
.tr-card-price-from{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-right:2px}
.tr-card-cta{display:inline-flex;align-items:center;gap:8px;color:var(--brand);font-size:14px;font-weight:600;margin-top:auto}
.tr-card-cta:hover{color:var(--brand-deep)}
.tr-card-cta svg{transition:transform .3s ease;width:14px;height:14px}
.tr-card-cta:hover svg{transform:translateX(4px)}

/* ═══ Features (checklist) ═══ */
.feat-grid{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:720px){.feat-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.feat-grid{grid-template-columns:repeat(3,1fr)}}
.feat-item{display:flex;gap:16px;align-items:flex-start}
.feat-item-icon{width:44px;height:44px;border-radius:8px;background:rgba(130,85,70,.08);color:var(--brand);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.feat-item-icon svg{width:22px;height:22px}
.feat-item-title{font-size:17px;font-weight:600;color:var(--brand-dark);margin-bottom:6px;letter-spacing:-.01em}
.feat-item-desc{font-size:14.5px;color:var(--ink-3);line-height:1.6}

/* ═══ Process steps ═══ */
.steps{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:720px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{padding:28px 24px;background:var(--cream-3);border:1px solid var(--border);border-radius:var(--r-md);position:relative}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;font-size:14px;font-weight:600;margin-bottom:16px}
.step h4{font-size:17px;font-weight:600;margin-bottom:8px;color:var(--brand-dark)}
.step p{font-size:14px;color:var(--ink-3);margin:0;line-height:1.55}

/* ═══ Split section (image + text) ═══ */
.split{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;gap:72px}}
.split.reverse .split-text{order:2}
@media(max-width:899px){.split.reverse .split-text{order:0}}
.split-image{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;background:var(--cream-2)}
.split-image img{width:100%;height:100%;object-fit:cover}
.split h2{margin-bottom:20px}
.split p{font-size:16.5px;color:var(--ink-3);line-height:1.7;margin-bottom:14px}

/* ═══ Pricing table ═══ */
.price-table-wrap{overflow-x:auto;border-radius:var(--r-md);border:1px solid var(--border);background:#fff}
.price-table{width:100%;border-collapse:collapse;min-width:560px}
.price-table th{text-align:left;padding:18px 22px;font-size:12px;font-weight:600;color:var(--stone-2);text-transform:uppercase;letter-spacing:.08em;background:var(--cream-4);border-bottom:1px solid var(--border)}
.price-table td{padding:20px 22px;font-size:15px;color:var(--ink-2);border-bottom:1px solid var(--border)}
.price-table tr:last-child td{border-bottom:none}
.price-table .price-was{color:var(--stone-2);text-decoration:line-through;margin-right:10px;font-size:13px}
.price-table .price-now{color:var(--brand-dark);font-weight:600;font-size:17px}

/* ═══ FAQ ═══ */
.faq-list{max-width:820px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;background:none;border:none;text-align:left;font-size:17px;font-weight:500;color:var(--brand-dark);letter-spacing:-.01em;line-height:1.4;font-family:inherit}
.faq-q svg{width:20px;height:20px;color:var(--brand);flex-shrink:0;transition:transform .3s ease}
.faq-item.open .faq-q svg{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease;color:var(--ink-3);font-size:15.5px;line-height:1.7}
.faq-a-inner{padding:0 0 22px;max-width:680px}
.faq-item.open .faq-a{max-height:600px}

/* ═══ CTA banner ═══ */
.cta-banner{position:relative;padding:72px 40px;border-radius:var(--r-lg);background:linear-gradient(135deg,var(--brand-dark) 0%,var(--brand) 55%,var(--brand-deep) 100%);color:#fff;text-align:center;overflow:hidden}
.cta-banner::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 30%,rgba(200,165,130,.2) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(150,145,110,.15) 0%,transparent 50%)}
.cta-banner > *{position:relative;z-index:1}
.cta-banner h2{color:#fff;margin-bottom:16px}
.cta-banner p{color:rgba(255,255,255,.8);font-size:17px;margin-bottom:32px}
.cta-banner .btn-primary{background:#fff;color:var(--brand-dark);box-shadow:0 12px 32px rgba(0,0,0,.2)}
.cta-banner .btn-primary:hover{background:var(--cream-2);color:var(--brand-dark)}

/* ═══ Trust row ═══ */
.trust-row{display:flex;flex-wrap:wrap;gap:14px 36px;justify-content:center;align-items:center;padding-top:28px;margin-top:28px;border-top:1px solid var(--border)}
.trust-item{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-3);font-weight:500}
.trust-item svg{width:18px;height:18px;color:var(--green)}

/* ═══ Locations ═══ */
.loc-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:720px){.loc-grid{grid-template-columns:repeat(2,1fr)}}
.loc-card{padding:32px 28px;background:var(--cream-3);border:1px solid var(--border);border-radius:var(--r-md)}
.loc-card h3{font-size:22px;margin-bottom:10px}
.loc-card-addr{font-size:15.5px;color:var(--ink-3);line-height:1.6;margin-bottom:20px}
.loc-card-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:6px;background:rgba(75,164,59,.12);color:var(--green);font-size:12px;font-weight:600;margin-bottom:14px}

/* Location page specific */
.loc-hours{list-style:none;margin:0;padding:0}
.loc-hours li{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);font-size:15px}
.loc-hours li:last-child{border-bottom:none}
.loc-hours .day{color:var(--ink-3);font-weight:500}
.loc-hours .hrs{color:var(--brand-dark);font-weight:600}
.loc-hours .closed{color:var(--red);font-weight:500}
.map-embed{border-radius:8px;overflow:hidden;border:1px solid var(--border);aspect-ratio:16/10;background:var(--cream-2)}
.map-embed iframe{width:100%;height:100%;border:0;display:block}
.info-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:720px){.info-grid{grid-template-columns:repeat(3,1fr)}}
.info-card{padding:26px 24px;background:#fff;border:1px solid var(--border);border-radius:8px}
.info-card-icon{width:40px;height:40px;border-radius:8px;background:rgba(130,85,70,.08);color:var(--brand);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.info-card-icon svg{width:20px;height:20px}
.info-card h4{font-size:16px;font-weight:600;color:var(--brand-dark);margin-bottom:6px}
.info-card p{font-size:14px;color:var(--ink-3);line-height:1.55;margin:0}

/* ═══ Team ═══ */
.team-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:720px){.team-grid{grid-template-columns:repeat(3,1fr)}}
.team-card{background:var(--cream-3);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.team-card-img{aspect-ratio:1/1;overflow:hidden;background:var(--cream-2)}
.team-card-img img{width:100%;height:100%;object-fit:cover}
.team-card-body{padding:22px 24px 26px}
.team-card-name{font-size:19px;font-weight:600;color:var(--brand-dark);margin-bottom:4px}
.team-card-role{font-size:13px;color:var(--brand);font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-bottom:10px}
.team-card-bio{font-size:14px;color:var(--ink-3);line-height:1.6}

/* ═══ Footer ═══ */
.footer{background:var(--brand-dark);color:rgba(255,255,255,.75);padding:72px 0 32px;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.1)}
@media(min-width:720px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr 1fr}}
.footer h4{color:#fff;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.footer-brand img{height:28px}
.footer-brand-name{font-weight:600;color:#fff;font-size:19px}
.footer-about{font-size:14px;line-height:1.6;margin-bottom:20px;max-width:300px;color:rgba(255,255,255,.7)}
.footer-links{list-style:none;padding:0;margin:0}
.footer-links li{margin-bottom:12px}
.footer-links a{font-size:14px;color:rgba(255,255,255,.65);transition:color .2s}
.footer-links a:hover{color:#fff}
.footer-bottom{display:flex;flex-direction:column;gap:12px;padding-top:32px;align-items:center;text-align:center;font-size:13px;color:rgba(255,255,255,.55)}
@media(min-width:720px){.footer-bottom{flex-direction:row;justify-content:space-between;text-align:left}}
.footer-socials{display:flex;gap:14px}
.footer-socials a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:background .2s}
.footer-socials a:hover{background:rgba(255,255,255,.15)}
.footer-socials svg{width:16px;height:16px;color:#fff}

/* ═══ Breadcrumb ═══ */
.breadcrumb{font-size:13px;color:var(--stone-2);padding-top:24px}
.breadcrumb a{color:var(--stone-2);transition:color .2s}
.breadcrumb a:hover{color:var(--brand)}
.breadcrumb span{margin:0 8px;color:var(--stone)}

/* ═══ News / Article ═══ */
.news-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:720px){.news-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.news-grid{grid-template-columns:repeat(3,1fr)}}
.news-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:8px;overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s ease;text-decoration:none;color:inherit}
.news-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -25px rgba(60,40,25,.2)}
.news-card-img{aspect-ratio:16/10;overflow:hidden;background:var(--cream-2)}
.news-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.news-card:hover .news-card-img img{transform:scale(1.04)}
.news-card-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.news-card-meta{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--stone-2);letter-spacing:.04em;text-transform:uppercase;font-weight:600;margin-bottom:10px}
.news-card-meta .sep{color:var(--stone)}
.news-card-title{font-size:18px;font-weight:600;color:var(--brand-dark);margin-bottom:10px;letter-spacing:-.015em;line-height:1.3}
.news-card-excerpt{font-size:14.5px;color:var(--ink-3);line-height:1.6;margin-bottom:16px;flex:1}
.news-card-more{display:inline-flex;align-items:center;gap:6px;color:var(--brand);font-size:13px;font-weight:600;margin-top:auto}

/* Article page */
.article-header{padding-top:48px;padding-bottom:32px}
.article-meta{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;font-size:13px;color:var(--stone-2);margin-bottom:18px}
.article-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--stone);display:inline-block}
.article-meta time,.article-meta address{font-style:normal}
.article-meta .badge{display:inline-flex;padding:4px 10px;border-radius:6px;background:rgba(130,85,70,.08);color:var(--brand);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.article h1{font-size:clamp(32px,5vw,50px);font-weight:500;letter-spacing:-.025em;line-height:1.1;color:var(--brand-dark);margin-bottom:16px}
.article .lead-sub{font-size:clamp(17px,1.7vw,20px);color:var(--ink-3);max-width:720px;line-height:1.55;margin-bottom:28px}
.article-hero-img{border-radius:8px;overflow:hidden;aspect-ratio:16/9;background:var(--cream-2);margin-bottom:40px;max-height:520px}
.article-hero-img img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:768px){.article-header{padding-top:28px;padding-bottom:20px}.article-hero-img{margin-left:-24px;margin-right:-24px;border-radius:0;aspect-ratio:4/3;margin-bottom:28px}}
.prose{max-width:780px;margin:0 auto;font-size:17px;line-height:1.75;color:var(--ink-3)}
.prose h2{font-size:clamp(22px,2.6vw,30px);color:var(--brand-dark);margin:56px 0 18px;letter-spacing:-.02em;font-weight:600}
.prose h3{font-size:19px;color:var(--brand-dark);margin:36px 0 12px;font-weight:600;letter-spacing:-.01em}
.prose p{margin:0 0 18px}
.prose p strong{color:var(--brand-dark);font-weight:600}
.prose ul,.prose ol{margin:0 0 22px;padding-left:20px}
.prose li{margin-bottom:8px}
.prose blockquote{margin:28px 0;padding:18px 24px;border-left:3px solid var(--brand);background:var(--cream-3);font-style:italic;color:var(--brand-dark);border-radius:0 8px 8px 0}
.prose a{color:var(--brand);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.prose a:hover{color:var(--brand-deep)}
.article-cta{max-width:780px;margin:48px auto 0;padding:36px 32px;background:var(--cream-2);border-radius:8px;text-align:center}
.article-cta h3{font-size:22px;color:var(--brand-dark);margin-bottom:10px;letter-spacing:-.015em;font-weight:600}
.article-cta p{font-size:15px;color:var(--ink-3);margin-bottom:20px}
.article-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px;padding-top:28px;border-top:1px solid var(--border);max-width:780px;margin-left:auto;margin-right:auto}
.article-tag{padding:5px 12px;border-radius:6px;background:var(--cream-3);font-size:12px;color:var(--ink-3);font-weight:500}

/* ═══ Reveal animations ═══ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ═══ Special Offer (Pfingsten / Sensation) ═══ */
.offer-hero{
  position:relative;
  padding:80px 0 96px;
  color:#fff;overflow:hidden;
  background:linear-gradient(130deg,#2d1d10 0%,#3c2819 25%,#825546 55%,#92654d 85%,#6b4536 100%);
  background-size:280% 100%;
  animation:sensationBg 22s ease-in-out infinite;
}
/* /special: Hero zieht sich unter die transparente Nav hoch, damit das
   warme Brown-Gradient durch den Top-Balken scheint. (contain:paint ist
   global schon entfernt — das war der Samsung-S23-Auslöser, nicht die
   reine margin-Technik.) */
body.page-special .offer-hero{
  margin-top:-80px;
  padding-top:160px;
}
.offer-hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 40% at 85% 15%,rgba(243,217,183,.18),transparent 55%),
             radial-gradient(ellipse 60% 50% at 15% 85%,rgba(253,253,251,.06),transparent 60%);
}
/* Ultra-langer Fade mit asymptotischer Annäherung an volle Deckung.
   Auf Mobile (<720px) konservativer, um Render-Overhead auf Samsung
   Internet + OLED-Displays klein zu halten. */
.offer-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:clamp(340px, 62vh, 1040px); z-index:1; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(250,248,243,0)      0%,
    rgba(250,248,243,0.001)  8%,
    rgba(250,248,243,0.004) 16%,
    rgba(250,248,243,0.011) 24%,
    rgba(250,248,243,0.024) 32%,
    rgba(250,248,243,0.046) 40%,
    rgba(250,248,243,0.080) 48%,
    rgba(250,248,243,0.130) 55%,
    rgba(250,248,243,0.200) 62%,
    rgba(250,248,243,0.290) 68%,
    rgba(250,248,243,0.400) 74%,
    rgba(250,248,243,0.520) 79%,
    rgba(250,248,243,0.650) 84%,
    rgba(250,248,243,0.770) 88%,
    rgba(250,248,243,0.870) 92%,
    rgba(250,248,243,0.940) 95%,
    rgba(250,248,243,0.980) 98%,
    rgba(250,248,243,1)     100%);
}
.offer-hero > .container{position:relative;z-index:2}
.offer-hero > .oh-blob{z-index:0}
.offer-hero h1{color:#fff;font-weight:500}
.offer-hero h1 em{color:#f3d9b7;font-style:italic;font-weight:400}
.offer-hero .lead{color:rgba(255,255,255,.82);max-width:640px}
.offer-hero .eyebrow{color:#f3d9b7}
.offer-badge-big{display:inline-flex;align-items:center;gap:10px;padding:10px 20px;border-radius:8px;background:#fff;color:var(--brand-dark);font-size:14px;font-weight:700;margin-bottom:28px;letter-spacing:.02em}
.offer-badge-big .dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(232,88,82,.5);animation:offerPulse 1.6s ease-out infinite}
@keyframes offerPulse{0%{box-shadow:0 0 0 0 rgba(232,88,82,.6)}70%{box-shadow:0 0 0 10px rgba(232,88,82,0)}100%{box-shadow:0 0 0 0 rgba(232,88,82,0)}}

/* Countdown */
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:480px;margin-top:28px}
.cd-cell{background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:14px 8px;text-align:center}
.cd-num{font-size:clamp(28px,4vw,38px);font-weight:600;color:#fff;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.cd-lbl{font-size:10px;font-weight:600;color:rgba(255,255,255,.65);letter-spacing:.14em;text-transform:uppercase;margin-top:6px}

/* Offer cards */
.offer-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:760px){.offer-grid{grid-template-columns:repeat(3,1fr)}}
.offer-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:8px;overflow:hidden;position:relative;transition:transform .4s var(--ease),box-shadow .4s ease}
.offer-card:hover{transform:translateY(-4px);box-shadow:0 30px 60px -25px rgba(60,40,25,.2)}
.offer-card.popular{border-color:var(--brand);border-width:2px}
.offer-card-top{padding:22px 24px 0;position:relative}
.offer-card-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:6px;background:var(--red);color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.offer-card-tag.brand{background:var(--brand)}
.offer-card-tag.olive{background:var(--olive-2)}
.offer-card-body{padding:16px 24px 24px;display:flex;flex-direction:column;flex:1}
.offer-card h3{font-size:24px;font-weight:600;color:var(--brand-dark);margin-bottom:4px;letter-spacing:-.018em}
.offer-card-sub{font-size:13px;color:var(--stone-2);font-weight:500;margin-bottom:14px}
.offer-card-price{display:flex;align-items:baseline;gap:10px;padding:14px 0;margin-bottom:14px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.offer-card-now{font-size:34px;font-weight:600;color:var(--brand-dark);letter-spacing:-.02em}
.offer-card-was{font-size:15px;color:var(--stone-2);text-decoration:line-through}
.offer-card-save{margin-left:auto;padding:4px 9px;border-radius:6px;background:rgba(75,164,59,.12);color:var(--green);font-size:12px;font-weight:700}
.offer-card-list{list-style:none;padding:0;margin:0 0 20px}
.offer-card-list li{display:flex;gap:10px;align-items:flex-start;padding:6px 0;font-size:14px;color:var(--ink-3);line-height:1.5}
.offer-card-list li svg{width:16px;height:16px;color:var(--green);flex-shrink:0;margin-top:3px}
.offer-card-avail{display:flex;align-items:center;gap:8px;padding:12px 14px;border-radius:8px;background:var(--cream-3);font-size:12.5px;color:var(--ink-3);margin-bottom:14px}
.offer-card-avail .bar{flex:1;height:6px;background:var(--cream-2);border-radius:3px;overflow:hidden;margin:0 4px}
.offer-card-avail .bar-fill{height:100%;background:linear-gradient(90deg,var(--green),var(--olive-2));border-radius:3px}
.offer-card-avail.warn .bar-fill{background:linear-gradient(90deg,#f59e0b,var(--red))}
.offer-card-avail.warn{background:rgba(232,88,82,.06);color:var(--red)}
.offer-card-cta{margin-top:auto}

/* ── Hero dentist endorsement (compact, inline) ── */
.hero-endorsement{
  display:inline-flex;align-items:center;gap:12px;
  margin-top:24px;padding:10px 16px 10px 10px;
  background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(130,85,70,.15);border-radius:8px;
  max-width:100%;
}
.hero-endorsement .he-portrait{flex-shrink:0;width:40px;height:40px;border-radius:50%;overflow:hidden;background:var(--cream-2);border:1.5px solid #fff;box-shadow:0 2px 8px rgba(60,40,25,.1)}
.hero-endorsement .he-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.hero-endorsement .he-title{font-size:13px;font-weight:600;color:var(--brand-dark);line-height:1.2;letter-spacing:-.005em}
.hero-endorsement .he-sub{font-size:11.5px;color:var(--ink-3);margin-top:2px;letter-spacing:.01em}
.hero-endorsement .he-sub a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.hero-endorsement .he-check{width:14px;height:14px;color:var(--green);margin-right:2px}

/* ── Dentist recommendation claim ── */
.dentist-claim{
  position:relative;padding:26px 30px;border:1px solid var(--border);border-radius:8px;
  background:var(--cream-4);
  display:flex;gap:22px;align-items:center;max-width:880px;margin:0 auto;
}
.dentist-claim .dc-portrait{flex-shrink:0;width:68px;height:68px;border-radius:50%;overflow:hidden;background:var(--cream-2);border:2px solid #fff;box-shadow:0 4px 14px rgba(60,40,25,.12)}
.dentist-claim .dc-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.dentist-claim .dc-body p{font-size:clamp(15px,1.6vw,17px);color:var(--brand-dark);line-height:1.5;margin:0 0 4px;font-weight:500;font-style:italic;letter-spacing:-.01em}
.dentist-claim .dc-body p strong{font-weight:700;font-style:normal}
.dentist-claim .dc-meta{font-size:12px;color:var(--stone-2);letter-spacing:.06em;text-transform:uppercase;font-weight:600}
@media(max-width:680px){
  .dentist-claim{flex-direction:column;text-align:center;padding:28px 24px}
}

/* ── Sensation Section — inherits hero beige, no white gap ── */
.sensation-section{
  padding:40px 0 56px;
  background:linear-gradient(180deg,var(--cream-2) 0%,var(--cream-2) 100%);
}
/* ── Sensation Strip — contained, rounded, tilted as a whole ── */
.sensation-strip{
  display:block;position:relative;overflow:hidden;padding:44px 40px;color:#fff;text-decoration:none;
  border-radius:8px;
  transform:rotate(-1.4deg);
  background:linear-gradient(120deg,#2d1d10 0%,#3c2819 22%,#825546 48%,#92654d 72%,#6b4536 100%);
  background-size:320% 100%;
  animation:sensationBg 11s ease-in-out infinite;
  isolation:isolate;
  box-shadow:0 20px 50px -20px rgba(60,40,25,.45);
}
.sensation-strip::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 20% 30%,rgba(243,217,183,.15),transparent 65%),
             radial-gradient(ellipse 60% 50% at 85% 75%,rgba(200,165,130,.12),transparent 65%);
}
.sensation-strip .ss-content{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;
  position:relative;z-index:2;
}
.sensation-strip .ss-text{max-width:640px}
.sensation-strip .ss-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:6px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sensation-strip h3{font-size:clamp(22px,3.2vw,30px);color:#fff;margin:0 0 8px;font-weight:500;letter-spacing:-.02em;line-height:1.18}
.sensation-strip p{color:rgba(255,255,255,.8);margin:0;font-size:15px;line-height:1.55}
.sensation-strip .ss-cta{flex-shrink:0}
.sensation-strip .ss-cta .btn-primary{background:#fff;color:var(--brand-dark);box-shadow:0 12px 32px rgba(0,0,0,.3)}
@media(max-width:679px){
  .sensation-strip{padding:32px 24px;transform:rotate(-1.2deg)}
  .sensation-strip h3{font-size:22px}
}

/* Wabbling blobs — shared by sensation-strip and offer-hero, strong motion */
/* Performance: blur auf 40px reduziert, mix-blend-mode:screen raus (sehr teuer),
   rotate aus den Keyframes (auf stark geblurrten Kreisen unsichtbar).
   contain:paint nur noch auf .sensation-strip — auf .offer-hero entfernt,
   weil Samsung Internet (S23) bei der Kombi aus paint-containment + dem
   langen ::after-Fade-Overlay Layout-Korruption gezeigt hat. */
.sensation-strip{contain:paint}
.ss-blob,.oh-blob{
  position:absolute;border-radius:50%;
  filter:blur(40px);pointer-events:none;
  will-change:transform;z-index:0;
  transform:translateZ(0);
}
.ss-blob-1,.oh-blob-1{
  width:min(520px,85vw);aspect-ratio:1/1;height:auto;
  background:radial-gradient(circle,rgba(243,217,183,.95),transparent 68%);
  top:-40%;left:5%;
  animation:waber 7s ease-in-out infinite;
}
.ss-blob-2,.oh-blob-2{
  width:min(600px,90vw);aspect-ratio:1/1;height:auto;
  background:radial-gradient(circle,rgba(200,165,130,.8),transparent 68%);
  bottom:-55%;right:-5%;
  animation:waber2 9s ease-in-out infinite -3s;
}
.ss-blob-3,.oh-blob-3{
  width:min(460px,82vw);aspect-ratio:1/1;height:auto;
  background:radial-gradient(circle,rgba(232,88,82,.55),transparent 68%);
  top:10%;left:55%;
  animation:waber3 8s ease-in-out infinite -4s;
}
.oh-blob-1{top:-30%;left:-10%}
.oh-blob-2{bottom:-40%;right:-10%}
.oh-blob-3{top:30%;left:45%;background:radial-gradient(circle,rgba(130,85,70,.65),transparent 68%)}

@keyframes sensationBg{
  0%,100%{background-position:0% 50%}
  25%{background-position:60% 30%}
  50%{background-position:100% 70%}
  75%{background-position:40% 40%}
}
/* Rotate entfernt (auf blur(40px) unsichtbar, spart GPU-Compositing).
   Translate-Weiten reduziert, damit Repaint-Fläche kleiner bleibt. */
@keyframes waber{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  25%{transform:translate3d(90px,-60px,0) scale(1.25)}
  50%{transform:translate3d(-70px,45px,0) scale(.85)}
  75%{transform:translate3d(50px,80px,0) scale(1.15)}
}
@keyframes waber2{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(-80px,55px,0) scale(1.2)}
  66%{transform:translate3d(70px,-65px,0) scale(.88)}
}
@keyframes waber3{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(65px,35px,0) scale(1.2)}
}
@media(prefers-reduced-motion:reduce){
  .sensation-strip,.ss-blob,.oh-blob{animation:none!important}
}

/* ── Sensation Strip · Summer-Variante ─────────────────────────────
   Sommerhimmel-Verlauf, Sonne mit rotierenden Strahlen, zwei SVG-
   Palmen links/rechts, schwebende Mini-Emoji für Verspieltheit.
   Alle Animationen GPU-only (transform/opacity), reduced-motion safe. */
.sensation-strip--summer{
  background:linear-gradient(115deg,
    #ff9a4d 0%,
    #ffb347 18%,
    #ffc973 38%,
    #f7a85b 58%,
    #ee7a4a 80%,
    #c84a3a 100%);
  background-size:280% 100%;
  animation:summerSky 14s ease-in-out infinite;
  box-shadow:0 22px 56px -22px rgba(200,80,40,.55),
             0 6px 18px -10px rgba(255,160,80,.45);
}
.sensation-strip--summer::before{
  background:radial-gradient(ellipse 70% 60% at 18% 28%,rgba(255,240,200,.35),transparent 65%),
             radial-gradient(ellipse 60% 50% at 82% 78%,rgba(255,90,60,.22),transparent 65%);
}
.sensation-strip--summer .ss-blob-1{
  background:radial-gradient(circle,rgba(255,238,180,.95),transparent 70%);
}
.sensation-strip--summer .ss-blob-2{
  background:radial-gradient(circle,rgba(255,170,110,.85),transparent 70%);
}
.sensation-strip--summer .ss-blob-3{
  background:radial-gradient(circle,rgba(255,118,80,.65),transparent 70%);
}
/* Drei Ribbons (Tag, Headline, Subheadline) + Countdown — alle exakt gleicher Neigungswinkel */
.sensation-strip--summer .ss-tag--summer,
.sensation-strip--summer h3,
.sensation-strip--summer p,
.sensation-strip--summer .countdown{
  transform:rotate(-2deg);
  transform-origin:left center;
}
.sensation-strip--summer h3,
.sensation-strip--summer p{
  width:-moz-fit-content;width:fit-content;max-width:100%;
  padding:5px 10px;border-radius:4px;
  background:rgba(30,12,6,.74);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  box-shadow:0 4px 14px -6px rgba(60,20,10,.45);
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}
.sensation-strip--summer h3{color:#fff;font-weight:600;margin:0 0 12px}
.sensation-strip--summer p{color:rgba(255,250,240,.96);margin:0 0 14px}

/* Countdown im Strip — kompakt, im selben Ribbon-Look */
.sensation-strip--summer .countdown{
  display:inline-flex;gap:6px;width:-moz-fit-content;width:fit-content;
  margin:0;
}
.sensation-strip--summer .cd-cell{
  background:rgba(255,250,242,.94);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  border-radius:4px;padding:5px 10px;text-align:center;min-width:48px;
  box-shadow:0 4px 14px -6px rgba(60,20,10,.35);
}
.sensation-strip--summer .cd-num{
  color:#2d1d10;font-size:18px;font-weight:700;
  font-variant-numeric:tabular-nums;line-height:1;
  letter-spacing:0;
}
.sensation-strip--summer .cd-lbl{
  color:rgba(45,29,16,.65);font-size:9px;
  text-transform:uppercase;letter-spacing:.1em;
  margin-top:3px;font-weight:600;
}
.sensation-strip--summer .ss-cta .btn-primary{
  background:#fff;color:#c84a3a;
  box-shadow:0 14px 36px rgba(120,40,20,.35);
}

/* Sonne mit rotierenden Strahlen */
.ss-sun{
  position:absolute;top:-44px;right:-44px;width:200px;height:200px;
  pointer-events:none;z-index:1;
}
.ss-sun-disc{
  position:absolute;inset:48px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff5c8 0%,#ffd86b 45%,#ffb347 100%);
  box-shadow:0 0 50px 12px rgba(255,200,90,.55),
             0 0 90px 30px rgba(255,160,70,.35);
  animation:sunPulse 4.5s ease-in-out infinite;
}
.ss-sun-rays{
  position:absolute;inset:0;
  animation:sunSpin 22s linear infinite;
  transform-origin:50% 50%;
}
.ss-sun-rays svg{width:100%;height:100%;display:block}

/* Palmen */
.ss-palm{
  position:absolute;bottom:-12px;width:130px;height:172px;
  pointer-events:none;z-index:1;
  filter:drop-shadow(0 8px 14px rgba(60,30,15,.28));
  transform-origin:50% 100%;
}
.ss-palm--left{
  left:-8px;
  transform:rotate(-6deg);
  animation:palmSwayLeft 6s ease-in-out infinite;
}
.ss-palm--right{
  right:160px;
  transform:rotate(5deg);
  animation:palmSwayRight 7s ease-in-out infinite -2s;
}

/* Schwebende Mini-Elemente */
.ss-float{
  position:absolute;font-size:18px;opacity:.85;pointer-events:none;
  z-index:1;text-shadow:0 1px 2px rgba(120,40,20,.2);
  will-change:transform;
}
.ss-float--1{top:18%;left:24%;animation:float1 6.5s ease-in-out infinite}
.ss-float--2{top:58%;left:38%;animation:float2 8s ease-in-out infinite -2s;font-size:16px}
.ss-float--3{top:30%;right:34%;animation:float3 7s ease-in-out infinite -3s;font-size:20px}

/* Tag-Badge in Summer-Optik — gleicher Ribbon-Look wie h3/p
   (höhere Specificity, um die Basisregel ".sensation-strip .ss-tag" zu schlagen) */
.sensation-strip--summer .ss-tag--summer{
  background:rgba(30,12,6,.74);
  border:0;
  padding:5px 10px;border-radius:4px;
  color:#fff5c8;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
  box-shadow:0 4px 14px -6px rgba(60,20,10,.45);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  margin-bottom:14px;
}
.sensation-strip--summer .ss-tag--summer svg{
  width:14px;height:14px;color:#ffd86b;
  animation:sunSpin 14s linear infinite;
}

/* Keyframes */
@keyframes summerSky{
  0%,100%{background-position:0% 50%}
  25%{background-position:55% 30%}
  50%{background-position:100% 60%}
  75%{background-position:40% 45%}
}
@keyframes sunSpin{
  to{transform:rotate(360deg)}
}
@keyframes sunPulse{
  0%,100%{box-shadow:0 0 50px 12px rgba(255,200,90,.55),0 0 90px 30px rgba(255,160,70,.35);transform:scale(1)}
  50%{box-shadow:0 0 64px 18px rgba(255,210,110,.7),0 0 120px 40px rgba(255,170,80,.45);transform:scale(1.04)}
}
@keyframes palmSwayLeft{
  0%,100%{transform:rotate(-6deg)}
  50%{transform:rotate(-2deg)}
}
@keyframes palmSwayRight{
  0%,100%{transform:rotate(5deg)}
  50%{transform:rotate(1deg)}
}
@keyframes float1{
  0%,100%{transform:translate(0,0) rotate(0)}
  50%{transform:translate(8px,-12px) rotate(8deg)}
}
@keyframes float2{
  0%,100%{transform:translate(0,0) rotate(0)}
  50%{transform:translate(-10px,-14px) rotate(-10deg)}
}
@keyframes float3{
  0%,100%{transform:translate(0,0) rotate(0)}
  50%{transform:translate(6px,-10px) rotate(6deg)}
}

/* Mobile Anpassung */
@media(max-width:679px){
  .ss-sun{width:130px;height:130px;top:-28px;right:-28px}
  .ss-sun-disc{inset:36px}
  .ss-palm{width:88px;height:120px}
  .ss-palm--right{right:-10px}
  .ss-float{font-size:14px}
  .ss-float--3{font-size:16px}
}

/* Reduced Motion */
@media(prefers-reduced-motion:reduce){
  .sensation-strip--summer,
  .ss-sun-rays,.ss-sun-disc,
  .ss-palm,.ss-float,
  .ss-tag--summer svg{animation:none!important}
}

/* ═══ Utilities ═══ */
.bg-cream-2{background:var(--cream-2)}
.bg-cream-3{background:var(--cream-3)}
.mt-0{margin-top:0}
.mt-8{margin-top:8px}
.mt-16{margin-top:16px}
.mt-24{margin-top:24px}
.mt-40{margin-top:40px}
.center{text-align:center}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:0s!important;transition-duration:0s!important}
}

/* ═══ Universal hover zoom for photos inside overflow:hidden containers ═══ */
.hero-image,.split-image,.team-card-img,.article-hero-img,.tr-card-img,.news-card-img,.loc-card-img,.hero-endorsement .he-portrait,.dentist-claim .dc-portrait{overflow:hidden}
.hero-image img,.split-image img,.team-card-img img,.article-hero-img img,.tr-card-img img,.news-card-img img{
  transition:transform .7s var(--ease);will-change:transform;
}
.hero-image:hover img,.split-image:hover img,.team-card:hover .team-card-img img,.article-hero-img:hover img,.tr-card:hover .tr-card-img img,.news-card:hover .news-card-img img{
  transform:scale(1.05);
}
/* Also apply hover zoom to .split image when hovering the split block (wrapper hover) */
.split:hover .split-image img{transform:scale(1.05)}
/* Location card image support */
.loc-card-img img{transition:transform .7s var(--ease)}
.loc-card:hover .loc-card-img img{transform:scale(1.04)}

/* ═══ Footer payment methods + social ═══ */
.footer-pay{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.footer-pay .pay-badge{display:inline-flex;align-items:center;justify-content:center;height:28px;padding:0 10px;border-radius:6px;background:#fff;color:#3c2819;font-size:10px;font-weight:700;letter-spacing:.04em;line-height:1;letter-spacing:.02em;min-width:44px}
.footer-pay .pay-badge svg{height:16px;width:auto;display:block}
.footer-pay .pay-badge.visa{background:#1a1f71;color:#fff;padding:0 11px}
.footer-pay .pay-badge.mc{background:#fff;padding:0 8px}
.footer-pay .pay-badge.amex{background:#006fcf;color:#fff;padding:0 10px}
.footer-pay .pay-badge.pp{background:#fff;padding:0 10px}
.footer-pay .pay-badge.apple{background:#000;color:#fff;padding:0 10px}
.footer-pay .pay-badge.gpay{background:#fff;padding:0 10px}
.footer-legal-links{display:flex;flex-wrap:wrap;gap:14px 22px;font-size:13px;color:rgba(255,255,255,.55)}
.footer-legal-links a{color:rgba(255,255,255,.65);transition:color .2s}
.footer-legal-links a:hover{color:#fff}

/* Legal pages layout */
.legal{padding:48px 0 80px}
.legal .legal-inner{max-width:820px;margin:0 auto;background:#fff;border:1px solid var(--border);border-radius:8px;padding:48px 44px;box-shadow:0 10px 30px -18px rgba(60,40,25,.12)}
.legal h1{font-size:clamp(28px,3.6vw,40px);font-weight:500;letter-spacing:-.02em;margin:0 0 8px;color:var(--brand-dark)}
.legal .last-updated{font-size:13px;color:var(--stone-2);margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--border)}
.legal h2{font-size:20px;font-weight:600;color:var(--brand-dark);margin:32px 0 14px;letter-spacing:-.01em}
.legal h3{font-size:17px;font-weight:600;color:var(--brand-dark);margin:24px 0 10px}
.legal p{font-size:15px;color:var(--ink-3);line-height:1.7;margin:0 0 12px}
.legal strong{color:var(--brand-dark);font-weight:600}
.legal ul,.legal ol{padding-left:22px;font-size:15px;color:var(--ink-3);line-height:1.7}
.legal li{margin-bottom:6px}
.legal a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}

/* ═══ Mobile horizontal swipe — applies to package, feature, steps, offer, loc, ba, team grids ═══ */
@media(max-width:679px){
  .tr-grid,.feat-grid,.steps,.offer-grid,.loc-grid,.ba-grid,.team-grid,.info-grid{
    grid-template-columns:none!important;
    display:flex!important;
    gap:14px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scroll-padding:24px;
    padding:8px 24px 20px;
    margin:0 -24px;
    scrollbar-width:none;
  }
  .tr-grid::-webkit-scrollbar,.feat-grid::-webkit-scrollbar,.steps::-webkit-scrollbar,.offer-grid::-webkit-scrollbar,.loc-grid::-webkit-scrollbar,.ba-grid::-webkit-scrollbar,.team-grid::-webkit-scrollbar,.info-grid::-webkit-scrollbar{display:none}
  .tr-grid > *,.offer-grid > *,.loc-grid > *,.team-grid > *,.info-grid > *{
    flex:0 0 85%;
    min-width:0;
    max-width:85%;
    scroll-snap-align:start;
  }
  .feat-grid > *,.steps > *{
    flex:0 0 78%;
    min-width:0;
    max-width:78%;
    scroll-snap-align:start;
  }
  .ba-grid > *{
    flex:0 0 72%;
    min-width:0;
    max-width:72%;
    scroll-snap-align:center;
  }
  /* Subtle swipe hint on scrollable grids */
  .tr-grid::after,.feat-grid::after,.steps::after,.offer-grid::after,.loc-grid::after,.team-grid::after,.info-grid::after{content:"";flex:0 0 10%}
}
.swipe-hint{display:none;text-align:center;font-size:12px;color:var(--stone-2);letter-spacing:.06em;margin-top:-12px;margin-bottom:18px;text-transform:uppercase}
@media(max-width:679px){.swipe-hint{display:block}}

/* ═══ Hero grid + Before/After slider ═══════════════════════════
   Side-by-side text & slider on desktop, stacks on mobile. */
.oh-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:56px;
  align-items:center;
}
.oh-text{ max-width:720px; }
@media(min-width:960px){
  .oh-grid{ grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap:64px; }
  .oh-text{ max-width:none; }
}
@media(min-width:1280px){
  .oh-grid{ gap:96px; }
}

/* ── Before/After Slider ─────────────────────────────────────── */
.smile-ba{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  max-width:560px;
  margin:0 auto;
  border-radius:8px;
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;  /* hand pointer/touch events to JS */
  background:#2d1d10;
  box-shadow:
    0 40px 80px -30px rgba(0,0,0,.55),
    0 12px 32px -12px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.08);
  isolation:isolate;
  cursor:ew-resize;
}
.smile-ba__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none;
  -webkit-user-drag:none;
}
.smile-ba__after{
  position:absolute; inset:0;
  /* Clip-Kante deckungsgleich mit Handle-Position bei jedem Split-Wert:
     Inset vom LINKEN Rand um genau `split` — damit wird AFTER von der
     Slider-Linie aus nach rechts sichtbar. Kein gegenläufiger Effekt mehr. */
  clip-path: inset(0 0 0 var(--split, 50%));
  -webkit-clip-path: inset(0 0 0 var(--split, 50%));
  transition: clip-path .5s cubic-bezier(.16,1,.3,1);
  -webkit-transition: -webkit-clip-path .5s cubic-bezier(.16,1,.3,1);
  will-change: clip-path;
}
/* Disable transition while actively dragging → 1:1 finger tracking */
.smile-ba[data-dragging="1"] .smile-ba__after{ transition:none; -webkit-transition:none; }
.smile-ba[data-dragging="1"] .smile-ba__divider{ transition:none; }

.smile-ba__divider{
  position:absolute; top:0; bottom:0;
  left: var(--split, 50%);
  width:2px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.95) 10%,
    rgba(255,255,255,0.95) 90%,
    rgba(255,255,255,0) 100%);
  transform:translateX(-50%);
  pointer-events:none;
  z-index:2;
  box-shadow: 0 0 12px rgba(0,0,0,.18);
  transition: left .5s cubic-bezier(.16,1,.3,1);
}
.smile-ba__handle{
  position:absolute;
  left: var(--split, 50%);
  top:50%;
  transform:translate(-50%,-50%);
  width:56px; height:56px;
  border-radius:50%;
  border:0;
  margin:0; padding:0;
  background:#fff;
  color:var(--brand-dark, #2d1d10);
  cursor:grab;
  display:flex; align-items:center; justify-content:center;
  gap:2px;
  z-index:3;
  box-shadow:
    0 10px 28px -6px rgba(0,0,0,.35),
    0 0 0 1px rgba(0,0,0,.04),
    0 0 0 8px rgba(255,255,255,.12),
    0 0 0 9px rgba(255,255,255,.06);
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, left .5s cubic-bezier(.16,1,.3,1);
}
.smile-ba[data-dragging="1"] .smile-ba__handle{
  cursor:grabbing;
  transform:translate(-50%,-50%) scale(1.06);
  transition:left 0s, transform .12s ease;
}
.smile-ba__handle:hover{ transform:translate(-50%,-50%) scale(1.04); }
.smile-ba__handle:focus-visible{
  outline:2px solid #f3d9b7; outline-offset:4px;
}
.smile-ba__arrow{
  width:16px; height:16px;
  color:var(--brand-dark, #2d1d10);
  flex-shrink:0;
}
.smile-ba__arrow--l{ margin-right:-2px; }
.smile-ba__arrow--r{ margin-left:-2px; }

/* Corner labels */
.smile-ba__label{
  position:absolute; top:16px;
  padding:6px 12px;
  font-family:var(--mono, 'JetBrains Mono', monospace);
  font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
  font-weight:600;
  border-radius:4px;
  pointer-events:none;
  z-index:2;
  background:rgba(15,10,5,.55);
  color:#fff;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.smile-ba__label--before{ left:16px; }
.smile-ba__label--after{
  right:16px;
  background:rgba(255,255,255,.82);
  color:var(--brand-dark, #2d1d10);
}

/* Intro-sweep via CSS custom property entfernt — ohne @property ruckelt
   der Browser bei der Interpolation, und die Animation hat mit dem Drag
   gekämpft. JS setzt den initialen --split Wert auf 50 % direkt. */

@media(max-width:520px){
  .smile-ba{ max-width:none; }
  .smile-ba__handle{ width:48px; height:48px; }
  .smile-ba__label{ font-size:9px; padding:5px 10px; top:12px; }
  .smile-ba__label--before{ left:12px; }
  .smile-ba__label--after{ right:12px; }
}

/* ═══ Ablauf-Section mit integriertem Before/After-Slider ═══
   Zweispaltig auf Desktop (Steps links 2×2, Slider rechts), stackt auf Mobile.
   Slider nutzt die bereits global definierten .smile-ba Styles. */
.ablauf-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
  align-items:start;
  margin-top:12px;
}
.ablauf-grid .steps{ margin:0; }
@media(min-width:900px){
  .ablauf-grid{
    grid-template-columns: minmax(0,1.15fr) minmax(0,1fr);
    gap:56px;
    align-items:center;
  }
  /* Steps: 2×2 innerhalb der linken Spalte */
  .ablauf-grid .steps{ grid-template-columns:1fr 1fr !important; gap:18px; }
  .ablauf-grid .step{ padding:22px 20px; }
  /* Slider: kompakter auf dieser Seite */
  .ablauf-grid .smile-ba{ max-width:480px; margin:0 auto; }
}
@media(min-width:1280px){
  .ablauf-grid{ gap:72px; }
}

/* ═══ Special-Seite: Nav-Stile über dunklem Hero ═══
   Nav ist transparent über dem braunen Hero-BG → Links/Logo/Hamburger
   müssen in warmem Cream stehen. Sobald gescrolled wird (Glass-BG),
   zurück zu dunklen Inks. */

/* Zwei Logo-Varianten nur auf Special — Standard-Seiten nutzen weiter eine */
.nav-logo .logo-light,
.nav-logo .logo-dark{ height:32px; width:auto; display:block; }
.nav-logo .logo-light{ display:none; }  /* Default: Brown-Logo */
body.page-special .nav:not(.nav-scrolled) .nav-logo .logo-light{ display:block; }
body.page-special .nav:not(.nav-scrolled) .nav-logo .logo-dark{  display:none; }

/* Links, Dropdown-Button, Hamburger in Cream solange unscrolled */
body.page-special .nav:not(.nav-scrolled) .nav-links a,
body.page-special .nav:not(.nav-scrolled) .nav-dropdown > a,
body.page-special .nav:not(.nav-scrolled) .nav-dropdown > button{
  color:#f3e8d8;
}
body.page-special .nav:not(.nav-scrolled) .nav-links a:hover,
body.page-special .nav:not(.nav-scrolled) .nav-dropdown:hover > a,
body.page-special .nav:not(.nav-scrolled) .nav-dropdown:hover > button,
body.page-special .nav:not(.nav-scrolled) .nav-dropdown.open > button{
  color:#fff;
}
body.page-special .nav:not(.nav-scrolled) .nav-mobile-toggle{
  color:#f3e8d8;
}
body.page-special .nav:not(.nav-scrolled) .nav-mobile-toggle svg{
  stroke:#f3e8d8;
}
/* Termin-Button: weißer invertierter Look passt zum dunklen BG */
body.page-special .nav:not(.nav-scrolled) .nav-cta{
  background:#fff; color:var(--brand-dark);
  box-shadow: 0 8px 20px -8px rgba(0,0,0,.25);
}
body.page-special .nav:not(.nav-scrolled) .nav-cta:hover{
  background:#fff; color:var(--brand-dark);
  transform:translateY(-1px);
}

/* ═══ /review — Sonder-Aktions-Seite (noindex) ══════════════
   Tab-Navigation zwischen Standorten, elegante Google-Review-CTAs. */
.review-hero{
  padding:96px 0 56px;
  background:
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(243,217,183,.25), transparent 55%),
    radial-gradient(ellipse 50% 60% at 10% 90%, rgba(130,85,70,.06), transparent 60%),
    linear-gradient(180deg, var(--cream-4, #fcfbf7) 0%, var(--cream-3, #faf8f3) 100%);
  position:relative; overflow:hidden;
}
@media(min-width:768px){ .review-hero{ padding:128px 0 72px; } }
.review-hero-inner{ max-width:760px; }
.review-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  padding:7px 14px; border-radius:999px;
  background:rgba(130,85,70,.08); color:var(--brand-dark);
  font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  margin-bottom:24px;
}
.review-h1{
  font-size:clamp(42px, 7vw, 80px);
  font-weight:500; line-height:1.02; letter-spacing:-.028em;
  color:var(--brand-dark); margin:0 0 24px;
}
.review-h1 em{
  font-style:normal; color:var(--brand);
  background:linear-gradient(135deg, var(--brand) 0%, #a56b54 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-weight:600;
}
.review-lead{
  font-size:clamp(15px, 1.4vw, 18px); line-height:1.6; color:var(--ink-3);
  max-width:560px; margin:0 0 32px;
}
.review-lead strong{ color:var(--brand-dark); font-weight:600; }

.review-pills{ display:flex; flex-wrap:wrap; gap:10px 12px; margin-top:8px; }
.review-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px;
  background:#fff; border:1px solid var(--border);
  font-size:12.5px; color:var(--ink-2); font-weight:500;
  box-shadow:0 1px 0 rgba(60,40,25,.03);
}
.review-pill svg{ width:14px; height:14px; color:var(--brand); flex-shrink:0; }

.review-how{ padding:72px 0 48px; }
.review-steps{ display:grid; grid-template-columns:1fr; gap:20px; margin-top:40px; }
@media(min-width:760px){ .review-steps{ grid-template-columns:repeat(3, 1fr); gap:24px; } }
.review-step{
  padding:28px 26px; background:#fff; border:1px solid var(--border);
  border-radius:14px; position:relative;
  box-shadow:0 1px 0 rgba(60,40,25,.02);
}
.review-step-num{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  background:var(--brand); color:#fff;
  font-family:'Montserrat'; font-weight:600; font-size:14px;
  margin-bottom:18px;
}
.review-step h3{ font-size:19px; font-weight:600; color:var(--brand-dark); margin:0 0 8px; letter-spacing:-.005em; }
.review-step p{ font-size:14px; line-height:1.55; color:var(--ink-3); margin:0; }

.review-tabs-section{ padding:56px 0 96px; background:var(--cream-3); }
@media(min-width:768px){ .review-tabs-section{ padding:72px 0 128px; } }

.review-tabs{ margin-top:40px; max-width:820px; margin-left:auto; margin-right:auto; }
.review-tab-nav{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  padding:6px; background:#fff; border:1px solid var(--border); border-radius:12px;
  margin-bottom:24px;
}
.review-tab-btn{
  all:unset; cursor:pointer;
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; border-radius:8px;
  transition:background .25s ease, color .25s ease;
  color:var(--ink-3);
  text-align:left;
}
.review-tab-btn:hover{ background:var(--cream-4); }
.review-tab-btn.active{ background:var(--brand-dark); color:#fff; }
.review-tab-btn.active .review-tab-sub{ color:rgba(255,255,255,.72); }
.review-tab-dot{
  width:9px; height:9px; border-radius:50%;
  background:currentColor; flex-shrink:0; opacity:.4;
}
.review-tab-btn.active .review-tab-dot{ opacity:1; background:#f3d9b7; }
.review-tab-title{ display:block; font-weight:600; font-size:14px; line-height:1.2; letter-spacing:-.005em; }
.review-tab-sub{ display:block; font-size:12px; line-height:1.3; color:var(--stone-2); margin-top:3px; }

.review-tab-panel{ display:none; }
.review-tab-panel.active{ display:block; animation:reviewFade .32s ease; }
@keyframes reviewFade{
  from{ opacity:0; transform:translateY(4px); }
  to{ opacity:1; transform:none; }
}

.review-card{
  background:#fff; border:1px solid var(--border);
  border-radius:14px; padding:32px 28px;
  box-shadow:0 24px 48px -32px rgba(60,40,25,.12);
}
@media(min-width:640px){ .review-card{ padding:40px 36px; } }
.review-card-meta{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
  margin-bottom:20px; padding-bottom:18px; border-bottom:1px solid var(--border);
}
.review-card-loc{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; color:var(--ink-3); font-weight:500;
}
.review-card-loc svg{ width:14px; height:14px; color:var(--brand); flex-shrink:0; }
.review-card-stars{ display:inline-flex; gap:1px; color:#fbbc05; }
.review-card-stars svg{ width:16px; height:16px; }
.review-card-stars-muted{ color:var(--line-2); }

.review-card-h{
  font-size:clamp(22px, 2.4vw, 28px); font-weight:600;
  color:var(--brand-dark); margin:0 0 12px; letter-spacing:-.015em; line-height:1.2;
}
.review-card-p{ font-size:15px; line-height:1.6; color:var(--ink-3); margin:0 0 28px; max-width:56ch; }

.review-card-cta-row{ display:flex; flex-direction:column; gap:14px; }

.review-btn{
  display:inline-flex; align-items:center; gap:14px;
  padding:16px 26px;
  background:#fff; color:var(--brand-dark);
  border:1px solid var(--brand-dark);
  border-radius:999px;
  font-size:15px; font-weight:600; letter-spacing:-.005em;
  cursor:pointer; text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  align-self:flex-start;
}
.review-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px -12px rgba(60,40,25,.25);
  background:var(--brand-dark); color:#fff;
}
.review-btn:hover .review-btn-arrow{ transform:translate(2px, -2px); }
.review-btn-goog-logo{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; flex-shrink:0;
}
.review-btn-goog-logo svg{ width:100%; height:100%; }
.review-btn-arrow{ width:14px; height:14px; transition:transform .25s ease; }

.review-btn-disabled{
  background:var(--cream-2); color:var(--stone-2);
  border-color:var(--line-2);
  cursor:not-allowed;
  pointer-events:none;
}
.review-btn-disabled:hover{
  transform:none; box-shadow:none; background:var(--cream-2); color:var(--stone-2);
}
.review-btn-goog-logo-muted{ color:var(--stone-2); }

.review-card-hint{
  font-size:12.5px; color:var(--stone-2); line-height:1.5; max-width:52ch;
}
.review-card-hint strong{ color:var(--brand-dark); }

.review-trust{
  display:flex; flex-wrap:wrap; align-items:center; gap:20px 32px;
  margin-top:40px; padding:22px 28px;
  background:rgba(255,255,255,.65); border:1px solid var(--border);
  border-radius:10px;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.review-trust-item{
  display:flex; align-items:center; gap:12px;
  font-size:13.5px; color:var(--ink-3); line-height:1.55;
  flex:1; min-width:200px;
}
.review-trust-item strong{ color:var(--brand-dark); }
.review-trust-stars{ display:inline-flex; gap:1px; color:#fbbc05; }
.review-trust-stars svg{ width:16px; height:16px; }
.review-trust-divider{
  width:1px; height:36px; background:var(--border);
}
@media(max-width:520px){ .review-trust-divider{ display:none; } }

/* ==========================================================================
   FAQ PAGE v2 — gradient hero flush bis Nav, featured, author, cat, studios
   ========================================================================== */

/* Hero mit durchlaufendem Gradient (kein Bruch, wie bei laserazor) */
.faq-hero{
  position:relative;
  padding:18px 0 96px;
  margin-top:0;
  background:
    radial-gradient(1200px 520px at 50% -10%, rgba(130,85,70,.12), transparent 70%),
    linear-gradient(180deg, var(--cream-2) 0%, var(--cream-5) 40%, var(--cream-3) 100%);
  overflow:hidden;
}
.faq-hero::before{
  content:"";position:absolute;inset:auto 0 -1px 0;height:140px;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,var(--cream-3) 100%);
}
.faq-hero-inner{position:relative;max-width:820px;z-index:1;padding-top:34px}
.faq-hero h1{margin-bottom:20px}
.faq-hero .lead{margin:0 auto 32px;color:var(--ink-3)}

/* Breadcrumb inside hero — no separate bar */
.faq-hero-breadcrumb{
  background:transparent !important;border:0 !important;padding:0 !important;margin:0 !important;
  color:var(--ink-3);position:relative;z-index:1;font-size:13px;
}
.faq-hero-breadcrumb a{color:var(--brand-dark);opacity:.82;text-decoration:none}
.faq-hero-breadcrumb a:hover{opacity:1;text-decoration:underline}
.faq-hero-breadcrumb span{color:var(--stone-2);margin:0 6px}

/* Hero stats chips */
.faq-hero-stats{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:28px 0 32px}
.faq-hero-stats>div{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:12px 20px;background:rgba(255,255,255,.70);border:1px solid var(--border);
  border-radius:var(--r-lg);backdrop-filter:blur(6px);min-width:110px;
}
.faq-hero-stats strong{font-size:22px;font-weight:700;color:var(--brand-dark);line-height:1}
.faq-hero-stats span{font-size:12px;color:var(--ink-3);font-weight:500}

/* Search */
.faq-search{position:relative;max-width:560px;margin:0 auto}
.faq-search input{
  width:100%;padding:16px 20px 16px 52px;border-radius:var(--r-lg);
  border:1px solid var(--border);background:#fff;
  font:inherit;color:var(--ink-2);font-size:15px;
  box-shadow:0 4px 16px rgba(60,40,25,.06);
  transition:border-color .2s,box-shadow .2s;
}
.faq-search input:focus{outline:none;border-color:var(--brand);box-shadow:0 4px 22px rgba(130,85,70,.18)}
.faq-search svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--stone-2)}

/* Featured cards (Top 8 deep-dive) */
.faq-featured{padding:32px 0 48px;position:relative;z-index:1}
.faq-featured-head{text-align:center;max-width:680px;margin:0 auto 32px}
.faq-featured-head h2{margin-bottom:14px}
.faq-featured-head p{color:var(--ink-3);margin:0}
.faq-featured-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.faq-featured-card{
  display:flex;flex-direction:column;gap:10px;
  padding:22px 22px 20px;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
  text-decoration:none;color:var(--ink-2);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .2s;
  position:relative;overflow:hidden;
}
.faq-featured-card::after{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--brand),var(--gold));
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.faq-featured-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(60,40,25,.14);border-color:var(--stone-3)}
.faq-featured-card:hover::after{transform:scaleX(1)}
.ffc-icon{
  width:42px;height:42px;border-radius:10px;
  background:linear-gradient(135deg,var(--cream-5),var(--cream-2));
  display:flex;align-items:center;justify-content:center;color:var(--brand);flex-shrink:0;
}
.ffc-icon svg{width:22px;height:22px}
.faq-featured-card h3{font-size:16px;font-weight:600;color:var(--brand-dark);margin:0;line-height:1.3}
.faq-featured-card p{font-size:13px;color:var(--ink-3);line-height:1.55;margin:0;flex:1}
.ffc-link{font-size:13px;font-weight:600;color:var(--brand);display:inline-flex;align-items:center;gap:4px;margin-top:4px}

/* Author / expert box */
.faq-author{padding:24px 0 48px}
.faq-author-card{
  display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;
  padding:32px;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:0 4px 20px rgba(60,40,25,.06);position:relative;
}
.faq-author-card .fac-badge{
  position:absolute;top:-11px;left:32px;
  padding:5px 12px;background:var(--brand);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border-radius:999px;
}
.fac-photos{display:flex;gap:0}
.fac-photos img{
  width:68px;height:68px;border-radius:50%;object-fit:cover;
  border:3px solid #fff;box-shadow:0 2px 8px rgba(60,40,25,.16);margin-left:-14px;
}
.fac-photos img:first-child{margin-left:0}
.fac-photo-dummy{
  width:68px;height:68px;border-radius:50%;
  background:linear-gradient(135deg,var(--cream-2),var(--gold));
  border:3px solid #fff;box-shadow:0 2px 8px rgba(60,40,25,.16);margin-left:-14px;
  display:flex;align-items:center;justify-content:center;color:var(--brand-dark);font-weight:700;
}
.fac-photo-dummy:first-child{margin-left:0}
.fac-content{min-width:0}
.fac-content h2{font-size:clamp(20px,2.4vw,26px);margin-bottom:8px}
.fac-content p{margin:0 0 12px;color:var(--ink-3);font-size:15px;line-height:1.6}
.fac-credentials{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-wrap:wrap;gap:8px}
.fac-credentials li{
  font-size:12px;font-weight:500;color:var(--brand-dark);
  padding:4px 10px;background:var(--cream-5);border:1px solid var(--border);border-radius:999px;
  display:inline-flex;align-items:center;gap:6px;
}
.fac-credentials li::before{content:"✓";color:var(--green);font-weight:700}
.fac-links{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.fac-links a{
  font-size:13px;font-weight:600;color:var(--brand);
  padding:8px 14px;border:1px solid var(--border);border-radius:var(--r-md);
  transition:background .2s,border-color .2s;
}
.fac-links a:hover{background:var(--cream-5);border-color:var(--brand)}

/* Sticky category nav */
.faq-cat-nav{
  position:sticky;top:64px;z-index:10;
  background:rgba(250,248,243,.94);backdrop-filter:blur(10px);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:10px 0;margin-bottom:32px;
}
.faq-cat-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.faq-cat-tabs::-webkit-scrollbar{display:none}
.faq-cat-tabs a{
  flex-shrink:0;padding:9px 16px;border-radius:999px;
  font-size:13px;font-weight:600;color:var(--ink-3);
  border:1px solid transparent;transition:all .2s;white-space:nowrap;
}
.faq-cat-tabs a:hover{background:#fff;color:var(--brand-dark);border-color:var(--border)}
.faq-cat-tabs a.is-active{background:var(--brand);color:#fff}

/* Categorized FAQ list */
.faq-cat{margin-bottom:40px;scroll-margin-top:130px}
.faq-cat-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.faq-cat-icon{
  width:42px;height:42px;border-radius:12px;
  background:linear-gradient(135deg,var(--brand),var(--brand-dark));
  color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.faq-cat-icon svg{width:22px;height:22px}
.faq-cat h2{font-size:clamp(22px,2.8vw,30px);margin:0}
.faq-cat-count{font-size:13px;color:var(--muted);font-weight:500;margin-left:auto}

/* Studio tabs */
.faq-studios{padding:24px 0 56px}
.faq-studios-head{text-align:center;max-width:720px;margin:0 auto 28px}
.faq-studios-head h2{margin-bottom:12px}
.faq-studios-head p{color:var(--ink-3);margin:0}
.fst-tabs{
  display:flex;gap:6px;padding:6px;background:#fff;border:1px solid var(--border);
  border-radius:var(--r-lg);max-width:600px;margin:0 auto 24px;overflow-x:auto;scrollbar-width:none;
}
.fst-tabs::-webkit-scrollbar{display:none}
.fst-tab{
  flex:1;min-width:fit-content;padding:12px 18px;border-radius:var(--r-md);
  border:none;background:transparent;font-size:13px;font-weight:600;color:var(--ink-3);
  cursor:pointer;transition:all .2s;white-space:nowrap;font-family:inherit;
}
.fst-tab:hover{color:var(--brand-dark)}
.fst-tab.is-active{background:var(--brand);color:#fff;box-shadow:0 2px 8px rgba(130,85,70,.28)}
.fst-tab-city{display:block;font-size:11px;font-weight:500;opacity:.85;margin-top:1px}
.fst-panel{display:none;animation:fadeIn .3s var(--ease)}
.fst-panel.is-active{display:grid;grid-template-columns:1fr 1.2fr;gap:24px;align-items:start}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fst-info{padding:24px;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg)}
.fst-info h3{font-size:20px;margin:0 0 8px}
.fst-info .fst-sub{color:var(--ink-3);font-size:14px;margin-bottom:16px}
.fst-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;font-size:14px;color:var(--ink-3)}
.fst-row svg{width:18px;height:18px;color:var(--brand);flex-shrink:0;margin-top:2px}
.fst-row strong{color:var(--brand-dark);font-weight:600;display:block}
.fst-row a{color:var(--brand-dark)}
.fst-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.fst-actions .btn{padding:10px 16px;font-size:13px}
.fst-map-wrap{min-height:360px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border)}
.fst-map-wrap iframe{width:100%;height:100%;min-height:360px;border:0;display:block}

/* Responsive */
@media (max-width:820px){
  .faq-hero{padding:14px 0 64px}
  .faq-author-card{grid-template-columns:1fr;gap:20px;padding:24px;text-align:center}
  .fac-photos{justify-content:center}
  .fac-credentials{justify-content:center}
  .fac-links{justify-content:center}
  .fst-panel.is-active{grid-template-columns:1fr}
  .fst-map-wrap{min-height:280px}
  .fst-map-wrap iframe{min-height:280px}
  .faq-cat-nav{top:56px}
  .faq-cat h2{font-size:22px}
}

/* Suche: verstecktes Item */
.faq-item[hidden]{display:none}
.faq-cat[hidden]{display:none}

/* ───────── Language Switcher (i18n) ───────── */
.lang-switch{position:relative;display:inline-block;margin-right:10px}
.lang-switch-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--ink-3);font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;line-height:1}
.lang-switch-btn:hover{border-color:var(--brand);color:var(--brand);box-shadow:0 4px 12px -6px rgba(130,85,70,.22)}
.lang-switch-btn svg:last-of-type{width:11px;height:11px;transition:transform .25s ease;opacity:.6}
.lang-switch.open .lang-switch-btn svg:last-of-type{transform:rotate(180deg)}
.lang-flag{width:20px;height:14px;border-radius:2px;display:inline-block;vertical-align:middle;box-shadow:0 0 0 1px rgba(0,0,0,.08);object-fit:cover;flex-shrink:0}
.lang-switch-menu .lang-flag{width:22px;height:16px}
.lang-switch-btn.loading::after{display:none}
.lang-code{font-weight:600;letter-spacing:.04em}
.lang-switch-menu{display:none;position:absolute;top:calc(100% + 8px);right:0;min-width:170px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 20px 50px -15px rgba(60,40,25,.28),0 6px 14px -8px rgba(60,40,25,.15);list-style:none;padding:6px;margin:0;z-index:101}
.lang-switch.open .lang-switch-menu{display:block;animation:langSwitchIn .18s ease-out}
.lang-switch-menu li{margin:0}
.lang-switch-menu button{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;background:none;border:none;cursor:pointer;text-align:left;border-radius:8px;color:var(--ink);font-size:14px;font-family:inherit;font-weight:500;transition:background .15s ease,color .15s ease}
.lang-switch-menu button:hover{background:var(--cream-3);color:var(--brand)}
.lang-switch-menu button[aria-current="true"]{background:rgba(130,85,70,.08);color:var(--brand)}
@keyframes plxSpin{to{transform:rotate(360deg)}}
@keyframes langSwitchIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
/* Below 1024px: burger appears, push switcher right next to it */
@media (max-width:1023.98px){
  .lang-switch{margin:0 8px 0 auto}
  .lang-switch-btn{padding:7px 9px;font-size:12.5px}
  .lang-code{display:none}
  .lang-switch-menu{left:auto;right:0;min-width:160px;max-width:calc(100vw - 32px)}
}
/* RTL adjustments for Arabic */
html.lang-rtl{direction:rtl}
html.lang-rtl .lang-switch{margin-right:0;margin-left:10px}
html.lang-rtl .lang-switch-menu{right:auto;left:0}
@media (max-width:1023.98px){
  html.lang-rtl .lang-switch{margin:0 auto 0 8px}
  html.lang-rtl .lang-switch-menu{left:0;right:auto}
}
html.lang-rtl .lang-switch-menu{right:auto;left:0;text-align:right}
html.lang-rtl .lang-switch-menu button{text-align:right}
html.lang-rtl .nav-links{flex-direction:row-reverse}
html.lang-rtl body{text-align:right}

/* Language suggestion toast */
.lang-toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,40px);display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px 14px;box-shadow:0 24px 50px -16px rgba(60,40,25,.32),0 6px 16px -10px rgba(60,40,25,.18);z-index:200;font-size:14px;color:var(--ink-3);opacity:0;transition:transform .25s ease,opacity .25s ease;max-width:calc(100vw - 32px)}
.lang-toast.show{opacity:1;transform:translate(-50%,0)}
.lang-toast .lang-flag{width:22px;height:16px}
.lang-toast-msg{font-weight:500}
.lang-toast-yes{background:var(--brand);color:#fff;border:none;padding:8px 14px;border-radius:8px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer}
.lang-toast-yes:hover{background:var(--brand-dark)}
.lang-toast-no{background:none;border:none;font-size:20px;color:var(--stone-2);cursor:pointer;padding:0 4px;line-height:1}
.lang-toast-no:hover{color:var(--ink)}
@media(max-width:480px){
  .lang-toast{flex-wrap:wrap;justify-content:center;text-align:center}
  .lang-toast-msg{flex-basis:100%;order:1}
  .lang-toast .lang-flag{order:2}
  .lang-toast-yes{order:3}
  .lang-toast-no{order:4}
}

/* Ergebnisgarantie-Sternchen-Verweis auf AGB */
sup .erg-ref,a.erg-ref{color:inherit;text-decoration:none;opacity:.85;font-weight:600;padding:0 1px}
sup .erg-ref:hover,a.erg-ref:hover{opacity:1;text-decoration:underline}