/* Gehosted.DE — Base Styles */
:root{
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  --ring: 0 0 0 2px rgba(14,165,233,.3);
  --accent: #0ea5e9;
}
html[data-theme="light"]{
  --bg: #f6f7fb;
  --bg-soft: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --card: #ffffff;
  --border: rgba(15,23,42,.08);
  --glass: rgba(255,255,255,.7);
  --gradient:
    radial-gradient(1000px 600px at 80% -10%, rgba(14,165,233,.20), transparent 60%),
    radial-gradient(800px 400px at 10% 10%, rgba(99,102,241,.20), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%);
}
html[data-theme="dark"]{
  --bg: #0b1220;
  --bg-soft: #0f172a;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --card: #0f172a;
  --border: rgba(148,163,184,.18);
  --glass: rgba(17,24,39,.6);
  --gradient:
    radial-gradient(1000px 600px at 80% -10%, rgba(14,165,233,.18), transparent 60%),
    radial-gradient(800px 400px at 10% 10%, rgba(99,102,241,.16), transparent 60%),
    linear-gradient(180deg, #0b1220 0%, #0f172a 100%);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial;
  color:var(--text);
  background:var(--gradient);
  background-attachment:fixed;
  line-height:1.6;
}
.container{width:min(1200px,92vw);margin-inline:auto}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  border-radius:999px;padding:.85rem 1.2rem;border:1px solid var(--border);
  backdrop-filter:saturate(140%) blur(8px);background:var(--glass);
  color:var(--text);font-weight:600;cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow);border-color:rgba(14,165,233,.45)}
.btn.primary{background:linear-gradient(180deg, rgba(14,165,233,.85), rgba(14,165,233,.75));color:#fff;border-color:transparent}
.btn.primary:hover{box-shadow:0 15px 30px rgba(14,165,233,.35), 0 2px 10px rgba(14,165,233,.25)}

/* Navbar */
.navwrap{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px) saturate(140%);background:linear-gradient(to bottom, rgba(0,0,0,.0), rgba(0,0,0,.06));border-bottom:1px solid var(--border)}
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:.9rem 0}
.brand{display:flex;align-items:center;gap:.8rem}
.brand img{height:56px;width:auto;filter:drop-shadow(0 6px 10px rgba(14,165,233,.25))}
@media(min-width:900px){.brand img{height:72px}}
.menu{display:none;gap:1.2rem;justify-content:center}
@media(min-width:900px){.menu{display:flex}}
.actions{display:flex;justify-content:end;align-items:center;gap:.6rem}
.theme-toggle{border-radius:999px;border:1px solid var(--border);background:var(--glass);padding:.6rem .7rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:transform .2s ease, box-shadow .2s ease}
.theme-toggle:hover{transform:translateY(-1px);box-shadow:var(--shadow)}

/* Hero */
.hero{position:relative;padding:min(14vh,8rem) 0 5rem;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
@media(min-width:1000px){.hero-grid{grid-template-columns:1.05fr .95fr;gap:4rem}}
h1{font-size:clamp(2.2rem,3.2vw + 1.2rem,4.2rem);line-height:1.08;letter-spacing:-.02em;margin:0 0 1rem}
.lead{font-size:clamp(1rem,.6vw + .9rem,1.18rem);color:var(--muted);max-width:56ch}
.cta-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.4rem}

