/* =========================================================
   SCHÜTT HAND IN HAND SERVICE
   Premium · Liquid Glass · Bremen
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* Brand — abgestimmt auf das Schütt Hand in Hand Logo (Petrol-Teal) */
  --ink-900:#0d2f3c;
  --ink-800:#16475a;
  --ink-700:#1f5468;
  --ink-600:#356d82;
  --ink-500:#5a8fa3;
  --ink-400:#8aafc0;
  --ink-300:#b9cfd9;
  --ink-200:#d9e5eb;
  --ink-100:#eef4f7;
  --ink-50:#f7fafb;

  --aqua-700:#1a7a96;
  --aqua-600:#2b96b3;
  --aqua-500:#4cb3cf;
  --aqua-400:#8fd2e3;
  --aqua-300:#c3e6ee;
  --aqua-100:#eaf6fa;

  --gold-700:#a16207;
  --gold-600:#ca8a04;
  --gold-500:#eab308;
  --gold-400:#facc15;
  --gold-300:#fde047;
  --gold-100:#fef3c7;

  --paper:#fbfdfe;
  --paper-warm:#fefcf8;

  /* System */
  --radius-sm:10px;
  --radius:18px;
  --radius-lg:28px;
  --radius-xl:36px;

  --shadow-sm: 0 1px 2px rgba(10,37,64,.04), 0 2px 6px rgba(10,37,64,.06);
  --shadow:    0 4px 14px rgba(10,37,64,.06), 0 18px 40px -12px rgba(10,37,64,.18);
  --shadow-lg: 0 10px 30px rgba(10,37,64,.08), 0 40px 80px -20px rgba(10,37,64,.22);
  --shadow-glow: 0 0 0 1px rgba(10,138,170,.18), 0 20px 60px -20px rgba(8,166,201,.5);

  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  --container: 1200px;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Inter','SF Pro Text',system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.6;
  color:var(--ink-800);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:0;background:transparent;color:inherit}
a{color:inherit;text-decoration:none;transition:color .2s var(--ease-soft)}
a:hover{color:var(--aqua-700)}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-family:'Playfair Display',serif;font-weight:500;letter-spacing:-.01em}
p{margin:0}
input,select,textarea{font-family:inherit;font-size:1rem;color:inherit}
em{font-style:italic;font-family:'Playfair Display',serif}

:focus-visible{
  outline:2px solid var(--aqua-600);
  outline-offset:3px;
  border-radius:6px;
}

::selection{background:var(--ink-800);color:#fff}

/* ---------- 3. Layout helpers ---------- */
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}
@media(min-width:768px){.container{padding:0 40px}}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:'Inter',sans-serif;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-600);
}
.eyebrow .dot{
  width:8px;height:8px;border-radius:50%;
  background:linear-gradient(135deg,var(--aqua-500),var(--aqua-700));
  box-shadow:0 0 0 4px rgba(34,194,227,.15);
}
.eyebrow--center{justify-content:center}

.section-head{
  text-align:center;
  max-width:760px;
  margin:0 auto 64px;
}
.section-title{
  font-size:clamp(2rem, 5vw + 1rem, 3.75rem);
  line-height:1.05;
  margin:18px 0 18px;
  color:var(--ink-900);
}
.section-title em{color:var(--ink-700)}
.section-title--light{color:#fff}
.section-title--light em{
  background:linear-gradient(120deg,#7ee0f2 0%,#fff 60%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-style:italic;
}
.section-lede{
  font-size:clamp(1rem, .5vw + .9rem, 1.125rem);
  color:var(--ink-600);
  max-width:60ch;
  margin:0 auto;
}
.section-lede--light{color:rgba(255,255,255,.78)}

/* ---------- 4. Buttons ---------- */
.btn{
  --bg:var(--ink-800);
  --fg:#fff;
  --bd:transparent;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 22px;
  border-radius:999px;
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.01em;
  background:var(--bg);
  color:var(--fg);
  border:1px solid var(--bd);
  cursor:pointer;
  transition: transform .25s var(--ease-out), box-shadow .3s var(--ease-out),
              background .3s var(--ease-soft), color .3s var(--ease-soft),
              border-color .3s var(--ease-soft);
  white-space:nowrap;
  overflow:hidden;
  isolation:isolate;
}
.btn::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-120%);
  transition:transform .9s var(--ease-out);
  pointer-events:none;
  z-index:1;
}
.btn:hover::after{transform:translateX(120%)}
.btn > *{position:relative;z-index:2}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--sm{padding:10px 16px;font-size:.85rem}
.btn--lg{padding:17px 28px;font-size:1rem}

.btn--primary{
  --bg:linear-gradient(135deg, #1a7a96 0%, #2b96b3 60%, #4cb3cf 100%);
  --fg:#ffffff;
  box-shadow:0 10px 28px -8px rgba(26,122,150,.55), inset 0 1px 0 rgba(255,255,255,.25);
  text-shadow:0 1px 2px rgba(0,0,0,.15);
}
.btn--primary:hover{
  box-shadow:0 16px 38px -10px rgba(26,122,150,.7), inset 0 1px 0 rgba(255,255,255,.3);
}

.btn--white{
  --bg:#fff; --fg:var(--ink-900);
  box-shadow:0 8px 28px -8px rgba(0,0,0,.25);
}
.btn--white:hover{--fg:var(--ink-800);box-shadow:0 14px 36px -10px rgba(0,0,0,.35)}

.btn--gold{
  --bg:linear-gradient(135deg,#b45309 0%,#ca8a04 50%,#eab308 100%);
  --fg:#fff;
  box-shadow:0 10px 30px -8px rgba(202,138,4,.6), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn--gold:hover{box-shadow:0 16px 40px -10px rgba(202,138,4,.75)}

.btn--ghost{
  --bg:transparent; --fg:#fff; --bd:rgba(255,255,255,.35);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.btn--ghost:hover{--bd:#fff; background:rgba(255,255,255,.08); color:#fff}

.btn--ghost-dark{
  --bg:transparent; --fg:var(--ink-800); --bd:var(--ink-200);
}
.btn--ghost-dark:hover{--bd:var(--ink-800); background:var(--ink-50); color:var(--ink-900)}

.btn--glass{
  --bg:rgba(255,255,255,.6);
  --fg:var(--ink-900);
  --bd:rgba(255,255,255,.7);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 10px 30px -10px rgba(10,37,64,.2);
}
.btn--glass:hover{--bg:rgba(255,255,255,.85)}

/* ---------- 5. Top bar & Nav ---------- */
.topbar{
  background:var(--ink-900);
  color:rgba(255,255,255,.78);
  font-size:.8rem;
  padding:8px 0;
}
.topbar__inner{
  display:flex; align-items:center; justify-content:flex-end; gap:18px; flex-wrap:wrap;
}
.topbar__item{display:inline-flex;align-items:center;gap:6px}
.topbar__link{color:rgba(255,255,255,.9);font-weight:500}
.topbar__link:hover{color:var(--aqua-400)}
.topbar__sep{color:rgba(255,255,255,.25)}
@media(max-width:640px){
  .topbar__inner{justify-content:center}
  .topbar__sep{display:none}
}

.nav{
  position:sticky; top:0; z-index:50;
  padding:14px 0;
  transition: background .35s var(--ease-soft), backdrop-filter .35s, box-shadow .35s, padding .3s;
  background:rgba(251,253,254,.6);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  padding:10px 0;
  background:rgba(251,253,254,.85);
  border-bottom-color:rgba(10,37,64,.08);
  box-shadow:0 6px 24px -12px rgba(10,37,64,.15);
}
.nav__inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
@media(max-width:520px){
  .nav__cta .btn--primary{display:none}
}
.brand{display:inline-flex;align-items:center;gap:12px;color:var(--ink-900);min-width:0}
.brand__fallback{display:inline-flex;align-items:center;gap:12px}
.brand__fallback[hidden]{display:none !important}
.brand__logo{
  display:block;
  height:42px;
  width:auto;
  max-width:100%;
  object-fit:contain;
  transition: transform .35s var(--ease-out);
}
.brand:hover .brand__logo{transform:scale(1.02)}
@media(max-width:520px){.brand__logo{height:36px}}

.brand--footer{align-items:center;gap:14px}
.brand__logo--footer{
  height:48px;
  background:#fff;
  padding:8px 14px;
  border-radius:14px;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.4);
}

.brand__mark{display:inline-flex;flex:none}
.brand__text{display:flex;flex-direction:column;line-height:1.15;min-width:0;white-space:nowrap}
.brand__name{
  font-family:'Playfair Display',serif;
  font-weight:600; font-size:1.05rem;
  letter-spacing:-.01em;
}
@media(min-width:768px){.brand__name{font-size:1.15rem}}
.brand__name em{font-style:italic;font-weight:500;color:var(--ink-700)}
.brand__sub{font-size:.68rem;color:var(--ink-500);letter-spacing:.08em;text-transform:uppercase;font-weight:500;overflow:hidden;text-overflow:ellipsis}
@media(max-width:480px){
  .brand__sub{display:none}
  .brand__name{font-size:1rem}
}
.brand__name--light{color:#fff}
.brand__name--light em{color:var(--aqua-300)}
.brand__sub--light{color:rgba(255,255,255,.65)}

.nav__links{display:none;gap:30px}
.nav__links a{
  font-size:.92rem;font-weight:500;color:var(--ink-700);
  position:relative;padding:6px 0;cursor:pointer;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px;
  height:2px; background:linear-gradient(90deg,var(--aqua-600),var(--aqua-400));
  transition:right .35s var(--ease-out);
}
.nav__links a:hover{color:var(--ink-900)}
.nav__links a:hover::after{right:0}
@media(min-width:1024px){.nav__links{display:flex}}

.nav__cta{display:flex;align-items:center;gap:10px}
.nav__cta .btn--ghost{display:none}
@media(min-width:768px){.nav__cta .btn--ghost{display:inline-flex;--fg:var(--ink-800);--bd:var(--ink-200)}}
.nav__cta .btn--ghost:hover{--bd:var(--ink-800);background:var(--ink-50)}

.nav__burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;border-radius:12px;
  background:var(--ink-50);border:1px solid var(--ink-200);
  cursor:pointer;
}
.nav__burger span{display:block;width:18px;height:2px;background:var(--ink-800);border-radius:1px;margin:0 auto;transition:transform .3s,opacity .2s}
.nav__burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger.is-open span:nth-child(2){opacity:0}
.nav__burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(min-width:1024px){.nav__burger{display:none}}

.mobile-menu{
  padding:20px 24px 30px;
  border-top:1px solid rgba(10,37,64,.08);
  background:rgba(251,253,254,.95);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  display:flex;flex-direction:column;gap:6px;
}
.mobile-menu[hidden]{display:none !important}
@media(min-width:1024px){.mobile-menu{display:none !important}}
.mobile-menu a{padding:14px 12px;border-radius:12px;font-weight:500;color:var(--ink-800);cursor:pointer}
.mobile-menu a:hover{background:var(--ink-50);color:var(--ink-900)}
.mobile-menu__cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}

/* ---------- 6. Hero ---------- */
.hero{
  position:relative;
  padding:60px 0 120px;
  overflow:hidden;
  isolation:isolate;
}
@media(min-width:1024px){.hero{padding:90px 0 160px;min-height:calc(100vh - 80px)}}

/* Sanfte Brücke vom Hero zur dunklen Reveal-Stage */
.hero::after{
  content:""; position:absolute;
  bottom:0; left:0; right:0; height:140px;
  background:linear-gradient(180deg,
    rgba(251,253,254,0) 0%,
    rgba(13,47,60,.04) 50%,
    rgba(13,47,60,.18) 100%);
  pointer-events:none;
  z-index:1;
}

.hero__bg{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(800px 500px at 75% 0%, rgba(143,210,227,.25), transparent 60%),
    linear-gradient(180deg, var(--aqua-100) 0%, var(--paper) 70%);
}
.hero__pane{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(10,37,64,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,37,64,.035) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse at 70% 30%, #000 20%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse at 70% 30%, #000 20%, transparent 70%);
  opacity:.5;
}
@keyframes floatY{
  0%,100%{transform:translateY(0) translateX(0)}
  50%{transform:translateY(40px) translateX(-30px)}
}

.hero__droplets{position:absolute;inset:0;pointer-events:none}
.hero__droplets span{
  position:absolute;
  top:-30px; left:var(--x);
  width:var(--s); height:var(--s);
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), rgba(126,224,242,.4) 60%, transparent 70%);
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  filter:blur(.4px);
  animation:fall 9s linear infinite;
  animation-delay:var(--d);
  opacity:0;
}
@keyframes fall{
  0%{transform:translateY(-10vh) rotate(-45deg);opacity:0}
  10%{opacity:.8}
  90%{opacity:.7}
  100%{transform:translateY(110vh) rotate(-45deg);opacity:0}
}

