:root{
  --voga-pink:#ff33aa; /* ersetze gerne mit exaktem Logo-Hex */
  --voga-blue:#169aff;
  --text:#111317;
  --muted:#5b616e;
  --bg:#ffffff;
  --border:#e6e7eb;
  --radius:18px;
  --shadow:0 10px 20px rgba(0,0,0,.06);
}

/* Base / reset */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--voga-blue);text-decoration:none}
.lead{color:var(--muted)}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;padding:8px 10px;background:#fff;border:1px solid var(--border);border-radius:10px;z-index:1000}

/* Fluid type */
h1{font-size:clamp(28px,5.5vw,56px);line-height:1.06;margin:0 0 12px;font-weight:800}
h2{font-size:clamp(22px,3.2vw,34px);line-height:1.15;margin:0 0 10px;font-weight:800}
h3{font-size:clamp(16px,2vw,20px);margin:0 0 8px}

/* Layout helpers */
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.grid{display:grid;gap:20px}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.narrow{max-width:900px}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}

/* Header / Nav */
.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:12px;padding:10px 0}
.brand img{height:40px;width:auto}
.brand .meta .title{font-weight:700}
.brand .meta .sub{font-size:12px;color:var(--muted)}
.nav{display:flex;align-items:center;gap:8px}
.nav a{padding:10px 12px;border-radius:10px;color:#282a30}
.nav a:hover{background:#f4f5f7}
.cta{background:var(--voga-pink);color:#fff;font-weight:700;border-radius:12px;box-shadow:var(--shadow)}

.burger{display:none;position:relative;width:42px;height:42px;border:1px solid var(--border);border-radius:12px;background:#fff}
.burger span{position:absolute;left:10px;right:10px;height:2px;background:#111;border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.burger span:nth-child(1){top:12px}
.burger span:nth-child(2){top:20px}
.burger span:nth-child(3){top:28px}
.burger.active span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.active span:nth-child(2){opacity:0}
.burger.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* Sections */
section{padding:72px 0;border-top:1px solid var(--border)}
.hero{padding:96px 0;background:radial-gradient(65% 65% at 50% 0%,rgba(255,51,170,.12),transparent 60%)}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
.badges{display:flex;gap:10px;flex-wrap:wrap;list-style:none;padding:0;margin:0}
.badges .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--voga-pink);margin-right:6px;transform:translateY(-1px)}

.hero-grid{display:grid;gap:24px;grid-template-columns:repeat(2,minmax(0,1fr))}
.ui-mock{border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);background:#fff;min-height:320px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ui-mock div{background:#f1f3f6;border-radius:14px}
.ui-mock .w2{grid-column:span 2}

#ueberuns .muted {display:block;font-size:1rem;margin-bottom:2rem; margin-top:0.5rem;}
#ueberuns p {line-height:1.7}
#ueberuns .highlight {margin-top:2.5rem;padding-left:1rem;font-style:italic;font-size:1.2rem;color:#1f4fa8;text-align:center}

.card{border:1px solid var(--border);background:#fff;border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.tile{border:1px solid var(--border);padding:22px;border-radius:var(--radius);background:#fff;box-shadow:var(--shadow)}
.list{margin:0 0 0 18px;color:var(--muted)}
.card-media { display:flex; justify-content:center; align-items:center; background:#f5f6f7; border-radius:14px; overflow:hidden; padding:10px; max-height:240px; }
.card-media img { width:auto; height:100%; max-height:220px; object-fit:contain; display:block; }
.card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pill{font-size:11px;text-transform:uppercase;font-weight:800;color:#b5126b;background:#ffe6f4;border:1px solid #ffc7e9;border-radius:999px;padding:4px 8px}
.card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

.tele-grid{display:grid;gap:24px;grid-template-columns:repeat(2,minmax(0,1fr))}
.dash-mock{border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);background:#fff}
.dash-top{display:flex;justify-content:space-between;gap:12px}
.dash-top span{display:block;height:12px;width:100px;background:#e5e7eb;border-radius:6px}
.dash-top span:last-child{width:40px}
.dash-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}
.dash-cards div{background:#f6f7fa;border:1px solid var(--border);border-radius:12px;height:60px}
.dash-chart{height:140px;background:#f1f3f6;border-radius:14px;margin-top:16px}

.qa{border:1px solid var(--border);border-radius:14px;background:#fff;padding:16px;margin-bottom:12px}
.qa summary{cursor:pointer;list-style:none;font-weight:700;display:flex;align-items:center;justify-content:space-between}
.qa p{color:var(--muted)}

.field{display:block;margin-bottom:14px}
.field span{display:block;font-weight:700;margin-bottom:6px}
input,textarea{width:100%;padding:14px;border:1px solid var(--border);border-radius:12px;font:inherit}
.consent{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:14px}
.form-actions{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap}

.btn{display:inline-block;background:#111;color:#fff;border-radius:12px;padding:12px 16px;font-weight:700}
.btn:hover{opacity:.95}
.btn-outline{background:#fff;border:1px solid var(--border);color:#111}

.footer{background:#f7f7f9}
.footer-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.muted{color:var(--muted)}

/* Floating contact buttons */
.fab-container{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:10px;z-index:60}
.fab-btn{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#111;color:#fff;box-shadow:var(--shadow);border:1px solid var(--border)}
.fab-btn svg{width:26px;height:26px;fill:#fff}
.fab-wa{background:#25D366}
.fab-tel{background:#111}

/* Select look */
select{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:12px;font:inherit;background:#fff}

/* pill tags for product selection */
.taglist{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 8px}
.tag{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);padding:8px 10px;border-radius:999px;background:#fff;user-select:none;cursor:pointer}
.tag input{appearance:none;width:14px;height:14px;border:1px solid var(--border);border-radius:4px;display:inline-block;position:relative}
.tag input:checked{background:var(--voga-blue);border-color:var(--voga-blue)}
.tag input:checked::after{position:absolute;inset:3px;background:#fff;border-radius:2px}
.tag span{font-size:14px;color:#222}

/* Responsive breakpoints */
@media (max-width: 1280px){
  .container{max-width:1100px}
}
@media (max-width: 1024px){
  .g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tele-grid,.hero-grid{grid-template-columns:1fr}
  .dash-cards{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 900px){
  .g-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 768px){
  .row{gap:8px}
  .burger{display:inline-block}
  .nav.open{transform:translateY(0)}
  .nav a{padding:14px 10px;font-size:16px}
  .nav{position:fixed;inset:70px 0 auto 0;background:#fff;border-bottom:1px solid var(--border);padding:12px 20px;display:grid;grid-auto-rows:minmax(44px,auto);gap:6px;transform:translateY(-120%);transition:transform .2s ease;z-index:40}
  .section-head{align-items:flex-start}
  .g-3{grid-template-columns:1fr}
  .g-4{grid-template-columns:1fr}
  section{padding:56px 0}
  .ui-mock{min-height:240px}
}
@media (max-width: 480px){
  .container{padding:0 14px}
  .btn,.cta{padding:12px 14px}
  input,textarea{padding:12px}
  .fab-btn{width:48px;height:48px}
  .fab-btn svg{width:22px;height:22px}
  .tag{padding:7px 9px}
  .tag span{font-size:13px}
  .card-media { aspect-ratio: 4 / 3; }
  .card-media { max-height:180px; }
}