/* ==========================================================================
   Décor élégant du formulaire de demande de prêt — kreditantrag.html uniquement
   Palette marine + or du site (même langage que la page « Tresor »).
   100 % CSS : aucune balise, aucun script ni logique du formulaire n'est touché.
   Chargé APRÈS le <style> de la page : tout est préfixé par #kreditantrag-form pour l'emporter proprement.
   Les couleurs d'état (erreur, Schuldenquote bon/moyen/élevé, SMS choisi) ne sont jamais redéfinies ici.
   ========================================================================== */

#kreditantrag-form {
  --kd-navy: #0B2D59;
  --kd-navy-2: #123F78;
  --kd-ink: #061A36;
  --kd-gold: #C8A84B;
  --kd-gold-2: #E8C96A;
  --kd-gold-soft: #FBF6E6;
  --kd-line: #D5DDEA;
  --kd-field: #FBFCFE;

  position: relative;
  isolation: isolate;
  /* le fond d'origine est posé en style inline : !important est nécessaire pour le remplacer */
  background: linear-gradient(180deg, #EEF3FA 0%, #F7F3E8 52%, #EEF3FA 100%) !important;
}

/* Halos et fine trame en arrière-plan (purement décoratifs) */
#kreditantrag-form::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(640px 360px at 8% 4%, rgba(30, 111, 217, .13), transparent 70%),
    radial-gradient(560px 340px at 96% 12%, rgba(200, 168, 75, .17), transparent 70%),
    radial-gradient(700px 420px at 50% 100%, rgba(11, 45, 89, .07), transparent 70%),
    linear-gradient(rgba(11, 45, 89, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 45, 89, .035) 1px, transparent 1px);
  background-size: auto, auto, auto, 44px 44px, 44px 44px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
}

/* ---------- En-tête de section : filets dorés + ornement ---------- */
#kreditantrag-form .section-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-3);
  letter-spacing: .22em; color: #A98A2E;
}
#kreditantrag-form .section-eyebrow::before,
#kreditantrag-form .section-eyebrow::after {
  content: ""; width: 38px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--kd-gold));
}
#kreditantrag-form .section-eyebrow::after { transform: scaleX(-1); }
#kreditantrag-form .section-header { text-align: center; }
#kreditantrag-form .section-title { letter-spacing: -.015em; }

#kreditantrag-form .divider {
  position: relative; width: min(220px, 60%); height: 1px; border-radius: 0; overflow: visible;
  background: linear-gradient(90deg, transparent, var(--kd-gold) 25%, var(--kd-gold) 75%, transparent);
}
#kreditantrag-form .divider::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 9px; height: 9px; transform: translate(-50%, -50%) rotate(45deg);
  background: linear-gradient(135deg, var(--kd-gold-2), var(--kd-gold));
  box-shadow: 0 0 0 4px #EEF3FA;
}

/* ---------- La carte du formulaire ---------- */
#kreditantrag-form .loan-form {
  position: relative;
  background: linear-gradient(180deg, #FFFFFF 0%, #FCFDFF 100%);
  border: 1px solid rgba(200, 168, 75, .30);
  border-radius: var(--radius-2xl);
  padding: clamp(1.25rem, 4vw, 3rem);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 28px 64px -24px rgba(11, 45, 89, .34),
    0 10px 28px -14px rgba(11, 45, 89, .18);
}
/* liseré marine-or en haut de la carte */
#kreditantrag-form .loan-form::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 5px; pointer-events: none;
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  background: linear-gradient(90deg, var(--kd-navy) 0%, var(--kd-navy-2) 22%, var(--kd-gold) 50%, var(--kd-navy-2) 78%, var(--kd-navy) 100%);
}
/* lueur dorée discrète dans l'angle */
#kreditantrag-form .loan-form::after {
  content: ""; position: absolute; top: 0; right: 0; width: 200px; height: 200px; pointer-events: none;
  border-top-right-radius: var(--radius-2xl);
  background: radial-gradient(circle at 100% 0%, rgba(200, 168, 75, .10), transparent 62%);
}
#kreditantrag-form .loan-form > * { position: relative; z-index: 1; }

