/* ==========================================================================
   webgau.de
   ========================================================================== */

:root {
    --bg:         #09090b;
    --bg-raised:  #111113;
    --surface:    #18181b;
    --border:     #232328;
    --border-l:   #2e2e35;
    --text:       #9898a0;
    --text-2:     #65656e;
    --white:      #ececef;
    --accent:     #6e8ba4;
    --accent-h:   #83a0b9;
    --accent-bg:  rgba(110,139,164,0.08);
    --font:       'Inter', system-ui, -apple-system, sans-serif;
    --serif:      'Playfair Display', Georgia, serif;
    --w:          1080px;
    --r:          12px;
    --rs:         8px;
    --ease:       cubic-bezier(.4,0,.2,1);
}

/* ── Reset ────────────────────────────────────────────────────── */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { font-size:16px; scroll-behavior:smooth; scroll-padding-top:5rem; -webkit-text-size-adjust:100% }

body {
    font-family: var(--font);
    font-weight: 400;
    line-height: 1.65;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { display:block; max-width:100%; height:auto }
a { color:inherit; text-decoration:none }
ul,ol { list-style:none }
button { font:inherit }

h1,h2,h3 { color:var(--white); line-height:1.15 }
h1,h2 { font-family:var(--serif); font-weight:700 }
h3 { font-family:var(--font); font-weight:600 }

/* ── Utility ──────────────────────────────────────────────────── */

.wrap { max-width:var(--w); margin:0 auto; padding-inline:1.5rem }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }

.skip-link {
    position:absolute; top:-100%; left:1rem;
    background:var(--white); color:var(--bg);
    padding:.65rem 1.4rem; border-radius:var(--rs);
    z-index:9999; font-weight:600; font-size:.88rem;
}
.skip-link:focus { top:1rem }

:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:2px }

/* ── Reveal ───────────────────────────────────────────────────── */

.rv { opacity:0; transform:translateY(20px); transition:opacity .65s var(--ease), transform .65s var(--ease) }
.rv.on { opacity:1; transform:none }
.rv-d1 { transition-delay:.08s }
.rv-d2 { transition-delay:.16s }
.rv-d3 { transition-delay:.24s }

/* ── Header ───────────────────────────────────────────────────── */

.hdr {
    position:fixed; inset:0 0 auto; z-index:100;
    border-bottom:1px solid transparent;
    transition:background .35s, border-color .35s, backdrop-filter .35s;
}
.hdr.pinned {
    background:rgba(9,9,11,.88);
    backdrop-filter:blur(14px) saturate(1.3);
    -webkit-backdrop-filter:blur(14px) saturate(1.3);
    border-bottom-color:var(--border);
}

.hdr-inner {
    display:flex; align-items:center; justify-content:space-between;
    height:4.25rem; max-width:var(--w); margin:0 auto; padding-inline:1.5rem;
}

.logo { font-size:1.3rem; font-weight:700; color:var(--white); letter-spacing:-.03em }
.logo b { font-weight:400; color:var(--text-2) }

/* Hamburger */
.ham {
    display:flex; flex-direction:column; gap:5px;
    width:44px; height:44px; background:none; border:none;
    cursor:pointer; padding:12px; z-index:110;
}
.ham i { display:block; width:20px; height:1.5px; background:var(--white); border-radius:2px; transition:transform .3s var(--ease),opacity .25s }
.ham.on i:nth-child(1) { transform:translateY(6.5px) rotate(45deg) }
.ham.on i:nth-child(2) { opacity:0 }
.ham.on i:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg) }

/* Nav overlay */
.nav-list {
    position:fixed; inset:0;
    background:rgba(9,9,11,.96);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.2rem;
    opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; z-index:105;
}
.nav-list.open { opacity:1; visibility:visible }
.nav-list a { font-size:1.05rem; font-weight:500; color:var(--text); transition:color .25s; padding:.4rem .8rem }
.nav-list a:hover, .nav-list a:focus-visible { color:var(--white) }

