/* Immer: Heller Modus */
:root{
  --bg:#f8fafc;
  --card:#ffffff;
  --muted:#475569;
  --text:#0b1220;
  --primary:#0ea5e9;      /* sky-500 */
  --primary-2:#2563eb;    /* blue-600 */
  --ring:rgba(37,99,235,.25);
  --ok:#10b981;
  --warn:#f59e0b;
  --err:#ef4444;
  --shadow:0 10px 30px rgba(2,6,23,.08);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 500px at 60% -10%, rgba(37,99,235,.12), transparent 60%),
    radial-gradient(900px 400px at 10% -10%, rgba(14,165,233,.12), transparent 60%),
    var(--bg);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}

.container{max-width:1160px;margin:0 auto;padding:0 24px}
header{
  position:sticky;top:0;backdrop-filter:saturate(180%) blur(10px);
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.55));
  border-bottom:1px solid rgba(148,163,184,.12); z-index:50;
}

.nav{display:flex;align-items:center;justify-content:space-between;padding:10px 0;}
.brand{display:flex;align-items:center;gap:12px}

/* Logo: Bild unverändert, nur Höhe skalieren – keine Rundung, kein Schatten */
.brand-logo{
  height:92px;
  width:auto;
  display:block;
  border-radius:0;
  box-shadow:none;
}
@media (max-width:960px){
  .brand-logo{height:78px}
}
@media (max-width:640px){
  .brand-logo{height:64px}
}

nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}
nav a{opacity:.85}
nav a:hover{opacity:1}

.btn{
  display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;
  background:linear-gradient(135deg, var(--primary), var(--primary-2));
  color:#fff;font-weight:700;box-shadow:var(--shadow); border:0; cursor:pointer
}
.btn-outline{
  background:transparent;border:1px solid rgba(148,163,184,.35);color:var(--text);font-weight:600
}

.grid{display:grid;gap:24px}
.grid.two{grid-template-columns:1fr 1fr}
@media (max-width:960px){ .grid.two{grid-template-columns:1fr} }

.hero{padding:64px 0 32px; position:relative; overflow:hidden;}
.hero-inner{display:grid; grid-template-columns:1.2fr 1fr; gap:30px; align-items:center;}
@media (max-width:960px){ .hero-inner{grid-template-columns:1fr} }

.badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 12px;border:1px solid rgba(148,163,184,.25);border-radius:999px;
  color:var(--muted); background:rgba(148,163,184,.05); font-size:12px
}
.title{font-size:40px; line-height:1.15; margin:12px 0 10px; letter-spacing:.2px}
.subtitle{color:var(--muted);font-size:18px;max-width:54ch}
.cta{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.hero-tags{margin-top:10px;color:var(--muted)}
.tag{display:inline-flex;align-items:center;font-size:11px;padding:4px 8px;border-radius:999px;border:1px solid rgba(148,163,184,.25);color:var(--muted)}
.ghost{opacity:.65}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border:1px solid rgba(148,163,184,.18);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
}
.card.accent{background:rgba(14,165,233,.08);border-color:rgba(14,165,233,.35)}

.phone{
  width:100%;height:520px;border-radius:30px;border:1px solid rgba(148,163,184,.25);
  background:
    radial-gradient(600px 160px at 50% -40px, rgba(37,99,235,.15), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  display:grid;grid-template-rows:auto 1fr;overflow:hidden;
}
.phone-top{display:flex;justify-content:space-between;align-items:center;padding:12px 16px}
.pill{height:6px;width:80px;border-radius:99px;background:rgba(148,163,184,.35)}
.screen{
  /* App-Screen absichtlich dunkel für Kontrast */
  background:#0b1220;border-top:1px solid rgba(148,163,184,.12);border-radius:24px 24px 0 0;
  padding:16px 18px; display:grid; gap:12px; overflow:auto;
}

.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:12px;color:#e2e8f0;background:rgba(14,165,233,.18);border:1px solid rgba(14,165,233,.4);padding:6px 10px;border-radius:999px}
.chips.uploads{margin-top:8px}

section{padding:26px 0}
.section-title{font-size:26px;margin:0 0 8px}
.muted{color:var(--muted)}
.mb-16{margin-bottom:16px}
.mt-16{margin-top:16px}
.mt-18{margin-top:18px}
.mt-8{margin-top:8px}
.total{font-size:24px;font-weight:800}
.flex-1{flex:1}

.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:960px){ .cards{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .cards{grid-template-columns:1fr} }
.feature{display:flex;gap:12px}
.icon{
  width:42px;height:42px; border-radius:12px; display:grid;place-items:center;
  background:linear-gradient(135deg, rgba(14,165,233,.25), rgba(37,99,235,.25));
  border:1px solid rgba(148,163,184,.2)
}

.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{padding:10px 12px;border-radius:10px;border:1px solid rgba(148,163,184,.25);cursor:pointer}
.tab.active{background:linear-gradient(135deg, rgba(14,165,233,.2), rgba(37,99,235,.2));border-color:transparent}
.panels>div{display:none}
.panels>div.active{display:block}

.pricing{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:900px){ .pricing{grid-template-columns:1fr} }
.price{font-size:38px;font-weight:800;letter-spacing:.4px}
.price-row{display:flex;align-items:end;gap:10px;margin-top:8px}
.benefits{margin:14px 0 0;padding-left:18px;line-height:1.7}

.calc{display:grid;gap:12px}
.calc .row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
input[type="range"]{width:100%}
input[type="number"]{
  width:110px;padding:10px 12px;border-radius:10px;border:1px solid rgba(148,163,184,.35);
  background:transparent;color:var(--text)
}

.faq-item{border:1px solid rgba(148,163,184,.2);border-radius:14px;padding:16px}
.faq-q{display:flex;justify-content:space-between;gap:12px;cursor:pointer}
.faq-a{display:none;margin-top:10px;color:var(--muted)}
.faq-item.open .faq-a{display:block}

footer{padding:40px 0;color:var(--muted);border-top:1px solid rgba(148,163,184,.15);margin-top:30px}
.footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

.reveal{opacity:0;transform:translateY(10px);transition:all .6s ease}
.reveal.visible{opacity:1;transform:none}

.topbar{display:flex;gap:10px;align-items:center}
.note{font-size:12px;color:var(--muted)}
.cta-strip{
  background:linear-gradient(135deg, rgba(14,165,233,.15), rgba(37,99,235,.15));
  border:1px solid rgba(148,163,184,.18);
  border-radius:16px;padding:18px; display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap
}
.contact{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
/* --- NAV: Logo-Grösse fixieren --- */
header .brand .brand-logo,
header .brand-logo {
  height: 42px;         /* <— Wunschhöhe Desktop */
  width: auto !important;
  max-width: 220px;     /* Sicherheits-Cap gegen extrem breite Logos */
  object-fit: contain;
  display: block;
}

/* Tablet */
@media (max-width: 960px) {
  header .brand .brand-logo,
  header .brand-logo {
    height: 34px;
    max-width: 180px;
  }
}

/* Mobile */
@media (max-width: 640px) {
  header .brand .brand-logo,
  header .brand-logo {
    height: 28px;
    max-width: 160px;
  }
}