/* =========================================================
   MODERN / SERIÖS (AT-tauglich) – NUR DESIGN
   - Keine IDs/JS-Hooks geändert
   - Reine CSS-Overrides für vorhandene Klassen
   ========================================================= */

:root{
  /* Base */
  --am-bg: #f6f7fb;
  --am-surface: #ffffff;
  --am-text: #0f172a;
  --am-muted: #64748b;
  --am-line: rgba(15,23,42,.10);

  /* Brand */
  --am-accent: #0ea5a4;      /* teal */
  --am-accent-2: #2563eb;    /* blue (links) */
  --am-accent-d: #0b7e7d;

  /* Radius / Shadow */
  --am-r-card: 18px;
  --am-r-pill: 12px;
  --am-shadow: 0 18px 48px rgba(15,23,42,.10);
  --am-shadow-soft: 0 10px 28px rgba(15,23,42,.08);

  --am-header-h: 72px;
}

/* =========================================================
   GLOBAL
   ========================================================= */

html, body{ height: 100%; }
body{
  background:
    radial-gradient(1200px 520px at 50% 0%, rgba(14,165,164,.10), rgba(14,165,164,0) 55%),
    radial-gradient(900px 420px at 90% 10%, rgba(37,99,235,.10), rgba(37,99,235,0) 55%),
    var(--am-bg) !important;
  color: var(--am-text) !important;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* Kein künstlicher Spacer nötig: sticky nimmt Layout-Platz ein */
.ab-page,
.ab-hero,
main{
  padding-top: 0 !important;
}

a{ color: var(--am-accent-2); }

/* =========================================================
   HEADER
   ========================================================= */

.ab-navbar{
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--am-line) !important;
}

.ab-navbar .container{ padding-top: 12px !important; padding-bottom: 12px !important; }

.ab-navbar .navbar-brand{
  color: var(--am-text) !important;
  font-weight: 800;
  letter-spacing: .2px;
}

.ab-navbar .nav-link{
  color: rgba(15,23,42,.78) !important;
  border-radius: 10px;
  padding: .55rem .65rem !important;
}

.ab-navbar .nav-link:hover{
  color: var(--am-text) !important;
  background: rgba(15,23,42,.04);
}

.ab-navbar .nav-link.active{
  color: var(--am-text) !important;
  background: rgba(14,165,164,.10);
}

/* Logo */
.ab-logo{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: block;
  object-fit: contain;
  box-shadow: 0 10px 22px rgba(15,23,42,.10);
}
.ab-logo--footer{
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

/* Branding Badge (Fallback) */
.ab-brand-badge{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-block;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, rgba(14,165,164,.25), rgba(37,99,235,.18));
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 22px rgba(15,23,42,.08);
}

/* Header Buttons */
.btn,
.ab-btn-primary,
.ab-btn-accent{
  border-radius: 12px !important;
  box-shadow: none !important;
  font-weight: 650;
  padding: .65rem 1rem;
}

.ab-btn-outline{
  background: transparent !important;
  border: 1px solid var(--am-line) !important;
  color: var(--am-text) !important;
}

.ab-btn-outline:hover{
  background: rgba(15,23,42,.04) !important;
}

.ab-btn-accent,
.ab-btn-primary{
  background: var(--am-accent) !important;
  border: 1px solid rgba(255,255,255,.0) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(14,165,164,.22) !important;
}

.ab-btn-accent:hover,
.ab-btn-primary:hover{
  background: var(--am-accent-d) !important;
}

/* Trustbar */
.ab-trustbar{
  border-bottom: 1px solid var(--am-line);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
}

.ab-trustbar .container{
  font-size: 14px;
  color: rgba(15,23,42,.72);
}

.ab-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--am-accent);
  box-shadow: 0 0 0 6px rgba(14,165,164,.12);
}

.ab-sep{ color: rgba(15,23,42,.35); }

/* =========================================================
   CARDS / LAYOUT
   ========================================================= */

.ab-float-card{ margin-top: 26px !important; }

.ab-card{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: var(--am-r-card) !important;
  box-shadow: var(--am-shadow);
}

/* Bootstrap border boxes innerhalb der Card (Slider-Boxen etc.) */
.ab-card .border{
  border-color: rgba(15,23,42,.10) !important;
  border-radius: 14px !important;
}

/* Kicker-Text */
.ab-kicker{
  color: var(--am-muted);
}

/* =========================================================
   STEPS (Pills)
   ========================================================= */