.nav-cta {
    background:var(--white) !important; color:var(--bg) !important;
    padding:.55rem 1.4rem !important; border-radius:var(--rs); font-weight:600 !important;
    transition:opacity .25s !important;
}
.nav-cta:hover { opacity:.88 }

/* ── Buttons ──────────────────────────────────────────────────── */

.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
    font-family:var(--font); font-weight:600; font-size:.9rem;
    padding:.8rem 1.75rem; border-radius:var(--rs);
    border:1.5px solid transparent; cursor:pointer;
    transition:all .25s var(--ease); min-height:46px;
}
.btn:active { transform:scale(.97) }

.btn-w { background:var(--white); color:var(--bg); border-color:var(--white) }
.btn-w:hover { opacity:.88 }

.btn-o { background:transparent; color:var(--text); border-color:var(--border-l) }
.btn-o:hover { border-color:var(--text-2); color:var(--white) }

.btn-lg { padding:.9rem 2.1rem; font-size:.95rem }

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
    position:relative; min-height:100vh; min-height:100dvh;
    display:flex; align-items:center; overflow:hidden;
}

.hero-bg {
    position:absolute; inset:0; z-index:0;
}
.hero-bg img { width:100%; height:100%; object-fit:cover; opacity:.5 }
.hero-bg::after {
    content:''; position:absolute; inset:0;
    background:
        linear-gradient(to bottom, var(--bg), transparent 30%, transparent 65%, var(--bg)),
        linear-gradient(to right, var(--bg) 5%, transparent 55%);
}

.hero-body { position:relative; z-index:1; width:100%; max-width:var(--w); margin:0 auto; padding:8rem 1.5rem 4rem }

.hero h1 {
    font-size:clamp(2.6rem,6vw,4.5rem);
    font-weight:800; line-height:1.05;
    margin-bottom:1.6rem; max-width:620px;
    letter-spacing:-.025em;
}

.hero p {
    font-size:clamp(1rem,1.6vw,1.12rem);
    max-width:480px; margin-bottom:2.5rem;
    line-height:1.75; color:var(--text-2);
}

.hero-btns { display:flex; flex-wrap:wrap; gap:.75rem }

/* ── Divider line ─────────────────────────────────────────────── */

.divider { border:none; height:1px; background:var(--border); margin:0 }

/* ==========================================================================
   SECTIONS
   ========================================================================== */

.sec { padding:5.5rem 0 }

.sec-head { margin-bottom:3.5rem }
.sec-head h2 { font-size:clamp(1.7rem,3.2vw,2.3rem); margin-bottom:.75rem; letter-spacing:-.01em }
.sec-head p { color:var(--text-2); font-size:.98rem; max-width:480px; line-height:1.7 }

/* ── Leistungen ───────────────────────────────────────────────── */

.feat-grid { display:grid; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--r); overflow:hidden }
.feat { background:var(--surface); padding:2.25rem 2rem; transition:background .25s }
.feat:hover { background:var(--bg-raised) }
.feat h3 { font-size:1.05rem; margin-bottom:.55rem }
.feat p { font-size:.88rem; color:var(--text-2); line-height:1.7 }

/* ── Standards ────────────────────────────────────────────────── */

.std-grid { display:grid; gap:1rem }

.std {
    display:flex; gap:1rem; align-items:flex-start;
    padding:1.35rem 1.25rem;
    border-radius:var(--rs);
    transition:background .25s;
}
.std:hover { background:var(--surface) }

.std-icon {
    flex-shrink:0; width:40px; height:40px;
    display:flex; align-items:center; justify-content:center;
    border-radius:var(--rs); background:var(--accent-bg); color:var(--accent);
}
.std-icon svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }

.std h3 { font-size:.95rem; margin-bottom:.25rem }
.std p { font-size:.85rem; color:var(--text-2); line-height:1.65 }

/* ── Projekte ─────────────────────────────────────────────────── */

.proj-grid { display:grid; gap:1.25rem }

