/* —— clean, hell, smooth —— */
:root{
  --bg:#f6f7f9; --panel:#fff; --stroke:#e9edf2; --text:#0f172a; --muted:#5b6473;
  --accent:#ff7a1a; --ink:#24180c; --radius:18px; --shadow:0 12px 28px rgba(16,24,40,.10);

  /* Produkt-Kicker Komfort-Variablen */
  --pk-top:   -4.2rem;                     /* höher/tiefer: negativer = höher */
  --pk-shift: 0rem;                        /* feiner Links/Rechts-Versatz */
  --pk-blue:  #0b214a;                     /* KREDIREKT Blau */
  --pk-orange:#ff7a1a;                     /* KREDIREKT Orange */
  --pk-size:  clamp(3.4rem, 7vw, 5.8rem);  /* Grundgröße */
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased;
  min-height:100vh; display:flex; flex-direction:column;
  overflow-x:hidden; /* kein seitliches Scrollen */
}

main{flex:1}
img{max-width:100%; display:block}
.container{width:min(1120px,92%); margin-inline:auto}

/* ================= HEADER ================= */
.header{
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px) saturate(140%);
  border-bottom:1px solid var(--stroke);
}
.hdr{display:flex; align-items:center; gap:.8rem; padding:.6rem 0}
.brand{display:inline-flex; align-items:center}
.logo{height:28px; width:auto}
.flex-spacer{flex:1 1 auto}

