/* ============================================================
   bauzinsen.digital — Design System
   Ton: Seriös, präzise, datengetrieben. Grün = günstig, Rot = teuer.
   ============================================================ */

@font-face { font-family:'Inter'; src:url('/fonts/inter-latin-400-normal.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/fonts/inter-latin-500-normal.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/fonts/inter-latin-600-normal.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/fonts/inter-latin-700-normal.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Lora'; src:url('/fonts/lora-latin-400-normal.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Lora'; src:url('/fonts/lora-latin-700-normal.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Lora'; src:url('/fonts/lora-latin-400-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }

:root {
  --ink:       #1A2B3A;
  --ink-mid:   #364F63;
  --muted:     #5F7485;
  --navy:      #0D2137;
  --blue:      #1557A0;
  --blue-lt:   #EBF4FF;
  --green:     #166534;
  --green-bg:  #F0FDF4;
  --red:       #C1121F;
  --red-bg:    #FEF2F2;
  --amber:     #92600A;
  --amber-bg:  #FFFBEB;
  --bg:        #F4F6F9;
  --card:      #FFFFFF;
  --border:    #D8DFE8;
  --border-lt: #E8EDF3;
  --radius:    10px;
  --radius-lg: 16px;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; }
body { font-family:'Inter',system-ui,sans-serif; color:var(--ink); background:var(--bg); line-height:1.65; }
h1,h2,h3,h4 { font-family:'Lora',Georgia,serif; line-height:1.25; color:var(--ink); }
h1 { font-size:clamp(1.9rem,4.5vw,3rem); font-weight:700; }
h2 { font-size:clamp(1.4rem,3vw,2rem); font-weight:700; }
h3 { font-size:clamp(1.05rem,2vw,1.3rem); font-weight:700; }
p  { color:var(--ink-mid); }
a  { color:var(--blue); text-decoration:none; }
a:hover { text-decoration:underline; }

.container      { max-width:920px; margin:0 auto; padding:0 1.25rem; }
.container--wide { max-width:1100px; margin:0 auto; padding:0 1.25rem; }
.container--prose { max-width:720px; margin:0 auto; padding:0 1.25rem; }

/* ── Header ── */
.site-header { background:var(--navy); border-bottom:3px solid var(--blue); position:sticky; top:0; z-index:100; }
.site-header__inner { display:flex; align-items:center; justify-content:space-between; padding:.75rem 1.25rem; max-width:1100px; margin:0 auto; }
.site-logo { font-family:'Inter',sans-serif; font-weight:700; font-size:1.05rem; color:#fff; }
.site-logo span { color:#6EC5FF; font-weight:400; }
.site-nav { display:flex; gap:1.5rem; }
.site-nav a { color:rgba(255,255,255,.7); font-size:.875rem; font-weight:500; transition:color .15s; }
.site-nav a:hover { color:#fff; text-decoration:none; }
@media(max-width:640px){ .site-nav{display:none;} }

/* ── Hero ── */
.hero { background:linear-gradient(135deg,#081824 0%,#0D2137 55%,#112840 100%); color:#fff; padding:3.5rem 1.25rem 3rem; position:relative; overflow:hidden; }
.hero::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 30% 50%,rgba(21,87,160,.18) 0%,transparent 65%); pointer-events:none; }
.hero__inner { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
@media(max-width:700px){ .hero__inner{ grid-template-columns:1fr; } }
.hero__eyebrow { display:inline-flex; align-items:center; gap:.4rem; background:rgba(110,197,255,.1); border:1px solid rgba(110,197,255,.2); border-radius:100px; padding:.3rem .85rem; font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#6EC5FF; margin-bottom:1.1rem; }
.hero h1 { color:#fff; margin-bottom:.85rem; }
.hero h1 em { color:#6EC5FF; font-style:italic; }
.hero__sub { font-size:1rem; color:rgba(255,255,255,.65); margin-bottom:1.5rem; line-height:1.6; }

.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.8rem 1.75rem; border-radius:var(--radius); font-weight:600; font-size:.95rem; cursor:pointer; border:none; font-family:'Inter',sans-serif; transition:background .15s,transform .1s,box-shadow .15s; text-decoration:none !important; }
.btn--blue { background:var(--blue); color:#fff; box-shadow:0 4px 14px rgba(21,87,160,.3); }
.btn--blue:hover { background:#0E4A8A; transform:translateY(-1px); }
.btn--ghost { background:transparent; color:#fff; border:2px solid rgba(255,255,255,.35); }
.btn--ghost:hover { border-color:#fff; }
.btn--full { width:100%; justify-content:center; }
.btn--back { background:transparent; color:var(--muted); border:2px solid var(--border); padding:.65rem 1.35rem; font-size:.875rem; }
.btn--back:hover { border-color:var(--ink); color:var(--ink); transform:none; }
.btn:active { transform:translateY(0); }

/* ── Live-Ticker (Hero rechts) ── */
.live-ticker { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-lg); padding:1.5rem; }
.live-ticker__title { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.45); margin-bottom:1rem; }
.rate-row { display:flex; justify-content:space-between; align-items:center; padding:.55rem 0; border-bottom:1px solid rgba(255,255,255,.07); }
.rate-row:last-child { border-bottom:none; }
.rate-row__label { font-size:.82rem; color:rgba(255,255,255,.6); }
.rate-row__val { font-family:'Lora',serif; font-size:1.2rem; font-weight:700; }
.rate-row__val--green { color:#4ADE80; }
.rate-row__val--amber { color:#FCD34D; }
.rate-row__val--red   { color:#F87171; }
.rate-row__delta { font-size:.7rem; font-weight:600; padding:.15rem .4rem; border-radius:4px; }
.rate-row__delta--up   { background:rgba(248,113,113,.15); color:#FCA5A5; }
.rate-row__delta--down { background:rgba(74,222,128,.15);  color:#86EFAC; }
.live-badge { display:inline-flex; align-items:center; gap:.3rem; font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#4ADE80; margin-bottom:.75rem; }
.live-badge::before { content:''; width:6px; height:6px; border-radius:50%; background:#4ADE80; animation:pulse 1.5s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ── Sections ── */
.section { padding:3.5rem 0; }
.section--alt { background:var(--card); }
.section--dark { background:var(--navy); }
.section__label { font-size:.73rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); margin-bottom:.5rem; }
.section__title { margin-bottom:.75rem; }
.section__sub { color:var(--muted); max-width:580px; margin:0 auto; text-align:center; }

/* ── Calculator ── */
.calc-wrapper { background:var(--card); border-radius:var(--radius-lg); border:1px solid var(--border); box-shadow:0 8px 40px rgba(0,0,0,.07); overflow:hidden; margin-top:2rem; }
.calc-header { background:var(--navy); padding:1.25rem 1.75rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.75rem; }
.calc-header h3 { color:#fff; font-size:1.05rem; margin:0; }
.calc-header__meta { font-size:.75rem; color:rgba(255,255,255,.45); }
.calc-body { padding:1.75rem; }
.calc-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
@media(max-width:580px){ .calc-grid{ grid-template-columns:1fr; } }

.field { margin-bottom:0; }
.field label { display:block; font-weight:600; font-size:.875rem; margin-bottom:.4rem; color:var(--ink); }
.field label .hint { font-weight:400; color:var(--muted); font-size:.78rem; }
.field select, .field input[type="number"] {
  width:100%; padding:.7rem 1rem;
  border:2px solid var(--border); border-radius:var(--radius);
  font-family:'Inter',sans-serif; font-size:1rem; color:var(--ink); background:var(--card);
  appearance:none; transition:border-color .15s;
}
.field select:focus, .field input:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(21,87,160,.1); }

.slider-wrapper { margin-bottom:0; }
.slider-wrapper label { display:block; font-weight:600; font-size:.875rem; margin-bottom:.3rem; color:var(--ink); }
.slider-top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.4rem; }
.slider-current { font-family:'Lora',serif; font-size:1.45rem; font-weight:700; color:var(--blue); }
.slider-hint { font-size:.72rem; color:var(--muted); }
input[type="range"] { width:100%; height:5px; appearance:none; background:var(--border); border-radius:99px; cursor:pointer; accent-color:var(--blue); }
input[type="range"]::-webkit-slider-thumb { appearance:none; width:18px; height:18px; border-radius:50%; background:var(--blue); border:3px solid #fff; box-shadow:0 1px 5px rgba(0,0,0,.2); }
.slider-range-labels { display:flex; justify-content:space-between; font-size:.68rem; color:var(--muted); margin-top:.2rem; }

/* ── Result Display ── */
.result-panel { display:none; }
.result-panel.active { display:block; }

.shock-number-card {
  background:linear-gradient(135deg,#0D1F2D,#152535);
  border-radius:var(--radius-lg); padding:2rem 1.75rem; margin-bottom:1.25rem;
  position:relative; overflow:hidden; box-shadow:0 6px 24px rgba(0,0,0,.18);
}
.shock-number-card__label { font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:.4rem; }
.shock-number-card__scenario { font-size:.88rem; color:rgba(255,255,255,.6); margin-bottom:.25rem; }
.shock-number-card__amount { font-family:'Lora',serif; font-size:clamp(2.2rem,5vw,3.5rem); font-weight:700; color:#F87171; line-height:1; margin-bottom:.25rem; }
.shock-number-card__amount--ok { color:#4ADE80; }
.shock-number-card__sub { font-size:.82rem; color:rgba(255,255,255,.45); }

.metric-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.85rem; margin-bottom:1.25rem; }
@media(max-width:560px){ .metric-grid{ grid-template-columns:1fr 1fr; } }
.metric-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; text-align:center; }
.metric-card__label { font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:.25rem; }
.metric-card__val { font-family:'Lora',serif; font-size:1.3rem; font-weight:700; }
.metric-card__val--blue   { color:var(--blue); }
.metric-card__val--green  { color:var(--green); }
.metric-card__val--red    { color:var(--red); }
.metric-card__val--amber  { color:var(--amber); }
.metric-card__note { font-size:.68rem; color:var(--muted); margin-top:.15rem; }

/* EZB Countdown Strip */
.ecb-strip { background:var(--amber-bg); border:1px solid #D97706; border-radius:var(--radius); padding:1rem 1.25rem; margin-bottom:1.25rem; display:flex; align-items:center; gap:.85rem; flex-wrap:wrap; }
.ecb-strip__badge { background:#D97706; color:#fff; font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.2rem .6rem; border-radius:4px; white-space:nowrap; }
.ecb-strip__text { font-size:.875rem; color:var(--amber); flex:1; }
.ecb-strip__text strong { color:var(--ink); }

.info-box { border-radius:var(--radius); padding:1.1rem 1.35rem; margin-bottom:.85rem; border-left:4px solid; }
.info-box--blue   { background:var(--blue-lt); border-color:var(--blue); }
.info-box--green  { background:var(--green-bg); border-color:var(--green); }
.info-box--red    { background:var(--red-bg); border-color:var(--red); }
.info-box--amber  { background:var(--amber-bg); border-color:#D97706; }
.info-box__title  { font-weight:700; font-size:.9rem; margin-bottom:.25rem; }
.info-box--blue  .info-box__title { color:#1E3A6B; }
.info-box--green .info-box__title { color:#14532D; }
.info-box--red   .info-box__title { color:#7F1D1D; }
.info-box--amber .info-box__title { color:#78350F; }
.info-box p { font-size:.85rem; margin:0; }

/* ── Affiliate ── */
.partner-section { background:var(--navy); padding:3rem 0; }
.partner-section h2 { color:#fff; }
.partner-section .section__sub { color:rgba(255,255,255,.55); }
.partner-section .section__label { color:#6EC5FF; }
.exclusive-partner { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-lg); padding:2rem; margin:2rem auto; max-width:580px; text-align:center; }
.exclusive-partner__badge { display:inline-block; background:var(--blue); color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.25rem .75rem; border-radius:100px; margin-bottom:1.25rem; }
.exclusive-partner h3 { color:#fff; margin-bottom:.5rem; }
.exclusive-partner p { color:rgba(255,255,255,.65); font-size:.9rem; max-width:400px; margin:0 auto .9rem; }
.exclusive-partner__note { font-size:.72rem; color:rgba(255,255,255,.28); margin-top:.75rem; }
.exclusive-partner__logo-placeholder { width:160px; height:52px; margin:0 auto 1rem; background:rgba(255,255,255,.07); border-radius:var(--radius); border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; font-size:.75rem; color:rgba(255,255,255,.3); }
.affiliate-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.1rem; margin-top:2rem; }
.affiliate-card { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); border-radius:var(--radius); padding:1.2rem; transition:background .15s; }
.affiliate-card:hover { background:rgba(255,255,255,.08); }
.affiliate-card__provider { font-weight:700; color:#fff; margin-bottom:.2rem; }
.affiliate-card__type { font-size:.72rem; color:rgba(255,255,255,.35); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.7rem; }
.affiliate-card__feature { font-size:.82rem; color:rgba(255,255,255,.6); margin-bottom:.7rem; line-height:1.5; }
.affiliate-card__cta { display:block; padding:.55rem 1rem; text-align:center; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius); color:#fff; font-size:.82rem; font-weight:600; transition:background .15s; }
.affiliate-card__cta:hover { background:rgba(255,255,255,.16); text-decoration:none; }
.affiliate-disclaimer { font-size:.72rem; color:rgba(255,255,255,.25); text-align:center; margin-top:1.25rem; }

/* ── Explainer ── */
.explainer-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.35rem; margin-top:2rem; }
@media(max-width:640px){ .explainer-grid{ grid-template-columns:1fr; } }
.explainer-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; }
.explainer-card__icon { font-size:1.75rem; margin-bottom:.65rem; }
.explainer-card h3 { margin-bottom:.5rem; font-size:1.05rem; }
.explainer-card p { font-size:.875rem; }
.explainer-card ul { padding-left:1.1rem; margin-top:.4rem; }
.explainer-card li { font-size:.875rem; color:var(--ink-mid); margin-bottom:.3rem; }

/* ── Prose / Legal ── */
.breadcrumb { display:flex; align-items:center; gap:.4rem; font-size:.85rem; margin-bottom:1.75rem; color:var(--muted); }
.breadcrumb a { color:var(--blue); }
.breadcrumb__sep { color:var(--border); }
.prose h1 { font-family:'Lora',Georgia,serif; font-size:clamp(1.6rem,3vw,2.25rem); font-weight:700; margin-bottom:1.75rem; color:var(--ink); }
.prose h2 { font-family:'Lora',Georgia,serif; font-size:1.15rem; font-weight:700; margin:1.75rem 0 .5rem; color:var(--ink); }
.prose p  { margin-bottom:.85rem; font-size:.9375rem; }
.prose a  { color:var(--blue); }
.prose ul { padding-left:1.25rem; margin-bottom:.85rem; }
.prose li { margin-bottom:.35rem; font-size:.9375rem; color:var(--ink-mid); }
.prose strong { color:var(--ink); }

/* ── Trust + Footer ── */
.trust-bar { display:flex; gap:2rem; flex-wrap:wrap; justify-content:center; padding:1.75rem 1.25rem; background:var(--card); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.trust-item { display:flex; align-items:center; gap:.4rem; font-size:.8rem; color:var(--muted); }
.site-footer { background:var(--navy); color:rgba(255,255,255,.4); padding:1.75rem 1.25rem; font-size:.8rem; }
.site-footer__inner { max-width:1100px; margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.site-footer a { color:rgba(255,255,255,.35); }
.site-footer a:hover { color:rgba(255,255,255,.7); }
.site-footer__links { display:flex; gap:1.5rem; align-items:center; }

/* ── Utils ── */
.text-center { text-align:center; }
.hidden { display:none !important; }
@keyframes fadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
.anim-1 { animation:fadeUp .35s ease both; }
.anim-2 { animation:fadeUp .35s .08s ease both; }
.anim-3 { animation:fadeUp .35s .16s ease both; }
.anim-4 { animation:fadeUp .35s .24s ease both; }