/* ═══════════════════════════════════════════════════════════════
   DESIGN ELEVATION LAYER
   Comprehensive visual refinement for premium quality
   Surfaces · Typography · Depth · Rhythm · Motion · Interaction
   ═══════════════════════════════════════════════════════════════ */


/* ─── 1. REFINED DESIGN TOKENS ─── */

body.page-home {
  --elev-glow-gold: rgba(196, 148, 74, 0.16);
  --elev-glow-cyan: rgba(136, 206, 217, 0.12);
  --elev-glass: rgba(255, 252, 247, 0.54);
  --elev-glass-strong: rgba(255, 252, 247, 0.78);
  --elev-glass-border: rgba(255, 255, 255, 0.22);
  --elev-inner-glow: inset 0 1px 0 rgba(255, 255, 255, 0.48), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  --elev-inner-glow-dark: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  --elev-shadow-ambient: 0 1px 2px rgba(10, 25, 34, 0.04), 0 4px 12px rgba(10, 25, 34, 0.03);
  --elev-shadow-card: 0 2px 4px rgba(10, 25, 34, 0.03), 0 12px 32px rgba(10, 25, 34, 0.06), 0 32px 64px rgba(10, 25, 34, 0.04);
  --elev-shadow-lifted: 0 4px 8px rgba(10, 25, 34, 0.04), 0 20px 48px rgba(10, 25, 34, 0.08), 0 48px 96px rgba(10, 25, 34, 0.06);
  --elev-ease: cubic-bezier(0.22, 0.68, 0.28, 1);
  --elev-ease-out: cubic-bezier(0.16, 0.84, 0.24, 1);
  --elev-ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1);
  --elev-dur-micro: 120ms;
  --elev-dur-fast: 200ms;
  --elev-dur-base: 320ms;
  --elev-dur-slow: 480ms;
  --elev-dur-entrance: 600ms;
}


/* ─── 2. GLOBAL TYPOGRAPHY REFINEMENTS ─── */

/* Loosen ultra-tight headings for better readability while keeping visual weight */
.page-home .section-head h2 {
  font-size: clamp(38px, 4.4vw, 58px);
  letter-spacing: -0.042em;
  line-height: 1.0;
  text-wrap: balance;
}

/* Better optical weight on body text */
.page-home .section-head p {
  font-size: 17px;
  line-height: 1.82;
  letter-spacing: 0.005em;
  color: var(--home-ink-soft);
}

/* Section kickers: more presence without shouting */
.page-home .section-kicker {
  font-size: 11px;
  letter-spacing: 0.24em;
  font-weight: 800;
  color: rgba(21, 39, 52, 0.56);
}

.page-home .section-kicker::before {
  width: 44px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--home-gold), rgba(136, 206, 217, 0.5));
  opacity: 0.88;
}

/* Bullet text refinement */
.page-home .bullets li {
  font-size: 14.5px;
  line-height: 1.68;
  letter-spacing: 0.003em;
}


/* ─── 3. HERO ELEVATION ─── */

