/* BSE IT CONSULTING · Produktions-Stylesheet · Design-Tokens aus Claude-Design-Handoff */
:root{
  --navy:#132B4A;
  --accent:#2F64C7;
  --ink:#111827;
  --muted:#5F6B7A;
  --bg:#F5F7FA;
  --border:#DCE2E9;
  --dark-text:#C7D2E0;
  --dark-link:#9FB3CC;
  --diagram-hl:#F0F5FC;
  --max:1180px;
  --sans:'IBM Plex Sans',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#FFFFFF;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;line-height:1.6}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--navy)}
a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono)}

/* ---------- Header ---------- */
.site-header{border-bottom:1px solid var(--border);background:#FFFFFF}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px;flex-wrap:wrap}
.brand{font-weight:700;font-size:17px;letter-spacing:0.04em;color:var(--navy);white-space:nowrap}
.brand:hover{color:var(--navy)}
.site-nav{display:flex;align-items:center;gap:28px;flex-wrap:wrap;padding:8px 0}
.site-nav a{color:var(--ink);font-size:15px;font-weight:500}
.site-nav a:hover{color:var(--accent)}
.site-nav a.active{color:var(--accent);font-weight:600}
.site-nav a.btn-nav{color:#FFFFFF;font-weight:600}
.site-nav a.btn-nav:hover{background:var(--accent);color:#FFFFFF}
.site-nav a.btn-nav.active{color:#FFFFFF}
.site-nav a.lang-link{font-family:var(--mono);font-size:13px;letter-spacing:0.06em;color:var(--muted);border:1px solid var(--border);border-radius:3px;padding:5px 9px}
.site-nav a.lang-link:hover{color:var(--accent);border-color:var(--accent)}
.btn{display:inline-block;border-radius:4px;font-weight:600;text-align:center}
.btn-nav{background:var(--navy);color:#FFFFFF;font-size:15px;padding:10px 22px}
.btn-nav:hover{background:var(--accent);color:#FFFFFF}
.btn-primary{background:var(--navy);color:#FFFFFF;font-size:16px;padding:14px 30px}
.btn-primary:hover{background:var(--accent);color:#FFFFFF}
.btn-outline{background:#FFFFFF;color:var(--navy);font-size:16px;padding:14px 30px;border:1px solid var(--navy)}
.btn-outline:hover{background:var(--bg);color:var(--navy)}
.btn-light{background:#FFFFFF;color:var(--navy);font-size:16px;padding:14px 32px}
.btn-light:hover{background:var(--bg);color:var(--navy)}

/* ---------- Sections & type ---------- */
section{padding:clamp(56px,8vw,104px) 24px}
section.hero{padding:clamp(64px,9vw,120px) 24px clamp(48px,6vw,96px)}
section.alt{background:var(--bg);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
section.stats{padding:36px 24px}
section.cta-dark{background:var(--navy);padding:clamp(64px,9vw,112px) 24px}
h1{margin:0 0 24px;font-size:clamp(34px,4.5vw,56px);line-height:1.15;font-weight:700;color:var(--navy);max-width:900px;text-wrap:pretty}
h1.sub-hero{font-size:clamp(34px,4vw,52px);max-width:880px}
h2{margin:0 0 40px;font-size:clamp(28px,3vw,38px);line-height:1.25;color:var(--navy);font-weight:700;text-wrap:pretty}
h2.tight{margin-bottom:12px;font-size:clamp(28px,3vw,36px)}
h2.mid{margin-bottom:16px;font-size:clamp(28px,3vw,36px)}
.eyebrow{margin:0 0 20px;font-family:var(--mono);font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent)}
.eyebrow.sm{font-size:12px;margin-bottom:12px}
.lead{margin:0 0 36px;font-size:18px;color:var(--muted);max-width:760px;text-wrap:pretty}
.section-intro{margin:0 0 36px;font-size:16px;color:var(--muted);max-width:700px;text-wrap:pretty}
.cta-row{display:flex;gap:16px;flex-wrap:wrap}

/* ---------- Grids ---------- */
.grid{display:grid;gap:24px}
.grid.g28{gap:28px}
.grid.g20{gap:20px}
.grid.cards{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid.wide-cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.grid.stufen{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.grid.phasen{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.grid.tech{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:32px}
.grid.split{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px;align-items:start}
.grid.split-lg{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:48px;align-items:start}
.grid.ref{grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:40px;align-items:start}
.grid.stats-band{display:flex;flex-wrap:wrap;justify-content:center;gap:28px 32px}
.stats-band .stat{flex:0 1 190px}
.grid.situationen{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:32px}
.grid.herausforderungen{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px 40px}
.grid.erfahrung{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:32px 48px;font-size:16px}
.grid.proj{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:32px}

/* ---------- Cards ---------- */
.card{border:1px solid var(--border);border-radius:6px;padding:32px;background:#FFFFFF}
.card.pad-lg{padding:40px}
.card.col{display:flex;flex-direction:column;gap:18px}
.card .num{margin:0 0 10px;font-family:var(--mono);font-size:12px;color:var(--accent)}
.card h3{margin:0 0 14px;font-size:21px;color:var(--navy);font-weight:600}
.card.col h3{margin:0;font-size:23px}
.card ul{margin:0;padding-left:20px;font-size:15px;color:var(--ink);display:flex;flex-direction:column;gap:5px}
.card.col ul{gap:6px}
.card .card-desc{margin:0;font-size:16px;color:var(--muted);text-wrap:pretty}
.card .more{margin-top:auto;font-weight:600;font-size:16px;color:var(--accent)}
.card .more:hover{color:var(--navy)}
.card.on-alt{background:#FFFFFF}

/* ---------- Stats band ---------- */
.stat b{display:block;font-size:26px;font-weight:700;color:var(--navy)}
.stat span{display:block;font-size:14px;color:var(--muted)}

/* ---------- Nummerierte Situationen ---------- */
.sit{display:flex;gap:16px}
.sit .num{font-family:var(--mono);font-size:14px;color:var(--accent);padding-top:3px}
.sit p{margin:0;font-size:16px;color:var(--ink);text-wrap:pretty}

/* ---------- Quadrat-Bullets ---------- */
.sq{display:flex;gap:14px;align-items:baseline}
.sq::before{content:"";width:8px;height:8px;background:var(--accent);flex:none;transform:translateY(-1px)}
.sq p{margin:0;font-size:16px;color:var(--ink)}

/* ---------- Akzent-Listen ---------- */
.accent-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px;font-size:16px;color:var(--ink)}
.accent-list.g12{gap:12px}
.accent-list.g10{gap:10px;font-size:15px}
.accent-list li{border-left:2px solid var(--accent);padding-left:16px}
.accent-list.g10 li{padding-left:14px}

/* ---------- Projekterfahrung (Startseite) ---------- */
.proj-card{border:1px solid var(--border);border-radius:6px;padding:40px}
.proj-card h3{margin:0;font-size:22px;color:var(--navy);font-weight:600;text-wrap:pretty}
.proj-card .body{font-size:16px;color:var(--ink)}
.proj-card .body p{margin:0 0 12px;text-wrap:pretty}
.proj-card .body p:last-child{margin-bottom:0}
.proj-card .body .soft{color:var(--muted)}
.transparenz{font-size:14px;color:var(--muted);font-style:italic}

/* ---------- Erfahrung (PE-Seite) ---------- */
.grid.erfahrung h3{margin:0 0 8px;font-size:16px;color:var(--navy);font-weight:600}
.grid.erfahrung p{margin:0;color:var(--ink);text-wrap:pretty}

/* ---------- Technologieprofil ---------- */
.tech h3{margin:0 0 12px;font-family:var(--mono);font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent);font-weight:500}
.tech ul{margin:0;padding:0;list-style:none;font-size:15px;color:var(--ink);display:flex;flex-direction:column;gap:6px}
.certs{margin-top:48px;border-top:1px solid var(--border);padding-top:32px}
.certs h3{margin:0 0 16px;font-size:18px;color:var(--navy);font-weight:600}
.certs .row{display:flex;gap:8px 20px;flex-wrap:wrap;align-items:baseline;margin-bottom:12px}
.certs .row:last-child{margin-bottom:0}
.certs .row-label{font-size:14px;color:var(--muted);font-weight:500;white-space:nowrap}
.certs ul{margin:0;padding:0;list-style:none;display:flex;gap:8px 28px;flex-wrap:wrap}
.certs ul.badges li{font-family:var(--mono);font-size:14px;color:var(--ink)}
.certs ul.plain li{font-size:14px;color:var(--ink)}

/* ---------- Retainer-Querband ---------- */
.band{margin-top:24px;border:1px solid var(--border);border-radius:6px;padding:32px 40px;background:var(--bg);display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px 48px;align-items:start}
.band .eyebrow{margin-bottom:10px;font-size:12px}
.band h3{margin:0;font-size:21px;color:var(--navy);font-weight:600}
.band p{margin:0;font-size:15px;color:var(--ink);text-wrap:pretty}
.band p.soft{margin-top:12px;font-size:14px;color:var(--muted)}

/* ---------- Souveränitätsstufen ---------- */
.stufe{background:#FFFFFF;border:1px solid var(--border);border-radius:6px;padding:28px;display:flex;flex-direction:column;gap:12px}
.stufe.default{border-color:var(--accent)}
.stufe .num{margin:0;font-family:var(--mono);font-size:12px;color:var(--accent)}
.stufe h3{margin:0;font-size:19px;color:var(--navy);font-weight:600}
.stufe p{margin:0;font-size:15px;color:var(--ink);text-wrap:pretty}
.stufe p.meta{font-size:14px;color:var(--muted)}
.stufe p.meta strong{color:var(--ink)}

/* ---------- Preis-Karte ---------- */
.price-card{border:1px solid var(--navy);border-radius:6px;padding:40px;background:#FFFFFF}
.price-card .label{margin:0 0 8px;font-family:var(--mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted)}
.price-card .price{margin:0 0 6px;font-size:44px;font-weight:700;color:var(--navy);line-height:1.1}
.price-card .vat{margin:0 0 20px;font-size:14px;color:var(--muted)}
.price-card .credit{margin:0 0 28px;font-size:16px;color:var(--ink);text-wrap:pretty}

/* ---------- Referenzarchitektur-Diagramm ---------- */
.diagram{background:#FFFFFF;border:1px solid var(--border);border-radius:6px;padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;gap:14px;font-family:var(--mono)}
.diagram .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.diagram .node{border:1px solid var(--border);border-radius:4px;padding:14px 16px;text-align:center;font-size:13px;color:var(--ink)}
.diagram .node small{display:block;color:var(--muted);font-size:12px}
.diagram .node.hl{border-color:var(--accent);color:var(--navy);background:var(--diagram-hl)}
.diagram .node.layer{border-style:dashed;border-color:var(--muted)}
.diagram .arrow{text-align:center;color:var(--muted);font-size:14px;line-height:1}

/* ---------- Tags ---------- */
.tags{display:flex;gap:10px 12px;flex-wrap:wrap}
.tag{font-family:var(--mono);font-size:13px;color:var(--ink);background:#FFFFFF;border:1px solid var(--border);border-radius:4px;padding:6px 12px}

/* ---------- Phasen ---------- */
.phase{background:#FFFFFF;border:1px solid var(--border);border-radius:6px;padding:28px}
.phase .num{margin:0 0 10px;font-family:var(--mono);font-size:12px;color:var(--accent)}
.phase h3{margin:0 0 12px;font-size:18px;color:var(--navy);font-weight:600}
.phase ul{margin:0;padding-left:18px;font-size:14px;color:var(--muted);display:flex;flex-direction:column;gap:4px}

/* ---------- FAQ ---------- */
.faq{max-width:780px;margin:0 auto}
.faq h2{margin-bottom:32px;font-size:clamp(28px,3vw,36px)}
.faq details{border-top:1px solid var(--border);padding:18px 0}
.faq details:last-child{border-bottom:1px solid var(--border)}
.faq summary{font-size:17px;font-weight:600;color:var(--navy);cursor:pointer}
.faq details p{margin:12px 0 0;font-size:16px;color:var(--muted);text-wrap:pretty}

/* ---------- Personen-Block ---------- */
.person-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:48px;align-items:start}
.portrait{width:100%;max-width:320px;height:340px;border-radius:6px;border:1px dashed var(--muted);background:#FFFFFF;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:14px}
.portrait img{width:100%;height:100%;object-fit:cover;border-radius:6px}
.person-grid .p-lead{margin:0 0 16px;font-size:17px;color:var(--ink);text-wrap:pretty}
.person-grid .p-soft{margin:0;font-size:16px;color:var(--muted);text-wrap:pretty}

/* ---------- Dunkle CTA-Sektion ---------- */
.cta-dark .inner{max-width:820px;margin:0 auto;text-align:center}
.cta-dark h2{margin:0 0 20px;font-size:clamp(28px,3.2vw,40px);color:#FFFFFF}
.cta-dark p{margin:0 0 32px;font-size:17px;color:var(--dark-text);text-wrap:pretty}
.cta-dark .mail{margin:28px 0 0;font-size:15px}
.cta-dark .mail a{color:var(--dark-link)}
.cta-dark .mail a:hover{color:#FFFFFF}

/* ---------- Kontaktseite ---------- */
.contact-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin:40px 0}
.contact-card{border:1px solid var(--border);border-radius:6px;padding:28px;display:flex;flex-direction:column;gap:12px}
.contact-card h3{margin:0;font-size:19px;color:var(--navy);font-weight:600}
.contact-card p{margin:0;font-size:15px;color:var(--muted);text-wrap:pretty}
.contact-card .btn{align-self:flex-start;margin-top:auto}
.contact-meta{font-size:16px;color:var(--ink)}
.contact-meta .mono{font-size:15px}

/* ---------- Footer ---------- */
.site-footer{padding:36px 24px;background:#FFFFFF;border-top:1px solid var(--border)}
.site-footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center;padding:0}
.site-footer .copy{font-size:14px;color:var(--muted)}
.site-footer nav{display:flex;gap:24px;font-size:14px;flex-wrap:wrap}
.site-footer nav a{color:var(--muted)}
.site-footer nav a:hover{color:var(--navy)}

/* ---------- Stationen (Startseite) ---------- */
.stationen{display:flex;flex-direction:column}
.station{display:grid;grid-template-columns:170px 1fr;gap:8px 36px;padding:22px 0;border-top:1px solid var(--border)}
.station:last-child{border-bottom:1px solid var(--border)}
.station .when{font-family:var(--mono);font-size:13px;color:var(--accent);padding-top:4px;white-space:nowrap}
.station h3{margin:0 0 4px;font-size:18px;color:var(--navy);font-weight:600;text-wrap:pretty}
.station p{margin:0;font-size:15px;color:var(--muted);text-wrap:pretty}
.station a{font-weight:600}
@media (max-width:640px){.station{grid-template-columns:1fr;gap:4px}}

/* ---------- Weitere Stationen (PE-Seite) ---------- */
.substack{margin-top:48px;border-top:1px solid var(--border);padding-top:32px}
.substack > h3{margin:0 0 24px;font-size:18px;color:var(--navy);font-weight:600}