/* =================================================================
   Bavaria Hausmeisterservice — SKELETON styles
   Dark Bavarian + ice-neon accents. Mobile-first. NO effects yet.
   ================================================================= */

/* ---- Design tokens -------------------------------------------- */
:root {
  /* Surfaces — dark, near-black blue */
  --bg: #0a0e1a;
  --surface: #111727;
  --surface-2: #161d30;
  --border: rgba(255, 255, 255, 0.08);

  /* Text */
  --text: #f0f4fa;
  --text-dim: #9aa6bd;

  /* Accents — ice blue / silver */
  --accent: #4ea8ff;
  --accent-2: #7cc6ff;
  --accent-deep: #2d7fe0;
  --accent-glow: rgba(78, 168, 255, 0.35);
  --accent-glow-strong: rgba(78, 168, 255, 0.55);
  --silver: #c7d2e0;

  /* Electric royal-blue neon ("hidden lamps") */
  --neon-royal: #2348e0;
  --neon-royal-bright: #3a5cff;
  --neon-cyan-rim: #5b9cff;

  /* Glass + neon gradients */
  --glass: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.07),
    rgba(255, 255, 255, 0.02)
  );
  --glass-border: rgba(255, 255, 255, 0.12);
  --neon-line: linear-gradient(
    90deg,
    transparent,
    var(--accent),
    var(--accent-2),
    var(--accent),
    transparent
  );

  /* WhatsApp brand */
  --whatsapp: #25d366;

  /* Layout */
  --maxw: 1140px;
  --radius: 14px;
  --gap: 1.25rem;
  --header-h: 68px;

  /* Type */
  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
}

/* ---- Reset / base --------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  line-height: 1.15;
  font-weight: 700;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.25rem;
}

section {
  /* Smooth vertical rhythm: tight on phone (~40px), airy on desktop (80px),
     no jump at any breakpoint → no empty navy stretches. */
  padding: clamp(2.5rem, 7vw, 5rem) 0;
}

.section-title {
  font-size: clamp(1.5rem, 5vw, 2.25rem);
  margin-bottom: 1.75rem;
}

/* ---- Placeholder helper (visible skeleton boxes) -------------- */
.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  color: var(--text-dim);
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  border-radius: var(--radius);
}

/* ---- Buttons -------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.4rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn {
  position: relative;
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s;
}

.btn-primary {
  background: var(--accent);
  color: #051120;
  overflow: hidden;
}

.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, 0.55),
    transparent
  );
  transform: skewX(-18deg);
  animation: shine 4.5s ease-in-out infinite;
}

@keyframes shine {
  0%,
  62% {
    left: -120%;
  }
  82%,
  100% {
    left: 130%;
  }
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 44px var(--accent-glow);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border);
  color: var(--text);
  backdrop-filter: blur(6px);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
}

.btn-ico {
  flex-shrink: 0;
  display: block;
}

.btn-phone {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
  font-size: 0.85rem;
  white-space: nowrap;
}

/* ============================================================= */
/* 1. HEADER                                                      */
/* ============================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(10, 14, 26, 0.9);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.logo-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--accent);
}

.logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.1;
}

.logo-text small {
  font-weight: 500;
  font-size: 0.7rem;
  color: var(--text-dim);
}

/* Real brand logo in header (replaces the "BH" placeholder mark) */
.logo-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 10px rgba(78, 168, 255, 0.35));
  transition:
    transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.3s ease;
}
.logo:hover .logo-img {
  transform: scale(1.06) rotate(-2deg);
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.6))
    drop-shadow(0 0 18px rgba(78, 168, 255, 0.6));
}

.main-nav {
  display: none;
  gap: 1.5rem;
}

.main-nav a {
  font-size: 0.95rem;
  color: var(--text-dim);
}

.main-nav a:hover {
  color: var(--text);
}

.btn-phone {
  display: none;
}

/* Hamburger */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 0 auto;
  background: var(--text);
}

/* ============================================================= */
/* 2. HERO — full-bleed photo bg + text over it (GlanzWerk style)  */
/* ============================================================= */
.hero {
  position: relative;
  min-height: 106svh;
  display: flex;
  align-items: flex-end; /* текст долу-ляво върху снимката */
  overflow: hidden;
  padding: 0;
  perspective: 1300px;
  background:
    radial-gradient(
      120% 90% at 78% 12%,
      var(--accent-glow) 0%,
      rgba(10, 14, 26, 0) 55%
    ),
    linear-gradient(165deg, var(--surface) 0%, var(--bg) 60%);
}

/* Depth layers — one transform per node (no conflict) */
.hero-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  transform-style: preserve-3d;
}

.hero-tilt {
  position: absolute;
  inset: 0;
  will-change: transform;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-parallax {
  position: absolute;
  inset: -8%;
  will-change: transform;
}

.hero-photo {
  position: absolute;
  inset: 0;
  background-color: #07101f;
  background-image: url("assets/images/hero/hero-arbeiter-bus.webp");
  background-size: cover;
  background-position: center 20%; /* работникът висок и видим */
  transform-origin: 55% 40%;
  /* по-богата, „скъпа" обработка — момчето по-светло, без да изпира кадъра */
  filter: contrast(1.05) saturate(1.08) brightness(1.08);
  animation: kenburns 30s ease-in-out infinite alternate;
  will-change: transform;
}

/* по-малък zoom = по-остра, по-качествена снимка */
@keyframes kenburns {
  0% {
    transform: scale(1.04) translate3d(0, 0, 0);
  }
  100% {
    transform: scale(1.1) translate3d(-1.8%, -1.4%, 0);
  }
}

/* (1) Силуетен rim-light: прозрачен изрез на работника, наслоен ПИКСЕЛ-В-ПИКСЕЛ
   върху снимката (същата геометрия) — drop-shadow в акцентно синьо рисува
   само ръба на силуета и „отлепя" момчето от буса = кинематографичен ореол. */
.hero-figure {
  position: absolute;
  inset: 0;
  background-image: url("assets/images/hero/hero-arbeiter-bus-cutout.webp");
  background-size: cover;
  background-position: center 20%;
  transform-origin: 55% 40%;
  /* същата обработка като снимката, за безшевно сливане + неонов ръб */
  filter: contrast(1.05) saturate(1.08) brightness(1.08)
    drop-shadow(0 0 1px var(--accent-2, #7cc6ff))
    drop-shadow(0 0 14px var(--accent-glow, rgba(78, 168, 255, 0.35)))
    drop-shadow(0 0 36px rgba(78, 168, 255, 0.22));
  /* синхрон с kenburns на снимката (стартират заедно при load) */
  animation: kenburns 30s ease-in-out infinite alternate;
  will-change: transform, filter;
  pointer-events: none;
}

/* анимируеми custom props за плавно следване на неона (без JS rAF цикъл) */
@property --neon-x {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 90%;
}
@property --neon-y {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 44%;
}

/* (3) Day/Night hero grade — авто по локалния час на посетителя.
   dawn = по-топъл кадър + кехлибарен ръб; night = по-студен + по-силен неон. */
.hero[data-daypart="dawn"] .hero-photo {
  filter: contrast(1.04) saturate(1.12) brightness(1.1) sepia(0.1)
    hue-rotate(-8deg);
}
.hero[data-daypart="dawn"] .hero-figure {
  filter: contrast(1.04) saturate(1.12) brightness(1.1) sepia(0.1)
    hue-rotate(-8deg) drop-shadow(0 0 1px #ffd9a8)
    drop-shadow(0 0 14px rgba(255, 184, 107, 0.34))
    drop-shadow(0 0 34px rgba(255, 160, 80, 0.2));
}
.hero[data-daypart="night"] .hero-photo {
  filter: contrast(1.07) saturate(1.04) brightness(1.04) hue-rotate(6deg);
}
.hero[data-daypart="night"] .hero-figure {
  filter: contrast(1.07) saturate(1.04) brightness(1.04) hue-rotate(6deg)
    drop-shadow(0 0 1px #add4ff) drop-shadow(0 0 18px rgba(78, 168, 255, 0.5))
    drop-shadow(0 0 44px rgba(78, 168, 255, 0.3));
}
/* Veil: по-тъмно ляво + долу (четим текст), по-светло вдясно/горе (работникът личи) */
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* (2) неонът следва курсора: позицията се води от --neon-x/--neon-y,
     които JS обновява леко при mouse/тилт (само desktop, GPU-евтино) */
  --neon-x: 90%;
  --neon-y: 44%;
  transition:
    --neon-x 0.22s ease-out,
    --neon-y 0.22s ease-out;
  background:
    /* лек неонов ръб — „хваща" момчето с марковия акцент, следва курсора */
    radial-gradient(
      80% 95% at var(--neon-x) var(--neon-y),
      rgba(78, 168, 255, 0.16) 0%,
      rgba(78, 168, 255, 0.06) 34%,
      rgba(78, 168, 255, 0) 60%
    ),
    /* cinematic vignette — рамкира кадъра, по-меко (момчето личи) */
    radial-gradient(
        130% 120% at 62% 38%,
        rgba(0, 0, 0, 0) 48%,
        rgba(5, 8, 16, 0.4) 100%
      ),
    /* ляво тъмно за четим текст, дясно по-чисто (работникът личи) */
    linear-gradient(
        100deg,
        rgba(10, 14, 26, 0.92) 0%,
        rgba(10, 14, 26, 0.64) 40%,
        rgba(10, 14, 26, 0.14) 72%,
        rgba(10, 14, 26, 0.3) 100%
      ),
    /* безшевно сливане надолу в страницата */
    linear-gradient(
        to bottom,
        rgba(10, 14, 26, 0.5) 0%,
        rgba(10, 14, 26, 0) 30%,
        rgba(10, 14, 26, 0.45) 70%,
        var(--bg) 100%
      );
}

#particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.hero-grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0.05;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.hero-wrap {
  position: relative;
  z-index: 4;
  width: 100%;
  padding-top: 120px;
  padding-bottom: 56px;
}

/* Текст директно върху снимката (без кутия) */
.hero-content {
  max-width: 600px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.1rem;
}

/* Hero brand emblem — brutal-beautiful: neon glow + float + drop-shadow */
.hero-emblem {
  position: relative;
  width: clamp(96px, 22vw, 140px);
  height: clamp(96px, 22vw, 140px);
  margin: 0 0 1.4rem;
  animation: emblemFloat 6s ease-in-out infinite;
  will-change: transform;
}
.hero-emblem::before {
  content: "";
  position: absolute;
  inset: -28%;
  background: radial-gradient(
    circle,
    rgba(78, 168, 255, 0.55) 0%,
    rgba(78, 168, 255, 0.18) 38%,
    transparent 70%
  );
  filter: blur(8px);
  z-index: -1;
  animation: emblemPulse 4.5s ease-in-out infinite;
}
.hero-emblem img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.6))
    drop-shadow(0 0 16px rgba(78, 168, 255, 0.45));
}
@keyframes emblemFloat {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-9px) rotate(1.5deg);
  }
}
@keyframes emblemPulse {
  0%,
  100% {
    opacity: 0.75;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

.hero h1 {
  font-size: clamp(2.1rem, 8vw, 3.4rem);
  max-width: 18ch;
  margin: 0 0 1.1rem;
}

.hero h1 .ln {
  display: block;
  overflow: hidden;
}

.hero h1 .ln > span {
  display: block;
  background: linear-gradient(
    100deg,
    #e8eefc 0%,
    #ffffff 18%,
    #aab8d4 34%,
    #ffffff 52%,
    #d4def0 70%,
    #ffffff 100%
  );
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.55));
  animation: heroSheen 7s ease-in-out infinite;
}

.hero h1 .accent {
  font-style: italic;
  font-weight: 700;
  background: linear-gradient(
    100deg,
    var(--accent) 0%,
    #bfe0ff 22%,
    var(--accent-2, #3a5cff) 46%,
    #bfe0ff 64%,
    var(--accent) 100%
  );
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px var(--accent-glow));
  animation: heroSheenAccent 7s ease-in-out infinite;
}

@keyframes heroSheen {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes heroSheenAccent {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.hero-lead {
  color: var(--silver);
  font-size: 1.05rem;
  line-height: 1.55;
  max-width: 44ch;
  margin-bottom: 1.75rem;
}

.hero-cta {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}

/* iOS gyroscope opt-in button */
.hero-3dbtn {
  display: none;
  margin-top: 1.4rem;
  align-items: center;
  gap: 0.5rem;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-dim);
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition:
    background 0.3s,
    border-color 0.3s;
}

.hero-3dbtn.is-available {
  display: inline-flex;
}

.hero-3dbtn:hover {
  background: rgba(78, 168, 255, 0.14);
  border-color: var(--accent);
}

.hero-3dbtn .gyro-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}

/* ============================================================= */
/* 3 & 6. CARD GRID (Leistungen + Stimmen)                       */
/* ============================================================= */
.cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

/* Изравнени височини на 4-те Leistungen карти */
.leistungen .cards-grid {
  grid-auto-rows: 1fr;
}
.leistungen .serv {
  height: 100%;
}

.sec-head {
  margin-bottom: 2rem;
}
.sec-head .eyebrow {
  margin-bottom: 0.6rem;
}
.sec-head .section-title {
  margin-bottom: 0.6rem;
}
.sec-lead {
  color: var(--text-dim);
  max-width: 52ch;
  font-size: 1.02rem;
}

/* ---- Premium photo service cards (Leistungen) ---------------- */
.serv {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.6rem;
  color: #fff;
  background: linear-gradient(160deg, var(--surface-2), var(--bg));
  border: 1px solid var(--border);
  transform: translateZ(0);
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s,
    border-color 0.4s;
  will-change: transform;
  /* Always-on neon halo (outer glow leaks past the frame, like the TikTok card) */
  box-shadow:
    0 0 0 1.5px rgba(0, 229, 255, 0.6),
    0 0 20px rgba(0, 229, 255, 0.5),
    0 0 50px rgba(78, 168, 255, 0.34),
    0 0 95px rgba(0, 229, 255, 0.2),
    0 18px 42px rgba(0, 0, 0, 0.46);
}
.serv-ph {
  position: absolute;
  inset: -5%;
  z-index: 0;
  background-size: cover;
  background-position: center 25%;
  opacity: 0.92;
  transform: scale(1);
  transition:
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.4s;
}
/* Renovierung (портрет): котвим към горе → валякът + ръката + главата се виждат, не само лице */
.serv:nth-child(1) .serv-ph {
  background-position: center 2%;
}
/* Entrümpelung (портрет): лицето е горе-вдясно → изместваме надясно и нагоре */
.serv:nth-child(2) .serv-ph {
  background-position: 60% 10%;
}
/* Gartenpflege (пейзаж): главата е горе → котвим към горния край да не реже главата */
.serv:nth-child(4) .serv-ph {
  background-position: center 6%;
}
.serv::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(10, 14, 26, 0) 0%,
    rgba(10, 14, 26, 0) 42%,
    rgba(10, 14, 26, 0.45) 62%,
    rgba(10, 14, 26, 0.92) 100%
  );
}
/* Entrümpelung: по-лек veil — лицето горе остава светло, тъмно само най-долу за текста */
.serv:nth-child(2)::after {
  background: linear-gradient(
    180deg,
    rgba(10, 14, 26, 0) 0%,
    rgba(10, 14, 26, 0) 58%,
    rgba(10, 14, 26, 0.4) 74%,
    rgba(10, 14, 26, 0.9) 100%
  );
}
/* Brutal cyan→blue neon frame (TikTok-style glowing tube around the photo) */
.serv::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 2px; /* frame thickness */
  background: linear-gradient(
    125deg,
    #00e5ff 0%,
    #4ea8ff 26%,
    #8be9ff 50%,
    #4ea8ff 74%,
    #00e5ff 100%
  );
  background-size: 300% 300%;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation:
    servNeonFlow 6.5s linear infinite,
    servNeonPulse 3.4s ease-in-out infinite;
}
@keyframes servNeonFlow {
  to {
    background-position: 300% 50%;
  }
}
@keyframes servNeonPulse {
  0%,
  100% {
    opacity: 0.78;
  }
  50% {
    opacity: 1;
  }
}

.serv:hover,
.serv:active,
.serv.is-touched {
  transform: translateY(-6px);
  border-color: transparent;
  /* Crank the glow — most brutal on interaction */
  box-shadow:
    0 0 0 2px rgba(0, 229, 255, 1),
    0 0 32px rgba(0, 229, 255, 0.82),
    0 0 75px rgba(78, 168, 255, 0.58),
    0 0 130px rgba(0, 229, 255, 0.32),
    0 26px 60px rgba(0, 0, 0, 0.5);
}
.serv:hover::before,
.serv:active::before,
.serv.is-touched::before {
  animation-duration: 2.6s, 1.8s;
  opacity: 1;
}
.serv:hover .serv-ph,
.serv:active .serv-ph,
.serv.is-touched .serv-ph {
  transform: scale(0.92);
  opacity: 1;
}
.serv-inner {
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}
.serv-ic {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  margin-bottom: 1.1rem;
  color: var(--accent);
  background: rgba(10, 14, 26, 0.55);
  border: 1px solid rgba(78, 168, 255, 0.6);
  box-shadow: 0 0 24px rgba(78, 168, 255, 0.18);
  backdrop-filter: blur(4px);
  text-shadow: none;
  backdrop-filter: blur(4px);
}
.serv-ic svg {
  width: 26px;
  height: 26px;
}
.serv h3 {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 700;
  margin-bottom: 0.45rem;
}
.serv .desc {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.96rem;
  line-height: 1.5;
}

