/* ============================================================ */
/* GRUNDMANN OBJEKTREINIGUNG — style.css                          */
/* ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@500&display=swap');

:root {
  --navy: #00113b;
  --deep: #00297d;
  --blue: #0066f3;
  --cyan: #359df4;
  --gold: #c9a15a;
  --gold-light: #e8cf9a;
  --ice: #eaf3fd;
  --paper: #f8fbfe;
  --amber: #359df4;
  --ink: #0d1730;
  --muted: #55698f;
  --line: #dbe9f9;
  --shadow-sm: 0 8px 24px rgba(5, 15, 46, 0.10);
  --shadow-md: 0 20px 48px rgba(5, 15, 46, 0.16);
  --shadow-lg: 0 34px 80px rgba(5, 15, 46, 0.28);
}

* , *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * , *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  color: var(--ink);
  font: 16px/1.65 'Manrope', Arial, sans-serif;
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100vw;
}
html { overflow-x: hidden; max-width: 100vw; }

h1, h2, h3 { font-family: 'Space Grotesk', 'Manrope', sans-serif; color: var(--navy); margin: 0; letter-spacing: -0.01em; }
p { margin: 0; color: var(--muted); }
img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

.eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 500; display: inline-flex; align-items: flex-start; gap: 10px;
  color: var(--blue);
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; display: inline-block; opacity: .55; margin-top: .55em; flex-shrink: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 28px; border-radius: 999px; font-weight: 700; font-size: 15px;
  text-decoration: none; border: none; cursor: pointer; font-family: 'Manrope', sans-serif;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease; white-space: nowrap;
}
.btn-primary { background: linear-gradient(135deg, var(--blue), var(--cyan)); color: #fff; box-shadow: 0 16px 34px rgba(10,99,209,.34); }
.btn-wa { background: #25D366; color: #fff; box-shadow: 0 16px 34px rgba(37,211,102,.32); }
.btn-ghost { background: rgba(255,255,255,.08); color: #fff; border: 1.5px solid rgba(255,255,255,.35); }

/* Hover-Effekte nur auf Geräten mit echter Maus (Desktop) — auf Touch-Geräten
   gibt es kein "Hover", dort wirkt stattdessen :active als Tipp-Feedback */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 22px 42px rgba(10,99,209,.42); }
  .btn-wa:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 22px 42px rgba(37,211,102,.4); }
  .btn-ghost:hover { background: rgba(255,255,255,.16); border-color: #fff; transform: scale(1.05); }
}
.btn:active { transform: scale(0.96); transition: transform .1s ease; }
/* Desktop zeigt "Lernen Sie mich kennen" (führt zur Anfrage), Mobil zeigt "Rufen Sie mich an" */
.btn-mobile-only { display: none; }
@media (max-width: 900px) {
  .btn-desktop-only { display: none; }
  .btn-mobile-only { display: inline-flex; }
}

/* ---------- HEADER ---------- */
header {
  position: sticky; top: 16px; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  max-width: 1080px; margin: 16px auto 0; padding: 10px 12px 10px 22px;
  border-radius: 999px; background: rgba(255,255,255,.8); backdrop-filter: blur(16px);
  box-shadow: var(--shadow-md); border: 1px solid rgba(255,255,255,.6);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-wordmark { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 17px; color: var(--navy); letter-spacing: -.01em; white-space: nowrap; text-decoration: none; }
@media (max-width: 500px) { .brand-wordmark { display: none; } }
.brand img { height: 48px; width: auto; max-width: 240px; object-fit: contain; }
nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
nav a { position: relative; color: var(--navy); font-weight: 700; font-size: 14px; text-decoration: none; padding: 6px 0; }
nav a::after { content:""; position:absolute; left:50%; bottom:-1px; width:0; height:2px; background:var(--cyan); transition:width .25s ease, left .25s ease; }
nav a:hover::after { width: 100%; left: 0; }
.header-call {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 9px 18px;
  color: #fff; font-weight: 700; font-size: 13.5px; text-decoration: none; border-radius: 999px;
  background: linear-gradient(135deg, var(--deep), var(--blue) 68%, var(--cyan));
  box-shadow: 0 10px 22px rgba(10,99,209,.32); transition: transform .2s ease, box-shadow .2s ease; white-space: nowrap;
}
.header-call:hover { transform: translateY(-2px); box-shadow: 0 14px 26px rgba(10,99,209,.4); }
.header-call-mobile { display: none; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--navy); margin: 5px 0; border-radius: 2px; }

