:root{
  --paper: #ffffff;
  --ink: #0a1420;
  --ink-soft: #3c4a56;
  --blue: #0059a5;
  --blue-vivid: #0068c4;
  --blue-deep: #013b6e;
  --green: #8aae1a;
  --green-vivid: #9fcb00;
  --line: rgba(10,20,32,0.12);
  --body: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation:none !important; transition:none !important; } }

body{ background:var(--paper); color:var(--ink); font-family:var(--body); line-height:1.6; -webkit-font-smoothing:antialiased; }
a{ color:var(--blue); }
.wrap{ max-width:1080px; margin:0 auto; padding:0 28px; }

/* ---------- NAV: fixed slim side rail on desktop, top bar on mobile ---------- */
header{ position:sticky; top:0; z-index:60; background:rgba(255,255,255,0.95); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); }
.navbar{ max-width:1080px; margin:0 auto; padding:16px 28px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.brand img{ height:34px; display:block; }
nav ul{ list-style:none; display:flex; gap:4px; flex-wrap:wrap; }
nav a{ text-decoration:none; font-size:0.8rem; font-weight:700; color:var(--ink-soft); padding:8px 12px; border-radius:4px; }
nav a:hover, nav a:focus-visible{ background:#eef4fa; color:var(--blue); outline:none; }
nav a.current{ background:var(--blue); color:#fff; }

/* ---------- HERO: diagonal color block ---------- */
.hero{
  position:relative; overflow:hidden;
  background:var(--blue);
  padding:100px 0 140px;
  clip-path:polygon(0 0, 100% 0, 100% 82%, 0 100%);
}
.hero .wrap{ position:relative; z-index:2; }
.hero .kicker{ font-size:0.8rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--green-vivid); margin-bottom:20px; }
.hero h1{ font-size:clamp(2.4rem, 6vw, 4.2rem); font-weight:800; line-height:1.04; letter-spacing:-0.02em; color:#fff; max-width:760px; }
.hero .motto{ font-size:1.1rem; color:#dceaf7; max-width:600px; margin-top:22px; }
.hero .lead{ font-size:1rem; color:#b9d3ea; max-width:600px; margin-top:10px; }
.hero-blob{
  position:absolute; right:-120px; top:-120px; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--blue-vivid), transparent 70%);
  opacity:0.6; z-index:1;
}

/* stacked avatars trust row, overlapping hero bottom edge */
.trust-row{
  position:relative; z-index:3; margin-top:-56px;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  background:#fff; border-radius:16px; padding:22px 26px; box-shadow:0 14px 40px rgba(10,20,32,0.14);
  max-width:640px;
}
.avatar-stack{ display:flex; }
.avatar-stack img{
  width:52px; height:52px; border-radius:50%; object-fit:cover; border:3px solid #fff;
  margin-left:-14px; box-shadow:0 2px 6px rgba(10,20,32,0.2);
}
.avatar-stack img:first-child{ margin-left:0; }
.trust-row .txt{ font-size:0.92rem; color:var(--ink); }
.trust-row .txt strong{ color:var(--blue); }

/* ---------- PULLQUOTE BAND ---------- */
.pullquote-band{ background:var(--green); padding:70px 0; margin-top:60px; }
.pullquote-band blockquote{
  font-size:clamp(1.5rem, 3.6vw, 2.4rem); font-weight:800; color:#0a1400; line-height:1.25;
  max-width:820px;
}
.pullquote-band cite{ display:block; margin-top:20px; font-style:normal; font-size:0.85rem; font-weight:700; color:#20330a; }

/* ---------- WER WIR SIND ---------- */
section.block{ padding:64px 0; }
.block .kicker{ font-size:0.78rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:var(--green); margin-bottom:14px; }
.block h2{ font-size:clamp(1.7rem, 3.6vw, 2.3rem); font-weight:800; letter-spacing:-0.01em; color:var(--ink); margin-bottom:18px; }
.block p.lead{ color:var(--ink-soft); max-width:680px; font-size:1.02rem; }

/* ---------- BENTO OVERVIEW GRID ---------- */
.bento{
  display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:120px; gap:14px; margin-top:32px;
}
.bento a, .bento .bcell{
  display:block; text-decoration:none; border-radius:14px; padding:22px; position:relative; overflow:hidden;
}
.bento a:hover, .bento a:focus-visible{ outline:none; transform:translateY(-2px); transition:transform .15s; }
.bento .t-label{ font-family:var(--mono); font-size:0.62rem; letter-spacing:0.08em; text-transform:uppercase; opacity:0.75; }
.bento h3{ font-size:1.15rem; font-weight:800; margin-top:8px; }
.bento p{ font-size:0.85rem; margin-top:6px; opacity:0.9; }

.b-leistungen{ grid-column:span 2; grid-row:span 2; background:var(--blue); color:#fff; }
.b-leistungen h3, .b-leistungen p{ color:#fff; }
.b-team{ grid-column:span 2; grid-row:span 1; background:#eef4fa; color:var(--ink); }
.b-produkte{ grid-column:span 1; grid-row:span 1; background:var(--green); color:#0a1400; }
.b-produkte h3{ color:#0a1400; }
.b-news{ grid-column:span 1; grid-row:span 1; background:#f2f2ee; color:var(--ink); }
.b-downloads{ grid-column:span 2; grid-row:span 1; background:var(--blue-deep); color:#fff; }
.b-downloads h3, .b-downloads p{ color:#fff; }

@media (max-width:820px){
  .bento{ grid-template-columns:repeat(2,1fr); grid-auto-rows:130px; }
  .b-leistungen{ grid-column:span 2; grid-row:span 1; }
  .b-team{ grid-column:span 2; }
  .b-downloads{ grid-column:span 2; }
}
@media (max-width:520px){
  .bento{ grid-template-columns:1fr; }
  .b-leistungen, .b-team, .b-produkte, .b-news, .b-downloads{ grid-column:span 1; grid-row:auto; min-height:110px; }
}

/* ---------- KONTAKT: diagonal closing band ---------- */
.kontakt-band{
  position:relative; background:var(--ink); color:#fff; padding:90px 0 70px;
  clip-path:polygon(0 12%, 100% 0, 100% 100%, 0 100%);
  margin-top:40px;
}
.kontakt-band .kicker{ color:var(--green-vivid); }
.kontakt-band h2{ color:#fff; }
.kontakt-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:32px; }
@media (max-width:760px){ .kontakt-grid{ grid-template-columns:1fr 1fr; } }
.kontakt-grid .k{ font-size:0.7rem; text-transform:uppercase; letter-spacing:0.06em; color:#9fb3c4; margin-bottom:6px; }
.kontakt-grid .v{ font-size:1rem; }
.kontakt-grid a{ color:#fff; border-bottom:1px solid var(--green-vivid); text-decoration:none; }
.kontakt-band .note{ margin-top:30px; color:#c3d2dd; font-size:0.9rem; max-width:600px; }
.kontakt-band .note a{ color:#fff; }

footer{ padding:26px 0; text-align:center; font-size:0.78rem; color:var(--ink-soft); background:var(--ink); color:#8ea0af; }
footer a{ color:#8ea0af; }
footer a:hover{ color:var(--green-vivid); }