@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:       #FAFAF8;
  --bg-card:  #F2F1EC;
  --bg-dark:  #111110;
  --ink:      #111110;
  --ink-mid:  #444440;
  --ink-muted:#767672;
  --ink-faint:#AEADA5;
  --border:   #DDDBD3;
  --white:    #FFFFFF;
  --font:     'Libre Franklin','Franklin Gothic Medium','Arial Narrow',sans-serif;
  --nav-h:    80px;
  --max:      1140px;
  --g:        clamp(20px,5vw,52px);
}

html { font-size:16px; scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body { background:var(--bg); color:var(--ink); font-family:var(--font); line-height:1.6; }
img  { display:block; max-width:100%; }
a    { color:inherit; text-decoration:none; }
ul   { list-style:none; }

.wrap { width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--g); }
.hr   { width:100%; height:1px; background:var(--border); }

/* ── Navigation ── */
nav {
  position:fixed; top:0; left:0; right:0; height:var(--nav-h);
  background:rgba(245,244,240,0.94); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border); z-index:100;
}
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:100%; }
.nav-links  { display:flex; align-items:center; gap:2rem; }
.nav-links a { font-size:.875rem; font-weight:500; letter-spacing:.01em; color:var(--ink-muted); transition:color .15s; }
.nav-links a:hover { color:var(--ink); }
.nav-logo img { display:block; height:53px; width:auto; }
@media (max-width:600px) { .nav-links { display:none; } }

