/*
  BauSec Theme — Version 2
  Angeglichen an den bestehenden Webauftritt der Sozialkasse des Berliner
  Baugewerbes (sozialkasse-berlin.de), siehe BauSec_Designkonzept_2026_v2.docx.
  Variablennamen aus Version 1 (--bausec-graphit, --bausec-petrol, ...) werden
  aus Kompatibilitätsgründen beibehalten, tragen jetzt aber die gemessenen
  SKB-Farbwerte (Navy/Blau/Grau) statt der ursprünglichen Petrol/Signalgelb-Palette.
*/

:root{
  /* SKB-Werte, direkt von sozialkasse-berlin.de gemessen (22.07.2026) */
  --skb-navy: #16213B;
  --skb-navy-80: #1F2E4D;
  --skb-blue: #036FBF;
  --skb-blue-dark: #02598F;
  --skb-blue-10: #E6F1FA;
  --skb-logo-blue: #095EA9;
  --skb-gray-100: #F8F9FA;
  --skb-gray-200: #E9ECEF;
  --skb-gray-600: #6C757D;
  --skb-gray-900: #212529;
  --skb-warn: #B33A2E;

  /* Kompatibilitäts-Aliase auf die alten Variablennamen (Version 1) */
  --bausec-graphit: var(--skb-navy);
  --bausec-graphit-80: var(--skb-navy-80);
  --bausec-petrol: var(--skb-blue);
  --bausec-petrol-dark: var(--skb-blue-dark);
  --bausec-petrol-10: var(--skb-blue-10);
  --bausec-signalgelb: var(--skb-blue);        /* kein Gelb mehr, siehe Designkonzept v2 */
  --bausec-signalgelb-dark: var(--skb-blue-dark);
  --bausec-verified: var(--skb-blue);
  --bausec-verified-text: var(--skb-navy);
  --bausec-verified-10: var(--skb-blue-10);
  --bausec-warnrot: var(--skb-warn);
  --bausec-warnrot-10: #F5E4E1;
  --bausec-beton-50: #FFFFFF;
  --bausec-beton-100: var(--skb-gray-100);
  --bausec-beton-200: var(--skb-gray-200);
  --bausec-beton-400: var(--skb-gray-600);
  --bausec-beton-600: var(--skb-gray-600);
  --bausec-beton-800: var(--skb-gray-900);
  --bausec-text: var(--skb-gray-900);
  --bausec-radius: 2px;

  /* Bootstrap overrides */
  --bs-primary: #036FBF;
  --bs-primary-rgb: 3,111,191;
  --bs-secondary: #16213B;
  --bs-secondary-rgb: 22,33,59;
  --bs-body-font-family: 'Roboto', system-ui, -apple-system, sans-serif;
  --bs-body-color: #212529;
  --bs-body-bg: #FFFFFF;
  --bs-link-color: #036FBF;
  --bs-link-hover-color: #02598F;
  --bs-border-radius: 2px;
  --bs-border-color: #E9ECEF;
}

body{
  font-family: var(--bs-body-font-family);
  color: var(--bausec-text);
  background: #FFFFFF;
}

.mono{ font-family:'Roboto', system-ui, sans-serif; font-weight:500; }

h1,h2,h3,h4,h5{ font-family:'Roboto', system-ui, sans-serif; font-weight:700; color:var(--skb-navy); }

a{ text-decoration-thickness: 1.5px; }

.container-narrow{ max-width: 860px; }

