/* Gehosted.DE Pro Theme — 2025-08-10 (v2) */
:root{
  --bg:#0b1220; --panel:#0f172a; --text:#e5e7eb; --muted:#94a3b8;
  --brand:#0ea5e9; --brand-2:#0284c7; --ok:#22c55e; --warn:#f59e0b; --err:#ef4444;
  --ring: rgba(56,189,248,.3); --radius-xl:1.25rem; --radius-md:.9rem;
  --shadow:0 20px 60px rgba(0,0,0,.35); --shadow-soft:0 10px 30px rgba(0,0,0,.18);
  --container:1200px;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);background:radial-gradient(1200px 600px at 20% -10%,#0a1728 0%,transparent 60%),
  radial-gradient(900px 500px at 120% 10%,#081524 0%,transparent 55%),var(--bg);line-height:1.6}
a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:1rem}

/* Header */
.header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(140%) blur(10px);
  background:color-mix(in oklab,#0b1220 85%,#0a0a0a 15% / 65%);border-bottom:1px solid rgba(148,163,184,.15)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:.8rem;font-weight:800;letter-spacing:-.02em}
.brand img{width:34px;height:34px;border-radius:10px}
.nav a{color:var(--text);padding:.6rem .9rem;border-radius:.7rem}
.nav a:hover{background:rgba(148,163,184,.12);text-decoration:none}

/* Slider Hero */
.hero{position:relative;min-height:clamp(460px,64vh,860px);overflow:hidden;margin-bottom:2.5rem}
.slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;background:#000}
.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.75)}
.slide.active{opacity:1}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(50% 50% at 50% 50%,rgba(2,6,23,.0) 20%,rgba(2,6,23,.35) 55%,rgba(2,6,23,.7) 100%)}
.hero .inner{position:relative;z-index:1;text-align:center;padding:clamp(48px,15vh,160px) 1rem;color:#fff;text-shadow:0 6px 30px rgba(0,0,0,.4)}
.hero h1{margin:0 0 .5rem;font-size:clamp(34px,6vw,68px);line-height:1.05;letter-spacing:-.02em}
.lead{margin:0 auto;max-width:70ch;font-size:clamp(16px,2.4vw,20px);opacity:.95}
.actions{margin-top:1.4rem;display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:.9rem 1.2rem;border-radius:.9rem;
  font-weight:700;color:#fff;background:linear-gradient(180deg,var(--brand),var(--brand-2));border:0;
  box-shadow:var(--shadow-soft);cursor:pointer;text-decoration:none;transition:transform .08s ease,filter .2s ease}
.btn.secondary{background:linear-gradient(180deg,#64748b,#475569)} .btn:hover{filter:brightness(1.06)} .btn:active{transform:translateY(1px)}

/* Sections */
.section{padding-block:clamp(2rem,6vw,4rem)} .section h2{font-size:clamp(24px,3.6vw,36px);letter-spacing:-.01em;margin:0 0 1rem}
.sec-lead{margin:0 0 1.5rem;color:var(--muted)}
.grid{display:grid;gap:1rem;grid-template-columns:repeat(1,minmax(0,1fr))}
@media(min-width:700px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{background:color-mix(in oklab,#0f172a 90%,#0b1220 10%);border:1px solid rgba(148,163,184,.12);border-radius:1.25rem;padding:1.2rem;box-shadow:var(--shadow-soft)}
.card h3{margin:.2rem 0 .4rem} .card p{margin:0;color:var(--muted)}

/* Trust badges */
.badges{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin-top:1rem}
.badge{padding:.45rem .7rem;border-radius:.7rem;background:#0f172a;border:1px solid rgba(148,163,184,.18);color:#cbd5e1;font-weight:600;font-size:.95rem}

/* Pricing */
.pricing{display:grid;gap:1rem} @media(min-width:900px){.pricing{grid-template-columns:repeat(3,minmax(0,1fr))}}
.price{padding:1.2rem;border-radius:1.25rem;border:1px solid rgba(148,163,184,.12);background:linear-gradient(160deg,rgba(14,165,233,.08),transparent 40%),color-mix(in oklab,#0f172a 90%,#0b1220 10%);box-shadow:var(--shadow-soft)}
.price h3{margin:0 0 .4rem}.amount{font-size:2rem;font-weight:800}.price ul{margin:.6rem 0 0 1rem;color:var(--muted)}.price li{margin:.3rem 0}

/* Prose (legal pages) */
main{display:block;padding-block:clamp(1.6rem,6vw,3rem)}
.prose{max-width:var(--container);margin-inline:auto;padding-inline:1rem}
.prose .card{background:#0f172a;border-color:rgba(148,163,184,.14)}
.prose h1,.prose h2,.prose h3{letter-spacing:-.01em}
.prose h1{font-size:clamp(28px,4.2vw,42px)} .prose h2{font-size:clamp(22px,3.2vw,30px)}
.prose p,.prose li{color:#cbd5e1}

/* Contact form */
form.contact{display:grid;gap:.9rem;max-width:720px}
input[type="text"],input[type="email"],input[type="tel"],input[type="url"],textarea,select{
  width:100%;padding:.9rem 1rem;border-radius:.9rem;border:1px solid rgba(148,163,184,.2);background:#0b1220;color:var(--text);outline:none;transition:border-color .2s ease,box-shadow .2s ease}
textarea{min-height:160px;resize:vertical}
input:focus,textarea:focus,select:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--ring)}

/* Alerts */
.alert{padding:1rem;border-radius:.9rem;margin-bottom:1rem}
.alert.ok{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35)}
.alert.err{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.35)}

/* Footer */
.footer{margin-top:2.4rem;padding:1.8rem 0;border-top:1px solid rgba(148,163,184,.12);color:var(--muted)}

/* Back button */
.back-btn{display:inline-flex;align-items:center;gap:.5rem;background:linear-gradient(180deg,#64748b,#475569);color:#fff;padding:.8rem 1.2rem;border-radius:.75rem;text-decoration:none;font-weight:600;box-shadow:var(--shadow-soft);transition:transform .08s ease,filter .2s ease}
.back-btn:hover{filter:brightness(1.05)} .back-btn:active{transform:translateY(1px)} .back-btn svg{width:1em;height:1em}

/* Sticky CTA */
.sticky-cta{position:fixed;right:16px;bottom:16px;z-index:60}
.sticky-cta .btn{box-shadow:0 12px 40px rgba(2,132,199,.45)}

/* Cookie Banner */
.cookie{position:fixed;left:16px;right:16px;bottom:16px;background:#0f172a;border:1px solid rgba(148,163,184,.2);
  color:#e5e7eb;padding:1rem;border-radius:1rem;box-shadow:var(--shadow-soft);display:flex;gap:1rem;align-items:center;z-index:70}
.cookie p{margin:0;flex:1;color:#cbd5e1}
.cookie .actions{margin:0}

/* Utilities */
.center{text-align:center} .m0{margin:0} .mb1{margin-bottom:.5rem} .mb2{margin-bottom:1rem} .mb3{margin-bottom:1.5rem} .mb4{margin-bottom:2rem}

/* === Mobile Tweaks (Gehosted.DE) === */
@media (max-width: 700px){
  .container{padding-inline: 1rem}
  .nav {flex-wrap: wrap; gap: .4rem}
  .nav a {padding:.5rem .7rem}
  .grid{display:grid; gap:1rem; grid-template-columns: 1fr;} /* 1 Spalte */
  .row{flex-direction: column; align-items: stretch}
  .btn{width:100%; text-align:center}
  .hero{min-height: 52vh}
  .card{padding:1rem}
  img{max-width:100%; height:auto}
}
@media (min-width:701px) and (max-width:1040px){
  .grid{display:grid; gap:1rem; grid-template-columns: repeat(2, minmax(0,1fr));} /* 2 Spalten */
}
@media (min-width:1041px){
  .grid{display:grid; gap:1rem; grid-template-columns: repeat(3, minmax(0,1fr));} /* 3 Spalten */
}

/* Produktbilder smooth + tappable Größenverhältnis behalten */
.card img{aspect-ratio:16/9; object-fit:cover; border-radius: var(--radius-xl)}

/* === Kontaktformular Inputs (einheitlich) === */
form input[type="text"],
form input[type="email"],
form input[type="number"],
form input[type="tel"],
form input[type="url"],
form input[type="password"],
form input[type="search"],
form input[type="date"],
form textarea,
form select {
  width: 100%;
  padding: .75rem .9rem;
  border-radius: .8rem;
  border: 1px solid rgba(148,163,184,.25);
  background: color-mix(in oklab, #0f172a 92%, #0b1220 8%);
  color: var(--text);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

form input::placeholder,
form textarea::placeholder { color: rgba(148,163,184,.7); }

form input:focus,
form textarea:focus,
form select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--ring);
  background: #0f172a;
}

form label {
  display: block;
  margin: .4rem 0 .35rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: .01em;
}

/* Zeilenlayout im Formular */
form .row { display: flex; gap: .8rem; flex-wrap: wrap; }
form .row > * { flex: 1 1 240px; }

/* Mobile Tweaks */
@media (max-width:700px){
  form .row { flex-direction: column; gap: .6rem; }
}