:root{
  --bg:#0c1117;
  --panel:#111827;
  --text:#e5e7eb;
  --muted:#9aa3af;
  --brand:#3b82f6;
  --brand-2:#22d3ee;
  --line:rgba(255,255,255,.08);
  --success:#10b981;
  --warning:#f59e0b;
  --danger:#ef4444;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:18px;
}
*{
    box-sizing:border-box
}
html,body{
    height:100%
}
body{
  margin:0;
  background:
    radial-gradient(1200px 800px at 10% -20%, rgba(34,211,238,.07), transparent 60%),
    radial-gradient(1000px 700px at 120% 10%, rgba(59,130,246,.09), transparent 60%),
    var(--bg);
  color:var(--text);
  font:16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
img{
    max-width:100%;
    display:block
}
a{
    color:inherit;
    text-decoration:none
}
.wrap{
    max-width:1120px;
    margin:0 auto;
    padding:0 20px
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.85rem 1.1rem;
  border-radius:14px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow:var(--shadow);
  color:var(--text);
  font-weight:600;
  transition:.2s transform,.2s box-shadow,.2s opacity
}
.btn:hover{
    transform:translateY(-1px)
}
.btn.primary{
    background:linear-gradient(180deg, rgba(59,130,246,.9), rgba(59,130,246,.75));
    border-color:rgba(59,130,246,.6)
}
.btn.ghost{
    background:transparent
}
.chip{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.35rem .6rem;
    border-radius:999px;
    border:1px solid var(--line);
    color:var(--muted);
    font-weight:600;
    font-size:.8rem
}
header.hdr{
    position:sticky;
    top:0;
    z-index:50;
    backdrop-filter:saturate(140%) blur(8px);
    background:linear-gradient(180deg, rgba(17,24,39,.85), rgba(17,24,39,.65));
    border-bottom:1px solid var(--line)
}
.hdr .inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    height:68px;
    position:relative
}
.brand{
    display:flex;
    align-items:center;
    gap:.75rem
}
.logo{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:conic-gradient(from 120deg, var(--brand), var(--brand-2));
    box-shadow:0 6px 16px rgba(34,211,238,.35), inset 0 1px 0 rgba(255,255,255,.2)
}
.brand h1{
    font-size:1.05rem;
    margin:0
}
nav a{
    color:var(--muted);
    font-weight:600;
    margin:0 .6rem
}
nav a:hover{
    color:var(--text)
}
.menu-toggle{
    display:none;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    border-radius:12px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.04);
    font-size:1.1rem
}
.mobile-nav{
    position:absolute;
    right:16px;
    left:16px;
    top:64px;
    display:block;
    padding:12px;
    border:1px solid var(--line);
    border-radius:14px;
    background:rgba(17,24,39,.98);
    box-shadow:var(--shadow)
}
.mobile-nav a{
    display:block;
    padding:10px 12px;
    border-radius:10px;
    color:var(--text);
    font-weight:600
}
.mobile-nav a:hover{
    background:rgba(255,255,255,.06)
}
.mobile-nav[hidden]{
    display:none !important
}

.hero{
    padding:72px 0 48px
}
.hero .grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:28px;
    align-items:center
}
.kard{
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow)
}
.hero .kard{
    padding:28px
}
h2{
    font-size:clamp(1.6rem, 1.1rem + 2vw, 2.4rem);
    line-height:1.15;
    margin:.4rem 0 1rem
}
p.lead{
    font-size:1.05rem;
    color:var(--muted)
}
.grad{
    background:linear-gradient(90deg,var(--brand),var(--brand-2));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent
}
.brand-accent{
    color:var(--brand)
}
.grid-3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px
}
.grid-4{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px
}
.service{
    padding:18px
}
.service h3{
    margin:.4rem 0 .2rem;
    font-size:1rem
}
.service p{
    margin:0;
    color:var(--muted);
    font-size:.95rem
}
.section{
    padding:64px 0
}
.section h2{
    margin:0 0 14px
}
.section p.sub{
    color:var(--muted);
    margin:0 0 24px
}
.badges{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:14px
}
.badge{
    padding:.45rem .6rem;
    border:1px dashed var(--line);
    border-radius:999px;
    color:var(--muted);
    font-size:.85rem;
    font-weight:600
}
.cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px
}
.card{
    padding:22px
}
.card h3{
    margin:.2rem 0 .4rem
}
.price{
    font-size:1.6rem;
    font-weight:700
}
.str{
    color:var(--muted);
    text-decoration:line-through;
    font-weight:600;
    margin-left:.5rem;
    font-size:1rem
}
.list{
    margin:12px 0 0;
    padding:0;
    list-style:none
}
.list li{
    display:flex;
    gap:.6rem;
    align-items:flex-start;
    margin:.45rem 0;
    color:var(--muted)
}
.list svg{
    flex:0 0 18px;
    margin-top:.15rem
}
.gallery{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px
}
.gallery .tile{
    aspect-ratio:4/3;
    border-radius:14px;
    overflow:hidden;
    position:relative;
    border:1px solid var(--line)
}
.gallery .tile::after{
    content:"Vorher";
    position:absolute;
    left:10px;
    top:10px;
    font-weight:700;
    font-size:.8rem;
    padding:.2rem .5rem;
    border-radius:999px;
    background:rgba(0,0,0,.5);
    backdrop-filter:blur(4px)
}
.gallery .tile:nth-child(even)::after{
    content:"Nachher"
}
.faq{
    display:grid;
    grid-template-columns:1fr;
    gap:12px
}
details{
    border:1px solid var(--line);
    border-radius:12px;
    padding:14px 16px;
    background:rgba(255,255,255,.03)
}
summary{
    cursor:pointer;
    font-weight:700
}
.cta-bar{
    display:flex;
    flex-wrap:wrap;
    gap:12px
}
footer{
    border-top:1px solid var(--line);
    padding:28px 0;
    color:var(--muted)
}
.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:20px
}

form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px
}
form .full{
    grid-column:1/-1
}
input, textarea, select{
    width:100%;
    padding:.95rem 1rem;
    border-radius:12px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.02);
    color:var(--text)
}
textarea{
    min-height:120px;
    resize:vertical
}

@media (max-width: 960px){
  .hero .grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .grid-4{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:1fr 1fr}
}
@media (max-width: 560px){
  nav{display:none}
  .menu-toggle{display:inline-flex}
  .grid-3,.grid-4{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  form{grid-template-columns:1fr}
  .hero{padding:56px 0 36px}
  h2{font-size:clamp(1.4rem, 1.1rem + 3vw, 2rem)}
  .btn{padding:.9rem 1.1rem}
}