@media (max-width: 860px) {
  header { flex-wrap: wrap; border-radius: 24px; padding: 12px 18px; }
  nav { display: none; width: 100%; order: 3; }
  nav.open { display: block; }
  nav ul { flex-direction: column; gap: 14px; padding: 14px 0 6px; }
  .nav-toggle { display: block; }
  .header-call-desktop { display: none; }
  .header-call-mobile { display: inline-flex; }
}

/* ---------- HERO ---------- */
.hero {
  position: relative; overflow: hidden; padding: 86px 0 130px;
  background: radial-gradient(ellipse 1100px 620px at 20% -10%, #103a7a 0%, #050f2e 55%),
              linear-gradient(160deg, #050f2e 0%, #0a2b63 100%);
}
.hero::before {
  content: ""; position: absolute; inset: -20%;
  background: radial-gradient(circle 480px at 85% 20%, rgba(37,182,239,.28), transparent 60%),
              radial-gradient(circle 420px at 10% 85%, rgba(10,99,209,.24), transparent 60%);
  animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift { from { transform: translate(0,0) scale(1); } to { transform: translate(-3%,2%) scale(1.06); } }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero .eyebrow { color: var(--cyan); }
.hero h1 { color: #fff; font-size: clamp(36px, 4.8vw, 58px); line-height: 1.08; margin: 18px 0 22px; }
.hero h1 span { color: var(--cyan); }
.hero h1 span.hero-subtitle { color: #4d9dff; font-size: clamp(36px, 4.8vw, 58px); font-weight: 700; display: inline-block; margin-top: 6px; }

.hero p.lead { color: rgba(255,255,255,.78); font-size: 18px; max-width: 480px; margin: 0 0 32px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }
.hero-actions .btn { flex: 1 1 190px; }
@media (max-width: 900px) {
  .hero-wa-desktop-only { display: none; }
}
.trust { display: flex; gap: 26px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14); }
.trust-item { display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.82); font-size: 13px; font-weight: 600; }
.trust-item svg { color: var(--cyan); flex-shrink: 0; }
.trust-mobile { display: none; }

.hero-card { position: relative; border-radius: 26px; overflow: hidden; box-shadow: 0 40px 90px rgba(0,0,0,.4); aspect-ratio: 4/4.5; transform: rotate(2deg); }
.hero-card.logo-card { aspect-ratio: 1/1; transform: none; box-shadow: 0 24px 60px rgba(5,15,46,.22); }
.hero-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, transparent 50%, rgba(5,15,46,.6) 100%); }
.hero-card.logo-card { background: #ffffff; display: flex; align-items: center; justify-content: center; padding: 22px 30px; }
.hero-card.logo-card img { width: 100%; height: 100%; object-fit: contain; }
.hero-card.logo-card::after { display: none; }

/* ---------- Logo-Einblendung: sanftes Einblenden ohne Drehung (neues, breites Logo) ---------- */
.logo-card {
  opacity: 0; transform: scale(.94);
  animation: logoFadeIn .8s cubic-bezier(.2,.8,.2,1) .2s forwards;
}
@keyframes logoFadeIn {
  0%   { opacity: 0; transform: scale(.94); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes logoSpinInMobile {
  0%   { opacity: 0; transform: scale(.94); }
  100% { opacity: 1; transform: rotate(0deg) scale(1); }
}
.logo-polish-shine {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden;
}
.logo-polish-shine::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55) 45%, rgba(255,255,255,.75) 50%, rgba(255,255,255,.55) 55%, transparent);
  transform: skewX(-18deg);
  animation: logoShine 1.2s ease .9s forwards;
}
@keyframes logoShine {
  0%   { left: -60%; }
  100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-card { animation: none; opacity: 1; transform: none; }
  .logo-polish-shine::after { animation: none; display: none; }
}
.float-badge {
  position: absolute; left: -26px; bottom: 38px; transform: rotate(-3deg);
  background: rgba(255,255,255,.95); backdrop-filter: blur(8px); border-radius: 16px; padding: 14px 18px;
  box-shadow: 0 20px 48px rgba(5,15,46,.3); display: flex; align-items: center; gap: 12px;
}
.float-badge .num { font-family: 'Space Grotesk'; font-size: 26px; font-weight: 700; color: var(--blue); }
.float-badge .lbl { font-size: 11.5px; color: var(--muted); font-weight: 700; line-height: 1.3; }

.hero-cut { position: absolute; left: 0; right: 0; bottom: -1px; height: 90px; background: var(--paper); clip-path: polygon(0 100%, 100% 100%, 100% 40%, 0 100%); }
@media (max-width: 900px) {
  .hero-cut { height: 46px; clip-path: polygon(0 100%, 100% 100%, 100% 62%, 0 100%); }
}

/* ---------- Durchlaufender Bewertungs-Banner ---------- */
.marquee-section {
  background: var(--navy); overflow: hidden; padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08);
  max-width: 100vw; contain: paint;
}
.marquee-track { display: flex; width: max-content; animation: marqueeScroll 26s linear infinite; }
.marquee-content { display: flex; align-items: center; flex-shrink: 0; }
.marquee-item {
  display: inline-flex; align-items: center; gap: 8px; padding: 0 30px;
  color: #fff; font-weight: 700; font-size: 13.5px; text-decoration: none; white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,.14);
}
a.marquee-item:hover { color: var(--cyan); }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ---------- SECTIONS ---------- */
.section { padding: 96px 0; }
.head { text-align: center; max-width: 600px; margin: 0 auto 48px; }
.head h2 { font-size: clamp(27px, 3.3vw, 40px); margin: 14px 0 12px; }
.head p { font-size: 16px; }