/* ---- Trust strip under the service cards --------------------- */
.serv-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.9rem;
  margin-top: calc(var(--gap) + 0.75rem);
  padding: 0.95rem 1.25rem;
  border-radius: var(--radius);
  background: rgba(78, 168, 255, 0.06);
  border: 1px solid var(--border);
  color: var(--text-dim);
  text-decoration: none;
  transition:
    border-color 0.35s,
    background 0.35s,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.serv-trust:hover,
.serv-trust:active {
  border-color: var(--accent);
  background: rgba(78, 168, 255, 0.1);
  transform: translateY(-2px);
}
.serv-trust-stars {
  color: #ffc83d;
  letter-spacing: 0.12em;
  font-size: 1.02rem;
  text-shadow: 0 0 14px rgba(255, 200, 61, 0.35);
}
.serv-trust-text {
  flex: 1 1 100%;
  font-size: 0.96rem;
}
.serv-trust-text strong {
  color: var(--text);
}
.serv-trust-link {
  margin-left: 0;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
}
/* Mobile = clean stack (stars / text / link, all left-aligned).
   Desktop = single row, link pushed to the right edge. */
@media (min-width: 760px) {
  .serv-trust-text {
    flex: 0 1 auto;
  }
  .serv-trust-link {
    margin-left: auto;
  }
}

.review {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.review p {
  color: var(--text-dim);
}

.review footer {
  margin-top: 0.75rem;
  color: var(--silver);
  font-weight: 600;
  font-size: 0.9rem;
}

/* ============================================================= */
/* 4. VORHER / NACHHER — interaktiver Before/After-Regler         */
/* ============================================================= */
.ba-tabs {
  margin-top: clamp(1.6rem, 4vw, 2.4rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1.4rem;
}

.ba-tab {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--silver);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.55rem 1.15rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    color 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.2s ease;
}

.ba-tab:hover {
  color: #fff;
  border-color: var(--accent-glow);
}

.ba-tab.active {
  color: var(--bg);
  background: var(--accent);
  border-color: transparent;
  box-shadow: 0 8px 20px var(--accent-glow);
}

.ba-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.ba {
  --pos: 50%;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  user-select: none;
  touch-action: pan-y;
  cursor: ew-resize;
  border: 1px solid var(--border);
  background: var(--surface-2);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}

@media (min-width: 760px) {
  .ba {
    aspect-ratio: 3 / 2;
  }
}

.ba-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: opacity 0.4s ease;
}

.ba-after {
  z-index: 0;
}

.ba-before {
  z-index: 1;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

/* кратък fade при смяна на пример */
.ba.is-switch .ba-after,
.ba.is-switch .ba-before {
  opacity: 0;
}

/* RGB Split (chromatic aberration) — само при смяна на таб */
.ba-rgb {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-size: cover;
  background-position: center;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.ba-rgb-r {
  filter: sepia(1) saturate(9) hue-rotate(-18deg);
}

.ba-rgb-c {
  filter: sepia(1) saturate(9) hue-rotate(150deg);
}

@media (prefers-reduced-motion: reduce) {
  .ba-rgb {
    display: none;
  }
}

.ba-tag {
  position: absolute;
  top: 1rem;
  z-index: 3;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.34rem 0.78rem;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}

.ba-tag.vor {
  left: 1rem;
  color: #fff;
  background: rgba(10, 14, 26, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.ba-tag.nach {
  right: 1rem;
  color: var(--bg);
  background: var(--accent);
  box-shadow: 0 0 16px var(--accent-glow);
}

.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  z-index: 4;
  width: 3px;
  transform: translateX(-50%);
  background: linear-gradient(
    180deg,
    transparent,
    var(--accent) 12%,
    #9ccbff 50%,
    var(--accent) 88%,
    transparent
  );
  box-shadow: 0 0 14px rgba(78, 168, 255, 0.7);
  cursor: ew-resize;
}

.ba-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(10, 14, 26, 0.7);
  border: 2px solid var(--accent);
  box-shadow:
    0 0 0 6px rgba(78, 168, 255, 0.14),
    0 8px 22px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  color: var(--accent);
  transition: transform 0.25s ease;
}

.ba.is-drag .ba-knob {
  transform: translate(-50%, -50%) scale(0.93);
}

.ba-knob svg {
  width: 26px;
  height: 26px;
}

.ba-cap {
  margin-top: 1.1rem;
  text-align: center;
}

.ba-cap b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.18rem;
  color: #fff;
  letter-spacing: -0.01em;
}

.ba-cap span {
  display: block;
  margin-top: 0.18rem;
  font-size: 0.92rem;
  color: var(--text-dim);
}

.ba-hint {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--text-dim);
  text-align: center;
}

/* ============================================================= */
/* 4b. EINBLICKE — 3D-Foto zum Drehen (finger-drag)              */
/* ============================================================= */
.einblicke {
  padding: clamp(3.5rem, 9vw, 6.5rem) 0;
  position: relative;
  overflow: hidden;
}
.einblicke::after {
  /* atmosphärischer Neon-Schimmer hinter der Karte */
  content: "";
  position: absolute;
  left: 50%;
  top: 52%;
  width: min(680px, 90vw);
  height: min(680px, 90vw);
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(78, 168, 255, 0.16),
    transparent 62%
  );
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}
/* 3D-Coverflow: Ring aus Karten in der Tiefe, per Finger drehbar */
.cf {
  position: relative;
  z-index: 1;
  margin-top: clamp(2rem, 5vw, 3.4rem);
  perspective: 1500px;
  perspective-origin: 50% 46%;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.cf.is-grab {
  cursor: grabbing;
}
.cf-stage {
  position: relative;
  height: clamp(340px, 82vw, 540px);
  transform-style: preserve-3d;
}
.cf-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(280px, 66vw);
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: var(--surface-2);
  transform-style: preserve-3d;
  will-change: transform, opacity;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 30px 64px rgba(0, 0, 0, 0.55);
  /* transform inkl. translate(-50%,-50%) wird per JS gesetzt */
}
/* Verlauf unten für Tiefe + Lesbarkeit, dunkler bei Nachbarkarten */
.cf-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to top,
    rgba(5, 8, 15, 0.6),
    rgba(5, 8, 15, 0.12) 42%,
    transparent 66%
  );
  transition: opacity 0.3s ease;
}
/* wandernder Glanz auf der aktiven Karte */
.cf-card .cf-sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgba(255, 255, 255, 0.42) 50%,
    transparent 62%
  );
  mix-blend-mode: screen;
  transition: opacity 0.35s ease;
}
.cf-card.is-active {
  border-color: rgba(78, 168, 255, 0.55);
  box-shadow:
    0 0 0 1px rgba(78, 168, 255, 0.5),
    0 0 44px rgba(78, 168, 255, 0.48),
    0 44px 96px rgba(0, 0, 0, 0.62);
}
.cf-card.is-active::after {
  opacity: 0.55;
}
.cf-card.is-active .cf-sheen {
  opacity: 1;
}
/* Pfeil-Navigation */
.cf-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(10, 14, 26, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--text);
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}
.cf-nav svg {
  width: 22px;
  height: 22px;
}
.cf-nav:hover {
  background: rgba(78, 168, 255, 0.22);
  border-color: var(--accent);
}
.cf-nav:active {
  transform: translateY(-50%) scale(0.92);
}
.cf-prev {
  left: 0.2rem;
}
.cf-next {
  right: 0.2rem;
}
.cf-hint {
  position: absolute;
  left: 50%;
  bottom: -0.4rem;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.86rem;
  color: var(--text-dim);
  white-space: nowrap;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.cf-hint svg {
  width: 18px;
  height: 18px;
  stroke: var(--accent);
}
.cf.is-touched .cf-hint {
  opacity: 0;
}
.cf-tag {
  position: relative;
  z-index: 1;
  margin: 1.6rem auto 0;
  width: max-content;
  max-width: 90%;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  background: rgba(10, 14, 26, 0.6);
  border: 1px solid rgba(78, 168, 255, 0.28);
  backdrop-filter: blur(6px);
}
.cf-dots {
  position: relative;
  z-index: 1;
  margin-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}
.cf-dot {
  width: 54px;
  height: 54px;
  padding: 0;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--border);
  cursor: pointer;
  opacity: 0.5;
  filter: saturate(0.7);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}
.cf-dot:hover {
  opacity: 0.85;
}
.cf-dot.active {
  opacity: 1;
  filter: none;
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px var(--accent-glow);
}
@media (min-width: 760px) {
  .cf-card {
    width: min(330px, 30vw);
  }
  .cf-nav {
    width: 52px;
    height: 52px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cf-card .cf-sheen {
    display: none;
  }
}

/* ============================================================= */
/* 5. ABLAUF                                                      */
/* ============================================================= */
.steps {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

.step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.step-num {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 0.75rem;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
}

.step h3 {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}

.step p {
  color: var(--text-dim);
}

/* ============================================================= */
/* 7. ANFRAGE form                                                */
/* ============================================================= */
.anfrage-form {
  display: grid;
  gap: 1.1rem;
  max-width: 560px;
}

.field {
  display: grid;
  gap: 0.4rem;
}

.field label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--silver);
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-dim);
}

.field input:focus,
.field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ============================================================= */
/* 8. KONTAKT                                                     */
/* ============================================================= */
.kontakt-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  align-items: start;
}

.kontakt-info {
  font-style: normal;
  display: grid;
  gap: 0.6rem;
  color: var(--text-dim);
}

.kontakt-info a {
  color: var(--accent);
}

.btn-whatsapp-big {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.5rem;
  background: var(--whatsapp);
  color: #06301a;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
}

/* ============================================================= */
/* 9. FOOTER                                                      */
/* ============================================================= */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 2rem 0;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  text-align: center;
}

.footer-nav {
  display: flex;
  gap: 1.5rem;
}

.footer-nav a {
  color: var(--text-dim);
  font-size: 0.9rem;
}

.copyright {
  color: var(--text-dim);
  font-size: 0.85rem;
}

/* ============================================================= */
/* 10. FLOATING WHATSAPP                                          */
/* ============================================================= */
.whatsapp-float {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 200;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: var(--whatsapp);
  color: #06301a;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 800;
}

/* ============================================================= */
/* RESPONSIVE — tablet / desktop                                  */
/* ============================================================= */
@media (min-width: 768px) {
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Широки карти на десктоп → портретните снимки показват тясна ивица.
     Сваляме кадъра малко надолу, за да е центриран работникът, не празна стена. */
  .serv:nth-child(1) .serv-ph {
    background-position: center 16%;
  }
  .serv:nth-child(2) .serv-ph {
    background-position: 60% 16%;
  }

  .steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .kontakt-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-inner {
    flex-direction: row;
    justify-content: space-between;
  }
}

@media (min-width: 960px) {
  .main-nav {
    display: flex;
  }

  .btn-phone {
    display: inline-flex;
  }

  .nav-toggle {
    display: none;
  }

  .steps {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Full-bleed hero on desktop: повече въздух, по-голямо заглавие */
  .hero-wrap {
    padding-bottom: 76px;
  }

  .hero-content {
    max-width: 640px;
  }

  .hero h1 {
    font-size: clamp(2.6rem, 4.4vw, 4rem);
  }
}

/* Mobile nav open state (toggled by script.js) */
.main-nav.open {
  display: flex;
  position: absolute;
  top: var(--header-h);
  left: 0;
  right: 0;
  flex-direction: column;
  gap: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0.5rem 1.25rem 1rem;
}

.main-nav.open a {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}

/* ============================================================= */
/* 11. PREMIUM POLISH — glass · neon · centered headers · aurora  */
/* CSS-only. GPU-friendly. No JS-coupled class renamed.           */
/* ============================================================= */

/* --- Aurora / mesh neon atmosphere (fixed, behind everything) - */
body {
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(
      42% 40% at 16% 10%,
      rgba(58, 92, 255, 0.28),
      transparent 70%
    ),
    radial-gradient(
      46% 42% at 90% 26%,
      rgba(35, 72, 224, 0.26),
      transparent 72%
    ),
    radial-gradient(
      55% 48% at 50% 104%,
      rgba(91, 156, 255, 0.18),
      transparent 70%
    );
  filter: blur(10px);
  will-change: transform;
  animation: auroraDrift 26s ease-in-out infinite alternate;
}
/* Hidden neon "lamps" — bright concentrated electric-royal glows */
body::after {
  content: "";
  position: fixed;
  inset: -25%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(
      24% 19% at 5% 44%,
      rgba(91, 156, 255, 0.7),
      rgba(35, 72, 224, 0.3) 36%,
      transparent 64%
    ),
    radial-gradient(
      22% 17% at 99% 62%,
      rgba(91, 156, 255, 0.66),
      rgba(35, 72, 224, 0.28) 38%,
      transparent 66%
    ),
    radial-gradient(30% 15% at 72% 3%, rgba(58, 92, 255, 0.55), transparent 62%);
  filter: blur(30px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
  animation: neonLamps 18s ease-in-out infinite alternate;
}
@keyframes auroraDrift {
  0% {
    transform: translate3d(-2%, -1%, 0) scale(1);
  }
  100% {
    transform: translate3d(2%, 2%, 0) scale(1.08);
  }
}
@keyframes neonLamps {
  0% {
    transform: translate3d(-3%, 2%, 0) scale(1);
    opacity: 0.85;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate3d(3%, -2%, 0) scale(1.1);
    opacity: 0.9;
  }
}

/* --- Hairline neon separators between sections ---------------- */
.leistungen,
.einblicke,
.vorher-nachher,
.ablauf,
.stimmen,
.anfrage,
.kontakt {
  position: relative;
}
.leistungen::before,
.einblicke::before,
.vorher-nachher::before,
.ablauf::before,
.stimmen::before,
.anfrage::before,
.kontakt::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(680px, 82%);
  height: 1px;
  background: var(--neon-line);
  opacity: 0.5;
}

/* --- Centered section headers (kill left-aligned empty space) - */
.sec-head {
  text-align: center;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.sec-head .sec-lead {
  margin-inline: auto;
}
/* bare titles (Ablauf / Stimmen / Anfrage / Kontakt) */
.ablauf > .container > .section-title,
.stimmen > .container > .section-title,
.anfrage > .container > .section-title,
.kontakt > .container > .section-title {
  text-align: center;
  margin-bottom: clamp(1.6rem, 4vw, 2.5rem);
}
/* neon underline accent under every section title */
.section-title {
  position: relative;
  padding-bottom: 0.85rem;
}
.section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 64px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent-2));
  box-shadow: 0 0 18px var(--accent-glow-strong);
}
/* flanking neon ticks around the eyebrow */
.sec-head .eyebrow {
  position: relative;
  padding: 0 1.6rem;
}
.sec-head .eyebrow::before,
.sec-head .eyebrow::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1.1rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
}
.sec-head .eyebrow::before {
  left: 0;
  transform: rotate(180deg);
}
.sec-head .eyebrow::after {
  right: 0;
}

/* --- Glassmorphism: review / step / kontakt / form ------------ */
.review,
.step,
.kontakt-info {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s ease,
    border-color 0.4s ease;
  will-change: transform;
}
.kontakt-info {
  padding: 1.6rem;
  border-radius: var(--radius);
}
.review:hover,
.step:hover {
  transform: translateY(-6px);
  border-color: var(--accent-glow-strong);
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.5),
    0 0 30px var(--accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* conic neon glow border on review + step (masked, GPU) */
.review,
.step {
  position: relative;
  isolation: isolate;
}
.review::after,
.step::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from 120deg,
    transparent 0deg,
    var(--accent) 80deg,
    var(--accent-2) 140deg,
    transparent 220deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: -1;
}
.review:hover::after,
.step:hover::after {
  opacity: 0.9;
}

/* Google-style star rating on reviews */
.review-stars {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 1rem;
  letter-spacing: 0.12em;
  color: #ffc24b;
  text-shadow: 0 0 12px rgba(255, 194, 75, 0.45);
}

/* ============================================================= */
/* GOOGLE REVIEWS WIDGET                                          */
/* ============================================================= */
.g-summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: 560px;
  margin: 0 auto 2.25rem;
  padding: 1rem 1.35rem;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.g-logo {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
}
.g-summary-text {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.g-rating {
  font-family: var(--font-display, "Sora", sans-serif);
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
}
.g-summary .g-stars {
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  color: #ffc24b;
  text-shadow: 0 0 12px rgba(255, 194, 75, 0.45);
}
.g-count {
  flex-basis: 100%;
  font-size: 0.82rem;
  color: var(--text-dim);
}

/* real Google rating summary (5,0 · 3 Rezensionen) */
.g-rating-summary {
  max-width: 580px;
}
.g-score {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: 1;
  min-width: 0;
}
.g-score-num {
  font-family: var(--font-display, "Sora", sans-serif);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
}
.g-score-right {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.g-score-stars {
  font-size: 1.15rem;
  letter-spacing: 0.12em;
  color: #ffc24b;
  text-shadow: 0 0 12px rgba(255, 194, 75, 0.45);
}
.g-score-count {
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* honest "new on Google" invitation */
.g-invite {
  max-width: 660px;
  align-items: center;
}
.g-invite-text {
  flex: 1;
  min-width: 200px;
}
.g-invite-head {
  display: block;
  font-family: var(--font-display, "Sora", sans-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.3rem;
}
.g-invite-sub {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text-dim);
}
.g-summary-cta {
  margin-left: auto;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent-2);
  white-space: nowrap;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    color 0.25s ease;
}
.g-summary-cta:hover {
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* CTA with gentle pulse + shine sweep + arrow nudge */
.g-cta-shine {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  overflow: hidden;
  background: linear-gradient(
    160deg,
    rgba(78, 168, 255, 0.16),
    rgba(78, 168, 255, 0.04)
  );
  animation: gCtaPulse 3.4s ease-in-out infinite;
}
.g-cta-shine::before {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.38),
    transparent
  );
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}
.g-cta-shine:hover::before {
  left: 150%;
}
.g-cta-shine svg {
  transition: transform 0.3s ease;
}
.g-cta-shine:hover svg {
  transform: translateX(4px);
}
@keyframes gCtaPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(78, 168, 255, 0);
  }
  50% {
    box-shadow: 0 0 0 4px var(--accent-glow);
  }
}

