:root{
    --bg0:#060612;
    --bg1:#0b0b1f;

    --surface:rgba(255,255,255,.06);
    --surface2:rgba(255,255,255,.09);
    --border:rgba(255,255,255,.12);
    --border2:rgba(255,255,255,.18);

    --text:#f4f4ff;
    --muted:rgba(244,244,255,.72);
    --muted2:rgba(244,244,255,.55);

    --teal:#22d3ee;
    --purple:#8b5cf6;
    --pink:#ec4899;

    --shadow:0 22px 70px rgba(0,0,0,.55);
    --shadow2:0 10px 30px rgba(0,0,0,.35);

    --r12:12px;
    --r16:16px;
    --r20:20px;

    --max:1120px;
    --pad:1.5rem;

    --font:ui-sans-serif, system-ui, -apple-system, "Inter","Segoe UI", Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{ box-sizing:border-box; }
html,body{ min-height:100%; }

html{
    background:
            radial-gradient(900px 500px at 15% 10%, rgba(34,211,238,.18), transparent 60%),
            radial-gradient(900px 500px at 85% 15%, rgba(139,92,246,.16), transparent 60%),
            radial-gradient(900px 500px at 70% 80%, rgba(236,72,153,.10), transparent 60%),
            linear-gradient(180deg, var(--bg0), var(--bg1));
    background-attachment: fixed;
}

body{
    margin:0;
    color:var(--text);
    font-family:var(--font);
    line-height:1.55;
    background:transparent;
}

.container{
    max-width:var(--max);
    margin:0 auto;
    padding:0 var(--pad);
}

a{ color:inherit; }
a:hover{ color:var(--teal); }

.muted{ color:var(--muted2); margin:0; }
.micro{ margin:.6rem 0 0; font-size:.9rem; }

.sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); border:0;
}

*:focus-visible{
    outline:3px solid var(--teal);
    outline-offset:4px;
    border-radius:10px;
}

.skip-link{
    position:absolute;
    left:12px; top:12px;
    transform:translateY(-160%);
    background:rgba(0,0,0,.75);
    border:1px solid var(--border2);
    color:var(--text);
    padding:.6rem .9rem;
    border-radius:12px;
    text-decoration:none;
    z-index:9999;
    backdrop-filter:blur(10px);
}
.skip-link:focus{ transform:translateY(0); }

/* Header */
.site-header{
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(6,6,18,.62);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border);
}

.header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:.95rem 0;
}

.brand{
    display:flex;
    align-items:center;
    gap:.75rem;
    text-decoration:none;
    min-width:180px;
}

.brand-logo{
    width:44px;
    height:44px;
    border-radius:14px;
    display:block;
    object-fit:contain;
}

.brand-text{
    font-weight:750;
    letter-spacing:.2px;
}

.nav{
    display:flex;
    align-items:center;
    gap:1.1rem;
}

.nav a{
    text-decoration:none;
    font-size:.95rem;
    color:rgba(244,244,255,.86);
    padding:.45rem .55rem;
    border-radius:12px;
    transition:background .18s, color .18s, transform .18s;
}
.nav a:hover{
    color:var(--text);
    background:rgba(255,255,255,.06);
}

.nav-toggle{
    display:none;
    background:rgba(255,255,255,.04);
    border:1px solid var(--border);
    color:var(--text);
    padding:.55rem .8rem;
    border-radius:12px;
    font-weight:650;
    cursor:pointer;
}
.nav-toggle:hover{ border-color:var(--border2); }

.mobile-nav{
    border-top:1px solid var(--border);
    background:rgba(6,6,18,.72);
    backdrop-filter:blur(14px);
}

.mobile-nav-inner{
    padding:.9rem var(--pad) 1.1rem;
    display:grid;
    gap:.35rem;
}

.mobile-nav a{
    text-decoration:none;
    padding:.8rem .85rem;
    border-radius:14px;
    border:1px solid transparent;
    color:rgba(244,244,255,.9);
}
.mobile-nav a:hover{
    background:rgba(255,255,255,.06);
    border-color:var(--border);
}

/* Typography */
h1{
    margin:0 0 1rem;
    font-size:clamp(2.1rem, 4.9vw, 3.5rem);
    line-height:1.06;
    letter-spacing:-.6px;
}