/* ---------- COMPARE SLIDER ---------- */
.compare {
  position: relative; max-width: 680px; margin: 0 auto; aspect-ratio: 245/335; border-radius: 20px;
  overflow: hidden; box-shadow: var(--shadow-lg); user-select: none; touch-action: pan-y;
}
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.compare .after-img { clip-path: inset(0 0 0 var(--pos, 50%)); }
.tag { position: absolute; top: 14px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; background: rgba(5,15,46,.72); color: #fff; padding: 6px 12px; border-radius: 999px; z-index: 3; }
.tag.before { left: 14px; } .tag.after { right: 14px; }
.handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 3px; background: #fff; transform: translateX(-50%); z-index: 2; pointer-events: none; }
.handle::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%,-50%);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230a63d1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='8 7 3 12 8 17'%3E%3C/polyline%3E%3Cpolyline points='16 7 21 12 16 17'%3E%3C/polyline%3E%3C/svg%3E") center/20px no-repeat;
  border-radius: 50%; box-shadow: 0 20px 48px rgba(5,15,46,.2);
}
.compare-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 4; -webkit-appearance: none; }
.caption { text-align: center; margin-top: 18px; font-size: 13px; color: var(--muted); font-weight: 600; }

/* ---------- LEISTUNGEN ---------- */
.services { background: var(--ice); }
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.svc-card { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--line); transition: transform .3s ease, box-shadow .3s ease; }
.svc-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }
.svc-media { aspect-ratio: 4/3; overflow: hidden; }
.svc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; display: block; }
.svc-card:hover .svc-media img { transform: scale(1.08); }
.svc-body { padding: 20px 20px 24px; }
.svc-num { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--cyan); font-weight: 500; }
.svc-body h3 { font-size: 17.5px; margin: 7px 0 9px; }
.svc-body p { font-size: 13.5px; }

