:root{
  --navy:#0A2540;
  --navy-2:#0D3B7A;
  --blue:#2CA8F5;
  --blue-light:#63C4FF;
  --bg:#F9FBFD;
  --bg-soft:#E2ECF7;
  --bg-softer:#CFE0F2;
  --text:#0F2A47;
  --text-soft:#5B7290;
  --border:#DCE6F0;
  --card:#FFFFFF;
  --radius:16px;
  --shadow:0 20px 45px rgba(10,37,64,0.12);
  --ff-head:'Poppins',sans-serif;
  --ff-body:'Inter',sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--ff-body);
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;}

.container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}

h1,h2,h3,h4{font-family:var(--ff-head);font-weight:700;color:var(--text);line-height:1.15;}
h2{font-size:clamp(28px,4vw,42px);letter-spacing:-0.5px;}
h3{font-size:20px;color:var(--text);}

.grad-text{
  background:linear-gradient(90deg,var(--blue),var(--navy-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  background-size:200% auto;
  animation:gradShift 5s ease-in-out infinite;
}
@keyframes gradShift{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}

.section-tag{
  display:inline-block;
  font-size:13px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--navy-2);
  background:rgba(44,168,245,0.12);
  padding:6px 14px;
  border-radius:20px;
  margin-bottom:14px;
}
.section-tag--light{background:rgba(255,255,255,0.15);color:#fff;}
.section-sub{color:var(--text-soft);max-width:560px;font-size:16px;margin-top:10px;}

/* ---------- Intro splash (kept dark on purpose: one bold moment, not the whole site) ---------- */
.intro{
  position:fixed;inset:0;z-index:500;
  display:flex;align-items:center;justify-content:center;
  background:var(--navy);
  transition:opacity .5s ease;
}
.intro::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 45%, rgba(44,168,245,0.3), transparent 60%);
}
.intro__logo{
  position:relative;width:min(320px,70vw);
  transform:scale(1);
  will-change:transform;
}
.intro__logo.animate{
  transition:transform 1.5s cubic-bezier(.65,0,.35,1);
}
.intro.intro--done{opacity:0;pointer-events:none;}
.intro.intro--skip{display:none;}

/* ---------- Scroll progress bar ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:linear-gradient(90deg,var(--blue),var(--blue-light));
  z-index:200;
  box-shadow:0 0 10px rgba(44,168,245,0.5);
  transition:width .1s ease-out;
}

/* ---------- Buttons ----------
   Kept deliberately simple: solid/gradient fill, one box-shadow, a hover
   lift. Earlier versions layered a ripple-clip, a blurred glow and a
   pulsing ring on top of this — each added its own pseudo-box with
   border-radius:inherit, and any tiny mismatch between those boxes and
   the button's own box showed up as a hairline seam right at the rounded
   ends. Removing the extra layers removes the possibility of that seam
   entirely, which matters more here than the extra motion did. */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 28px;
  border-radius:999px;
  font-weight:600;
  font-size:15px;
  border:none;
  background-clip:padding-box;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  white-space:nowrap;
}
.btn--primary{
  background:linear-gradient(90deg,var(--blue),var(--navy-2));
  color:#fff;
  box-shadow:0 10px 24px rgba(44,168,245,0.35);
}
.btn--primary:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(44,168,245,0.45);}
.btn--ghost{
  background:#fff;
  color:var(--navy);
  box-shadow:inset 0 0 0 2px var(--border);
}
.btn--ghost:hover{box-shadow:inset 0 0 0 2px var(--blue);color:var(--blue);transform:translateY(-3px);}
.btn--block{width:100%;}
.btn--nav{padding:11px 22px;}

/* ---------- Header ---------- */
.header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:16px 0;
  transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
}
.header.scrolled{
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(12px);
  box-shadow:0 4px 24px rgba(10,37,64,0.1);
  padding:10px 0;
  border-bottom:1px solid rgba(10,37,64,0.06);
}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;}