/* individual Google-style review card */
.g-review {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.g-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.9rem;
}
.g-avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--gc, #1a73e8);
  color: #fff;
  font-family: var(--font-display, "Sora", sans-serif);
  font-weight: 700;
  font-size: 1.15rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.g-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.g-name {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 700;
  font-size: 0.98rem;
  color: #fff;
}
.g-verified {
  flex-shrink: 0;
}
.g-sub {
  font-size: 0.78rem;
  color: var(--text-dim);
}
.g-source {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.g-rateline {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.g-rateline .review-stars {
  display: inline-block;
  margin-bottom: 0;
  font-size: 0.95rem;
}
.g-date {
  font-size: 0.78rem;
  color: var(--text-dim);
}
.g-review p {
  margin: 0;
  line-height: 1.6;
}

/* staggered reveal */
.g-reviews .g-review {
  opacity: 0;
  transform: translateY(24px);
  animation: gReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.g-reviews .g-review:nth-child(1) {
  animation-delay: 0.05s;
}
.g-reviews .g-review:nth-child(2) {
  animation-delay: 0.18s;
}
.g-reviews .g-review:nth-child(3) {
  animation-delay: 0.31s;
}
@keyframes gReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* neon accent for step number */
.step-num {
  background: linear-gradient(160deg, var(--accent-deep), var(--surface-2));
  color: #fff;
  box-shadow:
    0 0 0 1px var(--glass-border),
    0 0 18px var(--accent-glow);
}

/* --- Glass form fields ---------------------------------------- */
.anfrage-form {
  margin-inline: auto;
  padding: 1.9rem;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.field input,
.field textarea {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(78, 168, 255, 0.06);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* contact links → neon underline on hover */
.kontakt-info a {
  position: relative;
  transition: color 0.25s ease;
}
.kontakt-info a:hover {
  color: var(--accent-2);
  text-shadow: 0 0 14px var(--accent-glow);
}

/* --- Desktop rhythm: more air, no empty stretches ------------- */
@media (min-width: 768px) {
  .anfrage-form {
    padding: 2.4rem;
  }
}
@media (min-width: 900px) {
  /* 3 reviews → one balanced row, no empty grid cell */
  .stimmen .cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Respect reduced motion ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none;
  }
  .review,
  .step {
    transition: none;
  }
  .review:hover,
  .step:hover {
    transform: none;
  }
  .g-reviews .g-review {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .g-cta-shine {
    animation: none;
  }
  .hero-emblem,
  .hero-emblem::before {
    animation: none;
  }
  .hero h1 .ln > span,
  .hero h1 .accent {
    animation: none;
    background-position: 30% 50%;
  }
  /* Neon frame: stop the flow/pulse but keep the frame fully lit */
  .serv::before {
    animation: none;
    opacity: 1;
  }
}

/* ============================================================= */
/*  PERFORMANCE GOVERNOR — JS toggles these to pause off-screen   */
/*  / backgrounded motion. Saves heat & battery, removes nothing. */
/* ============================================================= */
/* Hero scrolled out of view → rest its heavy loops + drop layers */
#hero.fx-rest .hero-photo,
#hero.fx-rest .hero-emblem,
#hero.fx-rest .hero-emblem::before,
#hero.fx-rest h1 .ln > span,
#hero.fx-rest h1 .accent {
  animation-play-state: paused;
}
#hero.fx-rest .hero-photo,
#hero.fx-rest .hero-emblem {
  will-change: auto;
}
/* Leistungen scrolled out → pause the 4 neon-frame loops (heat/battery) */
#leistungen.fx-rest .serv::before {
  animation-play-state: paused;
}
/* Tab backgrounded → freeze everything decorative, aurora included */
html.fx-frozen .hero-photo,
html.fx-frozen .hero-emblem,
html.fx-frozen .hero-emblem::before,
html.fx-frozen .hero h1 .ln > span,
html.fx-frozen .hero h1 .accent,
html.fx-frozen .g-cta-shine,
html.fx-frozen body::before,
html.fx-frozen body::after,
html.fx-frozen .serv::before {
  animation-play-state: paused;
}

/* ============================================================= */
/*  LEGAL PAGES — Impressum / Datenschutz                        */
/* ============================================================= */
.legal-page {
  min-height: 100vh;
  padding: 7rem 0 5rem;
  position: relative;
}
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  margin-bottom: 2.5rem;
  transition:
    gap 0.25s ease,
    color 0.25s ease;
}
.legal-back:hover {
  gap: 0.85rem;
  color: #fff;
}
.legal-back svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.legal-page h1 {
  font-family: var(--font-display, "Sora", sans-serif);
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 0.6rem;
}
.legal-lead {
  font-size: 1rem;
  color: var(--text-dim);
  margin: 0 0 3rem;
  max-width: 60ch;
}
.legal-card {
  background: var(--glass, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.09));
  border-radius: 20px;
  padding: clamp(1.4rem, 4vw, 2.4rem);
  margin-bottom: 1.5rem;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.legal-card h2 {
  font-family: var(--font-display, "Sora", sans-serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.legal-card h2 .num {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
  background: rgba(78, 168, 255, 0.12);
  border: 1px solid rgba(78, 168, 255, 0.25);
  border-radius: 8px;
  padding: 0.15rem 0.55rem;
  flex: none;
}
.legal-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin: 1.6rem 0 0.5rem;
}
.legal-card p,
.legal-card li {
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--text-dim);
  margin: 0 0 0.7rem;
}
.legal-card ul {
  margin: 0 0 0.7rem;
  padding-left: 1.2rem;
}
.legal-card li {
  margin-bottom: 0.35rem;
}
.legal-card a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(78, 168, 255, 0.35);
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}
.legal-card a:hover {
  color: #fff;
  border-color: #fff;
}
.legal-card strong {
  color: #fff;
  font-weight: 600;
}
.legal-fill {
  color: #ffc24b;
  font-weight: 600;
  background: rgba(255, 194, 75, 0.1);
  border: 1px dashed rgba(255, 194, 75, 0.4);
  border-radius: 6px;
  padding: 0.05rem 0.4rem;
  font-size: 0.88rem;
}
.legal-meta {
  font-size: 0.82rem;
  color: var(--text-dim);
  opacity: 0.7;
  margin-top: 2rem;
}

/* ===============================================================
   PREISE — Münchner Marktpreise mit Markt-Radar (brutal / luxus)
   =============================================================== */
.preise {
  position: relative;
  padding: clamp(3.5rem, 8vw, 6rem) 0;
  overflow: hidden;
}
.preise::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      60% 55% at 12% 0%,
      rgba(35, 72, 224, 0.14),
      transparent 60%
    ),
    radial-gradient(
      55% 55% at 96% 100%,
      rgba(78, 168, 255, 0.1),
      transparent 60%
    );
}
.preise > .container {
  position: relative;
  z-index: 1;
}

.preis-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  margin-top: 2.2rem;
}

.preis-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
  padding: 1.5rem 1.4rem 1.6rem;
  border-radius: var(--radius);
  background: var(--glass), var(--surface);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  overflow: hidden;
  transform: translateZ(0);
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s,
    border-color 0.45s;
  will-change: transform;
}
.preis-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--neon-line);
  opacity: 0.75;
}
.preis-card:hover,
.preis-card:focus-within {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow:
    0 28px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px var(--accent-glow),
    0 0 44px -10px var(--accent-glow-strong);
}

.preis-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.preis-ic {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--accent);
  background: radial-gradient(
    circle at 30% 30%,
    rgba(78, 168, 255, 0.22),
    rgba(78, 168, 255, 0.04)
  );
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 0 18px rgba(78, 168, 255, 0.18);
}
.preis-ic svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
}
.preis-card h3 {
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.preis-amount {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.preis-ab {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  font-weight: 600;
}
.preis-num {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 8vw, 3rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.02em;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    var(--accent-2) 58%,
    var(--accent) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 26px var(--accent-glow));
}
.preis-unit {
  font-size: 1rem;
  color: var(--silver);
  font-weight: 600;
}

/* ---- Markt-Radar ---------------------------------------------- */
.radar {
  margin-top: 0.1rem;
}
.radar-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  margin-bottom: 0.7rem;
}
.radar-label strong {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.radar-track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(37, 211, 102, 0.6) 0%,
    rgba(78, 168, 255, 0.4) 45%,
    rgba(255, 120, 90, 0.55) 100%
  );
  border: 1px solid var(--glass-border);
}
.radar-track::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.22),
    transparent 60%
  );
  pointer-events: none;
}
.radar-marker {
  position: absolute;
  top: 50%;
  left: 6%;
  transform: translate(-50%, -50%) scale(0);
  transition:
    left 0.95s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s;
  z-index: 2;
}
.radar.is-in .radar-marker {
  left: var(--pos, 38%);
  transform: translate(-50%, -50%) scale(1);
}
.radar-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow:
    0 0 0 4px var(--accent-glow),
    0 0 18px var(--accent-glow-strong);
}
.radar-flag {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(
    180deg,
    var(--neon-royal-bright),
    var(--neon-royal)
  );
  padding: 0.24rem 0.55rem;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(35, 72, 224, 0.55);
}
.radar-flag::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--neon-royal);
}
.radar-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 0.6rem;
  font-size: 0.78rem;
  color: var(--silver);
  font-variant-numeric: tabular-nums;
}
.radar-ends b {
  color: #fff;
  font-weight: 700;
}
.radar-ends span {
  display: block;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.radar-ends .hi {
  text-align: right;
}

.preis-note {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-dim);
}
.preis-note strong {
  color: var(--text);
  font-weight: 600;
}

/* ---- Tier accordion (Entrümpelung Gut/Besser/Premium) --------- */
.tiers {
  border-top: 1px dashed var(--border);
  padding-top: 0.9rem;
  margin-top: auto;
}
.tiers-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.2rem 0;
}
.tiers-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 6px;
}
.tiers-toggle .chev {
  width: 18px;
  height: 18px;
  color: var(--accent);
  transition: transform 0.35s ease;
}
.tiers-toggle[aria-expanded="true"] .chev {
  transform: rotate(180deg);
}
.tiers-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
}
.tiers-body > div {
  overflow: hidden;
}
.tiers.is-open .tiers-body {
  grid-template-rows: 1fr;
}
.tier-list {
  display: grid;
  gap: 0.55rem;
  padding-top: 0.85rem;
}
.tier {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
}
.tier .t-name {
  font-weight: 600;
  font-size: 0.92rem;
}
.tier .t-name small {
  display: block;
  color: var(--text-dim);
  font-weight: 400;
  font-size: 0.76rem;
  margin-top: 0.1rem;
}
.tier .t-price {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--accent-2);
  white-space: nowrap;
}
.tier.is-pop {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-glow);
  background: rgba(78, 168, 255, 0.06);
}
.tier .pop-badge {
  position: absolute;
  top: -0.6rem;
  right: 0.7rem;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #001a3a;
  background: var(--accent-2);
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
}

/* ---- Festpreis-Garantie banner -------------------------------- */
.festpreis-banner {
  position: relative;
  margin-top: 2.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding: clamp(1.6rem, 5vw, 2.6rem);
  border-radius: calc(var(--radius) + 4px);
  background:
    var(--glass),
    linear-gradient(160deg, rgba(35, 72, 224, 0.2), var(--surface));
  border: 1px solid var(--glass-border);
  overflow: hidden;
}
.festpreis-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    50% 70% at 50% -10%,
    rgba(58, 92, 255, 0.28),
    transparent 70%
  );
  pointer-events: none;
}
.festpreis-seal {
  position: relative;
  width: 84px;
  height: 84px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(
    circle at 35% 28%,
    var(--neon-royal-bright),
    var(--neon-royal)
  );
  border: 2px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    0 0 0 6px rgba(35, 72, 224, 0.18),
    0 12px 40px rgba(35, 72, 224, 0.5);
}
.festpreis-seal svg {
  width: 40px;
  height: 40px;
  stroke: currentColor;
}
.festpreis-text {
  position: relative;
}
.festpreis-banner h3 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 5vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}
.festpreis-banner p {
  color: var(--text-dim);
  max-width: 56ch;
  margin: 0 auto;
  line-height: 1.55;
}
.festpreis-cta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
  margin-top: 0.4rem;
}
.preis-process-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition:
    color 0.3s,
    border-color 0.3s;
}
.preis-process-link:hover {
  color: var(--accent-2);
  border-color: var(--accent-2);
}
.preis-process-link svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}
.preis-mwst {
  font-size: 0.78rem;
  color: var(--text-dim);
  text-align: center;
  margin-top: 1.4rem;
  line-height: 1.5;
}

/* ---- Desktop ---------------------------------------------------- */
@media (min-width: 720px) {
  .preis-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.4rem;
  }
  .festpreis-banner {
    flex-direction: row;
    text-align: left;
    gap: 1.6rem;
    align-items: center;
  }
  .festpreis-banner p {
    margin: 0;
  }
  .festpreis-text {
    flex: 1;
  }
  .festpreis-cta {
    justify-content: flex-start;
  }
}
@media (min-width: 1040px) {
  .preis-card {
    padding: 1.8rem 1.7rem 1.9rem;
  }
}

/* ---- Reduced motion -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .preis-card,
  .radar-marker,
  .tiers-body,
  .tiers-toggle .chev {
    transition: none;
  }
  .radar-marker {
    left: var(--pos, 38%);
    transform: translate(-50%, -50%) scale(1);
  }
  .preis-card:hover,
  .preis-card:focus-within {
    transform: none;
  }
}

/* ============================================================= */
/* PHASE 2 — Multi-page: active nav, page-hero, connective bands  */
/* ============================================================= */

/* ---- Cross-document View Transitions (premium MPA fade) ------- */
@view-transition {
  navigation: auto;
}
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.32s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
}

/* ---- Active nav link ------------------------------------------ */
.main-nav a.is-active {
  color: var(--text);
}
.main-nav a.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  border-radius: 2px;
  background: var(--neon-line, var(--accent));
  box-shadow: 0 0 10px var(--accent-glow);
}
.main-nav a {
  position: relative;
}
.main-nav.open a.is-active::after {
  display: none;
}
.main-nav.open a.is-active {
  color: var(--accent-2);
}

/* ---- Page hero (subpage H1 band) ------------------------------ */
.page-hero {
  position: relative;
  padding: calc(var(--header-h) + 2.6rem) 0 2.6rem;
  overflow: hidden;
  isolation: isolate;
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(
      120% 140% at 12% -10%,
      rgba(78, 168, 255, 0.18),
      transparent 55%
    ),
    radial-gradient(
      100% 120% at 100% 0%,
      rgba(35, 72, 224, 0.16),
      transparent 50%
    ),
    var(--surface);
  border-bottom: 1px solid var(--border);
}
.page-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.04) 1px,
    transparent 1px
  );
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, #000, transparent);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent);
}
.page-hero-wrap {
  text-align: center;
}
.page-hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-size: clamp(2rem, 7vw, 3.2rem);
  margin: 0.5rem auto 0.7rem;
  max-width: 16ch;
}
.page-hero-lead {
  color: var(--text-dim);
  max-width: 52ch;
  margin: 0 auto;
  font-size: 1.05rem;
}

/* ---- Home: leistungen teaser grid ----------------------------- */
.home-leist {
  padding: 3.2rem 0;
}
.teaser-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  margin-top: 1.6rem;
}
.teaser {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.1rem;
  border-radius: var(--radius);
  background: var(--glass, var(--surface));
  border: 1px solid var(--glass-border, var(--border));
  text-decoration: none;
  color: var(--text);
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}
.teaser:hover,
.teaser:focus-visible {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.35),
    0 0 0 1px var(--accent-glow);
}
.teaser-ic {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--accent);
  background: rgba(78, 168, 255, 0.1);
}
.teaser-ic svg {
  width: 20px;
  height: 20px;
}
.teaser-h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
}
.teaser-d {
  color: var(--text-dim);
  font-size: 0.88rem;
}
.home-leist-more {
  text-align: center;
  margin-top: 1.6rem;
}

/* ---- Trust strip ---------------------------------------------- */
.trust-strip {
  padding: 1.4rem 0;
}
.trust-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 1rem;
  text-align: center;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.trust-stars {
  color: #ffc24b;
  letter-spacing: 2px;
  font-size: 1.1rem;
}
.trust-text {
  margin: 0;
  color: var(--text-dim);
}
.trust-text strong {
  color: var(--text);
}
.trust-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.trust-link:hover {
  color: var(--accent-2);
}

/* ---- CTA band ------------------------------------------------- */
.cta-band {
  padding: 2.6rem 0 3rem;
}
.cta-band-inner {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 2rem 1.5rem;
  border-radius: 18px;
  background:
    radial-gradient(
      120% 140% at 0% 0%,
      rgba(35, 72, 224, 0.28),
      transparent 60%
    ),
    var(--surface);
  border: 1px solid var(--glass-border, var(--border));
  text-align: center;
}
.cta-band-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 5vw, 2rem);
  margin: 0 0 0.4rem;
}
.cta-band-sub {
  color: var(--text-dim);
  margin: 0;
}
.cta-band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}

