/* ==========================================================
   Digivero – Premium Conversion Landing (Reset)
   Ziel: hochwertiges, ruhiges Insurance-UI (Navy/Blue + Orange CTA)
   ========================================================== */

:root{
  --navy-950:#061225;
  --navy-900:#081a33;
  --navy-850:#0a2040;
  --blue-700:#1b4fd1;
  --blue-600:#2b6cff;
  --blue-100:#eaf1ff;

  --orange-600:#ff6b35;
  --orange-700:#e75b2a;

  --bg:#ffffff;
  --bg-2:#f6f8fc;
  --text:#0a1220;
  --muted:#475569;
  --line:rgba(15,23,42,.12);

  --radius-1:12px;
  --radius-2:16px;
  --radius-3:22px;

  --shadow-1:0 1px 2px rgba(0,0,0,.05);
  --shadow-2:0 18px 50px rgba(6,18,37,.10);
  --shadow-3:0 30px 90px rgba(6,18,37,.18);
  --shadow-4:0 40px 140px rgba(6,18,37,.26);

  --font-head:'Montserrat','Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;

  --h1:clamp(2.25rem, 3.2vw + 1.15rem, 3.75rem);
  --h2:clamp(1.55rem, 2.2vw + .95rem, 2.6rem);
  --h3:clamp(1.15rem, .9vw + .9rem, 1.45rem);
  --p:clamp(1.0rem, .25vw + .95rem, 1.08rem);
  --pad:clamp(3.2rem, 6vw + 1.2rem, 6.2rem);
  --gap:16px;
  --gap2:24px;
  --gap3:40px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  font-size:var(--p);
  line-height:1.7;
  color:var(--text);
  background:var(--bg);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* Prevent accidental horizontal layout overflow (mobile). */
body{overflow-x:hidden}
body.menu-open,
body.nav-open{overflow:hidden}
img,svg{max-width:100%;height:auto}
a{color:inherit}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.95em}

:root{--gutter:24px}
.container{
  max-width:1400px;
  margin:0 auto;
  padding:0 calc(var(--gutter) + env(safe-area-inset-right, 0px)) 0 calc(var(--gutter) + env(safe-area-inset-left, 0px));
}
@media (max-width: 1023px){
  :root{--gutter:22px}
}
@media (max-width: 520px){
  :root{--gutter:18px}
}

/* Mobile-first: compact typography & spacing */
@media (max-width: 720px){
  :root{
    --h1:clamp(1.9rem, 4.4vw + 1rem, 2.6rem);
    --h2:clamp(1.35rem, 2.8vw + .9rem, 2.0rem);
    --h3:clamp(1.05rem, 1.2vw + .9rem, 1.25rem);
    --p:clamp(.98rem, .35vw + .92rem, 1.02rem);
    --pad:clamp(2.4rem, 5vw + 1rem, 3.6rem);
  }
}
.muted{color:var(--muted)}
h1,h2,h3{font-family:var(--font-head);letter-spacing:-.02em}
h1{font-size:var(--h1);line-height:1.04}
h2{font-size:var(--h2);line-height:1.18;margin:0 0 10px}
h3{font-size:var(--h3);line-height:1.25;margin:0 0 8px}
main h1{margin:0 0 10px}

.flash-wrap{padding-top:18px}