.logo{display:flex;align-items:center;gap:10px;}
.logo__img{
  height:40px;width:auto;display:block;
  transition:transform .3s ease, filter .3s ease, opacity .4s ease;
  opacity:0;
}
.logo__img.is-visible{opacity:1;}
.logo:hover .logo__img{transform:translateY(-2px) scale(1.03);}
.logo--footer .logo__img{height:44px;opacity:1;}

.nav{display:flex;gap:30px;}
.nav a{font-weight:500;font-size:15px;color:var(--navy);position:relative;padding:4px 0;}
.nav a::after{
  content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--blue-light));
  transition:width .25s ease;
}
.nav a:hover::after{width:100%;}
.nav a:hover{color:var(--blue);}

.burger{display:none;background:none;border:none;width:32px;height:22px;flex-direction:column;justify-content:space-between;}
.burger span{display:block;height:2px;background:var(--navy);border-radius:2px;transition:transform .25s ease, opacity .25s ease;}
.burger.active span:nth-child(1){transform:translateY(10px) rotate(45deg);}
.burger.active span:nth-child(2){opacity:0;}
.burger.active span:nth-child(3){transform:translateY(-10px) rotate(-45deg);}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding:170px 0 80px;
  overflow:hidden;
  background:var(--bg);
}
.hero__photo{
  position:absolute;inset:0;
  background-image:url('https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=1600&h=1000&fit=crop&q=80');
  background-size:cover;
  background-position:center;
  opacity:0.88;
  will-change:transform;
}
.hero__bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 720px 440px at 50% 38%, rgba(249,251,253,0.85), rgba(249,251,253,0.4) 68%, transparent 100%),
    linear-gradient(180deg, rgba(249,251,253,0.15), var(--bg) 97%);
}
.hero__orb{
  position:absolute;border-radius:50%;
  filter:blur(4px);
  opacity:0.6;
  animation:orbFloat 9s ease-in-out infinite;
}
.hero__orb--1{width:14px;height:14px;background:var(--blue);top:22%;left:12%;animation-delay:0s;}
.hero__orb--2{width:9px;height:9px;background:var(--navy-2);top:60%;left:20%;animation-delay:2s;}
.hero__orb--3{width:11px;height:11px;background:var(--blue);top:35%;right:15%;animation-delay:4s;}
@keyframes orbFloat{
  0%,100%{transform:translateY(0) translateX(0);}
  50%{transform:translateY(-30px) translateX(14px);}
}
.hero__inner{position:relative;text-align:center;max-width:820px;}
.eyebrow{
  font-size:13px;font-weight:700;letter-spacing:2px;color:var(--blue);
  margin-bottom:18px;
}
.hero h1{font-size:clamp(34px,5.5vw,58px);margin-bottom:20px;color:var(--navy);}
.hero__sub{font-size:clamp(14px,1.6vw,16px);color:var(--text-soft);max-width:540px;margin:0 auto 34px;}
.hero__cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:60px;}
.hero__stats{
  display:flex;justify-content:center;gap:50px;flex-wrap:wrap;
  padding-top:30px;border-top:1px solid var(--border);
}
.hero__stats div{display:flex;flex-direction:column;align-items:center;}
.hero__stats strong{font-family:var(--ff-head);font-size:26px;color:var(--navy);}
.hero__stats span{font-size:13px;color:var(--text-soft);}

/* ---------- Marquee (kept dark on purpose: a clear, bold seam right
   after the light hero, instead of blending straight into the next
   light section) ---------- */