/* Refined hero background with more luminous depth */
.page-home .hero {
  background:
    radial-gradient(720px 480px at 14% 12%, rgba(196, 148, 74, 0.2), transparent 65%),
    radial-gradient(640px 440px at 82% 18%, rgba(136, 206, 217, 0.2), transparent 65%),
    radial-gradient(480px 480px at 48% 80%, rgba(136, 206, 217, 0.08), transparent 60%),
    linear-gradient(164deg, #071a24, #0a2431 40%, #0e3444 80%, #103647 100%);
}

/* Hero heading: text shadow for depth */
.page-home .hero h1 {
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

/* Eyebrow pill: refined glass treatment */
.page-home .eyebrow {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 24px rgba(0, 0, 0, 0.12);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

/* Hero stage field: enhanced glass depth */
.page-home .hero-stage-field {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
    radial-gradient(circle at 76% 18%, rgba(184, 138, 76, 0.14), transparent 28%),
    radial-gradient(circle at 24% 82%, rgba(136, 206, 217, 0.06), transparent 32%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    var(--elev-inner-glow-dark),
    0 2px 8px rgba(4, 18, 27, 0.12),
    0 24px 64px rgba(4, 18, 27, 0.28),
    0 48px 120px rgba(4, 18, 27, 0.16);
}

/* Hero stage notes: refined cards with better depth layering */
.page-home .hero-stage-note {
  background: rgba(255, 251, 245, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 2px 6px rgba(6, 20, 29, 0.08),
    0 16px 40px rgba(6, 20, 29, 0.18),
    0 32px 64px rgba(6, 20, 29, 0.08);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

/* Hero ledger: refined interior */
.page-home .hero-ledger {
  padding: 0;
  margin-top: 40px;
  border-top: 0;
  border-radius: 24px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.page-home .hero-ledger-item {
  padding: 20px 24px;
}

.page-home .hero-ledger-item-highlight {
  background: linear-gradient(90deg, rgba(196, 148, 74, 0.06), rgba(196, 148, 74, 0.02));
}


/* ─── 4. SECTION RHYTHM & SURFACE DIFFERENTIATION ─── */

/* Angebot section: Warm cream with subtle gold undertone */
.page-home #angebot {
  background:
    radial-gradient(ellipse 60% 48% at 20% 10%, rgba(196, 148, 74, 0.06), transparent 60%),
    linear-gradient(180deg, rgba(255, 250, 243, 0.98), rgba(248, 241, 230, 0.9) 40%, rgba(247, 239, 227, 0.86));
}

/* Messung: Cool-shifted cream for visual rhythm change */
.page-home #messung {
  background:
    radial-gradient(ellipse 50% 50% at 80% 20%, rgba(136, 206, 217, 0.06), transparent 55%),
    linear-gradient(180deg, rgba(248, 243, 235, 0.6), rgba(252, 250, 246, 0.96) 50%, rgba(255, 252, 247, 0.94));
}

/* Garantie: Warm sand with more structure */
.page-home #garantie {
  background:
    radial-gradient(ellipse 50% 40% at 90% 30%, rgba(196, 148, 74, 0.06), transparent 55%),
    radial-gradient(ellipse 40% 50% at 10% 70%, rgba(136, 206, 217, 0.04), transparent 55%),
    linear-gradient(180deg, rgba(255, 250, 242, 0.94), rgba(250, 243, 232, 0.88) 50%, rgba(245, 237, 224, 0.82));
}

/* Map Check: Distinctive cool treatment */
.page-home #map-check {
  background:
    radial-gradient(760px 360px at 0% 10%, rgba(196, 148, 74, 0.12), transparent 68%),
    radial-gradient(600px 400px at 100% 60%, rgba(136, 206, 217, 0.1), transparent 60%),
    linear-gradient(180deg, rgba(250, 247, 241, 0.94), rgba(241, 247, 249, 0.88) 60%, rgba(236, 245, 247, 0.86));
}

/* FAQ: Warm neutral with subtle texture shift */
.page-home #faq {
  background:
    radial-gradient(ellipse 40% 40% at 5% 55%, rgba(136, 206, 217, 0.04), transparent 55%),
    radial-gradient(ellipse 35% 40% at 95% 30%, rgba(196, 148, 74, 0.04), transparent 55%),
    linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(250, 244, 235, 0.88) 50%, rgba(247, 239, 227, 0.8));
}


/* ─── 5. CARD & PANEL DEPTH SYSTEM ─── */

/* Offer editorial box: refined depth */
.page-home .offer-editorial-top {
  border: 1px solid rgba(21, 39, 52, 0.06);
  box-shadow:
    var(--elev-inner-glow),
    var(--elev-shadow-card);
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(248, 240, 229, 0.86)),
    radial-gradient(circle at 100% 0%, rgba(136, 206, 217, 0.1), transparent 28%);
}

.page-home .offer-editorial-top::after {
  height: 2px;
  background: linear-gradient(90deg, var(--home-gold), rgba(136, 206, 217, 0.64), transparent);
  opacity: 0.82;
}

/* Cards container: enhanced layering */
.page-home #angebot .cards-offer {
  border: 1px solid rgba(21, 39, 52, 0.06);
  box-shadow:
    var(--elev-inner-glow),
    0 2px 4px rgba(10, 25, 34, 0.02),
    0 16px 40px rgba(10, 25, 34, 0.06),
    0 40px 80px rgba(10, 25, 34, 0.04);
}

