/* bpExperts AI Managed Services: Gestaltung wie www.bpexperts.de (Stand 12.11.2026).
   Schriften Jost (Ueberschriften) und Carlito (Text), Schwarz/Weiss, Gelb #EDE330 als Markenakzent,
   Navy und Orange als Nebenfarben, Karten mit 10 px Rundung und farbiger linker Kante.
   Farben zentral hier aendern. Gleiche Datei in beiden Diensten (Guidelines, SOW Studio). */

@font-face { font-family:"Jost"; font-style:normal; font-weight:400 600; font-display:swap; src:url("../fonts/jost-latin.woff2") format("woff2"); }
@font-face { font-family:"Carlito"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/carlito-regular.woff2") format("woff2"); }
@font-face { font-family:"Carlito"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/carlito-bold.woff2") format("woff2"); }
@font-face { font-family:"Carlito"; font-style:italic; font-weight:400; font-display:swap; src:url("../fonts/carlito-italic.woff2") format("woff2"); }

:root {
  --black:#000000; --ink:#191919; --gray-900:#191919; --gray-700:#3A3A3A; --gray-600:#4A4A4A; --gray-500:#555555;
  --gray-400:#BFBFBF; --gray-300:#E2E1DC; --tint:#FAFAF8; --white:#FFFFFF;
  --yellow:#EDE330; --navy:#4E5E74; --link:#2D436C; --orange:#F27A3D; --purple:#7072D0; --pink:#F2607D; --success:#A4C200;
  --font-heading:"Jost","Century Gothic",Futura,system-ui,sans-serif;
  --font-body:"Carlito",Calibri,system-ui,sans-serif;
  --max:72rem; --radius:6px; --radius-card:10px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:var(--font-body); font-size:18px; line-height:1.55; color:var(--gray-900); background:var(--tint); -webkit-font-smoothing:antialiased; }
a { color:var(--link); }
img { max-width:100%; }
.wrap { max-width:var(--max); margin:0 auto; padding:0 24px; }

/* Streifen oben, schwarz mit orangem Etikett (wie der Signals-Ticker auf bpexperts.de) */
.topbar { background:var(--black); border-bottom:1px solid var(--gray-300); }
.topbar .wrap { display:flex; align-items:center; gap:12px; padding-top:6px; padding-bottom:6px; }
.topbar .label { background:var(--orange); color:var(--white); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:2px 6px; border-radius:2px; }
.topbar .text { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; color:var(--gray-300); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Kopf: weiss, Logo links, Navigation, schwarzer Knopf rechts */
.site-header { background:var(--white); border-bottom:1px solid var(--gray-300); }
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; height:64px; gap:16px; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--gray-900); }
.brand img { height:32px; width:auto; }
.brand .svc { font-family:var(--font-heading); font-weight:500; font-size:17px; padding-left:12px; border-left:1px solid var(--gray-400); }
.nav { display:flex; align-items:center; gap:28px; }
.nav a { font-size:15px; color:var(--gray-700); text-decoration:none; }
.nav a:hover { color:var(--link); }
.btn { display:inline-block; background:var(--black); color:var(--white); border:1px solid var(--black); border-radius:var(--radius); padding:9px 18px; font-family:var(--font-body); font-size:15px; text-decoration:none; cursor:pointer; }
.btn:hover { background:var(--navy); border-color:var(--navy); }
.btn.ghost { background:transparent; color:var(--gray-900); border-color:var(--gray-400); }
.btn.ghost:hover { border-color:var(--black); background:transparent; }

/* Einstieg: schwarze Pille mit gelber Schrift, grosse Jost-Ueberschrift, gelb hinterlegte Kernaussagen */
.hero { background:var(--white); border-bottom:1px solid var(--gray-300); }
.hero .wrap { padding-top:72px; padding-bottom:72px; }
.pill { display:inline-flex; align-items:center; background:var(--black); color:var(--yellow); font-family:var(--font-heading); font-size:14px; font-weight:500; letter-spacing:.03em; padding:8px 20px; border-radius:999px; }
.hero h1 { font-family:var(--font-heading); font-weight:400; font-size:clamp(34px,5vw,52px); line-height:1.1; margin:24px 0 0; max-width:42rem; }
.marks { display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-top:24px; }
.mark { display:inline-block; background:var(--yellow); color:var(--black); font-family:var(--font-heading); font-weight:500; font-size:clamp(18px,2.4vw,24px); padding:4px 12px; }
.lead { font-size:19px; color:var(--gray-500); max-width:42rem; margin:28px 0 0; }
.actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }

/* Abschnitte */
section { padding:64px 0; border-bottom:1px solid var(--gray-300); }
section.white { background:var(--white); }
.eyebrow { font-family:var(--font-heading); font-size:13px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--navy); margin:0 0 10px; }
h2 { font-family:var(--font-heading); font-weight:400; font-size:clamp(26px,3.4vw,34px); line-height:1.2; margin:0 0 14px; }
h3 { font-family:var(--font-heading); font-weight:500; font-size:20px; line-height:1.3; margin:0 0 8px; }
.section-intro { color:var(--gray-500); max-width:48rem; margin:0 0 32px; }

/* Karten mit farbiger linker Kante */
.grid { display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.card { background:var(--white); border:1px solid var(--gray-300); border-left:4px solid var(--yellow); border-radius:var(--radius-card); padding:22px 22px 20px; }
.card.navy { border-left-color:var(--navy); } .card.orange { border-left-color:var(--orange); } .card.purple { border-left-color:var(--purple); }
.card p { color:var(--gray-500); font-size:16px; margin:0; }
.card .num { font-family:var(--font-heading); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--gray-500); margin-bottom:6px; }

/* Status-Etiketten */
.status { display:inline-block; font-family:var(--font-heading); font-size:12px; font-weight:500; letter-spacing:.05em; text-transform:uppercase; padding:3px 10px; border-radius:999px; margin-top:12px; }
.status.open { background:rgba(78,94,116,.1); color:var(--navy); }
.status.active { background:rgba(237,227,48,.25); color:var(--black); }
.status.review { background:rgba(242,122,61,.12); color:#9A4313; }
.status.done { background:rgba(164,194,0,.18); color:#4A5C00; }

/* Tabellen */
table { width:100%; border-collapse:collapse; background:var(--white); border:1px solid var(--gray-300); border-radius:var(--radius-card); overflow:hidden; font-size:16px; }
th, td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--gray-300); vertical-align:top; }
th { font-family:var(--font-heading); font-weight:500; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--navy); background:var(--tint); }
.empty { color:var(--gray-500); font-style:italic; }

/* Hinweis */
.note { background:rgba(237,227,48,.1); border-left:4px solid var(--yellow); border-radius:var(--radius-card); padding:16px 20px; color:var(--gray-700); font-size:16px; }

/* Fuss */
.site-footer { background:var(--black); color:var(--gray-400); font-size:14px; }
.site-footer .wrap { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding-top:28px; padding-bottom:28px; }
.site-footer a { color:var(--white); text-decoration:none; }
.site-footer a:hover { color:var(--yellow); }

@media (max-width:760px) {
  .nav a.hide-sm { display:none; }
  .hero .wrap { padding-top:48px; padding-bottom:48px; }
  section { padding:44px 0; }
}