/* ---------- Buttons (scharfkantig, wie im Original: 2px Radius) ---------- */
.btn{ border-radius: 2px; font-weight:500; }
.btn-primary{ background:var(--skb-blue); border-color:var(--skb-blue); }
.btn-primary:hover, .btn-primary:focus{ background:var(--skb-blue-dark); border-color:var(--skb-blue-dark); }
.btn-accent{ background:var(--skb-blue); border-color:var(--skb-blue); color:#fff; }
.btn-accent:hover, .btn-accent:focus{ background:var(--skb-blue-dark); border-color:var(--skb-blue-dark); color:#fff; }
.btn-outline-light-graphit{ border:1.5px solid #fff; color:#fff; }
.btn-outline-light-graphit:hover{ background:#fff; color:var(--skb-navy); }
.btn-outline-graphit{ border:1.5px solid var(--skb-navy); color:var(--skb-navy); }
.btn-outline-graphit:hover{ background:var(--skb-navy); color:#fff; }

/* ---------- Dunkle Flächen: flächig Navy, kein Rastermuster mehr ---------- */
.bp-dark{
  background-color: var(--skb-navy);
  color:#fff;
}
.bp-dark .text-muted-light{ color:#C7D0DE !important; }

/* Trenner: schlichter Farbbalken statt Warnstreifen-Muster */
.stripe-divider{
  height:4px;
  background:var(--skb-blue);
}

.kicker{
  font-family:'Roboto'; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase;
  color:#9FC4E8; font-weight:700; display:inline-block; margin-bottom:.75rem;
}
.kicker.on-light{ color: var(--skb-blue); }
.bp-dark .kicker{ color:#9FC4E8; }

/* ---------- Statistik-Karten ---------- */
.stat-card{
  background:#fff; border:1px solid var(--skb-gray-200); border-left:4px solid var(--skb-blue);
  border-radius: var(--bausec-radius); padding:1.4rem 1.5rem; height:100%;
}
.stat-card .stat-num{ font-family:'Roboto'; font-weight:700; font-size:2rem; color:var(--skb-navy); line-height:1.1; }
.stat-card .stat-label{ font-size:.92rem; color:var(--skb-gray-900); margin-top:.35rem; }
.stat-card .stat-src{ font-size:.75rem; color:var(--skb-gray-600); margin-top:.6rem; font-style:italic; }
.stat-card.stat-neutral{ border-left-color: var(--skb-navy); }
.stat-card.stat-neutral .stat-num{ color: var(--skb-navy); }

.quote-card{ background:var(--skb-blue-10); border-radius:2px; padding:1.6rem; }
.quote-card p{ font-size:1rem; color:var(--skb-navy); }
.quote-card .who{ font-family:'Roboto'; font-size:.8rem; color:var(--skb-blue-dark); font-weight:700; }

/* ---------- Linkbox-Karten (Vorbild: "Schnelleinstieg"-Kacheln der SKB-Startseite) ---------- */
.split-card{ border:1px solid var(--skb-gray-200); border-radius:2px; padding:1.75rem; height:100%; background:#fff; }
.split-card.for-companies{ border:none; background:var(--skb-blue); color:#fff; }
.split-card.for-companies h2, .split-card.for-companies h3, .split-card.for-companies h4{ color:#fff; }
.split-card.for-companies p, .split-card.for-companies .text-muted{ color:#E6F1FA !important; }
.split-card.for-providers{ border:none; background:var(--skb-navy); color:#fff; }
.split-card.for-providers h2, .split-card.for-providers h3, .split-card.for-providers h4{ color:#fff; }
.split-card.for-providers p, .split-card.for-providers .text-muted{ color:#C7D0DE !important; }

/* Buttons auf farbig gefüllten Linkbox-Karten immer als weiße Outline darstellen,
   unabhängig von der ursprünglich verwendeten Button-Klasse (Kontrastsicherung) */
.split-card.for-companies .btn,
.split-card.for-providers .btn{
  background:transparent; border-color:#fff; color:#fff;
}
.split-card.for-companies .btn:hover, .split-card.for-companies .btn:focus,
.split-card.for-providers .btn:hover, .split-card.for-providers .btn:focus{
  background:#fff; color:var(--skb-navy);
}

.badge-verified{
  display:inline-flex; align-items:center; gap:.45rem; background:var(--skb-blue-10); color:var(--skb-navy);
  padding:.45rem .85rem; border-radius:20px; font-size:.78rem; font-weight:700; font-family:'Roboto';
}
.badge-verified .dot{ width:7px; height:7px; border-radius:50%; background:var(--skb-blue); flex-shrink:0; }

.step-num{
  width:34px; height:34px; border-radius:50%; background:var(--skb-navy); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:'Roboto'; font-weight:700; flex-shrink:0;
}

/* ---------- Navigation ---------- */
.bausec-navbar{ background:#fff; border-bottom:1px solid var(--skb-gray-200); }
.bausec-navbar .navbar-brand{ font-family:'Roboto'; font-weight:700; font-size:1.15rem; color:var(--skb-navy); letter-spacing:-.01em; }
.bausec-navbar .navbar-brand span{ color:var(--skb-blue); }
.bausec-navbar .nav-link{ color:var(--skb-gray-900); font-weight:500; font-size:.92rem; }
.bausec-navbar .nav-link.active{ color:var(--skb-blue); border-bottom:2px solid var(--skb-blue); }

/* ---------- Footer ---------- */
.bausec-footer h5{ color:#fff; font-size:.78rem; font-family:'Roboto'; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.bausec-footer p, .bausec-footer a{ color:#C7D0DE; }
.bausec-footer a{ text-decoration:none; }
.bausec-footer a:hover{ color:#fff; }

/* ---------- Section rhythm ---------- */
.section-py{ padding-top:5rem; padding-bottom:5rem; }
@media (max-width:768px){
  .section-py{ padding-top:3rem; padding-bottom:3rem; }
}

/* ---------- Reveal-on-scroll (respects reduced motion) ---------- */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- BauCard-Illustration (eigenes Produktmotiv, jetzt in Navy/Blau) ---------- */
.baucard{
  width:220px; height:138px; border-radius:6px; background:linear-gradient(135deg, var(--skb-navy), var(--skb-blue-dark));
  box-shadow:0 10px 26px rgba(0,0,0,0.2); padding:16px 18px; color:#fff; position:relative;
}
.baucard .chip{ width:28px; height:20px; background:#C7D0DE; border-radius:3px; margin-bottom:12px; }
.baucard .num{ font-family:'Roboto'; font-weight:500; font-size:13px; letter-spacing:.1em; }
.baucard .name{ font-size:10.5px; margin-top:10px; opacity:.85; font-family:'Roboto'; }

/* ---------- Skip link (accessibility) ---------- */
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--skb-navy); color:#fff; padding:.6rem 1rem; z-index:2000;
}
.skip-link:focus{ left:1rem; top:1rem; }

/* ---------- Focus visibility ---------- */
a:focus-visible, button:focus-visible, .btn:focus-visible{
  outline:3px solid var(--skb-blue); outline-offset:2px;
}