/* Dark card section: enhanced glow presence */
.page-home #angebot .card:nth-child(3) {
  background: linear-gradient(160deg, rgba(11, 37, 50, 0.98), rgba(17, 53, 69, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Guarantee shell: refined glass depth */
.page-home .guarantee-shell {
  border: 1px solid rgba(21, 39, 52, 0.06);
  box-shadow:
    var(--elev-inner-glow),
    var(--elev-shadow-card);
}

.page-home .guarantee-shell::after {
  height: 2px;
  background: linear-gradient(90deg, var(--home-gold), rgba(136, 206, 217, 0.68), transparent);
  opacity: 0.78;
}

/* Guarantee board: refined inner surface */
.page-home .guarantee-board {
  border: 1px solid rgba(21, 39, 52, 0.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 8px 24px rgba(10, 25, 34, 0.04);
}

/* Form: premium glass treatment */
.page-home .form {
  border: 1px solid rgba(21, 39, 52, 0.06);
  box-shadow:
    var(--elev-inner-glow),
    0 2px 6px rgba(10, 25, 34, 0.03),
    0 16px 42px rgba(10, 25, 34, 0.08),
    0 42px 96px rgba(10, 25, 34, 0.06);
}

.page-home .form::before {
  height: 2px;
  background: linear-gradient(90deg, var(--home-gold), rgba(136, 206, 217, 0.72), transparent);
  opacity: 0.82;
}

/* Measure system: dark panel elevation */
.page-home .measure-system {
  border: 1px solid rgba(11, 52, 69, 0.28);
  box-shadow:
    var(--elev-inner-glow-dark),
    0 2px 6px rgba(4, 18, 27, 0.08),
    0 24px 64px rgba(4, 18, 27, 0.16),
    0 54px 120px rgba(4, 18, 27, 0.1);
}

/* FAQ column: refined sidecard */
.page-home .faq-column {
  border: 1px solid rgba(21, 39, 52, 0.06);
  box-shadow:
    var(--elev-inner-glow),
    0 8px 24px rgba(10, 25, 34, 0.04),
    0 24px 56px rgba(10, 25, 34, 0.05);
}

.page-home .faq-column::after {
  height: 2px;
  opacity: 0.78;
}

/* Mapcheck shell */
.page-home .mapcheck-shell {
  border: 1px solid rgba(21, 39, 52, 0.06);
  box-shadow:
    var(--elev-inner-glow),
    var(--elev-shadow-card);
}

.page-home .mapcheck-shell::after {
  height: 2px;
  opacity: 0.78;
}

/* Method grid: refined */
.page-home .method-grid {
  border: 1px solid rgba(21, 39, 52, 0.06);
  box-shadow:
    var(--elev-inner-glow),
    0 2px 6px rgba(10, 25, 34, 0.02),
    0 20px 52px rgba(10, 25, 34, 0.07),
    0 44px 96px rgba(10, 25, 34, 0.04);
}

/* CTA shell: enhanced dark glass */
.page-home .cta-shell {
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    var(--elev-inner-glow-dark),
    0 4px 12px rgba(4, 17, 24, 0.12),
    0 28px 72px rgba(4, 17, 24, 0.2);
}

.page-home .cta-shell::after {
  height: 2px;
  opacity: 0.78;
}


/* ─── 6. ABLAUF (PROCESS) SECTION ELEVATION ─── */

/* Richer gradient depth */
.page-home #ablauf {
  background:
    radial-gradient(760px 340px at 12% 0%, rgba(184, 138, 76, 0.2), transparent 68%),
    radial-gradient(760px 340px at 92% 16%, rgba(136, 206, 217, 0.18), transparent 68%),
    radial-gradient(400px 600px at 50% 100%, rgba(136, 206, 217, 0.06), transparent 60%),
    linear-gradient(180deg, #071a24, #0a2431 40%, #0d2e3e 80%, #0e3140);
}

/* Timeline: refined glass panel */
.page-home .timeline-compact {
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    var(--elev-inner-glow-dark),
    0 2px 8px rgba(3, 17, 26, 0.1),
    0 20px 48px rgba(3, 17, 26, 0.16),
    0 48px 100px rgba(3, 17, 26, 0.08);
}

.page-home .timeline-compact::after {
  height: 2px;
  background: linear-gradient(90deg, rgba(184, 138, 76, 0.88), rgba(136, 206, 217, 0.76), rgba(184, 138, 76, 0.3));
}

/* Process sidecard: enhanced */
.page-home .process-sidecard {
  box-shadow:
    var(--elev-inner-glow-dark),
    0 2px 6px rgba(3, 17, 26, 0.08),
    0 16px 40px rgba(3, 17, 26, 0.14),
    0 36px 80px rgba(3, 17, 26, 0.08);
}

/* Step hover: refined depth response */
.page-home .step:hover {
  background: rgba(255, 255, 255, 0.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 48px rgba(136, 206, 217, 0.03);
}

/* Step index: refined gold ring */
.page-home .step-index {
  background: rgba(136, 206, 217, 0.12);
  box-shadow:
    0 0 0 6px rgba(136, 206, 217, 0.05),
    0 8px 20px rgba(3, 17, 26, 0.12);
}


/* ─── 7. BUTTON ELEVATION ─── */

/* Primary button: gradient border glow */
.page-home .btn-primary {
  background: linear-gradient(135deg, #0d3445, #14506a 50%, #1a6480);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 2px 4px rgba(8, 28, 39, 0.12),
    0 14px 32px rgba(8, 28, 39, 0.16),
    0 0 0 1px rgba(136, 206, 217, 0.08);
  transition:
    box-shadow var(--elev-dur-base) var(--elev-ease),
    transform var(--elev-dur-fast) var(--elev-ease),
    background var(--elev-dur-base) var(--elev-ease);
}

.page-home .btn-primary:hover,
.page-home .btn-primary:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 4px 8px rgba(8, 28, 39, 0.14),
    0 22px 48px rgba(8, 28, 39, 0.2),
    0 0 0 1px rgba(136, 206, 217, 0.14),
    0 0 32px rgba(136, 206, 217, 0.08);
}

.page-home .btn-primary:active {
  transform: translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 1px 4px rgba(8, 28, 39, 0.14),
    0 8px 20px rgba(8, 28, 39, 0.12),
    0 0 0 1px rgba(136, 206, 217, 0.08);
  transition-duration: 80ms;
}

/* Ghost button: better glass presence */
.page-home .btn-ghost {
  background: var(--elev-glass);
  border: 1px solid rgba(21, 39, 52, 0.1);
  box-shadow: var(--elev-inner-glow), var(--elev-shadow-ambient);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  transition:
    box-shadow var(--elev-dur-base) var(--elev-ease),
    transform var(--elev-dur-fast) var(--elev-ease),
    background var(--elev-dur-fast) ease,
    border-color var(--elev-dur-fast) ease;
}

.page-home .btn-ghost:hover,
.page-home .btn-ghost:focus-visible {
  transform: translateY(-2px);
  background: var(--elev-glass-strong);
  border-color: rgba(21, 39, 52, 0.14);
  box-shadow:
    var(--elev-inner-glow),
    0 2px 6px rgba(10, 25, 34, 0.04),
    0 14px 36px rgba(10, 25, 34, 0.08);
}

/* Form submit button: accent glow */
.page-home .form .btn-primary {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 2px 4px rgba(8, 28, 39, 0.08),
    0 14px 32px rgba(8, 28, 39, 0.12),
    0 0 0 1px rgba(196, 148, 74, 0.08);
}


/* ─── 8. INTERACTION REFINEMENTS ─── */

/* Card hover: directional lighting effect */
.page-home #angebot .card {
  transition:
    background var(--elev-dur-base) var(--elev-ease),
    box-shadow var(--elev-dur-base) var(--elev-ease);
}

.page-home #angebot .card:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Guarantee lanes: refined slide */
.page-home .guarantee-lane {
  transition:
    background var(--elev-dur-base) var(--elev-ease),
    transform var(--elev-dur-base) var(--elev-ease-out),
    box-shadow var(--elev-dur-base) var(--elev-ease);
}

.page-home .guarantee-lane:hover {
  background: linear-gradient(135deg, rgba(196, 148, 74, 0.03), rgba(136, 206, 217, 0.03));
  transform: translateX(4px);
  box-shadow: -4px 0 16px rgba(10, 25, 34, 0.02);
}

/* Guarantee lane left borders: refined gradient */
.page-home .guarantee-lane-success {
  border-left: 3px solid transparent;
  border-image: linear-gradient(180deg, rgba(136, 206, 217, 0.6), rgba(136, 206, 217, 0.2)) 1;
}

.page-home .guarantee-lane-partial {
  border-left: 3px solid transparent;
  border-image: linear-gradient(180deg, rgba(196, 148, 74, 0.6), rgba(196, 148, 74, 0.2)) 1;
}

.page-home .guarantee-lane-full {
  border-left: 3px solid transparent;
  border-image: linear-gradient(180deg, rgba(21, 39, 52, 0.3), rgba(21, 39, 52, 0.08)) 1;
}

/* Measure lanes: refined hover */
.page-home .measure-lane {
  transition:
    transform var(--elev-dur-base) var(--elev-ease-out),
    box-shadow var(--elev-dur-base) var(--elev-ease),
    background var(--elev-dur-base) ease;
}

.page-home .measure-lane:hover {
  transform: translateY(-2px);
  box-shadow:
    0 2px 8px rgba(4, 18, 27, 0.06),
    0 16px 40px rgba(4, 18, 27, 0.08);
}

/* FAQ items: refined interaction states */
.page-home .faq-item {
  transition: background var(--elev-dur-base) var(--elev-ease);
}

.page-home .faq-item::after {
  transition:
    opacity var(--elev-dur-base) var(--elev-ease),
    transform var(--elev-dur-slow) var(--elev-ease-out),
    box-shadow var(--elev-dur-base) ease,
    border-color var(--elev-dur-fast) ease;
}

.page-home .faq-item:hover::after {
  opacity: 0.44;
  transform: translateY(3px) scale(0.997);
}

.page-home .faq-item[open]::after,
.page-home .faq-item[data-faq-animating="true"]::after {
  opacity: 1;
  transform: translateY(0) scale(1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 4px 12px rgba(12, 28, 39, 0.03),
    0 16px 36px rgba(12, 28, 39, 0.05),
    0 32px 60px rgba(12, 28, 39, 0.03);
}

/* FAQ icon: spring rotation */
.page-home .faq-icon {
  transition:
    transform var(--elev-dur-base) var(--elev-ease-spring),
    background var(--elev-dur-fast) ease,
    border-color var(--elev-dur-fast) ease,
    box-shadow var(--elev-dur-base) ease;
}

/* Offer context links: refined underline interaction */
.page-home .offer-context-link-primary {
  transition:
    color var(--elev-dur-fast) ease,
    border-color var(--elev-dur-fast) ease,
    padding-left var(--elev-dur-base) var(--elev-ease-out);
}

.page-home .offer-context-link-primary:hover {
  padding-left: 6px;
  transform: none;
}


/* ─── 9. FORM FIELD ELEVATION ─── */

/* Field resting state: more glass presence */
.page-home .field {
  background: rgba(255, 255, 255, 0.66);
  border-color: rgba(21, 39, 52, 0.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 2px 8px rgba(10, 25, 34, 0.02);
  transition:
    border-color var(--elev-dur-fast) ease,
    background var(--elev-dur-fast) ease,
    box-shadow var(--elev-dur-base) var(--elev-ease),
    transform var(--elev-dur-base) var(--elev-ease);
}

/* Focus: premium lift + glow ring */
.page-home .field:focus-within {
  border-color: rgba(27, 109, 132, 0.22);
  background: rgba(255, 255, 255, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 0 0 4px rgba(136, 206, 217, 0.1),
    0 4px 12px rgba(17, 33, 45, 0.04),
    0 16px 36px rgba(17, 33, 45, 0.06);
  transform: translateY(-1px);
}

/* Core fields container: refined grouping */
.page-home .form-core-fields {
  border: 1px solid rgba(21, 39, 52, 0.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 2px 8px rgba(10, 25, 34, 0.02);
}


/* ─── 10. FOOTER ELEVATION ─── */

/* Footer: darker, richer background */
.page-home .footer {
  background:
    radial-gradient(600px 280px at 10% 20%, rgba(184, 138, 76, 0.08), transparent 60%),
    radial-gradient(500px 300px at 90% 40%, rgba(136, 206, 217, 0.06), transparent 60%),
    linear-gradient(180deg, #071a24, #0a1e2a 40%, #081820);
}

/* Footer brand lockup: subtle presence */
.page-home .footer-brand-mark picture img {
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.3));
}

/* Footer links: refined hover */
.page-home .footer-link {
  transition:
    color var(--elev-dur-fast) ease,
    transform var(--elev-dur-base) var(--elev-ease-out),
    opacity var(--elev-dur-fast) ease;
  opacity: 0.72;
}

.page-home .footer-link:hover {
  opacity: 1;
  color: #fffaf4;
  transform: translateX(3px);
}

/* Footer heading underline: animated grow on hover */
.page-home .footer-heading::after {
  transition: width var(--elev-dur-base) var(--elev-ease-out);
}

.page-home .footer-column:hover .footer-heading::after {
  width: 52px;
  opacity: 0.7;
}

/* Footer bottom: refined divider */
.page-home .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Footer topline: accent gradient underline */
.page-home .footer-topline {
  position: relative;
  border-bottom: none;
}

.page-home .footer-topline::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(196, 148, 74, 0.3), rgba(136, 206, 217, 0.2), transparent 80%);
}


/* ─── 11. SCROLL PROGRESS REFINEMENT ─── */

.page-home .scroll-progress {
  height: 2px;
  background: linear-gradient(90deg,
    var(--home-gold),
    rgba(136, 206, 217, 0.9) 50%,
    var(--home-gold));
  box-shadow:
    0 0 12px rgba(196, 148, 74, 0.3),
    0 0 4px rgba(136, 206, 217, 0.2);
}


/* ─── 12. SCROLL-TO-TOP BUTTON ─── */

.page-home .scroll-top {
  background: rgba(255, 252, 247, 0.94);
  border: 1px solid rgba(21, 39, 52, 0.08);
  box-shadow:
    var(--elev-inner-glow),
    0 2px 6px rgba(10, 25, 34, 0.06),
    0 12px 28px rgba(10, 25, 34, 0.1);
  transition:
    transform var(--elev-dur-base) var(--elev-ease-spring),
    box-shadow var(--elev-dur-base) var(--elev-ease),
    background var(--elev-dur-fast) ease;
}

.page-home .scroll-top:hover {
  transform: translateY(-4px);
  box-shadow:
    var(--elev-inner-glow),
    0 4px 12px rgba(10, 25, 34, 0.08),
    0 18px 40px rgba(10, 25, 34, 0.12);
}


/* ─── 13. REVEAL ANIMATION REFINEMENTS ─── */

/* More sophisticated entrance: combine translateY with slight scale and opacity */
.page-home .reveal-up {
  opacity: 0;
  transform: translateY(28px) scale(0.99);
  filter: blur(2px);
  transition:
    opacity var(--elev-dur-entrance) var(--elev-ease-out),
    transform var(--elev-dur-entrance) var(--elev-ease-out),
    filter var(--elev-dur-entrance) var(--elev-ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.page-home .reveal-up.is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Card rise: with scale */
@keyframes elev-card-rise {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.985);
    filter: blur(1px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

/* Override card-rise animations with elevated version */
@media (min-width: 981px) {
  .page-home .is-visible .card:nth-child(1) {
    animation: elev-card-rise 620ms var(--elev-ease-out) 80ms both;
  }
  .page-home .is-visible .card:nth-child(2) {
    animation: elev-card-rise 620ms var(--elev-ease-out) 200ms both;
  }
  .page-home .is-visible .card:nth-child(3) {
    animation: elev-card-rise 620ms var(--elev-ease-out) 300ms both;
  }
}

/* Step slide: refined entrance */
@keyframes elev-step-slide {
  from {
    opacity: 0;
    transform: translateX(-12px) translateY(8px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.page-home .is-visible .step:nth-child(1) { animation-name: elev-step-slide; }
.page-home .is-visible .step:nth-child(2) { animation-name: elev-step-slide; }
.page-home .is-visible .step:nth-child(3) { animation-name: elev-step-slide; }
.page-home .is-visible .step:nth-child(4) { animation-name: elev-step-slide; }

/* Measure and guarantee lanes: use elevated rise */
.page-home .is-visible .measure-lane:nth-child(1),
.page-home .is-visible .measure-lane:nth-child(2),
.page-home .is-visible .measure-lane:nth-child(3),
.page-home .is-visible .measure-lane:nth-child(4),
.page-home .is-visible .guarantee-lane:nth-child(1),
.page-home .is-visible .guarantee-lane:nth-child(2),
.page-home .is-visible .guarantee-lane:nth-child(3) {
  animation-name: elev-card-rise;
}

/* FAQ groups: use elevated rise */
.page-home .is-visible .faq-group:nth-child(1),
.page-home .is-visible .faq-group:nth-child(2),
.page-home .is-visible .faq-group:nth-child(3) {
  animation-name: elev-card-rise;
}

/* Stagger items: refined micro-entrance */
@keyframes elev-stagger-in {
  from {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(1px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

.page-home .is-visible .hero-ledger-item,
.page-home .is-visible .offer-qualifier,
.page-home .is-visible .cta-decision-item,
.page-home .is-visible .guarantee-ledger-item,
.page-home .is-visible .measure-legend-item,
.page-home .is-visible .faq-sidecard-point,
.page-home .is-visible .cta-sidecard-point,
.page-home .is-visible .footer-fact {
  animation-name: elev-stagger-in;
  animation-duration: 560ms;
  animation-timing-function: var(--elev-ease-out);
}


/* ─── 14. AMBIENT VITALITY ─── */

/* Scope visual: enhanced breathing */
@keyframes elev-scope-breathe {
  0%, 100% {
    box-shadow: 0 28px 54px rgba(5, 17, 24, 0.28);
    transform: translate(-50%, -50%) translate3d(var(--hero-shift-x-md), var(--hero-shift-y-md), 0) scale(1);
  }
  50% {
    box-shadow: 0 32px 60px rgba(5, 17, 24, 0.32);
    transform: translate(-50%, -50%) translate3d(var(--hero-shift-x-md), var(--hero-shift-y-md), 0) scale(1.02);
  }
}

.page-home .scope-hub {
  animation-name: elev-scope-breathe;
}

/* Gold accent line: ambient shimmer */
@keyframes elev-accent-shimmer {
  0%, 100% {
    opacity: 0.78;
  }
  50% {
    opacity: 1;
  }
}

.page-home .offer-editorial-top::after {
  animation: elev-accent-shimmer 6s ease-in-out infinite;
}
.page-home .guarantee-shell::after {
  animation: elev-accent-shimmer 6s ease-in-out 1s infinite;
}
.page-home .form::before {
  animation: elev-accent-shimmer 6s ease-in-out 0.5s infinite;
}
.page-home .faq-column::after {
  animation: elev-accent-shimmer 6s ease-in-out 1.5s infinite;
}
.page-home .mapcheck-shell::after {
  animation: elev-accent-shimmer 6s ease-in-out 2s infinite;
}
.page-home .cta-shell::after {
  animation: elev-accent-shimmer 6s ease-in-out 2.5s infinite;
}
.page-home .timeline-compact::after {
  animation: elev-accent-shimmer 6s ease-in-out 3s infinite;
}


/* ─── 15. COOKIE BANNER ─── */

.page-home .cookie-banner {
  border: 1px solid rgba(21, 39, 52, 0.06);
  border-bottom: 0;
  background: rgba(255, 252, 247, 0.97);
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 -4px 12px rgba(10, 25, 34, 0.04),
    0 -18px 48px rgba(10, 25, 34, 0.08);
}


/* ─── 16. OFFER MOBILE FLOW REFINEMENTS ─── */

.page-home .offer-mobile-item {
  border: 1px solid rgba(21, 39, 52, 0.06);
  box-shadow:
    var(--elev-inner-glow),
    var(--elev-shadow-ambient);
  transition:
    box-shadow var(--elev-dur-base) var(--elev-ease),
    border-color var(--elev-dur-fast) ease;
}

.page-home .offer-mobile-item[open] {
  box-shadow:
    var(--elev-inner-glow),
    var(--elev-shadow-card);
  border-color: rgba(21, 39, 52, 0.1);
}

.page-home .offer-mobile-item-dark {
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow:
    var(--elev-inner-glow-dark),
    0 2px 8px rgba(4, 18, 27, 0.1),
    0 16px 40px rgba(4, 18, 27, 0.16);
}


/* ─── 17. PROCESS MOBILE REFINEMENTS ─── */

.page-home .process-mobile-shell {
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    var(--elev-inner-glow-dark),
    0 2px 8px rgba(3, 17, 26, 0.08),
    0 18px 44px rgba(3, 17, 26, 0.14),
    0 40px 88px rgba(3, 17, 26, 0.06);
}


/* ─── 18. GUARANTEE MOBILE REFINEMENTS ─── */

.page-home .guarantee-mobile-sheet {
  border: 1px solid rgba(21, 39, 52, 0.06);
  border-radius: 28px;
  overflow: hidden;
  box-shadow:
    var(--elev-inner-glow),
    var(--elev-shadow-card);
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(248, 240, 229, 0.9));
}


/* ─── 19. MEASURE MOBILE REFINEMENTS ─── */

.page-home .measure-mobile-sheet {
  border: 1px solid rgba(21, 39, 52, 0.06);
  border-radius: 28px;
  overflow: hidden;
  box-shadow:
    var(--elev-inner-glow),
    var(--elev-shadow-card);
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(248, 240, 229, 0.9));
}


/* ─── 20. FOCUS STATES REFINEMENT ─── */

.page-home *:focus-visible {
  outline: 2px solid rgba(136, 206, 217, 0.5);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(136, 206, 217, 0.08);
}

.page-home .btn:focus-visible {
  outline: 2px solid rgba(136, 206, 217, 0.56);
  outline-offset: 4px;
  box-shadow:
    0 0 0 6px rgba(136, 206, 217, 0.1),
    0 18px 40px rgba(8, 28, 39, 0.16);
}


/* ─── 21. HERO CTA-NOTE REFINEMENT ─── */

.page-home .hero-cta-note {
  position: relative;
  padding-left: 16px;
  margin-top: 12px;
}

.page-home .hero-cta-note::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(196, 148, 74, 0.4), rgba(136, 206, 217, 0.2));
}


/* ─── 22. MAPCHECK MOBILE CARDS ─── */

.page-home .mapcheck-mobile-card {
  border: 1px solid rgba(21, 39, 52, 0.06);
  border-radius: 22px;
  padding: 20px;
  background: rgba(255, 252, 247, 0.86);
  box-shadow: var(--elev-shadow-ambient);
  margin-top: 10px;
}

.page-home .mapcheck-mobile-card-dark {
  background: linear-gradient(160deg, #0b2532, #123747);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 2px 8px rgba(4, 18, 27, 0.1), 0 16px 40px rgba(4, 18, 27, 0.14);
}


/* ─── 23. BADGE REFINEMENT ─── */

.page-home .badge-success {
  background: linear-gradient(135deg, rgba(27, 109, 132, 0.12), rgba(136, 206, 217, 0.08));
  border: 1px solid rgba(27, 109, 132, 0.16);
  box-shadow: 0 2px 8px rgba(27, 109, 132, 0.06);
}

.page-home .badge-partial {
  background: linear-gradient(135deg, rgba(184, 138, 76, 0.14), rgba(184, 138, 76, 0.08));
  border: 1px solid rgba(184, 138, 76, 0.2);
  box-shadow: 0 2px 8px rgba(184, 138, 76, 0.06);
}

.page-home .badge-full {
  background: linear-gradient(135deg, rgba(21, 39, 52, 0.08), rgba(21, 39, 52, 0.04));
  border: 1px solid rgba(21, 39, 52, 0.1);
  box-shadow: 0 2px 8px rgba(21, 39, 52, 0.04);
}


/* ─── 24. HERO TEXT LINK REFINEMENT ─── */

.page-home .hero-text-link {
  transition:
    color var(--elev-dur-fast) ease,
    transform var(--elev-dur-base) var(--elev-ease-out);
}

.page-home .hero-text-link::after {
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(196, 148, 74, 0.5), rgba(136, 206, 217, 0.8));
  transition:
    transform var(--elev-dur-base) var(--elev-ease-out),
    opacity var(--elev-dur-fast) ease;
}

.page-home .hero-text-link:hover::after,
.page-home .hero-text-link:focus-visible::after {
  transform: scaleX(1);
  opacity: 1;
}


/* ─── 25. SECTION BRIDGES: SMOOTHER TRANSITIONS ─── */

/* Angebot → Ablauf: warm fading into dark */
.page-home #ablauf::before {
  height: 140px;
  background: linear-gradient(180deg,
    rgba(248, 241, 230, 0.06),
    rgba(248, 241, 230, 0.02) 40%,
    transparent 100%);
}

/* Ablauf → Messung: dark fading into cool cream */
.page-home #messung::before {
  height: 120px;
  background: linear-gradient(180deg,
    rgba(11, 39, 52, 0.06),
    rgba(11, 39, 52, 0.02) 40%,
    transparent 100%);
}

/* Messung → Garantie: subtle warm shift */
.page-home #garantie::before {
  height: 80px;
  background: linear-gradient(180deg,
    rgba(252, 250, 246, 0.4),
    transparent 100%);
}

/* FAQ → CTA: warm into dark */
.page-home .cta-final::before {
  height: 120px;
  background: linear-gradient(180deg,
    rgba(247, 239, 227, 0.04),
    transparent 100%);
}


/* ─── 26. NOSCRIPT BANNER ─── */

.page-home noscript div {
  border-radius: 16px;
  font-family: "Manrope", sans-serif;
}


/* ─── RESPONSIVE: MOBILE REFINEMENTS ─── */

@media (max-width: 980px) {
  .page-home .section-head h2 {
    font-size: clamp(32px, 8vw, 46px);
    letter-spacing: -0.035em;
  }

  .page-home .hero-ledger {
    border-radius: 20px;
  }

  /* Reduce reveal distance on mobile for snappier feel */
  .page-home .reveal-up {
    transform: translateY(20px) scale(0.995);
    filter: blur(1px);
  }
}

@media (max-width: 600px) {
  .page-home .section-head h2 {
    font-size: clamp(28px, 7.5vw, 38px);
    letter-spacing: -0.03em;
    line-height: 1.04;
  }

  .page-home .section-head p {
    font-size: 15.5px;
    line-height: 1.76;
  }

  /* Reduce reveal distance further on small screens */
  .page-home .reveal-up {
    transform: translateY(16px);
    filter: blur(0.5px);
  }

  .page-home .hero-cta-note::before {
    display: none;
  }

  .page-home .hero-ledger {
    border-radius: 18px;
  }
}

@media (max-width: 420px) {
  .page-home .section-head h2 {
    font-size: 26px;
  }
}


/* ─── REDUCED MOTION ─── */

@media (prefers-reduced-motion: reduce) {
  .page-home .reveal-up {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  .page-home .reveal-up.is-visible {
    filter: none;
  }

  .page-home .scope-hub {
    animation: none;
  }

  .page-home .offer-editorial-top::after,
  .page-home .guarantee-shell::after,
  .page-home .form::before,
  .page-home .faq-column::after,
  .page-home .mapcheck-shell::after,
  .page-home .cta-shell::after,
  .page-home .timeline-compact::after {
    animation: none;
  }

  /* Match nth-child specificity to ensure overrides */
  .page-home .is-visible .card:nth-child(1),
  .page-home .is-visible .card:nth-child(2),
  .page-home .is-visible .card:nth-child(3),
  .page-home .is-visible .step:nth-child(1),
  .page-home .is-visible .step:nth-child(2),
  .page-home .is-visible .step:nth-child(3),
  .page-home .is-visible .step:nth-child(4),
  .page-home .is-visible .measure-lane:nth-child(1),
  .page-home .is-visible .measure-lane:nth-child(2),
  .page-home .is-visible .measure-lane:nth-child(3),
  .page-home .is-visible .measure-lane:nth-child(4),
  .page-home .is-visible .guarantee-lane:nth-child(1),
  .page-home .is-visible .guarantee-lane:nth-child(2),
  .page-home .is-visible .guarantee-lane:nth-child(3),
  .page-home .is-visible .faq-group:nth-child(1),
  .page-home .is-visible .faq-group:nth-child(2),
  .page-home .is-visible .faq-group:nth-child(3) {
    animation: none;
  }

  .page-home .is-visible .hero-ledger-item,
  .page-home .is-visible .offer-qualifier,
  .page-home .is-visible .cta-decision-item,
  .page-home .is-visible .guarantee-ledger-item,
  .page-home .is-visible .measure-legend-item,
  .page-home .is-visible .faq-sidecard-point,
  .page-home .is-visible .cta-sidecard-point,
  .page-home .is-visible .footer-fact,
  .page-home .is-visible .method-card {
    animation: none;
  }
}