/* ── Hero ── */
.hero { padding-top:calc(var(--nav-h) + 80px); padding-bottom:80px; }
.hero-title {
  font-size:clamp(2.75rem,6.5vw,5.5rem); font-weight:700;
  line-height:1.05; letter-spacing:-.025em; color:var(--ink);
  margin-bottom:28px; max-width:16ch;
}
.hero-title span { font-weight:300; font-style:italic; color:var(--ink); }
.hero-title mark { background:#FFFF00; color:var(--ink); padding:0 6px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.hero-body { font-size:1.0625rem; font-weight:300; line-height:1.75; color:var(--ink); max-width:500px; margin-bottom:40px; }
.hero-btns { display:flex; gap:10px; flex-wrap:wrap; }

.btn {
  display:inline-flex; align-items:center; gap:7px; padding:11px 20px; border-radius:3px;
  font-family:var(--font); font-size:.8125rem; font-weight:600; letter-spacing:.02em;
  cursor:pointer; border:none; transition:opacity .15s, background .15s;
}
.btn-dark    { background:var(--ink); color:var(--white); }
.btn-dark:hover  { opacity:.8; }
.btn-outline { background:transparent; color:var(--ink); border:1px solid var(--border); }
.btn-outline:hover { background:var(--bg-card); border-color:var(--ink-faint); }

.hero-stats {
  display:flex; gap:40px; flex-wrap:wrap;
  margin-top:56px; padding-top:32px; border-top:1px solid var(--border);
}
.stat-n { font-size:1.75rem; font-weight:700; letter-spacing:-.02em; color:var(--ink); line-height:1; }
.stat-l { font-size:.75rem; font-weight:400; color:var(--ink-muted); margin-top:5px; text-transform:uppercase; letter-spacing:.06em; }

/* ── Sektionen ── */
.sec { padding:clamp(64px,8vw,108px) 0; }
.sec-top { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:clamp(36px,4vw,56px); flex-wrap:wrap; }
.sec-eyebrow { font-size:.6875rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:10px; }
.sec-h { font-size:clamp(2rem,4.5vw,3.25rem); font-weight:700; letter-spacing:-.025em; line-height:1.05; color:var(--ink); }

/* ── Leistungen ── */
.l-table { width:100%; border-collapse:collapse; }
.l-table tr { border-bottom:1px solid var(--border); }
.l-table tr:first-child { border-top:1px solid var(--border); }
.l-table td { padding:16px 0; vertical-align:top; }
.l-name { width:220px; font-size:.9375rem; font-weight:600; letter-spacing:-.01em; color:var(--ink); padding-right:32px !important; white-space:nowrap; }
.l-desc { font-size:1rem; font-weight:300; line-height:1.65; color:var(--ink); }
@media (max-width:560px) {
  .l-table, .l-table tbody, .l-table tr, .l-table td { display:block; }
  .l-name { width:auto; padding-bottom:4px !important; padding-right:0 !important; white-space:normal; }
}

/* ── Kunden ── */
.kunden-sec { background:var(--bg-dark); }
.kunden-sec .sec-eyebrow { color:rgba(255,255,255,.3); }
.kunden-sec .sec-h { color:var(--white); }
.k-intro { font-size:clamp(.9375rem,2vw,1.125rem); font-weight:300; line-height:1.7; color:rgba(255,255,255,.45); max-width:560px; margin-bottom:40px; }
.k-filter { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:32px; }
.k-pill { padding:5px 13px; border:1px solid rgba(255,255,255,.1); border-radius:2px; font-size:.75rem; font-weight:500; letter-spacing:.02em; color:rgba(255,255,255,.4); cursor:pointer; transition:all .15s; }
.k-pill:hover, .k-pill.on { border-color:rgba(255,255,255,.4); color:var(--white); }
.k-list { border-top:1px solid rgba(255,255,255,.07); display:grid; grid-template-columns:repeat(3,1fr); }
@media (max-width:640px) { .k-list { grid-template-columns:1fr 1fr; } }
.k-row  { padding:14px 0; border-bottom:1px solid rgba(255,255,255,.07); }
.k-name { font-size:.875rem; font-weight:400; color:rgba(255,255,255,.65); }
.k-ort  { font-size:.875rem; font-weight:300; color:rgba(255,255,255,.55); }
.k-rest { margin-top:24px; font-size:.8125rem; color:rgba(255,255,255,.25); }

/* ── Team ── */
.team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:48px 32px; }
@media (max-width:600px) { .team-grid { grid-template-columns:1fr 1fr; } }
.team-grid > div { max-width:70%; }
.t-img { aspect-ratio:3/4; background:var(--bg-card); border-radius:3px; display:flex; align-items:center; justify-content:center; margin-bottom:12px; overflow:hidden; }
.t-img img { width:100%; height:100%; object-fit:cover; }
.t-initials { font-size:1.375rem; font-weight:600; letter-spacing:-.02em; color:var(--ink-faint); }
.t-name { font-size:.9375rem; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.t-name a { color:inherit; text-decoration:none; }
.t-name a:hover { text-decoration:underline; }
.t-role { font-size:.75rem; font-weight:400; color:var(--ink-muted); margin-top:3px; text-transform:uppercase; letter-spacing:.05em; }

/* ── Kontakt ── */
.kontakt-sec { background:var(--ink); }
.k2-solo { max-width:480px; }
.k2-h { font-size:clamp(2rem,4.5vw,3.25rem); font-weight:700; letter-spacing:-.025em; line-height:1.05; color:var(--white); margin-bottom:36px; }
.k2-infos { display:flex; flex-direction:column; gap:20px; }
.k2-label { font-size:.6875rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.3); margin-bottom:3px; }
.k2-val   { font-size:.9375rem; font-weight:300; color:rgba(255,255,255,.65); }
.k2-val a:hover { color:var(--white); }

/* ── Footer ── */
footer { padding:28px 0; border-top:1px solid var(--border); }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.footer-logo img { height:20px; width:auto; display:block; }
.footer-links { display:flex; gap:20px; }
.footer-links a { font-size:.75rem; color:var(--ink-muted); transition:color .15s; }
.footer-links a:hover { color:var(--ink); }
.footer-copy { font-size:.75rem; color:var(--ink-faint); }

/* ── Animationen ── */
@keyframes up { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
.hero-title { animation:up .5s ease both; }
.hero-body  { animation:up .5s .08s ease both; }
.hero-btns  { animation:up .5s .16s ease both; }
.hero-stats { animation:up .5s .24s ease both; }