.marquee{
  background:linear-gradient(90deg,var(--navy),var(--navy-2));
  overflow:hidden;
  padding:18px 0;
  box-shadow:0 2px 20px rgba(10,37,64,0.25);
  position:relative;
  z-index:1;
}
.marquee__track{
  display:flex;
  gap:36px;
  width:max-content;
  animation:marqueeScroll 26s linear infinite;
  white-space:nowrap;
}
.marquee__track span{
  font-family:var(--ff-head);font-weight:600;font-size:15px;
  color:rgba(255,255,255,0.85);letter-spacing:0.5px;
}
.marquee__track span:nth-child(2n){color:var(--blue-light);font-size:10px;}
@keyframes marqueeScroll{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}
.marquee:hover .marquee__track{animation-play-state:paused;}

/* ---------- Services ---------- */
.services{padding:110px 0;background:var(--bg-soft);}
.services .container>h2{margin-bottom:4px;}
.services__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:50px 0 70px;
}
.service-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:36px 30px;box-shadow:0 10px 28px rgba(10,37,64,0.06);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.service-card:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:rgba(44,168,245,0.35);}
.service-card__icon{
  width:60px;height:60px;border-radius:14px;
  background:linear-gradient(135deg,rgba(44,168,245,0.14),rgba(13,59,122,0.16));
  display:flex;align-items:center;justify-content:center;
  color:var(--blue);margin-bottom:22px;
  transition:transform .3s ease;
}
.service-card:hover .service-card__icon{transform:rotate(-6deg) scale(1.08);}
.service-card__icon svg{width:28px;height:28px;}
.service-card p{color:var(--text-soft);font-size:15px;margin:12px 0 18px;}
.service-card__price{
  display:inline-block;font-weight:700;color:var(--navy-2);
  background:rgba(44,168,245,0.1);padding:6px 14px;border-radius:20px;font-size:14px;
}