/* ---- FAQ (native details/summary) ----------------------------- */
.faq {
  padding: 2.6rem 0;
}
.faq-list {
  max-width: 760px;
  margin: 1.4rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.faq-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.2rem;
  font-family: var(--font-display);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: "+";
  color: var(--accent);
  font-size: 1.3rem;
  line-height: 1;
  transition: transform 0.25s ease;
}
.faq-item[open] summary::after {
  transform: rotate(45deg);
}
.faq-item[open] summary {
  color: var(--accent-2);
}
.faq-body {
  padding: 0 1.2rem 1.1rem;
  color: var(--text-dim);
}
.faq-body p {
  margin: 0;
}

/* ---- Über uns: intro + warum + info cards --------------------- */
.ueber-intro {
  padding: 2.8rem 0;
}
.ueber-intro-inner {
  display: grid;
  gap: 1.6rem;
  align-items: center;
}
.ueber-text p {
  color: var(--text-dim);
  margin: 0.8rem 0 0;
}
.ueber-emblem {
  display: grid;
  place-items: center;
}
.ueber-emblem img {
  width: 130px;
  height: auto;
  filter: drop-shadow(0 10px 30px var(--accent-glow));
}

.warum {
  padding: 2.6rem 0;
}
.warum-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin-top: 1.6rem;
}
.warum-card {
  padding: 1.3rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
}
.warum-card h3 {
  font-family: var(--font-display);
  margin: 0.7rem 0 0.3rem;
}
.warum-card p {
  color: var(--text-dim);
  margin: 0;
  font-size: 0.92rem;
}
.warum-ic {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--accent);
  background: rgba(78, 168, 255, 0.1);
}
.warum-ic svg {
  width: 22px;
  height: 22px;
}

.info-cards {
  padding: 2rem 0 2.6rem;
}
.info-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}
.ic-card {
  padding: 1.3rem;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.ic-card h3 {
  font-family: var(--font-display);
  margin: 0 0 0.5rem;
}
.ic-card p {
  color: var(--text-dim);
  margin: 0 0 0.3rem;
}
.ic-card a {
  color: var(--accent);
  text-decoration: none;
}
.ic-card a:hover {
  color: var(--accent-2);
}

/* ---- Sticky mobile CTA (phone only, hidden on Kontakt) -------- */
.mobile-cta {
  position: fixed;
  left: 0.7rem;
  right: 0.7rem;
  bottom: calc(0.7rem + env(safe-area-inset-bottom));
  z-index: 250;
  display: flex;
  gap: 0.4rem;
  padding: 0.4rem;
  background: rgba(13, 18, 32, 0.86);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  box-shadow:
    0 14px 34px -14px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.32s ease;
}
/* auto-hide while reading / over the hero (JS-driven) */
.mobile-cta.is-hidden {
  transform: translateY(calc(100% + 1.4rem));
  opacity: 0;
  pointer-events: none;
}
/* one-shot scale-breath the first time the bar appears (JS adds .pulse) */
.mobile-cta.pulse {
  animation: mctaBreath 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) 1;
}
@keyframes mctaBreath {
  0% {
    transform: translateY(0) scale(1);
  }
  38% {
    transform: translateY(-3px) scale(1.035);
    box-shadow:
      0 20px 44px -14px rgba(0, 0, 0, 0.8),
      0 0 0 1px var(--accent-glow) inset;
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
.mcta {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0.5rem 0.25rem;
  border-radius: 14px;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition:
    transform 0.16s ease,
    filter 0.2s ease;
}
.mcta:active {
  transform: scale(0.94);
}
.mcta-ic {
  display: grid;
  place-items: center;
}
.mcta-call {
  color: #06301a;
  background: var(--accent);
  border-color: transparent;
}
.mcta-wa {
  color: #06301a;
  background: var(--whatsapp);
  border-color: transparent;
}
.mcta-form {
  color: var(--text);
}

/* On phones the bar already carries WhatsApp — drop the duplicate bubble */
.whatsapp-float {
  display: none;
}

/* Give page content room so the sticky bar never covers the footer */
body:not(.page-kontakt) .site-footer {
  margin-bottom: calc(86px + env(safe-area-inset-bottom));
}
/* Kontakt page already has the form — no sticky bar; keep the bubble there */
.page-kontakt .mobile-cta {
  display: none;
}
.page-kontakt .whatsapp-float {
  display: grid;
  bottom: calc(1.1rem + env(safe-area-inset-bottom));
}

/* ---- Desktop: hide sticky bar, restore float, widen grids ----- */
@media (min-width: 768px) {
  .teaser-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .warum-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .info-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ueber-intro-inner {
    grid-template-columns: 1.6fr 1fr;
  }
  .cta-band-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding: 2.2rem 2.4rem;
  }
  .cta-band-actions {
    justify-content: flex-end;
    flex-shrink: 0;
  }
}

@media (min-width: 960px) {
  .mobile-cta {
    display: none;
  }
  .warum-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .whatsapp-float {
    display: grid;
    bottom: 1.1rem;
  }
  body:not(.page-kontakt) .site-footer {
    margin-bottom: 0;
  }
}

/* ============================================================= */
/* HOME BENTO — B+C hybrid (mobile stable, desktop WOW)          */
/* ============================================================= */
/* ---- Proof-bar — trust strip under hero -------------------- */
.proof-bar {
  padding: clamp(1.4rem, 4vw, 2.2rem) 0 0;
}
.proof-strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}
.proof-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0))
      padding-box,
    var(--surface);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s ease,
    box-shadow 0.4s ease;
  will-change: transform;
}
.proof-ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: var(--accent);
  background: rgba(78, 168, 255, 0.1);
  border: 1px solid rgba(78, 168, 255, 0.22);
}
.proof-ic svg {
  width: 18px;
  height: 18px;
}
.proof-txt {
  font-size: 0.92rem;
  line-height: 1.25;
  color: var(--text-dim);
}
.proof-txt b {
  color: var(--text);
  font-weight: 700;
}
.vn-teaser-cta {
  margin-top: 1.4rem;
  text-align: center;
}

@media (min-width: 768px) {
  .proof-strip {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.8rem;
  }
  .proof-item:hover {
    transform: translateY(-3px);
    border-color: rgba(78, 168, 255, 0.35);
    box-shadow:
      0 10px 30px -12px rgba(0, 0, 0, 0.6),
      0 0 0 1px rgba(78, 168, 255, 0.15);
  }
  .proof-txt {
    font-size: 0.95rem;
  }
}

.home-bento {
  padding: clamp(3rem, 8vw, 6rem) 0;
}
.bento {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
}
.bento-tile {
  position: relative;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0))
      padding-box,
    var(--surface);
  padding: 1.4rem 1.3rem;
  overflow: hidden;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s ease,
    box-shadow 0.4s ease;
  will-change: transform;
}
/* neon hairline top edge */
.bento-tile::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--neon-line);
  opacity: 0.5;
}

/* --- INTRO tile (spans both cols on mobile) --- */
.bento-intro {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1.7rem 1.5rem;
}
.bento-intro .section-title {
  margin: 0;
  font-size: clamp(1.7rem, 6vw, 2.4rem);
  line-height: 1.05;
}
.bento-lead {
  color: var(--text-dim);
  margin: 0;
  max-width: 46ch;
}
.bento-stats {
  list-style: none;
  margin: 0.5rem 0 0.2rem;
  padding: 0;
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
}
.bento-stats li {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.bento-stats .num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.bento-stats .lbl {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}
.bento-cta {
  align-self: flex-start;
  margin-top: 0.6rem;
}

/* --- SERVICE tiles (real-photo cards, neon edge) --- */
.bento-serv {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.45rem;
  text-decoration: none;
  color: var(--text);
  min-height: 200px;
  padding: 1.15rem 1.2rem;
  border-color: rgba(78, 168, 255, 0.18);
}
/* real photo + readability veil — sits behind the text */
.bento-serv::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      to top,
      rgba(6, 9, 17, 0.95) 4%,
      rgba(6, 9, 17, 0.6) 40%,
      rgba(6, 9, 17, 0.1) 100%
    ),
    var(--card-img) center / cover no-repeat;
  transform: scale(1.03);
  transition:
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.5s ease;
  will-change: transform;
}
.bento-serv-body {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}
.bento-serv h3 {
  margin: 0;
  font-size: 1.18rem;
  font-family: var(--font-display);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}
.bento-serv p {
  margin: 0;
  color: #c8d4e8;
  font-size: 0.9rem;
  line-height: 1.4;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}