/* ---------- Indicateur d'étapes ---------- */
#kreditantrag-form .step-indicators {
  margin-bottom: var(--space-12); padding-bottom: var(--space-6);
  border-bottom: 1px solid rgba(11, 45, 89, .08);
}
#kreditantrag-form .step-indicator__circle {
  width: 46px; height: 46px; flex-shrink: 0;
  font-family: var(--font-heading); font-size: var(--text-base);
  background: #FFFFFF; color: var(--color-text-muted);
  border: 1.5px solid rgba(11, 45, 89, .18);
  box-shadow: 0 0 0 5px #FFFFFF, 0 0 0 6px rgba(11, 45, 89, .07);
  transition: all var(--transition-normal);
}
#kreditantrag-form .step-indicator.active .step-indicator__circle {
  background: linear-gradient(145deg, var(--kd-navy-2), var(--kd-navy));
  border-color: var(--kd-gold); color: #FFFFFF;
  box-shadow: 0 0 0 5px #FFFFFF, 0 0 0 7px rgba(200, 168, 75, .35), 0 10px 22px -6px rgba(11, 45, 89, .55);
}
#kreditantrag-form .step-indicator.completed .step-indicator__circle {
  background: linear-gradient(145deg, var(--kd-gold-2), var(--kd-gold));
  border-color: var(--kd-gold); color: var(--kd-ink);
  box-shadow: 0 0 0 5px #FFFFFF, 0 0 0 6px rgba(200, 168, 75, .30), 0 8px 18px -6px rgba(200, 168, 75, .65);
}
#kreditantrag-form .step-indicator__label {
  font-size: .72rem; font-weight: var(--weight-semi); letter-spacing: .09em; text-transform: uppercase;
}
#kreditantrag-form .step-indicator.active .step-indicator__label { color: var(--kd-navy); font-weight: var(--weight-bold); }
#kreditantrag-form .step-indicator.completed .step-indicator__label { color: #8A6D1F; }
#kreditantrag-form .step-connector {
  height: 2px; border-radius: 2px; background: rgba(11, 45, 89, .10);
}
#kreditantrag-form .step-connector.done {
  background: linear-gradient(90deg, var(--kd-gold), var(--kd-gold-2));
}

/* ---------- Titres de section ---------- */
#kreditantrag-form .loan-form__section { border-bottom-color: rgba(11, 45, 89, .08); }
#kreditantrag-form .loan-form__section-title {
  position: relative; font-size: var(--text-2xl); letter-spacing: -.01em;
  padding-bottom: var(--space-4); margin-bottom: var(--space-8);
}
#kreditantrag-form .loan-form__section-title::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(200, 168, 75, .85), rgba(200, 168, 75, .22) 55%, transparent);
}
#kreditantrag-form .loan-form__section-title .step-badge {
  width: 38px; height: 38px; font-family: var(--font-heading);
  background: linear-gradient(145deg, var(--kd-navy-2), var(--kd-navy));
  color: var(--kd-gold-2); border: 1.5px solid var(--kd-gold);
  box-shadow: 0 6px 14px -4px rgba(11, 45, 89, .45), inset 0 1px 0 rgba(255, 255, 255, .14);
}

/* ---------- Champs ---------- */
#kreditantrag-form .form-label {
  font-size: .8125rem; font-weight: var(--weight-semi); letter-spacing: .01em; color: var(--kd-navy);
}
#kreditantrag-form .form-label .required,
#kreditantrag-form .form-label span.required { color: #B8902F; }

#kreditantrag-form .form-control {
  background-color: var(--kd-field);
  border: 1.5px solid var(--kd-line);
  border-radius: 12px;
  padding: .95rem 1.1rem;
  box-shadow: inset 0 1px 2px rgba(11, 45, 89, .05);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}
#kreditantrag-form .form-control:hover { border-color: #B6C3D8; }
#kreditantrag-form .form-control:focus {
  background-color: #FFFFFF; border-color: var(--kd-navy-2);
  box-shadow: 0 0 0 4px rgba(200, 168, 75, .24), 0 8px 20px -10px rgba(11, 45, 89, .35);
}
#kreditantrag-form .form-control.error,
#kreditantrag-form .form-control.error:hover { border-color: var(--color-error); }
#kreditantrag-form .form-control.error,
#kreditantrag-form .form-control.error:focus { box-shadow: 0 0 0 4px rgba(176, 42, 42, .13); }
#kreditantrag-form .form-control::placeholder { color: #9AA3BD; }

