:root{
  --bg:#0b0b0b;
  --panel:#0f1011;
  --accent1:#18c95c;
  --accent2:#3ac80f;
  --muted:#bfc6bd;
  --glass: rgba(255,255,255,0.03);
  --radius:14px;
  --font:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  background:linear-gradient(180deg,#01181f 0%, #050505 50%, #01181f 100%);
  color:#e9f7ef;
}

.app{display:flex;min-height:100vh}

/* Sidebar */
.sidebar{
  width:300px;
  background:linear-gradient(180deg, rgba(14, 12, 14, 0.9), rgba(9, 8, 10, 0.95));
  padding:28px;
  display:flex;
  flex-direction:column;
  gap:18px;
  color: #00b7ff;
  border-right:1px solid rgba(255,255,255,0.03);
}
.brand{display:flex;align-items:center;gap:12px}

.logo {
  width:56px;
  height:56px;
  border-radius:12px;
  object-fit:cover;

}
.title{font-weight:700;font-size:18px}

.nav{display:flex;flex-direction:column;gap:8px}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;text-decoration:none;color:var(--muted);background:linear-gradient(135deg, #00d9ff52, #003e573a);}
.nav-item:hover{scale: 1.05;color:#fff;background:linear-gradient(135deg, #00d9ff7e, #003e577e);}

.about p{font-size:13px;color:var(--muted)}

.contacts{margin-top:auto}
.contact-row{display:block;padding:8px 6px;text-decoration:none;color:var(--muted);border-radius:8px}
.contact-row:hover{background:rgba(255,255,255,0.02);color:#fff}
.contact-row.whatsapp{font-weight:600}

.legal small a{color:var(--muted);text-decoration:none}

/* Main */
.main{flex:1;display:flex;flex-direction:column}
.hero{padding:34px 40px;background:linear-gradient(90deg, rgba(2, 199, 248, 0.151), rgba(2, 173, 240, 0.13));border-bottom:1px solid rgba(255,255,255,0.02)}
.hero h1{margin:0;font-size:28px}
.subtitle{margin:6px 0 0;color:var(--muted)}

.content{padding:28px}
.grid{display:grid;grid-template-columns:2fr 380px;gap:18px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:20px;border-radius:var(--radius);box-shadow:0 6px 24px rgba(3, 5, 5, 0.6)}

.service-list{list-style:none;padding:0;margin:0}
.service-list li{padding:8px 0;border-bottom:1px dashed rgba(255,255,255,0.05);display:flex;align-items:center;gap:10px;color:var(--muted)}

.cta-buttons{display:flex;gap:10px;margin-top:12px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;text-decoration:none;background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#07130a;font-weight:700}
.btn.outline{background:linear-gradient(135deg, #00d9ff52, #003e573a);border:1px solid rgba(255,255,255,0.1);color:var(--muted);font-weight:600}
.btn.whatsapp{box-shadow:0 6px 18px rgba(24,201,100,0.12)}
.btn:hover{scale: 1.05}
.form-card .contact-form label{display:block;margin-bottom:12px;color:#e9f7ef;font-size:14px}
.contact-form input,.contact-form textarea{width:100%;padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,0.1);background:transparent;color:#fff}
.form-actions{display:flex;gap:12px;margin-top:8px}

.site-footer{padding:18px 28px;border-top:1px solid rgba(255,255,255,0.05);color:var(--muted);text-align:center}

.flash-wrap{margin-bottom:12px}
.flash{padding:10px;border-radius:8px;margin-bottom:8px;font-size:14px}
.flash.success{background:linear-gradient(90deg, rgba(24,201,100,0.12), rgba(15,200,139,0.06));color:#dfffe9}
.flash.error{background:rgba(255,84,84,0.12);color:#ffdcdc}
.flash.info{background:rgba(200,200,200,0.1);color:#e9f7ef}
.flash.warning{background:rgba(255,200,0,0.1);color:#fff6d9}

/* Responsive */
@media (max-width:980px){
  .sidebar{display:none}
  .grid{grid-template-columns:1fr}
}

/* Mobile Optimierung */
@media (max-width: 600px) {
  body { font-size: 16px; }
  .sidebar { display: none; } /* Sidebar ausblenden auf kleinen Screens */
  .main { padding: 12px; }
  .hero h1 { font-size: 22px; }
  .grid { grid-template-columns: 1fr; gap: 12px; }
  .card { padding: 14px; }
  .btn { flex: 1; justify-content: center; }
}


/* Mobile Sidebar Overlay */
.menu-toggle {
display:none;
position:absolute;
top:14px;
left:14px;
background:linear-gradient(135deg, #00b7ff, #0077ff);
border:none;
color:#08130a;
font-size:24px;
font-weight:700;
border-radius:8px;
padding:6px 10px;
cursor:pointer;
z-index:1001;
}


.sidebar-overlay {
position:fixed;
top:0;left:-100%;
width:260px;
height:100%;
background:linear-gradient(180deg, rgba(12,14,12,0.95), rgba(8,10,8,0.97));
padding:24px;
transition:left 0.3s ease;
z-index:1000;
}
.sidebar-overlay.open {left:0;}
.sidebar-overlay .close-btn {
position:absolute;top:12px;right:12px;
background:none;border:none;font-size:24px;color:#fff;cursor:pointer;
}


@media (max-width:980px){
.sidebar{display:none}
.menu-toggle{display:block}
}

@media (max-width: 600px) {
  .services-grid {
    grid-template-columns: 1fr; /* nur 1 Spalte */
  }
}


.services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 nebeneinander */
  gap: 16px;
}

.service-category {
  background: rgba(255,255,255,0.02);
  padding: 12px;
  border-radius: 10px;
}