/* neon corner chip carrying the arrow */
.bento-arrow {
  position: absolute;
  top: 0.95rem;
  right: 1rem;
  margin: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.05rem;
  line-height: 1;
  color: #eaf3ff;
  background: rgba(35, 72, 224, 0.34);
  border: 1px solid rgba(123, 198, 255, 0.5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: 0 0 16px -2px rgba(58, 92, 255, 0.55);
  transition:
    background 0.35s ease,
    box-shadow 0.45s ease,
    transform 0.35s ease;
}

/* --- TRUST tile (full-width strip) --- */
.bento-trust {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.65rem 1rem;
  flex-wrap: wrap;
  text-decoration: none;
  color: var(--text);
  background:
    radial-gradient(
        120% 160% at 0% 0%,
        rgba(78, 168, 255, 0.12),
        transparent 60%
      )
      border-box,
    var(--surface);
}
.bento-trust-stars {
  color: #ffd166;
  letter-spacing: 2px;
  font-size: 1.1rem;
}
.bento-trust-text {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.95rem;
}
.bento-trust-text strong {
  color: var(--text);
  font-size: 1.05rem;
}
.bento-trust-link {
  margin-left: auto;
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}

/* --- reveal baseline (works without JS too) --- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
}
[data-reveal].in,
.no-js [data-reveal] {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --- DESKTOP WOW layer --- */
@media (min-width: 768px) {
  .bento {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    gap: 1rem;
  }
  .bento-intro {
    grid-column: span 2;
    grid-row: span 2;
    justify-content: center;
  }
  .bento-serv {
    grid-column: span 1;
    min-height: 200px;
  }
  .bento-trust {
    grid-column: 1 / -1;
    padding: 1.5rem 1.8rem;
  }
}
@media (min-width: 960px) {
  .bento-tile:hover {
    transform: translateY(-6px);
    border-color: rgba(78, 168, 255, 0.4);
    box-shadow:
      0 18px 40px -20px rgba(0, 0, 0, 0.6),
      0 0 0 1px rgba(78, 168, 255, 0.18) inset;
  }
  .bento-serv:hover {
    border-color: rgba(123, 198, 255, 0.7);
    box-shadow:
      0 22px 50px -22px rgba(0, 0, 0, 0.7),
      0 0 0 1px rgba(123, 198, 255, 0.35) inset,
      0 0 34px -6px rgba(58, 92, 255, 0.55);
  }
  .bento-serv:hover::after {
    transform: scale(1.09);
    filter: saturate(1.08) brightness(1.04);
  }
  .bento-serv:hover .bento-arrow {
    background: rgba(58, 92, 255, 0.6);
    box-shadow: 0 0 22px 0 rgba(58, 92, 255, 0.8);
    transform: translateX(3px);
  }
}
/* reduced-motion: freeze the photo zoom */
@media (prefers-reduced-motion: reduce) {
  .bento-serv::after {
    transform: none;
    transition: none;
  }
}

/* =============================================================
   MOBILE THERMAL RELIEF — touch devices only (phones/tablets).
   Desktop is intentionally untouched: effects stay at FULL.
   Goal: keep every effect VISIBLE and moving, but cut the
   sustained GPU cost that heats the phone while the hero is
   on-screen — without pausing or removing anything.
   Root cause addressed: full-viewport mix-blend-mode + large
   blur layers force a whole-screen recomposite every frame.
   ============================================================= */
@media (hover: none) and (pointer: coarse) {
  /* Neon "lamps": the screen-blend is the single biggest heat
     source on mobile (framebuffer readback + blend each frame).
     Drop the blend + shrink the blur radius; the glows stay
     visible and keep drifting. */
  body::after {
    mix-blend-mode: normal;
    filter: blur(16px);
    opacity: 0.82;
  }
  /* Aurora mesh: lighter blur region = far cheaper to recompute. */
  body::before {
    filter: blur(7px);
  }
  /* The background DRIFT (a ~3% shift / 8% scale over 18–26s) is
     imperceptible on a phone-sized screen, yet it forces a full-viewport
     recomposite every frame — and with it a constant re-blur of EVERY
     glass panel layered above (the real heat source while the hero sits
     at the top). Freeze the motion: the glow itself stays fully visible,
     only the unseen movement stops. Release the promoted GPU layers too.
     Desktop is untouched — it keeps the full animation. */
  body::before,
  body::after {
    animation: none;
    will-change: auto;
  }
}

/* =============================================================
   ECO / THERMAL GOVERNOR — applies on ANY device, but ONLY when
   the JS governor detects real pressure (sustained low FPS),
   the user asked the OS for reduced motion, or the battery is
   low & unplugged. Freezes just the unseen background drift and
   frees its GPU layer; the glow stays fully visible. Desktop is
   untouched at rest — full animation runs until a trigger fires.
   ============================================================= */
html.fx-eco body::before,
html.fx-eco body::after {
  animation: none;
  will-change: auto;
}

/* =============================================================
   WERKZEUG-DIAL — radial combination-lock navigation (mobile)
   Opens from the hamburger. Heavy ridged knob + neon ring.
   Rotate to arm the item under the top pointer; tap centre = GO;
   tapping any label navigates directly. Renders ONLY when open,
   so it adds zero sustained GPU load.
   ============================================================= */
.dial-nav {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  background:
    radial-gradient(
      120% 90% at 50% 42%,
      rgba(16, 26, 48, 0.82),
      rgba(5, 8, 16, 0.96) 70%
    ),
    rgba(4, 7, 14, 0.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.32s ease,
    visibility 0s linear 0.32s;
}
.dial-nav.open {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.32s ease,
    visibility 0s;
}

.dial-close {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: 16px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(124, 198, 255, 0.28);
  background: rgba(10, 16, 30, 0.72);
  color: #cfe1ff;
  font:
    300 26px/1 "Sora",
    system-ui,
    sans-serif;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 0.25s ease,
    background 0.25s ease;
}
.dial-close:active {
  transform: scale(0.9) rotate(90deg);
  border-color: rgba(124, 198, 255, 0.6);
}

.dial-stage {
  position: relative;
  width: min(86vw, 360px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  touch-action: none; /* we own the drag gesture */
  /* orbit radius for the labels — absolute length (NOT % — translate %
     resolves against the item's own box, which collapses them on the knob) */
  --R: calc(min(86vw, 360px) * 0.31);
}

/* Fixed neon pointer at 12 o'clock — marks the "armed" slot */
.dial-pointer {
  position: absolute;
  top: -2px;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 16px solid var(--accent, #4ea8ff);
  filter: drop-shadow(0 0 8px var(--accent-glow, rgba(78, 168, 255, 0.6)));
  z-index: 6;
}

/* Outer track + tick marks */
.dial-track {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 1px solid rgba(124, 198, 255, 0.16);
  box-shadow:
    inset 0 0 40px rgba(78, 168, 255, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.02);
  background: repeating-conic-gradient(
    from 0deg,
    rgba(124, 198, 255, 0.22) 0deg 0.6deg,
    transparent 0.6deg 6deg
  );
  -webkit-mask: radial-gradient(
    circle,
    transparent 0 47%,
    #000 47% 50%,
    transparent 50%
  );
  mask: radial-gradient(
    circle,
    transparent 0 47%,
    #000 47% 50%,
    transparent 50%
  );
}

/* Rotating ring that carries the labels.  --rot is set by JS. */
.dial-ring {
  position: absolute;
  inset: 0;
  --rot: 0deg;
  transform: rotate(var(--rot));
  will-change: transform;
}
.dial-nav:not(.open) .dial-ring {
  will-change: auto;
}
/* Snap-to-detent: springy ease when the drag is released (JS adds .snapping) */
.dial-stage.snapping .dial-ring {
  transition: transform 0.44s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Each label orbits (rotate+translate) but counter-rotates to stay upright */
.dial-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6.4rem;
  margin: -1.1rem 0 0 -3.2rem;
  text-align: center;
  font:
    700 0.82rem/1.1 "Sora",
    system-ui,
    sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9fb4d6;
  text-decoration: none;
  padding: 0.4rem 0.2rem;
  transform: rotate(var(--a)) translate(0, calc(-1 * var(--R, 130px)))
    rotate(calc(-1 * var(--a) - var(--rot)));
  transition:
    color 0.2s ease,
    text-shadow 0.2s ease,
    transform 0.05s linear;
  opacity: 0;
}
.dial-nav.open .dial-item {
  opacity: 1;
  transition:
    color 0.2s ease,
    text-shadow 0.2s ease,
    opacity 0.4s ease var(--d, 0s);
}
.dial-item.armed {
  color: #ffffff;
  text-shadow:
    0 0 12px var(--accent, #4ea8ff),
    0 0 26px var(--accent-glow, rgba(78, 168, 255, 0.5));
}
.dial-item.current::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent, #4ea8ff);
  transform: translateX(-50%);
  box-shadow: 0 0 8px var(--accent, #4ea8ff);
}

/* The heavy ridged knob in the centre */
.dial-knob {
  position: relative;
  z-index: 5;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: none;
  cursor: grab;
  color: #eaf2ff;
  display: grid;
  place-items: center;
  gap: 0.15rem;
  /* metal: conic ridges + radial sheen */
  background:
    radial-gradient(
      circle at 50% 38%,
      rgba(255, 255, 255, 0.16),
      transparent 46%
    ),
    radial-gradient(
      circle at 50% 50%,
      #1a2740 0 38%,
      #0e1830 60%,
      #0a1124 100%
    ),
    repeating-conic-gradient(from 0deg, #14203a 0deg 6deg, #0d1730 6deg 12deg);
  box-shadow:
    0 0 0 1px rgba(124, 198, 255, 0.22),
    0 0 0 7px rgba(8, 13, 26, 0.7),
    0 0 0 8px rgba(124, 198, 255, 0.12),
    0 22px 50px -18px rgba(0, 0, 0, 0.9),
    inset 0 2px 10px rgba(255, 255, 255, 0.1),
    inset 0 -14px 26px rgba(0, 0, 0, 0.65);
  transition:
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.25s ease;
}
.dial-knob:active {
  cursor: grabbing;
}
.dial-knob.spin {
  box-shadow:
    0 0 0 1px rgba(124, 198, 255, 0.5),
    0 0 0 7px rgba(8, 13, 26, 0.7),
    0 0 26px 8px var(--accent-glow, rgba(78, 168, 255, 0.4)),
    0 22px 50px -18px rgba(0, 0, 0, 0.9),
    inset 0 2px 10px rgba(255, 255, 255, 0.12),
    inset 0 -14px 26px rgba(0, 0, 0, 0.65);
}
/* knob grip notch — a marker on the knob body */
.dial-knob::after {
  content: "";
  position: absolute;
  top: 9%;
  left: 50%;
  width: 4px;
  height: 16%;
  border-radius: 3px;
  background: var(--accent, #4ea8ff);
  transform: translateX(-50%);
  box-shadow: 0 0 10px var(--accent, #4ea8ff);
}
.dial-knob-label {
  font:
    800 0.92rem/1 "Sora",
    system-ui,
    sans-serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  max-width: 80%;
  text-align: center;
}
.dial-knob-go {
  font:
    700 0.6rem/1 "Manrope",
    system-ui,
    sans-serif;
  letter-spacing: 0.32em;
  color: var(--accent-2, #7cc6ff);
  opacity: 0.85;
}

.dial-hint {
  position: absolute;
  bottom: max(26px, calc(env(safe-area-inset-bottom) + 18px));
  left: 0;
  right: 0;
  text-align: center;
  font:
    600 0.72rem/1 "Manrope",
    system-ui,
    sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6b7a99;
  opacity: 0;
  transition: opacity 0.4s ease 0.35s;
}
.dial-nav.open .dial-hint {
  opacity: 1;
}

/* power-on ripple when the dial opens */
.dial-nav.open .dial-stage::before {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 2px solid var(--accent, #4ea8ff);
  animation: dialPower 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1;
  pointer-events: none;
}
@keyframes dialPower {
  0% {
    opacity: 0.9;
    transform: scale(0.6);
  }
  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}

/* hamburger morphs to an active state while dial is open */
.nav-toggle.is-active span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle.is-active span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.is-active span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

body.dial-open {
  overflow: hidden;
}

/* Desktop keeps its inline nav — never show the dial there */
@media (min-width: 960px) {
  .dial-nav {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dial-nav,
  .dial-item,
  .dial-knob,
  .dial-hint {
    transition: opacity 0.2s ease;
  }
  .dial-nav.open .dial-stage::before {
    animation: none;
  }
}

/* ============================================================= */
/* DESKTOP SIGNATURE FX (added 2026-06-03)                        */
/* Brutal on desktop · fully inert on touch/phone (JS-gated) ·    */
/* respects prefers-reduced-motion. Pure ADD — easy to revert.    */
/* ============================================================= */

/* ---- Custom cursor (desktop pointer only; class set by JS) ---- */
.fx-cursor-dot,
.fx-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  will-change: transform, opacity;
}
.fx-cursor-dot {
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(78, 168, 255, 0.9);
  transition: opacity 0.25s ease;
}
.fx-cursor-ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1.5px solid rgba(78, 168, 255, 0.7);
  transition:
    width 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    margin 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.22s ease,
    border-color 0.22s ease,
    opacity 0.25s ease;
}
html.has-fx-cursor.fx-cursor-ready .fx-cursor-dot,
html.has-fx-cursor.fx-cursor-ready .fx-cursor-ring {
  opacity: 1;
}
/* Grow + fill faintly when hovering something interactive */
.fx-cursor-ring.is-active {
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-color: rgba(78, 168, 255, 0.95);
  background: rgba(78, 168, 255, 0.1);
}
/* Pressed feedback */
.fx-cursor-ring.is-down {
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-color: rgba(139, 233, 255, 1);
}
/* Hide native cursor only when the custom one is live */
html.has-fx-cursor,
html.has-fx-cursor * {
  cursor: none !important;
}
/* …but keep the native caret on real text fields */
html.has-fx-cursor input,
html.has-fx-cursor textarea,
html.has-fx-cursor select {
  cursor: auto !important;
}
/* Suppress the custom cursor while it's over a text field */
html.fx-cursor-hide .fx-cursor-dot,
html.fx-cursor-hide .fx-cursor-ring {
  opacity: 0 !important;
}

/* ---- Leistungen 3D tilt: snappy transition while tilting ----- */
.serv.is-tilt {
  transition:
    transform 0.12s ease-out,
    box-shadow 0.4s,
    border-color 0.4s;
}

/* ---- Magnetic buttons: promote to its own layer -------------- */
.btn.is-magnetic {
  will-change: transform;
}

/* Safety: kill all of the above under reduced motion -----------*/
@media (prefers-reduced-motion: reduce) {
  .fx-cursor-dot,
  .fx-cursor-ring {
    display: none !important;
  }
  html.has-fx-cursor,
  html.has-fx-cursor * {
    cursor: auto !important;
  }
}

/* ============================================================= */
/* PREMIUM BUTTON FX — WhatsApp brand + Anfrage accent (2026-06-04) */
/* CSS-only, append-only. Icon = wa.svg (same-origin, CSP-safe).    */
/* No perpetual motion → shine is hover-only → 0 phone heat.        */
/* ============================================================= */

/* --- WhatsApp brand buttons: every wa.me link + the big one --- */
.btn[href*="wa.me"],
.btn-whatsapp-big {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #2af598 0%, #25d366 42%, #128c7e 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 40, 20, 0.35);
  box-shadow:
    0 8px 24px rgba(18, 140, 126, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s;
}

/* official WhatsApp glyph (flex gap from .btn handles spacing) */
.btn[href*="wa.me"]::before,
.btn-whatsapp-big::before {
  content: "";
  flex-shrink: 0;
  width: 1.15em;
  height: 1.15em;
  background: url("wa.svg") no-repeat center / contain;
  filter: drop-shadow(0 1px 1px rgba(0, 40, 20, 0.4));
}

.btn[href*="wa.me"]:hover,
.btn-whatsapp-big:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 40px rgba(37, 211, 102, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* hover-only shine sweep */
.btn[href*="wa.me"]::after,
.btn-whatsapp-big::after {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, 0.45),
    transparent
  );
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left 0.7s ease;
}
.btn[href*="wa.me"]:hover::after,
.btn-whatsapp-big:hover::after {
  left: 140%;
}

/* --- Anfrage / primary CTA: richer dual-tone accent + glow ---- */
.btn-primary {
  background: linear-gradient(135deg, #7cc6ff 0%, #4ea8ff 45%, #2d7fe0 100%);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow:
    0 8px 22px rgba(78, 168, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.btn-primary:hover {
  box-shadow:
    0 18px 48px rgba(78, 168, 255, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* --- Floating WhatsApp bubble: real logo + gradient + glow ---- */
.whatsapp-float {
  background: linear-gradient(135deg, #2af598 0%, #25d366 45%, #128c7e 100%);
  box-shadow:
    0 10px 28px rgba(18, 140, 126, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  font-size: 0;
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s;
}
.whatsapp-float::before {
  content: "";
  width: 30px;
  height: 30px;
  background: url("wa.svg") no-repeat center / contain;
  filter: drop-shadow(0 1px 2px rgba(0, 40, 20, 0.5));
}
.whatsapp-float:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow:
    0 16px 38px rgba(37, 211, 102, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .btn[href*="wa.me"],
  .btn-whatsapp-big,
  .whatsapp-float {
    transition: none;
  }
  .btn[href*="wa.me"]:hover,
  .btn-whatsapp-big:hover,
  .whatsapp-float:hover {
    transform: none;
  }
  .btn[href*="wa.me"]::after,
  .btn-whatsapp-big::after {
    display: none;
  }
}

/* =============================================================
   WERKZEUG-DIAL — BRUTAL UPGRADE (2026-06-04)
   Append-only. Hotter ridged knob + a reactor energy-ring that
   sweeps ONLY while .dial-stage.is-spin (active drag, set by JS)
   → zero idle/GPU cost. reduced-motion strips the animation.
   ============================================================= */

/* deeper, harder knob body */
.dial-knob {
  box-shadow:
    0 0 0 1px rgba(124, 198, 255, 0.34),
    0 0 0 7px rgba(8, 13, 26, 0.72),
    0 0 0 9px rgba(124, 198, 255, 0.16),
    0 24px 56px -18px rgba(0, 0, 0, 0.92),
    inset 0 2px 12px rgba(255, 255, 255, 0.14),
    inset 0 -16px 30px rgba(0, 0, 0, 0.72);
}
/* brighter grip notch */
.dial-knob::after {
  background: var(--accent-2, #7cc6ff);
  box-shadow:
    0 0 12px var(--accent, #4ea8ff),
    0 0 22px var(--accent-glow, rgba(78, 168, 255, 0.6));
}
/* charged rim while spinning/armed — pulses */
.dial-knob.spin {
  box-shadow:
    0 0 0 1px rgba(124, 198, 255, 0.7),
    0 0 0 7px rgba(8, 13, 26, 0.7),
    0 0 34px 10px var(--accent-glow, rgba(78, 168, 255, 0.55)),
    0 24px 56px -18px rgba(0, 0, 0, 0.92),
    inset 0 2px 12px rgba(255, 255, 255, 0.16),
    inset 0 -16px 30px rgba(0, 0, 0, 0.7);
  animation: dialKnobPulse 0.9s ease-in-out infinite;
}
@keyframes dialKnobPulse {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.2);
  }
}

/* hotter, bigger 12 o'clock pointer */
.dial-pointer {
  border-left-width: 11px;
  border-right-width: 11px;
  border-top-width: 19px;
  filter: drop-shadow(0 0 12px var(--accent, #4ea8ff))
    drop-shadow(0 0 4px #ffffff);
}

/* brighter / denser instrument ticks */
.dial-track {
  border-color: rgba(124, 198, 255, 0.28);
  box-shadow:
    inset 0 0 54px rgba(78, 168, 255, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.03);
  background: repeating-conic-gradient(
    from 0deg,
    rgba(124, 198, 255, 0.4) 0deg 0.7deg,
    transparent 0.7deg 5deg
  );
}

/* reactor energy arc on the rim — own element so no mask clash with
   .dial-track. Sweeps ONLY while actively spinning. */
.dial-stage::after {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 250deg,
    rgba(78, 168, 255, 0.35) 300deg,
    var(--accent, #4ea8ff) 342deg,
    #eaf4ff 360deg
  );
  -webkit-mask: radial-gradient(
    circle,
    transparent 0 45%,
    #000 46% 50%,
    transparent 51%
  );
  mask: radial-gradient(
    circle,
    transparent 0 45%,
    #000 46% 50%,
    transparent 51%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 1;
}
.dial-stage.is-spin::after {
  opacity: 0.95;
  animation: dialEnergy 1s linear infinite;
}
@keyframes dialEnergy {
  to {
    transform: rotate(360deg);
  }
}
/* whole disc charges while spinning */
.dial-stage.is-spin {
  filter: drop-shadow(0 0 26px rgba(78, 168, 255, 0.25));
}

/* stronger armed-label burn */
.dial-item.armed {
  color: #ffffff;
  text-shadow:
    0 0 10px #ffffff,
    0 0 20px var(--accent, #4ea8ff),
    0 0 40px var(--accent-glow, rgba(78, 168, 255, 0.6));
}

@media (prefers-reduced-motion: reduce) {
  .dial-knob.spin {
    animation: none;
  }
  .dial-stage.is-spin::after {
    animation: none;
    opacity: 0.6;
  }
}

/* =================================================================
   GLASS REVOLUTION — homepage-wide "liquid glass" polish (2026-06-04)
   Append-only. Every surface gets a clean frosted body, a crisp
   top-light edge (always visible = "блистящо") and an on-hover
   specular sheen. Brutal on desktop (real backdrop-filter); clean on
   phone (translucent gradient, NO extra scroll-blur → no heat).
   All movement gated by hover + prefers-reduced-motion.
   Trivial revert: delete this whole block.
   ================================================================= */
:root {
  --glass-fill: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.09),
    rgba(255, 255, 255, 0.018) 48%,
    rgba(124, 198, 255, 0.05)
  );
  --glass-edge: rgba(154, 206, 255, 0.18);
  --glass-edge-strong: rgba(154, 206, 255, 0.46);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --glass-shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.72);
  --glass-blur: blur(18px) saturate(155%);
}

/* ---- 1. HEADER → frosted glass bar with a refracted bottom edge -- */
.site-header {
  background: linear-gradient(
    180deg,
    rgba(12, 17, 30, 0.82),
    rgba(10, 14, 26, 0.6)
  );
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-edge);
  box-shadow:
    var(--glass-hi),
    0 16px 36px -24px rgba(0, 0, 0, 0.85);
}
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
  opacity: 0.5;
  pointer-events: none;
}

/* ---- 2. Ghost / phone / 3D buttons → frosted glass --------------- */
.btn-ghost,
.btn-phone,
.hero-3dbtn {
  background: var(--glass-fill);
  border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(10px) saturate(145%);
  backdrop-filter: blur(10px) saturate(145%);
  box-shadow: var(--glass-hi);
}
.btn-ghost:hover,
.btn-phone:hover,
.hero-3dbtn:hover {
  border-color: var(--glass-edge-strong);
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.15),
    rgba(124, 198, 255, 0.07)
  );
}

/* ---- 3. LEISTUNGEN — frosted "reading plate" under card text ----- */
.serv .serv-inner {
  padding: 0.95rem 1.05rem 1rem;
  border-radius: 13px;
  background: linear-gradient(
    160deg,
    rgba(13, 19, 33, 0.42),
    rgba(10, 14, 26, 0.66)
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 12px 28px -18px rgba(0, 0, 0, 0.7);
}
/* glassier service icon orb */
.serv-ic {
  background: radial-gradient(
    120% 120% at 30% 22%,
    rgba(124, 198, 255, 0.32),
    rgba(10, 14, 26, 0.62) 70%
  );
  border: 1px solid var(--glass-edge-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 0 24px rgba(78, 168, 255, 0.22);
}
/* trust strip → clean glass pill */
.serv-trust {
  background: var(--glass-fill);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-hi);
}
.serv-trust:hover,
.serv-trust:active {
  border-color: var(--glass-edge-strong);
}

/* ---- 4. ABLAUF — glossy glass number orb + brighter glass card --- */
.step {
  border: 1px solid var(--glass-edge);
  box-shadow:
    var(--glass-hi),
    0 18px 44px rgba(0, 0, 0, 0.4);
}
.step-num {
  background: radial-gradient(
    120% 120% at 30% 20%,
    rgba(124, 198, 255, 0.34),
    rgba(13, 19, 33, 0.88) 72%
  );
  border: 1px solid var(--glass-edge-strong);
  color: #eaf4ff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -6px 12px rgba(0, 0, 0, 0.45),
    0 0 18px rgba(78, 168, 255, 0.3);
}

/* ---- 5. VORHER/NACHHER — frosted tabs + refined frame + cap ------ */
.ba-tab {
  background: var(--glass-fill);
  border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  box-shadow: var(--glass-hi);
}
.ba {
  border: 1px solid var(--glass-edge);
  box-shadow:
    var(--glass-hi),
    0 30px 70px rgba(0, 0, 0, 0.5);
}
.ba-cap b {
  text-shadow: 0 0 18px rgba(78, 168, 255, 0.25);
}

/* ---- 6. CTA-BAND → big frosted glass slab + top light edge ------- */
.cta-band-inner {
  background:
    radial-gradient(
      120% 140% at 0% 0%,
      rgba(58, 92, 255, 0.3),
      transparent 58%
    ),
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.07),
      rgba(255, 255, 255, 0.015)
    ),
    rgba(16, 22, 38, 0.55);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-hi), var(--glass-shadow);
}
.cta-band-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
  opacity: 0.6;
  pointer-events: none;
  z-index: 1;
}

/* ---- 7. FOOTER + mobile bar → refracted top light line ----------- */
.site-footer {
  position: relative;
  border-top: 1px solid var(--glass-edge);
}
.site-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(154, 206, 255, 0.5),
    transparent
  );
  pointer-events: none;
}
.mobile-cta {
  border: 1px solid var(--glass-edge);
}

/* ---- 8. DESKTOP "brutal" layer — real backdrop blur where it
   helps most + an on-hover specular sweep across the glass cards.
   Gated to fine-pointer ≥960px so phones never pay the blur/heat. -- */
@media (hover: hover) and (pointer: fine) and (min-width: 960px) {
  .serv .serv-inner {
    -webkit-backdrop-filter: blur(11px) saturate(135%);
    backdrop-filter: blur(11px) saturate(135%);
  }
  .cta-band-inner {
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
  /* specular glint sweeps across step + cta on hover only (no idle) */
  .step,
  .cta-band-inner {
    overflow: hidden;
  }
  .step::before,
  .cta-band-inner::after {
    content: "";
    position: absolute;
    top: 0;
    left: -65%;
    width: 55%;
    height: 100%;
    background: linear-gradient(
      100deg,
      transparent,
      rgba(255, 255, 255, 0.12),
      transparent
    );
    transform: skewX(-16deg);
    pointer-events: none;
    transition: left 0.75s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 2;
  }
  .step:hover::before,
  .cta-band:hover .cta-band-inner::after {
    left: 135%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .step::before,
  .cta-band-inner::after {
    display: none;
  }
}

/* ================================================================ *
 *  PREISE SHOWCASE — AI "poster" price cards + FLIP expand overlay  *
 *  Append-only. Desktop brutal (backdrop blur + sheen); phone clean *
 *  (no scroll-repaint blur => no heat). Media-unfold is one-shot    *
 *  (clip-path+scale, GPU). FLIP is a single transform tween. Prices *
 *  + Markt-Radar stay visible without any interaction (PAngV).      *
 *  prefers-reduced-motion fully neutralises all motion.             *
 * ================================================================ */

.preise-hint {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--accent-2);
}
.preise-hint::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow-strong);
  vertical-align: middle;
}

/* ---- poster card ------------------------------------------------ */
.preis-showcase .pc-photo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0;
  padding: 0;
  min-height: clamp(430px, 72vw, 480px);
  background: var(--surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  /* opaque image fills the card -> no backdrop-filter -> no heat */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.preis-showcase .pc-photo::before {
  z-index: 6; /* keep the neon top-line above the image */
}
.pc-photo .pc-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center 45%;
  background-size: cover;
  background-repeat: no-repeat;
  transform: translateZ(0);
}
.pc-photo .pc-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(10, 14, 26, 0.05) 0%,
    rgba(10, 14, 26, 0) 28%,
    rgba(10, 14, 26, 0.5) 56%,
    rgba(10, 14, 26, 0.9) 84%,
    rgba(10, 14, 26, 0.97) 100%
  );
}
.pc-photo .pc-tool {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 4;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--accent);
  background: rgba(10, 14, 26, 0.5);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: inset 0 0 16px rgba(78, 168, 255, 0.22);
}
.pc-photo .pc-tool svg {
  width: 23px;
  height: 23px;
  stroke: currentColor;
}

.pc-photo .pc-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1.35rem 1.3rem 1.4rem;
}
.pc-kicker {
  align-self: flex-start;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #fff;
  padding: 0.3rem 0.72rem;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    var(--neon-royal-bright),
    var(--neon-royal)
  );
  box-shadow: 0 6px 18px rgba(35, 72, 224, 0.45);
}
.pc-photo .preis-head {
  gap: 0;
}
.pc-photo .preis-head h3 {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}
.pc-photo .preis-num {
  filter: drop-shadow(0 2px 22px rgba(0, 0, 0, 0.6))
    drop-shadow(0 0 26px var(--accent-glow));
}
.pc-photo .preis-unit {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}
.pc-photo .radar {
  margin-top: 0.1rem;
  padding: 0.7rem 0.8rem 0.75rem;
  border-radius: 12px;
  background: rgba(10, 14, 26, 0.36);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* supplementary detail (notes / Pakete) — hidden in grid, shown on expand */
.preis-showcase .pc-extra {
  display: none;
}

/* open button */
.pc-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.2rem;
  padding: 0.72rem 1rem;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: linear-gradient(
    180deg,
    rgba(78, 168, 255, 0.22),
    rgba(78, 168, 255, 0.08)
  );
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    background 0.3s,
    box-shadow 0.3s,
    transform 0.3s;
}
.pc-open svg {
  width: 18px;
  height: 18px;
}
.pc-open:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---- media unfold reveal (armed by JS, one-shot, GPU) ----------- */
.pc-armed .pc-photo .pc-media {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.14) translateZ(0);
}
.pc-armed .pc-photo.pc-revealed .pc-media {
  clip-path: inset(0 0 0 0);
  transform: scale(1) translateZ(0);
  transition:
    clip-path 1.05s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- FLIP expand overlay ---------------------------------------- */
.pc-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
}
.pc-overlay.is-on {
  display: flex;
}
.pc-ov-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 16, 0.74);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.pc-overlay.is-shown .pc-ov-backdrop {
  opacity: 1;
}
.pc-ov-stage {
  position: relative;
  margin: auto;
  width: min(92vw, 520px);
  max-height: 92vh;
  display: flex;
  z-index: 1;
}
.pc-ov-panel {
  margin: auto;
  width: 100%;
  max-height: 92vh;
  min-height: min(80vh, 640px);
  overflow: auto;
  box-shadow:
    0 40px 120px rgba(0, 0, 0, 0.6),
    0 0 0 1px var(--accent-glow);
  cursor: default;
}
.pc-ov-panel .pc-content {
  gap: 0.95rem;
  padding: 1.5rem 1.5rem 1.6rem;
}
.pc-ov-panel .pc-extra {
  display: block;
}
.pc-ov-close {
  position: absolute;
  top: -0.6rem;
  right: -0.6rem;
  z-index: 5;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: rgba(10, 14, 26, 0.92);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.pc-ov-close svg {
  width: 20px;
  height: 20px;
}
.pc-ov-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* desktop brutal: real backdrop blur + sheen + bigger stage */
@media (hover: hover) and (pointer: fine) and (min-width: 960px) {
  .pc-ov-backdrop {
    background: rgba(5, 8, 16, 0.55);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    backdrop-filter: blur(10px) saturate(130%);
  }
  .pc-ov-stage {
    width: min(70vw, 560px);
  }
  .preis-showcase .pc-photo .pc-content::after {
    content: "";
    position: absolute;
    top: 0;
    left: 1.3rem;
    right: 1.3rem;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      var(--accent-glow),
      transparent
    );
  }
}

/* reduced-motion: no unfold, no FLIP transitions (belt + braces) */
@media (prefers-reduced-motion: reduce) {
  .pc-armed .pc-photo .pc-media,
  .pc-armed .pc-photo.pc-revealed .pc-media {
    clip-path: none !important;
    transform: none !important;
    transition: none !important;
  }
  .pc-ov-backdrop,
  .pc-ov-panel {
    transition: none !important;
  }
}

/* ============================================================
   PREISE — NUMBERS & LETTERS REVEAL  (append-only, 2026-06-04)
   One-shot, JS-gated, no-heat. The price VALUE container is never
   hidden (PAngV); only its digits tick up in place. Heading + kicker
   get a decrypt/blur entrance. prefers-reduced-motion neutralises all.
   Default (no JS class) = everything fully visible.
   ============================================================ */

/* tabular figures so the count-up ticks without width jitter */
.preise .preis-num,
.preise .radar-ends b {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* JS-gated heading reveal (decorative — not the price). */
.preise .preis-card.nums-armed h3 {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(10px);
}
.preise .preis-card.nums-in h3 {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition:
    opacity 0.7s ease,
    filter 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

/* JS-gated kicker reveal (CSS handles the mobile case; desktop also scrambles) */
.preise .preis-card.nums-armed .pc-kicker {
  opacity: 0;
  transform: translateY(6px);
}
.preise .preis-card.nums-in .pc-kicker {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.5s ease 0.04s,
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.04s;
}

/* value-lock: one-shot pulse the moment a count-up settles */
@keyframes pcNumLock {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.07);
  }
  100% {
    transform: scale(1);
  }
}
.preise .preis-num.is-locked {
  animation: pcNumLock 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* accent underline sweep under the amount, drawn once on lock */
.preise .preis-amount {
  position: relative;
}
.preise .preis-amount::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--accent), transparent);
  border-radius: 2px;
  pointer-events: none;
}
.preise .preis-card.nums-locked .preis-amount::after {
  width: 60%;
  transition: width 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .preise .preis-card.nums-armed h3,
  .preise .preis-card.nums-armed .pc-kicker {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
  .preise .preis-num.is-locked {
    animation: none !important;
  }
  .preise .preis-card.nums-locked .preis-amount::after {
    width: 60%;
    transition: none !important;
  }
}

/* ===HERO-PHOTO START=== München skyline backdrop for the Preise page hero.
   EDITORIAL BOTTOM-ANCHORED composition: the skyline breathes free in the upper
   band, the headline sits in a dark "ground" at the bottom, and "München" reads
   as an ice-blue gradient accent under a drawn keyline. The top scrim is only a
   thin strip for nav legibility; the middle stays clear so the photo is seen. */
.page-hero--photo {
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: clamp(460px, 74vh, 600px);
}
.page-hero--photo .page-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  z-index: -2;
  pointer-events: none;
  user-select: none;
  /* enrich the blue-hour skyline: lift the city lights, keep it crisp */
  filter: saturate(1.2) contrast(1.05) brightness(1.03);
}
/* Bottom-anchored scrim: thin dark strip up top (nav legibility), near-clear in
   the middle so the skyline reads, deep "ground" at the base behind the text. */