.lead{
    margin:0 0 1.8rem;
    font-size:clamp(1.05rem, 1.25vw, 1.2rem);
    color:var(--muted);
    max-width:58ch;
}

/* Buttons */
.btn{
    border:1px solid transparent;
    padding:.88rem 1.15rem;
    border-radius:14px;
    font-weight:750;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.55rem;
    cursor:pointer;
    user-select:none;
    transition:transform .16s ease, background .16s ease, border-color .16s ease;
}
.btn.primary{
    color:rgba(6,6,18,.95);
    background:linear-gradient(135deg, var(--teal), var(--purple));
}
.btn.ghost{
    background:rgba(255,255,255,.04);
    border-color:var(--border);
    color:var(--text);
}
.btn.small{
    padding:.6rem .9rem;
    border-radius:12px;
}
.btn.wide{ width:100%; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn[disabled], .btn[aria-disabled="true"]{
    opacity:.65;
    cursor:not-allowed;
    transform:none !important;
}

/* Cards */
.section{ padding:3.2rem 0 2.8rem; }
.section-title{
    margin:0 0 1.4rem;
    font-size:1.65rem;
    letter-spacing:-.2px;
}

.card{
    padding:1.05rem 1.05rem 1.1rem;
    border-radius:var(--r16);
    border:1px solid var(--border);
    background:rgba(255,255,255,.045);
    box-shadow:0 14px 35px rgba(0,0,0,.25);
    transition:transform .16s ease, border-color .16s ease, background .16s ease;
}
.card:hover{
    transform:translateY(-3px);
    border-color:var(--border2);
    background:rgba(255,255,255,.06);
}
.card h3{ margin:.1rem 0 .45rem; font-size:1.05rem; }
.card p{ margin:0; color:var(--muted); }

/* Hero */
.hero{ padding:4.2rem 0 2.2rem; }
.hero-grid{
    display:grid;
    grid-template-columns:1.18fr .82fr;
    gap:2.8rem;
    align-items:center;
}
.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:.85rem;
    align-items:center;
}

/* Right card on funktionen seite*/
.hero-card{
    border-radius:26px;
    border:1px solid var(--border);
    background:
            radial-gradient(300px 160px at 20% 10%, rgba(34,211,238,.14), transparent 60%),
            radial-gradient(300px 160px at 80% 20%, rgba(139,92,246,.12), transparent 60%),
            linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    box-shadow:var(--shadow);
    padding:1.1rem;
}

.mock{
    border-radius:22px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(5,5,14,.55);
}
.mock-top{
    display:flex;
    align-items:center;
    gap:.45rem;
    padding:.75rem .9rem;
    border-bottom:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.03);
}
.dot{
    width:10px; height:10px;
    border-radius:999px;
    background:rgba(244,244,255,.22);
}
.mock-title{
    margin-left:.5rem;
    color:rgba(244,244,255,.80);
    font-weight:700;
    font-size:.95rem;
}
.mock-body{ padding:1rem; }

.kv{
    margin:0 0 1rem;
    display:grid;
    gap:.85rem;
}
.kv div{
    display:grid;
    grid-template-columns:95px 1fr;
    gap:.8rem;
    align-items:baseline;
}
dt{ color:var(--muted2); font-size:.92rem; }
dd{ margin:0; font-weight:750; color:rgba(244,244,255,.92); }
#timer{ font-variant-numeric:tabular-nums; }

/* Metronome */
.metronome{
    margin-top:2.2rem;
    padding:1.2rem 1.2rem 1.1rem;
    border-radius:var(--r20);
    border:1px solid var(--border);
    background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
    box-shadow:var(--shadow2);
}

.metro-head{
    display:flex;
    align-items:baseline;
    gap:.6rem;
    margin-bottom:.65rem;
}

.h2-like{ margin:0; font-size:1.05rem; }
.metro-value{
    margin-left:auto;
    font-variant-numeric:tabular-nums;
    font-size:1.1rem;
    font-weight:900;
    color:rgba(244,244,255,.92);
}
.unit{ color:var(--muted2); font-size:.95rem; }

.metro-range{ width:100%; cursor:pointer; accent-color:var(--teal); }
.metro-help{ margin:.65rem 0 0; color:var(--muted2); font-size:.95rem; }

