@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --yellow:#ffcc00;
  --blue:#0a3478;
  --navy:#081d40;
  --bg:#f3f5f8;
  --white:#fdfdfe;
  --soft:#e7ebf2;
  --text:#0a3478;
  --muted:#778399;
  --shadow:0 10px 30px rgba(10,52,120,.08);
  --radius:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:#172846;font-family:Inter,Arial,sans-serif;line-height:1.55}
a{text-decoration:none;color:inherit}
.container{width:min(1180px,calc(100% - 40px));margin:auto}
.center{text-align:center}
.narrow{max-width:900px}
.section{padding:85px 0}
.topbar{background:#eef1f5;font-size:14px;color:#506078}
.topbar-inner{height:34px;display:flex;align-items:center;justify-content:space-between}
.topbar nav{display:flex;gap:25px}
.main-header{background:var(--yellow);position:relative;z-index:10}
.nav-inner{min-height:68px;display:flex;align-items:center;gap:32px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;color:var(--blue);letter-spacing:-.4px;white-space:nowrap}
.brand-mark{width:25px;height:25px;border-radius:6px;background:var(--blue);color:var(--yellow);display:grid;place-items:center;font-weight:800}
.desktop-nav{display:flex;gap:28px;margin-left:20px;font-size:18px;font-weight:600}
.desktop-nav a:hover{text-decoration:underline}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.search{height:38px;background:#fff;border-radius:22px;padding:0 13px;display:flex;align-items:center;gap:7px;box-shadow:0 2px 8px #00000010}
.search input{border:0;outline:0;width:100px;font:inherit;font-size:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;border:0;border-radius:10px;padding:14px 22px;font-weight:700;cursor:pointer;transition:.2s transform,.2s box-shadow}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #0002}
.btn-small{padding:11px 16px;font-size:16px}
.btn-dark{background:var(--blue);color:#fff}
.btn-yellow{background:var(--yellow);color:#0c2547}
.menu-toggle{display:none;background:none;border:0;font-size:27px}
.mobile-nav{display:none;padding:10px 20px 18px;background:var(--yellow)}
.mobile-nav a{display:block;padding:10px 0;border-top:1px solid #0001;font-weight:600}
.hero{background:var(--blue);color:#fff;overflow:hidden;position:relative}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.30;z-index:0}
.hero-bg-overlay{position:absolute;inset:0;background:linear-gradient(120deg,rgba(8,29,64,.96) 0%,rgba(10,52,120,.88) 55%,rgba(10,52,120,.55) 100%);z-index:0}
.hero-grid{min-height:450px;display:grid;grid-template-columns:1.35fr .65fr;align-items:center;padding-top:45px;padding-bottom:50px;position:relative;z-index:1}
.hero-copy{max-width:720px}
.eyebrow{font-size:15px;letter-spacing:.08em;font-weight:800;color:#27a79a;margin-bottom:13px}
.eyebrow.light{color:var(--yellow);letter-spacing:0;font-size:15px}
.hero h1{font-size:64px;line-height:1.04;letter-spacing:-1.8px;margin:15px 0 20px}
.hero h1 span{color:var(--yellow)}
.hero p{max-width:640px;color:#e7edf8;font-size:19px}
.offer-card{margin-top:20px;background:var(--yellow);color:#0d2447;border-radius:12px;padding:13px 17px;max-width:620px}
.offer-card strong{font-size:17px}
.offer-card p{color:#0d2447;margin:4px 0;font-size:17px;font-weight:600}
.offer-card a{display:block;background:#081d40;color:#fff;border-radius:20px;padding:6px 12px;font-size:15px;font-weight:700}
.offer-card small{font-size:12px;display:block;margin-top:5px}
.hero-rate{display:flex;justify-content:center;position:relative;z-index:1}
.rate-circle{width:125px;height:125px;border:1px solid #a9c3e5;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:#0c2c5e}
.rate-circle span{font-size:13px}.rate-circle strong{color:var(--yellow);font-size:27px}.rate-circle small{font-size:13px;color:#dce7f7}
.ticker{background:#061735;color:var(--yellow);font-size:13px;font-weight:700;position:relative;z-index:1}
.ticker-inner{height:28px;display:flex;align-items:center;justify-content:space-between;gap:25px;overflow:hidden}
.intro{background:var(--white)}
.intro h2,.section-heading h2,.partners h2{font-size:38px;line-height:1.15;color:#102744;letter-spacing:-1px;margin:0 0 10px}
.intro p,.section-heading p,.partners p{font-size:18px;color:#7a8799}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:34px}
.service-card{background:#fff;border:1px solid #edf0f4;border-radius:15px;padding:23px 18px;min-height:180px;box-shadow:0 4px 18px #10274409;transition:.2s}
.service-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.service-icon{width:38px;height:38px;border:1px solid #d8dee8;border-radius:50%;display:grid;place-items:center;margin:0 auto 15px;color:var(--blue);font-weight:800}
.service-card{text-align:center}
.service-card h3{font-size:17px;margin:0 0 7px;color:#142b4b}
.service-card p{font-size:15px;color:#8993a1;margin:0 0 10px}
.service-link{font-size:14px;color:var(--blue);font-weight:700}
.calculator-section{background:#f7f9fb}
.section-heading{max-width:800px;margin:0 auto 40px}
.calculator{display:grid;grid-template-columns:1.08fr .72fr;background:#fff;border-radius:25px;overflow:hidden;box-shadow:0 12px 35px #1027440d}
.calc-left{padding:40px}
.field-block+ .field-block{margin-top:42px}
.field-head{display:flex;justify-content:space-between;align-items:center}
.field-head label{font-size:16px;color:#9ca6b5;font-weight:800}
.big-value{font-size:46px;color:#102744;font-weight:800;letter-spacing:-1px;margin-top:4px}
.big-value em{font-style:normal;font-size:26px;color:#9aa5b6}
.field-icon{width:50px;height:50px;border-radius:15px;background:#edf7f6;color:#25a599;display:grid;place-items:center;font-weight:800}
input[type=range]{appearance:none;width:100%;height:8px;border-radius:10px;background:#e0e4e9;margin-top:25px;outline:none}
input[type=range]::-webkit-slider-thumb{appearance:none;width:20px;height:20px;border-radius:50%;background:#2ba59a;border:3px solid #2ba59a;box-shadow:0 0 0 3px #fff}
.field-block:nth-child(2) input[type=range]::-webkit-slider-thumb{background:#0c2446;border-color:#0c2446}
.range-labels{display:flex;justify-content:space-between;color:#9ba5b5;font-size:14px;margin-top:12px}
.calc-right{background:linear-gradient(150deg,#0a2345,#071a37);color:#fff;padding:40px}
.calc-label{font-size:16px;color:#27a79a;font-weight:800}
.monthly{font-size:66px;font-weight:800;letter-spacing:-2px;margin:3px 0}
.interest{font-size:17px;color:#dce4ef}.interest strong{color:#fff}
.calc-divider{height:1px;background:#fff2;margin:45px 0 22px}
.total-row{display:flex;align-items:center;justify-content:space-between;gap:20px}
.total-row span{font-weight:600;font-size:18px}.total-row strong{font-size:22px;white-space:nowrap}
.calc-btn{width:100%;margin-top:35px;background:#ffcc00}
.unbinding{display:block;text-align:center;color:#8595ab;font-size:14px;margin-top:15px}
.stats{background:#fff;padding-top:55px;padding-bottom:55px}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat-card{text-align:center;background:#fff;border:1px solid #e9edf2;border-radius:12px;padding:18px}
.stat-card strong{font-size:32px;color:#0b2b55}.stat-card strong span{font-size:18px;color:#27a79a}
.stat-card small{display:block;color:#7d899b;font-size:14px;font-weight:700;margin-top:5px}
.advisor{position:relative;padding:0;min-height:350px;background:#263a4f}
.advisor-image{position:absolute;inset:0}
.image-placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;background:linear-gradient(100deg,#203448,#82909b,#293b4b);background-size:cover;background-position:center;font-weight:800;font-size:27px}
.image-placeholder small{font-size:16px;font-weight:500;margin-top:6px}
.advisor-overlay{position:relative;min-height:350px;display:flex;align-items:center;justify-content:flex-end}
.advisor-content{text-align:center;color:#fff;max-width:500px}
.advisor-content h2{font-size:27px;line-height:1.2}
.info{background:#fff}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:center}
.info-image{height:280px;border-radius:14px;overflow:hidden}
.document-placeholder{height:100%;display:grid;place-items:center;text-align:center;background:linear-gradient(135deg,#202d3c,#88919a);background-size:cover;background-position:center;color:#fff;font-size:27px;font-weight:800}
.faq-item{width:100%;border:1px solid #dce2e9;background:#fff;padding:17px 14px;display:flex;justify-content:space-between;cursor:pointer;color:#243a58;font-weight:600;font-size:17px;text-align:left}
.faq-item+ .faq-item{border-top:0}
.faq-answer{display:none;padding:15px;background:#f8fafc;color:#6e7b8e;font-size:16px;border:1px solid #e1e6ed;border-top:0}
.faq-answer.open{display:block}
.partners{background:#fff}
.partner-row{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:45px;flex-wrap:wrap;color:#315b9e;font-size:20px;font-weight:800}
.footer{background:#0a3478;color:#fff;padding-top:56px}
.footer-top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px}
.footer h4{font-size:20px;margin:0 0 16px;color:#fff;text-transform:uppercase;letter-spacing:.6px;font-weight:800}
.footer a{display:block;color:#c7d3e6;font-size:17px;margin:10px 0;font-weight:500}
.footer a:hover{color:#fdca00}
.footer a:hover{color:#fff}
.footer-brand p{font-size:17px;color:#c7d3e6;max-width:260px;line-height:1.6}
.brand-light{color:#fff}
.brand-light .brand-mark{background:#fff;color:#0a3478}
.newsletter{border-top:1px solid #ffffff2a;border-bottom:1px solid #ffffff2a;margin-top:44px;padding:26px 0;display:flex;justify-content:space-between;align-items:center;gap:20px}
.newsletter strong{display:block;font-size:17px}.newsletter small{color:#c7d3e6;font-size:15px}
.newsletter-form{display:flex}.newsletter-form input{width:260px;background:#082a63;border:1px solid #2f57a0;color:#fff;padding:13px;font-size:15px;border-radius:6px 0 0 6px;outline:none}.newsletter-form button{border:0;background:#fdca00;color:#0a3478;font-weight:800;font-size:15px;border-radius:0 6px 6px 0;padding:0 18px;cursor:pointer}
.legal-wrap{background:#fdca00}
.legal{padding:22px 0;color:#0a3478;font-size:14px;margin-top:0}
.legal p{max-width:850px;font-weight:600}
.legal div{font-weight:800}

@media(max-width:1000px){
  .desktop-nav{display:none}.nav-actions{display:none}.menu-toggle{display:block;margin-left:auto}
  .mobile-nav.active{display:block}
  .hero-grid{grid-template-columns:1fr}.hero-rate{display:none}
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .calculator{grid-template-columns:1fr}.calc-right{padding:35px}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .footer-top{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:650px){
  .container{width:min(100% - 24px,1180px)}
  .topbar{display:none}
  .nav-inner{min-height:62px}
  .brand{font-size:17px}
  .hero-grid{padding-top:35px;padding-bottom:35px}
  .hero h1{font-size:44px}
  .hero p{font-size:17px}
  .ticker-inner{justify-content:flex-start;white-space:nowrap}
  .ticker-inner span:nth-child(n+3){display:none}
  .section{padding:55px 0}
  .intro h2,.section-heading h2,.partners h2{font-size:30px}
  .service-grid{grid-template-columns:1fr}
  .calculator{border-radius:18px}
  .calc-left,.calc-right{padding:25px 20px}
  .big-value{font-size:35px}.big-value em{font-size:21px}
  .monthly{font-size:48px}
  .total-row{display:block}.total-row strong{display:block;margin-top:5px}
  .stats-grid{grid-template-columns:1fr 1fr}
  .advisor-content{padding:25px}.advisor-content h2{font-size:23px}
  .info-grid{grid-template-columns:1fr}.info-image{height:220px}
  .footer-top{grid-template-columns:1fr 1fr;gap:25px}
  .newsletter{display:block}.newsletter-form{margin-top:15px}.newsletter-form input{width:calc(100% - 105px)}
  .newsletter-form button{width:105px}
}
@media(max-width:380px){
  .footer-top{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr}
  .hero h1{font-size:34px}
}

/* ==========================================================================
   ZUSÄTZLICHE STYLES – neue Unterseiten (Über uns, Kredite, FAQ, Kontakt,
   rechtliche Seiten). Nutzt exakt dieselben Farben/Schriften wie oben.
   ========================================================================== */

/* --- Seiten-Hero (für alle Unterseiten, mit optionalem Hintergrundbild) --- */
.page-hero{background:var(--blue);color:#fff;position:relative;overflow:hidden;padding:64px 0 56px}
.page-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.32;z-index:0}
.page-hero-overlay{position:absolute;inset:0;background:linear-gradient(120deg,rgba(8,29,64,.95) 0%,rgba(10,52,120,.85) 60%,rgba(10,52,120,.55) 100%);z-index:0}
.page-hero-content{position:relative;z-index:1;max-width:740px}
.page-hero .eyebrow{color:var(--yellow)}
.page-hero h1{font-size:41px;line-height:1.1;letter-spacing:-1.2px;margin:10px 0 14px}
.page-hero p{color:#e7edf8;font-size:13.5px;max-width:640px;margin:0}
.page-hero .back-link{display:inline-block;font-size:15px;color:#c7d6f0;font-weight:700;margin-bottom:14px}
.page-hero .back-link:hover{color:#fff}

/* --- Contenu générique (légal, à propos, pages produits) --- */
.content-section{padding:70px 0}
.content-section.alt{background:#fff}
.content-narrow{max-width:820px;margin:0 auto}
.updated-date{font-size:15px;color:#94a1b5;margin-bottom:22px}
.rich-text h2{font-size:23px;color:#102744;margin:38px 0 14px;padding-top:26px;border-top:1px solid #e7ebf2;letter-spacing:-.3px}
.rich-text h2:first-child{border-top:0;margin-top:0;padding-top:0}
.rich-text h3{font-size:14.5px;color:#1c3865;margin:22px 0 10px}
.rich-text p{font-size:16px;color:#546077;margin:0 0 14px}
.rich-text ul{margin:0 0 16px;padding-left:20px}
.rich-text li{font-size:16px;color:#546077;margin-bottom:7px}
.rich-text a{color:var(--blue);font-weight:700;text-decoration:underline}

/* --- Étapes du process (5 étapes) --- */
.steps-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:8px}
.step-card{background:#fff;border:1px solid #edf0f4;border-radius:15px;padding:24px 16px;text-align:center}
.step-num{width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;margin:0 auto 12px;font-size:16px}
.step-card h4{font-size:12.5px;margin:0 0 6px;color:#142b4b}
.step-card p{font-size:10.5px;color:#8993a1;margin:0}

/* --- Cartes de valeurs (À propos) --- */
.value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:8px}
.value-card{background:#fff;border:1px solid #edf0f4;border-radius:15px;padding:22px 18px}
.value-card h4{color:var(--blue);font-size:16px;margin:0 0 8px}
.value-card p{font-size:15px;color:#7a8799;margin:0}

/* --- Note d'avertissement --- */
.note-box{background:#fff7e0;border:1px solid #ffe9a8;border-radius:12px;padding:16px 18px;font-size:11.5px;color:#6b5a1f;margin-top:30px;line-height:1.6}
.note-box strong{color:#3d3212}

/* --- Alerte formulaire --- */
.alert-box{background:#ffe3e3;border:1px solid #ffb3b3;color:#7a1f1f;padding:12px 16px;border-radius:10px;font-size:16px;margin-bottom:18px}
.success-box{background:#e5f7ee;border:1px solid #a9e6c5;color:#12563a;padding:26px;border-radius:14px;text-align:center}
.success-box h2{margin:0 0 8px;color:#0e4630;font-size:21px}
.success-box p{margin:0;font-size:12.5px}

/* --- Boutons utilitaires --- */
.btn-center{text-align:center;margin-top:28px}
.btn-outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5)}
.btn-outline:hover{background:rgba(255,255,255,.1)}

/* --- CTA générique en bas de page --- */
.cta-box{background:linear-gradient(150deg,#0a2345,#071a37);color:#fff;border-radius:22px;padding:48px 30px;text-align:center}
.cta-box h2{font-size:31px;margin:0 0 10px;color:#fff}
.cta-box p{font-size:16px;color:#dce4ef;margin:0 0 24px}

/* --- Page Kontakt --- */
.contact-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:24px;align-items:start;margin-top:8px}
.contact-info-card{background:#fff;border-radius:16px;padding:28px;box-shadow:var(--shadow)}
.contact-info-card p{font-size:12.5px;color:#546077;margin:0 0 18px}
.contact-info-card strong{display:block;color:#102744;font-size:16px;margin-bottom:4px}
.contact-info-card a{color:var(--blue);font-weight:700}
.contact-form-card{background:#fff;border-radius:16px;padding:32px;box-shadow:var(--shadow)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-field{margin-bottom:16px}
.form-field label{display:block;font-size:11.5px;font-weight:700;color:#102744;margin-bottom:6px}
.form-field input,.form-field textarea{width:100%;padding:11px 13px;border:1.5px solid #e1e5ee;border-radius:10px;font-size:16px;font-family:inherit;background:#fbfcfe}
.form-field input:focus,.form-field textarea:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(10,52,120,.12)}
.form-field textarea{resize:vertical}

/* --- Grille de cartes de prêts (page kredit.html) --- */
.loan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}

@media(max-width:1000px){
  .steps-grid{grid-template-columns:repeat(3,1fr)}
  .value-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
  .loan-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:650px){
  .content-section{padding:50px 0}
  .page-hero{padding:46px 0 40px}
  .page-hero h1{font-size:31px}
  .steps-grid{grid-template-columns:1fr 1fr}
  .value-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .contact-form-card,.contact-info-card{padding:22px 18px}
  .loan-grid{grid-template-columns:1fr}
  .cta-box{padding:34px 20px}
  .cta-box h2{font-size:23px}
  .rich-text h2{font-size:20px}
}
@media(max-width:380px){
  .steps-grid{grid-template-columns:1fr}
}
/* ==========================================================================
   NOUVELLE SECTION — Produits de crédit réels (avec photo)
   A coller a la fin de assets/css/style.css
   ========================================================================== */
.loan-products{background:#fff}
.loan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:36px}
.loan-card{display:flex;flex-direction:column;background:#fff;border:1px solid #edf0f4;border-radius:15px;overflow:hidden;box-shadow:0 10px 30px rgba(10,52,120,.07);transition:.25s}
.loan-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.loan-media{position:relative;aspect-ratio:16/9;background-color:#16325c;background-size:cover;background-position:center;overflow:hidden}
.loan-media-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,29,64,.88),rgba(8,29,64,.05) 55%,transparent)}
.loan-title{position:absolute;left:16px;right:16px;bottom:12px;color:#fff;font-size:19px;font-weight:800;letter-spacing:-.3px}
.loan-body{display:flex;flex-direction:column;flex:1;padding:18px}
.loan-body p{flex:1;margin:0 0 16px;color:#546077;font-size:11.5px;line-height:1.7}
.loan-cta{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border:1.5px solid var(--blue);border-radius:999px;color:var(--blue);font-weight:700;font-size:10.5px;width:max-content;transition:.2s}
.loan-cta span{transition:.2s}
.loan-card:hover .loan-cta{background:var(--yellow);border-color:var(--yellow);color:#0c2547}
.loan-card:hover .loan-cta span{transform:translateX(4px)}

@media(max-width:1000px){
  .loan-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:650px){
  .loan-grid{grid-template-columns:1fr;gap:16px}
  .loan-title{font-size:17px}
}
/* ==========================================================================
   AJUSTEMENT — reduit l'espace entre le bouton "Meine Anfrage..." et les
   4 cartes (Ich will einen Kredit, etc.) juste en dessous.
   A coller a la suite du bloc precedent, tout en bas de style.css
   ========================================================================== */
.loan-products{padding-bottom:20px}
.intro{padding-top:20px}