.page-hero--photo .page-hero-bg {
  z-index: -1;
  background:
    radial-gradient(
      120% 120% at 15% -10%,
      rgba(78, 168, 255, 0.14),
      transparent 52%
    ),
    radial-gradient(
      90% 100% at 100% 0%,
      rgba(35, 72, 224, 0.12),
      transparent 50%
    ),
    radial-gradient(
      120% 78% at 50% 118%,
      rgba(7, 10, 20, 0.72) 0%,
      rgba(7, 10, 20, 0.3) 42%,
      transparent 72%
    ),
    linear-gradient(
      180deg,
      rgba(7, 10, 20, 0.52) 0%,
      rgba(7, 10, 20, 0.14) 12%,
      rgba(7, 10, 20, 0.07) 40%,
      rgba(7, 10, 20, 0.34) 67%,
      rgba(7, 10, 20, 0.88) 100%
    );
}
/* Moonlight spotlight on the Frauenkirche towers (upper-left). screen blend
   makes it read as light blooming off the photo, not a flat colour wash. */
.page-hero--photo .hero-spotlight {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.82;
  background: radial-gradient(
    32% 36% at 26% 30%,
    rgba(150, 202, 255, 0.36),
    rgba(96, 162, 245, 0.12) 45%,
    transparent 66%
  );
}
.page-hero--photo .page-hero-wrap {
  padding-bottom: 0.4rem;
}
/* Refined, slightly tighter headline so it sits in the bottom band without
   swallowing the skyline. */
.page-hero--photo .page-hero-title {
  color: #fff;
  font-size: clamp(1.95rem, 6.3vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0.45rem auto 0;
  text-shadow: 0 2px 30px rgba(4, 8, 18, 0.55);
}
/* "München" as an ice-blue gradient accent with a soft glow halo. */
.page-hero--photo .hero-accent {
  background: linear-gradient(180deg, #eaf4ff 0%, #8cc6ff 52%, #4ea8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow:
    0 2px 22px rgba(4, 8, 18, 0.45),
    0 0 34px rgba(78, 168, 255, 0.4);
}
/* Drawn keyline under the headline — scales in from the centre on load. */
.page-hero--photo .hero-rule {
  display: block;
  width: 64px;
  height: 3px;
  margin: 1.05rem auto 0;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    var(--accent, #4ea8ff),
    var(--accent-2, #3a5cff)
  );
  box-shadow: 0 0 18px rgba(78, 168, 255, 0.5);
  transform: scaleX(0);
  transform-origin: center;
  opacity: 0;
  animation: heroRuleIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.62s forwards;
}
.page-hero--photo .eyebrow {
  color: var(--accent-2);
  opacity: 0;
  animation: heroFadeUp 0.6s ease-out 0.04s forwards;
}
.page-hero--photo .page-hero-lead {
  color: #dbe5f6;
  margin-top: 0.95rem;
  text-shadow: 0 1px 16px rgba(4, 8, 18, 0.6);
  opacity: 0;
  animation: heroFadeUp 0.7s ease-out 0.72s forwards;
}

/* Per-word headline reveal — each word rides up out of its own mask and
   sharpens from blur. Pure CSS (no-JS-safe), one-shot → no phone heat. */
.page-hero--photo .hero-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* breathing room so the overflow clip never eats umlauts/descenders */
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}
.page-hero--photo .hero-word-i {
  display: inline-block;
  transform: translateY(118%);
  opacity: 0;
  filter: blur(8px);
  animation: heroWordIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.page-hero--photo .hero-word:nth-child(1) .hero-word-i {
  animation-delay: 0.12s;
}
.page-hero--photo .hero-word:nth-child(2) .hero-word-i {
  animation-delay: 0.2s;
}
.page-hero--photo .hero-word:nth-child(3) .hero-word-i {
  animation-delay: 0.28s;
}
.page-hero--photo .hero-word:nth-child(4) .hero-word-i {
  animation-delay: 0.36s;
}
.page-hero--photo .hero-word:nth-child(5) .hero-word-i {
  animation-delay: 0.44s;
}
@keyframes heroWordIn {
  to {
    transform: translateY(0);
    opacity: 1;
    filter: blur(0);
  }
}
@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes heroRuleIn {
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}
/* Desktop only: over-scale the photo so the scroll parallax never reveals an
   edge (±6% translate vs. 16% head-room each side), and bloom the spotlight in
   once on load for a cinematic open. */
@media (hover: hover) and (pointer: fine) and (min-width: 960px) {
  .page-hero--photo .page-hero-photo {
    height: 132%;
    top: -16%;
    will-change: transform;
  }
  .page-hero--photo .hero-spotlight {
    opacity: 0;
    transform: scale(1.06);
    transform-origin: 26% 30%;
    animation: heroSpotBloom 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
  }
}
@keyframes heroSpotBloom {
  to {
    opacity: 0.82;
    transform: scale(1);
  }
}
/* No motion: everything static + fully visible, no inline transforms/filters. */
@media (prefers-reduced-motion: reduce) {
  .page-hero--photo .page-hero-photo {
    height: 100%;
    top: 0;
    transform: none !important;
  }
  .page-hero--photo .hero-word-i,
  .page-hero--photo .eyebrow,
  .page-hero--photo .page-hero-lead,
  .page-hero--photo .hero-rule,
  .page-hero--photo .hero-spotlight {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
  .page-hero--photo .hero-rule {
    transform: scaleX(1) !important;
  }
  .page-hero--photo .hero-spotlight {
    opacity: 0.7 !important;
  }
}

/* Über uns portrait variant. Same editorial treatment as the skyline hero,
   but Deniz sits in the right band of a landscape frame: shift the focal point
   right so his face survives the mobile horizontal crop, and lift the blue-hour
   exposure a touch so it reads against the dark headline ground. The skyline
   tuning above is left untouched — this only applies to .page-hero--portrait. */
.page-hero--portrait .page-hero-photo {
  object-position: 66% 50%;
  filter: saturate(1.14) contrast(1.06) brightness(1.07);
}
@media (hover: hover) and (pointer: fine) and (min-width: 960px) {
  .page-hero--portrait .page-hero-photo {
    object-position: 58% 32%;
  }
}

/* Kontakt aurora variant. Same editorial treatment as the skyline/portrait heroes,
   but the asset is a dark-navy abstract light-wave (no face/landmark to protect),
   so it is framed centred. The glow already lives in the photo, so the exposure is
   kept deep — no brightness lift — and the bottom "ground" scrim is reinforced one
   notch so the white headline + lead stay crisp where the wave blooms brightest.
   Only applies to .page-hero--aurora; skyline/portrait tuning above is untouched. */
.page-hero--aurora .page-hero-photo {
  object-position: 50% 50%;
  filter: saturate(1.18) contrast(1.08) brightness(0.96);
}
.page-hero--aurora .page-hero-bg {
  background:
    radial-gradient(
      120% 120% at 15% -10%,
      rgba(78, 168, 255, 0.16),
      transparent 52%
    ),
    radial-gradient(
      90% 100% at 100% 0%,
      rgba(35, 72, 224, 0.14),
      transparent 50%
    ),
    radial-gradient(
      120% 82% at 50% 120%,
      rgba(6, 9, 18, 0.82) 0%,
      rgba(6, 9, 18, 0.4) 44%,
      transparent 74%
    ),
    linear-gradient(
      180deg,
      rgba(6, 9, 18, 0.5) 0%,
      rgba(6, 9, 18, 0.12) 14%,
      rgba(6, 9, 18, 0.16) 42%,
      rgba(6, 9, 18, 0.48) 68%,
      rgba(6, 9, 18, 0.92) 100%
    );
}
/* Lift the headline block up off the bottom into the upper-mid band and scale it
   a touch larger for a more confident, editorial read (Kontakt has no skyline to
   leave breathing room for, so the type can own the frame). Scoped to aurora. */
.page-hero--aurora .page-hero-wrap {
  padding-bottom: clamp(3rem, 13vh, 7.5rem);
}
.page-hero--aurora .page-hero-title {
  font-size: clamp(2.2rem, 7.4vw, 4.1rem);
}

/* Galerie "Werkstatt" variant — a real München Altbau living room mid-renovation:
   navy feature wall + stucco ceiling, tall arched windows framing the Frauenkirche
   towers, herringbone parquet, paint-splattered ladder + roller + bucket up front.
   The portrait shot is cropped to a wide cinematic band that keeps the Frauenkirche
   (the unmistakable München signal) in view on desktop, and shows almost the whole
   room on phone. The headline is lifted off the floor into the lower-mid and scaled
   up for a bold, confident read; a tall dark "ground" keeps the white type crisp over
   the warm parquet while the bright windows above keep breathing. The spotlight is
   re-aimed as a soft daylight bloom off the windows. Only .page-hero--werkstatt. */
.page-hero--werkstatt {
  min-height: clamp(520px, 82vh, 720px);
}
.page-hero--werkstatt .page-hero-photo {
  object-position: 50% 46%;
  filter: saturate(1.08) contrast(1.05) brightness(0.99);
}
.page-hero--werkstatt .hero-spotlight {
  opacity: 0.5;
  background: radial-gradient(
    34% 40% at 64% 38%,
    rgba(180, 214, 255, 0.3),
    rgba(120, 170, 240, 0.1) 46%,
    transparent 68%
  );
}
.page-hero--werkstatt .page-hero-bg {
  background:
    radial-gradient(
      120% 120% at 15% -10%,
      rgba(78, 168, 255, 0.1),
      transparent 52%
    ),
    radial-gradient(
      92% 110% at 50% 124%,
      rgba(6, 9, 18, 0.9) 0%,
      rgba(6, 9, 18, 0.55) 40%,
      transparent 72%
    ),
    linear-gradient(
      180deg,
      rgba(6, 9, 18, 0.5) 0%,
      rgba(6, 9, 18, 0.14) 13%,
      rgba(6, 9, 18, 0.08) 38%,
      rgba(6, 9, 18, 0.46) 64%,
      rgba(6, 9, 18, 0.93) 100%
    );
}
/* Lift the headline off the floor into the lower-mid band and scale it up for a bold,
   professional read; scoped to werkstatt so Kontakt/Preise/Über uns stay as approved. */
.page-hero--werkstatt .page-hero-wrap {
  padding-bottom: clamp(2.2rem, 11vh, 6.5rem);
}
.page-hero--werkstatt .page-hero-title {
  font-size: clamp(2.5rem, 8.2vw, 4.7rem);
}
/* ===HERO-PHOTO END=== */

/* ================================================================
 *  PREISE — branded "Beispielrechnung" sheet  (append-only)        *
 *  Lives inside .pc-extra → hidden in the grid, revealed only in   *
 *  the FLIP expand panel (.pc-ov-panel). A premium Angebotsblatt:  *
 *  logo header band + invoice-style worked math (dotted leaders,   *
 *  tabular figures) + "inklusive" checklist + Richtwert footer.    *
 *  Every total reconciles EXACTLY to the visible "ab" price; all   *
 *  values are illustrative (PAngV/UWG-safe — prices stay visible   *
 *  without interaction, the sheet is supplementary detail). Static *
 *  (no JS, no continuous motion) => no phone heat.                 *
 * ================================================================ */
.pc-sheet {
  margin-top: 0.35rem;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: linear-gradient(
    180deg,
    rgba(18, 26, 48, 0.94),
    rgba(9, 13, 24, 0.97)
  );
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.pc-sheet-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.78rem 0.95rem;
  background: linear-gradient(
    180deg,
    rgba(35, 72, 224, 0.32),
    rgba(35, 72, 224, 0.08)
  );
  border-bottom: 1px solid var(--glass-border);
}
.pc-sheet-logo {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.06);
  padding: 3px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.pc-sheet-brand {
  display: flex;
  flex-direction: column;
  line-height: 1.18;
  min-width: 0;
}
.pc-sheet-brand strong {
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
}
.pc-sheet-brand span {
  font-size: 0.67rem;
  color: var(--text-dim);
  letter-spacing: 0.05em;
}
.pc-sheet-tag {
  margin-left: auto;
  flex: none;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #001a3a;
  background: var(--accent-2);
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
}
.calc {
  padding: 0.55rem 0.95rem 0.2rem;
}
.calc-cap {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-2);
  padding: 0.35rem 0 0.5rem;
}
.calc-row,
.calc-sum {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.34rem 0;
  font-size: 0.86rem;
}
.calc-row > span:first-child {
  color: var(--text-dim);
}
.calc .dots {
  flex: 1 1 auto;
  align-self: center;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.22);
}
.calc-row b {
  flex: none;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.calc-row b.incl {
  color: var(--accent-2);
  font-style: normal;
}
.calc-sum {
  margin-top: 0.3rem;
  padding-top: 0.62rem;
  border-top: 1px solid var(--glass-border);
  font-size: 0.96rem;
}
.calc-sum > span:first-child {
  color: #fff;
  font-weight: 600;
}
.calc-sum b {
  flex: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.18rem;
  color: var(--accent-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-shadow: 0 0 22px var(--accent-glow);
}
.incl-list {
  list-style: none;
  margin: 0.55rem 0 0;
  padding: 0.72rem 0.95rem 0.55rem;
  display: grid;
  gap: 0.42rem;
  border-top: 1px solid var(--glass-border);
}
.incl-list li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.82rem;
  line-height: 1.42;
  color: var(--text-dim);
}
.incl-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.02rem;
  width: 1.05rem;
  height: 1.05rem;
  display: grid;
  place-items: center;
  font-size: 0.66rem;
  font-weight: 800;
  color: #001a3a;
  background: var(--accent-2);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--accent-glow);
}
.pc-sheet-foot {
  margin: 0;
  padding: 0.35rem 0.95rem 0.85rem;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--text-dim);
}
/* desktop brutal: a faint sheen line across the sheet header */
@media (hover: hover) and (pointer: fine) and (min-width: 960px) {
  .pc-sheet-head {
    position: relative;
  }
  .pc-sheet-head::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      var(--accent-glow),
      transparent
    );
  }
}
/* === Beispielrechnung: Ersparnis-Band + Panel-CTA (2026-06-04) === */
.pc-save {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.85rem 1.05rem 0;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  background: linear-gradient(
    180deg,
    rgba(46, 204, 128, 0.16),
    rgba(46, 204, 128, 0.05)
  );
  border: 1px solid rgba(46, 204, 128, 0.42);
}
.pc-save .s-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: #39d98a;
  background: rgba(46, 204, 128, 0.14);
}
.pc-save .s-ic svg {
  width: 17px;
  height: 17px;
}
.pc-save .s-txt {
  font-size: 0.8rem;
  line-height: 1.22;
  font-weight: 600;
  color: var(--text-dim);
}
.pc-save .s-amt {
  margin-left: auto;
  flex: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.08rem;
  color: #39d98a;
  text-shadow: 0 0 18px rgba(46, 204, 128, 0.45);
  white-space: nowrap;
}
.pc-cta {
  display: grid;
  gap: 0.55rem;
  padding: 0.15rem 0.95rem 1rem;
}
.pc-cta .btn {
  width: 100%;
  text-align: center;
  justify-content: center;
}