.hero__inner{
  position:relative;
  display:grid; grid-template-columns:1fr; gap:60px;
  align-items:center;
}
@media(min-width:1024px){.hero__inner{grid-template-columns:1.15fr .85fr;gap:80px}}

.hero__title{
  font-size:clamp(2.5rem, 5vw + 1.5rem, 5rem);
  line-height:1;
  letter-spacing:-.025em;
  color:var(--ink-900);
  margin:22px 0 24px;
  font-weight:600;
}
.hero__title em{
  background:linear-gradient(120deg,var(--aqua-700) 0%,var(--aqua-500) 60%,var(--ink-700) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-style:italic; font-weight:600;
}
.hero__kicker{
  font-size:1rem;
  color:var(--aqua-700);
  font-weight:500;
  letter-spacing:.01em;
  margin:0 0 14px;
}
.hero__kicker strong{color:var(--ink-900);font-weight:700}
@media(min-width:768px){.hero__kicker{font-size:1.1rem}}

.hero__lede{
  font-size:clamp(1.05rem, .5vw + .95rem, 1.25rem);
  color:var(--ink-600);
  max-width:56ch;
  line-height:1.65;
}
.hero__lede strong{color:var(--ink-800);font-weight:600}

.hero__cta{
  display:flex; flex-wrap:wrap; gap:14px;
  margin:34px 0 28px;
}

.hero__trust{
  display:flex; flex-wrap:wrap; gap:8px 22px;
  font-size:.92rem; color:var(--ink-600); font-weight:500;
}
.hero__trust li{display:inline-flex;align-items:center;gap:8px}
.hero__trust svg{color:var(--aqua-600)}

/* Hero visual: founder portrait — premium edition */
.hero__visual{
  position:relative;
  display:flex; justify-content:center; align-items:center;
  perspective:1400px;
}

.founder{
  position:relative;
  width:100%; max-width:460px;
  margin:0; padding:0;
  transform-style:preserve-3d;
  transition: transform .6s var(--ease-out);
  will-change: transform;
}
.founder__frame{
  position:relative;
  aspect-ratio:4/5;
  border-radius:var(--radius-xl);
  overflow:hidden;
  background:var(--ink-100);
  box-shadow:
    0 50px 100px -30px rgba(10,37,64,.55),
    0 20px 40px -15px rgba(8,166,201,.3),
    inset 0 0 0 1px rgba(255,255,255,.4);
  transform: translateZ(0);
}
/* Ken-Burns subtle zoom — wirkt cinematisch ohne aufdringlich zu sein */
.founder__img{
  position:absolute; inset:-4%;
  width:108%; height:108%;
  object-fit:cover;
  object-position:center 28%;
  display:block;
  animation: kenburns 22s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kenburns{
  0%   { transform: scale(1)    translate3d(0,    0,   0); }
  100% { transform: scale(1.08) translate3d(-1%, -2%, 0); }
}
.founder:hover .founder__img{animation-play-state:paused}

/* Premium glass-surface highlight */
.founder__frame::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.18) 0%, transparent 30%),
    linear-gradient(225deg, rgba(255,255,255,.08) 0%, transparent 35%);
  pointer-events:none; z-index:2;
  mix-blend-mode:overlay;
}

/* Signature shine — schwingt elegant über das Bild */
.founder__shine{
  position:absolute; inset:-10%;
  background:linear-gradient(115deg,
    transparent 38%,
    rgba(255,255,255,.08) 46%,
    rgba(255,255,255,.45) 50%,
    rgba(255,255,255,.08) 54%,
    transparent 62%);
  transform:translateX(-100%);
  animation: founderShine 9s ease-in-out 1.5s infinite;
  pointer-events:none;
  mix-blend-mode:overlay;
  z-index:3;
}
@keyframes founderShine{
  0%   { transform:translateX(-100%) }
  45%  { transform:translateX(140%) }
  100% { transform:translateX(140%) }
}

/* Reduced motion respect */
@media(prefers-reduced-motion: reduce){
  .founder__img{animation:none}
  .founder__shine{animation:none; opacity:0}
}

.founder__caption{
  position:absolute;
  left:-20px; bottom:24px;
  width:min(82%, 320px);
  padding:18px 20px 16px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,1);
  border-radius:var(--radius);
  box-shadow:0 24px 50px -18px rgba(10,37,64,.45);
  animation:floatY 9s ease-in-out infinite;
}
.founder__name{
  font-family:'Playfair Display', serif;
  font-size:1.15rem; font-weight:600; color:var(--ink-900);
  letter-spacing:-.005em; line-height:1.15;
}
.founder__role{
  font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--aqua-700); margin-top:2px;
}
.founder__quote{
  display:flex; align-items:flex-start; gap:8px;
  margin-top:10px; padding-top:10px;
  border-top:1px solid var(--ink-100);
  font-size:.85rem; color:var(--ink-700); line-height:1.45;
  font-style:italic;
}
.founder__quote svg{color:var(--aqua-500); flex:none; margin-top:3px; transform:rotate(180deg)}
@media(max-width:540px){
  .founder{max-width:340px}
  .founder__caption{left:auto; right:0; bottom:18px; width:min(88%, 280px)}
}
.glassframe{
  position:relative;
  width:100%; max-width:460px; aspect-ratio:4/5;
  perspective:1600px;
}
.glassframe__pane{
  position:absolute; inset:0;
  border-radius:var(--radius-xl);
  background:
    linear-gradient(135deg, rgba(255,255,255,.7) 0%, rgba(231,248,255,.4) 100%);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -40px 80px -20px rgba(126,224,242,.3),
    0 30px 80px -30px rgba(10,37,64,.5),
    0 12px 30px -10px rgba(8,166,201,.3);
  backdrop-filter:blur(12px) saturate(1.4);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);
  overflow:hidden;
  animation:tiltFrame 14s ease-in-out infinite;
  transform-style:preserve-3d;
}
@keyframes tiltFrame{
  0%,100%{transform:rotateY(-3deg) rotateX(2deg)}
  50%{transform:rotateY(3deg) rotateX(-2deg)}
}
.glassframe__reflect{
  position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.6) 48%, rgba(255,255,255,.9) 50%, rgba(255,255,255,.6) 52%, transparent 70%);
  transform:translateX(-100%);
  animation:reflectSweep 5s ease-in-out 1s infinite;
  mix-blend-mode:overlay;
}
@keyframes reflectSweep{
  0%{transform:translateX(-100%)}
  50%{transform:translateX(100%)}
  100%{transform:translateX(100%)}
}
.glassframe__cross{
  position:absolute; inset:0; display:grid; place-items:center;
}
.glassframe__cross span{
  position:absolute;
  background:rgba(255,255,255,.7);
  box-shadow:0 0 0 1px rgba(10,37,64,.06);
}
.glassframe__cross span:nth-child(1){width:100%;height:2px;top:50%;transform:translateY(-50%)}
.glassframe__cross span:nth-child(2){width:2px;height:100%;left:50%;transform:translateX(-50%)}

