/* b2b coorporation & consulting GmbH – Corporate Design: Blau #1F4E79, Gold #BBA364, Source Sans 3 */
@font-face { font-family:'Source Sans 3'; src:url('fonts/source-sans-3-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Source Sans 3'; src:url('fonts/source-sans-3-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Source Sans 3'; src:url('fonts/source-sans-3-700.woff2') format('woff2'); font-weight:700; font-display:swap; }

:root {
  --blau:#1F4E79; --blau-dunkel:#173c5e; --gold:#BBA364; --gold-hell:#d8c79a;
  --text:#22303c; --grau:#5b6774; --hell:#f4f6f9; --linie:#e2e7ee;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:'Source Sans 3', Arial, sans-serif; color:var(--text); font-size:18px; line-height:1.6; background:#fff; }
img { max-width:100%; display:block; }
a { color:var(--blau); }
.wrap { max-width:1140px; margin:0 auto; padding:0 24px; }

/* Kopfzeile */
header { position:sticky; top:0; z-index:10; background:var(--blau); box-shadow:0 2px 10px rgba(0,0,0,.15); }
header .wrap { display:flex; align-items:center; justify-content:space-between; height:72px; }
header .logo img { height:46px; width:auto; }
nav a { color:#fff; text-decoration:none; font-weight:600; margin-left:28px; font-size:16px; }
nav a:hover { color:var(--gold); }
nav a.btn-klein { border:2px solid var(--gold); padding:6px 16px; border-radius:4px; color:var(--gold); }
nav a.btn-klein:hover { background:var(--gold); color:var(--blau); }

/* Hero */
.hero { background:linear-gradient(105deg, var(--blau) 0%, var(--blau) 50%, var(--blau-dunkel) 100%); color:#fff; overflow:hidden; }
.hero .wrap { display:grid; grid-template-columns:1.3fr 1fr; gap:48px; align-items:end; padding-top:72px; }
.hero .text { padding-bottom:80px; }
.ober { font-size:15px; font-weight:600; letter-spacing:3px; color:var(--gold); text-transform:uppercase; }
.hero h1 { font-size:52px; line-height:1.1; font-weight:700; margin:18px 0 22px; }
.hero p.lead { font-size:21px; color:#dfe7ef; max-width:560px; }
.knoepfe { margin-top:34px; display:flex; flex-wrap:wrap; gap:14px; }
.btn { display:inline-block; padding:13px 28px; border-radius:4px; font-weight:700; text-decoration:none; font-size:17px; }
.btn-gold { background:var(--gold); color:var(--blau); }
.btn-gold:hover { background:var(--gold-hell); }
.btn-rand { border:2px solid rgba(255,255,255,.6); color:#fff; }
.btn-rand:hover { border-color:#fff; }
.hero .foto img { width:100%; max-width:420px; margin-left:auto; border-radius:6px 6px 0 0; }

/* Abschnitte */
section { padding:88px 0; }
section.grau { background:var(--hell); }
h2 { font-size:38px; line-height:1.15; color:var(--blau); margin:10px 0 18px; }
.einleitung { font-size:20px; color:var(--grau); max-width:760px; margin-bottom:44px; }

.karten { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.karte { background:#fff; border:1px solid var(--linie); border-top:4px solid var(--gold); border-radius:6px; padding:28px; }
section.grau .karte { border-color:#fff; border-top-color:var(--gold); }
.karte h3 { font-size:21px; color:var(--blau); margin-bottom:10px; line-height:1.25; }
.karte p { font-size:16.5px; color:var(--grau); }

.branchen { display:grid; grid-template-columns:repeat(5, 1fr); gap:18px; }
.branche { background:var(--blau); color:#fff; border-radius:6px; padding:24px 20px; }
.branche h3 { font-size:19px; margin-bottom:8px; color:var(--gold); }
.branche p { font-size:15.5px; color:#dfe7ef; line-height:1.5; }

.schritte { display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; counter-reset:schritt; }
.schritt { position:relative; padding-top:58px; }
.schritt::before { counter-increment:schritt; content:counter(schritt); position:absolute; top:0; left:0; width:42px; height:42px; border-radius:50%;
                   background:var(--blau); color:var(--gold); font-weight:700; font-size:20px; display:flex; align-items:center; justify-content:center; }
.schritt h3 { font-size:20px; color:var(--blau); margin-bottom:6px; }
.schritt p { font-size:16.5px; color:var(--grau); }

.ueber { display:grid; grid-template-columns:340px 1fr; gap:56px; align-items:start; }
.ueber img { border-radius:6px; box-shadow:0 10px 30px rgba(31,78,121,.18); }
.ueber p { margin-bottom:16px; }
.quali { list-style:none; margin-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; }
.quali li { font-size:16px; padding-left:22px; position:relative; }
.quali li::before { content:""; position:absolute; left:0; top:9px; width:10px; height:10px; background:var(--gold); border-radius:2px; }

/* Kontakt */
.kontakt { background:var(--blau); color:#fff; }
.kontakt h2 { color:#fff; }
.kontakt .einleitung { color:#dfe7ef; }
.kontakt-raster { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.kontakt-raster a, .kontakt-raster div.feld { display:block; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15); border-radius:6px; padding:22px 24px; color:#fff; text-decoration:none; }
.kontakt-raster a:hover { border-color:var(--gold); }
.kontakt-raster small { display:block; color:var(--gold); font-weight:600; letter-spacing:2px; text-transform:uppercase; font-size:13px; margin-bottom:4px; }

/* Fußzeile */
footer { background:var(--blau-dunkel); color:#b9c6d3; font-size:15px; padding:28px 0; }
footer .wrap { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }
footer a { color:#b9c6d3; text-decoration:none; margin-left:20px; }
footer a:hover { color:var(--gold); }

/* Rechtstexte */
.recht { padding:64px 0 88px; }
.recht .wrap { max-width:820px; }
.recht h1 { font-size:40px; color:var(--blau); margin-bottom:28px; }
.recht h2 { font-size:22px; margin:30px 0 8px; }
.recht p, .recht li { font-size:17px; margin-bottom:10px; }
.recht ul { padding-left:22px; }

/* Mobil */
@media (max-width:980px) {
  .hero .wrap { grid-template-columns:1fr; padding-top:48px; }
  .hero .text { padding-bottom:0; }
  .hero .foto img { margin:0 auto; max-width:320px; }
  .karten, .schritte { grid-template-columns:1fr 1fr; }
  .branchen { grid-template-columns:1fr 1fr; }
  .ueber { grid-template-columns:1fr; }
  .ueber img { max-width:320px; }
  .kontakt-raster { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  body { font-size:17px; }
  nav a:not(.btn-klein) { display:none; }
  .hero h1 { font-size:36px; }
  h2 { font-size:30px; }
  section { padding:64px 0; }
  .karten, .schritte, .branchen, .quali { grid-template-columns:1fr; }
  footer a { margin:0 20px 0 0; }
}