/* === Preise Sofort-Rechner (live slider / segment) — 2026-06-04 === */
.pc-rechner {
  container-type: inline-size;
  margin: 0.9rem 1.05rem 0;
  padding: 0.95rem 1rem 1rem;
  border-radius: 14px;
  background:
    radial-gradient(
      125% 140% at 0% 0%,
      rgba(78, 168, 255, 0.16),
      transparent 60%
    ),
    linear-gradient(180deg, rgba(20, 26, 40, 0.74), rgba(12, 16, 26, 0.74));
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.pcr-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}
.pcr-title {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 0.98rem;
  color: var(--text);
}
.pcr-title::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 10px var(--accent-glow);
  vertical-align: middle;
}
.pcr-hint {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* slider */
.pcr-control {
  margin-bottom: 0.85rem;
}
.pcr-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--text-dim);
  margin-bottom: 0.55rem;
}
.pcr-label b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.pcr-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 99px;
  outline: none;
  cursor: pointer;
  background:
    linear-gradient(90deg, var(--accent), var(--accent-2)) no-repeat,
    rgba(255, 255, 255, 0.1);
  background-size:
    var(--pcr-fill, 50%) 100%,
    100% 100%;
}
.pcr-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 30%,
    #fff,
    #cfe6ff 42%,
    var(--accent-2) 100%
  );
  border: 2px solid #fff;
  box-shadow:
    0 0 0 4px rgba(78, 168, 255, 0.22),
    0 4px 12px rgba(0, 0, 0, 0.45),
    0 0 16px var(--accent-glow);
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease;
}
.pcr-range::-webkit-slider-thumb:active {
  transform: scale(1.18);
  box-shadow:
    0 0 0 6px rgba(78, 168, 255, 0.3),
    0 6px 16px rgba(0, 0, 0, 0.5),
    0 0 26px var(--accent-glow);
}
.pcr-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 30%,
    #fff,
    #cfe6ff 42%,
    var(--accent-2) 100%
  );
  border: 2px solid #fff;
  box-shadow:
    0 0 0 4px rgba(78, 168, 255, 0.22),
    0 4px 12px rgba(0, 0, 0, 0.45),
    0 0 16px var(--accent-glow);
}
.pcr-range::-moz-range-progress {
  height: 8px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.pcr-range::-moz-range-track {
  height: 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.1);
}
.pcr-range:focus-visible {
  box-shadow: 0 0 0 3px rgba(78, 168, 255, 0.45);
}
.pcr-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 0.4rem;
  font-size: 0.68rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* segment switch */
.pcr-segs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}
.pcr-seg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12rem;
  padding: 0.55rem 0.3rem;
  border-radius: 11px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dim);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.86rem;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease;
}
.pcr-seg small {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.64rem;
  opacity: 0.75;
}
.pcr-seg:hover {
  color: var(--text);
  border-color: rgba(78, 168, 255, 0.5);
}
.pcr-seg.is-active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(180deg, var(--accent), #1f5fc0);
  box-shadow:
    0 4px 16px rgba(78, 168, 255, 0.4),
    inset 0 0 0 1px rgba(124, 198, 255, 0.5);
  transform: translateY(-1px);
}

/* output */
.pcr-out {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
  margin-bottom: 0.7rem;
}
/* Two result cells sit side-by-side only when the panel is wide enough;
   on a very narrow modal they stack so the price number never spills. */
@container (min-width: 14rem) {
  .pcr-out {
    grid-template-columns: 1fr 1fr;
  }
}
.pcr-cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.18rem;
  padding: 0.65rem 0.7rem;
  border-radius: 12px;
}
.pcr-cell > span {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.pcr-cell b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.2rem, 5vw, 1.55rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pcr-cell--sum {
  background: linear-gradient(
    180deg,
    rgba(78, 168, 255, 0.16),
    rgba(78, 168, 255, 0.05)
  );
  border: 1px solid rgba(124, 198, 255, 0.4);
}
.pcr-cell--sum b {
  color: var(--text);
  text-shadow: 0 0 18px var(--accent-glow);
}
.pcr-cell--save {
  background: linear-gradient(
    180deg,
    rgba(46, 204, 128, 0.16),
    rgba(46, 204, 128, 0.05)
  );
  border: 1px solid rgba(46, 204, 128, 0.42);
}
.pcr-cell--save b {
  color: #39d98a;
  text-shadow: 0 0 18px rgba(46, 204, 128, 0.5);
}
.pcr-note {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.32;
  color: var(--text-dim);
}

/* value-lock pulse on recompute */
@keyframes pcrLock {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.09);
  }
  100% {
    transform: scale(1);
  }
}
.pcr-lock {
  animation: pcrLock 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: left center;
}

@media (prefers-reduced-motion: reduce) {
  .pcr-lock {
    animation: none;
  }
  .pcr-range::-webkit-slider-thumb,
  .pcr-seg {
    transition: none;
  }
}