.glassframe__tag{
  position:absolute;
  left:-20px; bottom:30px;
  padding:16px 18px;
  width:min(280px, 80%);
  border-radius:var(--radius);
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,1);
  box-shadow:0 20px 50px -20px rgba(10,37,64,.4);
  animation:floatY 8s ease-in-out infinite;
}
.glassframe__tag-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.glassframe__dot{
  width:10px;height:10px;border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,.2);
  animation:pulse 2s ease-in-out infinite;
  flex:none;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 4px rgba(34,197,94,.2)}
  50%{box-shadow:0 0 0 8px rgba(34,197,94,0)}
}
.glassframe__tag-title{font-size:.92rem;font-weight:600;color:var(--ink-900);line-height:1.2}
.glassframe__tag-sub{font-size:.78rem;color:var(--ink-500);margin-top:2px}
.glassframe__bar{height:5px;background:var(--ink-100);border-radius:3px;overflow:hidden}
.glassframe__bar span{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--aqua-600),var(--aqua-400));
  border-radius:3px;
  animation:fillBar 3s var(--ease-out) infinite;
}
@keyframes fillBar{
  0%{width:0}
  60%{width:100%}
  100%{width:100%;opacity:0}
}

/* Google rating badge (statt generischem Eyebrow) */
.hero__rating{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(10,37,64,.08);
  box-shadow:0 6px 16px -8px rgba(10,37,64,.15);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-size:.82rem; color:var(--ink-700);
  transition: transform .25s var(--ease-out), box-shadow .3s, border-color .3s;
  cursor:pointer;
}
.hero__rating:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px -8px rgba(10,37,64,.22);
  border-color:var(--aqua-500);
  color:var(--ink-800);
}
.hero__rating-stars{
  display:inline-flex; gap:1px;
  color:#f59e0b;
}
.hero__rating-text strong{color:var(--ink-900); font-weight:600}

/* ---------- 6b. Smooth-Scroll Video Reveal ---------- */
.reveal-stage{
  position:relative;
  height:160vh;
  background:linear-gradient(180deg,
    var(--paper) 0%,
    rgba(13,47,60,.4) 18%,
    var(--ink-900) 45%);
}
@media(max-width:768px){.reveal-stage{height:140vh}}
.reveal-stage__sticky{
  position:sticky;
  top:0;
  height:100vh;
  width:100%;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:var(--ink-900);
}
.reveal-stage__frame{
  position:relative;
  width:60vw;
  aspect-ratio:21/9;
  border-radius:32px;
  overflow:hidden;
  box-shadow:
    0 60px 120px -30px rgba(0,0,0,.6),
    0 0 0 1px rgba(255,255,255,.08);
  will-change: width, border-radius, transform;
  transform: translateZ(0);
}
@media(max-width:768px){
  .reveal-stage__frame{ width:88vw; aspect-ratio:9/12; border-radius:24px; }
}