.section{padding:var(--pad) 0}
.section-alt{background:linear-gradient(180deg, var(--bg-2), #fff)}
.section-intro{max-width:78ch;color:var(--muted);margin:0 0 20px}

/* Premium section rhythm */
.section .container > h2{max-width:28ch}
.section .container > h2 + .section-intro{margin-top:6px}
.section .card{padding:22px}
.section .card h3{margin-top:6px}

.section-head{max-width:78ch;margin:0 0 22px}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(10,18,32,.62);
  padding:8px 10px;border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(43,108,255,.05);
  font-weight:900;
}
.eyebrow-inverse{
  color:rgba(248,250,252,.78);
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
}

/* Dark sections (reuse hero feel inside content) */
.section-dark{
  background:
    radial-gradient(900px 520px at 18% 20%, rgba(43,108,255,.18), transparent 62%),
    radial-gradient(900px 520px at 82% 15%, rgba(255,107,53,.14), transparent 66%),
    linear-gradient(135deg, var(--navy-950), var(--navy-850));
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  color:rgba(248,250,252,.88);
}
.section-title-inverse{color:#f8fafc}
.section-intro-inverse{color:rgba(248,250,252,.78)}
.section-dark a{color:rgba(219,234,254,.96)}
.section-dark a:hover{color:#ffffff}
.section-dark .muted{color:rgba(248,250,252,.78)}

.section-dark .card{
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(10px) saturate(160%);
  box-shadow:0 24px 70px rgba(0,0,0,.22);
}
.section-dark .card h3{color:#f8fafc}
.section-dark .card .muted{color:rgba(248,250,252,.78)}
.section-dark .small-list li{color:rgba(248,250,252,.84)}
.section-dark .small-list a{color:rgba(219,234,254,.96)}
.section-dark .small-list a:hover{color:#ffffff}
.section-dark .icon{filter:drop-shadow(0 10px 24px rgba(0,0,0,.25))}

.section-dark .table-wrap{
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(10px) saturate(160%);
}
.section-dark .table thead th{
  background:rgba(255,255,255,.08);
  color:rgba(248,250,252,.92);
}
.section-dark .table th,.section-dark .table td{
  border-bottom:1px solid rgba(255,255,255,.10);
  color:rgba(248,250,252,.88);
}
.section-dark .row-highlight td{background:rgba(255,107,53,.06)}
.section-dark .pill{border-color:rgba(255,107,53,.30);background:rgba(255,107,53,.14);color:#ffd6c8}

.section-dark .notice{
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
}
.section-dark .notice-title{color:#f8fafc}
.section-dark .notice-text{color:rgba(248,250,252,.78)}
.section-dark .notice-icon{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);color:#f8fafc}

.split{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:var(--gap3);
  align-items:start;
}
@media (max-width: 980px){.split{grid-template-columns:1fr}}

.skip-link{
  position:absolute;left:16px;top:-120px;
  background:var(--orange-600);color:#fff;
  padding:12px 14px;border-radius:999px;
  font-weight:900;text-decoration:none;
  z-index:9999;
}
.skip-link:focus{top:16px;outline:3px solid rgba(255,255,255,.9);outline-offset:3px}

.alert{
  border:1px solid var(--line);
  background:rgba(43,108,255,.06);
  border-radius:var(--radius-2);
  padding:14px 16px;
  box-shadow:var(--shadow-1);
}

/* Header / Nav */
/* Kein backdrop-filter am Header: sonst wird position:fixed der Mobile-Nav ggf.
   am Header „geclippt“ (kleines Kartenfenster statt echtem Overlay). */
.site-header{
  position:sticky;top:0;z-index:1002;
  background:rgba(255,255,255,.94);
  border-bottom:1px solid rgba(15,23,42,.08);
}
.header-container{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0}
.brand{display:flex;align-items:flex-start;gap:0;text-decoration:none}
.brand-text{display:flex;flex-direction:column;gap:2px}
.brand-name{font-weight:950}
.brand-sub{display:block;font-size:.82rem;color:var(--muted);margin-top:2px}
@media (max-width: 520px){
  .header-container{padding:12px 0}
  .brand-sub{font-size:.78rem}
}

.nav{display:flex}
.nav-list{list-style:none;display:flex;gap:10px;align-items:center}
.nav-link{
  display:inline-flex;align-items:center;
  padding:10px 12px;border-radius:999px;
  text-decoration:none;font-weight:900;
  color:rgba(10,18,32,.92);
}
.nav-link:focus-visible{
  outline:3px solid rgba(43,108,255,.35);
  outline-offset:3px;
}
.nav-link:hover{background:rgba(43,108,255,.06)}
.nav-cta{
  background:rgba(255,107,53,.12);
  border:1px solid rgba(255,107,53,.22);
}
.nav-cta:hover{background:rgba(255,107,53,.16)}

.nav-toggle{
  display:none;align-items:center;gap:10px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;border-radius:999px;
  padding:10px 14px;font-weight:900;
  min-height:48px;
}
/* Hamburger → X (wie layouts/_base) */
.hamburger{
  position:relative;
  width:22px;height:16px;
  display:inline-block;
  flex:0 0 auto;
}
.hamburger span,
.hamburger span::before,
.hamburger span::after{
  content:"";
  position:absolute;left:0;width:100%;height:2px;border-radius:2px;
  background:var(--navy-900);
  transition:transform .25s ease,opacity .25s ease,top .25s ease;
}
.hamburger span{top:7px}
.hamburger span::before{top:-6px}
.hamburger span::after{top:6px}
.nav-toggle[aria-expanded="true"] .hamburger span{opacity:0}
.nav-toggle[aria-expanded="true"] .hamburger span::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .hamburger span::after{top:0;transform:rotate(-45deg)}

/* Mobile: Off-Canvas rechts, volle Höhe (Vorlage layouts/_base) */
@media (max-width: 1023px){
  .nav-toggle{
    display:inline-flex;
    position:relative;
    z-index:1003;
  }
  .nav{
    display:block;
    position:fixed;
    top:0;right:0;left:auto;
    width:min(300px,88vw);
    height:100vh;
    height:100dvh;
    max-height:100dvh;
    padding:calc(72px + env(safe-area-inset-top,0px)) 16px calc(20px + env(safe-area-inset-bottom,0px));
    margin:0;
    background:#fff;
    border:none;
    border-left:1px solid rgba(15,23,42,.12);
    border-radius:0;
    box-shadow:-16px 0 48px rgba(6,18,37,.16);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    z-index:1001;
    transform:translateX(105%);
    visibility:hidden;
    pointer-events:none;
    transition:transform .25s ease,visibility .25s;
  }
  .nav.is-open{
    transform:translateX(0);
    visibility:visible;
    pointer-events:auto;
  }
  .nav-list{flex-direction:column;align-items:stretch;gap:8px}
  .nav-link{
    justify-content:flex-start;
    min-height:48px;
    padding:14px 16px;
    border-radius:16px;
    border:1px solid rgba(15,23,42,.08);
    background:rgba(246,248,252,.65);
  }
  .nav-link:hover{background:rgba(43,108,255,.08)}
  .nav-cta{
    background:rgba(255,107,53,.14);
    border-color:rgba(255,107,53,.28);
  }
}

@media (min-width: 1024px){
  .nav-toggle{display:none !important}
  .nav{
    display:flex !important;
    position:static;
    transform:none !important;
    visibility:visible !important;
    pointer-events:auto !important;
    width:auto;height:auto;max-height:none;
    padding:0;margin:0;
    background:transparent;
    border:0;box-shadow:none;
    overflow:visible;
    transition:none;
  }
}

.nav-backdrop{
  position:fixed;
  inset:0;
  background:rgba(6,18,37,.52);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
  z-index:1000;
}
.nav-backdrop.is-visible{
  opacity:1;
  pointer-events:auto;
}

/* Right dock widget (countdown) */
.dock-widget{
  position:fixed;
  right:12px;
  top:clamp(120px, 32vh, 360px);
  width:min(280px, calc(100vw - 24px));
  z-index:65;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(520px 220px at 20% 0%, rgba(255,107,53,.22), transparent 60%),
    radial-gradient(520px 220px at 90% 10%, rgba(43,108,255,.22), transparent 62%),
    linear-gradient(135deg, rgba(6,18,37,.92), rgba(10,32,64,.92));
  color:rgba(248,250,252,.92);
  box-shadow:0 26px 90px rgba(0,0,0,.35);
  padding:14px 14px 12px;
  backdrop-filter: blur(10px) saturate(160%);
}
.dock-widget[hidden]{display:none !important}
.dock-widget-close{
  position:absolute;
  top:10px;
  right:10px;
  width:40px;
  height:40px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.dock-widget-close:hover{background:rgba(255,255,255,.12)}
.dock-widget-close:focus-visible{
  outline:3px solid rgba(255,255,255,.55);
  outline-offset:3px;
}
.dock-widget-kicker{
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:950;
  color:rgba(248,250,252,.78);
  padding-right:44px;
}
.dock-widget-title{
  margin-top:6px;
  font-family:var(--font-head);
  font-weight:950;
  letter-spacing:-.02em;
  font-size:1.35rem;
  color:#fff;
}
.dock-count{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.dock-count-item{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  border-radius:14px;
  padding:10px 8px;
  text-align:center;
}
.dock-count-n{
  font-weight:950;
  font-variant-numeric: tabular-nums;
  color:#fff;
  font-size:1.05rem;
}
.dock-count-l{
  margin-top:6px;
  font-size:.72rem;
  font-weight:900;
  color:rgba(248,250,252,.72);
  letter-spacing:.02em;
  text-transform:uppercase;
}
.dock-widget-foot{
  margin-top:10px;
  font-size:.85rem;
  line-height:1.45;
}
@media (max-width: 520px){
  .dock-widget{
    right:10px;
    top:auto;
    bottom:calc(92px + env(safe-area-inset-bottom, 0px));
    width:min(320px, calc(100vw - 20px));
  }
}

/* Hero */
.hero{
  position:relative;
  padding:clamp(3.6rem, 6.2vw + 2rem, 7.2rem) 0;
  background:
    radial-gradient(900px 520px at 18% 20%, rgba(43,108,255,.24), transparent 62%),
    radial-gradient(900px 520px at 82% 15%, rgba(255,107,53,.18), transparent 66%),
    linear-gradient(135deg, var(--navy-950), var(--navy-850));
  border-bottom:1px solid rgba(255,255,255,.08);
}

.mini-hero{
  position:relative;
  padding:clamp(2.6rem, 4.6vw + 1.2rem, 4.6rem) 0;
  background:
    radial-gradient(900px 520px at 18% 20%, rgba(43,108,255,.22), transparent 62%),
    radial-gradient(900px 520px at 82% 15%, rgba(255,107,53,.16), transparent 66%),
    linear-gradient(135deg, var(--navy-950), var(--navy-850));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.mini-hero .container{max-width:1400px}
.mini-hero h1{color:#f8fafc}
.mini-hero .lead{color:rgba(248,250,252,.78)}
.mini-hero .badge{margin-bottom:12px}
.hero .container{max-width:1400px}
.hero-grid{display:block}
.hero-copy{max-width:none}
.hero h1{color:#f8fafc}
.hero .muted,.hero .lead{color:rgba(248,250,252,.78)}
.badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:rgba(248,250,252,.88);
  font-weight:900;margin-bottom:14px;
}
.hero-accent{color:#cfe4ff}
.lead{max-width:70ch;font-size:1.08rem;margin:12px 0 16px}
.checklist{list-style:none;display:grid;gap:10px;margin:0;padding:0}
.checklist li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  color:rgba(248,250,252,.86);
}
.checklist li:before{
  content:"✓";
  flex:0 0 auto;
  width:26px;height:26px;
  display:grid;place-items:center;
  border-radius:10px;
  margin-top:2px;
  background:rgba(125,211,252,.14);
  border:1px solid rgba(125,211,252,.22);
  color:#7dd3fc;font-weight:950;
  line-height:1;
}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 16px;border-radius:14px;
  text-decoration:none;font-weight:950;
  border:1px solid transparent;
  min-height:48px;
  transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn:focus-visible{
  outline:3px solid rgba(43,108,255,.35);
  outline-offset:3px;
}
.section-dark .btn:focus-visible,
.hero .btn:focus-visible{
  outline:3px solid rgba(255,255,255,.55);
  outline-offset:3px;
}
.btn:active{transform:translateY(1px)}
.btn-primary{
  background:var(--orange-600);
  color:#ffffff;
  -webkit-text-fill-color:#ffffff;
  box-shadow:0 18px 44px rgba(255,107,53,.22);
}
.btn-primary:hover{color:#ffffff;-webkit-text-fill-color:#ffffff}
.btn-primary:hover{background:var(--orange-700);box-shadow:0 22px 58px rgba(255,107,53,.26)}
.btn-outline{
  background:#fff;
  border-color:rgba(43,108,255,.22);
  color:var(--navy-900);
}
.btn-outline:hover{background:rgba(43,108,255,.06);border-color:rgba(43,108,255,.28)}
@media (hover: hover) and (pointer: fine){
  .btn-primary:hover{transform:translateY(-1px)}
  .btn-outline:hover{transform:translateY(-1px)}
}
.hero .btn-outline{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.26);
  color:#f8fafc;
  box-shadow:0 18px 44px rgba(0,0,0,.18);
}
.hero .btn-outline:hover{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.34);
}

/* Secondary CTA on dark CI surfaces (high contrast, readable) */
.btn-secondary{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.26);
  color:#f8fafc;
  box-shadow:0 18px 44px rgba(0,0,0,.18);
}
.btn-secondary:hover{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.34);
}
.section-dark .btn-secondary:focus-visible,
.hero .btn-secondary:focus-visible{
  outline:3px solid rgba(255,255,255,.55);
  outline-offset:3px;
}
.mini-hero .btn-outline{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.26);
  color:#f8fafc;
  box-shadow:0 18px 44px rgba(0,0,0,.18);
}
.mini-hero .btn-outline:hover{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.34);
}

.trustline{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.trust-pill{
  display:inline-flex;align-items:center;
  padding:8px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:rgba(248,250,252,.84);
  font-weight:850;
}

/* Metrics (premium proof strip) */
.metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:18px;
}
@media (max-width: 980px){.metrics{grid-template-columns:1fr}}
.metric{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  border-radius:18px;
  padding:12px 14px;
}
.metric-k{color:#f8fafc;font-weight:950;letter-spacing:-.01em}
.metric-v{color:rgba(248,250,252,.78);font-weight:800;font-size:.95rem;margin-top:2px}

/* Light variants for white sections */
.trustline-light{margin-top:14px}
.trustline-light .trust-pill{
  border:1px solid rgba(15,23,42,.14);
  background:rgba(43,108,255,.10);
  color:rgba(10,18,32,.92);
}
.metrics-light .metric{
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  box-shadow:var(--shadow-1);
}
.metrics-light .metric-k{color:rgba(10,18,32,.92)}
.metrics-light .metric-v{color:rgba(51,65,85,.92)}

/* Proof board (premium light section) */
.proof-board{
  padding:0;
  background:
    radial-gradient(900px 520px at 12% 10%, rgba(43,108,255,.10), transparent 60%),
    radial-gradient(900px 520px at 92% 0%, rgba(255,107,53,.08), transparent 62%),
    linear-gradient(180deg, #ffffff, rgba(246,248,252,.92));
}
.proof-board.card{padding:0;overflow:hidden}
.proof-board .proof-top,
.proof-board .proof-grid,
.proof-board .proof-footer{padding:18px 18px 0}
.proof-board .proof-footer{padding-bottom:18px}
@media (hover: hover) and (pointer: fine){
  .proof-board.card:hover{transform:none;box-shadow:var(--shadow-3)}
}
.proof-top{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding-bottom:16px;
  margin-bottom:16px;
  border-bottom:1px solid rgba(15,23,42,.10);
}
.proof-kicker{
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:950;
  color:rgba(10,18,32,.62);
}
.proof-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
@media (max-width: 980px){.proof-grid{grid-template-columns:1fr}}
.proof-tile{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px 14px;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.86);
  box-shadow:var(--shadow-1);
}
.proof-num{
  width:44px;height:44px;border-radius:16px;
  display:grid;place-items:center;
  font-weight:950;
  color:#fff;
  background:linear-gradient(135deg, var(--navy-900), var(--blue-700));
  box-shadow:0 14px 36px rgba(8,26,51,.16);
  flex:0 0 auto;
}
.proof-title{font-weight:950;font-family:var(--font-head);letter-spacing:-.01em;color:rgba(10,18,32,.92)}
.proof-sub{margin-top:4px;line-height:1.55}
.proof-footer{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid rgba(15,23,42,.10);
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.proof-foot-copy{max-width:62ch}
@media (max-width: 720px){
  .proof-footer{flex-direction:column;align-items:stretch}
  .proof-footer .btn{width:100%;justify-content:center}
}

/* Surfaces */
.card{
  border:1px solid var(--line);
  border-radius:var(--radius-3);
  background:#fff;
  box-shadow:var(--shadow-2);
  padding:18px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
@media (hover: hover) and (pointer: fine){
  .card:hover{transform:translateY(-2px);box-shadow:var(--shadow-3)}
}
.hero-card{
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(10px) saturate(160%);
  box-shadow:0 24px 70px rgba(0,0,0,.22);
  padding:22px;
  position:relative;
  overflow:hidden;
}
.hero-card-head{font-weight:950;color:rgba(255,255,255,.92);margin-bottom:8px}
.hero-card-foot{margin-top:12px;font-size:.92rem}

.hero-card:before{
  content:"";
  position:absolute;inset:-1px;
  background:radial-gradient(520px 260px at 15% 10%, rgba(43,108,255,.18), transparent 60%),
             radial-gradient(520px 260px at 85% 0%, rgba(255,107,53,.14), transparent 60%);
  pointer-events:none;
}
.hero-card > *{position:relative}

.pack-card{
  border-radius:30px;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    0 28px 90px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.pack-card:after{
  content:"";
  position:absolute;inset:10px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.10);
  pointer-events:none;
}

.small-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.small-list a{color:rgba(10,18,32,.92);text-decoration:none;font-weight:900}
.small-list a:hover{text-decoration:underline}

.hero-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px}
.hero-list li{display:flex;gap:10px;align-items:flex-start;color:rgba(248,250,252,.86)}
.hero-list-ic{
  width:26px;height:26px;border-radius:10px;
  display:grid;place-items:center;
  background:rgba(125,211,252,.16);
  border:1px solid rgba(125,211,252,.22);
  color:#7dd3fc;font-weight:950;flex:0 0 auto;margin-top:2px;
}
.hero-list .doc-name{color:#f8fafc;font-weight:950}
.hero-card-cta{margin-top:16px}
.btn-block{width:100%}

.hero-list-dark li{color:rgba(10,18,32,.86)}
.hero-list-dark .doc-name{color:rgba(10,18,32,.92);font-weight:950}
.hero-list-dark .hero-list-ic{
  background:rgba(43,108,255,.10);
  border-color:rgba(43,108,255,.18);
  color:var(--blue-700);
}

/* Tables */
.table-wrap{overflow:auto;border-radius:18px;border:1px solid var(--line);background:#fff}
.table{width:100%;border-collapse:collapse;min-width:620px}
.table th,.table td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left}
.table thead th{background:rgba(43,108,255,.05);color:var(--navy-900);font-weight:950}
.row-highlight td{background:rgba(255,107,53,.04)}
.pill{
  display:inline-flex;align-items:center;
  padding:6px 10px;border-radius:999px;
  font-weight:950;border:1px solid rgba(255,107,53,.25);
  background:rgba(255,107,53,.10);color:#9a3412;
}

/* Tables: prevent layout from pushing wide on mobile */
@media (max-width: 720px){
  .table{min-width:0}
  .table{table-layout:fixed}
  .table th,.table td{
    padding:12px 12px;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
    font-size:.95rem;
    line-height:1.45;
  }
  .table th{font-size:.9rem}
  .table-wrap{border-radius:16px}
  .card{border-radius:20px}
}

/* Notice */
.notice{
  margin-top:14px;display:flex;gap:12px;align-items:flex-start;
  padding:14px 16px;border-radius:18px;
  border:1px solid var(--line);
  background:rgba(43,108,255,.05);
}
.notice.warn{background:rgba(255,107,53,.06);border-color:rgba(255,107,53,.16)}
.notice-icon{
  width:36px;height:36px;border-radius:14px;
  display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);
}
.notice-title{font-weight:950}

/* Grids / Steps */
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap2)}
@media (max-width: 980px){.grid-3{grid-template-columns:1fr}}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap2)}
@media (max-width: 900px){.grid-2{grid-template-columns:1fr}}
.stack{display:grid;gap:var(--gap2)}
.icon{font-size:1.35rem}
.card-accent{border-color:rgba(255,107,53,.25);background:linear-gradient(180deg, rgba(255,107,53,.05), #fff)}

.sig{
  width:44px;height:44px;border-radius:16px;
  display:grid;place-items:center;
  font-weight:950;
  letter-spacing:-.02em;
  color:#fff;
  background:linear-gradient(135deg, var(--navy-900), var(--blue-700));
  box-shadow:0 14px 36px rgba(8,26,51,.18);
  margin-bottom:10px;
}
.sig-accent{
  background:linear-gradient(135deg, rgba(255,107,53,.95), rgba(231,91,42,.95));
  box-shadow:0 18px 44px rgba(255,107,53,.22);
}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap2);margin-top:16px}
@media (max-width: 980px){.steps{grid-template-columns:1fr}}
.step{
  display:flex;gap:12px;align-items:flex-start;
  padding:16px;border:1px solid var(--line);
  border-radius:20px;background:#fff;box-shadow:var(--shadow-1);
}
.step-n{
  width:40px;height:40px;border-radius:16px;
  display:grid;place-items:center;
  background:rgba(43,108,255,.10);
  color:var(--navy-900);font-weight:950;
}

/* Process steps (2x2 colored cards) */
.steps-2x2{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--gap2);
}
@media (max-width: 980px){
  .steps-2x2{grid-template-columns:1fr}
}
.step-card{
  border-color:rgba(255,255,255,.12);
  background:
    radial-gradient(900px 520px at 18% 20%, rgba(43,108,255,.16), transparent 62%),
    radial-gradient(900px 520px at 82% 15%, rgba(255,107,53,.12), transparent 66%),
    linear-gradient(135deg, rgba(6,18,37,.92), rgba(10,32,64,.92));
  color:rgba(248,250,252,.88);
  backdrop-filter:blur(10px) saturate(160%);
  box-shadow:0 24px 70px rgba(0,0,0,.18);
}
.step-card-top{display:flex;align-items:flex-start;gap:12px}
.step-chip{
  width:38px;height:38px;border-radius:14px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.95);
  font-weight:950;
  flex:0 0 auto;
}
.step-card h3{
  margin:0;
  color:#f8fafc;
}
.step-card p{
  margin-top:10px;
  color:rgba(248,250,252,.78);
  line-height:1.55;
}

.process-cta{
  margin-top:16px;
  text-align:center;
}
.process-cta-text{
  font-weight:950;
  color:rgba(10,18,32,.78);
}
.process-cta-actions{margin-top:12px;display:flex;justify-content:center}

/* Form */
.form{display:grid;gap:14px}
.field label{display:inline-block;margin-bottom:6px;font-weight:900}
.field input,.field textarea{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.14);
  background:#fff;
  font:inherit;
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"]{
  border-color:rgba(185,28,28,.45);
  outline-color:rgba(185,28,28,.25);
}
.field-error{
  margin-top:6px;
  font-size:.92rem;
  line-height:1.35;
  color:#b91c1c;
  font-weight:850;
}
.field input:focus-visible,.field textarea:focus-visible{outline:3px solid rgba(43,108,255,.18)}
.field input::placeholder,.field textarea::placeholder{color:rgba(71,85,105,.70)}
.field input:focus,.field textarea:focus{
  outline:3px solid rgba(43,108,255,.18);
  border-color:rgba(43,108,255,.34);
}
.form.card{padding:22px}
.form.card .grid-2{margin-top:2px}
.form-actions .btn{min-height:48px}

.grid-2 .field{min-width:0}

/* Offer conversion panel */
.offer-split{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:var(--gap3);
  align-items:start;
}
@media (max-width: 980px){.offer-split{grid-template-columns:1fr}}
.form-panel{box-shadow:var(--shadow-3)}
.form-panel:hover{transform:none;box-shadow:var(--shadow-4)}
.offer-panel{
  position:sticky;
  top:96px;
  box-shadow:var(--shadow-3);
}
@media (max-width: 980px){.offer-panel{position:relative;top:auto}}
.offer-panel-title{font-weight:950;font-family:var(--font-head);letter-spacing:-.01em}
.offer-panel-sub{margin-top:6px}
.offer-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.badge-chip{
  display:inline-flex;align-items:center;
  padding:8px 10px;border-radius:999px;
  border:1px solid rgba(15,23,42,.12);
  background:rgba(43,108,255,.06);
  color:rgba(10,18,32,.86);
  font-weight:900;font-size:.92rem;
}

/* Micro interactions / reveals */
@media (prefers-reduced-motion: no-preference){
  .card, .btn, .nav-link{will-change:transform}
}
.check{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:.98rem}
.check input{
  margin-top:4px;
  width:20px;height:20px;
  flex:0 0 auto;
}
.form-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
@media (max-width: 520px){
  .form-actions{flex-direction:column}
  .form-actions .btn{width:100%}
}

/* Sticky CTA (mobile) */
.sticky{
  position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  display:flex;gap:10px;justify-content:center;
  z-index:60;pointer-events:none;
}
.sticky a{pointer-events:auto}
@media (min-width: 980px){.sticky{display:none}}
body.nav-open .sticky{display:none}

/* Footer */
.site-footer{padding:32px 0;border-top:1px solid var(--line);background:#fff}
.footer-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:var(--gap2)}
@media (max-width: 980px){.footer-grid{grid-template-columns:1fr}}
.footer-brand{font-weight:950}
.footer-head{font-weight:950;margin-bottom:8px}
.footer-links{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.footer-links a{color:rgba(10,18,32,.92);text-decoration:none;font-weight:900}
.footer-links a:hover{text-decoration:underline}
.footer-bottom{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);color:var(--muted)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
  .nav{transition:none}
  .nav-toggle[aria-expanded="true"] .hamburger span,
  .nav-toggle[aria-expanded="true"] .hamburger span::before,
  .nav-toggle[aria-expanded="true"] .hamburger span::after{transition:none}
}

/* Anchor scroll offsets (sticky header) */
#problem,#unterlagen,#loesung,#wechselprozess,#trust,#angebot,#abschluss-form{
  scroll-margin-top:calc(env(safe-area-inset-top, 0px) + 92px);
}