/* ── VARIABLES ── */
:root {
  --primary:   #62564C;
  --secondary: #8D8078;
  --accent:    #B4ADA3;
  --bg:        #FAF9F6;
  --border:    #D4CEC9;
  --greige:    #E8E4E0;
  --text:      #222222;
  --muted:     #6B6158;
  --light:     #FAF9F6;
  --nav-warm:  rgba(98,86,76,0.96);
  --fd: 'Cormorant Garamond', Georgia, serif;
  --fb: 'Lato', system-ui, sans-serif;
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{font-family:var(--fb);color:var(--text);line-height:1.85;font-weight:300;font-size:18px;overflow-x:hidden;max-width:100vw;}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}

/* ── GLOBAL BG ── */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* Fallback für ältere Browser */
  height: 100lvh; /* <-- HIER DIE ÄNDERUNG: lvh statt dvh */
  z-index: -1;
  background-image: url('/images/Mitual-Background.webp');
  background-size: 480px auto;
  background-repeat: repeat;
  background-position: center center;
  background-color: #FAF9F6;
  transform: translateZ(0); /* <-- NEU: Erzwingt Hardwarebeschleunigung für butterweiches Scrollen */
  will-change: transform; 
}

.bg-light  { background: rgba(250,249,246,0.70); }
.bg-white  { background: rgba(255,255,255,0.76); }
.bg-greige { background: rgba(232,228,224,0.70); }
.bg-dark   { background: rgba(74,63,55,0.85);    }
.bg-primary{ background: rgba(98,86,76,0.85);    }

.container{max-width:1400px;margin:0 auto;padding:0 2.5rem;}