/* ---------- Choix : Anrede et cartes à choisir ---------- */
#kreditantrag-form .anrede-option span,
#kreditantrag-form .form-radio-option {
  background: var(--kd-field); border: 1.5px solid var(--kd-line); border-radius: 12px;
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
#kreditantrag-form .anrede-option span { position: relative; padding: .85rem 1.25rem; font-weight: var(--weight-medium); }
#kreditantrag-form .form-radio-option { position: relative; }
#kreditantrag-form .anrede-option:hover span,
#kreditantrag-form .form-radio-option:hover {
  border-color: var(--kd-gold); background: var(--kd-gold-soft); transform: translateY(-1px);
}
#kreditantrag-form .anrede-option input:checked + span,
#kreditantrag-form .form-radio-option.selected {
  border-color: var(--kd-gold);
  background: linear-gradient(180deg, #FFFEFA, var(--kd-gold-soft));
  color: var(--kd-navy); font-weight: var(--weight-semi);
  box-shadow: 0 10px 22px -14px rgba(176, 140, 40, .9), inset 0 0 0 1px rgba(200, 168, 75, .35);
}
/* pastille « ✓ » sur le choix retenu */
#kreditantrag-form .anrede-option input:checked + span::after,
#kreditantrag-form .form-radio-option.selected::after {
  content: "\2713"; position: absolute; top: 7px; right: 8px;
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; line-height: 1;
  background: linear-gradient(145deg, var(--kd-gold-2), var(--kd-gold)); color: var(--kd-ink);
}
#kreditantrag-form .anrede-option input:focus-visible + span { outline: 3px solid rgba(200, 168, 75, .55); outline-offset: 2px; }

/* ---------- Cases de consentement ---------- */
#kreditantrag-form .consent-check {
  padding: var(--space-4); border: 1px solid rgba(11, 45, 89, .09); border-radius: 12px;
  background: var(--kd-field);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
#kreditantrag-form .consent-check:hover { border-color: rgba(200, 168, 75, .55); }
#kreditantrag-form .consent-check:has(input:checked) {
  border-color: rgba(200, 168, 75, .6); background: #FFFDF6;
}
#kreditantrag-form .consent-check input[type="checkbox"] { accent-color: var(--kd-navy); }

/* ---------- Cartes d'information (récapitulatif, taux d'endettement, SMS) : seules la forme et l'ombre changent ---------- */
#kreditantrag-form .summary-box {
  background: linear-gradient(180deg, #F8FBFF, #EEF3FA);
  border: 1px solid rgba(11, 45, 89, .10); border-left: 4px solid var(--kd-gold);
  border-radius: 16px; box-shadow: var(--shadow-sm);
}
#kreditantrag-form .schuldenquote-card,
#kreditantrag-form .sms-option { border-radius: 18px; box-shadow: var(--shadow-sm); }
#kreditantrag-form .schuldenquote-card__label { letter-spacing: .1em; }
#kreditantrag-form .alert { border-radius: 14px; }

/* ---------- Boutons du formulaire ---------- */
#kreditantrag-form .loan-form .btn { position: relative; overflow: hidden; border-radius: 14px; letter-spacing: .06em; }
#kreditantrag-form .loan-form .btn-primary {
  background: linear-gradient(135deg, var(--kd-navy-2), var(--kd-navy));
  border-color: var(--kd-navy);
  box-shadow: 0 14px 28px -12px rgba(11, 45, 89, .65), inset 0 1px 0 rgba(255, 255, 255, .16);
}
#kreditantrag-form .loan-form .btn-primary:hover {
  background: linear-gradient(135deg, #1A4A8A, var(--kd-navy-2));
  border-color: var(--kd-gold);
  box-shadow: 0 18px 34px -12px rgba(11, 45, 89, .7), 0 0 0 3px rgba(200, 168, 75, .30), inset 0 1px 0 rgba(255, 255, 255, .2);
}
#kreditantrag-form .loan-form .btn-accent {
  background: linear-gradient(135deg, var(--kd-gold-2), var(--kd-gold));
  border-color: var(--kd-gold); color: var(--kd-ink); font-weight: var(--weight-bold);
  box-shadow: 0 14px 28px -12px rgba(176, 140, 40, .8), inset 0 1px 0 rgba(255, 255, 255, .45);
}
#kreditantrag-form .loan-form .btn-accent:hover {
  background: linear-gradient(135deg, #F2D77E, var(--kd-gold-2));
  border-color: var(--kd-gold-2);
  box-shadow: 0 18px 34px -12px rgba(176, 140, 40, .9), 0 0 0 3px rgba(200, 168, 75, .30), inset 0 1px 0 rgba(255, 255, 255, .5);
}
#kreditantrag-form .loan-form .btn-outline-primary {
  border-color: rgba(11, 45, 89, .35); background: transparent;
}
#kreditantrag-form .loan-form .btn-outline-primary:hover { border-color: var(--kd-navy); }
/* reflet qui traverse le bouton au survol */
#kreditantrag-form .loan-form .btn-primary::after,
#kreditantrag-form .loan-form .btn-accent::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .34), transparent);
  transform: skewX(-20deg); transition: left .75s ease;
}
#kreditantrag-form .loan-form .btn-primary:hover::after,
#kreditantrag-form .loan-form .btn-accent:hover::after { left: 130%; }
#kreditantrag-form .loan-form .btn:focus-visible { outline: 3px solid rgba(200, 168, 75, .65); outline-offset: 3px; }