/* === Preisvergleich München — dual comparison bars (2026-06-04) === */
.pcr-vs {
  margin: 0.1rem 0 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--glass-border);
}
.pcr-vs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}
.pcr-vs-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.pcr-vs-pct {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.82rem;
  line-height: 1;
  color: #39d98a;
  padding: 0.28rem 0.52rem;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(46, 204, 128, 0.18),
    rgba(46, 204, 128, 0.06)
  );
  border: 1px solid rgba(46, 204, 128, 0.42);
  text-shadow: 0 0 14px rgba(46, 204, 128, 0.5);
  white-space: nowrap;
}
.pcr-vs-row {
  display: grid;
  grid-template-columns: 4.7rem 1fr auto;
  align-items: center;
  gap: 0.55rem;
}
.pcr-vs-row + .pcr-vs-row {
  margin-top: 0.45rem;
}
.pcr-vs-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-dim);
  white-space: nowrap;
}
.pcr-vs-track {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--glass-border);
  overflow: hidden;
}
.pcr-vs-fill {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  width: 50%;
  border-radius: 999px;
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.pcr-vs-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.28),
    rgba(255, 255, 255, 0) 55%
  );
}
.pcr-vs-row--mkt .pcr-vs-fill {
  background: linear-gradient(90deg, #ff5a4d, #c0392b);
  box-shadow: 0 0 14px rgba(255, 90, 77, 0.45);
}
.pcr-vs-row--you .pcr-vs-fill {
  background: linear-gradient(90deg, #39d98a, #1f9d63);
  box-shadow: 0 0 14px rgba(46, 204, 128, 0.5);
}
.pcr-vs-row b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.94rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
  min-width: 4.1rem;
}
.pcr-mkt {
  color: #ff8079;
}
.pcr-you {
  color: #39d98a;
  text-shadow: 0 0 14px rgba(46, 204, 128, 0.45);
}
@media (prefers-reduced-motion: reduce) {
  .pcr-vs-fill {
    transition: none;
  }
}

/* === Jahres-Ersparnis strip + Festpreis-sichern CTA (2026-06-04) === */
.pcr-year {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 0.75rem;
  margin-top: 0.85rem;
  padding: 0.6rem 0.85rem;
  border-radius: 0.7rem;
  background: linear-gradient(
    180deg,
    rgba(46, 204, 128, 0.1),
    rgba(46, 204, 128, 0.04)
  );
  border: 1px solid rgba(46, 204, 128, 0.28);
}
.pcr-year-lbl {
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.pcr-year b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.96rem;
  line-height: 1;
  color: #39d98a;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-shadow: 0 0 14px rgba(46, 204, 128, 0.45);
}

.pcr-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  margin-top: 0.95rem;
  padding: 0.92rem 1.1rem;
  border-radius: 0.85rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  color: #062a17;
  text-decoration: none;
  background: linear-gradient(180deg, #4be08a, #25c065);
  box-shadow:
    0 10px 26px rgba(37, 192, 101, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition:
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.18s ease,
    filter 0.18s ease;
}
.pcr-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow:
    0 16px 34px rgba(37, 192, 101, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.pcr-cta:active {
  transform: translateY(0);
}
.pcr-cta:focus-visible {
  outline: 3px solid rgba(75, 224, 138, 0.6);
  outline-offset: 3px;
}
.pcr-cta-ico {
  width: 22px;
  height: 22px;
  flex: none;
  fill: #062a17;
}
@media (prefers-reduced-motion: reduce) {
  .pcr-cta {
    transition: none;
  }
  .pcr-cta:hover {
    transform: none;
  }
}

/* === Wunschtermin booking + Angebot-PDF actions (2026-06-04) === */
.pcr-book {
  margin-top: 1rem;
  padding: 0.85rem 0.9rem 0.95rem;
  border: 1px solid rgba(78, 168, 255, 0.22);
  border-radius: 0.9rem;
  background: linear-gradient(
    180deg,
    rgba(78, 168, 255, 0.07),
    rgba(78, 168, 255, 0.02)
  );
}
.pcr-book-lbl {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-2, #7cc6ff);
}
.pcr-book-ico {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--accent, #4ea8ff);
}
.pcr-book-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.6rem;
}
.pcr-date {
  flex: 1 1 9rem;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  padding: 0.6rem 0.7rem;
  border-radius: 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(8, 12, 22, 0.6);
  color: #eaf2ff;
  font-family: inherit;
  font-size: 0.95rem;
  color-scheme: dark;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}
.pcr-date:focus-visible {
  outline: none;
  border-color: var(--accent, #4ea8ff);
  box-shadow: 0 0 0 3px var(--accent-glow, rgba(78, 168, 255, 0.35));
}
.pcr-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  margin-top: 0.85rem;
}
.pcr-pdf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.95rem 1.1rem;
  border: 0;
  border-radius: 0.85rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.04rem;
  letter-spacing: 0.01em;
  color: #04122a;
  cursor: pointer;
  background: linear-gradient(180deg, #7cc6ff, #2d7fe0);
  box-shadow:
    0 12px 30px rgba(45, 127, 224, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition:
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.18s ease,
    filter 0.18s ease;
}
.pcr-pdf:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow:
    0 18px 40px rgba(45, 127, 224, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.pcr-pdf:active {
  transform: translateY(0);
}
.pcr-pdf:focus-visible {
  outline: 3px solid var(--accent-glow-strong, rgba(78, 168, 255, 0.55));
  outline-offset: 3px;
}
.pcr-pdf[aria-busy="true"] {
  filter: saturate(0.6) brightness(0.92);
  pointer-events: none;
}
.pcr-pdf-ico {
  width: 22px;
  height: 22px;
  flex: none;
  color: #04122a;
}
.pcr-actions .pcr-cta {
  margin-top: 0;
}
@media (prefers-reduced-motion: reduce) {
  .pcr-pdf,
  .pcr-date,
  .pcr-time,
  .pcr-email {
    transition: none;
  }
  .pcr-pdf:hover,
  .pcr-email:hover {
    transform: none;
  }
}

/* === Uhrzeit field + 3-button actions + E-Mail + success toast (2026-06-04) === */
.pcr-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1 1 100%;
  min-width: 0;
}
.pcr-field-lbl {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #8aa0bd;
  padding-left: 0.15rem;
}
.pcr-field .pcr-date {
  flex: none;
  width: 100%;
}
.pcr-time {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  padding: 0.6rem 0.7rem;
  border-radius: 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(8, 12, 22, 0.6);
  color: #eaf2ff;
  font-family: inherit;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  color-scheme: dark;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}
.pcr-time:focus-visible {
  outline: none;
  border-color: var(--accent, #4ea8ff);
  box-shadow: 0 0 0 3px var(--accent-glow, rgba(78, 168, 255, 0.35));
}
/* Tame the iOS native date/time controls so their value text + picker
   indicator never spill outside the rounded frame (WebKit gives these
   inputs an intrinsic min-width + internal margins desktop ignores). */
.pcr-date::-webkit-date-and-time-value,
.pcr-time::-webkit-date-and-time-value {
  margin: 0;
  text-align: left;
}
.pcr-date::-webkit-datetime-edit,
.pcr-time::-webkit-datetime-edit {
  padding: 0;
  line-height: 1.15;
  overflow: hidden;
}
.pcr-date::-webkit-calendar-picker-indicator,
.pcr-time::-webkit-calendar-picker-indicator {
  margin: 0 0 0 auto;
  opacity: 0.7;
  filter: invert(0.85);
  cursor: pointer;
}

.pcr-actions .pcr-cta,
.pcr-actions .pcr-email {
  margin-top: 0;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-size: 0.92rem;
  padding: 0.85rem 0.6rem;
  gap: 0.42rem;
}
/* The overlay-panel width — not the viewport — decides when there is room
   for side-by-side. Below 23rem everything stays stacked & full-width so
   nothing wraps to two lines or spills its box. */
@container (min-width: 23rem) {
  .pcr-book-row {
    flex-wrap: nowrap;
  }
  .pcr-field {
    flex: 1 1 0;
  }
  .pcr-actions {
    grid-template-columns: 1fr 1fr;
  }
  .pcr-actions .pcr-pdf {
    grid-column: 1 / -1;
  }
}
.pcr-actions .pcr-cta .pcr-cta-ico {
  width: 19px;
  height: 19px;
}
.pcr-email {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.85rem;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: #dbe8ff;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(124, 198, 255, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition:
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.18s ease,
    border-color 0.18s ease;
}
.pcr-email:hover {
  transform: translateY(-2px);
  background: rgba(124, 198, 255, 0.12);
  border-color: rgba(124, 198, 255, 0.7);
}
.pcr-email:active {
  transform: translateY(0);
}
.pcr-email:focus-visible {
  outline: 3px solid rgba(124, 198, 255, 0.55);
  outline-offset: 3px;
}
.pcr-email-ico {
  width: 19px;
  height: 19px;
  flex: none;
  color: #7cc6ff;
}

.pcr-toast {
  position: fixed;
  left: 50%;
  bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(1.5rem);
  z-index: 100000;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: max-content;
  max-width: min(92vw, 27rem);
  padding: 0.8rem 0.85rem 0.8rem 1rem;
  border-radius: 1rem;
  background: linear-gradient(
    180deg,
    rgba(18, 26, 42, 0.96),
    rgba(12, 18, 30, 0.96)
  );
  border: 1px solid rgba(124, 198, 255, 0.32);
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  color: #eaf2ff;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.32s ease,
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.pcr-toast.is-in {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.pcr-toast-ico {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #4be08a, #1f9d57);
  box-shadow: 0 6px 16px rgba(37, 192, 101, 0.5);
}
.pcr-toast-ico svg {
  width: 19px;
  height: 19px;
  color: #04210f;
}
.pcr-toast-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
.pcr-toast-t {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.96rem;
}
.pcr-toast-s {
  font-size: 0.76rem;
  color: #9fb0c8;
}
.pcr-toast-btn {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.8rem;
  border-radius: 0.7rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.86rem;
  text-decoration: none;
  color: #062a17;
  background: linear-gradient(180deg, #4be08a, #25c065);
  box-shadow: 0 8px 20px rgba(37, 192, 101, 0.42);
  transition:
    transform 0.16s ease,
    filter 0.16s ease;
}
.pcr-toast-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}
.pcr-toast-btn svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: #062a17;
}
@media (prefers-reduced-motion: reduce) {
  .pcr-toast {
    transition: opacity 0.2s ease;
    transform: translateX(-50%) translateY(0);
  }
  .pcr-time,
  .pcr-email {
    transition: none;
  }
  .pcr-email:hover {
    transform: none;
  }
}

/* ================================================================ *
 *  ABLAUF — "NEON GROW" premium process steps (homepage 1·2·3·4)    *
 *  Big modern numerals · royal-blue side lighting · letter glow      *
 *  GPU-only (transform/opacity/filter/box-shadow). Motion-gated.     *
 *  Append-only → survives the deferred glass-block strip (4639–4886).*
 *  Uses only FREE hooks: .ablauf::after, .step-num::after,           *
 *  .steps.in (reveal). Never touches .step::before/::after (taken).  *
 * ================================================================ */

/* --- Section ambient: dark royal-blue light bleeding from the sides */
.ablauf {
  overflow: hidden; /* contain the side glow */
}
.ablauf::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      52% 78% at -8% 50%,
      rgba(35, 72, 224, 0.26),
      transparent 60%
    ),
    radial-gradient(
      52% 78% at 108% 50%,
      rgba(58, 92, 255, 0.22),
      transparent 60%
    );
}
.ablauf > .container {
  position: relative;
  z-index: 1; /* keep content above the ambient glow */
}

/* --- The step card: let the number glow spill, room up top -------- */
.ablauf .step {
  position: relative;
  overflow: visible;
  padding-top: 2.1rem;
}

/* --- Modern oversized numeral with a layered neon-blue glow ------- */
.ablauf .step-num {
  width: 60px;
  height: 60px;
  margin-bottom: 1rem;
  border-radius: 18px; /* modern squircle, not a plain dot */
  font-size: 1.85rem;
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(
    155deg,
    var(--neon-royal-bright),
    var(--neon-royal) 52%,
    #0b1430
  );
  color: #eaf2ff;
  border: 1px solid var(--neon-cyan-rim);
  text-shadow: 0 0 12px rgba(120, 170, 255, 0.55);
  box-shadow:
    0 0 0 1px rgba(91, 156, 255, 0.22),
    0 6px 18px rgba(0, 0, 0, 0.45),
    0 0 22px rgba(58, 92, 255, 0.4),
    0 0 46px rgba(35, 72, 224, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* breathing halo — decoupled overlay, desktop-only (no phone heat) */
.ablauf .step-num::after {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(58, 92, 255, 0.4), transparent 70%);
  opacity: 0.28;
  z-index: -1;
  pointer-events: none;
}

/* --- "GROW IN" one-shot when the steps row reveals (all viewports) */
@keyframes stepNumGrow {
  0% {
    opacity: 0;
    transform: scale(0.55);
    filter: brightness(0.55);
  }
  60% {
    opacity: 1;
    transform: scale(1.07);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
  }
}
.steps.in .step-num {
  animation: stepNumGrow 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.steps.in .step:nth-child(2) .step-num {
  animation-delay: 0.1s;
}
.steps.in .step:nth-child(3) .step-num {
  animation-delay: 0.2s;
}
.steps.in .step:nth-child(4) .step-num {
  animation-delay: 0.3s;
}

/* --- Heading letters with a soft neon-blue glow ------------------- */
.ablauf .step h3 {
  font-size: 1.15rem;
  letter-spacing: 0.005em;
  color: #eef4ff;
  text-shadow: 0 0 16px rgba(58, 92, 255, 0.26);
}

/* --- Desktop "living neon": breathe + hover-grow (fine pointer) --- */
@media (hover: hover) and (pointer: fine) and (min-width: 960px) {
  .ablauf .step-num::after {
    animation: stepHaloBreathe 4.4s ease-in-out infinite;
  }
  .ablauf .step:hover .step-num {
    transform: translateY(-2px) scale(1.05);
    box-shadow:
      0 0 0 1px rgba(91, 156, 255, 0.5),
      0 10px 26px rgba(0, 0, 0, 0.5),
      0 0 30px rgba(58, 92, 255, 0.6),
      0 0 66px rgba(35, 72, 224, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.45);
  }
}
@keyframes stepHaloBreathe {
  0%,
  100% {
    opacity: 0.22;
    transform: scale(1);
  }
  50% {
    opacity: 0.55;
    transform: scale(1.16);
  }
}

/* --- Respect reduced motion: kill all motion, keep the static glow */
@media (prefers-reduced-motion: reduce) {
  .steps.in .step-num,
  .ablauf .step-num::after {
    animation: none;
  }
  .ablauf .step:hover .step-num {
    transform: none;
  }
}

/* ================================================================ *
 *  ABLAUF — "STROMKREIS" brutal sequential power-on (homepage)      *
 *  A neon energy rail threads the 4 nodes; on scroll each number     *
 *  IGNITES in sequence (1→2→3→4) while the rail charges along it.    *
 *  Logical: visualises the process flowing Anfrage→…→Übergabe.       *
 *  GPU-only (transform/opacity/filter/box-shadow). No idle rAF.      *
 *  Append-only. FREE hooks: .steps::before/::after, --charge,        *
 *  .step.is-charged. Never touches .step::before/::after (taken).    *
 * ================================================================ */
.ablauf .steps {
  position: relative;
  --charge: 0;
}

/* energy rail — dim guide (::before) + bright charge (::after).      *
 * z-index:0 → sits behind the frosted cards = "conduit beneath glass" */
.ablauf .steps::before,
.ablauf .steps::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 999px;
}

/* ---- MOBILE / base: vertical rail down the left node column ------ */
.ablauf .steps::before,
.ablauf .steps::after {
  left: calc(1.5rem + 29px); /* node centre x: padding-left + ½ of 60px */
  top: calc(2.1rem + 30px); /* first node centre y */
  bottom: 1.5rem;
  width: 2px;
}
.ablauf .steps::before {
  background: rgba(91, 156, 255, 0.16);
}
.ablauf .steps::after {
  background: linear-gradient(
    180deg,
    rgba(58, 92, 255, 0.3),
    var(--neon-royal-bright) 85%
  );
  box-shadow:
    0 0 10px rgba(58, 92, 255, 0.7),
    0 0 22px rgba(35, 72, 224, 0.5);
  transform: scaleY(var(--charge));
  transform-origin: top center;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- TABLET (2-col 2×2): a single line can't thread it cleanly --- */
@media (min-width: 640px) and (max-width: 959.98px) {
  .ablauf .steps::before,
  .ablauf .steps::after {
    display: none; /* the ignition cascade carries the sequence */
  }
}

/* ---- DESKTOP (4-col row): horizontal rail across the node row ---- */
@media (min-width: 960px) {
  .ablauf .steps::before,
  .ablauf .steps::after {
    left: 8%;
    right: 8%;
    top: calc(2.1rem + 29px); /* node centre y */
    bottom: auto;
    width: auto;
    height: 2px;
  }
  .ablauf .steps::after {
    background: linear-gradient(
      90deg,
      rgba(58, 92, 255, 0.3),
      var(--neon-royal-bright) 88%
    );
    transform: scaleX(var(--charge));
    transform-origin: left center;
  }
}

/* ---- BRUTAL node power-on: slam (overshoot) + brightness flash --- */
@keyframes nodeIgnite {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  28% {
    transform: scale(1.24);
    filter: brightness(1.85);
  }
  55% {
    transform: scale(0.97);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}
.ablauf .step.is-charged .step-num {
  animation: nodeIgnite 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  /* stays "powered" after the slam — brighter than the resting glow */
  box-shadow:
    0 0 0 1px rgba(124, 198, 255, 0.6),
    0 6px 18px rgba(0, 0, 0, 0.45),
    0 0 26px rgba(58, 92, 255, 0.7),
    0 0 60px rgba(35, 72, 224, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* ---- Reduced motion: rail fully drawn, nodes powered, no motion -- */
@media (prefers-reduced-motion: reduce) {
  .ablauf .steps {
    --charge: 1;
  }
  .ablauf .steps::after {
    transition: none;
  }
  .ablauf .step.is-charged .step-num {
    animation: none;
  }
}

/* ============================================================= */
/* CIRCLE ELECTRIC — Kontakt-Anfrage (added 2026-06-04)          */
/* Glühender, rotierender Strom-Ring um die Anfrage-Karte.       */
/* GPU-only (transform/opacity), pausiert off-screen,            */
/* respektiert prefers-reduced-motion. Reines ADD.               */
/* ============================================================= */
.anfrage-stage {
  position: relative;
  isolation: isolate;
  max-width: 600px;
  margin-inline: auto;
  padding: 30px;
}
.anfrage-stage::before,
.anfrage-stage::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 26px;
  pointer-events: none;
  z-index: -1;
}
/* Rotierender Strom-Ring — conic gradient, zu einem Halo verwischt */
.anfrage-stage::before {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    var(--neon-cyan-rim) 38deg,
    var(--neon-royal-bright) 92deg,
    transparent 150deg,
    transparent 212deg,
    var(--accent-2) 268deg,
    var(--neon-royal-bright) 320deg,
    transparent 360deg
  );
  filter: blur(28px);
  opacity: 0.6;
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  will-change: transform;
  animation: ee-spin 9s linear infinite;
}
/* Statische innere Aura für Tiefe */
.anfrage-stage::after {
  background: radial-gradient(
    130% 120% at 50% 0%,
    rgba(91, 156, 255, 0.16),
    transparent 62%
  );
  filter: blur(10px);
}
@keyframes ee-spin {
  to {
    transform: rotate(360deg);
  }
}
.anfrage-stage.is-paused::before {
  animation-play-state: paused;
}

/* Die Karte selbst — klares, dunkles Panel mit Cyan-Rand, über dem Halo */
.anfrage-stage .anfrage-form {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: none;
  padding: 2rem 1.7rem;
  background: linear-gradient(
    180deg,
    rgba(16, 22, 34, 0.97),
    rgba(10, 14, 22, 0.98)
  );
  border: 1px solid rgba(124, 198, 255, 0.28);
  border-radius: 20px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    0 0 0 1px rgba(91, 156, 255, 0.12),
    0 18px 50px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* <legend> + optional-Tag im Stil der normalen Labels */
.anfrage-stage .field-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--silver);
  padding: 0;
  margin-bottom: 0.5rem;
}
.anfrage-stage .anrede-field {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.4rem;
}
.anfrage-stage .opt {
  color: var(--text-dim);
  font-weight: 400;
  font-size: 0.82em;
}

/* Zwei-Spalten-Reihen (PLZ/Ort, Telefon/E-Mail) */
.anfrage-stage .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
@media (max-width: 560px) {
  .anfrage-stage .field-row {
    grid-template-columns: 1fr;
  }
}

/* Anrede — segmentierte Pills */
.anfrage-stage .anrede {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
.anfrage-stage .anrede-opt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 0.5rem;
  border: 1px solid rgba(124, 198, 255, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-dim);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}
.anfrage-stage .anrede-opt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.anfrage-stage .anrede-opt:hover {
  border-color: rgba(124, 198, 255, 0.45);
  color: var(--silver);
}
.anfrage-stage .anrede-opt:has(input:checked) {
  border-color: var(--accent);
  color: #fff;
  background: rgba(78, 168, 255, 0.12);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.anfrage-stage .anrede-opt:has(input:focus-visible) {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

/* Select — wie die Inputs + eigener Chevron */
.anfrage-stage .field select {
  width: 100%;
  padding: 0.75rem 2.6rem 0.75rem 0.9rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text);
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235b9cff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  cursor: pointer;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}
.anfrage-stage .field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.anfrage-stage .field select option {
  background: #0c1118;
  color: var(--silver);
}

/* DSGVO-Hinweis */
.anfrage-stage .anfrage-hint {
  margin: 0.3rem 0 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-dim);
}
.anfrage-stage .anfrage-hint a {
  color: var(--accent-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Reduced motion — Spin aus, sanfter statischer Schein bleibt */
@media (prefers-reduced-motion: reduce) {
  .anfrage-stage::before {
    animation: none;
    opacity: 0.42;
  }
}

/* ============================================================= */
/* KONTAKT DUAL-CTA — E-Mail (prefilled) neben WhatsApp           */
/* ============================================================= */
.kontakt-cta {
  display: grid;
  gap: 0.8rem;
  align-content: start;
}
.btn-email-big {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  color: #061026;
  background: linear-gradient(135deg, var(--neon-royal-bright), var(--accent));
  box-shadow: 0 8px 24px rgba(58, 92, 255, 0.28);
  transition:
    filter 0.18s ease,
    transform 0.18s ease;
}
.btn-email-big:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
  .btn-email-big {
    transition: none;
  }
  .btn-email-big:hover {
    transform: none;
  }
}

/* SEO footer — interne Verlinkung (premium sitemap) */
.footer-seo {
  width: 100%;
  max-width: 780px;
  margin: 0.5rem auto 0;
  padding-top: 1.9rem;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1.1fr 1.1fr 0.9fr;
  gap: 1.9rem 2.4rem;
  text-align: left;
}
.footer-seo > div {
  min-width: 0;
}
.footer-seo h3 {
  margin: 0 0 0.9rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.footer-seo ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-seo li {
  margin: 0 0 0.5rem;
}
.footer-seo a {
  display: inline-block;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.35;
  transition:
    color 0.16s ease,
    transform 0.16s ease;
}
.footer-seo a:hover {
  color: var(--text);
  transform: translateX(3px);
}
@media (max-width: 640px) {
  .footer-seo {
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem 1.4rem;
    max-width: 440px;
    padding-top: 1.6rem;
  }
}
@media (max-width: 400px) {
  .footer-seo {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: center;
  }
  .footer-seo a:hover {
    transform: none;
  }
}

/* Landing-page Hero-Foto (royalty-free Pexels, lokal gehostet) */
.page-hero.lp-photo .page-hero-bg {
  background-image:
    linear-gradient(180deg, rgba(7,10,20,.66) 0%, rgba(7,10,20,.30) 30%, rgba(7,10,20,.46) 64%, rgba(7,10,20,.94) 100%),
    radial-gradient(120% 85% at 50% -5%, rgba(78,168,255,.12), transparent 60%),
    var(--lp-img);
  background-size: cover;
  background-position: center 36%;
  background-repeat: no-repeat;
}