/* ---------- ABLAUF ---------- */
.process { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.process-4 { grid-template-columns: repeat(4, 1fr); gap: 28px; position: relative; }
.process-4.reveal-late-trigger.line-only { opacity: 1; transform: none; }
.process-line {
  position: absolute; top: 34px; left: 12.5%; right: 12.5%; height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  transform: scaleX(0); transform-origin: left center;
  transition: transform 2.6s cubic-bezier(.16,.84,.24,1) .2s; z-index: 0;
}
.process-4.line-only.in .process-line { transform: scaleX(1); }
@media (max-width: 900px) {
  .process-line { display: none; }
  .process-4 { grid-template-columns: 1fr; }
  .process-4 > div { text-align: center; }
  .process-4 .step-icon { margin-left: auto; margin-right: auto; }
}
/* Schritte: eigene, deutlich langsamere Einblend-Klasse (löst erst spürbar später beim
   Scrollen aus als die übrigen .reveal-Elemente, siehe script.js) */
.reveal-late { opacity: 0; transform: translateY(34px); transition: opacity 1.4s ease, transform 1.4s cubic-bezier(.16,.84,.24,1); }
.reveal-late.in { opacity: 1; transform: translateY(0); }
.step-icon {
  width: 52px; height: 52px; margin: 0 0 16px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--blue), var(--cyan)); color: #fff;
}
.step-num { font-family: 'Space Grotesk'; font-size: 42px; font-weight: 700; background: linear-gradient(135deg, var(--blue), var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; display: block; margin-bottom: 12px; }
.process h3 { font-size: 18px; margin: 0 0 8px; }
.process p { font-size: 14px; }

/* ---------- ÜBER MICH ---------- */
.about { position: relative; overflow: hidden; background: var(--navy); }
.about::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 600px 500px at 88% 15%, rgba(37,182,239,.18), transparent 60%); }
.about-grid { position: relative; display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: center; }
.about-media { position: relative; border-radius: 22px; overflow: hidden; box-shadow: 0 34px 80px rgba(0,0,0,.35); aspect-ratio: 3/3.3; }
.about-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-badge {
  position: absolute; left: 20px; bottom: 20px; z-index: 2;
  background: var(--navy); border-radius: 14px; padding: 14px 20px;
  box-shadow: 0 20px 48px rgba(0,0,0,.4);
}
.about-badge strong { display: block; color: #fff; font-size: 15.5px; font-family: 'Space Grotesk', sans-serif; }
.about-badge span { display: block; color: rgba(255,255,255,.7); font-size: 12px; margin-top: 2px; }
.about .eyebrow { color: var(--cyan); }
.about-copy h2 { color: #fff; font-size: clamp(26px, 3vw, 36px); margin: 16px 0 18px; }
.about-copy p.lead { color: rgba(255,255,255,.78); font-size: 16px; margin: 0 0 26px; }
.about-list { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 12px; }
.about-list li { display: flex; gap: 11px; align-items: flex-start; color: rgba(255,255,255,.86); font-size: 14px; font-weight: 600; }
.about-list svg { flex-shrink: 0; margin-top: 2px; color: var(--cyan); }

/* ---------- KONTAKT ---------- */
.contact { background: var(--ice); }
.contact-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 26px; align-items: stretch; min-width: 0; }
.contact-grid > .form-card { display: flex; flex-direction: column; }
.contact-grid > .form-card form { display: flex; flex-direction: column; flex: 1; }
.contact-grid > .form-card form .form-actions { margin-top: auto; }
.contact-grid > div.reveal { display: flex; flex-direction: column; }
.contact-grid > div.reveal .map-wrap { flex: 1; min-height: 220px; }
.contact-grid > * { min-width: 0; }
.form-card { background: #fff; border-radius: 22px; padding: 40px; box-shadow: var(--shadow-sm); border: 1px solid var(--line); min-width: 0; }
.required-note { font-size: 12px; color: var(--muted); margin: 0 0 14px; }
.ref-confirm {
  display: none; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700;
  color: #1a9d5c; margin: 6px 0 0;
}
.ref-confirm.visible { display: flex; }
.field-error {
  display: none; font-size: 12.5px; font-weight: 700; color: #c0392b; margin: 6px 0 0;
}
.field-error.visible { display: block; }
.field input.field-invalid { border-color: #c0392b; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; min-width: 0; }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; min-width: 0; }
.field label { font-size: 12.5px; font-weight: 700; color: var(--navy); }
.field input, .field textarea {
  font-family: 'Manrope', sans-serif; font-size: 14.5px; padding: 12px 14px; border-radius: 11px;
  border: 1.5px solid var(--line); background: var(--paper); color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease;
  height: 48px; line-height: 1.2; box-sizing: border-box;
  width: 100%; min-width: 0;
}
/* Select: eigener Wrapper trägt Rahmen/Höhe/Hintergrund, damit er pixelgenau
   mit den Text-Feldern übereinstimmt (Browser rendern <select> sonst uneinheitlich) */
.select-wrap {
  height: 48px; box-sizing: border-box; border-radius: 11px;
  border: 1.5px solid var(--line); background: var(--paper);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355698f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.select-wrap select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  width: 100%; height: 100%; box-sizing: border-box; border: none; background: transparent;
  font-family: 'Manrope', sans-serif; font-size: 14.5px; color: var(--ink);
  padding: 0 40px 0 14px; cursor: pointer; outline: none;
}
.field input[type="file"] { height: auto; padding: 10px 14px; }
.field textarea { height: auto; }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(37,182,239,.16); background: #fff;
}
.select-wrap:focus-within {
  border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(37,182,239,.16); background-color: #fff;
}
/* Eigenes Adress-Dropdown (statt <datalist>, das auf iPhone/Safari kaum funktioniert) */
.autocomplete-wrap { position: relative; display: block; width: 100%; }
.autocomplete-list {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50;
  background: #fff; border: 1.5px solid var(--line); border-radius: 11px;
  box-shadow: var(--shadow-md); list-style: none; margin: 0; padding: 6px;
  max-height: 240px; overflow-y: auto; display: none;
}
.autocomplete-list.open { display: block; }
.autocomplete-list li {
  padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--ink);
}
.autocomplete-list li:hover { background: var(--ice); }
.field textarea { resize: vertical; min-height: 110px; }
.form-status { font-size: 13.5px; font-weight: 600; margin: 4px 0 0; min-height: 1.2em; }
.form-status.status-loading { color: var(--muted); }
.form-status.status-error { color: #c0392b; }
.consent { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; color: var(--muted); margin: 2px 0 22px; }
.consent input { margin-top: 3px; }
.form-actions { display: flex; gap: 14px; flex-wrap: wrap; min-width: 0; }
.form-actions .btn { min-width: 0; max-width: 100%; flex: 1 1 160px; }
.hidden-field { position: absolute; left: -5000px; }

.info-card { background: var(--navy); color: #fff; border-radius: 22px; padding: 34px; margin-bottom: 20px; }
.info-card h3 { color: #fff; font-size: 18.5px; margin: 0 0 18px; }
.info-row { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 16px; }
.info-row:last-child { margin-bottom: 0; }
.info-row svg { flex-shrink: 0; color: var(--cyan); margin-top: 2px; }
.info-row div { font-size: 13.5px; color: rgba(255,255,255,.85); line-height: 1.5; }
.info-row strong { display: block; color: #fff; font-size: 12.5px; font-weight: 700; margin-bottom: 3px; }
.info-row a { color: rgba(255,255,255,.85); text-decoration: none; }
.info-row a:hover { text-decoration: underline; }
.map-wrap { border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--line); min-height: 220px; }
.map-wrap iframe { display: block; width: 100%; height: 100%; min-height: 220px; border: 0; }

/* ---------- FOOTER ---------- */
footer { background: var(--navy); color: rgba(255,255,255,.6); padding: 46px 20px 26px; }
.footer-inner { max-width: 1080px; margin: 0 auto; text-align: center; }
.footer-logo-card {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 20px; padding: 16px 28px; margin-bottom: 22px;
  box-shadow: 0 20px 48px rgba(0,0,0,.25);
}
.footer-logo-card img { height: 56px; width: auto; }
.footer-inner strong { font-family: 'Space Grotesk', sans-serif; font-size: 21px; color: #fff; display: block; margin-bottom: 8px; }
.footer-inner p { font-size: 13.5px; color: rgba(255,255,255,.6); margin-bottom: 18px; }
.footer-links { padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); font-size: 12.5px; }
.footer-links a { color: rgba(255,255,255,.55); text-decoration: none; margin: 0 10px; }
.footer-links a:hover { color: #fff; }
.footer-tax-note {
  max-width: 560px; margin: 20px auto 0; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.1); font-size: 12px;
  color: rgba(255,255,255,.5); line-height: 1.6;
}

/* ---------- WHATSAPP FLOAT ---------- */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 200; width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 32px rgba(37,211,102,.45); text-decoration: none;
}
.wa-float:hover { transform: scale(1.08); }

.contact-float {
  position: fixed; right: 20px; bottom: 90px; z-index: 200; width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--cyan)); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 32px rgba(10,99,209,.4); text-decoration: none; transition: transform .2s ease;
}
.contact-float:hover { transform: scale(1.08); }
.contact-float-desktop { display: none; }
@media (min-width: 901px) { .contact-float-desktop { display: flex; } }

/* ---------- SCROLL REVEAL ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
.about-slide-in { opacity: 0; transform: translateX(-60px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.about-slide-in.in { opacity: 1; transform: translateX(0); }
@media (max-width: 900px) {
  .about-slide-in { transform: translateY(24px); }
  .about-slide-in.in { transform: translateY(0); }
  .about-copy { text-align: center; }
  .about-copy .lead { margin-left: auto; margin-right: auto; }
  .about-list { max-width: 320px; margin-left: auto; margin-right: auto; }
  .about-list li { justify-content: flex-start; text-align: left; }
}

/* Foto im Über-mich-Bereich: fliegt langsam von links ein */
.about-media-slide-in { opacity: 0; transform: translateX(-90px); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.16,.84,.24,1); }
.about-media-slide-in.in { opacity: 1; transform: translateX(0); }
@media (max-width: 900px) {
  .about-media-slide-in { transform: translateY(40px); }
  .about-media-slide-in.in { transform: translateY(0); }
}