.proj {
    display:block; border-radius:var(--r); overflow:hidden;
    border:1px solid var(--border); background:var(--surface);
    transition:border-color .3s, transform .3s;
}
.proj:hover { border-color:var(--border-l); transform:translateY(-2px) }

.proj-img { aspect-ratio:16/10; overflow:hidden; position:relative }
.proj-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease) }
.proj:hover .proj-img img { transform:scale(1.03) }

.proj-body { padding:1.4rem 1.5rem 1.6rem }
.proj-body h3 { font-size:1.05rem; margin-bottom:.4rem }
.proj-body p { font-size:.86rem; color:var(--text-2); line-height:1.65; margin-bottom:1rem }

.tags { display:flex; gap:.35rem; flex-wrap:wrap }
.tag {
    font-size:.68rem; font-weight:500; letter-spacing:.03em;
    padding:.25rem .6rem; border-radius:100px;
    background:var(--accent-bg); color:var(--accent); border:1px solid rgba(110,139,164,.12);
}

/* ── Kontakt ──────────────────────────────────────────────────── */

.cta-grid { display:grid; gap:1rem; margin-bottom:2rem }

.cta-card {
    display:flex; align-items:center; gap:1rem;
    padding:1.25rem; border-radius:var(--rs);
    border:1px solid var(--border); background:var(--surface);
    transition:border-color .25s;
}
.cta-card:hover { border-color:var(--border-l) }

.cta-ic {
    flex-shrink:0; width:42px; height:42px;
    display:flex; align-items:center; justify-content:center;
    border-radius:var(--rs); background:var(--accent-bg); color:var(--accent);
}
.cta-ic svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }

.cta-label { font-size:.72rem; color:var(--text-2); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.1rem }
.cta-val { font-weight:600; color:var(--white); font-size:.9rem }

/* ── Footer ───────────────────────────────────────────────────── */

.ft { padding:2.5rem 0; background:var(--bg) }
.ft-inner { display:flex; flex-direction:column; gap:1.25rem }
.ft-logo { font-size:1.1rem; font-weight:700; color:var(--white) }
.ft-logo b { font-weight:400; color:var(--text-2) }
.ft-sub { font-size:.82rem; color:var(--text-2); margin-top:.3rem }
.ft-nav { display:flex; gap:1.25rem }
.ft-nav a { font-size:.82rem; color:var(--text-2); transition:color .25s }
.ft-nav a:hover { color:var(--white) }
.ft-copy { font-size:.75rem; color:var(--text-2); opacity:.6 }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media(min-width:640px) {
    .sec { padding:7rem 0 }
    .feat-grid { grid-template-columns:repeat(3,1fr) }
    .std-grid { grid-template-columns:repeat(2,1fr) }
    .proj-grid { grid-template-columns:repeat(2,1fr) }
    .cta-grid { grid-template-columns:repeat(2,1fr) }
    .ft-inner { flex-direction:row; align-items:center; justify-content:space-between; flex-wrap:wrap }
    .ft-copy { width:100%; text-align:center; margin-top:.5rem; padding-top:1.25rem; border-top:1px solid var(--border) }
}

@media(min-width:960px) {
    .ham { display:none }
    .nav-list {
        position:static; flex-direction:row; background:none;
        backdrop-filter:none; -webkit-backdrop-filter:none;
        opacity:1; visibility:visible; gap:.35rem;
    }
    .nav-list a { font-size:.86rem }
    .sec { padding:8.5rem 0 }
    .hero-body { padding:11rem 1.5rem 7rem }
}

/* ==========================================================================
   A11Y
   ========================================================================== */

@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important }
    html { scroll-behavior:auto }
    .rv { opacity:1; transform:none }
}

@media(forced-colors:active) {
    .btn { border:2px solid ButtonText }
    .feat,.proj,.cta-card,.std { border:1px solid CanvasText }
}

@media print {
    .hdr,.hero-bg,.ham { display:none }
    body { background:#fff; color:#222 }
    h1,h2,h3 { color:#000 }
    .sec { padding:2rem 0; background:#fff!important }
}