:root{
  --bg:#0b1020; 
  --bg-2:#0e1430;
  --card:#141a33cc; 
  --text:#fefefe; 
  --muted:#cfcfcf;

  /* Gelbes Corporate Design */
  --primary:#FFD60A;       /* Hauptgelb */
  --primary-2:#FFB703;     /* wärmeres Gelb/Orange */
  --accent:#FFF3B0;        /* helles Gelb für Akzente */

  --ring:#FFD60A;
  --border:#2a2a2a; 
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; 
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 1200px at 10% -10%, #1a1a1a 0%, transparent 60%),
    radial-gradient(800px 800px at 100% 0%, #111 0%, transparent 55%),
    var(--bg);
  background-attachment: fixed; 
  line-height:1.6;
}

.container{width:min(1120px, 92vw); margin-inline:auto}

.h1{font-size: clamp(2.2rem, 1.6rem + 2.5vw, 3.2rem); line-height:1.12; margin:0 0 10px}
.h2{font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem); line-height:1.2; margin:0 0 8px}
.lead{font-size:1.125rem; color:var(--muted); margin:0 0 18px}
.sub{color:var(--muted); margin:4px 0 0}
.muted{color:var(--muted)}
.tiny{font-size:.85rem; color:var(--muted)}

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

.header{
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  gap:16px; 
  padding:18px 0
}
.brand{
  display:flex; 
  gap:10px; 
  align-items:center; 
  text-decoration:none; 
  color:var(--text)
}
.brand-logo{color:var(--primary)}
.brand-text{font-weight:700; letter-spacing:.2px}

