:root{--bg:#ffffff;
    --bg-2:#f8fafc;
    --card:#ffffff;
    --muted:#475569;
    --text:#0f172a;
    --brand:#0ea5e9;
    --brand-700:#0369a1;
    --accent:#16a34a;
    --danger:#ef4444;
    --shadow:0 10px 30px rgba(2,6,23,.06);
    --radius:18px;
    --radius-sm:12px;
    --maxw:1200px;
    --header-bg:linear-gradient(to bottom, rgba(255,255,255,.92), rgba(255,255,255,.72));
    --header-border:1px solid rgba(2,6,23,.08);
    --link-hover-bg:rgba(0,0,0,.05)}
:root[data-theme="dark"]
{
    --bg:#0b1220;
    --bg-2:#0f172a;
    --card:#111827;
    --muted:#94a3b8;
    --text:#e5e7eb;
    --brand:#06b6d4;
    --brand-700:#0e7490;
    --accent:#22c55e;
    --shadow:0 10px 30px rgba(0,0,0,.25);
    --header-bg:linear-gradient(to bottom, rgba(2,6,23,.85), rgba(2,6,23,.35));
    --header-border:1px solid rgba(255,255,255,.06);
    --link-hover-bg:rgba(255,255,255,.06)}
*{box-sizing:border-box}
html,body{margin:0;
    padding:0;
    background:var(--bg);
    color:var(--text);
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    height: 100%;
    display: flex;
    flex-direction: column}
main {
  flex: 1; /* schiebt Footer nach unten */
}
a{color:var(--brand);
    text-decoration:none}
    a:hover{text-decoration:underline}
    img{max-width:100%;
        display:block;border-radius:12px}