.ab-steps{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.ab-step{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  color: rgba(15,23,42,.62) !important;
  padding: .55rem .95rem;
  border-radius: 999px !important;
  font-size: .92rem;
  position: relative;
  user-select: none;
  box-shadow: 0 8px 18px rgba(15,23,42,.06);
}

.ab-step-num{
  width: 26px;
  height: 26px;
  line-height: 24px;
  border-radius: 999px !important;
  background: rgba(15,23,42,.08) !important;
  color: rgba(15,23,42,.80) !important;
  font-weight: 800;
  display: grid;
  place-items: center;
}

.ab-step.active{
  background: rgba(14,165,164,.10) !important;
  border-color: rgba(14,165,164,.45) !important;
  color: var(--am-text) !important;
  font-weight: 800;
  box-shadow: 0 16px 32px rgba(14,165,164,.16);
}

.ab-step.active .ab-step-num{
  background: var(--am-accent) !important;
  color: #fff !important;
  box-shadow: 0 10px 18px rgba(14,165,164,.25);
}

.ab-step:not(.active):hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(15,23,42,.08);
}

/* =========================================================
   SHAPE BUTTONS
   ========================================================= */

.ab-shape-btn{
  background: rgba(255,255,255,.90) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  color: var(--am-text) !important;
  padding: .95rem 1rem;
  border-radius: 14px !important;
  font-weight: 650;
  box-shadow: var(--am-shadow-soft);
}

.ab-shape-btn:hover{
  transform: translateY(-1px);
}

.ab-shape-btn.active{
  background: rgba(14,165,164,.12) !important;
  border-color: rgba(14,165,164,.40) !important;
}

/* =========================================================
   INPUTS / SLIDER
   ========================================================= */

.form-control,
.form-select{
  border-radius: 12px !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  padding: .6rem .75rem;
  color: var(--am-text) !important;
}

.form-control:focus,
.form-select:focus{
  border-color: rgba(14,165,164,.55) !important;
  box-shadow: 0 0 0 .25rem rgba(14,165,164,.15) !important;
}

.form-range::-webkit-slider-runnable-track{ height: 6px; border-radius: 999px; }
.form-range::-webkit-slider-thumb{ background: var(--am-accent) !important; }
.form-range::-moz-range-thumb{ background: var(--am-accent) !important; }

/* =========================================================
   SUMMARY / PRICE BOX
   ========================================================= */

.ab-summary,
.ab-price-box{
  background: rgba(15,23,42,.03) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 14px !important;
}

/* =========================================================
   PRIMARY BUTTON
   ========================================================= */

.ab-btn-primary{
  border-radius: 14px !important;
  padding: 1rem 1.1rem;
  font-size: 1.05rem;
}

/* =========================================================
   FOOTER (dark / trust)
   ========================================================= */

.ab-footer{
  background: #0b1220 !important;
  color: rgba(255,255,255,.86) !important;
  border-top: 0 !important;
}

.ab-footer a{
  color: rgba(255,255,255,.78) !important;
  text-decoration: none;
}

.ab-footer a:hover{ color: #fff !important; }

.ab-footer .opacity-75{ color: rgba(255,255,255,.72) !important; }

.ab-badges{ display:flex; gap:8px; flex-wrap:wrap; }
.ab-badge{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 12px;
  color: rgba(255,255,255,.82);
}

.ab-footer-legal{
  border-top: 1px solid rgba(255,255,255,.10);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 992px){
  .ab-trustbar .container{ justify-content:flex-start !important; }
}

@media (max-width: 768px){
  /* 4 Schritt-Kacheln */
  .ab-steps{
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    width: 100%;
  }

  .ab-steps .ab-step{
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
  }

  /* STEP 3: Extra-Karten sauber umbrechen */
  #step3Form label.d-flex.gap-3.border.rounded-0.p-3.w-100.align-items-start{
    gap: 12px !important;
    align-items: flex-start !important;
  }

  #step3Form label.d-flex.gap-3.border.rounded-0.p-3.w-100.align-items-start .flex-grow-1{
    min-width: 0 !important;
    width: 100% !important;
  }

  #step3Form label.d-flex.gap-3.border.rounded-0.p-3.w-100.align-items-start .flex-grow-1 > .d-flex.justify-content-between.align-items-start.gap-2{
    align-items: flex-start !important;
    gap: 10px !important;
  }

  #step3Form label.d-flex.gap-3.border.rounded-0.p-3.w-100.align-items-start .flex-grow-1 > .d-flex.justify-content-between.align-items-start.gap-2 > .fw-bold{
    min-width: 0 !important;
    flex: 1 1 auto !important;
    max-width: calc(100% - 76px) !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    line-height: 1.25 !important;
  }

  #step3Form label.d-flex.gap-3.border.rounded-0.p-3.w-100.align-items-start .flex-grow-1 > .d-flex.justify-content-between.align-items-start.gap-2 > .fw-black{
    flex: 0 0 66px !important;
    width: 66px !important;
    min-width: 66px !important;
    text-align: right !important;
    white-space: normal !important;
    line-height: 1.15 !important;
  }
}