/* ---------- Apparition douce de chaque étape ---------- */
@keyframes kdPanelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#kreditantrag-form .form-step-panel { animation: kdPanelIn .5s ease both; }

/* ---------- Message de réussite ---------- */
#kreditantrag-form .success-icon {
  background: radial-gradient(circle at 30% 25%, #FFFFFF, #FBF1CC);
  color: var(--color-success); border: 2px solid var(--kd-gold);
  box-shadow: 0 0 0 9px rgba(200, 168, 75, .14), 0 16px 32px -12px rgba(176, 140, 40, .75);
}
#kreditantrag-form .ref-number {
  display: inline-block; padding: .2rem .8rem; border-radius: 8px;
  font-family: var(--font-mono); letter-spacing: .08em;
  background: #FFF8E1; border: 1px dashed var(--kd-gold);
}

/* ---------- Bandeau de confiance sous le titre de page ---------- */
.trust-bar {
  background: linear-gradient(180deg, #FFFFFF, #F3F7FD);
  border-top: 1px solid rgba(200, 168, 75, .55); border-bottom: 1px solid rgba(11, 45, 89, .08);
}
.trust-bar .trust-item__icon {
  width: 42px; height: 42px; display: grid; place-items: center; font-size: 1.15rem;
  border-radius: 50%; background: #FFFFFF; border: 1px solid rgba(200, 168, 75, .55);
  box-shadow: 0 8px 16px -8px rgba(176, 140, 40, .6);
}
.trust-bar .trust-item__text { color: var(--kd-navy, #0B2D59); font-weight: var(--weight-semi); letter-spacing: .01em; }

/* ---------- Bandeau titre de page : filet doré en bas ---------- */
.hero-mini--photo { isolation: isolate; }
.hero-mini--photo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent, #C8A84B 20%, #E8C96A 50%, #C8A84B 80%, transparent);
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  #kreditantrag-form .loan-form::after { width: 160px; height: 160px; }
  #kreditantrag-form .step-indicators { margin-bottom: var(--space-8); }
  #kreditantrag-form .step-indicator__circle { width: 40px; height: 40px; font-size: var(--text-sm); }
  #kreditantrag-form .loan-form__section-title { font-size: var(--text-lg); margin-bottom: var(--space-6); }
  #kreditantrag-form .loan-form__section-title .step-badge { width: 32px; height: 32px; }
  #kreditantrag-form .section-eyebrow::before,
  #kreditantrag-form .section-eyebrow::after { width: 22px; }
  #kreditantrag-form::before { background-size: auto, auto, auto, 32px 32px, 32px 32px; }
}

/* ---------- Accessibilité : pas d'animation si l'utilisateur la refuse ---------- */
@media (prefers-reduced-motion: reduce) {
  #kreditantrag-form .form-step-panel { animation: none; }
  #kreditantrag-form .loan-form .btn-primary::after,
  #kreditantrag-form .loan-form .btn-accent::after { transition: none; }
  #kreditantrag-form .anrede-option:hover span,
  #kreditantrag-form .form-radio-option:hover { transform: none; }
}