/* "Lernen Sie mich kennen" / "Rufen Sie mich an"-Button: pulsiert dreimal, sobald der
   Bereich beim Scrollen ins Bild kommt */
.about-slide-in.in .btn-pulse {
  animation: btnPulse .7s ease 2s 3;
}
@keyframes btnPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-pulse { animation: none !important; }
}

/* Namens-Ausweis auf dem Foto: erscheint erst, sobald das Foto eingeflogen ist, und
   "poliert" sich kurz mit einem Glanzstreifen ein */
.about-badge { opacity: 0; transform: scale(.85); transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1); overflow: hidden; }
.about-badge.polished { opacity: 1; transform: scale(1); }
.about-badge.polished::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5) 50%, transparent);
  transform: translateX(-120%); animation: badgeShine .8s ease .1s;
}
@keyframes badgeShine { to { transform: translateX(120%); } }

/* "Poliert"-Effekt für die Haken-Punkte: nacheinander mit kurzem Aufblitzen */
.polish-item { opacity: 0; transform: translateX(-10px); transition: opacity .4s ease, transform .4s ease; }
.polish-item.polished {
  opacity: 1; transform: translateX(0);
  animation: polishFlash .6s ease;
}
.polish-item.polished svg { animation: polishSpin .5s ease; }
@keyframes polishFlash {
  0% { color: var(--cyan); }
  100% { color: inherit; }
}
@keyframes polishSpin {
  0% { transform: scale(.6) rotate(-20deg); }
  60% { transform: scale(1.25) rotate(8deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .about-media-slide-in { opacity: 1; transform: none; }
  .about-badge { opacity: 1; transform: none; }
  .about-badge.polished::after { animation: none; display: none; }
  .polish-item { opacity: 1; transform: none; }
  .polish-item.polished { animation: none; }
  .polish-item.polished svg { animation: none; }
}

.svc-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero .hero-visual { max-width: 400px; margin: 0 auto; padding-bottom: 20px; }
  .hero-card { transform: none; }
  .logo-card { animation: logoSpinInMobile .8s cubic-bezier(.2,.8,.2,1) .2s forwards; }
  .hero-copy { text-align: center; }
  .hero-copy .lead { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .trust-desktop { display: none; }
  .float-badge-desktop { display: none; }
  .trust-mobile {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 16px;
    padding-top: 20px; margin-top: 20px; border-top: 1px solid rgba(255,255,255,.14);
  }
  .trust-mobile .trust-item { justify-content: flex-start; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .process { grid-template-columns: 1fr; gap: 36px; }
  .about-grid { grid-template-columns: 1fr; }
  .about-media { max-width: 360px; margin: 0 auto; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .svc-grid { grid-template-columns: 1fr; }
  .svc-grid-4 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

/* ---------- LEISTUNGEN (ICON-KACHELN, 4 SPALTEN) ---------- */
.svc-tile {
  background: #fff; border-radius: 22px; padding: 32px 24px; text-align: center;
  box-shadow: var(--shadow-sm); border: 1px solid var(--line);
  transition: transform .3s ease, box-shadow .3s ease;
}
.svc-icon {
  width: 68px; height: 68px; margin: 0 auto 22px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--blue), var(--cyan)); color: #fff;
}
.svc-tile h3 { font-size: 18px; margin-bottom: 10px; }
.svc-tile p { font-size: 13.5px; }
/* Beide Texte liegen übereinander in derselben Grid-Zelle — die Zeile bekommt dadurch von
   Anfang an genug Höhe für den längeren Text reserviert. Beim Umschalten ändert sich also
   nie die Größe der Kachel oder Sektion (kein Ruckeln mehr), es wird nur die Deckkraft
   überblendet — das ist zudem GPU-beschleunigt und läuft deutlich flüssiger als eine
   max-height-Animation. */
.svc-text-stack { display: grid; }
.svc-text-stack > p { grid-area: 1 / 1; transition: opacity .25s ease; }
.svc-short { opacity: 1; }
.svc-more { opacity: 0; pointer-events: none; }
/* Desktop: komplette Kachel linksbündig (Icon, Überschrift, Text) — einheitliches Bild
   statt der vorherigen Mischung aus zentriertem Icon/Titel und linksbündigem Text.
   Auf dem Handy bleibt alles zentriert. */
@media (min-width: 901px) {
  .svc-tile { text-align: left; }
  .svc-icon { margin-left: 0; margin-right: 0; }
  .svc-text-stack { text-align: left; }
}
@media (hover: hover) and (pointer: fine) {
  .svc-tile:hover { transform: translateY(-8px) scale(1.04); box-shadow: var(--shadow-md); z-index: 2; position: relative; }
  .svc-tile:hover .svc-short { opacity: 0; }
  .svc-tile:hover .svc-more { opacity: 1; }
}
.svc-tile.tapped { transform: translateY(-4px) scale(1.02); box-shadow: var(--shadow-md); }
.svc-tile.tapped .svc-short { opacity: 0; }
.svc-tile.tapped .svc-more { opacity: 1; }

/* ---------- EINSATZGEBIET / RADIUS-KARTE ---------- */
.radius-section { background: var(--navy); position: relative; overflow: hidden; }
.radius-section::before { content:""; position:absolute; inset:0; background: radial-gradient(ellipse 600px 500px at 85% 10%, rgba(37,182,239,.16), transparent 60%); }
.radius-section .eyebrow { color: var(--cyan); }
.radius-section .head h2 { color: #fff; }
.radius-section .head p { color: rgba(255,255,255,.72); }

.radius-layout { position: relative; display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; }
.radius-layout-stacked {
  grid-template-columns: 1fr; justify-items: center; text-align: center; max-width: 760px; margin: 0 auto;
}
.radius-layout-stacked .radius-map-wrap { width: 100%; }
.radius-info-below { display: flex; flex-direction: column; align-items: center; }
.radius-map-wrap {
  position: relative; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-lg);
  aspect-ratio: 4/3.4; border: 1px solid rgba(255,255,255,.12);
}
#radiusMap { width: 100%; height: 100%; }

/* Pulsierender Sender-Punkt über Speyer */
.pulse-marker { position: relative; width: 16px; height: 16px; }
.pulse-dot {
  position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  background: #ffffff; border-radius: 50%; box-shadow: 0 0 0 3px rgba(0,102,243,.5);
  z-index: 3;
}
.pulse-ring {
  position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: rgba(255,255,255,.65);
  animation: pulseGrow 2.2s ease-out infinite;
}
.pulse-ring.d2 { animation-delay: .7s; }
.pulse-ring.d3 { animation-delay: 1.4s; }
@keyframes pulseGrow {
  0% { transform: scale(1); opacity: .8; }
  100% { transform: scale(11); opacity: 0; }
}

.radius-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.radius-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; color: #fff; font-size: 14.5px; font-weight: 600;
}
.radius-list li span.km {
  font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; font-weight: 500;
  color: var(--cyan); background: rgba(37,182,239,.12); padding: 4px 10px; border-radius: 999px;
}
.radius-note { color: rgba(255,255,255,.6); font-size: 13px; margin-top: 18px; }
.city-pins { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
/* Jeder Pin fliegt beim Erscheinen aus einer anderen Richtung ein (Desktop) */
.city-pins .city-pin {
  opacity: 0; transition: transform .65s cubic-bezier(.2,.8,.2,1), opacity .5s ease;
}
.city-pins .city-pin:nth-child(6n+1) { transform: translate(-60px, 0); }
.city-pins .city-pin:nth-child(6n+2) { transform: translate(0, -40px); }
.city-pins .city-pin:nth-child(6n+3) { transform: translate(60px, 0); }
.city-pins .city-pin:nth-child(6n+4) { transform: translate(0, 40px); }
.city-pins .city-pin:nth-child(6n+5) { transform: translate(-45px, 30px); }
.city-pins .city-pin:nth-child(6n+6) { transform: translate(45px, -30px); }
.city-pins.in .city-pin { opacity: 1; transform: translate(0, 0); }
.city-pins.in .city-pin:nth-child(1) { transition-delay: .05s; }
.city-pins.in .city-pin:nth-child(2) { transition-delay: .1s; }
.city-pins.in .city-pin:nth-child(3) { transition-delay: .15s; }
.city-pins.in .city-pin:nth-child(4) { transition-delay: .2s; }
.city-pins.in .city-pin:nth-child(5) { transition-delay: .25s; }
.city-pins.in .city-pin:nth-child(6) { transition-delay: .3s; }
.city-pins.in .city-pin:nth-child(7) { transition-delay: .35s; }
.city-pins.in .city-pin:nth-child(8) { transition-delay: .4s; }
.city-pins.in .city-pin:nth-child(9) { transition-delay: .45s; }
.city-pins.in .city-pin:nth-child(10) { transition-delay: .5s; }
.city-pins.in .city-pin:nth-child(11) { transition-delay: .55s; }
.city-pins.in .city-pin:nth-child(12) { transition-delay: .6s; }
.city-pins.in .city-pin:nth-child(13) { transition-delay: .65s; }
/* Auf schmalen Bildschirmen: einfaches, dezentes Von-unten-Einblenden statt seitlichem Flug
   (verhindert horizontales Wackeln/Überlaufen auf kleinen Viewports) */
@media (max-width: 760px) {
  .city-pins .city-pin { transform: translateY(22px) scale(.9) !important; }
  .city-pins.in .city-pin { transform: translateY(0) scale(1) !important; }
}
.city-pin {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 13px;
  border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  color: #fff; font-size: 12px; font-weight: 600;
}
.city-pin svg { color: var(--cyan); flex-shrink: 0; }

.leaflet-control-attribution { font-size: 10px !important; }

@media (max-width: 900px) {
  .radius-layout { grid-template-columns: 1fr; }
  .radius-map-wrap { aspect-ratio: 4/3; }
}

/* ---------- FAQ (native <details>-Akkordeon, kein JS nötig) ---------- */
.faq-list { max-width: 760px; margin: 0 auto; display: grid; gap: 14px; }
.faq-item {
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 4px 22px; box-shadow: var(--shadow-sm);
}
.faq-item summary {
  cursor: pointer; list-style: none; padding: 18px 30px 18px 0; position: relative;
  font-weight: 700; color: var(--navy); font-size: 15px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-size: 22px; color: var(--blue); font-weight: 400; transition: transform .25s ease;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item p { padding: 0 0 20px; font-size: 14px; }

/* ---------- Google-Bewertungs-Badge ---------- */
.review-badge {
  display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line);
  border-radius: 16px; padding: 16px 20px; margin-bottom: 20px; text-decoration: none;
  box-shadow: var(--shadow-sm); font-weight: 700; color: var(--navy); font-size: 14.5px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.review-badge:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* ---------- WhatsApp-QR-Code (nur Desktop) ---------- */
.qr-card-desktop { display: none; }
@media (min-width: 901px) {
  .qr-card-desktop {
    display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--line);
    border-radius: 16px; padding: 16px 20px; margin-bottom: 20px; box-shadow: var(--shadow-sm);
  }
}
.qr-card img { border-radius: 8px; flex-shrink: 0; }
.qr-card strong { display: block; color: var(--navy); font-size: 14px; margin-bottom: 4px; }
.qr-card span { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.4; }

/* ---------- Karten-Consent (Google Maps erst nach Klick laden) ---------- */
.map-wrap { position: relative; min-height: 220px; }
.map-consent {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; gap: 14px; padding: 20px;
  background: linear-gradient(135deg, var(--ice), #dcecfb);
}
.map-consent p { font-size: 12.5px; max-width: 220px; }
.btn-small { padding: 10px 20px; font-size: 13px; }
.map-wrap iframe { display: block; width: 100%; height: 100%; min-height: 220px; border: 0; position: relative; z-index: 1; }

/* ---------- Sticky Mobil-CTA-Leiste ---------- */
.mobile-cta-bar { display: none; }
@media (max-width: 640px) {
  .mobile-cta-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
    display: flex; gap: 1px; background: var(--line);
    box-shadow: 0 -8px 24px rgba(5,15,46,.14);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mcta {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 15px 10px; font-weight: 700; font-size: 14px; text-decoration: none;
  }
  .mcta-call { background: var(--navy); color: #fff; }
  .mcta-wa { background: #25D366; color: #fff; }
  .wa-float { display: none; }
  body { padding-bottom: 60px; }
}

/* ---------- Radius-Zahl gross (nur Spezial-Website) ---------- */
.radius-big-num { margin-bottom: 22px; }
.radius-big-num .num { font-family: 'Space Grotesk'; font-size: 46px; font-weight: 700; color: #fff; display: block; }
.radius-big-lbl { font-size: 13px; color: rgba(255,255,255,.65); font-weight: 600; }

/* ---------- Wisch-Effekt Canvas im Hero ---------- */
.hero-visual { position: relative; max-width: 460px; margin-left: auto; }
.wipe-canvas { position: absolute; inset: 0; pointer-events: none; z-index: 5; border-radius: 26px; }