/* ===== NAVI ===== */
.main-nav{
  display:flex; align-items:center; gap:1.2rem;
  font-weight:800; font-size:1.02rem;
  margin-left:auto; margin-right:auto;
  justify-content:center; white-space:nowrap;
}
.main-nav .tab-btn{
  appearance:none; background:transparent; border:0;
  padding:.38rem .55rem; border-radius:10px;
  font:inherit; font-weight:800; color:#2b3342; cursor:pointer;
  transition: background .18s ease, box-shadow .18s ease, transform .12s ease;
  text-decoration:none;
}
.main-nav .tab-btn:hover{
  background: rgba(255,122,26,.12);
  box-shadow: inset 0 0 0 1px rgba(255,122,26,.25);
  transform: translateY(-1px);
}
.main-nav .tab-btn.is-active{background:transparent; box-shadow:none; color:#2b3342}

.main-nav a{
  color:#2b3342; text-decoration:none;
  padding:.38rem .55rem; border-radius:10px; font-weight:800;
  transition: background .18s ease, box-shadow .18s ease, transform .12s ease;
}
.main-nav a:hover{
  background: rgba(255,122,26,.12);
  box-shadow: inset 0 0 0 1px rgba(255,122,26,.25);
  transform: translateY(-1px);
}

/* Rechts-Cluster */
.anfrage-menu-wrap{ margin-left:.6rem }
.lang-switch{ position:relative; margin-left:.6rem }

/* ================= Buttons ================= */
.btn{
  display:inline-flex; align-items:center; gap:.5rem; padding:.72rem 1rem;
  border-radius:14px; font-weight:700; text-decoration:none;
  border:1px solid #d7dde6; color:#1f2937; background:#fff;
  transition:transform .08s, box-shadow .2s;
}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:#fff; border:1px solid #d7dde6; color:#1f2937}

.btn--cta{
  background: var(--accent); color: var(--ink); border-color: transparent;
  font-weight: 700; font-size: .9rem; padding: .55rem .9rem; border-radius: 10px;
  box-shadow: 0 8px 18px rgba(255,122,26,.25);
}
.btn--cta:hover{transform:translateY(-1px); box-shadow:0 14px 30px rgba(255,122,26,.32)}

/* ================= Sprachwahl ================= */
.lang-current{
  display:flex; align-items:center; gap:.4rem; padding:.46rem .7rem;
  border:1px solid #e5eaf1; background:#fff; color:#2b3342; font-weight:800; border-radius:999px; cursor:pointer
}
.lang-current .globe{font-size:1.05rem}
.lang-current .code{letter-spacing:.03em}
.lang-current .slash{opacity:.5}
.lang-menu{
  position:absolute; right:0; top:calc(100% + 6px); display:none;
  background:#fff; border:1px solid #e9edf2; border-radius:12px; box-shadow:var(--shadow); padding:.4rem; z-index:30
}
.lang-menu button{
  display:block; width:100%; text-align:left; padding:.55rem .8rem; border:0; background:#fff; border-radius:8px; cursor:pointer; font-weight:700; color:#2b3342
}
.lang-menu button:hover{background:#f6f8fb}

/* ================= HERO ================= */
.hero{position:relative; padding:clamp(1.2rem,2.6vw,2rem) 0}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:2rem; align-items:center; min-height:62vh}
.overtitle{letter-spacing:.04em; text-transform:uppercase; color:#8a95a9; font-weight:700; margin:0 0 .25rem}
.hero-copy h1{margin:.2rem 0 .4rem; font-size:clamp(2.2rem,4vw,3.4rem); letter-spacing:-.02em}
.accent{color:var(--accent)}
.lead{color:#4b5563; margin:.2rem 0 .8rem}
.badges{display:flex; gap:.5rem; flex-wrap:wrap; margin:.2rem 0 .6rem}
.badge{background:#fff; border:1px solid #e9edf2; color:#384152; padding:.45rem .65rem; border-radius:999px; font-weight:600; font-size:.92rem}

/* Linke Bildhälfte + sanfte Ausblendung */
.hero-art{
  position:absolute; inset:0 50% 0 0; pointer-events:none; z-index:0;
  background: url("background.png") center/cover no-repeat;
  opacity:.22;
  filter: blur(8px) brightness(1.05) contrast(.92);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 72%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 72%, rgba(0,0,0,0) 100%);
}
/* Fallback-Verlauf nach unten */
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:160px;
  background: linear-gradient(to bottom, rgba(246,247,249,0) 0%, var(--bg) 100%);
  pointer-events:none;
}
/* Zusatz-Overlay links (gleicher Pfad wie oben) */
.hero::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:50%;
  background:linear-gradient(to right,rgba(246,247,249,0.88),rgba(246,247,249,0.12)),url("background.png") no-repeat left center/contain;
  opacity:.22; pointer-events:none; z-index:0;
}

.hero-grid, .calc, .hero-copy{position:relative; z-index:1}

/* ================= PRODUCT-KICKER ================= */
.hero-copy{ position: relative; }

.product-kicker{
  position:absolute;
  top: var(--pk-top);
  left: 50%;
  transform: translateX(calc(-50% + var(--pk-shift)));
  width: max-content;
  max-width: 92vw;
  text-align:center;

  margin:0; display:block; z-index:5; pointer-events:none;
  font-family: "Poppins", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:900; font-size:var(--pk-size); line-height:1.04; letter-spacing:-.5px; text-transform:uppercase;

  text-shadow: 0 4px 16px rgba(11,33,74,.20), 0 0 14px rgba(255,122,26,.20);
  will-change: transform;
}
.product-kicker .pk-blue   { color: var(--pk-blue);   filter: drop-shadow(0 0 10px rgba(11,33,74,.25)); }
.product-kicker .pk-orange { color: var(--pk-orange); filter: drop-shadow(0 0 14px rgba(255,122,26,.40)); }

@keyframes pk-pop {
  0%{transform:translateX(calc(-50% + var(--pk-shift))) translateY(6px) scale(.96);opacity:0}
  60%{transform:translateX(calc(-50% + var(--pk-shift))) translateY(0)   scale(1.04);opacity:1}
  100%{transform:translateX(calc(-50% + var(--pk-shift)))}
}
.product-kicker.kicker-pop { animation: pk-pop .42s ease-out; }

/* ================= RECHNER ================= */
.card{background:var(--panel); border:1px solid var(--stroke); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.2rem}
.calc h3{margin:.2rem 0 1rem}
.field{margin:1rem 0}
.row{display:flex; justify-content:space-between; align-items:flex-end; gap:.8rem; font-weight:700; margin-bottom:.55rem}
.row label{display:block}
.scale{display:flex; justify-content:space-between; color:#8490a3; font-size:.9rem; margin-top:.4rem}

/* Range */
.range{margin-top:.15rem}
input[type="range"]{-webkit-appearance:none; -moz-appearance:none; appearance:none; width:100%; height:12px; border-radius:999px; background:#eef2f7; outline:none}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none; width:28px; height:28px; border-radius:50%; background:#fff; border:6px solid var(--accent); box-shadow:0 8px 22px rgba(16,24,40,.18); margin-top:-8px; cursor:pointer}
input[type="range"]::-moz-range-thumb{width:28px; height:28px; border-radius:50%; background:#fff; border:6px solid var(--accent); box-shadow:0 8px 22px rgba(16,24,40,.18); cursor:pointer}
input[type="range"]:focus{outline:2px solid rgba(255,122,26,.25)}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin:1rem 0}
.stat{background:#fafcff; border:1px solid #ecf0f6; border-radius:14px; padding:.9rem}
.stat .k{color:#707b8f; font-size:.9rem}
.stat .v{font-weight:800; font-size:1.25rem}
.calc-note{color:#6b7280; font-size:.85rem; line-height:1.4; margin:.4rem 0 1rem}

/* Mittiger CTA im Rechner */
.calc-cta{display:block; margin:.9rem auto 0}

/* ================= PARTNERSTREIFEN ================= */
.partners{
  background:#fff;
  border-top:1px solid var(--stroke);
  border-bottom:1px solid var(--stroke);
  margin-bottom:12px;
  padding:0;
}
.tape{position:relative; overflow:hidden; user-select:none}
.tape__track{
  display:flex; align-items:center; flex-wrap:nowrap; gap:36px;
  padding:.5px 20px;
  will-change:transform; animation:tape 26s linear infinite; pointer-events:auto;
}
.tape__track img{
  display:block; height:26px; width:auto; object-fit:contain;
  opacity:.92; filter:grayscale(.08) saturate(.9);
  transition:transform .25s ease, filter .25s ease, opacity .25s ease;
}
.tape__track img:hover{
  transform:translateY(-4px) scale(1.08);
  filter:grayscale(0) saturate(1.08)
         drop-shadow(0 10px 20px rgba(255,122,26,.25));
  opacity:1;
}
.tape:hover .tape__track{animation-play-state:paused}
@keyframes tape{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Überschrift über Partner-Streifen */
.partner-heading{
  text-align:center; margin:0 0 3px;
  font-size:1.8rem; font-weight:800; line-height:1.15;
  letter-spacing:.2px; color:#0f172a; position:relative;
}
.partner-heading .em{
  background:linear-gradient(90deg,#ff9a4d,#ff7a1a,#ff5c00);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; font-weight:900;
}
.partner-heading::after{
  content:""; display:block; width:180px; height:4px; margin:6px auto 0;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(255,122,26,.9),transparent);
  box-shadow:0 6px 18px rgba(255,122,26,.35);
}

/* ================= FOOTER ================= */
.footer{background:#fff; border-top:1px solid var(--stroke)}
.foot--bar{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 0; font-size:.82rem; color:#6b7280; font-weight:400}
.foot-left{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap}
.foot-logo{height:18px; opacity:.85}
.copy{color:#6b7280; letter-spacing:.02em}
.foot-links{display:flex; align-items:center; gap:1rem}
.foot-links a{color:#6b7280; text-decoration:none; font-weight:400}
.foot-links a:hover{text-decoration:underline}

/* ================= Reveal ================= */
.reveal{opacity:0; transform:translateY(8px); transition:opacity .45s ease, transform .45s ease}
.reveal.in{opacity:1; transform:none}

/* ================= Cookie-Modal ================= */
.cookie-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.55); backdrop-filter:blur(2px); z-index:9990}
.cookie-backdrop[hidden]{display:none}
.cookie-modal{position:fixed; inset:0; display:grid; place-items:center; z-index:10000;}
.cookie-modal[hidden]{display:none}
.cookie-content{width:min(720px,92vw); background:#fff; border:1px solid var(--stroke); border-radius:16px; box-shadow:0 24px 60px rgba(0,0,0,.28); padding:1.1rem}
.cookie-content h2{margin:.1rem 0 .4rem; font-size:1.15rem}
.cookie-content p{margin:.2rem 0 .8rem; color:#374151; font-size:.96rem}
.cookie-actions{display:flex;align-items:center;gap:.6rem;justify-content:flex-end}
.cookie-more{font-size:.92rem;color:#6b7280;text-decoration:underline}

/* ================= Partnerlogos Feintuning ================= */
.tape__track img.logo--consors{height:40px;margin-top:2px}
.tape__track img.logo--swk{height:118px}
.tape__track img.logo--santander{height:42px}
.tape__track img.logo--targobank{height:22px}
.tape__track img.logo--auxmoney{height:24px;margin-top:4px}
.tape__track img[src*="ing"]{height:26px;margin-top:3px}
.tape__track img.logo--skg{height:16px}

/* === Vollbild-Hintergrund für Tippgeber-Seiten === */
body:has(.tippgeber-box),
body:has(#btnTippgeber),
body:has(#btnTippgeberPlus){
  background: url("assets/background.png") center center / cover no-repeat fixed;
}

/* === Tippgeber-Portal: diskreter Seiten-Tab === */
.tg-tab{
  position: fixed; right: -44px; top: 45%; transform: rotate(-90deg);
  display: inline-block; padding: .55rem .85rem;
  font: 700 .9rem/1.1 "Inter", system-ui, sans-serif;
  color: #fff; background: rgba(11,33,74,.95);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px 10px 0 0; text-decoration: none; letter-spacing: .2px;
  opacity: .85; z-index: 50;
  transition: right .2s ease, opacity .2s ease, box-shadow .2s ease;
}
.tg-tab:hover{ right:-36px; opacity:1; box-shadow:0 6px 20px rgba(0,0,0,.25) }
@media (max-width:880px){ .tg-tab{ display:none } }

/* === Anfrage-Modal (Overlay) === */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(10,18,30,.45);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  z-index: 999; display:none;
}
.modal{ position:fixed; inset:0; display:none; place-items:center; z-index:1000; }
.modal.open, .modal-backdrop.open{ display:grid; }

.modal-card{
  width:min(720px, 92vw); background:#fff; border:1px solid #e6ebf3; border-radius:18px;
  box-shadow:0 24px 80px rgba(8,21,64,.25); overflow:hidden;
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.25rem; background:linear-gradient(180deg,#0b214a 0%,#0e2a5e 100%); color:#fff;
}
.modal-head .title{ display:flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:.3px; }
.modal-body{ padding:1rem 1.25rem 1.25rem; }
.modal-body .grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:640px){ .modal-body .grid{ grid-template-columns:1fr } }

.info-strip{
  display:flex; gap:1rem; flex-wrap:wrap; margin:0 0 1rem 0;
  background:#f6f9ff; border:1px dashed #dbe5ff; border-radius:12px; padding:.75rem 1rem;
}
.info-pill{ font-weight:700; color:#0b214a; }
.info-pill small{ display:block; font-weight:600; opacity:.75; }

.modal-body label{ font-weight:700; color:#0b214a; font-size:.95rem; }
.modal-body input, .modal-body select{
  width:100%; padding:.65rem .75rem; border-radius:10px; border:1px solid #e2e8f3; outline:none;
}
.modal-body input:focus, .modal-body select:focus{
  border-color:#ff7a1a; box-shadow:0 0 0 3px rgba(255,127,39,.18);
}
.modal-actions{ display:flex; justify-content:flex-end; gap:.6rem; margin-top:1rem; }
.btn{ border:0; border-radius:12px; padding:.65rem 1rem; font-weight:800; cursor:pointer; }
.btn-ghost{ background:#eef3fb; color:#0b214a; }
.btn-primary{ background:#ff7a1a; color:#fff; box-shadow:0 8px 22px rgba(255,127,39,.25); }
.btn-primary:disabled{ opacity:.6; cursor:wait; }

/* Alerts */
.alert{ display:none; margin-top:.75rem; padding:.6rem .8rem; border-radius:10px; font-weight:700; }
.alert.show{ display:block; }
.alert.success{ background:#e8fbf1; color:#156b3a; border:1px solid #b9efcf; }
.alert.error{   background:#ffefef; color:#8b1a1a; border:1px solid #ffc8c8; }

body.no-scroll { overflow:hidden; }

/* ================= Responsive ================= */
@media (max-width:980px){
  .main-nav{gap:.8rem}
  .lang-switch{display:none} /* wird weiter unten wieder aktiviert */
}
@media (max-width:860px){
  .main-nav{margin:0; font-size:.95rem}
}
@media (max-width:740px){
  .hdr{gap:.6rem}
  .main-nav{flex-wrap:wrap; justify-content:center; margin:0 .5rem}
  .btn--cta{padding:.48rem .8rem; font-size:.85rem}
  .logo{height:24px}
  .hero-grid{grid-template-columns:1fr}

  .hero-copy,
  .overtitle,
  .lead{ text-align:center; }
  .badges{ justify-content:center; }
}

/* ==== Handy-Feintuning (nur Smartphones bis 480px) ==== */
@media (max-width:480px){

  body{
    overflow-x:hidden;
  }

  /* Header mit Verlauf + oranger Linie */
  .header{
    background:linear-gradient(180deg,#ffffff,#f5f7fb);
    border-bottom:none;
    position:sticky;
  }
  .header::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:3px;
    background:var(--accent);
  }

  .hdr{
    position:relative;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.35rem;
    padding:.45rem .75rem .35rem;
  }

  .brand{ order:1; flex:0 0 auto; }
  .brand .logo{ height:30px; width:auto; }

  .flex-spacer{ order:2; flex:1 1 auto; }

  .lang-switch{ order:3; display:flex; position:static; margin-left:0; }
  .anfrage-menu-wrap{ order:4; position:static; margin-left:.4rem; }

  /* Call-Button nur Icon */
  #callBtn.btn--cta{
    padding:.3rem .6rem;
    border-radius:999px;
    font-size:0;
    min-width:auto;
  }
  #callBtn.btn--cta::before{
    content:"📞";
    font-size:1.15rem;
    line-height:1;
  }

  /* Sprachbutton: nur Flagge */
  .lang-current{
    padding:.25rem .45rem;
    font-size:.72rem;
    border-radius:999px;
    gap:.25rem;
  }
  .lang-current .code{ display:none !important; }

  /* Sprachmenü: einspaltige Liste direkt unter der Flagge */
  .lang-menu{
    top:calc(100% + .4rem);
    right:0;
    left:auto;
    transform:none;
    width:auto;
    min-width:150px;
    max-width:70vw;
  }
  .lang-grid{
    display:grid;
    grid-template-columns:1fr !important;   /* nur eine Spalte */
    row-gap:.25rem;
  }

  /* Produkt-Kicker auf Handy ausblenden */
  .product-kicker{ display:none; }

  /* ===== Tabs unter dem Header – KLEINER & zentriert ===== */
  .main-nav{
    order:5;
    width:100%;
    max-width:420px;
    margin:.25rem auto 0;
    padding:0 .5rem .2rem;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:.3rem;
    row-gap:.15rem;
    font-size:.7rem;                 /* ~70–75% der alten Größe */
    text-align:center;
    border-top:1px solid rgba(11,33,74,.12);
    border-bottom:1px solid rgba(11,33,74,.12);
    background:#fff;
    white-space:normal;
  }

  .main-nav .tab-btn{
    padding:.35rem .2rem;
    border-radius:999px;
    text-align:center;
    line-height:1.2;
    white-space:normal;
    word-break:keep-all;
    hyphens:none;
    font-size:inherit;               /* übernimmt .7rem von .main-nav */
  }

  /* Active-Look: oranger Pill-Button */
  .main-nav .tab-btn.is-active{
    color:#fff;
    background:var(--accent);
    box-shadow:0 6px 14px rgba(255,122,26,.35);
  }

  /* Hero / Buttons mittig */
  .hero{ padding-top:1.4rem; }
  .hero-copy,
  .overtitle,
  .lead{ text-align:center; }
  .badges{ justify-content:center; }

  /* Footer mittig */
  .foot--bar{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:.5rem;
    padding:.9rem 0 1.1rem;
  }
  .foot-left{
    width:100%;
    justify-content:center;
  }
  .foot-links{
    flex-wrap:wrap;
    justify-content:center;
    row-gap:.25rem;
    column-gap:.9rem;
    font-size:.8rem;
  }
}