.preview{position:relative;border-radius:var(--radius);background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));border:1px solid var(--border);box-shadow:var(--shadow);padding:1rem;overflow:hidden}
.preview .glass{position:absolute;inset:0;background:radial-gradient(800px 300px at 70% -10%, rgba(99,102,241,.14), transparent 60%);pointer-events:none}
.preview .window{border-radius:calc(var(--radius) - 8px);overflow:hidden;border:1px solid var(--border);background:var(--bg-soft)}
.window .titlebar{display:flex;align-items:center;gap:.5rem;padding:.7rem .9rem;border-bottom:1px solid var(--border);background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.04))}
.dots{display:inline-flex;gap:.4rem}
.dot{width:10px;height:10px;border-radius:999px;background:#ef4444;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.dot:nth-child(2){background:#f59e0b}.dot:nth-child(3){background:#10b981}
.viewport{height:clamp(220px,34vh,340px);background:
  radial-gradient(800px 400px at 100% 0%, rgba(14,165,233,.25), transparent 60%),
  linear-gradient(135deg, rgba(255,255,255,.06), rgba(0,0,0,.08));
position:relative}
.viewport>img{width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}

/* Sections */
section{padding:5rem 0}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:2rem}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .7rem;border:1px solid var(--border);border-radius:999px;font-size:.85rem;color:var(--muted);background:var(--glass);backdrop-filter:blur(8px) saturate(140%)}
.h2{font-size:clamp(1.6rem,2.2vw + .8rem,2.4rem);letter-spacing:-.02em;margin:.2rem 0 0}

.grid{display:grid;gap:1rem}
@media(min-width:800px){.grid.cols-3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.grid.cols-4{grid-template-columns:repeat(4,1fr)}}

.card{position:relative;border-radius:var(--radius);border:1px solid var(--border);background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));box-shadow:var(--shadow);padding:1.2rem;overflow:hidden;transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(0,0,0,.20);border-color:rgba(14,165,233,.45)}
.card h3{margin:.2rem 0 .4rem;font-size:1.15rem;letter-spacing:-.01em}
.card p{color:var(--muted);margin:0}
.icon{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(180deg, rgba(14,165,233,.2), rgba(99,102,241,.2));border:1px solid var(--border);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.icon svg{width:20px;height:20px}

/* Pricing */
.pricing{display:grid;gap:1rem}
@media(min-width:900px){.pricing{grid-template-columns:repeat(3,1fr)}}
.price-card{padding:1.5rem;border-radius:var(--radius);border:1px solid var(--border);background:var(--card);box-shadow:var(--shadow);position:relative;overflow:hidden}
.price-card.featured{outline:1.5px solid rgba(14,165,233,.5);background:linear-gradient(180deg, rgba(14,165,233,.10), rgba(14,165,233,.02))}
.price{font-size:2rem;font-weight:800;letter-spacing:-.02em}
.price small{font-weight:600;color:var(--muted);font-size:.9rem}
.check{display:flex;align-items:center;gap:.6rem;color:var(--muted)}

/* CTA */
.cta{text-align:center;padding:4rem 1rem;border-radius:var(--radius);background:linear-gradient(180deg, rgba(14,165,233,.12), rgba(14,165,233,.04));border:1px solid var(--border);box-shadow:var(--shadow)}

/* Footer */
footer{padding:3rem 0;border-top:1px solid var(--border);background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.04))}
.foot{display:grid;gap:1.6rem}
@media(min-width:800px){.foot{grid-template-columns:2fr 1fr 1fr 1fr}}
footer small, footer a{color:var(--muted)}
.sig{max-width:240px;opacity:.9}

/* Reveal */
.reveal{opacity:0;transform:translateY(16px) scale(.98);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  .btn,.card,.theme-toggle{transition:none !important}
  .reveal{transition:none !important;opacity:1 !important;transform:none !important}
  .btn:hover,.card:hover,.theme-toggle:hover{transform:none !important;box-shadow:none !important}
}


/* === Logo Umschaltung Light/Dark === */
.brand .logo,
footer .logo{
  display:none;
  height:56px;
  width:auto;
  filter:drop-shadow(0 6px 10px rgba(14,165,233,.25));
}
@media(min-width:900px){
  .brand .logo{height:72px}
}
/* Sichtbarkeit je Theme */
html[data-theme="light"] .logo-light{display:block}
html[data-theme="dark"]  .logo-dark{display:block}

/* Footer-Logo dezenter & fix Breite */
footer .logo{max-width:260px;height:auto;filter:none}