/* ── BUTTONS ── */
.btn-primary{display:inline-flex;align-items:center;gap:.5rem;background:var(--primary);color:var(--light);font-weight:400;font-size:.88rem;letter-spacing:.1em;text-transform:uppercase;padding:.85rem 2rem;border-radius:2px;transition:background .2s,transform .1s;font-family:var(--fb);}
.btn-primary:hover{background:#4A3F37;transform:translateY(-1px);}
.btn-secondary{display:inline-flex;align-items:center;gap:.5rem;background:transparent;color:var(--primary);border:1.5px solid var(--primary);font-weight:400;font-size:.88rem;letter-spacing:.1em;text-transform:uppercase;padding:.85rem 2rem;border-radius:2px;transition:all .2s;font-family:var(--fb);}
.btn-secondary:hover{background:var(--primary);color:var(--light);transform:translateY(-1px);}
.btn-light{display:inline-flex;align-items:center;gap:.5rem;background:var(--light);color:var(--primary);font-size:.88rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:.85rem 2rem;border-radius:2px;transition:all .2s;font-family:var(--fb);}
.btn-light:hover{background:#fff;transform:translateY(-1px);}
.btn-ghost{display:inline-flex;align-items:center;gap:.5rem;background:transparent;color:var(--light);border:1.5px solid rgba(250,249,246,.55);font-size:.88rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;padding:.85rem 2rem;border-radius:2px;transition:all .2s;font-family:var(--fb);}
.btn-ghost:hover{border-color:var(--light);background:rgba(250,249,246,.12);}

/* ── NAV ── */
nav {
  position: fixed;top:0;left:0;right:0;z-index:200;
  background: var(--nav-warm);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.2);
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
nav.scrolled {
  background: rgba(250,249,246,.97);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 20px rgba(98,86,76,.12);
}
nav:not(.scrolled) .nav-links a { color: rgba(250,249,246,.9) !important; }
nav:not(.scrolled) .nav-links a:hover { color: #fff !important; }
nav:not(.scrolled) .nav-logo img { filter: brightness(0) invert(1); }
nav:not(.scrolled) .nav-icon { color: rgba(250,249,246,.85) !important; }
nav:not(.scrolled) .nav-icon:hover { color: #fff !important; }
nav:not(.scrolled) .nav-cta { background: rgba(250,249,246,.15) !important; color: #fff !important; border: 1.5px solid rgba(250,249,246,.5) !important; }
nav:not(.scrolled) .nav-cta:hover { background: rgba(250,249,246,.28) !important; border-color: #fff !important; }
nav:not(.scrolled) .hamburger span { background: #FAF9F6; }
nav.scrolled .nav-logo img { filter: none; }
nav.scrolled .nav-links a { color: #333; }
nav.scrolled .nav-icon { color: var(--secondary); }

.nav-inner { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 3rem; height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.nav-links-wrap { flex: 1; display: flex; justify-content: center; }
.nav-logo { display:flex; align-items:center; }
.nav-logo img { height:40px;width:auto;display:block; }
.nav-links { display:flex;align-items:center;gap:2rem;list-style:none; justify-content: center; }
.nav-links a { font-size:.75rem;letter-spacing:.1em;text-transform:uppercase; color:#222;font-weight:400;transition:color .2s;white-space:nowrap; }
.nav-links a:hover { color:var(--primary); }

/* Dropdown unter "Angebot" für die zwei dedizierten Behandlungsseiten */
.nav-links li.has-dropdown { position: relative; }
.nav-links li.has-dropdown > a::after { content:'▾'; margin-left:.35rem; font-size:.6rem; opacity:.65; display:inline-block; }
.nav-dropdown {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(4px);
  background: rgba(250,249,246,.98); border: 1px solid var(--border); border-radius: 4px;
  box-shadow: 0 8px 24px rgba(98,86,76,.16); padding: .4rem; min-width: 230px;
  display: flex; flex-direction: column; gap: .1rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 50;
}
.nav-links li.has-dropdown:hover .nav-dropdown,
.nav-links li.has-dropdown:focus-within .nav-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav-dropdown a { color:#333 !important; text-transform:none; letter-spacing:normal; font-size:.85rem; font-weight:400; padding:.6rem .9rem; border-radius:3px; white-space:nowrap; transition:background .15s,color .15s; }
.nav-dropdown a:hover { background: var(--greige); color: var(--primary) !important; }
nav:not(.scrolled) .nav-dropdown a,
nav.scrolled .nav-dropdown a { color:#333 !important; }
nav:not(.scrolled) .nav-dropdown a:hover,
nav.scrolled .nav-dropdown a:hover { color: var(--primary) !important; }
.nav-right { display:flex;align-items:center;gap:.75rem; justify-content: flex-end; }
.nav-icon { display:flex;align-items:center;justify-content:center; width:44px;height:44px; color:var(--primary); transition:color .2s, transform .15s; }
.nav-icon:hover{color:#3a302a;transform:scale(1.1);}
.nav-icon svg{width:20px;height:20px;}
.nav-cta { display:inline-flex;align-items:center;gap:.4rem; background:var(--primary);color:var(--light); font-size:.75rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase; padding:.6rem 1.4rem;border-radius:2px; transition:background .2s;white-space:nowrap;font-family:var(--fb); }
.nav-cta:hover{background:#4A3F37;}

/* ── HERO ── */
.hero { min-height:100vh; min-height:100dvh; display:flex;flex-direction:column;justify-content:center; padding-top:68px; position:relative; }
.hero::before { content:'';position:absolute;inset:0; background: rgba(250,249,246,0.60); z-index:0;pointer-events:none; }
.hero-content { position:relative;z-index:1; width:100%; max-width:1400px; margin:0 auto; padding:5rem 2.5rem 4rem; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.hero-eyebrow{font-family:var(--fb);font-size:.85rem;letter-spacing:.22em;text-transform:uppercase;color:var(--secondary);margin-bottom:2rem;font-weight:400;text-align:center;width:100%;}
.hero-welcome{font-family:var(--fd);font-style:italic;font-size:1.3rem;color:var(--muted);letter-spacing:.01em;text-align:center;width:100%;margin-bottom:.9rem;font-weight:300;line-height:1.3;}
.hero-title{font-family:var(--fd);font-size:clamp(2.8rem,5.5vw,5.25rem);font-weight:300;line-height:1.15;color:#222;margin-bottom:1.5rem;text-align:center;width:100%;}
.hero-title .hero-eyebrow{display:block;}
.hero-title em,.hero-title .accent{font-style:italic;color:#62564C;}
.hero-sub{font-family:var(--fb);font-size:1.25rem;color:#555;line-height:1.7;max-width:560px;margin:.25rem auto 2.5rem;font-weight:300;letter-spacing:.05em;text-align:center;}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;}
.hero-scroll{
  position:absolute;bottom:1.25rem;left:50%;transform:translateX(-50%);
  z-index:2;display:flex;flex-direction:column;align-items:center;gap:.6rem;
  padding:.85rem 1rem .6rem;color:var(--primary);text-decoration:none;
  min-width:44px;min-height:44px;cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:rgba(98,86,76,.15);
  transition:opacity .4s ease,transform .4s ease;
}
.hero-scroll.is-hidden{opacity:0;pointer-events:none;transform:translate(-50%,10px);}
.scroll-line{
  width:1px;height:34px;
  background:linear-gradient(to bottom,rgba(98,86,76,.55),rgba(98,86,76,0));
  animation:pulse 2.4s ease-in-out infinite;
}
.scroll-chevron{
  display:block;width:14px;height:14px;color:var(--primary);
  animation:bounce 2.4s ease-in-out infinite;
}
.scroll-chevron svg{width:100%;height:100%;display:block;}
@keyframes pulse{0%,100%{opacity:.35;}50%{opacity:.9;}}
@keyframes bounce{
  0%,100%{transform:translateY(0);opacity:.55;}
  50%{transform:translateY(5px);opacity:1;}
}
@media (hover: hover){
  .hero-scroll:hover .scroll-chevron{color:#4A3F37;}
  .hero-scroll:hover .scroll-line{background:linear-gradient(to bottom,rgba(74,63,55,.8),rgba(74,63,55,0));}
}
@media (max-height:640px){
  .hero-scroll{bottom:.75rem;gap:.35rem;}
  .scroll-line{height:24px;}
}

/* ── SECTION BASE ── */
section{padding:5.5rem 0;}
section[id]{scroll-margin-top:80px;}
.s-eyebrow{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--secondary);margin-bottom:.75rem;font-weight:400;}
.s-title{font-family:var(--fd);font-size:clamp(2.1rem,3.5vw,3rem);font-weight:400;color:var(--primary);line-height:1.2;margin-bottom:1.25rem;}
.s-title::after{content:'';display:block;width:2.5rem;height:1.5px;background:var(--secondary);margin-top:.85rem;}
.s-title.c::after{margin:.85rem auto 0;}
.s-lead{font-size:1.15rem;color:var(--muted);line-height:1.85;font-weight:300;}

.bg-light .s-title,.bg-white .s-title,.bg-greige .s-title{color:var(--primary);}
.bg-light .s-lead,.bg-white .s-lead,.bg-greige .s-lead{color:var(--muted);}
.bg-dark .s-title,.bg-primary .s-title{color:var(--light);}
.bg-dark .s-title::after,.bg-primary .s-title::after{background:rgba(250,249,246,.35);}
.bg-dark .s-eyebrow,.bg-primary .s-eyebrow{color:rgba(250,249,246,.78);}
.bg-dark .s-lead,.bg-primary .s-lead{color:rgba(250,249,246,.75);}

.divider{display:flex;align-items:center;gap:1.5rem;color:var(--accent);margin:2.5rem auto;max-width:260px;font-family:var(--fd);font-size:1.1rem;}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border);}

/* ── UNTERSEITEN: Page-Hero, Breadcrumb, Kontraindikationen ── */
.page-hero{padding:9rem 0 3rem;background:rgba(232,228,224,.70);text-align:center;}
.page-hero .breadcrumb{font-family:var(--fb);font-size:.8rem;color:var(--muted);margin-bottom:1.25rem;letter-spacing:.03em;}
.page-hero .breadcrumb a{color:var(--primary);text-decoration:underline;text-decoration-color:rgba(98,86,76,.35);text-underline-offset:3px;}
.page-hero .breadcrumb a:hover{text-decoration-color:var(--primary);}
.page-hero h1{font-family:var(--fd);font-size:clamp(2.2rem,4.5vw,3.4rem);font-weight:300;color:#222;line-height:1.2;margin-bottom:1rem;max-width:820px;margin-left:auto;margin-right:auto;}
.page-hero h1 .accent{font-style:italic;color:var(--primary);}
.page-hero p.lead{font-family:var(--fb);font-size:1.1rem;color:var(--muted);max-width:640px;margin:0 auto;font-weight:300;line-height:1.7;}
@media (max-width:600px){
  .page-hero{padding:6.5rem 0 2.25rem;}
}

.contra-list{list-style:none;}
.contra-list li{position:relative;padding-left:1.5rem;margin-bottom:.85rem;color:#444;font-weight:300;line-height:1.7;font-size:1.02rem;}
.contra-list li::before{content:'–';position:absolute;left:0;color:var(--secondary);font-weight:500;}

.related-link{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.5rem;font-family:var(--fb);font-size:.92rem;color:var(--primary);text-decoration:underline;text-decoration-color:rgba(98,86,76,.35);text-underline-offset:3px;}
.related-link:hover{text-decoration-color:var(--primary);}

.page-cross-links{display:flex;gap:1.5rem;flex-wrap:wrap;justify-content:center;margin-top:1rem;}

/* Einheitliche schmale Content-Spalte für die Behandlungs-Unterseiten
   (ersetzt verstreute Inline-max-width-Werte — ein Wert, überall gleich) */
.page-section-narrow{max-width:820px;margin:0 auto;}

/* Die Behandlungs-Unterseiten haben kein Akkordeon (das gibt's seit dem Umbau
   auf eigene Seiten gar nicht mehr) — process-list/anti-list Items sollen dort
   sofort sichtbar sein statt auf ein data-open zu warten */
main.page-content .process-list li,
main.page-content .anti-list li {
  opacity: 1;
  transform: none;
}

/* ── BRANDS ── */
.brands-inner { display:grid; grid-template-columns:repeat(4, 1fr); align-items:center; justify-items:center; gap:2rem; padding:2.5rem 0; max-width:1000px; margin:0 auto; }
.brand-img { width:100%; max-width:170px; height:60px; object-fit:contain; object-position:center; opacity:.75; filter:grayscale(.25); transition:opacity .25s, filter .25s; }
.brand-img:hover { opacity:1; filter:grayscale(0); }

/* ── ANGEBOT ── */
.angebot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-bottom:3rem;justify-items:center;}
.acard{background:rgba(255,255,255,.9);border:1px solid var(--border);border-radius:4px;padding:2rem 1.75rem;position:relative;overflow:hidden;box-shadow:0 2px 8px rgba(98,86,76,.06);transition:box-shadow .25s,transform .2s;width:100%;text-align:center;}
.acard::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .3s;}
.acard:hover::before{transform:scaleX(1);}
.acard:hover{box-shadow:0 8px 24px rgba(98,86,76,.13);transform:translateY(-3px);}
.acard-title{font-family:var(--fd);font-size:1.3rem;font-weight:500;color:#1a1a1a;min-height:3.5rem;display:flex;align-items:flex-end;justify-content:center;margin-bottom:1.25rem;padding-bottom:.9rem;border-bottom:1px solid var(--border);}
.alist{list-style:none;}
.alist li{font-size:1.05rem;color:#222;padding:.3rem 0;font-weight:300;justify-content:center;}
.alist a{color:var(--primary);font-weight:400;border-bottom:1px solid var(--border);transition:border-color .2s;}
.alist a:hover{border-color:var(--primary);}

/* ── ACCORDIONS ── */
.anti-toggle-wrap {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  padding: .75rem 0; cursor: pointer; text-align: center; position: relative;
}
.anti-toggle-btn {
  flex-shrink: 0; background: #62564C; color: #FAF9F6; border: none; border-radius: 2px;
  width: 2.5rem; height: 2.5rem; font-size: 1.4rem; font-weight: 300; cursor: pointer;
  transition: background .2s; display: flex; align-items: center; justify-content: center;
  line-height: 1; padding: 0;
}

.tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 3.5rem; }
.tech-card { background: rgba(255,255,255,0.6); border: 1px solid var(--border); padding: 2.5rem 2rem; text-align: center; border-radius: 4px; transition: transform .3s, background .3s; }
.tech-card:hover { transform: translateY(-5px); background: rgba(255,255,255,0.9); }
.tech-num { font-family: var(--fd); font-size: 2.5rem; color: var(--accent); line-height: 1; margin-bottom: 1rem; font-style: italic; }
.tech-title { font-family: var(--fd); font-size: 1.5rem; color: var(--primary); margin-bottom: .25rem; font-weight: 500; }
.tech-sub { font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; color: var(--secondary); margin-bottom: 1rem; }
.tech-desc { font-size: 1.05rem; color: #444; line-height: 1.8; font-weight: 300; }

.anti-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; margin-top: 1rem; text-align: left; }
.anti-list { list-style: none; }
.anti-list li { position: relative; padding-left: 1.5rem; margin-bottom: 1rem; color: #444; font-weight: 300; line-height: 1.8; font-size: 1.05rem; }
.anti-list li::before { content: '✦'; position: absolute; left: 0; color: var(--accent); font-size: .9rem; top: 2px; }
.anti-list strong { color: var(--primary); font-weight: 500; }

.process-list { list-style: none; display: flex; flex-direction: column; gap: 1.25rem; }
.process-list li { display: flex; gap: 1rem; align-items: flex-start; }
.process-list span { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: var(--primary); color: #fff; border-radius: 50%; font-family: var(--fb); font-size: 1rem; font-weight: 500; flex-shrink: 0; line-height: 1; }
.process-list div { color: #444; font-weight: 300; line-height: 1.6; font-size: 1.05rem; }
.process-list strong { color: var(--primary); font-weight: 500; display: block; margin-bottom: .2rem; }

/* ── ÜBER MICH ── */
.ueber-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:5rem;align-items:start;}
.ueber-photo{width:100%;border-radius:4px;box-shadow:0 8px 32px rgba(98,86,76,.15);}
.ueber-creds{display:flex;flex-direction:column;gap:.75rem;margin-top:1.5rem;}
.ueber-text blockquote{border-left:2px solid var(--border);padding-left:1.5rem;margin:1.5rem 0;font-family:var(--fd);font-style:italic;font-size:1.15rem;color:var(--muted);font-weight:300;line-height:1.8;}
.ueber-text p{color:#222;font-weight:300;line-height:1.9;margin-bottom:1.1rem;font-size:1.1rem;}

/* ── SLIDER & ARROWS ── */
.slider-wrapper { position: relative; width: 100%; max-width: 100%; }
.nav-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  width: 48px; height: 48px; border: 1.5px solid var(--border); background: rgba(255,255,255,0.95);
  border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--primary); transition: all .2s; box-shadow: 0 4px 12px rgba(98,86,76,0.12);
}
.nav-arrow:hover { background: var(--primary); border-color: var(--primary); color: var(--light); }
.nav-arrow.prev { left: -28px; }
.nav-arrow.next { right: -28px; }
.nav-arrow svg { width: 22px; height: 22px; }
.nav-arrow:disabled { opacity: .35; cursor: default; pointer-events: none; }

.bg-primary .nav-arrow { background: rgba(98,86,76,0.95); border-color: rgba(250,249,246,0.25); color: rgba(250,249,246,0.9); box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
.bg-primary .nav-arrow:hover { background: rgba(250,249,246,0.15); border-color: #FAF9F6; color: #FAF9F6; }

/* Impressionen Setup */
.gallery-slider{overflow:hidden;border-radius:4px;max-width:100%;}
.gallery-track{display:flex;gap:.75rem;transition:transform .5s cubic-bezier(.4,0,.2,1);}
.gallery-slide{aspect-ratio:4/3;overflow:hidden;border-radius:3px;flex-shrink:0;}
.gallery-slide img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;}
.gallery-slide:hover img{transform:scale(1.04);}
.gallery-dots{display:flex;gap:0;align-items:center;justify-content:center;margin-top:1.5rem;}
.gallery-dot{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;padding:0;flex-shrink:0;}
.gallery-dot::before{content:'';display:block;width:7px;height:7px;border-radius:50%;background:var(--border);transition:all .3s cubic-bezier(.4,0,.2,1);}
.gallery-dot.active::before{background:var(--primary);width:22px;border-radius:4px;}
.gallery-cta{text-align:center;margin-top:2.5rem;padding-top:2rem;border-top:1px solid rgba(98,86,76,.15);}
.gallery-cta p{font-family:var(--fd);font-style:italic;font-size:1.15rem;color:var(--muted);font-weight:300;margin-bottom:1.5rem;}

/* Reviews Setup */
.reviews-header{text-align:center;margin-bottom:3rem;}
.reviews-carousel{overflow:hidden;position:relative;width:100%;}
/* .reviews-track entfernt (12.07.2026): Element hat id=reviewsTrack, Styles kommen inline + aus JS — Selektor griff nie */

/* "mehr/weniger"-Toggle in Review-Karten — Styles zentral statt inline,
   mit vergroessertem Tap-Target (>=44px) ohne visuellen Layout-Shift (12.07.2026) */
.rtext-toggle{
  background:none;border:none;
  color:rgba(250,249,246,.55);
  font-family:var(--fd);font-style:italic;font-size:1rem;
  cursor:pointer;text-decoration:underline;
  padding:.7rem .55rem;margin:-.7rem -.55rem;
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(250,249,246,.12);
}
.rtext-toggle:hover{color:rgba(250,249,246,.85);}

/* Kachel */
.rcard{
  flex-shrink:0;
  box-sizing:border-box;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(250,249,246,.1);
  border-radius:8px;
  padding:2.5rem 2.25rem 2rem;
  display:flex;
  flex-direction:column;
}
/* Dekoratives öffnendes Anführungszeichen */
.rquote{
  font-family:Georgia,serif;
  font-size:4.5rem;
  line-height:.6;
  color:rgba(212,184,150,.35);
  margin-bottom:1.25rem;
  flex-shrink:0;
  user-select:none;
}
.rtext{
  font-family:var(--fd);
  font-size:1.08rem;
  font-style:italic;
  font-weight:300;
  line-height:1.85;
  color:rgba(250,249,246,.82);
  flex:1;
  margin-bottom:1.75rem;
}

.rauthor-wrap{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin-top:auto;
  padding-top:1.25rem;
  border-top:1px solid rgba(250,249,246,.08);
}
.rauthor-dot{
  width:6px;height:6px;border-radius:50%;
  background:#D4B896;flex-shrink:0;opacity:.7;
}
.rauthor{
  font-size:.77rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:rgba(250,249,246,.38);
}

/* Dots */
.reviews-dots{display:flex;gap:0;align-items:center;justify-content:center;margin-top:1.75rem;}
.rdot{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;padding:0;flex-shrink:0;}
.rdot::before{content:'';display:block;width:7px;height:7px;border-radius:50%;background:rgba(250,249,246,.22);transition:all .3s cubic-bezier(.4,0,.2,1);}
.rdot.active::before{background:rgba(250,249,246,.8);width:22px;border-radius:4px;}

.review-write-link{display:inline-flex;align-items:center;gap:.5rem;margin-top:2rem;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(250,249,246,.78);border-bottom:1px solid rgba(250,249,246,.3);padding-bottom:1px;transition:color .2s;}
.review-write-link:hover{color:rgba(250,249,246,.9);}

/* ── INFOS ── */
.infos-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4rem;}
.info-title{font-family:var(--fd);font-size:1.35rem;font-weight:400;color:var(--primary);margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:1px solid var(--border);}
.info-list{list-style:none;}
.info-list li{font-size:1.05rem;font-weight:300;line-height:1.9;color:#444;display:flex;align-items:flex-start;gap:.6rem;margin-bottom:.25rem;}
.info-list li svg{width:15px;height:15px;flex-shrink:0;margin-top:.3rem;color:var(--secondary);}
.info-list a{color:var(--primary);}
.info-list a:hover{text-decoration:underline;}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem;}
.chip{background:rgba(250,249,246,.9);border:1px solid var(--border);color:#444;font-size:.73rem;padding:.3rem .8rem;border-radius:3px;font-weight:400;}

/* ── STATS BAR ── */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; align-items: center; justify-items: center; }
.stat-item { display: flex; align-items: center; gap: 1rem; text-align: left; }
.stat-num { font-family: var(--fb); font-size: 3.5rem; font-weight: 500; color: #fff; line-height: 1; }
.stat-text { font-size: 1rem; color: rgba(250,249,246,.75); line-height: 1.3; }

/* ── ANREISE ── */
.anreise-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:4rem;align-items:start;}
.anreise-row{display:flex;gap:.75rem;align-items:flex-start;margin-bottom:1.25rem;}
.anreise-row svg{width:18px;height:18px;flex-shrink:0;color:var(--secondary);margin-top:.2rem;}
.anreise-row-text{font-size:1.05rem;color:#444;font-weight:300;line-height:1.8;}
.anreise-row-text strong{color:#333;font-weight:400;display:block;margin-bottom:.2rem;}
.map-wrap{border-radius:4px;overflow:hidden;border:1px solid var(--border);box-shadow:0 4px 16px rgba(98,86,76,.1);height:400px;}
.map-wrap iframe{width:100%;height:100%;border:none;display:block;}

/* ── FAQ ── */
.faq-item{background:rgba(255,255,255,.92);border:1px solid var(--border);border-radius:4px;position:relative;overflow:hidden;transition:box-shadow .25s,border-color .25s;}
.faq-item::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .3s;}
.faq-item[open]::before,.faq-item:hover::before{transform:scaleX(1);}
.faq-item[open]{box-shadow:0 4px 18px rgba(98,86,76,.10);border-color:var(--accent);}
.faq-item summary{list-style:none;cursor:pointer;padding:1.15rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;font-family:var(--fb);font-size:1rem;font-weight:400;color:#222;line-height:1.45;transition:color .2s;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::marker{display:none;content:'';}
.faq-item summary:hover{color:var(--primary);}
.faq-item summary:focus-visible{outline:2px solid var(--primary);outline-offset:-2px;border-radius:4px;}
.faq-icon{font-family:var(--fd);font-size:1.6rem;font-weight:300;color:var(--primary);line-height:1;flex-shrink:0;transition:transform .25s ease;display:inline-block;width:1.1rem;text-align:center;}
.faq-item[open] .faq-icon{transform:rotate(45deg);}
.faq-body{padding:0 1.5rem 1.3rem;color:#555;font-size:.95rem;font-weight:300;line-height:1.75;}
.faq-body p{margin:0;}
.faq-body a{color:var(--primary);text-decoration:underline;text-decoration-color:rgba(98,86,76,.35);text-underline-offset:3px;transition:text-decoration-color .2s;}
.faq-body a:hover{text-decoration-color:var(--primary);}

/* FAQ als offene Karten (statt Akkordeon) — für Unterseiten mit nur 2 Fragen,
   damit der Inhalt sofort sichtbar ist statt in Klick-Häppchen zu verschwinden. Mobile-first. */
.faq-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-top:2rem;}
@media (min-width:700px){
  .faq-grid{grid-template-columns:1fr 1fr;gap:1.75rem;}
}
.faq-card{background:rgba(255,255,255,.95);border:1px solid var(--border);border-radius:4px;padding:2rem 2rem 2.15rem;position:relative;overflow:hidden;text-align:left;box-shadow:0 2px 14px rgba(98,86,76,.05);transition:box-shadow .3s ease,border-color .3s ease;}
.faq-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.22,.7,.28,1);}
.faq-card:hover::before{transform:scaleX(1);}
.faq-card:hover{box-shadow:0 12px 30px rgba(98,86,76,.13);border-color:transparent;}
.faq-q{display:flex;align-items:flex-start;gap:.85rem;font-family:var(--fb);font-size:1.05rem;font-weight:500;color:var(--primary);line-height:1.45;margin-bottom:1.1rem;padding-bottom:1.1rem;border-bottom:1px solid var(--border);}
.faq-q-mark{font-family:var(--fd);font-size:2.1rem;font-style:italic;font-weight:500;color:var(--secondary);line-height:.85;flex-shrink:0;margin-top:-.1rem;}
.faq-a{color:var(--muted);font-size:.96rem;font-weight:300;line-height:1.8;margin:0;}

/* ── CTA ── */
.cta-box{max-width:820px;margin:0 auto;border-radius:4px;padding:5rem 4rem;text-align:center;position:relative;overflow:hidden;box-shadow:0 8px 32px rgba(74,63,55,.25);}
.cta-box .s-title{color:var(--light);}
.cta-box .s-title::after{background:rgba(250,249,246,.3);}
.cta-box .s-eyebrow{color:rgba(250,249,246,.75);}
.cta-sub{font-size:1rem;color:rgba(250,249,246,.72);font-weight:300;line-height:1.8;margin-bottom:2.5rem;}

/* ── FOOTER ── */
footer{padding:4rem 0 2rem;}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:3rem;padding-bottom:3rem;border-bottom:1px solid rgba(250,249,246,.12);}
.footer-logo{height:auto;width:auto;max-width:190px;opacity:1;filter:brightness(0) invert(1);margin-bottom:.9rem;display:block;}
.footer-claim{font-family:var(--fb);font-style:normal;font-size:1.05rem;letter-spacing:.05em;color:rgba(250,249,246,.88);font-weight:300;line-height:1.6;margin-bottom:1.5rem;}
.footer-col-title{font-size:.88rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(250,249,246,.88);font-weight:500;margin-bottom:1.4rem;}
.footer-links{list-style:none;}
.footer-links li{margin-bottom:.55rem;}
.footer-links a{font-size:.95rem;color:rgba(250,249,246,.88);transition:color .2s;font-weight:300;}
.footer-links a:hover{color:var(--light);}
.footer-contact-row{display:flex;align-items:flex-start;gap:.6rem;font-size:.95rem;color:rgba(250,249,246,.88);margin-bottom:.65rem;font-weight:300;line-height:1.6;}
.footer-contact-row svg{width:14px;height:14px;flex-shrink:0;opacity:.55;margin-top:.28rem;}
.footer-contact-row a{color:rgba(250,249,246,.88);}
.footer-contact-row a:hover{color:var(--light);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding-top:2rem;}
.footer-copy{font-size:.75rem;color:rgba(250,249,246,.72);}
.footer-legal{display:flex;gap:1.5rem;list-style:none;}
.footer-legal a{font-size:.75rem;color:rgba(250,249,246,.72);}
.footer-legal a:hover{color:rgba(250,249,246,.65);}

/* SCROLL TOP */
#scrolltop{position:fixed !important;bottom:2rem !important;right:2rem !important;z-index:9999 !important;width:48px;height:48px;background:#62564C;color:#FAF9F6;border:none;border-radius:2px;cursor:pointer;display:flex !important;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(98,86,76,.3);transition:opacity .3s,transform .3s;}
#scrolltop:hover{background:#4A3F37;}
#scrolltop svg{width:18px;height:18px;}

/* ── MOBILE MENU & HAMBURGER (BASE) ── */
#mobile-menu {
  display: none; position: fixed; inset: 0; z-index: 150;
  background: rgba(250,249,246,.98); backdrop-filter: blur(12px);
  flex-direction: column; align-items: center; justify-content: center; gap: 0;
  padding: 1.5rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: max(1.5rem, env(safe-area-inset-top));
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}
#mobile-menu.open { display: flex !important; }
@media (min-width: 961px) {
  #mobile-menu, #mobile-menu.open { display: none !important; }
}
#mobile-menu a {
  font-size: .85rem; font-weight: 400; letter-spacing: .05em; text-transform: uppercase;
  color: #222; padding: .4rem 0; width: 100%; text-align: center;
  border-bottom: 1px solid var(--border); font-family: var(--fb); transition: color .2s;
}
#mobile-menu a:first-child { border-top: 1px solid var(--border); }
#mobile-menu a:hover { color: var(--primary); }
#mobile-menu a.mob-sub { padding: .3rem 0 .3rem 2rem; font-size: .68rem; color: var(--muted); border-top: none; }
#mobile-menu .mob-cta {
  margin-top: .8rem; background: var(--primary); color: #FAF9F6 !important;
  border: none !important; border-radius: 2px; padding: .65rem 1.75rem !important;
  font-size: .75rem !important;
}

.hamburger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 36px; height: 36px; cursor: pointer; background: none; border: none; padding: 4px;
  position: relative; z-index: 9999;
}
.hamburger span {
  display: block; height: 2px; background: #333; border-radius: 2px;
  transition: all .3s; transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── SCROLL REVEAL (nur mit JS aktiv) ── */
html.has-js .rv{
  opacity:0;transform:translateY(18px);
  transition:opacity .75s ease, transform .75s cubic-bezier(.22,.7,.28,1), box-shadow .25s ease, background .3s ease, background-color .3s ease, border-color .25s ease, color .2s ease;
  will-change:opacity, transform;
}
html.has-js .rv.is-visible{opacity:1;transform:none;}
/* Stagger: 80ms pro Kind */
html.has-js .rv-stagger > .rv:nth-child(1){transition-delay:0ms;}
html.has-js .rv-stagger > .rv:nth-child(2){transition-delay:80ms;}
html.has-js .rv-stagger > .rv:nth-child(3){transition-delay:160ms;}
html.has-js .rv-stagger > .rv:nth-child(4){transition-delay:240ms;}
html.has-js .rv-stagger > .rv:nth-child(5){transition-delay:320ms;}
html.has-js .rv-stagger > .rv:nth-child(6){transition-delay:400ms;}
html.has-js .rv-stagger > .rv:nth-child(n+7){transition-delay:480ms;}

/* ── HERO INITIAL FADE-IN (beim Page-Load) ── */
/* WICHTIG: .hero-title NICHT mit opacity-Animation — sonst blockiert es LCP (Largest Contentful Paint).
   Es bekommt nur einen sanften Slide-In via transform — sofort sichtbar, sanft platziert. */
html.has-js .hero-eyebrow,
html.has-js .hero-welcome,
html.has-js .hero-sub,
html.has-js .hero-actions{
  opacity:0;transform:translateY(12px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.22,.7,.28,1);
}
html.has-js .hero-title{
  transform:translateY(12px);
  transition:transform .9s cubic-bezier(.22,.7,.28,1);
}
html.has-js.hero-ready .hero-eyebrow  {opacity:1;transform:none;transition-delay:.05s;}
html.has-js.hero-ready .hero-welcome  {opacity:1;transform:none;transition-delay:.18s;}
html.has-js.hero-ready .hero-title    {transform:none;transition-delay:.30s;}
html.has-js.hero-ready .hero-sub      {opacity:1;transform:none;transition-delay:.48s;}
html.has-js.hero-ready .hero-actions  {opacity:1;transform:none;transition-delay:.62s;}
/* Hero-Scroll separat: behält translateX(-50%) Zentrierung in allen States */
html.has-js .hero-scroll{
  opacity:0;transform:translate(-50%, 12px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.22,.7,.28,1);
}
html.has-js.hero-ready .hero-scroll{opacity:1;transform:translate(-50%, 0);transition-delay:.85s;}

/* ── MICRO-INTERACTIONS ── */
/* Brand-Logos mit kleinem Lift */
@media (hover: hover){
  .brand-img{transition:opacity .25s ease, filter .25s ease, transform .25s ease;}
  .brand-img:hover{transform:translateY(-2px);}
}
/* Footer-Links mit animierter Underline */
.footer-links a{position:relative;display:inline-block;padding-bottom:2px;}
.footer-links a::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:rgba(250,249,246,.55);transform:scaleX(0);transform-origin:right;
  transition:transform .35s cubic-bezier(.22,.7,.28,1);
}
@media (hover: hover){
  .footer-links a:hover::after{transform:scaleX(1);transform-origin:left;}
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce){
  html.has-js .rv,
  html.has-js.hero-ready .hero-eyebrow,
  html.has-js.hero-ready .hero-welcome,
  html.has-js.hero-ready .hero-title,
  html.has-js.hero-ready .hero-sub,
  html.has-js.hero-ready .hero-actions{opacity:1;transform:none;transition:none;}
  html.has-js .hero-scroll,
  html.has-js.hero-ready .hero-scroll{opacity:1;transform:translate(-50%, 0);transition:none;}
  .scroll-chevron,.scroll-line{animation:none;}
  /* Ken Burns + Logo-Puls bei reduzierter Bewegung komplett aus (12.07.2026) */
  .gallery-slide img{animation:none;}
  .brand-img{animation:none;}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ── RESPONSIVE ── */
@media(max-width: 960px) {
  .nav-inner { padding: 0 1.5rem; }
  .nav-links-wrap, .nav-right .nav-icon, .nav-right .nav-cta { display:none; }
  .hamburger { display:flex !important; } 
  .hero-content { grid-template-columns:1fr; }
  .hero-visual { display:none; }
  .angebot-grid { grid-template-columns: 1fr 1fr; }
  .angebot-strip { grid-template-columns: 1fr !important; }
  .angebot-strip a:first-child { border-right: none !important; border-bottom: 1px solid var(--border); }
  .tech-grid { grid-template-columns: 1fr; }
  .anti-details-grid { grid-template-columns: 1fr; gap: 3rem; }
  .ueber-grid { grid-template-columns: 1fr; }
  .infos-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .anreise-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .cta-box { padding: 3rem 1.5rem; }
}

@media(max-width: 700px) {
  .stats-grid { grid-template-columns: 1fr 1fr; row-gap: 2.5rem; column-gap: 1rem; }
  .stat-item { flex-direction: column; text-align: center; gap: 0.5rem; }
  .stat-text { text-align: center; }
}

@media(max-width: 600px) {
  .container { padding: 0 1.5rem; }
  .hero-eyebrow { font-size: .9rem; }
  .hero-welcome { font-size: 1.3rem; }
  .hero-sub { font-size: 1.15rem; }
  .brands-inner { grid-template-columns: 1fr 1fr; gap: 2.5rem 1.5rem; }
  .brand-img { max-width: 140px; height: 50px; }
  .anti-toggle-wrap { flex-direction: row; justify-content: center; gap: 1rem; padding-left: 3.5rem; padding-right: 3.5rem; }
  .anti-toggle-wrap .s-title { text-align: center; font-size: 1.8rem; }
  .anti-toggle-wrap .s-title.c::after { margin: .85rem auto 0; }
  .anti-toggle-btn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
  .angebot-grid { grid-template-columns: 1fr; }
  .nav-arrow { width: 40px; height: 40px; }
  .nav-arrow svg { width: 18px; height: 18px; }
  .nav-arrow.prev { left: -12px; }
  .nav-arrow.next { right: -12px; }
  .infos-grid { text-align: center; }
  .info-list li { flex-direction: column; align-items: center; text-align: center; gap: 0.2rem; margin-bottom: 1rem; }
  .info-list li svg { margin-top: 0; margin-bottom: 0.3rem; }
  .chips { justify-content: center; }
  .anreise-grid { text-align: center; }
  .anreise-row { flex-direction: column; align-items: center; text-align: center; }
  .anreise-row svg { margin-top: 0; margin-bottom: 0.5rem; }
  .footer-top { grid-template-columns: 1fr !important; gap: 2rem; text-align: center; }
  .footer-logo { margin: 0 auto 0.9rem; }
  .footer-contact-row { flex-direction: column; align-items: center !important; text-align: center; gap: 0.2rem; margin-bottom: 1.2rem; }
  .footer-contact-row svg { margin-top: 0; margin-bottom: 0.3rem; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 1rem; }
  .footer-legal { justify-content: center; width: 100%; }
  .s-title { font-size: 2rem; }
}

/* ─────────────────────────────────────────────────────────
   MOBILE & TABLET POLISH v2
   Schliesst die Lücke zwischen 600–960px (klassisches Tablet)
   und feintunt die kleinen Mobile-Sachen.
   ───────────────────────────────────────────────────────── */

/* TABLET — 820px und darunter:
   Schon hier alles zentrieren statt erst bei 600px.
   Damit fällt der Tablet-Bereich (iPad portrait, kleine Notebooks im Split-View, 
   grosse Phones im Landscape) nicht mehr durchs Raster. */
@media (max-width: 820px) {
  /* Infos: Inhalt mittig setzen (Grid ist ab 960px schon 1fr) */
  .infos-grid { text-align: center; }
  .infos-grid > div { display: flex; flex-direction: column; align-items: center; }
  .info-title { width: 100%; max-width: 340px; }
  .info-list { width: 100%; max-width: 340px; }
  .info-list li { flex-direction: column; align-items: center; text-align: center; gap: 0.25rem; margin-bottom: 0.9rem; }
  .info-list li svg { margin-top: 0; margin-bottom: 0.25rem; }
  .chips { justify-content: center; }

  /* Anreise: ebenfalls zentrieren */
  .anreise-grid { text-align: center; }
  .anreise-grid > .rv:first-child { display: flex; flex-direction: column; align-items: center; }
  .anreise-row { flex-direction: column; align-items: center; text-align: center; max-width: 420px; margin-left: auto; margin-right: auto; }
  .anreise-row svg { margin-top: 0; margin-bottom: 0.5rem; }

  /* Stats: hier schon 2x2 statt erst ab 700px — wirkt aufgeräumter auf Tablet */
  .stats-grid { grid-template-columns: 1fr 1fr; row-gap: 2.5rem; column-gap: 1.5rem; }
  .stat-item { flex-direction: column; text-align: center; gap: 0.5rem; }
  .stat-text { text-align: center; }
  .stat-num { font-size: 3rem; }

  /* Footer: hier schon 1-spaltig + zentriert, statt 1fr 1fr (drei Inhalte in zwei Spalten) */
  .footer-top { grid-template-columns: 1fr !important; gap: 2.5rem; text-align: center; }
  .footer-top > div { display: flex; flex-direction: column; align-items: center; }
  .footer-logo { margin: 0 auto 0.9rem; }
  .footer-claim { max-width: 340px; }
  .footer-links { width: 100%; max-width: 340px; }
  .footer-contact-row { flex-direction: column; align-items: center !important; text-align: center; gap: 0.2rem; margin-bottom: 1.2rem; }
  .footer-contact-row svg { margin-top: 0; margin-bottom: 0.3rem; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 1rem; padding-top: 2rem; }
  .footer-legal { justify-content: center; width: 100%; }

  /* Map noch passend hoch lassen, aber nicht endlos */
  .map-wrap { height: 340px; }
}

/* TABLET-spezifische Detail-Verfeinerungen */
@media (max-width: 820px) and (min-width: 601px) {
  /* Anti-Age Akkordeon: tech-grid noch 2 Spalten lassen für ausgewogenes Bild */
  .tech-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .tech-grid .tech-card:nth-child(3) { grid-column: 1 / -1; max-width: 50%; margin: 0 auto; }
  /* Aber Needling hat nur 3 Karten — single span 1/-1 zentriert die letzte */
  
  /* Angebot-Strip: 2 Spalten reichen */
  .angebot-strip { grid-template-columns: 1fr !important; }
  .angebot-strip a:first-child { border-right: none !important; border-bottom: 1px solid var(--border); }

  /* Reviews-Card padding knapper */
}

/* MOBILE — Feintuning 600px und darunter */
@media (max-width: 600px) {
  /* Section-padding etwas zurücknehmen */
  section { padding: 4rem 0; }

  /* Hero: Padding zurücknehmen, Title-Spacing sauber */
  .hero-content { padding: 4rem 1.5rem 4rem; }
  .hero-eyebrow { margin-bottom: 1.25rem; letter-spacing: .18em; }
  .hero-welcome { margin-bottom: .6rem; }
  .hero-title { margin-bottom: 1.25rem; }
  .hero-sub { margin-bottom: 2rem; }
  .hero-actions { gap: .75rem; flex-direction: column; align-items: center; width: 100%; }
  .hero-actions .btn-primary,
  .hero-actions .btn-secondary { width: 100%; max-width: 320px; justify-content: center; }

  /* Stats-num auf Mobile etwas kleiner — wirkt sonst überladen */
  .stat-num { font-size: 2.75rem; }

  /* CTA-Box: padding sauberer */
  .cta-box { padding: 2.75rem 1.5rem; }
  .cta-actions .btn-primary,
  .cta-actions .btn-ghost { min-width: 0 !important; width: 100%; max-width: 320px; }

  /* Angebot-Cards: nicht zu breit auf Mobile, sonst Listen flattern auseinander */
  .acard { padding: 1.75rem 1.5rem; }
  .acard-title { min-height: 0; font-size: 1.25rem; }

  /* Tech-Cards (im Akkordeon) etwas kompakter */
  .tech-card { padding: 2rem 1.5rem; }

  /* Anti-Details: nicht doppelt gross — einspaltig macht das Akkordeon lesbar */
  .anti-details-grid { gap: 2.5rem; }

  /* Reviews: padding knapper */
  .rcard { padding: 1.75rem 1.5rem 1.5rem; min-height: 0; }
  .rtext { font-size: 1rem; -webkit-line-clamp: 8; }

  /* Slider auf Mobile: Pfeile links/rechts neben den Dots, unterhalb des Sliders.
     slider-wrapper bekommt Platz für Pfeil-Zeile (56px) */
  .slider-wrapper { padding-bottom: 3.25rem; }
  .nav-arrow {
    width: 40px; height: 40px;
    top: auto; bottom: 0; transform: none;
  }
  .nav-arrow.prev { left: 1rem; }
  .nav-arrow.next { right: 1rem; }
  .nav-arrow svg { width: 16px; height: 16px; }

  /* Gallery gap auf Mobile: muss mit JS GAP=6 übereinstimmen */
  .gallery-track { gap: 6px; }
  /* Footer-Logo nicht zu gross auf kleinen Screens */
  .footer-logo { max-width: 160px; }

  /* Brands: Logos nicht zu wuchtig */
  .brand-img { height: 44px; }

  /* Map-Wrap auf Mobile niedriger — verschwendet sonst Scroll */
  .map-wrap { height: 280px; }

  /* Anreise-Row icons grösse fix (inline-styles im HTML überschreiben) */
  .anreise-row svg[style] { width: 22px !important; height: 22px !important; }
}

/* EXTRA-SMALL — 380px und darunter (z.B. iPhone SE 1.Gen, Galaxy Fold front) */
@media (max-width: 380px) {
  .container { padding: 0 1.25rem; }
  .hero-title { font-size: 2.4rem; }
  .s-title { font-size: 1.8rem; }
  .stat-num { font-size: 2.4rem; }
  .brand-img { height: 38px; max-width: 110px; }
  .brands-inner { gap: 2rem 1rem; }
  .faq-item summary { padding: 1rem 1.2rem; font-size: .95rem; gap: .75rem; }
  .faq-body { padding: 0 1.2rem 1.1rem; font-size: .92rem; }
  .faq-icon { font-size: 1.4rem; }
}

/* LANDSCAPE PHONES — niedrige Höhe, breit:
   verhindert dass der Hero alles wegfrisst */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: 0; padding: 6rem 0 3rem; }
  .hero-content { padding: 1rem 2rem; }
  .hero-scroll { display: none; }
}

/* ─────────────────────────────────────────────────────────
   ACCESSIBILITY POLISH
   ───────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 2px;
}
nav:not(.scrolled) :focus-visible {
  outline-color: var(--light);
}
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-light:focus-visible,
.btn-ghost:focus-visible,
.nav-cta:focus-visible {
  outline-offset: 4px;
}

/* ─────────────────────────────────────────────────────────
   ANIMATION LAYER v2
   Alle Animationen respektieren prefers-reduced-motion
   über die globale Regel am Style-Anfang.
   Nur transform/opacity/filter — GPU-freundlich.
   ───────────────────────────────────────────────────────── */

/* (1) KEN BURNS auf Galerie-Bilder
   Langsamer Zoom auf jedes Bild, versetzt pro Slide damit nicht alles synchron läuft.
   Hover ersetzt den scale-Zoom durch ein leichtes Highlight (filter), 
   damit Ken Burns nicht gestört wird. */
.gallery-slide img {
  animation: kenBurns 22s ease-in-out infinite alternate;
  /* Standard pausiert — JS setzt .is-visible nur auf die aktuell sichtbaren Slides.
     Spart Compositor-Layer/Akku auf Mobile (12.07.2026). will-change entfernt:
     laufende Animation promotet selbst, pausierte sollen keinen Layer halten. */
  animation-play-state: paused;
}
.gallery-slide.is-visible img {
  animation-play-state: running;
}
.gallery-slide:nth-child(2n) img  { animation-delay: -7s;  }
.gallery-slide:nth-child(3n) img  { animation-delay: -14s; }
.gallery-slide:nth-child(5n) img  { animation-delay: -4s;  }
.gallery-slide:nth-child(7n) img  { animation-delay: -11s; }
@keyframes kenBurns {
  from { transform: scale(1.04) translate3d(0.5%, 0.5%, 0); }
  to   { transform: scale(1.10) translate3d(-1%, -0.5%, 0); }
}
/* Hover: Ken Burns weiterlaufen lassen, nur Helligkeit boosten */
@media (hover: hover) {
  .gallery-slide:hover img { 
    filter: brightness(1.06);
    /* alten scale-hover-override neutralisieren */
    transform: scale(1.10);
  }
}

/* (2) BRAND-LOGOS "atmen"
   Sehr langsamer Scale-Pulse, versetzt pro Logo.
   Hover pausiert + macht klassischen Lift. */
.brand-img {
  animation: brandBreath 9s ease-in-out infinite;
  will-change: transform;
}
.brand-img:nth-child(1) { animation-delay: 0s;    }
.brand-img:nth-child(2) { animation-delay: -2.25s; }
.brand-img:nth-child(3) { animation-delay: -4.5s;  }
.brand-img:nth-child(4) { animation-delay: -6.75s; }
@keyframes brandBreath {
  0%, 100% { transform: scale(1)     translateY(0); }
  50%      { transform: scale(1.018) translateY(0); }
}
@media (hover: hover) {
  .brand-img:hover {
    animation-play-state: paused;
    transform: translateY(-3px) scale(1.04);
  }
}

/* (3) Reviews cards auf dunklem Hintergrund */

/* (4) MAGNETIC-HOVER entfernt */

/* (6) REVEAL-BASIS für process-list/anti-list Items.
   Auf den Behandlungs-Unterseiten sofort sichtbar via .page-content-Override (siehe oben). */
.process-list li,
.anti-list li {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,.7,.28,1);
}

/* (7) SCROLL-INDICATOR-BAR oben
   Dünne 2-px-Linie, wächst mit Scroll-Fortschritt.
   Sichtbar erst wenn man scrolled hat (sonst eh 0%). */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--primary), var(--accent));
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 250;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  will-change: transform;
}
.scroll-progress.is-on {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
}

/* ── HERO RATING + USPs (v2026-06-11) ── */
.hero-rating{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  margin:0 0 1.2rem;font-family:var(--fb);
}
.hero-stars{color:#C9A961;font-size:1rem;letter-spacing:.15em;}
.hero-rating-text{font-size:.82rem;color:var(--muted);font-weight:400;}
.hero-usps{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.5rem .65rem;margin:.5rem 0 2rem;
}
.hero-usp{
  display:inline-flex;align-items:center;gap:.4rem;
  background:rgba(255,255,255,.65);border:1px solid var(--border);
  border-radius:999px;padding:.35rem .8rem;
  font-size:.78rem;color:var(--primary);font-weight:400;
  letter-spacing:.02em;
}
.hero-usp svg{width:12px;height:12px;color:var(--secondary);flex-shrink:0;}
@media (max-width:600px){
  .hero-usp{font-size:.72rem;padding:.3rem .65rem;}
  .hero-rating-text{font-size:.75rem;}
}

/* ── ZERTIFIKAT-PILLS (Hover via CSS, nicht inline) ── */
.cert-pill{
  display:inline-flex;align-items:center;gap:.6rem;
  background:rgba(255,255,255,.9);border:1px solid var(--border);
  border-radius:999px;padding:.55rem 1.1rem;
  font-size:.82rem;color:#333;font-weight:400;
  transition:background .2s,color .2s,border-color .2s;
  box-shadow:0 1px 4px rgba(98,86,76,.08);
}
.cert-pill:hover{
  background:var(--primary);color:#FAF9F6;border-color:var(--primary);
}
.cert-pill svg{flex-shrink:0;}


/* ── STICKY MOBILE-CTA-BAR ── */
.mob-bar{
  position:fixed;left:0;right:0;bottom:0;
  display:none;z-index:1500;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--border);
  padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
  gap:.5rem;
}
.mob-bar a{
  flex:1;display:inline-flex;align-items:center;justify-content:center;
  gap:.4rem;padding:.7rem .5rem;
  font-size:.85rem;font-weight:500;letter-spacing:.02em;
  border-radius:2px;text-decoration:none;
  transition:opacity .2s;
}
.mob-bar a:active{opacity:.7;}
.mob-bar .mob-bar-primary{
  background:var(--primary);color:#FAF9F6;
}
.mob-bar .mob-bar-secondary{
  background:transparent;color:var(--primary);
  border:1px solid var(--border);
}
.mob-bar svg{width:14px;height:14px;flex-shrink:0;}
@media (max-width:768px){
  .mob-bar{display:flex;}
  body{padding-bottom:64px;}
  #scrolltop{bottom:78px !important;}
}

/* ── Angebot-Box Buttons (Hover via CSS) ── */
.angebot-pdf-btn{transition:background .2s;}
.angebot-pdf-btn:hover{background:#E8E4E0 !important;}
.angebot-cta-btn{transition:background .2s;}
.angebot-cta-btn:hover{background:#4A3F37 !important;}

/* ── REVIEWS-RATING-ANKER (auf bg-primary / Taupe) ── */
.reviews-rating{
  display:flex;align-items:center;justify-content:center;
  gap:.55rem;flex-wrap:wrap;
  margin:.4rem 0 0;font-family:var(--fb);
}
.reviews-stars{
  color:#E0C589;font-size:1.05rem;letter-spacing:.18em;
  line-height:1;
}
.reviews-rating-text{
  font-size:.85rem;color:rgba(250,249,246,.85);font-weight:400;
  letter-spacing:.02em;
}
.reviews-rating-text a{
  color:inherit;border-bottom:1px solid rgba(250,249,246,.25);
  padding-bottom:1px;transition:border-color .2s;
}
.reviews-rating-text a:hover{border-bottom-color:rgba(250,249,246,.7);}
@media (max-width:600px){
  .reviews-stars{font-size:.95rem;}
  .reviews-rating-text{font-size:.78rem;}
}