/* Reset */
:root{--bg:#0b1220;--text:#0f172a;--muted:#6b7280;--gold:#f59e0b;--brand:#111827;--card:#fff}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;color:var(--text);background:#f8fafc;line-height:1.65}

/* Header */
.header{position:sticky;top:0;background:#fff;border-bottom:1px solid #e5e7eb;z-index:50}
.header__row{display:flex;align-items:center;justify-content:space-between;padding:8px 0}
.brand img{height:64px;max-height:64px}@media (max-width:520px){.brand img{height:48px;max-height:48px}}
.nav{display:flex;gap:14px;align-items:center}
.nav a{color:#111827;text-decoration:none;font-weight:700}
.container{max-width:1100px;margin:0 auto;padding:0 16px}

/* Buttons */
.btn{display:inline-block;padding:12px 16px;border-radius:12px;text-decoration:none;font-weight:800}
.btn--gold{background:var(--gold);color:#1f2937}
.btn--whatsapp{background:#25D366;color:#fff}
.btn--dark{background:#0b0f19;color:#fff}
.btn--sm{padding:8px 12px}

/* Hero */
.hero{padding:40px 0}
.hero--split .hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
.hero__img{display:none}
.lead{font-size:1.05rem}
.tick-list{margin:12px 0 0 0;padding-left:18px}
.tick-list li{margin:6px 0}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}

/* Strip */
.strip{background:#0b1220;color:#cbd5e1;border-top:1px solid #0b1220;border-bottom:1px solid #0b1220}
.strip__row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:10px 0;text-align:center;font-weight:800}
@media (max-width:900px){.strip__row{grid-template-columns:repeat(2,1fr)}}

/* Sections */
.section{padding:56px 0}
.section--light{background:#ffffff}
h1{font-size:clamp(26px,3.4vw,44px);margin:.2rem 0}
h2{font-size:clamp(22px,2.6vw,32px);margin:0 0 18px 0;color:#0b2a5c}
h3{margin:.4rem 0}

/* Features */
.grid{display:grid;gap:14px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid-4,.grid-3{grid-template-columns:1fr}}
.feature,.card{background:var(--card);border:1px solid #e5e7eb;border-radius:14px;padding:16px;box-shadow:0 10px 24px rgba(0,0,0,.05)}
.feature__icon{font-size:28px}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.step{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:16px;position:relative}
.step__num{position:absolute;right:14px;top:14px;width:32px;height:32px;background:#0b1220;color:#fff;border-radius:50%;display:grid;place-items:center;font-weight:900}

/* Bewertungen */
.rating{text-align:center}
.stars{color:#f59e0b;font-size:26px;letter-spacing:2px}
.map-embed iframe{width:100%;height:420px;border:0;border-radius:12px}

/* FAQ */
.faq details{border:1px solid #e5e7eb;border-radius:12px;padding:12px;margin:10px 0;background:#fff}
.faq summary{cursor:pointer;font-weight:800}

/* Kontakt */
.section--cta{background:linear-gradient(180deg,#fff,#eef6ff)}
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;align-items:start}
@media (max-width:860px){.contact{grid-template-columns:1fr}}
.contact__box{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:16px}
.contact__form input,.contact__form textarea{width:100%;padding:12px;border:1px solid #e5e7eb;border-radius:12px;margin:8px 0}
.contact__map iframe{width:100%;height:340px;border:0;border-radius:14px}

/* Footer */
.footer{background:#0b1220;color:#cbd5e1;padding:24px 0;margin-top:24px}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px}
@media (max-width:820px){.footer__grid{grid-template-columns:1fr}}
.footer__links a,.footer__legal a{color:#93c5fd;text-decoration:none;margin-right:10px}

/* Float actions */
.float-actions{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:51}
.float-actions a{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#fff;border:1px solid #e5e7eb;text-decoration:none;font-size:22px;box-shadow:0 12px 28px rgba(0,0,0,.08)}
.float-actions a:nth-child(2){background:#25D366;color:#fff}

/* Motion & hover polish */
.feature, .card, .step, .hero__img { transition: transform .35s ease, box-shadow .35s ease; }
.feature:hover, .card:hover, .step:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.08); }
.btn { transition: transform .2s ease; }
.btn:active { transform: scale(.98); }

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Slight gradient background on hero */
.hero { background: linear-gradient(180deg, #ffffff, #f7fafc 60%, #ffffff); }

[data-aos]{transition-timing-function:cubic-bezier(0.25,0.1,0.25,1.0)!important;}

/* Muted text helper */
.muted{color:var(--muted)}

/* Compare section */
.compare{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:16px;align-items:stretch}
@media (max-width:980px){.compare{grid-template-columns:1fr}}
.compare__col{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:20px;box-shadow:0 10px 24px rgba(0,0,0,.05)}
.compare__col--highlight{background:linear-gradient(180deg,#0b1220,#121a2c);color:#fff;border-color:transparent;position:relative;overflow:hidden}
.compare__col--highlight h3{color:#fff}
.compare__cta{display:block;text-align:center;margin-top:16px}
.list{list-style:none;margin:10px 0 0 0;padding:0}
.list li{display:flex;gap:10px;align-items:flex-start;margin:10px 0}
.list--good li::before{content:'✔';font-weight:900;margin-right:6px}
.list--bad li::before{content:'✖';color:#ef4444;font-weight:900;margin-right:6px}

/* Slider */
.slider{display:grid;grid-auto-flow:column;grid-auto-columns:calc(33% - 10px);gap:15px;overflow:auto;padding:6px;scroll-snap-type:x mandatory}
@media (max-width:980px){.slider{grid-auto-columns:80%}}
.slider::-webkit-scrollbar{height:8px}
.slider::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:8px}
.slide{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:16px;scroll-snap-align:center;box-shadow:0 10px 24px rgba(0,0,0,.05);min-height:160px;display:flex;flex-direction:column;gap:6px}
.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#eef2ff;color:#1f2937;font-weight:800}
.name{color:#6b7280;font-size:.9rem}
.slider__dots{display:flex;gap:6px;justify-content:center;margin-top:10px}
.slider__dots button{width:8px;height:8px;border-radius:50%;border:0;background:#cbd5e1}
.slider__dots button.is-active{background:#111827}

/* Steps decorative curve */
.steps{position:relative}
.steps__curve{position:absolute;left:0;right:0;top:0;height:220px;pointer-events:none}
@media (max-width:900px){.steps__curve{display:none}}

/* Sticky header shadow on scroll */
.header{transition: box-shadow .3s ease, background .3s ease, border-color .3s ease}
.header.is-scrolled{box-shadow:0 8px 24px rgba(2,6,23,.08);border-bottom-color:transparent;background:#ffffffcc;backdrop-filter:saturate(1.2) blur(6px)}

/* Stats counters */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;text-align:center}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:18px}
.stat__num{font-size:clamp(28px,4.2vw,46px);font-weight:900;color:#0b2a5c;line-height:1}
.stat__label{color:var(--muted)}

/* Comparison redesign – navy + gold, unique look */
.compare__col--navy{background:linear-gradient(180deg,#0b1220,#121a2c);color:#e5e7eb;border-color:#0b1220}
.compare__col--navy .list--good li::before{color:#f59e0b;content:'★'}
.compare__col--navy .compare__cta{background:#f59e0b;color:#1f2937}
.compare__col--navy h3{color:#ffffff}
.compare__col--navy .list li{border-color:#1f2937}
.compare__col--navy .list li{background:rgba(255,255,255,.04);padding:8px;border-radius:10px}

/* Parallax image smoothness */
.hero__img{will-change: transform; transform: translateY(0) scale(1); transition: transform .2s ease-out}
@media (prefers-reduced-motion: reduce){
  .hero__img{transition:none!important;transform:none!important}
}

/* Remove old steps curve if left in DOM for any reason */
.steps__curve{display:none!important}

/* Hero logo instead of image */
.hero__logo{width:100%;max-width:480px;display:block;margin-inline:auto;filter:none}
@media (max-width:900px){.hero--split .hero__grid{grid-template-columns:1fr}; .hero__logo{max-width:360px}}

/* Galerie */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:980px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.gallery{grid-template-columns:1fr}}
.gallery__item{position:relative;overflow:hidden;border-radius:16px;background:#fff;border:1px solid #e5e7eb;box-shadow:0 10px 24px rgba(0,0,0,.05)}
.gallery__item img{width:100%;height:260px;object-fit:cover;display:block;transform:scale(1.02);transition:transform .45s ease, filter .45s ease}
.gallery__item:hover img{transform:scale(1.06);filter:contrast(1.05)}

/* Hide brand logo in header as requested */
.brand{display:none}

/* Animated gallery motions */
@keyframes kenburns {
  0% { transform: scale(1.04) translate(0,0); }
  50% { transform: scale(1.1) translate(-2%, -2%); }
  100% { transform: scale(1.04) translate(0,0); }
}
@keyframes floaty {
  0% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}
.gallery__item { animation: floaty 6s ease-in-out infinite; will-change: transform; }
.gallery__item:nth-child(2){ animation-duration:7s }
.gallery__item:nth-child(3){ animation-duration:8s }
.gallery__item:nth-child(4){ animation-duration:7.5s }
.gallery__item:nth-child(5){ animation-duration:6.5s }
.gallery__item:nth-child(6){ animation-duration:8.5s }
.gallery__item img { animation: kenburns 12s ease-in-out infinite; }

.hero__right{background:none!important;box-shadow:none!important;border:0!important;border-radius:0!important}

.hero__right img{background:none!important;box-shadow:none!important;border-radius:0!important}

/* Plus-style full-width slider */
.section--slider{padding-top:24px;padding-bottom:56px}
.slider-plus{position:relative;max-width:1200px;margin:0 auto}
.plus-viewport{overflow:hidden;border-radius:18px;box-shadow:0 18px 40px rgba(0,0,0,.08);background:#0b1220}
.plus-track{display:flex;transition:transform .6s cubic-bezier(.22,.61,.36,1);will-change:transform}
.plus-slide{min-width:100%;height:420px;position:relative}
@media (max-width:900px){.plus-slide{height:340px}}
@media (max-width:560px){.plus-slide{height:260px}}
.plus-slide img{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.03)}
.plus-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:2;background:#ffffffcc;border:0;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:26px;font-weight:700;cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,.12)}
.plus-btn:hover{background:#fff}
.plus-btn.prev{left:10px}
.plus-btn.next{right:10px}
.plus-dots{display:flex;gap:8px;justify-content:center;margin-top:12px}
.plus-dots button{width:8px;height:8px;border-radius:10px;border:0;background:#cbd5e1}
.plus-dots button.is-active{background:#111827}
/* Hover polish */
.plus-slide::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}

/* Slider tune: slower + full image */
.plus-viewport{background:linear-gradient(180deg,#0b1220,#121a2c)}
.plus-track{transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.plus-slide{height:460px}
@media (max-width:900px){.plus-slide{height:360px}}
@media (max-width:560px){.plus-slide{height:300px}}
.plus-slide img{object-fit:contain;background:#0b1220}
@keyframes kb-slow{0%{transform:scale(1)}50%{transform:scale(1.04)}100%{transform:scale(1)}}
.plus-slide img{animation:kb-slow 18s ease-in-out infinite}

/* Gentle idle drift everywhere */
@keyframes drift {0%{transform:translateY(0)}50%{transform:translateY(-4px)}100%{transform:translateY(0)}}
.feature, .card, .step { animation: drift 8s ease-in-out infinite; }

/* ==== Farb-Polish (dezente Akzente) ==== */
:root{
  --accent: #2563eb;
  --accent-2: #a855f7;
  --accent-3: #f59e0b;
}

/* Überschriften mit zartem Verlauf */
h2 {
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 60%, #0b2a5c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Hero und CTA etwas lebendiger */
.hero {
  background: radial-gradient(1000px 400px at 20% 0%, rgba(37,99,235,.08), transparent 60%),
              linear-gradient(180deg, #ffffff, #f7fafc 60%, #ffffff);
}
.section--cta {
  background: linear-gradient(180deg, rgba(37,99,235,.08), rgba(168,85,247,.08) 60%, #eef6ff);
}

/* Strip mit ganz leichtem Schimmer */
.strip {
  background: linear-gradient(90deg, #0b1220, #101a34);
  color:#cbd5e1;
}

/* Karten dezenter Rand-Glow */
.feature, .card, .step, .stat {
  border: 1px solid rgba(37,99,235,.15);
}
.feature:hover, .card:hover, .step:hover {
  box-shadow: 0 16px 36px rgba(37,99,235,.12);
}

/* Buttons – subtiler Glanz */
.btn--gold{
  background: linear-gradient(180deg, #fbbf24, #f59e0b);
}
.btn--whatsapp{
  background: linear-gradient(180deg, #25D366, #1fb457);
}
.btn--dark{
  background: linear-gradient(180deg, #0b0f19, #111827);
}

/* Bewertungen: Sterne ein bisschen heller leuchten lassen */
.stars { text-shadow: 0 0 10px rgba(245,158,11,.3); }

/* Slider-Buttons mit lichtem Rand */
.plus-btn{
  box-shadow: 0 10px 24px rgba(0,0,0,.12), 0 0 0 2px rgba(37,99,235,.15) inset;
}

/* Abschnitts-Tints für mehr Farbe, ohne zu knallen */
#vorteile { background: linear-gradient(180deg, #ffffff, rgba(37,99,235,.06)); }
#leistungen { background: linear-gradient(180deg, #ffffff, rgba(168,85,247,.06)); }
#faq { background: linear-gradient(180deg, #ffffff, rgba(37,99,235,.05)); }
#bewertungen.section--light { background: linear-gradient(180deg, #ffffff, rgba(245,158,11,.06)); }

/* Impressum dezent abheben */
#impressum {
  background: linear-gradient(180deg, #ffffff, rgba(37,99,235,.05));
}
#impressum h3 { color:#0b2a5c; }


/* ==== Extra Color & Slower Motions (user request) ==== */

/* Stronger colorful section tints */
#vorteile { background: linear-gradient(180deg, #ffffff 0%, rgba(37,99,235,.10) 100%); }
#leistungen { background: linear-gradient(180deg, #ffffff 0%, rgba(168,85,247,.10) 100%); }
#faq { background: linear-gradient(180deg, #ffffff 0%, rgba(37,99,235,.09) 100%); }
#bewertungen.section--light { background: linear-gradient(180deg, #ffffff 0%, rgba(245,158,11,.10) 100%); }
.section--cta { background: linear-gradient(180deg, rgba(37,99,235,.10), rgba(168,85,247,.10) 60%, #eef6ff); }

/* Animate the strip background very slowly for subtle movement */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.strip {
  background: linear-gradient(90deg, #0b1220, #162344, #0b1220);
  background-size: 200% 200%;
  animation: gradientShift 40s linear infinite;
}

/* Add slow float to more elements (not just headings) */
.hero__logo { animation: floaty 22s ease-in-out infinite; }
.stat { animation: drift 20s ease-in-out infinite; }
.plus-slide img { animation: kb-slow 28s ease-in-out infinite !important; }
.gallery__item { animation-duration: 16s !important; }
.gallery__item:nth-child(2){ animation-duration:18s !important; }
.gallery__item:nth-child(3){ animation-duration:20s !important; }
.gallery__item:nth-child(4){ animation-duration:19s !important; }
.gallery__item:nth-child(5){ animation-duration:17s !important; }
.gallery__item:nth-child(6){ animation-duration:21s !important; }

/* Make general idle drifts slower */
.feature, .card, .step { animation-duration: 18s !important; }

/* Smoothen hover transitions so they feel calmer */
.feature, .card, .step, .hero__img { transition: transform .55s ease, box-shadow .55s ease; }

/* More colorful headings without overdoing it */
h1 {
  background: linear-gradient(90deg, #0b2a5c, var(--accent) 40%, var(--accent-2) 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
h3 { color: #0b2a5c; }

/* Links with accent tint */
a { color: #0b2a5c; }
.footer__links a, .footer__legal a { color: #93c5fd; }

/* ==== Assure (unique comparison section) ==== */
.assure{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  background: linear-gradient(180deg,#0b1220,#111c35);
  color:#e5e7eb;
  border-radius:22px;
  padding:22px;
  border:1px solid rgba(147,197,253,.25);
  box-shadow: 0 18px 50px rgba(2,6,23,.25);
}
@media (max-width:980px){ .assure{ grid-template-columns:1fr; } }

.assure h3{ color:#fff; margin-top:6px; }
.tick{ list-style:none; margin:12px 0; padding:0; }
.tick li{ display:flex; gap:10px; margin:8px 0; align-items:flex-start; }
.tick li::before{ content:'✔'; color:#f59e0b; font-weight:900; margin-right:6px; }

.pill-list{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.pill{ display:inline-block; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(147,197,253,.25); font-weight:700; font-size:.92rem; }

.assure__cta-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }

.assure__kpis{ display:grid; grid-template-columns: repeat(3,1fr); gap:12px; }
@media (max-width:560px){ .assure__kpis{ grid-template-columns: 1fr 1fr; } }
.assure__card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(147,197,253,.2);
  border-radius:18px;
  padding:16px;
  text-align:center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.assure__num{ font-size:clamp(26px,4vw,40px); font-weight:900; color:#f59e0b; line-height:1; }
.assure__label{ color:#cbd5e1; }


/* === Overrides: sichtbare & langsamere Bewegungen (Assistant) === */
@keyframes floaty { 0%{transform:translateY(0)} 50%{transform:translateY(-10px)} 100%{transform:translateY(0)} }
@keyframes drift  { 0%{transform:translateY(0)} 50%{transform:translateY(-8px)}  100%{transform:translateY(0)} }
@keyframes kb-slow{ 0%{transform:scale(1)} 50%{transform:scale(1.06)} 100%{transform:scale(1)} }

.hero__logo { animation: floaty 28s ease-in-out infinite !important; }
.gallery__item img { animation: kb-slow 36s ease-in-out infinite !important; }
.feature, .card, .step, .stat { animation: drift 24s ease-in-out infinite !important; }

.feature, .card, .step, .hero__img { transition: transform .8s ease, box-shadow .8s ease !important; }



/* === Modern & auffällig – Color Boost Overrides (v2) === */
:root{
  --flare-1:#22c55e; /* green */
  --flare-2:#2563eb; /* blue  */
  --flare-3:#a855f7; /* purple */
  --flare-4:#f59e0b; /* gold */
}

/* Hero: bold gradient + blobs */
.hero{
  background:
    radial-gradient(800px 300px at 15% 10%, rgba(37,99,235,.18), transparent 60%),
    radial-gradient(700px 280px at 85% -10%, rgba(168,85,247,.20), transparent 60%),
    radial-gradient(900px 360px at 50% 100%, rgba(34,197,94,.12), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f3f6ff 60%, #ffffff 100%) !important;
  position:relative;
  overflow:clip;
}
.hero::before, .hero::after{
  content:''; position:absolute; inset:auto; z-index:0; filter: blur(60px); opacity:.65;
}
.hero::before{ width:260px; height:260px; background:conic-gradient(from 0deg, var(--flare-2), var(--flare-3), var(--flare-4)); top:-40px; right:-40px; border-radius:50%; }
.hero::after { width:220px; height:220px; background:conic-gradient(from 180deg, var(--flare-1), var(--flare-2), var(--flare-3)); bottom:-60px; left:-20px; border-radius:50%; }

.hero__grid{position:relative; z-index:1;}

/* Headline gradient + bold subline */
.h1-sub{
  font-weight:900;
  background:linear-gradient(90deg, var(--flare-2), var(--flare-3) 50%, var(--flare-4));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:.2px;
}

/* Buttons: glossy & pulse on hover */
.btn{box-shadow:0 12px 26px rgba(2,6,23,.08), inset 0 0 0 1px rgba(255,255,255,.14)}
.btn--gold{background:linear-gradient(135deg,#fbbf24 0%,#f59e0b 60%,#d97706 100%);}
.btn--whatsapp{background:linear-gradient(135deg,#25D366,#1fb457);}
.btn--dark{background:linear-gradient(135deg,#0b0f19,#111827);}
.btn:hover{transform:translateY(-2px); box-shadow:0 16px 36px rgba(2,6,23,.14)}

/* Section headers: multicolor gradient */
h2{ 
  background:linear-gradient(90deg, var(--flare-2) 0%, var(--flare-3) 50%, var(--flare-4) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Cards with gradient borders */
.feature,.card,.step,.stat{
  position:relative;
  border:1px solid transparent;
  background-clip:padding-box;
}
.feature::before,.card::before,.step::before,.stat::before{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  padding:1px; background:linear-gradient(135deg, rgba(37,99,235,.6), rgba(168,85,247,.6), rgba(245,158,11,.6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  border-radius: inherit;
}

/* Strip with animated sheen */
.strip{
  background:linear-gradient(90deg, #0b1220, #0f1a38 35%, #0b1220);
  color:#e5e7eb;
  background-size:200% 100%;
  animation:stripSheen 24s linear infinite;
}
@keyframes stripSheen{0%{background-position:0 0}50%{background-position:100% 0}100%{background-position:0 0}}

/* Map & slider frames with vibrant background */
.plus-viewport{ background:linear-gradient(180deg,#0b1220,#0f1a38) !important; }
.map-embed iframe{ outline: 2px solid rgba(37,99,235,.2); box-shadow:0 18px 40px rgba(2,6,23,.15) }

/* Float actions with glow */
.float-actions a{ box-shadow:0 10px 24px rgba(0,0,0,.2), 0 0 0 2px rgba(37,99,235,.2) inset; }
.float-actions a:nth-child(2){ box-shadow:0 10px 24px rgba(0,0,0,.2), 0 0 0 2px rgba(34,197,94,.25) inset; }

/* Stronger section tints */
#vorteile { background:linear-gradient(180deg,#ffffff 0%, rgba(37,99,235,.16) 100%) !important; }
#leistungen { background:linear-gradient(180deg,#ffffff 0%, rgba(168,85,247,.16) 100%) !important; }
#faq { background:linear-gradient(180deg,#ffffff 0%, rgba(37,99,235,.14) 100%) !important; }
#bewertungen.section--light { background:linear-gradient(180deg,#ffffff 0%, rgba(245,158,11,.16) 100%) !important; }

/* Animated counters slightly larger for impact */
.stat__num{ font-size:clamp(32px,4.8vw,54px); }

/* Slider dots active color */
.plus-dots button.is-active{ background:#0b1220; }




/* === Section subline to reduce emptiness === */
.section-sub{
  margin-top:-6px;
  margin-bottom:14px;
  color:#64748b;
  font-weight:600;
}

/* Trust row pills */
.trust-row{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 6px 0; }
.trust-pill{
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(147,197,253,.25);
  color:#e5e7eb;
  font-weight:700;
  font-size:.92rem;
}

/* Mini cards beneath CTA */
.mini-cards{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.mini-card{
  flex:1 1 220px;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border:1px solid rgba(147,197,253,.25);
  border-radius:14px;
  padding:10px 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
  color:#e5e7eb;
  font-weight:700;
}

/* KPI icons and 4-column layout */
.assure__icon{ font-size:20px; opacity:.9; }
.assure__card{ display:flex; flex-direction:column; gap:2px; align-items:center; }
.assure__kpis{ grid-template-columns: repeat(4, 1fr); }

@media (max-width:560px){
  .assure__kpis{ grid-template-columns: 1fr 1fr; }
}



/* === KPI compact mode to avoid empty columns === */
.assure__kpis{ gap:12px; }
.assure__card{ min-height:auto; padding:14px; }
.assure__num{ margin-top:2px; }
.assure__note{ font-size:.85rem; color:#93a3b8; margin-top:2px; }

/* Mini steps row below assure */
.mini-steps{
  max-width:1100px;
  margin:10px auto 0;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
@media (max-width:860px){ .mini-steps{ grid-template-columns:1fr; } }
.mstep{
  background:linear-gradient(180deg,#0b1220,#111c35);
  color:#e5e7eb;
  border:1px solid rgba(147,197,253,.25);
  border-radius:14px;
  padding:10px 12px;
  display:flex; align-items:center; gap:10px;
  box-shadow:0 12px 26px rgba(2,6,23,.22);
  font-weight:700;
}
.mstep__num{
  width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  background:#f59e0b; color:#1f2937; font-weight:900;
}


/* === Compact assure layout on wide screens === */
.assure{ gap:14px; padding:18px; }
.assure__kpis{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap:10px !important;
  align-items:stretch;
}
.assure__card{ padding:12px !important; min-height:140px; }
.assure__num{ font-size:clamp(22px,3.8vw,34px); }
.assure__label{ line-height:1.2; }


/* === Refined "neo" comparison block === */
.neo{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  background:rgba(255,255,255,.5);
  border-radius:22px;
  padding:18px;
  border:1px solid rgba(17,24,39,.06);
  box-shadow: 0 8px 24px rgba(2,6,23,.06);
  backdrop-filter: blur(6px);
}
@media (max-width:980px){ .neo{ grid-template-columns:1fr; } }
.neo__left h3{ margin:.2rem 0 .4rem; color:#0b2a5c }
.neo__points{ margin:8px 0 10px; padding-left:18px }
.neo__points li{ margin:6px 0 }
.neo__cta{ display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 10px }
.neo__badges{ display:flex; flex-wrap:wrap; gap:8px }
.neo__badges span{
  padding:6px 10px; border-radius:999px; font-weight:700; font-size:.92rem;
  background:linear-gradient(180deg,#f8fafc,#eef2ff);
  border:1px solid rgba(17,24,39,.06);
  color:#0b2a5c;
}

/* Right side */
.neo__right{ display:grid; gap:12px }
.neo__stats{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:10px;
}
.neo__stat{
  background:linear-gradient(180deg,#0b1220,#121a2c);
  color:#e5e7eb;
  border:1px solid rgba(147,197,253,.25);
  border-radius:16px;
  padding:14px;
  text-align:center;
  box-shadow: 0 10px 24px rgba(2,6,23,.15);
}
.neo__num{ font-size:clamp(24px,3.6vw,36px); font-weight:900; color:#f59e0b; line-height:1; display:block; }

/* Subtle timeline */
.neo__timeline{
  display:grid; grid-template-columns: 1fr 16px 1fr 16px 1fr 16px 1fr; align-items:center; gap:8px;
  background:linear-gradient(180deg,#ffffff,#f9fbff);
  border:1px solid rgba(17,24,39,.06);
  border-radius:16px; padding:10px 12px;
}
.neo__step{ text-align:center; font-weight:800; color:#0b2a5c }
.neo__dot{ width:8px; height:8px; border-radius:50%; background:#9aa6c3; margin:0 auto }
@media (max-width:560px){ .neo__timeline{ grid-template-columns:1fr; gap:6px } .neo__dot{ display:none } }


/* === Tabs (Gutachtenarten) === */
.tabs{ display:grid; gap:12px }
.tabs__list{ display:flex; flex-wrap:wrap; gap:8px }
.tab{
  appearance:none; border:1px solid #e5e7eb; background:#fff; color:#0b2a5c; 
  font-weight:800; border-radius:999px; padding:8px 12px; cursor:pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.tab:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06) }
.tab.is-active{ background:linear-gradient(180deg,#fbbf24,#f59e0b); color:#1f2937; border-color:transparent }
.tabs__panes{ background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:16px; box-shadow:0 10px 24px rgba(0,0,0,.05) }
.tabpane[hidden]{ display:none }
.tabpane h3{ margin-top:0 }



/* === BOOST: Auffälliger – mehr Farbe & Bewegung (v3) === */

/* Highlight the Gutachtenarten section with animated gradient */
#gutachtenarten {
  background:
    radial-gradient(800px 300px at 20% 0%, rgba(37,99,235,.12), transparent 60%),
    radial-gradient(700px 280px at 80% -10%, rgba(168,85,247,.14), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f3f6ff 60%, #ffffff 100%);
  position: relative;
  overflow: clip;
}
#gutachtenarten::before {
  content:''; position:absolute; top:-60px; right:-40px; width:280px; height:280px; 
  background: conic-gradient(from 0deg, #2563eb, #a855f7, #f59e0b);
  filter: blur(48px); opacity:.55; border-radius:50%;
  animation: swirl 22s linear infinite;
}
@keyframes swirl { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

/* Tabs: bigger, glowing, animated */
.tab { 
  position: relative;
  font-size: 0.98rem;
  letter-spacing: .2px;
  box-shadow: 0 8px 18px rgba(2,6,23,.08);
}
.tab::after{
  content:''; position:absolute; inset:0; border-radius:999px;
  box-shadow: 0 0 0 0 rgba(37,99,235,.0);
  transition: box-shadow .3s ease;
}
.tab:hover::after{ box-shadow: 0 0 0 3px rgba(37,99,235,.18); }
.tab.is-active{ transform: translateY(-1px) scale(1.02); }

/* Panes: glow border + subtle float */
.panes--glow{
  border:1px solid rgba(17,24,39,.08);
  box-shadow: 0 16px 40px rgba(2,6,23,.08), inset 0 0 0 1px rgba(255,255,255,.08);
  background: linear-gradient(180deg,#ffffff,#f9fbff);
  animation: drift 22s ease-in-out infinite;
}

/* Boost tick-list inside Gutachtenarten */
.tick-list--boost li{
  position: relative;
  padding: 10px 12px 10px 36px;
  margin: 10px 0;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(37,99,235,.06), rgba(168,85,247,.06));
  border: 1px solid rgba(17,24,39,.08);
  font-weight: 700;
}
.tick-list--boost li::marker{ content: '' } /* hide default */
.tick-list--boost li::before{
  content: '✔';
  position: absolute;
  left: 12px; top: 10px;
  font-weight: 900;
  background: linear-gradient(180deg,#fbbf24,#f59e0b);
  color: #1f2937;
  width: 22px; height: 22px; border-radius: 999px;
  display: grid; place-items: center;
  box-shadow: 0 4px 10px rgba(245,158,11,.25);
}

/* Extra motion: headings and cards slightly pulse on scroll */
h2[data-aos], .feature[data-aos], .card[data-aos], .step[data-aos]{
  animation: pulseGlow 8s ease-in-out infinite;
}
@keyframes pulseGlow {
  0%,100% { filter: drop-shadow(0 0 0 rgba(37,99,235,0)); }
  50%     { filter: drop-shadow(0 0 10px rgba(37,99,235,.25)); }
}

/* Buttons: stronger hover pop */
.btn:hover{ transform: translateY(-3px) scale(1.02); }

/* Map frame glow on hover (contact area) */
.contact__map iframe:hover{
  box-shadow: 0 24px 60px rgba(2,6,23,.25);
  transform: translateY(-2px);
  transition: transform .4s ease, box-shadow .4s ease;
}

/* Reviews slider: make cards float a bit more */
#stimmen .slide{ animation: drift 18s ease-in-out infinite !important; }

/* Slightly faster AOS feel via scaling */
[data-aos="fade-up"]{ transform: translate3d(0, 20px, 0) scale(1.0); }

/* === Motto (24/7/365) === */
.motto{ background:linear-gradient(180deg,#ffffff, rgba(37,99,235,.10)); }
.motto__row{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:980px){ .motto__row{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .motto__row{ grid-template-columns:1fr } }
.motto__item{ background:#fff; border:1px solid rgba(37,99,235,.18); border-radius:16px; padding:16px; 
  text-align:center; box-shadow:0 12px 28px rgba(2,6,23,.06); animation: drift 18s ease-in-out infinite; }
.motto__icon{ width:56px; height:56px; border-radius:50%; display:grid; place-items:center; margin:0 auto 8px;
  background: conic-gradient(from 0deg, #2563eb, #a855f7, #f59e0b, #22c55e);
  color:#0b0f19; font-size:28px; box-shadow:0 8px 20px rgba(2,6,23,.15); animation: floaty 16s ease-in-out infinite; }
.motto__item h3{ margin:.2rem 0; color:#0b2a5c }


/* === Active section blink === */
.nav a.active-blink{background:transparent;color:inherit !important;padding:6px 8px;border-radius:8px;animation:none}
@keyframes flashGold{0%{opacity:1}100%{opacity:1}}
  20%{ filter:brightness(1.1); transform:translateY(-2px) }
  60%{ filter:brightness(1.0); transform:translateY(0) }
  100%{ background:transparent; color:#111827 }
}
/* ensure nav links have padding to avoid layout shift */
.nav a{ padding:6px 8px; border-radius:8px }


/* Mobile color boost – reduce white look */
@media (max-width:560px){
  body{
    background:
      radial-gradient(600px 220px at 20% 0%, rgba(37,99,235,.10), transparent 60%),
      linear-gradient(180deg,#f5f7ff 0%, #ffffff 30%, #eef2ff 100%);
  }
  .section--light{
    background: linear-gradient(180deg,#ffffff 0%, rgba(37,99,235,.08) 100%);
  }
  .card,.feature,.step,.stat{
    background: linear-gradient(180deg,#ffffff,#f6f9ff);
  }
  .strip{ background: linear-gradient(90deg, #0b1220, #162344, #0b1220); }
}



/* ==== COLOR BOOST ab Abschnitt "Die Meinung unserer Kunden" (#stimmen) ==== */

/* Reviews section: bold gradient background & vibrant cards */
#stimmen{
  background:
    radial-gradient(900px 360px at 12% 0%, rgba(37,99,235,.16), transparent 60%),
    radial-gradient(900px 360px at 88% -10%, rgba(168,85,247,.18), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #eef3ff 60%, #ffffff 100%);
  position:relative;
  overflow:clip;
}
#stimmen::before{
  content:''; position:absolute; top:-50px; right:-60px; width:320px; height:320px;
  background: conic-gradient(from 0deg, #2563eb, #a855f7, #f59e0b);
  filter: blur(56px); opacity:.55; border-radius:50%;
}
#stimmen .slide{
  background: linear-gradient(180deg, #ffffff, #f4f7ff);
  border: 1px solid rgba(37,99,235,.25);
  box-shadow: 0 14px 32px rgba(2,6,23,.12), inset 0 0 0 1px rgba(255,255,255,.08);
}
#stimmen .avatar{
  background: linear-gradient(180deg, #e0e7ff, #dbeafe);
  color:#0b2a5c;
}
#stimmen .stars{
  text-shadow: 0 0 12px rgba(245,158,11,.35);
}
#reviews-dots button{ background: rgba(37,99,235,.25); }
#reviews-dots button.is-active{ background:#0b2a5c; }

/* Folge-Abschnitte kräftiger tönen (ohne zu überladen) */
#vorteile{
  background: linear-gradient(180deg, #ffffff 0%, rgba(37,99,235,.14) 100%) !important;
}
#leistungen{
  background: linear-gradient(180deg, #ffffff 0%, rgba(168,85,247,.14) 100%) !important;
}
#ablauf{
  background: linear-gradient(180deg, #ffffff 0%, rgba(34,197,94,.12) 100%) !important;
}
#wann-gutachten{
  background: linear-gradient(180deg, #ffffff 0%, rgba(2,132,199,.12) 100%) !important;
}
#vergleich{
  background: linear-gradient(180deg, #ffffff 0%, rgba(245,158,11,.12) 100%) !important;
}
#gutachtenarten{
  background:
    radial-gradient(800px 300px at 20% 0%, rgba(37,99,235,.12), transparent 60%),
    radial-gradient(700px 280px at 80% -10%, rgba(168,85,247,.14), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f0f4ff 60%, #ffffff 100%) !important;
}
#faq{
  background: linear-gradient(180deg, #ffffff 0%, rgba(37,99,235,.12) 100%) !important;
}
#kontakt.section--cta{
  background: linear-gradient(180deg, rgba(37,99,235,.12), rgba(168,85,247,.12) 60%, #e7f0ff) !important;
}
.section--slider{
  background: linear-gradient(180deg, #0b1220, #101a34);
}

/* Cards & CTAs a bit punchier across boosted area */
.feature,.card,.step,.stat{
  background: linear-gradient(180deg, #ffffff, #f6f9ff);
  border:1px solid rgba(37,99,235,.22);
}
.btn--gold{
  background: linear-gradient(135deg, #fbbf24, #f59e0b 60%, #d97706);
  box-shadow: 0 12px 26px rgba(245,158,11,.28), inset 0 0 0 1px rgba(255,255,255,.14);
}
.btn--dark{
  box-shadow: 0 12px 26px rgba(2,6,23,.18), inset 0 0 0 1px rgba(255,255,255,.12);
}

/* Footer with deeper navy */
.footer{
  background: linear-gradient(180deg, #0b1220, #0f1a38);
}

/* Mobile – mehr Farbe, weniger Weißflächen */
@media (max-width:560px){
  #stimmen{
    background:
      radial-gradient(600px 240px at 18% 0%, rgba(37,99,235,.18), transparent 60%),
      linear-gradient(180deg, #ffffff 0%, #eef3ff 60%, #ffffff 100%);
  }
  .slide{
    background: linear-gradient(180deg, #ffffff, #eff4ff);
  }
  .section--slider{
    background: linear-gradient(180deg, #0b1220, #121a2c, #0b1220);
  }
}



/* ==== DEEP BLUE STYLE ab Abschnitt "Damit Sie Ihre volle Entschädigung erhalten" (#ablauf) ==== */

/* Ablauf section */
#ablauf{
  background: linear-gradient(180deg, #e8f0ff 0%, #b4c8ff 20%, #3b4b8a 80%, #0b1220 100%) !important;
  color:#0b1220;
}
#ablauf .step{
  background: linear-gradient(180deg, #f5f8ff 0%, #e3e9ff 100%);
  border:1px solid rgba(37,99,235,.25);
  box-shadow:0 10px 28px rgba(2,6,23,.15);
}

/* Kontakt CTA section */
#kontakt.section--cta{
  background: linear-gradient(180deg, #d9e4ff 0%, #4b63b6 60%, #0b1220 100%) !important;
  color:#fff;
}
#kontakt .contact__box{
  background: linear-gradient(180deg, #f3f6ff, #dbe3ff);
  border:1px solid rgba(37,99,235,.25);
}
#kontakt .btn--gold, #kontakt .btn--dark{
  background: linear-gradient(135deg, #2563eb 0%, #1e3a8a 100%);
  color:#fff;
  box-shadow: 0 12px 26px rgba(37,99,235,.35);
}

/* FAQ */
#faq{
  background: linear-gradient(180deg, #f4f7ff 0%, #c9d6ff 80%) !important;
}
#faq details{
  background: linear-gradient(180deg,#ffffff,#eef3ff);
  border:1px solid rgba(37,99,235,.25);
}

/* Footer */
.footer{
  background: linear-gradient(180deg,#0b1220,#142650,#0b1220);
  color:#cbd5e1;
}

/* Mobile adjustments */
@media (max-width:560px){
  #ablauf{
    background: linear-gradient(180deg, #dfe7ff 0%, #7c8fdc 40%, #0b1220 100%) !important;
  }
  #kontakt.section--cta{
    background: linear-gradient(180deg, #c8d7ff 0%, #4055a8 60%, #0b1220 100%) !important;
  }
  #faq{
    background: linear-gradient(180deg, #eef3ff 0%, #d1dbff 100%) !important;
  }
}



/* ==== Kontaktbereich Lesbarkeit verbessern ==== */
#kontakt.section--cta .contact__box p:first-child {
  background: rgba(255, 255, 255, 0.85);
  color: #0b1220 !important;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 8px 20px rgba(2,6,23,0.1);
}
#kontakt.section--cta .contact__box small.muted {
  color: #1e3a8a !important;
}



/* ==== FIX: Kontakt-Text klar sichtbar (Box + hohe Spezifität) ==== */
#kontakt.section--cta .contact__box > p{
  background: rgba(255,255,255,0.9) !important;
  color: #0b1220 !important;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0 0 10px 0;
  box-shadow: 0 10px 24px rgba(2,6,23,.14);
}
#kontakt.section--cta .contact__box > p a{
  color:#0b2a5c !important;
  text-decoration: underline;
}


/* === Compact tweaks for "Damit Sie Ihre volle Entschädigung erhalten" (#vergleich) === */
#vergleich .neo__stats{ gap:8px; }
#vergleich .neo__stat{ padding:10px; border-radius:12px; }
#vergleich .neo__num{ font-size: clamp(18px, 2.6vw, 28px); }
#vergleich .neo__stat small{ font-size:.85rem; }
#vergleich .neo__timeline{ padding:6px 8px; gap:6px; }
#vergleich .neo__step{ font-size:.92rem; }
#vergleich .neo__dot{ width:6px; height:6px; }


/* === Fix: KPI-Boxen und Timeline im Abschnitt "Damit Sie Ihre volle Entschädigung erhalten" kleiner === */
#vergleich .neo__stat {
  padding: 6px 8px !important;
  border-radius: 10px !important;
  transform: scale(0.9) !important;
}
#vergleich .neo__num {
  font-size: clamp(14px, 2vw, 22px) !important;
  line-height: 1 !important;
}
#vergleich .neo__stat small {
  font-size: 0.78rem !important;
}

#vergleich .neo__timeline {
  padding: 4px 6px !important;
  gap: 4px !important;
  transform: scale(0.9) !important;
}
#vergleich .neo__step {
  font-size: 0.8rem !important;
}
#vergleich .neo__dot {
  width: 5px !important;
  height: 5px !important;
}


/* === Kompakte KPI-Boxen und Timeline (#vergleich) – weniger Höhe, dichteres Layout === */
#vergleich .neo__stats {
  gap: 6px !important;
  align-items: center !important;
}

#vergleich .neo__stat {
  padding: 4px 6px !important;
  border-radius: 8px !important;
  min-height: auto !important;
  height: auto !important;
  line-height: 1.1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

#vergleich .neo__num {
  font-size: clamp(13px, 1.8vw, 20px) !important;
  margin-bottom: 2px !important;
}

#vergleich .neo__stat small {
  font-size: 0.75rem !important;
  line-height: 1.1 !important;
}

#vergleich .neo__timeline {
  padding: 4px 6px !important;
  gap: 4px !important;
  margin-top: 8px !important;
}

#vergleich .neo__step {
  font-size: 0.78rem !important;
  line-height: 1.1 !important;
  margin: 0 !important;
}

#vergleich .neo__dot {
  width: 4px !important;
  height: 4px !important;
}


/* === Fix: Abstand zwischen KPI-Kästchen und Timeline (#vergleich) verringern === */
#vergleich .neo__right {
  gap: 4px !important;
}
#vergleich .neo__stats {
  margin-bottom: 0 !important;
}
#vergleich .neo__timeline {
  margin-top: 4px !important;
}


/* === Fix v2: KPI-Kästchen und Timeline dichter zusammen (#vergleich) === */
#vergleich .neo__right {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

#vergleich .neo__stats {
  margin-bottom: -4px !important;
}

#vergleich .neo__timeline {
  margin-top: 0 !important;
  padding-top: 0 !important;
  transform: translateY(-6px) !important;
}


/* === CLEAN COMPACT FIX for #vergleich (undo previous transforms, tidy layout) === */
#vergleich .neo__right{
  display:grid !important;
  gap:6px !important;
}
#vergleich .neo__stats{
  margin:0 !important;
  gap:8px !important;
}
#vergleich .neo__stat{
  padding:6px 8px !important;
  border-radius:10px !important;
  min-height:44px !important;
  height:auto !important;
  line-height:1.1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  transform:none !important;
}
#vergleich .neo__num{
  font-size:clamp(16px, 2.2vw, 22px) !important;
  margin-bottom:2px !important;
  line-height:1 !important;
}
#vergleich .neo__stat small{
  font-size:.8rem !important;
  line-height:1.1 !important;
}
#vergleich .neo__timeline{
  margin:0 !important;
  padding:6px 8px !important;
  transform:none !important;
}
#vergleich .neo__step{ font-size:.85rem !important; line-height:1.1 !important; }
#vergleich .neo__dot{ width:6px !important; height:6px !important; }

/* Mobile: ensure compact stacking without overflow */
@media (max-width:560px){
  #vergleich .neo__stats{ gap:6px !important; }
  #vergleich .neo__num{ font-size:clamp(15px,4vw,18px) !important; }
  #vergleich .neo__timeline{ padding:6px !important; }
}


.motto__compact {
  text-align: center;
  font-weight: 800;
  font-size: 1.25rem;
  color: #0b2a5c;
  margin-top: 6px;        /* weniger Abstand, da Titel entfällt */
  margin-bottom: 18px;
  letter-spacing: 0.3px;
  line-height: 1.6;
}

/* Circle gallery (compact) */
.circle-gallery{padding-top:36px;padding-bottom:28px}
.circle-row{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center; align-items:center;
}
.circle{
  width:140px; height:140px; border-radius:50%;
  overflow:hidden; display:block; background:#fff;
  border: 2px solid rgba(37,99,235,.3);
  box-shadow: 0 10px 24px rgba(2,6,23,.12);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
@media (max-width:560px){
  .circle{ width:110px; height:110px; }
}
.circle img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.circle:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(2,6,23,.18);
  border-color: rgba(37,99,235,.55);
}


/* Circle gallery (4→3 responsive) */
.circle-gallery{padding-top:20px;padding-bottom:18px}
.circle-row{
  display:grid;
  grid-template-columns: repeat(4, 180px);
  gap:18px;
  justify-content:center;
  align-items:center;
}
@media (max-width:980px){
  .circle-row{ grid-template-columns: repeat(3, 150px); gap:16px; }
}
@media (max-width:560px){
  .circle-row{ grid-template-columns: repeat(2, 130px); gap:14px; }
}
.circle{
  width:100%; padding-bottom:100%;
  position:relative; border-radius:50%; overflow:hidden; display:block; background:#fff;
  border: 2px solid rgba(37,99,235,.3);
  box-shadow: 0 10px 24px rgba(2,6,23,.12);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.circle img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
  transition: opacity .6s ease;
}
.circle:hover{
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 16px 36px rgba(2,6,23,.18);
  border-color: rgba(37,99,235,.55);
}


/* === Mobile enhancements === */
.nav-toggle{
  display:none;
  background:#0b1220; color:#fff; border:0; border-radius:10px;
  width:40px; height:36px; font-size:18px; font-weight:900;
}
@media (max-width:820px){
  .nav-toggle{ display:block; }
  .nav--collapsible{
    position:absolute; right:16px; top:56px;
    background:#fff; border:1px solid #e5e7eb; border-radius:12px;
    padding:8px; display:none; flex-direction:column; gap:8px;
    box-shadow:0 14px 30px rgba(0,0,0,.12);
  }
  .nav--open{ display:flex !important; }
  .nav--collapsible a{ padding:10px 12px; border-radius:8px; }
  .header__row{ position:relative; }
}

/* Sticky mobile CTA bar */
.mobile-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:none; gap:8px; justify-content:center; align-items:center;
  padding:10px; background:linear-gradient(180deg,#ffffffee,#eef6ffee);
  border-top:1px solid #e5e7eb; backdrop-filter: blur(6px);
}
.mobile-cta .cta-btn{
  flex:1 1 0; max-width:460px;
  display:inline-block; text-align:center; text-decoration:none; font-weight:900;
  padding:12px 14px; border-radius:12px;
  box-shadow:0 12px 24px rgba(2,6,23,.08);
}
.mobile-cta .cta-btn.call{ background:#0b0f19; color:#fff; }
.mobile-cta .cta-btn.wa{ background:#25D366; color:#fff; }

/* Show CTA only on small screens, hide floating buttons to avoid double-UI */
@media (max-width:680px){
  .mobile-cta{ display:flex; }
  .float-actions{ display:none; }
  body{ padding-bottom:64px; } /* room for CTA bar */
}

/* Larger tap targets */
button, .btn, .nav a, .cta-btn, .contact__form input, .contact__form textarea{
  touch-action: manipulation;
}
.contact__form input, .contact__form textarea{ padding:14px; font-size:16px; }

/* Circle sizes: a bit bigger on mobile */
@media (max-width:980px){
  .circle-row{ grid-template-columns: repeat(3, 160px); gap:16px; }
}
@media (max-width:560px){
  .circle-row{ grid-template-columns: repeat(2, 140px); gap:14px; }
}

/* Calm down animations on small screens for performance */
@media (max-width:560px){
  .feature, .card, .step, .stat, .gallery__item, #stimmen .slide{ animation-duration: 26s !important; }
  .hero__logo{ animation-duration: 32s !important; }
}


/* === Hintergrundbild für den Abschnitt 'Wann brauche ich ein Schadengutachten?' === */
#wann-gutachten{position:relative;overflow:hidden;background:none}
#wann-gutachten .background-overlay{
  position:absolute;inset:0;
  background:url('write_plan_business_startup_start_up_notebooks_creative_computer-764676.jpg!d.jpeg') center/cover no-repeat;
  opacity:.45; /* Transparenz */
  z-index:0;
}
#wann-gutachten .container{position:relative;z-index:1}




/* ==== Override: Nummern-Badges im Ablauf-Bereich an Design anpassen ==== */

#ablauf .step__num {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #2563eb, #a855f7);
  color: #ffffff !important;
  font-weight: 800;
  font-size: 16px;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.35);
}

/* Auf kleinen Screens etwas kleiner */
@media (max-width: 600px) {
  #ablauf .step__num {
    width: 28px;
    height: 28px;
    font-size: 14px;
    margin-bottom: 12px;
  }
}



/* ==== Akram-Style Layout speziell für den Ablauf-Bereich (#ablauf) ==== */

#ablauf {
  background: #f5f5f5 !important;
  padding: 90px 0 100px !important;
  color: #111827;
}

#ablauf .container {
  text-align: center;
}

#ablauf h2 {
  font-size: 30px;
  margin-bottom: 8px;
}

#ablauf .section-sub {
  font-size: 18px;
  color: #555;
  margin-bottom: 40px;
}

/* 4 Karten nebeneinander wie bei Akram */
#ablauf .steps {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin-top: 60px;
}

/* Karten-Style */
#ablauf .step {
  position: relative;
  background: #ffffff;
  border-radius: 14px;
  padding: 70px 32px 36px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0,0,0,0.03);
  border-bottom: 5px solid #0f8f67;
}

/* Nummernkreis oben mittig */
#ablauf .step__num {
  position: absolute !important;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: #0f8f67;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 24px rgba(0,0,0,0.18);
}

/* Icon im Kartenkopf */
#ablauf .step__icon {
  font-size: 32px;
  margin-bottom: 14px;
  color: #0f8f67;
}

/* Überschrift & Text */
#ablauf h4 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
}

#ablauf p {
  font-size: 15px;
  color: #555;
  line-height: 1.5;
}

/* Abstand zum nächsten Abschnitt */
#ablauf + section {
  margin-top: 40px;
}

/* Responsive Anpassungen */
@media (max-width: 1024px) {
  #ablauf .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  #ablauf {
    padding: 70px 0 80px !important;
  }
  #ablauf .steps {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  #ablauf .step {
    padding: 60px 22px 30px;
  }
}



/* ==== Harmonische Version des Ablauf-Bereichs (#ablauf) – kleiner & ohne Grün ==== */

#ablauf {
  background: #f5f5f7 !important;
  padding: 70px 0 80px !important;
  color: #111827;
}

#ablauf .container {
  text-align: center;
}

#ablauf h2 {
  font-size: 28px;
  margin-bottom: 6px;
}

#ablauf .section-sub {
  font-size: 17px;
  color: #555;
  margin-bottom: 36px;
}

/* Kompaktere Karten */
#ablauf .steps {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin-top: 40px;
}

#ablauf .step {
  position: relative;
  background: #ffffff;
  border-radius: 14px;
  padding: 52px 24px 26px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-bottom-width: 3px;
  border-bottom-color: #4f46e5; /* leicht violett/blau passend zum Rest */
}

/* Nummer oben, aber dezenter & ohne Grün */
#ablauf .step__num {
  position: absolute !important;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563eb, #a855f7);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 22px rgba(79, 70, 229, 0.45);
}

/* Icons im Kopf, neutral */
#ablauf .step__icon {
  font-size: 30px;
  margin-bottom: 12px;
}

/* Überschrift & Text */
#ablauf h4 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
}

#ablauf p {
  font-size: 15px;
  color: #4b5563;
  line-height: 1.5;
}

/* Abstand zum nächsten Abschnitt */
#ablauf + section {
  margin-top: 40px;
}

/* Responsiv */
@media (max-width: 1024px) {
  #ablauf .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  #ablauf {
    padding: 60px 0 70px !important;
  }
  #ablauf .steps {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  #ablauf .step {
    padding: 48px 20px 24px;
  }
}



/* ==== Kompaktere Variante des Ablauf-Bereichs (#ablauf) ==== */

#ablauf {
  background: linear-gradient(180deg, #f3f4ff 0%, #f9fafb 60%, #f3f4ff 100%) !important;
  padding: 55px 0 60px !important;
}

#ablauf h2 {
  font-size: 26px;
}

#ablauf .section-sub {
  font-size: 16px;
  margin-bottom: 28px;
}

/* kleinere Karten & weniger Schatten */
#ablauf .steps {
  gap: 18px;
  margin-top: 28px;
}

#ablauf .step {
  padding: 40px 20px 22px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.10);
  border-radius: 12px;
  border-bottom-width: 2px;
}

/* kleinere Badge */
#ablauf .step__num {
  top: -16px;
  width: 32px;
  height: 32px;
  font-size: 14px;
  box-shadow: 0 8px 18px rgba(79, 70, 229, 0.40);
}

/* etwas kleinere Typografie */
#ablauf h4 {
  font-size: 16px;
}

#ablauf p {
  font-size: 14px;
}

/* auf sehr breiten Screens etwas zentrieren */
@media (min-width: 1200px) {
  #ablauf .steps {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
  }
}



/* ===== HERO RESET & CLEANER LAYOUT ===== */

/* Container zentrieren, ohne Ghost-Logo-Spielereien */
.hero__inner,
.hero__grid,
.hero--split .hero__grid{
  max-width: 1150px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 32px;
}

/* Klassisches Layout: Text links, Logo rechts normal sichtbar */
.hero__right,
.hero__image{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Logo wieder normal, nicht transparent, nicht riesig */
.hero__right img,
.hero__image img,
.hero__logo{
  max-width: 340px !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Mobile: untereinander, zentriert */
@media (max-width: 900px){
  .hero__inner,
  .hero__grid,
  .hero--split .hero__grid{
    padding: 0 20px;
    text-align: center;
  }
  .hero__right,
  .hero__image{
    justify-content: center;
    margin-top: 24px;
  }
  .hero__right img,
  .hero__image img,
  .hero__logo{
    max-width: 260px !important;
  }
}