.wrap{max-width:var(--maxw);
    margin:0 auto;
    padding:0 20px}
    .nav{display:flex;
        align-items:center;
        justify-content:space-between;
        padding:12px 0}
        .brand{display:flex;
            gap:12px;
            align-items:center;
            font-weight:700}
            .logo{width:40px;
                height:40px;
                border-radius:12px;
                display:grid;
                place-items:center;
                background:var(--brand-700);
                box-shadow:var(--shadow);
                font-weight:800;color:#fff}
nav ul{display:flex;
    gap:18px;
    list-style:none;
    margin:0;
    padding:0}
    .actions{display:flex;
        gap:10px;
        align-items:center}
        nav a{padding:
            8px 12px;
            border-radius:10px;
            display:inline-block}
            nav a:hover{text-decoration:none;
                background:var(--link-hover-bg)}
.cta{display:inline-block;
    padding:12px 18px;
    border-radius:12px;
    background:var(--brand);
    color:#001318;
    font-weight:700;
    box-shadow:var(--shadow);
    border:0;
    cursor:pointer}
    .cta.alt{background:var(--accent);
        color:#001308}
        .cta.whatsapp{background:#25d366;color:#092e12}
.site-header{position:sticky;
    top:0;
    z-index:50;
    backdrop-filter:blur(8px);
    background:var(--header-bg);
    border-bottom:var(--header-border)}
.hero{padding:64px 0 24px;
    background:radial-gradient(1200px 600px at 20% -10%, rgba(6,182,212,.22), transparent),radial-gradient(900px 500px at 90% 10%, rgba(34,197,94,.15), transparent)}
.hero-grid{display:grid;
    gap:28px;
    grid-template-columns:1.3fr 1fr;
    align-items:center}
    .badge{display:inline-flex;
        align-items:center;
        gap:8px;
        padding:6px 10px;
        border-radius:999px;
        background:rgba(6,182,212,.12);
        color:#0369a1;
        font-weight:600;
        font-size:14px}
h1{
    font-size:clamp(28px,4vw,44px);
    margin:10px 0 8px;
    line-height:1.1}
    .lead{font-size:clamp(16px,2.1vw,20px);
        color:var(--muted)}
        .hero-cta{display:flex;
            gap:12px;
            flex-wrap:wrap;
            margin-top:18px}
.usp{display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;margin-top:18px}.usp
 .chip{
    background:var(--bg);
    border:1px solid rgba(0,0,0,.08);
    border-radius:999px;
    padding:8px 12px;
    color:#246cd1;
    font-size:14px}
.hero-media{
    background:linear-gradient(180deg, rgba(255,255,255,.06), transparent);
    padding:16px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:var(--shadow)}
section{padding:56px 0}
.section-title{
    display:flex;
    align-items:baseline;
    justify-content:space-between;gap:12px;margin-bottom:18px}h2{font-size:clamp(22px,3vw,32px);margin:0}
.grid{display:grid;gap:18px}.grid.cols-3{grid-template-columns:repeat(3,1fr)}.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card);border:1px solid rgba(0,0,0,.08);border-radius:18px;padding:18px;box-shadow:var(--shadow)}.card h3{margin:8px 0 6px;font-size:20px}.muted{color:var(--muted)}
.service{display:flex;gap:14px;align-items:flex-start}.icon{width:44px;height:44px;border-radius:12px;background:rgba(6,182,212,.15);display:grid;place-items:center;flex-shrink:0}
.price{text-align:center}
.price .big{
    font-size:42px;
    font-weight:800}
    .price .small{
        font-size:14px;
        color:var(--muted)}
        .price.featured{border:2px solid var(--brand)}
        /* Einzelner Extra-Kasten mittig unter den 3 Angeboten */
        .price.standalone{
        max-width: 560px;
        margin: 18px auto 0;
        text-align: center;
        }

.gallery{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:10px}
    .gallery img{
        aspect-ratio:1.1/1;
        object-fit:cover;
        border-radius:12px;
        border:1px solid rgba(0,0,0,.08)}
form{
    display:grid;
    gap:12px}
    input,textarea,select{
        width:100%;
        padding:12px 14px;
        border-radius:12px;
        border:1px solid rgba(0,0,0,.1);
        background:var(--bg);
        color:var(--text)}
input:focus,textarea:focus,select:focus{
    outline:2px solid var(--brand);
    border-color:var(--brand)}
    label{
        font-weight:600;
        font-size:14px;
        color:#334155}
        .two{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:12px}
footer{
    background:#0a0f1a;
    border-top:1px solid rgba(255,255,255,.08);
    padding:24px 0 60px;
    margin-top: auto;}
    .footgrid{
        display:grid;
        grid-template-columns:1.5fr 1fr 1fr 1fr;
        gap:18px}
        .footnav{
            list-style:none;
            padding-left:0;
            display:grid;
            gap:6px;
            margin:0}
            .smallprint{
                color:#93a0b5;
                font-size:13px}
.cookie{
    position:fixed;
    z-index:60;
    bottom:16px;
    left:16px;
    right:16px;
    max-width:680px;
    margin:0 auto;
    background:var(--bg);
    border:1px solid rgba(0,0,0,.12);
    padding:16px;
    border-radius:14px;
    box-shadow:var(--shadow);
    display:none}
    .cookie-actions{
        display:flex;
        gap:8px;
        margin-top:10px;
        flex-wrap:wrap}
.map{
    position:relative;
    aspect-ratio:16/9;
    overflow:hidden;
    border-radius:12px;
    border:1px solid rgba(0,0,0,.08)}
    .map iframe{
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
        display:block;
        border:0}
.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    border:0}
.info{
    list-style:none;
    padding-left:0;
    display:grid;
    gap:6px;
    margin:0}
    .copy{
        display:flex;
        justify-content:space-between;
        gap:10px;
        flex-wrap:wrap}
@media (max-width:980px)
{.hero-grid{
    grid-template-columns:1fr}
    .usp{grid-template-columns:1fr}
    .grid.cols-3,.grid.cols-2{grid-template-columns:1fr}
    .footgrid{grid-template-columns:1fr}
    nav ul{display:none}}
footer{color:#e5e7eb}

/* ===== Accessibility: Focus Styles ===== */
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; transition: outline-offset .05s ease; }
a:focus-visible, button:focus-visible, .cta:focus-visible, nav a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 10px; }
a.sr-only:focus, a.sr-only:focus-visible { position: fixed; top: 8px; left: 8px; width: auto; height: auto; padding: 10px 14px; clip: auto; margin: 0; background: var(--brand); color: #001318; border-radius: 10px; z-index: 1000; }
.actions .cta, .hero-cta .cta { min-height: 44px; }
label { cursor: pointer; }

/* ===== Animations & Micro-Interactions ===== */
:root{ --ease: cubic-bezier(.2,.7,.2,1); }
.animate { will-change: transform, opacity; }
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal.delay-1 { transition-delay: .05s; }
.reveal.delay-2 { transition-delay: .1s; }
.reveal.delay-3 { transition-delay: .15s; }
.cta { transition: transform .15s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); }
.cta:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0,0,0,.22); }
.cta:active { transform: translateY(0); box-shadow: var(--shadow); }
.card { transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.28); }
nav a { position: relative; overflow: hidden; }
nav a::after { content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); opacity:.7; }
nav a:hover::after, nav a:focus-visible::after { transform: scaleX(1); }
.gallery img{ transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.gallery img:hover{ transform: scale(1.03); box-shadow: 0 14px 34px rgba(0,0,0,.25); }
.site-header .nav{ transition: padding .2s var(--ease); }
.site-header.shrink .nav{ padding:8px 0; }
@media (prefers-reduced-motion: reduce){ * { animation: none !important; transition: none !important; } .reveal, .reveal.is-visible { opacity: 1 !important; transform: none !important; } }