:root{
  --bg: #f8fafc;
  --surface: #ffffff;
  --ink: #0f172a;
  --muted: #475569;
  --line: #e2e8f0;
  --indigo: #4f46e5;
  --violet: #7c3aed;
  --shadow: 0 10px 30px rgba(79,70,229,.15);
  --radius-xl: 24px;
  --radius-lg: 16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  color: var(--ink);
  background: linear-gradient(#f1f5f9, #fff 40%, #f1f5f9 100%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.container{max-width:1120px;margin:0 auto;padding:0 24px}

.h1{font-size: clamp(32px, 4.2vw, 48px);line-height:1.1;margin:0 0 8px;font-weight: 800}
.h2{font-size: clamp(24px, 3.2vw, 36px);line-height:1.15;margin:0 0 8px;font-weight: 800}
.h3{font-size: clamp(18px, 2.2vw, 22px);line-height:1.2;margin:0 0 8px;font-weight: 700}
.h4{font-size: 16px;margin:0 0 8px;font-weight: 700}
.lead{font-size:18px;color:var(--muted);margin:12px 0 0;max-width:640px}
.muted{color:var(--muted)}
.fine{color:#64748b;font-size:14px;line-height:1.6;margin:8px 0}
.ta-center{text-align:center}
.maxw-720{max-width:720px;margin-left:auto;margin-right:auto}
.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-40{margin-top:40px}.mt-56{margin-top:56px}

.text-gradient{
  background: linear-gradient(90deg, var(--indigo), var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Header */
.header{
  position: fixed; top:0; left:0; right:0; z-index: 1000;
  backdrop-filter: blur(6px);
  background: rgba(255,255,255,.85);
  border-bottom: 1px solid var(--line);
  transition: padding .25s ease, box-shadow .25s ease, background .25s ease;
  padding: 16px 0;
}
.header.shrink{ padding: 10px 0; box-shadow: 0 6px 18px rgba(15,23,42,.05) }
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:700}
.brand__dot{width:24px;height:24px;border-radius:6px;background: var(--indigo)}
.brand__dot--dark{background:#0f172a}
.brand--footer .brand__text{text-transform:lowercase}
.nav{display:none;gap:20px;align-items:center}
.nav a{color:#334155;text-decoration:none;font-weight:600}
.nav a:hover{color:var(--indigo)}
.menu-btn{display:inline-flex;flex-direction:column;gap:4px;background:transparent;border:0;cursor:pointer}
.menu-btn span{width:22px;height:2px;background:#334155;display:block;border-radius:1px}
@media(min-width: 900px){ .nav{display:flex} .menu-btn{display:none} }

/* Mobile menu */
.mobile-menu{ background: rgba(255,255,255,.95); border-top:1px solid var(--line); }
.mobile-menu nav{ display:grid; gap:8px; padding:16px 24px 24px }
.mobile-menu a{ padding:12px 10px; border-radius:12px; text-decoration:none; color:#0f172a; font-weight:600 }
.mobile-menu a:hover{ background:#f1f5f9 }

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:16px;padding:12px 20px;
  font-weight:700;text-decoration:none;cursor:pointer;border:0}
  .btn2{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:16px;padding:12px 20px;
  font-weight:700;text-decoration:none;cursor:pointer;border:0; color: #fff !important}
.btn--primary{background:var(--indigo);color:#fff;box-shadow:var(--shadow)}
.btn--primary:hover{filter:brightness(1.05)}
.btn--ghost{background:transparent;color:#334155;border:1px solid #e2e8f0}
.btn--ghost:hover{background:#f1f5f9}
.btn--block{display:block;width:100%}
.btn--light{background:#fff;color:#0f172a;box-shadow:var(--shadow)}
.btn--ghost-light{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25)}
.btn--ghost-light:hover{background:rgba(255,255,255,.2)}

/* Sections */
.section{padding:80px 0}
.hero{padding-top:120px}
.grid-2{display:grid;grid-template-columns:1fr;gap:40px}
@media(min-width: 1000px){ .grid-2{grid-template-columns: 1.1fr .9fr} }

.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}



.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(79,70,229,0.1); /* leichter Indigo-Hintergrund */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.card-icon .material-symbols-outlined {
  font-size: 28px;
  color: var(--indigo);
}


/* KPI */
.kpi-grid{display:grid;grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; margin-top:28px; max-width:640px}
.kpi-grid--3{max-width:none}
.kpi-card{background:rgba(255,255,255,.7);backdrop-filter: blur(6px);border:1px solid var(--line);border-radius:16px;padding:12px;text-align:center}
.kpi-number{font-size:28px;font-weight:800;color:var(--indigo)}
.kpi-label{font-size:14px;color:#475569}

/* Viz box */
.hero__viz{display:flex;align-items:center;justify-content:center}
.viz-box{
  position:relative; width:min(620px, 92vw); height:560px; padding:24px; border-radius:40px;
  background: linear-gradient(135deg, rgba(79,70,229,.08), rgba(124,58,237,.08));
  border: 1px solid var(--line);
  display:flex;align-items:center;justify-content:center; overflow:visible;
}
.viz-ring{position:absolute; inset:0; margin:auto; width:420px; height:420px; animation: spin 40s linear infinite}
.ring-bg{fill:none; stroke:#e2e8f0; stroke-width:2}
.ring-dash{fill:none; stroke:#a5b4fc; stroke-width:2; stroke-linecap:round; stroke-dasharray:10 12; animation: dash 18s linear infinite}
@keyframes spin{ to{ transform: rotate(360deg) } }
@keyframes dash{ to{ stroke-dashoffset: -1200 } }

.viz-grid{ position:relative; display:grid; grid-template-columns:repeat(2, 1fr); gap:24px }
.card{
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 18px rgba(2,6,23,.04);
  transition: transform .2s ease, box-shadow .2s ease;
  display: flex;            /* NEU für Layout */
  flex-direction: column;   /* NEU: Inhalte untereinander */
  align-items: center;      /* NEU: alles zentriert */
  text-align: center;       /* NEU: Text mittig */
}
.card:hover{ transform: translateY(-4px) scale(1.02); box-shadow: 0 14px 28px rgba(2,6,23,.08) }
.card h3{margin:0 0 6px;font-size:16px}
.card p{margin:0;color:#475569;font-size:14px;line-height:1.5}

/* Logo grid */
.logo-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:24px}
.logo{border:1px solid var(--line); background:#fff; border-radius:12px; padding:14px; text-align:center; color:#64748b; font-weight:700}
@media(min-width: 700px){ .logo-grid{ grid-template-columns:repeat(4,1fr)}}

/* Timeline */
.timeline{position:relative; margin-top:28px}
.timeline__line{position:absolute; left:12px; top:0; bottom:0; width:2px; background:linear-gradient(180deg,var(--indigo),var(--violet))}
.timeline__item{position:relative; padding-left:40px; margin:28px 0}
.timeline__item .dot{position:absolute; left:4px; top:6px; width:16px; height:16px; background:var(--indigo); border-radius:999px; box-shadow: 0 0 0 4px #fff}
.timeline__item .content{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;box-shadow:0 8px 18px rgba(2,6,23,.04)}

/* Card grid */
.card-grid{display:grid; grid-template-columns: 1fr; gap:16px}
@media(min-width: 900px){ .card-grid{ grid-template-columns: repeat(3, 1fr) } }

/* CTA */
.section--cta{ padding-bottom: 100px }
.cta-box{
  background: linear-gradient(135deg, var(--indigo), var(--violet));
  color:#fff; border-radius: 28px; padding: 36px; box-shadow: var(--shadow);
}
.c-white{color:#fff}.c-white-90{color:rgba(255,255,255,.9)}.c-white-70{color:rgba(255,255,255,.7)}
.form-grid{ display:grid; grid-template-columns: 1fr; gap:14px; margin-top:20px }
.form-item{ display:flex; flex-direction:column; gap:6px }
.form-item span{ font-size:12px; color:rgba(255,255,255,.85) }
.form-item input, .form-item textarea{
  background: rgba(255,255,255,.92); border:1px solid rgba(255,255,255,.5);
  color:#0f172a; border-radius:14px; padding:10px 12px; outline:none
}
.form-item--full{ grid-column: 1 / -1 }
.form-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:4px }

/* Footer */
.footer{ border-top:1px solid var(--line); background: rgba(255,255,255,.85); padding: 32px 0 40px; }
.footer__grid{ display:grid; grid-template-columns: 1fr; gap:20px }
.footer__links{ display:flex; gap:16px; margin-top: 12px }
.footer__links a{ color:#64748b; text-decoration:none }
.footer__links a:hover{ color:#0f172a }
@media(min-width: 900px){ .footer__grid{ grid-template-columns: repeat(2,1fr) } }

/* Utilities */
.hidden{display:none}
@media(min-width: 1000px){
  .viz-ring{width:420px;height:420px}
}