.reveal-stage__video{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

.reveal-stage__overlay{
  position:absolute;
  inset:0;
  display:grid;
  align-items:flex-end;
  padding:clamp(20px, 4vw, 56px);
  background:linear-gradient(180deg,
    rgba(6,24,43,0) 40%,
    rgba(6,24,43,.55) 80%,
    rgba(6,24,43,.85) 100%);
  pointer-events:none;
}
.reveal-stage__content{
  max-width:720px;
  opacity:0;
  transform:translateY(20px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal-stage__sticky.is-revealed .reveal-stage__content{
  opacity:1; transform:translateY(0);
}
.eyebrow--light{color:rgba(255,255,255,.85)}
.eyebrow--light .dot{box-shadow:0 0 0 4px rgba(126,224,242,.25)}

.reveal-stage__title{
  font-size:clamp(1.8rem, 2.4vw + 1rem, 3.4rem);
  font-weight:600;
  line-height:1.05;
  color:#fff;
  letter-spacing:-.02em;
  margin:14px 0 12px;
}
.reveal-stage__title em{
  background:linear-gradient(120deg,#8fd2e3 0%, #fff 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-style:italic;
}
.reveal-stage__lede{
  font-size:clamp(.95rem, .4vw + .85rem, 1.1rem);
  color:rgba(255,255,255,.78);
  max-width:55ch;
  line-height:1.6;
}

/* Modern: animation-timeline (Chrome/Edge 115+) — JS treibt es als Fallback */
@supports (animation-timeline: scroll()){
  .reveal-stage__frame{
    animation: revealFrame linear forwards;
    animation-timeline: view();
    animation-range: cover 0% cover 40%;
  }
  @keyframes revealFrame{
    to{
      width:100vw;
      aspect-ratio:auto;
      height:100vh;
      border-radius:0;
      box-shadow:0 0 0 0 transparent;
    }
  }
}

@media(prefers-reduced-motion: reduce){
  .reveal-stage{height:auto}
  .reveal-stage__sticky{position:relative;height:auto;padding:60px 0}
  .reveal-stage__frame{
    width:min(92vw, 1200px); aspect-ratio:21/9; border-radius:24px;
    animation:none !important;
  }
  .reveal-stage__content{opacity:1;transform:none}
}

/* ---------- 7. USP strip ---------- */
.usp{
  padding:50px 0;
  background:#fff;
  border-top:1px solid rgba(10,37,64,.06);
  border-bottom:1px solid rgba(10,37,64,.06);
}
.usp__grid{
  display:grid; grid-template-columns:1fr;
  gap:24px;
}
@media(min-width:640px){.usp__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.usp__grid{grid-template-columns:repeat(4,1fr);gap:32px}}

.usp__item{display:flex;gap:16px;align-items:flex-start}
.usp__icon{
  flex:none;
  width:46px;height:46px;border-radius:14px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--aqua-100),#fff);
  color:var(--aqua-700);
  border:1px solid var(--aqua-300);
  box-shadow:inset 0 1px 0 #fff, 0 6px 14px -6px rgba(8,166,201,.4);
}
.usp__icon--gold{
  background:linear-gradient(135deg,#fef3c7,#fff);
  color:var(--gold-700);
  border-color:var(--gold-300);
  box-shadow:inset 0 1px 0 #fff, 0 6px 14px -6px rgba(234,179,8,.5);
}
.usp__item h3{font-family:'Inter',sans-serif;font-size:1rem;font-weight:600;color:var(--ink-900);margin-bottom:4px;letter-spacing:-.005em}
.usp__item p{font-size:.92rem;color:var(--ink-600);line-height:1.5}

/* ---------- 8. Services ---------- */
.services{padding:100px 0;background:var(--paper)}
@media(min-width:1024px){.services{padding:130px 0}}

.services__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}
@media(min-width:640px){.services__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.services__grid{grid-template-columns:repeat(4,1fr);gap:28px}}

.service{
  background:#fff;
  border:1px solid rgba(10,37,64,.07);
  border-radius:var(--radius-lg);
  overflow:hidden;
  cursor:pointer;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s;
  position:relative;
}
.service::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, transparent 60%, rgba(34,194,227,.06) 100%);
  opacity:0; transition:opacity .4s;
}
.service:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  border-color:rgba(8,166,201,.25);
}
.service:hover::before{opacity:1}
.service__media{
  aspect-ratio:200/140;
  background:#dff6ff;
  overflow:hidden;
  position:relative;
}
.service__media--photo img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .9s var(--ease-out);
}
.service:hover .service__media--photo img{transform:scale(1.05)}
.service__shine{
  position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
  transform:translateX(-130%);
  transition:transform 1.2s var(--ease-out);
  pointer-events:none;
}
.service:hover .service__shine{transform:translateX(180%)}
.svc-shine{transform:translateX(-130%);transition:transform 1.2s var(--ease-out)}
.service:hover .svc-shine{transform:translateX(180%)}
.service__body{padding:24px 22px 26px;position:relative;z-index:1}
.service__body h3{
  font-family:'Inter',sans-serif;font-size:1.1rem;font-weight:600;
  color:var(--ink-900);margin-bottom:10px;letter-spacing:-.005em;
}
.service__body p{font-size:.92rem;color:var(--ink-600);line-height:1.55}
.service__list{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.service__list li{
  position:relative;padding-left:18px;
  font-size:.85rem;color:var(--ink-700);
}
.service__list li::before{
  content:""; position:absolute; left:0; top:9px;
  width:6px;height:6px;border-radius:50%;
  background:var(--aqua-500);
}

/* ---------- 9. Reinwasser ---------- */
.reinwasser{
  position:relative; padding:120px 0; color:#fff;
  background:radial-gradient(900px 600px at 80% 30%, #13345a 0%, transparent 60%),
             linear-gradient(180deg, #0a2540 0%, #06182b 100%);
  overflow:hidden;
}
.reinwasser__bg{position:absolute;inset:0;pointer-events:none}
.reinwasser__glow{
  position:absolute; width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, rgba(34,194,227,.3), transparent 60%);
  filter:blur(40px); top:-200px; right:-150px;
  animation:floatY 20s ease-in-out infinite;
}
.reinwasser__grid{
  position:relative;
  display:grid; grid-template-columns:1fr; gap:60px; align-items:center;
}
@media(min-width:1024px){.reinwasser__grid{grid-template-columns:1.05fr .95fr;gap:80px}}

.reinwasser__copy .eyebrow{color:rgba(255,255,255,.8)}
.reinwasser__features{
  display:flex; flex-direction:column; gap:22px;
  margin:30px 0 36px;
}
.reinwasser__features li{
  display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start;
  padding-bottom:22px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.reinwasser__features li:last-child{border-bottom:0;padding-bottom:0}
.feat__num{
  font-family:'Playfair Display',serif;
  font-size:1.6rem; font-style:italic; font-weight:500;
  color:var(--aqua-300);
  line-height:1; padding-top:2px;
}
.reinwasser__features strong{
  display:block; font-family:'Inter',sans-serif; font-size:1.05rem; font-weight:600;
  color:#fff; margin-bottom:4px;
}
.reinwasser__features p{font-size:.93rem; color:rgba(255,255,255,.7); line-height:1.55}

.reinwasser__visual{display:flex;justify-content:center}
.rw-card{
  position:relative;
  width:100%; max-width:420px;
  aspect-ratio:320/420;
  border-radius:var(--radius-xl);
  background:
    linear-gradient(135deg, rgba(126,224,242,.18) 0%, rgba(255,255,255,.08) 100%);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  overflow:hidden;
  box-shadow:0 50px 100px -20px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.2);
}
.rw-card__shine{
  position:absolute; inset:-10%;
  background:linear-gradient(120deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%);
  animation:shimmerSweep 7s ease-in-out infinite;
}
.rw-card__svg{position:absolute; inset:0; width:100%; height:100%}
.rw-brush{animation:brushMove 5s ease-in-out infinite;transform-origin:center;will-change:transform}
@keyframes brushMove{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(140px)}
}
.rw-drop{animation:dropFall 2s ease-in infinite;animation-delay:var(--dd,0s);opacity:0}
@keyframes dropFall{
  0%{transform:translateY(0);opacity:0}
  10%{opacity:.9}
  90%{opacity:.6}
  100%{transform:translateY(140px);opacity:0}
}
.rw-shine{animation:reflectSweep 6s ease-in-out 1s infinite}
.rw-card__badge{
  position:absolute; right:-12px; top:30px;
  padding:14px 18px;
  background:rgba(255,255,255,.96);
  color:var(--ink-900);
  border-radius:var(--radius);
  box-shadow:0 20px 50px -10px rgba(0,0,0,.4);
  display:flex; align-items:center; gap:12px;
  animation:floatY 7s ease-in-out infinite;
}
.rw-card__badge-dot{
  width:10px;height:10px;border-radius:50%;background:#22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,.2);
  animation:pulse 2s ease-in-out infinite;
}
.rw-card__badge strong{display:block;font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:600;line-height:1}
.rw-card__badge small{display:block;font-size:.72rem;color:var(--ink-500);margin-top:2px}

.reinwasser__cta{margin-top:8px}

/* ---------- 10. Rentner Angebot ---------- */
.rentner{padding:100px 0;background:var(--paper)}
@media(min-width:1024px){.rentner{padding:130px 0}}

.rentner__card{
  position:relative;
  display:grid; grid-template-columns:1fr; gap:0;
  background:
    radial-gradient(800px 400px at 100% 0%, rgba(254,243,199,.7), transparent 60%),
    linear-gradient(135deg, #fffbeb 0%, #fff 60%);
  border:1px solid var(--gold-300);
  border-radius:var(--radius-xl);
  overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(202,138,4,.35);
}
@media(min-width:1024px){.rentner__card{grid-template-columns:.85fr 1.15fr; gap:0}}

/* Visual: Photo + Badge */
.rentner__visual{
  position:relative;
  min-height:380px;
}
@media(min-width:1024px){.rentner__visual{min-height:auto}}
.rentner__photo{
  position:relative;
  margin:0;
  width:100%; height:100%;
  min-height:380px;
  overflow:hidden;
}
.rentner__photo img{
  width:100%; height:100%;
  min-height:380px;
  object-fit:cover;
  object-position:center;
  display:block;
}
.rentner__badge{
  position:absolute;
  bottom:24px; left:24px;
  display:flex; align-items:center; gap:14px;
  padding:18px 22px;
  border-radius:22px;
  background:linear-gradient(135deg, #b45309 0%, #ca8a04 50%, #eab308 100%);
  color:#fff;
  box-shadow:0 18px 40px -10px rgba(202,138,4,.7), inset 0 1px 0 rgba(255,255,255,.3);
  animation:badgeFloat 4s ease-in-out infinite;
}
@keyframes badgeFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
.rentner__badge-num{
  font-family:'Playfair Display', serif;
  font-style:italic; font-weight:700;
  font-size:3rem; line-height:.9;
  letter-spacing:-.03em;
  text-shadow:0 2px 4px rgba(0,0,0,.15);
}
.rentner__badge-num small{font-size:1.4rem;margin-left:2px}
.rentner__badge-text{
  font-size:.78rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; line-height:1.2;
  border-left:1px solid rgba(255,255,255,.4); padding-left:14px;
}

/* Copy */
.rentner__copy{
  padding:40px 30px 44px;
}
@media(min-width:768px){.rentner__copy{padding:50px 44px}}
@media(min-width:1024px){.rentner__copy{padding:60px 60px}}

.ribbon{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px; border-radius:999px;
  background:linear-gradient(135deg,#ca8a04,#eab308);
  color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  box-shadow:0 6px 16px -6px rgba(202,138,4,.6);
}
.ribbon--lg{
  padding:8px 14px; font-size:.78rem; letter-spacing:.1em;
}
.ribbon--lg svg{margin-right:2px}

.rentner__title{
  margin:18px 0 18px;
  display:flex; flex-direction:column; gap:8px;
  line-height:1.05;
}
.rentner__big{
  font-family:'Playfair Display',serif;
  font-size:clamp(4.5rem, 10vw, 7.5rem);
  font-weight:700; font-style:italic;
  background:linear-gradient(135deg,#b45309 0%,#eab308 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:-.04em;
}
.rentner__suf{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.6rem, 2vw + .8rem, 2.4rem);
  color:var(--ink-900);
  line-height:1.15;
  font-weight:500;
}
.rentner__suf em{color:var(--gold-700)}
.rentner__suf--small{
  font-size:clamp(1.1rem, 1vw + .8rem, 1.5rem);
  color:var(--ink-700);
  font-weight:400;
  max-width:30ch;
}
.rentner__lede{
  color:var(--ink-700); font-size:1.05rem; line-height:1.65;
  max-width:55ch;
}
.rentner__lede strong{color:var(--ink-900);font-weight:600}
.rentner__points{
  display:grid; grid-template-columns:1fr; gap:10px;
  margin:22px 0 28px; color:var(--ink-700);
}
@media(min-width:540px){.rentner__points{grid-template-columns:1fr 1fr; gap:10px 24px}}
.rentner__points li{display:inline-flex;align-items:center;gap:10px;font-weight:500}
.rentner__points svg{color:var(--gold-600); flex:none}
.rentner__cta{display:flex;flex-wrap:wrap;gap:12px}
.rentner__assist{
  display:flex; align-items:flex-start; gap:10px;
  margin-top:22px; padding-top:18px;
  border-top:1px dashed rgba(202,138,4,.3);
  color:var(--ink-600); font-size:.92rem; line-height:1.55;
}
.rentner__assist svg{color:var(--gold-600); flex:none; margin-top:3px}

/* ---------- 10a-2. Empfehlungs-Aktion (5€ Gutschrift) ---------- */
.empfehlung{padding:80px 0;background:var(--paper)}
@media(min-width:1024px){.empfehlung{padding:110px 0}}

.empfehlung__card{
  position:relative;
  display:grid; grid-template-columns:1fr; gap:0;
  background:
    radial-gradient(800px 400px at 100% 0%, rgba(191,224,240,.55), transparent 60%),
    linear-gradient(135deg, #EAF5FB 0%, #fff 60%);
  border:1px solid #BFE0F0;
  border-radius:var(--radius-xl);
  overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(21,66,94,.30);
}
@media(min-width:1024px){.empfehlung__card{grid-template-columns:.85fr 1.15fr; gap:0}}

.empfehlung__visual{
  position:relative;
  min-height:280px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), transparent 55%),
    linear-gradient(160deg, #BFE0F0 0%, #94CEE5 100%);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
@media(min-width:1024px){.empfehlung__visual{min-height:auto}}

.empfehlung__badge{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:18px;
  padding:26px 30px;
  border-radius:24px;
  background:linear-gradient(135deg, #15425E 0%, #1d5a7e 60%, #2a7ba8 100%);
  color:#fff;
  box-shadow:0 22px 50px -12px rgba(21,66,94,.55), inset 0 1px 0 rgba(255,255,255,.25);
  animation:badgeFloat 4.5s ease-in-out infinite;
}
.empfehlung__badge-num{
  font-family:'Playfair Display', serif;
  font-style:italic; font-weight:700;
  font-size:3.6rem; line-height:.9;
  letter-spacing:-.03em;
  text-shadow:0 2px 4px rgba(0,0,0,.18);
}
.empfehlung__badge-num small{font-size:1.6rem;margin-left:4px;font-style:normal}
.empfehlung__badge-text{
  font-size:.78rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; line-height:1.25;
  border-left:1px solid rgba(255,255,255,.4); padding-left:16px;
}

/* Floating sparkles */
.empfehlung__sparkles{position:absolute; inset:0; pointer-events:none}
.empfehlung__sparkles .sp{
  position:absolute; width:14px; height:14px;
  fill:#fff; opacity:.85;
  animation:sparkleFloat 5s ease-in-out infinite;
}
.empfehlung__sparkles .sp--1{top:12%; left:15%; animation-delay:0s}
.empfehlung__sparkles .sp--2{top:22%; right:18%; width:10px; height:10px; animation-delay:.8s}
.empfehlung__sparkles .sp--3{bottom:18%; left:22%; width:11px; height:11px; animation-delay:1.6s}
.empfehlung__sparkles .sp--4{bottom:12%; right:14%; animation-delay:2.4s}
@keyframes sparkleFloat{
  0%,100%{transform:translateY(0) scale(1); opacity:.85}
  50%{transform:translateY(-6px) scale(1.1); opacity:1}
}

.empfehlung__copy{padding:36px 28px 40px}
@media(min-width:768px){.empfehlung__copy{padding:46px 40px}}
@media(min-width:1024px){.empfehlung__copy{padding:54px 56px}}

.ribbon--blue{
  background:linear-gradient(135deg,#15425E,#2a7ba8);
  box-shadow:0 6px 16px -6px rgba(21,66,94,.55);
}

.empfehlung__title{
  margin:18px 0 16px;
  display:flex; flex-direction:column; gap:6px;
  line-height:1.05;
}
.empfehlung__big{
  font-family:'Playfair Display',serif;
  font-size:clamp(3.6rem, 8vw, 6rem);
  font-weight:700; font-style:italic;
  background:linear-gradient(135deg,#15425E 0%,#2a7ba8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:-.04em;
}
.empfehlung__suf{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.4rem, 1.6vw + .7rem, 2.1rem);
  color:var(--ink-900);
  line-height:1.15;
  font-weight:500;
}
.empfehlung__suf--small{
  font-size:clamp(1rem, .9vw + .7rem, 1.35rem);
  color:var(--ink-700);
  font-weight:400;
  max-width:34ch;
}
.empfehlung__lede{
  margin:14px 0 18px;
  color:var(--ink-700); font-size:1rem; line-height:1.6;
  max-width:46ch;
}
.empfehlung__lede strong{color:var(--ink-900);font-weight:600}

.empfehlung__points{
  list-style:none; padding:0; margin:0 0 18px;
  display:flex; flex-direction:column; gap:8px;
}
.empfehlung__points li{display:inline-flex;align-items:center;gap:10px;font-weight:500}
.empfehlung__points svg{color:#2a7ba8; flex:none}

.empfehlung__assist{
  display:flex; align-items:flex-start; gap:10px;
  margin-top:18px; padding-top:16px;
  border-top:1px dashed rgba(21,66,94,.25);
  color:var(--ink-600); font-size:.88rem; line-height:1.55;
}
.empfehlung__assist svg{color:#2a7ba8; flex:none; margin-top:3px}
.empfehlung__assist strong{color:var(--ink-900); font-weight:600}

/* ---------- 10b. Mehr als Reinigung ---------- */
.more{
  padding:100px 0;
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(143,210,227,.15), transparent 60%),
    var(--paper);
}
@media(min-width:1024px){.more{padding:130px 0}}

.more__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  max-width:1000px;
  margin:0 auto;
}
@media(min-width:768px){.more__grid{grid-template-columns:1fr 1fr;gap:32px}}

.more__card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:24px;
  padding:36px 32px;
  background:#fff;
  border:1px solid rgba(10,37,64,.07);
  border-radius:var(--radius-lg);
  box-shadow:0 4px 14px rgba(10,37,64,.04);
  transition: transform .35s var(--ease-out), box-shadow .35s, border-color .3s;
}
.more__card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
}
.more__card--feature{
  background:
    linear-gradient(135deg, #fffbeb 0%, #fff 60%);
  border-color:var(--gold-300);
  box-shadow:0 12px 30px -12px rgba(202,138,4,.25);
}

.more__icon{
  flex:none;
  width:60px; height:60px;
  border-radius:18px;
  display:grid;place-items:center;
  background:linear-gradient(135deg, var(--aqua-100), #fff);
  color:var(--aqua-700);
  border:1px solid var(--aqua-300);
  box-shadow:inset 0 1px 0 #fff, 0 8px 18px -8px rgba(8,166,201,.4);
}
.more__icon--warm{
  background:linear-gradient(135deg, #fef3c7, #fff);
  color:var(--gold-700);
  border-color:var(--gold-300);
  box-shadow:inset 0 1px 0 #fff, 0 8px 18px -8px rgba(234,179,8,.4);
}

.more__tag{
  display:inline-flex; align-items:center;
  padding:5px 12px; border-radius:999px;
  background:var(--ink-50); color:var(--ink-700);
  font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  margin-bottom:10px;
}
.more__tag--warm{
  background:linear-gradient(135deg, var(--gold-100), #fef3c7);
  color:var(--gold-700);
}

.more__body h3{
  font-family:'Playfair Display', serif;
  font-size:1.5rem; font-weight:600; color:var(--ink-900);
  margin-bottom:10px; letter-spacing:-.01em;
}
.more__body p{
  color:var(--ink-600); line-height:1.65; font-size:.98rem;
  margin-bottom:18px;
}
.more__list{
  display:flex; flex-direction:column; gap:6px;
}
.more__list li{
  position:relative; padding-left:18px;
  font-size:.88rem; color:var(--ink-700);
}
.more__list li::before{
  content:""; position:absolute; left:0; top:9px;
  width:6px; height:6px; border-radius:50%;
  background:var(--aqua-500);
}
.more__card--feature .more__list li::before{background:var(--gold-500)}

.more__hint{
  display:flex; align-items:flex-start; gap:8px;
  margin-top:18px; padding-top:14px;
  border-top:1px dashed var(--gold-300);
  font-size:.82rem; line-height:1.5;
  color:var(--gold-700);
  font-style:italic;
}
.more__hint svg{color:var(--gold-600); flex:none; margin-top:2px}

.more__note{
  display:flex; align-items:flex-start; gap:12px;
  max-width:680px; margin:42px auto 0;
  padding:18px 22px;
  background:rgba(143,210,227,.1);
  border-left:3px solid var(--aqua-500);
  border-radius:6px;
  color:var(--ink-700);
  font-size:.92rem; line-height:1.6;
  font-style:italic;
}
.more__note svg{color:var(--aqua-700); flex:none; margin-top:3px}

/* ---------- 10c. Prozess: So läuft Ihr Termin ab ---------- */
.prozess{
  padding:100px 0;
  background:#fff;
  border-top:1px solid rgba(10,37,64,.06);
}
@media(min-width:1024px){.prozess{padding:130px 0}}

.prozess__badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:999px;
  background:linear-gradient(135deg, var(--aqua-100), #fff);
  border:1px solid var(--aqua-300);
  color:var(--aqua-700);
  font-size:.82rem; font-weight:600;
  letter-spacing:.02em;
  margin-bottom:20px;
  box-shadow:0 6px 16px -6px rgba(8,166,201,.3);
}
.prozess__badge svg{color:var(--aqua-600); transform:rotate(45deg)}

.prozess__steps{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:1fr; gap:24px;
  max-width:1000px; margin:0 auto;
  counter-reset:prozess;
}
@media(min-width:768px){.prozess__steps{grid-template-columns:repeat(3,1fr); gap:24px; position:relative}}

/* Connecting line on desktop */
@media(min-width:768px){
  .prozess__steps::before{
    content:""; position:absolute;
    top:42px; left:16%; right:16%;
    height:2px;
    background:linear-gradient(90deg,
      transparent 0%,
      var(--aqua-300) 15%,
      var(--aqua-300) 85%,
      transparent 100%);
    z-index:0;
  }
}

.prozess__step{
  position:relative; z-index:1;
  display:flex; flex-direction:column; gap:18px;
  padding:32px 26px;
  background:#fff;
  border:1px solid rgba(10,37,64,.07);
  border-radius:var(--radius-lg);
  transition:transform .35s var(--ease-out), box-shadow .35s, border-color .3s;
}
.prozess__step:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
  border-color:var(--aqua-300);
}

.prozess__num{
  font-family:'Playfair Display', serif;
  font-size:2rem; font-weight:600; font-style:italic;
  width:64px; height:64px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(135deg, var(--ink-800), var(--aqua-700));
  color:#fff;
  letter-spacing:-.02em;
  box-shadow:0 10px 24px -8px rgba(10,37,64,.4), inset 0 1px 0 rgba(255,255,255,.2);
  align-self:flex-start;
}

.prozess__body h3{
  font-family:'Playfair Display', serif;
  font-size:1.3rem; font-weight:600;
  color:var(--ink-900); margin-bottom:10px;
  letter-spacing:-.005em;
}
.prozess__body p{
  font-size:.95rem; line-height:1.65; color:var(--ink-600);
}

.prozess__cta{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
  margin-top:48px;
}

/* ---------- 11. Wizard ---------- */
.wizard{padding:100px 0;background:linear-gradient(180deg,var(--paper) 0%,var(--ink-50) 100%)}
@media(min-width:1024px){.wizard{padding:130px 0}}

.wizard__shell{
  max-width:920px; margin:0 auto;
  background:#fff;
  border:1px solid rgba(10,37,64,.08);
  border-radius:var(--radius-xl);
  padding:36px 24px;
  box-shadow:var(--shadow-lg);
}
@media(min-width:768px){.wizard__shell{padding:48px 56px}}

.wizard__steps{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  margin-bottom:36px;
  counter-reset:s;
  position:relative;
}
.wizard__steps::before{
  content:""; position:absolute;
  left:5%; right:5%; top:20px; height:2px;
  background:var(--ink-100); z-index:0;
}
.wizard__steps li{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:.75rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-400);
  transition:color .3s;
  flex:1;
}
.wizard__steps li span{
  display:grid; place-items:center;
  width:40px;height:40px;border-radius:50%;
  background:#fff; border:2px solid var(--ink-200);
  color:var(--ink-400); font-weight:700; font-size:.95rem;
  transition: all .35s var(--ease-out);
}
.wizard__steps li.is-active{color:var(--ink-900)}
.wizard__steps li.is-active span{
  background:linear-gradient(135deg,var(--ink-800),var(--ink-700));
  color:#fff;border-color:var(--ink-800);
  box-shadow:0 8px 18px -6px rgba(10,37,64,.5);
}
.wizard__steps li.is-done{color:var(--aqua-700)}
.wizard__steps li.is-done span{
  background:var(--aqua-600);color:#fff;border-color:var(--aqua-600);
}

@media(max-width:520px){
  .wizard__steps li{font-size:0}
  .wizard__steps li span{font-size:.9rem}
}

.wizard__form{position:relative}
.wizard__step{
  border:0;padding:0;margin:0;
  display:none;
  animation:stepIn .5s var(--ease-out);
}
.wizard__step.is-active{display:block}
@keyframes stepIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
.wizard__legend{
  font-family:'Playfair Display',serif; font-size:clamp(1.4rem,2vw + .6rem,1.8rem);
  font-weight:500; color:var(--ink-900); margin-bottom:24px; line-height:1.2;
}

.choices{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
@media(min-width:640px){.choices{grid-template-columns:repeat(3,1fr)}}
.choices--grid{grid-template-columns:1fr}
@media(min-width:640px){.choices--grid{grid-template-columns:repeat(2,1fr)}}

.choice{position:relative;cursor:pointer;display:block}
.choice input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.choice__inner{
  position:relative;
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  padding:20px 18px;
  border-radius:var(--radius);
  background:#fff;
  border:1.5px solid var(--ink-200);
  color:var(--ink-700);
  transition: all .25s var(--ease-out);
  height:100%;
}
.choice__inner svg{color:var(--ink-500);transition:color .25s}
.choice__title{font-weight:600;color:var(--ink-900);font-size:.98rem}
.choice__sub{font-size:.82rem;color:var(--ink-500)}
.choice__pill{
  position:absolute; top:12px; right:12px;
  padding:3px 8px; border-radius:999px;
  background:linear-gradient(135deg,#b45309,#eab308); color:#fff;
  font-size:.66rem; font-weight:700; letter-spacing:.06em;
}
.choice:hover .choice__inner{border-color:var(--aqua-500);background:var(--aqua-100);transform:translateY(-2px)}
.choice:hover .choice__inner svg{color:var(--aqua-700)}
.choice input:checked + .choice__inner{
  border-color:var(--ink-800);
  background:linear-gradient(135deg,#fff,var(--aqua-100));
  box-shadow:0 0 0 3px rgba(10,37,64,.08);
}
.choice input:checked + .choice__inner svg{color:var(--ink-800)}
.choice input:focus-visible + .choice__inner{outline:2px solid var(--aqua-600);outline-offset:3px}

.grid-2{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:640px){.grid-2{grid-template-columns:1fr 1fr}}

.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.field label{font-size:.85rem;font-weight:500;color:var(--ink-700)}
.optional{color:var(--ink-400);font-weight:400}
.field input,.field select,.field textarea{
  width:100%;
  padding:13px 14px;
  border:1.5px solid var(--ink-200);
  background:#fff;
  border-radius:var(--radius-sm);
  font-size:.98rem;color:var(--ink-900);
  transition:border-color .2s, box-shadow .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--aqua-600);
  box-shadow:0 0 0 4px rgba(34,194,227,.15);
}
.field textarea{resize:vertical;min-height:90px;font-family:inherit}

.check{
  display:flex;gap:12px;align-items:flex-start;
  font-size:.85rem;color:var(--ink-600);line-height:1.5;
  margin:8px 0 24px;cursor:pointer;
}
.check input{
  flex:none;width:18px;height:18px;margin-top:2px;
  accent-color:var(--ink-800);cursor:pointer;
}
.check a{color:var(--aqua-700);text-decoration:underline;text-underline-offset:2px}

.wizard__nav{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  margin-top:30px;
}

.wizard__success{
  text-align:center; padding:30px 10px;
  animation:stepIn .6s var(--ease-out);
}
.wizard__success[hidden]{display:none}
.success__icon{
  width:64px;height:64px;border-radius:50%;
  margin:0 auto 18px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#22c55e,#16a34a);
  color:#fff;
  box-shadow:0 14px 30px -10px rgba(34,197,94,.6);
  animation:popIn .6s var(--ease-spring);
}
@keyframes popIn{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.wizard__success h3{font-size:1.6rem;font-weight:500;color:var(--ink-900);margin-bottom:10px}
.wizard__success p{color:var(--ink-600);max-width:48ch;margin:0 auto 8px}
.wizard__success-msg{display:none}
.wizard__success.is-sent   .wizard__success-msg--sent{display:block}
.wizard__success.is-mailto .wizard__success-msg--mailto{display:block}
/* Default (kein Mode gesetzt → zeige "sent" als Standard) */
.wizard__success:not(.is-sent):not(.is-mailto) .wizard__success-msg--sent{display:block}
.wizard__success-sub{font-size:.92rem;color:var(--ink-500);margin-top:14px !important}
.wizard__success a{color:var(--aqua-700);font-weight:600}

/* ---------- 12. Gebiet ---------- */
.gebiet{padding:100px 0;background:#fff;border-top:1px solid rgba(10,37,64,.06)}
@media(min-width:1024px){.gebiet{padding:130px 0}}

.gebiet__inner{
  display:grid; grid-template-columns:1fr; gap:60px; align-items:center;
}
@media(min-width:1024px){.gebiet__inner{grid-template-columns:1fr 1fr;gap:80px}}

.gebiet__tags{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:30px 0 24px;
}
.gebiet__tags span{
  display:inline-flex;align-items:center;
  padding:8px 14px;
  border-radius:999px;
  background:var(--ink-50);
  color:var(--ink-700);
  font-size:.85rem; font-weight:500;
  border:1px solid var(--ink-200);
  transition: all .2s;
}
.gebiet__tags span:hover{
  background:var(--aqua-100);color:var(--aqua-700);
  border-color:var(--aqua-500);
  transform:translateY(-1px);
}
.gebiet__tags .gebiet__tags--more{
  background:transparent;
  border:1px dashed var(--ink-300);
  color:var(--ink-500);
  font-style:italic;
}
.gebiet__tags .gebiet__tags--more:hover{
  background:transparent;
  border-color:var(--aqua-500);
  color:var(--aqua-700);
}
.gebiet__note{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.92rem;color:var(--ink-600);font-style:italic;
}
.gebiet__note svg{color:var(--aqua-600);flex:none}

.gebiet__map{position:relative;max-width:520px;justify-self:center;width:100%}
.map-pulse{transform-origin:200px 200px;animation:mapPulse 2.4s ease-out infinite}
@keyframes mapPulse{
  0%{r:9;opacity:.8;stroke-width:2}
  100%{r:60;opacity:0;stroke-width:.5}
}

/* ---------- 13. Stimmen ---------- */
.stimmen{padding:100px 0;background:var(--ink-50)}
@media(min-width:1024px){.stimmen{padding:130px 0}}

.stimmen__cta{
  max-width:720px; margin:0 auto;
  display:flex; flex-direction:column; gap:18px; align-items:center;
}
.google-card{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  width:100%;
  padding:22px 26px;
  background:#fff;
  border:1px solid rgba(10,37,64,.08);
  border-radius:var(--radius-lg);
  box-shadow:0 14px 40px -16px rgba(10,37,64,.18);
  cursor:pointer;
  transition: transform .3s var(--ease-out), box-shadow .3s, border-color .3s;
}
.google-card:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 50px -16px rgba(10,37,64,.28);
  border-color:var(--aqua-500);
}
.google-card__left{display:flex; align-items:center; gap:18px; min-width:0}
.google-card__logo{
  flex:none; width:54px; height:54px; border-radius:14px;
  background:#fff; border:1px solid var(--ink-100);
  display:grid; place-items:center;
  box-shadow:0 4px 12px -4px rgba(0,0,0,.08);
}
.google-card__title{
  font-family:'Playfair Display',serif;
  font-size:1.1rem; font-weight:600; color:var(--ink-900); line-height:1.2;
}
.google-card__sub{font-size:.85rem; color:var(--ink-500); margin-top:2px}
.google-card__right{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 18px; border-radius:999px;
  background:linear-gradient(135deg, #1a7a96, #2b96b3);
  color:#fff; font-weight:600; font-size:.92rem;
  white-space:nowrap;
  box-shadow:0 8px 20px -6px rgba(26,122,150,.5);
  transition: box-shadow .3s, transform .3s;
}
.google-card:hover .google-card__right{box-shadow:0 12px 28px -6px rgba(26,122,150,.65)}
@media(max-width:560px){
  .google-card{flex-direction:column; align-items:flex-start; gap:18px}
  .google-card__right{width:100%; justify-content:center}
}

.stimmen__note{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--ink-500); font-size:.88rem; font-style:italic;
  text-align:center; max-width:560px;
}
.stimmen__note svg{color:var(--aqua-600); flex:none}

/* ---------- 14. Final CTA ---------- */
.finalcta{
  position:relative;
  padding:100px 0;
  color:#fff;
  background:radial-gradient(800px 400px at 50% 0%, #1a4a7a, transparent 70%),
             linear-gradient(135deg, var(--ink-900) 0%, var(--ink-800) 100%);
  overflow:hidden;
}
.finalcta__bg{position:absolute;inset:0;pointer-events:none}
.finalcta__orb{
  position:absolute; width:600px;height:600px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(34,194,227,.35), transparent 60%);
  filter:blur(60px);
  bottom:-300px; left:50%; transform:translateX(-50%);
  animation:floatY 14s ease-in-out infinite;
}
.finalcta__inner{position:relative;text-align:center;max-width:760px;margin:0 auto}
.finalcta__title{
  font-size:clamp(2.2rem,4vw + 1rem,3.6rem);
  line-height:1.05;letter-spacing:-.02em;
  margin-bottom:18px;
}
.finalcta__title em{
  background:linear-gradient(120deg,#7ee0f2,#fff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-style:italic;
}
.finalcta__lede{color:rgba(255,255,255,.78);font-size:1.1rem;margin-bottom:34px}
.finalcta__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}

/* ---------- 15. Footer ---------- */
.footer{background:#06182b;color:rgba(255,255,255,.65);padding:80px 0 30px}
.footer__grid{
  display:grid; grid-template-columns:1fr; gap:40px;
  padding-bottom:50px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
@media(min-width:640px){.footer__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.footer__grid{grid-template-columns:2fr 1fr 1fr 1fr;gap:60px}}

.footer__brand .brand{margin-bottom:18px}
.footer__about{font-size:.92rem;line-height:1.65;max-width:38ch}

.footer h4{
  font-family:'Inter',sans-serif;font-size:.78rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:#fff;
  margin-bottom:18px;
}
.footer ul{display:flex;flex-direction:column;gap:10px}
.footer ul a{font-size:.92rem;color:rgba(255,255,255,.7);cursor:pointer}
.footer ul a:hover{color:var(--aqua-400)}
.footer__contact li{font-size:.92rem}

.footer__bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px;
  padding-top:24px;
  font-size:.82rem;color:rgba(255,255,255,.5);
}
.footer__legal{display:flex;gap:24px}
.footer__legal a{cursor:pointer}
.footer__legal a:hover{color:#fff}

/* ---------- 16. FAB (mobile call button) ---------- */
.fab{
  position:fixed;
  right:18px; bottom:18px;
  width:56px; height:56px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--aqua-600),var(--aqua-700));
  color:#fff;
  display:grid; place-items:center;
  box-shadow:0 14px 30px -8px rgba(8,166,201,.7), 0 0 0 4px rgba(34,194,227,.2);
  z-index:60;
  animation:fabPulse 2.4s ease-in-out infinite;
  cursor:pointer;
}
.fab:hover{transform:scale(1.05);color:#fff}
@keyframes fabPulse{
  0%,100%{box-shadow:0 14px 30px -8px rgba(8,166,201,.7), 0 0 0 0 rgba(34,194,227,.5)}
  70%{box-shadow:0 14px 30px -8px rgba(8,166,201,.7), 0 0 0 18px rgba(34,194,227,0)}
}
@media(min-width:1024px){.fab{display:none}}

/* ---------- 17. Reveal on scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay:calc(var(--i,0) * 80ms);
  will-change:opacity, transform;
}
.reveal.is-visible{opacity:1;transform:translateY(0)}

/* ---------- 17b. Legal pages (Impressum / Datenschutz) ---------- */
.legal{
  padding:80px 0 100px;
  background:var(--paper);
}
@media(min-width:768px){.legal{padding:100px 0 140px}}

.legal__head{
  max-width:760px; margin:0 auto 50px;
}
.legal__back{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--aqua-700); font-size:.9rem; font-weight:600;
  margin-bottom:24px;
  transition: gap .2s var(--ease-out), color .2s;
}
.legal__back:hover{gap:12px; color:var(--ink-900)}
.legal__title{
  font-family:'Playfair Display', serif;
  font-size:clamp(2.2rem, 4vw + 1rem, 3.8rem);
  font-weight:600; line-height:1.05;
  color:var(--ink-900); letter-spacing:-.02em;
  margin-bottom:14px;
}
.legal__lede{
  font-size:1.1rem; color:var(--ink-600); line-height:1.6;
  max-width:60ch;
}

.legal__content{
  max-width:760px; margin:0 auto;
  font-size:1rem; line-height:1.75; color:var(--ink-700);
}
.legal__content h2{
  font-family:'Playfair Display', serif;
  font-size:1.6rem; font-weight:600; color:var(--ink-900);
  letter-spacing:-.01em;
  margin:48px 0 14px;
  padding-top:24px;
  border-top:1px solid var(--ink-200);
}
.legal__content h2:first-of-type{border-top:0; padding-top:0; margin-top:0}
.legal__content h3{
  font-family:'Inter', sans-serif;
  font-size:1.1rem; font-weight:600; color:var(--ink-900);
  margin:28px 0 10px;
}
.legal__content p{margin-bottom:14px}
.legal__content ul{
  margin:10px 0 18px; padding-left:0;
  display:flex; flex-direction:column; gap:6px;
}
.legal__content ul li{
  position:relative; padding-left:20px;
}
.legal__content ul li::before{
  content:""; position:absolute; left:0; top:11px;
  width:6px; height:6px; border-radius:50%;
  background:var(--aqua-500);
}
.legal__content a{
  color:var(--aqua-700); font-weight:500;
  text-decoration:underline; text-underline-offset:2px;
  text-decoration-thickness:1px;
}
.legal__content a:hover{color:var(--ink-900)}
.legal__content strong{color:var(--ink-900); font-weight:600}

.legal__address{
  font-style:normal;
  padding:18px 22px;
  background:#fff;
  border:1px solid var(--ink-200);
  border-radius:var(--radius-sm);
  margin:14px 0 20px;
  line-height:1.7;
}
.legal__note{
  background:rgba(143,210,227,.1);
  border-left:3px solid var(--aqua-500);
  padding:14px 18px;
  border-radius:6px;
  margin:18px 0;
  font-size:.95rem;
}
.legal__updated{
  margin-top:48px; padding-top:24px;
  border-top:1px solid var(--ink-200);
  font-size:.88rem; color:var(--ink-500); font-style:italic;
}

/* ---------- 17c. Service-Unterseiten ---------- */
.service__more{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:14px;
  font-size:.88rem; font-weight:600;
  color:var(--aqua-700);
  transition: gap .2s var(--ease-out), color .2s;
}
.service__more:hover{gap:10px; color:var(--ink-900)}
.more__body .service__more{margin-top:16px}

.svc-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}
.legal__content .btn,
.legal__head .btn{text-decoration:none}
.legal__content .btn--primary{color:#fff}
.legal__content .btn--primary:hover{color:#fff}

.svc-facts{
  display:grid; grid-template-columns:1fr; gap:10px;
  margin:18px 0 24px; padding:0;
}
@media(min-width:640px){.svc-facts{grid-template-columns:1fr 1fr}}
.svc-facts li{
  position:relative; padding:12px 16px 12px 38px;
  background:#fff; border:1px solid var(--ink-200);
  border-radius:var(--radius-sm);
  font-size:.95rem; color:var(--ink-800);
}
.svc-facts li::before{
  content:"✓"; position:absolute; left:14px; top:11px;
  color:var(--aqua-700); font-weight:700;
}
.legal__content ul.svc-facts li::before{
  width:auto; height:auto; border-radius:0; background:none; top:11px;
}

.faq{display:flex; flex-direction:column; gap:12px; margin:18px 0 8px}
.faq details{
  background:#fff;
  border:1px solid var(--ink-200);
  border-radius:var(--radius-sm);
  overflow:hidden;
  transition: border-color .25s, box-shadow .25s;
}
.faq details[open]{border-color:var(--aqua-500); box-shadow:0 8px 24px -14px rgba(10,37,64,.25)}
.faq summary{
  cursor:pointer;
  padding:16px 18px;
  font-weight:600; color:var(--ink-900);
  list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:14px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";
  flex:none;
  font-size:1.4rem; line-height:1;
  color:var(--aqua-700);
  transition:transform .25s var(--ease-out);
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 18px 16px; margin:0; color:var(--ink-700); line-height:1.65}

/* ---------- 17d. Service-Unterseiten: Layout ---------- */
.svc-hero{
  position:relative;
  padding:52px 0 72px;
  overflow:hidden;
  background:
    radial-gradient(800px 500px at 78% 0%, rgba(143,210,227,.28), transparent 60%),
    linear-gradient(180deg, var(--aqua-100) 0%, var(--paper) 88%);
}
.svc-hero .legal__back{margin-bottom:26px}
.svc-hero__title{
  font-family:'Playfair Display', serif;
  font-weight:600;
  font-size:clamp(2.3rem, 4vw + 1rem, 3.9rem);
  line-height:1.04; letter-spacing:-.02em;
  color:var(--ink-900);
  margin:10px 0 18px;
}
.svc-hero__title em{
  font-style:italic;
  background:linear-gradient(120deg, var(--aqua-700) 0%, var(--aqua-500) 60%, var(--ink-700) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.svc-hero__lede{
  max-width:62ch;
  color:var(--ink-600);
  font-size:clamp(1.02rem, .4vw + .95rem, 1.18rem);
  line-height:1.68;
}
.svc-hero .hero__trust{margin-top:26px}

.svc-section{padding:76px 0}
.svc-section--white{background:#fff; border-top:1px solid rgba(10,37,64,.06)}
.svc-section--tint{background:var(--ink-50)}
.svc-section .section-head{margin-bottom:44px}
.section-title--sm{font-size:clamp(1.8rem, 2.6vw + .9rem, 2.8rem)}

.svc-facts{max-width:900px; margin-left:auto; margin-right:auto}
.svc-p{
  max-width:70ch; margin:0 auto 14px;
  color:var(--ink-600); line-height:1.7;
  text-align:center;
}
.svc-p strong{color:var(--ink-800)}
.svc-p a{color:var(--aqua-700); font-weight:600}
.svc-p a:hover{color:var(--ink-900)}
.faq{max-width:860px; margin-left:auto; margin-right:auto}

/* Empfehlungs-Box auf Unterseiten (5-€-Gutschrift) */
.svc-referral{
  max-width:860px;
  margin:28px auto 0;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:20px 24px;
  background:linear-gradient(135deg, #fffbeb 0%, #fff 60%);
  border:1px solid var(--gold-300);
  border-radius:var(--radius);
  box-shadow:0 12px 30px -18px rgba(202,138,4,.35);
}
.svc-referral__big{
  flex:none;
  font-family:'Playfair Display', serif;
  font-style:italic; font-weight:700;
  font-size:2.1rem; line-height:1;
  background:linear-gradient(135deg, #b45309, #eab308);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.svc-referral__text{
  flex:1; min-width:220px; margin:0;
  color:var(--ink-700); font-size:.95rem; line-height:1.55;
}
.svc-referral__text strong{color:var(--ink-900)}
.svc-referral__text a{
  color:var(--gold-700); font-weight:600;
  text-decoration:underline; text-underline-offset:2px;
}
.svc-referral__text a:hover{color:var(--ink-900)}

/* ---------- 17e. Empfehlungs-Banner (Unterseiten, hell & lesbar) ---------- */
.svc-referral{
  max-width:900px;
  margin:0 auto;
  display:flex; align-items:center; gap:26px;
  padding:28px 32px;
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg, var(--aqua-100) 0%, #ffffff 68%);
  border:1px solid var(--aqua-300);
  box-shadow:0 18px 44px -20px rgba(8,166,201,.35);
}
/* Rundes 5-€-Abzeichen */
.svc-referral__badge{
  flex:none;
  width:78px; height:78px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(135deg, var(--aqua-500), var(--aqua-700));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 10px 24px -8px rgba(8,166,201,.6);
  line-height:1;
}
.svc-referral__badge strong,
.svc-referral__big{
  font-family:'Playfair Display', serif;
  font-style:italic; font-weight:700;
  font-size:2rem; color:#fff;
}
.svc-referral__badge strong small{font-size:1.05rem}
/* Textblock */
.svc-referral__body{flex:1 1 auto}
.svc-referral__body h3{
  font-family:'Inter', sans-serif;
  font-size:1.18rem; font-weight:700; color:var(--ink-900);
  margin-bottom:7px; letter-spacing:-.005em;
}
.svc-referral__body p,
.svc-referral__text{
  font-size:.96rem; color:var(--ink-600); line-height:1.6; margin:0 0 14px;
}
.svc-referral__body p:last-child,
.svc-referral__text:last-child{margin-bottom:0}
.svc-referral__body strong,
.svc-referral__text strong{color:var(--ink-900); font-weight:600}
/* Klarer Button */
.svc-referral__link{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px; border-radius:999px;
  background:linear-gradient(135deg, #1a7a96 0%, #2b96b3 60%, #4cb3cf 100%);
  color:#fff !important; font-weight:600; font-size:.92rem;
  text-decoration:none;
  box-shadow:0 8px 22px -8px rgba(26,122,150,.55), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .25s var(--ease-out), box-shadow .3s;
}
.svc-referral__link:hover{transform:translateY(-2px); color:#fff !important; box-shadow:0 14px 30px -8px rgba(26,122,150,.7)}
.svc-referral__link svg{flex:none}
@media(max-width:600px){
  .svc-referral{flex-direction:column; text-align:center; gap:18px; padding:28px 24px}
}

/* ---------- 17f. Fensterreinigung: Premium-Landingpage ---------- */

/* Hero ohne dunkle Abschluss-Brücke (kein Reveal-Stage danach) */
.hero--page::after{display:none}
.hero--page{padding-bottom:90px}
@media(min-width:1024px){.hero--page{padding-bottom:110px; min-height:auto}}

/* --- „Warum wir" USP-Grid --- */
.why{padding:90px 0; background:#fff; border-top:1px solid rgba(10,37,64,.06)}
@media(min-width:1024px){.why{padding:120px 0}}
.why__grid{
  display:grid; grid-template-columns:1fr; gap:22px;
  max-width:1080px; margin:0 auto;
}
@media(min-width:640px){.why__grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.why__grid{grid-template-columns:repeat(3,1fr); gap:26px}}
.why__card{
  position:relative;
  padding:30px 26px;
  background:var(--paper);
  border:1px solid rgba(10,37,64,.07);
  border-radius:var(--radius-lg);
  transition:transform .4s var(--ease-out), box-shadow .4s, border-color .3s;
  overflow:hidden;
}
.why__card::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, transparent 55%, rgba(34,194,227,.07) 100%);
  opacity:0; transition:opacity .4s;
}
.why__card:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:rgba(8,166,201,.25)}
.why__card:hover::before{opacity:1}
.why__icon{
  position:relative; z-index:1;
  width:52px; height:52px; border-radius:15px;
  display:grid; place-items:center; margin-bottom:18px;
  background:linear-gradient(135deg, var(--aqua-100), #fff);
  color:var(--aqua-700);
  border:1px solid var(--aqua-300);
  box-shadow:inset 0 1px 0 #fff, 0 8px 18px -8px rgba(8,166,201,.4);
}
.why__icon--gold{
  background:linear-gradient(135deg,#fef3c7,#fff);
  color:var(--gold-700); border-color:var(--gold-300);
  box-shadow:inset 0 1px 0 #fff, 0 8px 18px -8px rgba(234,179,8,.5);
}
.why__card h3{
  position:relative; z-index:1;
  font-family:'Inter', sans-serif; font-size:1.12rem; font-weight:600;
  color:var(--ink-900); margin-bottom:8px; letter-spacing:-.005em;
}
.why__card p{position:relative; z-index:1; font-size:.94rem; color:var(--ink-600); line-height:1.6}

/* --- Zufriedenheits-Garantie Highlight --- */
.garantie{
  padding:90px 0; color:#fff;
  background:radial-gradient(800px 500px at 15% 20%, #13345a 0%, transparent 60%),
             linear-gradient(135deg, var(--ink-900) 0%, var(--ink-800) 100%);
  overflow:hidden;
}
@media(min-width:1024px){.garantie{padding:120px 0}}
.garantie__grid{
  display:grid; grid-template-columns:1fr; gap:50px; align-items:center;
}
@media(min-width:900px){.garantie__grid{grid-template-columns:.75fr 1.25fr; gap:70px}}
.garantie__visual{display:flex; justify-content:center}
.garantie__seal{position:relative; width:220px; height:220px}
.garantie__seal-ring{position:absolute; inset:0; animation:spin 26s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.garantie__seal-core{
  position:absolute; inset:34px; border-radius:50%;
  display:grid; place-items:center; text-align:center;
  background:radial-gradient(circle at 32% 30%, #eaf6fa, #8fd2e3);
  box-shadow:inset 0 -10px 30px rgba(8,84,110,.35), 0 20px 50px -18px rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.5);
}
.garantie__seal-core svg{width:52px; height:52px; color:var(--ink-800)}
.garantie__seal-core span{
  display:block; font-size:.66rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-800); margin-top:4px;
}
.garantie__copy .eyebrow{color:rgba(255,255,255,.85)}
.garantie__copy .eyebrow .dot{box-shadow:0 0 0 4px rgba(126,224,242,.25)}
.garantie__title{
  font-family:'Playfair Display', serif; font-weight:600;
  font-size:clamp(1.9rem, 2.6vw + 1rem, 3rem); line-height:1.08;
  letter-spacing:-.02em; color:#fff; margin:14px 0 16px;
}
.garantie__title em{
  font-style:italic;
  background:linear-gradient(120deg,#8fd2e3, #fff 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.garantie__lede{color:rgba(255,255,255,.78); font-size:1.08rem; line-height:1.65; max-width:56ch}
.garantie__lede strong{color:#fff}
.garantie__points{display:flex; flex-direction:column; gap:12px; margin:24px 0 0}
.garantie__points li{display:flex; align-items:flex-start; gap:12px; color:rgba(255,255,255,.85); line-height:1.5}
.garantie__points svg{color:var(--aqua-400); flex:none; margin-top:3px}

/* ---------- 18. Reduced motion ---------- */
@media(prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
}