.nav{position:relative}
.nav-toggle{display:none; background:transparent; border:0; cursor:pointer; padding:8px; border-radius:12px}
.nav-toggle span{display:block; width:22px; height:2px; background:#eee; margin:5px 0; transition:.25s}
.nav-list{display:flex; gap:18px; align-items:center; list-style:none; padding:0; margin:0}
.nav-list a{color:var(--text); text-decoration:none; opacity:.9}
.nav-list a:hover{opacity:1; color:var(--primary)}

.btn{
  display:inline-flex; 
  align-items:center; 
  justify-content:center; 
  gap:8px; 
  padding:12px 16px; 
  border-radius:14px; 
  text-decoration:none; 
  border:1px solid var(--border); 
  background:linear-gradient(180deg,#1a1a1a,#121212); 
  color:var(--text); 
  box-shadow:var(--shadow); 
  transition:.2s transform,.2s box-shadow,.2s opacity
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

.btn-primary{
  border-color: transparent;
  background: linear-gradient(180deg, var(--primary), var(--primary-2));
  color:#0b1020; 
  font-weight:700;
}
.btn-outline{
  background: transparent; 
  border:1px solid var(--border)
}

.hero{
  display:grid; 
  grid-template-columns: 1.1fr .9fr; 
  gap:40px; 
  align-items:center; 
  padding:40px 0 10px
}
.hero-ctas{display:flex; gap:10px; margin:10px 0 4px}

.phone{
  width:min(350px,85%); 
  margin-inline:auto; 
  aspect-ratio:9/18; 
  border-radius:36px; 
  border:1px solid #333; 
  padding:16px; 
  background:linear-gradient(180deg,#111,#0b0b0b); 
  box-shadow:var(--shadow); 
  position:relative
}
.phone-notch{
  position:absolute; 
  left:50%; 
  top:8px; 
  transform:translateX(-50%); 
  width:120px; 
  height:18px; 
  background:#0b0b0b; 
  border-radius:0 0 14px 14px; 
  border:1px solid #222
}
.phone-screen{
  height:100%; 
  border-radius:24px; 
  overflow:hidden; 
  display:flex; 
  flex-direction:column; 
  gap:12px; 
  padding:16px
}
.app-top{display:flex; gap:6px}
.app-top .dot{width:8px; height:8px; background:#444; border-radius:50%}
.app-card{padding:14px; border-radius:16px; background:#1d1d1d; border:1px solid #333}
.glass{
  background:linear-gradient(to bottom right, rgba(255,214,10,.15), rgba(255,183,3,.05));
  backdrop-filter:blur(8px)
}
.app-eyebrow{
  font-size:.75rem; 
  letter-spacing:.08em; 
  color:var(--primary); 
  text-transform:uppercase; 
  margin:0 0 6px
}
.checklist{list-style:none; padding:0; margin:8px 0 0}
.checklist li{display:flex; align-items:center; gap:8px; opacity:.95}
.progress{height:8px; background:#222; border-radius:999px; overflow:hidden; border:1px solid #333}
.progress .bar{height:100%; background: linear-gradient(90deg, var(--primary), var(--accent))}
.q{margin:8px 0 0; color:#eee}

.logos{padding:28px 0 10px}
.logos-title{text-align:center; color:var(--muted); margin-bottom:16px}
.logo-row{display:grid; grid-template-columns: repeat(5,1fr); gap:18px; opacity:.8}
.logo{
  border:1px dashed #333; 
  border-radius:12px; 
  padding:12px; 
  text-align:center; 
  letter-spacing:.08em; 
  text-transform:uppercase; 
  font-size:.85rem
}
.logo .dot{opacity:.5}

.faq{padding:46px 0}
.qa{border:1px solid var(--border); border-radius:14px; background:#101010; padding:14px 16px; margin:10px 0}
.qa summary{cursor:pointer; font-weight:600}
.qa[open] summary{color:var(--primary)}

.contact{padding:40px 0}
.contact-box{
  background:var(--card); 
  border:1px solid var(--border); 
  border-radius:18px; 
  padding:28px; 
  text-align:center; 
  box-shadow:var(--shadow)
}
.contact-email{
  display:inline-block; 
  margin:16px 0; 
  padding:14px 20px; 
  border-radius:12px; 
  background:var(--primary); 
  color:#0b1020; 
  font-weight:700; 
  text-decoration:none; 
  box-shadow:0 6px 18px rgba(0,0,0,.25)
}
.contact-email:hover{opacity:.9}

.policy{padding:40px 0}

.footer{
  border-top:1px solid var(--border); 
  background:#0b0b0baa; 
  backdrop-filter:blur(6px); 
  margin-top:40px
}
.footer-grid{
  display:grid; 
  grid-template-columns:1fr auto auto; 
  gap:16px; 
  align-items:center; 
  padding:16px 0
}
.footer-nav{display:flex; gap:14px}
.footer-nav a{color:var(--muted); text-decoration:none}
.footer-nav a:hover{color:var(--primary)}
.footer-meta{color:var(--muted); font-size:.9rem}

.bg-blob{
  position:fixed; 
  z-index:-1; 
  filter:blur(80px); 
  opacity:.5; 
  pointer-events:none
}
.bg-blob-1{
  width:420px; 
  height:420px; 
  background:radial-gradient(circle at 30% 30%, var(--primary), transparent 60%); 
  left:-100px; 
  top:120px
}
.bg-blob-2{
  width:520px; 
  height:520px; 
  background:radial-gradient(circle at 70% 30%, var(--accent), transparent 60%); 
  right:-160px; 
  top:220px
}

/* Router visibility */
.route{display:none}
.route.visible{display:block}

/* Animations */
.fade-up{opacity:0; transform:translateY(10px); animation:fadeUp .6s var(--delay, 0ms) ease forwards}
@keyframes fadeUp{to{opacity:1; transform:none}}

/* Responsive */
@media (max-width:980px){
  .hero{grid-template-columns:1fr; gap:26px}
  .logo-row{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .nav-toggle{display:inline-block}
  .nav-list{
    position:absolute; 
    right:0; 
    top:44px; 
    background:#111e; 
    backdrop-filter:blur(8px);
    border:1px solid var(--border); 
    border-radius:16px; 
    padding:8px; 
    width:max(58vw,220px);
    display:none; 
    flex-direction:column; 
    align-items:stretch
  }
  .nav-list.show{display:flex}
  .footer-grid{grid-template-columns:1fr; text-align:center}
}
/* ===== Kompaktere Sektionen für Leistungen & Werte ===== */

.section-compact { padding: 36px 0 22px; }
.section-compact .section-head { margin-bottom: 12px; }
.section-compact .h2 { margin-bottom: 4px; }

/* engere, responsive Grids */
.grid-2-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.grid-3-4 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* Service-Karten */
.service{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--shadow);
}
.service-head{
  display:flex; align-items:center; gap:10px; margin-bottom:8px;
}
.service-icon{
  width:36px; height:36px; border-radius:10px;
  display:grid; place-items:center;
  background: #111;
  color: var(--primary);
  border: 1px solid var(--border);
}
.service h3{ margin: 0; font-size: 1.05rem; line-height: 1.25 }
.service-desc{ margin: 6px 0 10px; color: var(--muted); font-size: .98rem }

/* Werte-Karten */
.value{
  background: linear-gradient(to bottom right, rgba(255,214,10,.08), rgba(0,0,0,.0));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
}
.value h3{ margin:0 0 6px; font-size:1.02rem }
.value p{ margin:0 0 8px; color:var(--muted); font-size:.97rem }

/* Check-Listen */
.list-check{
  list-style:none; padding-left: 0; margin: 10px 0 0;
}
.list-check li{
  display:flex; align-items:flex-start; gap:8px; margin: 6px 0;
  font-size:.95rem;
}
.list-check li::before{
  content:""; width:18px; height:18px; margin-top:2px; flex:0 0 18px;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z"/></svg>') no-repeat center / contain;
  background: var(--primary);
}
.list-check.tight li{ margin: 4px 0; }

/* KPI-Chips */
.kpis{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px }
.chip{
  font-size:.8rem; font-weight:700; letter-spacing:.02em;
  padding:6px 10px; border-radius:999px;
  background: linear-gradient(180deg, var(--primary), var(--primary-2));
  color:#0b1020;
  border: 1px solid #00000022;
}

/* Typo leicht kleiner und Abstände reduziert innerhalb dieser Sektionen */
.section-compact p, .section-compact li { line-height: 1.5 }

/* Responsive Tweaks */
@media (max-width: 1100px){
  .grid-2-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px){
  .grid-2-3, .grid-3-4 { grid-template-columns: 1fr; }
  .service, .value { padding: 14px; }
  .service h3, .value h3 { font-size: 1rem; }
}
/* ==== Hero Dashboard Mockup (ersetzt Handy) ==== */
.mockup{
  border:1px solid var(--border);
  border-radius:20px;
  padding:16px;
  width:min(520px, 92%);
  margin-inline:auto;
  background:
    linear-gradient(180deg, rgba(255,214,10,.08), rgba(0,0,0,.0)),
    linear-gradient(180deg, #0f0f12, #0a0a0c);
  box-shadow: var(--shadow);
}

.mockup-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
.mockup-brand{
  display:flex; align-items:center; gap:8px; color:var(--text); opacity:.95;
}
.mockup-brand svg{ color:var(--primary) }
.mockup-pill{
  display:inline-block; font-size:.75rem; letter-spacing:.04em; font-weight:700;
  padding:6px 10px; border-radius:999px;
  background: linear-gradient(180deg, var(--primary), var(--primary-2));
  color:#0b1020; border:1px solid #00000022;
}

.mockup-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

/* Tiles */
.tile{
  border:1px solid var(--border);
  border-radius:16px;
  background: #111418;
  padding:12px 14px;
  min-height: 120px;
}
.tile .eyebrow{
  font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--primary); margin:0 0 4px;
}
.tile h3{
  margin:0 0 6px; font-size:1.4rem; line-height:1.1;
}
.tile .hint{ margin:6px 0 0; color:var(--muted); font-size:.85rem }

/* KPI Bars / Sparkline */
.bars{ display:flex; align-items:flex-end; gap:6px; height:54px; }
.bars span{
  width:8px; border-radius:3px;
  height: calc(var(--h,50) * 1% * 0.9);
  background: linear-gradient(180deg, var(--accent), var(--primary));
  border:1px solid #00000022;
  box-shadow: 0 2px 8px rgba(0,0,0,.25) inset;
}

/* Liste (nutzt deine bestehenden list-check Styles) */
.tile.list .list-check{ margin-top:4px }

/* Status Chips */
.status-chips{ display:flex; flex-wrap:wrap; gap:8px }
.status .chip{
  font-size:.78rem; font-weight:700; letter-spacing:.02em;
  padding:6px 10px; border-radius:999px;
  border:1px solid #00000022;
}
.chip.ok{
  background: linear-gradient(180deg, var(--accent), var(--primary));
  color:#0b1020;
}
.chip.warn{
  background: linear-gradient(180deg, #FFD60A, #FF9F1C);
  color:#0b1020;
}

/* Responsiv */
@media (max-width: 980px){
  .mockup{ width:100% }
}
@media (max-width: 720px){
  .mockup-grid{ grid-template-columns: 1fr }
}
/* Kompakter: Tile-Headlines etwas kleiner, Listen knapper */
.tile h3{ font-size:1.2rem; margin:0 0 4px }
.compact-list li{ margin:3px 0; font-size:.9rem }

/* 2-Spalten-Grid beibehalten, aber unterstütze Spanning */
.span-2{ grid-column:1 / -1 }

/* Bars dezent kleiner */
.bars{ height:48px; gap:5px }
.bars span{ width:7px }

/* Chips minimal kleiner */
.status .chip{ font-size:.74rem; padding:5px 9px }