.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.pricing-card{
  position:relative;background:linear-gradient(160deg,#EAF5FF,#CFE7FB);border-radius:var(--radius);
  padding:38px 30px;text-align:center;border:1px solid #BFDFF5;
  box-shadow:0 10px 28px rgba(10,37,64,0.08);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.pricing-card:hover{transform:translateY(-6px);border-color:var(--blue);}
.pricing-card--highlight{
  background:linear-gradient(160deg,#124a8f,#0D3B7A 55%, #0A2A55);
  color:#fff;box-shadow:0 24px 50px rgba(44,168,245,0.3);
  border:1px solid rgba(153,214,255,0.6);
  transform:scale(1.04);
}
.pricing-card--highlight h4,.pricing-card--highlight .pricing-card__price{color:#fff;}
.pricing-card--highlight li{color:rgba(255,255,255,0.92);}
.pricing-card__badge{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--blue);color:#fff;font-size:12px;font-weight:700;
  padding:5px 14px;border-radius:20px;
}
.pricing-card h4{font-size:18px;margin-bottom:6px;color:var(--navy);}
.pricing-card__tagline{font-size:13px;color:var(--navy-2);min-height:34px;margin-bottom:14px;}
.pricing-card--highlight .pricing-card__tagline{color:rgba(255,255,255,0.95);}
.pricing-card__price{font-family:var(--ff-head);font-size:30px;font-weight:800;color:var(--navy);margin-bottom:16px;display:flex;flex-direction:column;align-items:center;gap:2px;}
.pricing-card__unit{font-family:var(--ff-body);font-size:11px;font-weight:500;color:var(--navy-2);text-transform:uppercase;letter-spacing:.5px;}
.pricing-card--highlight .pricing-card__unit{color:rgba(255,255,255,0.8);}
.pricing-card li{padding:8px 0;font-size:13.5px;text-align:left;color:var(--navy);border-top:1px solid rgba(13,59,122,0.15);}
.pricing-card--highlight li{border-top:1px solid rgba(255,255,255,0.15);}
.pricing-card li:first-child{border-top:none;}
.pricing-card__retainer{
  margin-top:16px;padding:10px 12px;border-radius:10px;font-size:12px;line-height:1.4;
  background:rgba(10,37,64,0.08);color:var(--navy-2);text-align:left;font-weight:600;
}
.pricing-card--highlight .pricing-card__retainer{background:rgba(255,255,255,0.16);color:#fff;font-weight:400;}
.pricing-card .btn{margin-top:20px;width:100%;}
.pricing-note{text-align:center;color:var(--text-soft);font-size:13px;margin-top:24px;}

/* ---------- Portfolio ---------- */
.portfolio{padding:110px 0;background:var(--bg);}
.portfolio__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:50px;
}
.portfolio-card{
  background:var(--card);border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);
  box-shadow:0 10px 28px rgba(10,37,64,0.08);
  transition:transform .2s ease, box-shadow .3s ease;
  transform-style:preserve-3d;
  will-change:transform;
}
.portfolio-card:hover{box-shadow:var(--shadow);border-color:rgba(44,168,245,0.35);}
.portfolio-card__mock{
  height:270px;position:relative;overflow:hidden;
  background:#12335A;
  display:flex;flex-direction:column;
}
.portfolio-card__mock::after{
  content:'';position:absolute;inset:0;top:34px;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,0.16) 45%,transparent 60%);
  background-size:250% 250%;
  animation:sheen 5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes sheen{
  0%{background-position:200% 0%;}
  100%{background-position:-50% 0%;}
}
.mock__chrome{
  display:flex;align-items:center;gap:6px;flex:0 0 34px;
  padding:0 12px;
  background:#163A60;border-bottom:1px solid #254A72;
}
.mock__dot{width:7px;height:7px;border-radius:50%;background:#4E6E93;}
.mock__url{
  margin-left:10px;font-size:11px;color:#A9BFD6;
  background:#0F2C4C;padding:3px 10px;border-radius:6px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mock__banner{
  flex:0 0 24px;display:flex;align-items:center;
  padding:0 12px;font-size:10.5px;font-weight:700;letter-spacing:.2px;
  background:linear-gradient(90deg,var(--blue),var(--blue-light));
  color:#062341;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mock__photo{
  position:relative;flex:1 1 auto;
  background-image:var(--mock-photo);
  background-size:cover;background-position:center;
  display:flex;flex-direction:column;justify-content:flex-end;gap:6px;
  padding:14px 16px;
  transition:transform .6s ease;
}
.portfolio-card:hover .mock__photo{transform:scale(1.06);}
.mock__photo::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,17,30,0.08),rgba(6,17,30,0.78));
}
.mock__scrollbar{
  position:absolute;top:10px;right:6px;bottom:10px;width:3px;
  background:rgba(255,255,255,0.18);border-radius:3px;
}
.mock__scrollbar::after{
  content:'';position:absolute;top:0;left:0;width:100%;height:35%;
  background:rgba(255,255,255,0.55);border-radius:3px;
}
.mock__nav{
  position:absolute;top:12px;left:16px;right:16px;
  display:flex;align-items:center;gap:6px;
}
.mock__navdot{width:14px;height:14px;border-radius:4px;background:rgba(255,255,255,0.9);flex-shrink:0;}
.mock__navline{height:5px;border-radius:3px;background:rgba(255,255,255,0.55);width:34px;}
.mock__navline--sm{width:20px;}
.mock__eyebrow{
  position:relative;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--blue-light);
}
.mock__headline{
  position:relative;font-family:var(--ff-head);font-weight:700;font-size:15px;color:#fff;
  line-height:1.25;text-shadow:0 2px 8px rgba(0,0,0,0.4);
}
.mock__overlay-btn{
  position:relative;display:inline-flex;align-self:flex-start;
  padding:6px 12px;border-radius:20px;font-size:11px;font-weight:700;
  background:linear-gradient(90deg,var(--blue),var(--blue-light));color:#062341;
}
.mock__rating{
  position:relative;font-size:10.5px;color:rgba(255,255,255,0.85);
  display:flex;align-items:center;gap:4px;margin-top:2px;
}
.mock__rating::before{content:'★★★★★';color:#FFC94D;font-size:10px;letter-spacing:1px;}

/* Split template: photo top, light content panel bottom.
   The photo's dark overlay is overridden here to fade into the panel's
   own light-blue background instead of cutting off abruptly at the seam. */
.mock--split{background:#EAF3FC;}
.mock__photo--half{flex:1 1 55%;justify-content:flex-start;padding:0;}
.mock--split .mock__photo::before{
  background:linear-gradient(180deg,rgba(6,17,30,0.1) 0%,rgba(6,17,30,0.02) 55%,rgba(234,243,252,0.98) 100%);
}
.mock__panel{
  flex:1 1 45%;background:#EAF3FC;color:var(--navy);
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:12px 16px;
}
.mock__panel-eyebrow{font-size:9.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--navy-2);}
.mock__panel-title{font-family:var(--ff-head);font-weight:700;font-size:14px;color:var(--navy);line-height:1.25;}
.mock__panel-features{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px;}
.mock__panel-features span{
  font-size:9px;font-weight:600;color:var(--navy-2);
  background:rgba(44,168,245,0.12);padding:3px 8px;border-radius:10px;
}
.mock__panel-btn{
  align-self:flex-start;margin-top:4px;padding:5px 12px;border-radius:20px;
  font-size:10.5px;font-weight:700;color:#fff;
  background:linear-gradient(90deg,var(--blue),var(--navy-2));
}
.portfolio-card__body{padding:20px 22px 24px;}
.portfolio-card__owner{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.portfolio-card__owner .avatar-initials{width:42px;height:42px;font-size:14px;}
.portfolio-card__owner h3{font-size:17px;margin-bottom:2px;}
.portfolio-card__owner p{color:var(--text-soft);font-size:13px;}
.tags{display:flex;gap:8px;flex-wrap:wrap;}
.tags span{
  font-size:11px;font-weight:600;background:rgba(44,168,245,0.12);color:var(--navy-2);
  padding:4px 10px;border-radius:20px;
}

/* ---------- Testimonials ---------- */
.testimonials{padding:110px 0;overflow:hidden;background:var(--bg-soft);}
.testimonials__viewport{margin-top:50px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,black 6%,black 94%,transparent);mask-image:linear-gradient(90deg,transparent,black 6%,black 94%,transparent);}
.testimonials__track{
  display:flex;gap:26px;width:max-content;
  animation:testiScroll 34s linear infinite;
}
.testimonials__viewport:hover .testimonials__track{animation-play-state:paused;}
@keyframes testiScroll{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}
.testimonial-card{
  width:340px;flex-shrink:0;
  background:var(--card);border-radius:var(--radius);padding:28px 26px;
  border:1px solid var(--border);
  box-shadow:0 10px 28px rgba(10,37,64,0.06);
  transition:transform .3s ease, border-color .3s ease;
}
.testimonial-card:hover{transform:translateY(-6px);border-color:rgba(44,168,245,0.35);}
.stars{color:#FFB930;font-size:15px;letter-spacing:2px;margin-bottom:12px;}
.testimonial-card p{font-size:15px;color:var(--text);margin-bottom:18px;min-height:75px;}
.testimonial-card__author{display:flex;align-items:center;gap:12px;}
.testimonial-card__author .avatar-initials{width:44px;height:44px;font-size:15px;}

/* Neutrale Initialen-Avatare statt Fotos fremder Personen */
.avatar-initials{
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;flex-shrink:0;
  background:var(--avatar-bg,var(--blue));
  border:2px solid var(--blue-light);
  color:#fff;font-weight:700;letter-spacing:0.5px;
  font-family:var(--ff-head);
}
.testimonial-card__author strong{display:block;font-size:14px;color:var(--text);}
.testimonial-card__author span{font-size:13px;color:var(--text-soft);}

/* ---------- Booking (kept as a bold dark CTA band on purpose) ---------- */
.booking{
  padding:110px 0;
  background:linear-gradient(160deg,var(--navy),var(--navy-2) 60%, #124a8f);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.booking__photo{
  position:absolute;inset:0;
  background-image:url('https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1600&h=1000&fit=crop&q=80');
  background-size:cover;background-position:center;
  filter:grayscale(1);
  opacity:0.22;
}
.booking::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle at 80% 20%, rgba(99,196,255,0.25), transparent 45%),
    linear-gradient(100deg, var(--navy) 0%, rgba(10,37,64,0.75) 45%, rgba(13,59,122,0.55) 100%);
}
.booking__inner{position:relative;display:grid;grid-template-columns:1fr 1.2fr;gap:60px;align-items:center;}
.booking__intro h2{color:#fff;margin:10px 0 16px;font-size:clamp(26px,3.6vw,36px);}
.booking__intro p{color:rgba(255,255,255,0.8);margin-bottom:20px;}
.booking__list li{padding:6px 0;color:rgba(255,255,255,0.9);font-size:15px;}

.booking__form{
  background:#163A60;border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:36px;color:#EAF3FC;
  box-shadow:0 30px 60px rgba(0,0,0,0.4);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.booking__form label{display:flex;flex-direction:column;font-size:13px;font-weight:600;color:#EAF3FC;gap:6px;margin-bottom:16px;}
.form-row label{margin-bottom:0;}
.booking__form input,.booking__form select,.booking__form textarea{
  background:#102E50;border:1.5px solid #254A72;border-radius:10px;padding:11px 13px;
  font-family:inherit;font-size:14px;color:#EAF3FC;font-weight:400;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.booking__form input::placeholder,.booking__form textarea::placeholder{color:#5F7995;}
.booking__form input:focus,.booking__form select:focus,.booking__form textarea:focus{
  outline:none;border-color:var(--blue-light);box-shadow:0 0 0 3px rgba(99,196,255,0.15);
}
.time-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;max-height:168px;overflow-y:auto;padding-right:4px;}
.time-slots button{
  border:1.5px solid #254A72;background:#102E50;border-radius:8px;
  padding:8px 6px;font-size:13px;font-weight:600;color:#EAF3FC;
  transition:all .2s ease;
}
.time-slots button:hover{border-color:var(--blue-light);color:var(--blue-light);transform:translateY(-2px);}
.time-slots button.active{
  background:linear-gradient(90deg,var(--blue),var(--navy-2));
  color:#fff;border-color:transparent;
}
.booking__form textarea{width:100%;resize:vertical;font-family:inherit;}
.booking__success{
  display:none;margin-top:14px;text-align:center;font-size:14px;font-weight:600;
  color:#7CE0A8;background:rgba(46,204,113,0.12);padding:12px;border-radius:10px;
  border:1px solid rgba(46,204,113,0.3);
}
.booking__success.show{display:block;animation:successPop .4s ease;}
@keyframes successPop{
  0%{opacity:0;transform:translateY(-8px) scale(0.96);}
  100%{opacity:1;transform:translateY(0) scale(1);}
}

/* ---------- About ---------- */
.about{padding:110px 0;}
.about__grid{
  display:grid;grid-template-columns:1.05fr 0.95fr;gap:60px;align-items:center;
}
.about__text{text-align:left;}
.about__text p{color:var(--text-soft);font-size:16px;margin:18px 0 30px;max-width:520px;}
.about__points{display:grid;gap:14px;}
.about__points div{
  display:flex;align-items:baseline;gap:10px;
  background:var(--card);border-radius:14px;padding:16px 20px;border:1px solid var(--border);
  box-shadow:0 10px 28px rgba(10,37,64,0.06);
  transition:transform .3s ease, border-color .3s ease;
}
.about__points div:hover{transform:translateX(4px);border-color:rgba(44,168,245,0.35);}
.about__points strong{color:var(--navy);font-family:var(--ff-head);white-space:nowrap;}
.about__points span{font-size:14px;color:var(--text-soft);}
.about__photo{
  position:relative;border-radius:24px;overflow:hidden;
  box-shadow:0 30px 60px rgba(10,37,64,0.18);
  aspect-ratio:4/5;
}
.about__photo img{width:100%;height:100%;object-fit:cover;}
.about__photo::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(44,168,245,0.18),transparent 40%);
  pointer-events:none;
}
.about__photo-badge{
  position:absolute;left:20px;bottom:20px;
  background:rgba(255,255,255,0.95);backdrop-filter:blur(6px);
  border-radius:14px;padding:12px 16px;
  box-shadow:0 12px 30px rgba(10,37,64,0.2);
  display:flex;align-items:center;gap:10px;
  animation:badgeFloat 4s ease-in-out infinite;
}
@keyframes badgeFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
}
.about__photo-badge strong{display:block;font-family:var(--ff-head);color:var(--navy);font-size:18px;}
.about__photo-badge span{display:block;font-size:11px;color:var(--text-soft);}

/* ---------- Footer ---------- */
.footer{background:#0C2843;color:#fff;padding-top:70px;border-top:1px solid #1D3A5C;}
.footer__inner{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:50px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.footer__brand p{color:rgba(255,255,255,0.5);font-size:13px;margin-top:14px;}
.footer__col h5{font-size:14px;text-transform:uppercase;letter-spacing:1px;margin-bottom:16px;color:rgba(255,255,255,0.5);}
.footer__col a{display:block;color:rgba(255,255,255,0.8);font-size:14px;margin-bottom:10px;transition:color .2s ease, transform .2s ease;}
.footer__col a:hover{color:var(--blue-light);transform:translateX(4px);}
.footer__social{display:flex;gap:10px;}
.footer__social a{
  width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,0.08);
  display:flex;align-items:center;justify-content:center;margin:0;
  color:#fff;
  transition:background .2s ease, transform .2s ease;
}
.footer__social a svg{width:18px;height:18px;}
.footer__social a:hover{background:var(--blue);transform:translateY(-4px) scale(1.08);}
.footer__whatsapp{color:#3FE07A !important;font-weight:600;}
.footer__whatsapp:hover{color:#3FE07A !important;}
.footer__bottom{padding:22px 0;font-size:13px;color:rgba(255,255,255,0.4);}
.footer__bottom-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
.footer__legal{display:flex;gap:18px;}
.footer__legal a{color:rgba(255,255,255,0.55);transition:color .2s ease;}
.footer__legal a:hover{color:#fff;}
@media (max-width:640px){.footer__bottom-inner{flex-direction:column;text-align:center;}}

/* ---------- Rechtsseiten (Impressum / Datenschutz) ---------- */
.legal-page{padding:160px 0 100px;min-height:60vh;}
.legal-page h1{font-size:clamp(28px,4vw,38px);margin-bottom:8px;}
.legal-page__updated{color:var(--text-soft);font-size:13px;margin-bottom:40px;}
.legal-page section{margin-bottom:36px;}
.legal-page h2{font-size:19px;margin-bottom:12px;color:var(--navy);}
.legal-page p{margin-bottom:12px;color:var(--text);}
.legal-page p.muted,.legal-page li.muted{color:var(--text-soft);}
.legal-page ul{margin:0 0 12px 20px;color:var(--text);}
.legal-page li{margin-bottom:6px;}
.legal-page a{color:var(--blue);text-decoration:underline;text-underline-offset:2px;}
.legal-page__back{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--navy);margin-bottom:30px;}

/* ---------- Floating WhatsApp button ---------- */
.whatsapp-float{
  position:fixed;right:22px;bottom:22px;z-index:400;
  width:60px;height:60px;border-radius:50%;
  background:#25D366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(37,211,102,0.45);
  transition:transform .25s ease, box-shadow .25s ease;
  animation:waPulse 2.4s ease-in-out infinite;
}
.whatsapp-float svg{width:34px;height:34px;}
.whatsapp-float:hover{transform:scale(1.08);box-shadow:0 10px 28px rgba(37,211,102,0.6);}
@keyframes waPulse{
  0%,100%{box-shadow:0 8px 24px rgba(37,211,102,0.45);}
  50%{box-shadow:0 8px 24px rgba(37,211,102,0.45), 0 0 0 10px rgba(37,211,102,0.15);}
}
@media (max-width:640px){
  .whatsapp-float{right:16px;bottom:16px;width:52px;height:52px;}
  .whatsapp-float svg{width:29px;height:29px;}
}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);}
.reveal.is-visible{opacity:1;transform:translateY(0);}
/* Direction variants — boxes slide in from the side instead of just fading up.
   These come after the base rule so they win the equal-specificity tie. */
.reveal--left{transform:translateX(-70px);}
.reveal--left.is-visible{transform:translateX(0);}
.reveal--right{transform:translateX(70px);}
.reveal--right.is-visible{transform:translateX(0);}
@media (max-width:960px){
  .reveal--left,.reveal--right{transform:translateY(28px);}
  .reveal--left.is-visible,.reveal--right.is-visible{transform:translateY(0);}
}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .nav{display:none;}
  .burger{display:flex;}
  .services__grid,.pricing,.portfolio__grid{grid-template-columns:1fr 1fr;}
  .about__grid{grid-template-columns:1fr;}
  .about__text{text-align:center;}
  .about__text p{margin-left:auto;margin-right:auto;}
  .about__points div{text-align:left;}
  .about__photo{max-width:420px;margin:0 auto;}
  .booking__inner{grid-template-columns:1fr;}
  .footer__inner{grid-template-columns:1fr 1fr;}
  .pricing-card--highlight{transform:none;}
}
@media (max-width:640px){
  .services__grid,.pricing,.portfolio__grid,.form-row{grid-template-columns:1fr;}
  .footer__inner{grid-template-columns:1fr;}
  .hero{padding:150px 0 90px;}
  .btn--nav{display:none;}
}


/* Cal.com Terminbuchung Embed */
.booking__form--cal{
  background:#fff;
  padding:14px;
  width:100%;
  max-width:620px;
  margin:0 auto;
  box-shadow:0 30px 60px rgba(0,0,0,0.4);
  position:relative;
}
/* Die Kalender-Karte (weiße Box) bleibt breit, aber der eingebettete
   Kalender selbst wird schmaler und zentriert gerendert. Cal.com schaltet
   je nach eigener Breite automatisch um: unter ca. 500-600px zeigt es nur
   den Kalender und blendet die Uhrzeiten erst nach Tap auf einen Tag ein
   (statt sie dauerhaft daneben anzuzeigen) - genau das gewuenschte
   kompaktere Verhalten, plus kleinere Tageszellen "for free". */
#my-cal-inline-30min{width:100%;height:480px;border-radius:12px;overflow:auto;}
#my-cal-inline-30min iframe{
  width:380px !important;
  max-width:100%;
  margin:0 auto;
  display:block;
  max-height:480px;
}
@media (max-width:720px){
  #my-cal-inline-30min iframe{width:100% !important;}
  #my-cal-inline-30min,#my-cal-inline-30min iframe{height:560px;max-height:560px;}
}

.cal-skeleton{
  position:absolute;inset:14px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:#fff;border-radius:12px;z-index:2;
}
.cal-skeleton__spinner{
  width:34px;height:34px;border-radius:50%;
  border:3px solid #E2ECF7;border-top-color:var(--blue);
  animation:calSpin .8s linear infinite;
}
.cal-skeleton p{color:var(--navy);font-size:13px;font-weight:600;margin:0;}
@keyframes calSpin{to{transform:rotate(360deg);}}