.metro-tick{
    margin-top:.95rem;
    height:6px;
    border-radius:6px;
    transform-origin:left;
    transform:scaleX(.25);
    opacity:.7;
    background:linear-gradient(90deg, var(--teal), var(--purple));
    box-shadow:0 10px 24px rgba(34,211,238,.16);
    transition:transform .09s ease, opacity .09s ease;
}
.metro-tick.is-hit{
    transform:scaleX(1);
    opacity:1;
}

/* video */
.demo-video{
    width:100%;
    max-width:900px;
    border-radius:18px;
    border:1px solid var(--border);
    background:rgba(0,0,0,.25);
    box-shadow:var(--shadow2);
}

/* footer */
.site-footer{
    margin-top:3.5rem;
    border-top:1px solid var(--border);
    padding:2.6rem 0;
    background:rgba(255,255,255,.015);
}
.footer-grid{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:1rem;
    flex-wrap:wrap;
}
.footer-links{
    display:flex;
    flex-wrap:wrap;
    gap:.9rem;
}
.footer-links a{
    text-decoration:none;
    color:rgba(244,244,255,.78);
    padding:.35rem .55rem;
    border-radius:12px;
}
.footer-links a:hover{
    background:rgba(255,255,255,.05);
    color:var(--text);
}

/* pages */
.legal-shell{ padding:3.2rem 0; }

.legal-card{
    max-width:900px;
    margin:0 auto;
    padding:1.6rem 1.6rem 1.2rem;
    border-radius:22px;
    border:1px solid var(--border);
    background:rgba(255,255,255,.045);
    box-shadow:var(--shadow2);
    line-height:1.75;
}

.legal-card h1{
    margin:0 0 1.1rem;
    padding-bottom:.85rem;
    border-bottom:1px solid rgba(34,211,238,.28);
}

.legal-card h2{
    margin:2.1rem 0 .6rem;
    font-size:1.35rem;
    color:rgba(34,211,238,.95);
}
.legal-card h3{
    margin:1.4rem 0 .45rem;
    font-size:1.05rem;
}
.legal-card p{ margin:.7rem 0; }
.legal-card ul{ margin:.6rem 0 1rem; padding-left:1.2rem; }
.legal-card li{ margin:.55rem 0; color:rgba(244,244,255,.86); }

.contact-box{
    margin-top:1rem;
    padding:1rem 1.1rem;
    border-radius:var(--r16);
    border:1px solid var(--border);
    background:rgba(255,255,255,.035);
}

/* Tables */
.table-wrap{
    margin-top:.8rem;
    overflow:auto;
    border-radius:16px;
    border:1px solid var(--border);
    background:rgba(255,255,255,.03);
}
.table-wrap:focus{
    outline:3px solid var(--teal);
    outline-offset:6px;
    border-radius:18px;
}

table{
    width:100%;
    border-collapse:collapse;
    min-width:780px;
}
th,td{
    text-align:left;
    vertical-align:top;
    padding:.85rem .9rem;
    border-bottom:1px solid rgba(255,255,255,.08);
    color:rgba(244,244,255,.9);
    font-size:.95rem;
}
th{
    position:sticky;
    top:0;
    background:rgba(6,6,18,.85);
    backdrop-filter:blur(8px);
    font-weight:800;
}
tbody tr:hover td{ background:rgba(255,255,255,.03); }

code{
    font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    font-size:.92em;
}

/* Pricing & Checkout */
.pricing-grid{
    margin-top:1.2rem;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1rem;
}

.price-card{
    border-radius:var(--r20);
    border:1px solid var(--border);
    background:rgba(255,255,255,.045);
    box-shadow:0 14px 35px rgba(0,0,0,.25);
    padding:1.2rem;
}

.price-card.featured{
    border-color:rgba(34,211,238,.35);
    background:linear-gradient(180deg, rgba(34,211,238,.10), rgba(255,255,255,.035));
}

.price-head h2{ margin:0 0 .45rem; font-size:1.25rem; }

.price{
    margin:0 0 .35rem;
    font-weight:900;
    font-variant-numeric:tabular-nums;
}
.price-num{ font-size:1.6rem; }
.price-unit{ color:var(--muted2); font-weight:700; }

.price-list{
    margin:.9rem 0 1.1rem;
    padding-left:1.2rem;
    color:rgba(244,244,255,.86);
}

.checkout-grid{
    margin-top:1.2rem;
    display:grid;
    grid-template-columns:1fr 1.1fr;
    gap:1.2rem;
    align-items:start;
}

.summary{
    margin-top:.7rem;
    border:1px solid var(--border);
    border-radius:var(--r16);
    background:rgba(255,255,255,.03);
    padding:1rem;
}

.summary-row{
    display:flex;
    justify-content:space-between;
    gap:1rem;
    padding:.45rem 0;
    border-bottom:1px solid rgba(255,255,255,.06);
}
.summary-row.total{
    border-bottom:none;
    padding-top:.75rem;
    font-size:1.02rem;
}

/* Forms */
.fieldset{
    border:1px solid var(--border);
    border-radius:var(--r16);
    padding:1rem;
    margin:0 0 1rem;
    background:rgba(255,255,255,.03);
}

.legend{
    padding:0 .5rem;
    font-weight:800;
    color:rgba(244,244,255,.92);
}

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.9rem;
}

.field label{
    display:block;
    font-weight:750;
    margin-bottom:.35rem;
}

.input{
    width:100%;
    padding:.75rem .85rem;
    border-radius:14px;
    border:1px solid var(--border);
    background:rgba(6,6,18,.35);
    color:var(--text);
}

.field-hint{
    margin:.35rem 0 0;
    color:var(--muted2);
    font-size:.92rem;
}

.radio-row,
.check-row{
    display:flex;
    gap:.6rem;
    align-items:flex-start;
    margin:.35rem 0 .65rem;
}

.form-actions{
    display:flex;
    justify-content:space-between;
    gap:.8rem;
    align-items:center;
}

/* Validation */
.field-error-text{
    margin:.35rem 0 0;
    font-size:.92rem;
    color:rgba(236,72,153,.95);
}

.input[aria-invalid="true"]{ border-color:rgba(236,72,153,.55); }
.input[aria-invalid="true"]:focus-visible{ outline-color:rgba(236,72,153,.9); }

.form-error{
    margin-top:.9rem;
    padding:.75rem .9rem;
    border-radius:14px;
    border:1px solid rgba(236,72,153,.35);
    background:rgba(236,72,153,.10);
}

.form-success{
    margin-top:.9rem;
    padding:.75rem .9rem;
    border-radius:14px;
    border:1px solid rgba(34,211,238,.30);
    background:rgba(34,211,238,.08);
}

.notice{
    margin:.7rem 0 0;
    padding:.8rem 1rem;
    border-radius:14px;
    border:1px solid rgba(236,72,153,.25);
    background:rgba(236,72,153,.08);
    color:rgba(244,244,255,.92);
}

/* Consent */
.consent{
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:9998;
    background:rgba(6,6,18,.85);
    border-top:1px solid var(--border);
    backdrop-filter:blur(12px);
}

.consent-inner{
    max-width:var(--max);
    margin:0 auto;
    padding:1rem var(--pad);
    display:flex;
    gap:1rem;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
}

.consent-text{
    margin:0;
    color:rgba(244,244,255,.86);
    max-width:75ch;
}

.consent-actions{
    display:flex;
    gap:.6rem;
    align-items:center;
}

@media (prefers-reduced-motion: reduce){
    .btn{ transition:none; }
    .metro-tick{ transition:none; }
}

@media (max-width: 920px){
    .hero{ padding:3.2rem 0 1.8rem; }
    .hero-grid{ grid-template-columns:1fr; gap:1.6rem; }
    .feature-grid{ grid-template-columns:repeat(2, 1fr); }
    .pricing-grid{ grid-template-columns:1fr; }
    .checkout-grid{ grid-template-columns:1fr; }
    .form-grid{ grid-template-columns:1fr; }
}

@media (max-width: 760px){
    .nav{ display:none; }
    .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }

    .brand{ min-width:0; }
    .header-inner{ padding:.85rem 0; }
    .mobile-nav a{ padding:.9rem .95rem; }
}

@media (max-width: 560px){
    h1{ letter-spacing:-.3px; }
    .feature-grid{ grid-template-columns:1fr; }
    .kv div{ grid-template-columns:88px 1fr; }
}