/* ==== Fonts (ganz oben) ==== */
@font-face {
    font-family: "Inter";
    src: url("/assets/fonts/inter/InterVariable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("/assets/fonts/inter/InterVariable-Italic.woff2") format("woff2");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

html, body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
    font-optical-sizing: auto;
}

/* Scroll-Down Chevron (nur Mobile sichtbar) */
.scroll-down{
    position:absolute;
    left:50%; bottom:18px;
    transform:translateX(-50%);
    width:44px; height:44px;
    color:#fff;
    cursor:pointer;
    outline:none;
    transition:transform .2s ease, background .2s ease;
    animation: floatY 2.2s ease-in-out infinite;
    background: none;
    border: none;
}
.scroll-down:active{ transform:translateX(-50%) translateY(2px); }

@keyframes floatY{
    0%  { transform:translateX(-50%) translateY(0) }
    50% { transform:translateX(-50%) translateY(-6px) }
    100%{ transform:translateX(-50%) translateY(0) }
}

@media (max-width:900px){
    .scroll-down{ display:flex; align-items:center; justify-content:center; }
}

/* ============ Design-Token ============ */
:root{
    --bg:#0b0c0f; --surface:#12141a; --card:#171a21;
    --text:#e9edf1; --muted:#9aa4af;

    --brand:#5b8cff;      /* Blau */
    --brand-2:#7be3ff;    /* Cyan */
    --brand-3:#8b6cff;    /* Violett */

    --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.35);
    --container:1200px;

    --header-h:64px;      /* fixe Headerhöhe */

    /* Fluid Typo */
    --fs-1:clamp(2.2rem,2.2rem + 2vw,4rem);
    --fs-2:clamp(1.4rem,1.2rem + 1vw,2.2rem);
    --fs-3:clamp(1.1rem,1rem + .4vw,1.25rem);
    --fs-4:.95rem;
}
@media (min-width:900px){ :root{ --header-h:72px; } }

/* ============ Base ============ */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }

body{
    margin:0;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;

    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    color:var(--text);
    background:
            radial-gradient(1200px 600px at 70% -10%, rgba(123,227,255,.10), transparent 60%),
            var(--bg);
    padding-top: var(--header-h);
}

img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
.container{ width:min(100% - 32px,var(--container)); margin-inline:auto }
.muted{ color:var(--muted) }
.h2{ font-size:var(--fs-2); margin:0 0 .8rem 0 }

/* ============ Buttons ============ */
.btn{
    display:inline-flex; gap:.5rem; align-items:center; justify-content:center;
    padding:.9rem 1.2rem; border-radius:10px; border:0;
    background:linear-gradient(120deg,var(--brand),var(--brand-2));
    color:#1f1f1f; font-weight:600; box-shadow:var(--shadow);
    transition:transform .15s ease, filter .2s ease;
}
.btn:hover{ transform:translateY(-1px); filter:brightness(1.05) }
.btn-outline{ background:transparent; border:1px solid #2a2f39; color:var(--text) }
.btn-outline.btn-white{ border-color:rgba(255,255,255,.7); color:#1f1f1f; background:#fff; }

/* ============ Header / Nav (fixed + transparent) ============ */
header{
    position:fixed; top:0; left:0; right:0; height:var(--header-h);
    z-index:30;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}
.nav{
    display:flex; align-items:center; justify-content:space-between;
    height:100%; padding:0 .5rem;
}
.nav a{ color:white }
.nav ul{ list-style:none; display:flex; gap:1rem; padding:0; margin:0 }

/* Hamburger + X-Animation */
.hamb{
    display:none;
    align-items:center; justify-content:center;
    width:44px; height:40px;
    border: none;
    background:transparent; color: #fff; cursor:pointer;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.hamb-bars,
.hamb-bars::before,
.hamb-bars::after{
    content:"";
    display:block;
    width:22px; height:2px;
    background:currentColor;
    border-radius:2px;
    transition: transform .25s ease, opacity .2s ease, background-color .2s ease;
    position:relative;
}
.hamb-bars::before{ position:absolute; top:-6px; left:0; }
.hamb-bars::after { position:absolute; top: 6px; left:0; }

@media (max-width:900px){
    .nav ul{ display:none }
    .hamb{ display:inline-flex }
    .nav.open ul{
        display:flex; position:absolute; left:16px; right:16px; top:calc(var(--header-h) + 8px);
        flex-direction:column; gap:.6rem;
        background:var(--surface); border:1px solid #262b35; border-radius:12px; padding:.8rem;
    }
}

/* Offen-Status → X */
.nav.open .hamb{ color:#fff; border-color:#3a4251; }
.nav.open .hamb-bars      { background:transparent; }
.nav.open .hamb-bars::before{ transform: translateY(6px)  rotate(45deg); }
.nav.open .hamb-bars::after { transform: translateY(-6px) rotate(-45deg); }

/* Logo im Header */
.brand-logo{ display:flex; align-items:center; }
.brand-logo img{ height:50px; width:auto; display:block; }
@media (min-width:900px){ .brand-logo img{ height:60px; } }

/* ============ Sections ============ */
section{ padding:clamp(56px,6vw,96px) 0 }

/* ===== HERO – self-hosted Gradient Background ===== */
.hero{
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    margin-top: -72px;
}
.hero > .container{ position: relative; z-index: 1; }

/* BG-Root */
.hero .gradient-bg{
    position: absolute; inset: 0;
    z-index: 0; pointer-events: none;
    background: linear-gradient(40deg, #080A0F, #001120);
}

/* Noise-Overlay */
.hero .noiseBg{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    mix-blend-mode: soft-light; opacity: .25;
}

/* Goo-Filter Träger */
.hero .svgBlur{ display: none; }

.hero .gradients-container{
    position: absolute; inset: 0;
    filter: url(#goo) blur(38px);
}

/* Farben/Param für Kreise */
:root{
    --pen-color1: 18, 113, 255;
    --pen-color2: 107, 74, 255;
    --pen-color3: 100, 100, 255;
    --pen-color4: 50, 160, 220;
    --pen-color5: 80, 47, 122;
    --pen-interactive: 140, 100, 255;
    --pen-circle-size: 80%;
    --pen-blending: hard-light;
}

/* große, weiche Farbkreise */
.hero .g1,.hero .g2,.hero .g3,.hero .g4,.hero .g5,.hero .interactive{
    position: absolute;
    mix-blend-mode: var(--pen-blending);
    will-change: transform;
}
.hero .g1{
    background: radial-gradient(circle at center, rgba(var(--pen-color1), .8) 0, rgba(var(--pen-color1), 0) 50%) no-repeat;
    width: var(--pen-circle-size); height: var(--pen-circle-size);
    top: calc(50% - var(--pen-circle-size)/2); left: calc(50% - var(--pen-circle-size)/2);
    transform-origin: center center; animation: penMoveVertical 30s ease-in-out infinite; opacity:1;
}
.hero .g2{
    background: radial-gradient(circle at center, rgba(var(--pen-color2), .8) 0, rgba(var(--pen-color2), 0) 50%) no-repeat;
    width: var(--pen-circle-size); height: var(--pen-circle-size);
    top: calc(50% - var(--pen-circle-size)/2); left: calc(50% - var(--pen-circle-size)/2);
    transform-origin: calc(50% - 400px); animation: penMoveInCircle 22s reverse infinite; opacity:1;
}
.hero .g3{
    background: radial-gradient(circle at center, rgba(var(--pen-color3), .8) 0, rgba(var(--pen-color3), 0) 50%) no-repeat;
    width: var(--pen-circle-size); height: var(--pen-circle-size);
    top: calc(50% - var(--pen-circle-size)/2 + 200px); left: calc(50% - var(--pen-circle-size)/2 - 500px);
    transform-origin: calc(50% + 420px); animation: penMoveInCircle 38s linear infinite; opacity:1;
}
.hero .g4{
    background: radial-gradient(circle at center, rgba(var(--pen-color4), .8) 0, rgba(var(--pen-color4), 0) 50%) no-repeat;
    width: var(--pen-circle-size); height: var(--pen-circle-size);
    top: calc(50% - var(--pen-circle-size)/2); left: calc(50% - var(--pen-circle-size)/2);
    transform-origin: calc(50% - 220px); animation: penMoveHorizontal 36s ease-in-out infinite; opacity:.75;
}
.hero .g5{
    background: radial-gradient(circle at center, rgba(var(--pen-color5), .8) 0, rgba(var(--pen-color5), 0) 50%) no-repeat;
    width: calc(var(--pen-circle-size) * 2); height: calc(var(--pen-circle-size) * 2);
    top: calc(50% - var(--pen-circle-size)); left: calc(50% - var(--pen-circle-size));
    transform-origin: calc(50% - 820px) calc(50% + 220px); animation: penMoveInCircle 24s ease-in-out infinite; opacity:.95;
}

/* Maus-Interaktion (JS steuert transform) */
.hero .interactive{
    background: radial-gradient(circle at center, rgba(var(--pen-interactive), .8) 0, rgba(var(--pen-interactive), 0) 50%) no-repeat;
    width: 100%; height: 100%; top: -50%; left: -50%; opacity: .7;
}

/* Bewegungen */
@keyframes penMoveInCircle{
    0%{transform:rotate(0deg)}
    50%{transform:rotate(180deg)}
    100%{transform:rotate(360deg)}
}
@keyframes penMoveVertical{
    0%{transform:translateY(-50%)}
    50%{transform:translateY(50%)}
    100%{transform:translateY(-50%)}
}
@keyframes penMoveHorizontal{
    0%{transform:translateX(-50%) translateY(-10%)}
    50%{transform:translateX(50%) translateY(10%)}
    100%{transform:translateX(-50%) translateY(-10%)}
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce){
    .hero .gradients-container{ filter:none; }
    .hero .g1,.hero .g2,.hero .g3,.hero .g4,.hero .g5{ animation:none; }
}

/* ============ Layout helpers ============ */
.grid{ display:grid; gap:1rem; }
.cols-3{ grid-template-columns:repeat(3,1fr) }
.cols-2{ grid-template-columns:repeat(2,1fr) }
@media (max-width:900px){ .cols-3,.cols-2{ grid-template-columns:1fr } }

/* ============ Cards (Basis neutral) ============ */
.card{
    background:linear-gradient(180deg,#171a21,#12141a);
    border:1px solid #232835; border-radius:var(--radius); box-shadow:var(--shadow);
    overflow:hidden; transition:transform .2s ease, border-color .2s ease;
}
.card:hover{ transform:translateY(-2px); border-color:#2f3646 }
.card .body{ padding:1rem }
.card h3{ margin:.2rem 0 .4rem 0; font-size:1.15rem }
.card p{ margin:0; color:var(--muted); font-size:var(--fs-4) }
.card-pad{ padding:1rem }

/* Nur im WORK: gleich hohe Cards + Button unten */
#work .grid{ align-items:stretch; }
#work .card{ display:flex; flex-direction:column; height:100%; }
#work .card .body{ display:flex; flex-direction:column; gap:.6rem; flex:1 1 auto; }
#work .meta{ margin-top:auto; display:flex; gap:.6rem; flex-wrap:wrap; }

/* ============ Project preview ============ */
.thumb{ aspect-ratio:16/10; background:#0f1116; display:grid; place-items:center; position:relative }
.thumb img{ width:100%; height:100%; object-fit:cover }
.thumb .tag {
    position: absolute;
    right: 0;
    bottom: 10px;
    padding: 5px 5px 5px 10px;
    border-radius: 5px 0 0 5px;
    background: linear-gradient(180deg, #171a21, #12141a);
}

/* ============ Modals ============ */
dialog{
    border:1px solid #232835; background:var(--surface); color:var(--text);
    border-radius:18px; width:min(1400px,95%); box-shadow:var(--shadow);
}
dialog::backdrop{ background:rgba(0,0,0,.6) }
.dialog-head{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.8rem 1rem; border-bottom:1px solid #232835 }
.dialog-body{ padding:1rem }
.close{ background:transparent; color:var(--muted); border:1px solid #2a2f39; border-radius:10px; padding:.5rem .7rem; cursor:pointer }
.head-actions{display:flex;align-items:center;gap:.75rem}
.visit-link{opacity:.8}
.visit-link:hover{opacity:1}

/* ============ Forms ============ */
.input{
    border-radius:12px; border:1px solid #2a2f39; background:#0f1217; color:var(--text); padding:.8rem;
}

/* ============ Footer ============ */
footer{ border-top:1px solid #171b24; color:var(--muted); padding:28px 0 }
.footer-inner{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap }

/* ============ Reveal on scroll ============ */
.reveal{ opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease }
.reveal.show{ opacity:1; transform:none }

.hero h1 { font-size: clamp(1.5rem, 5.5vw, 4rem); }

/* ==== Mobile: Hero-Content zentrieren ==== */
@media (max-width: 900px){
    .hero{
        margin-top: -64px;
        min-height: calc(100svh);
        display: grid;
        place-items: center;
        padding: 0 0 56px;
    }
    .hero > .container{
        align-self: center;
        justify-self: center;
        text-align: left;
        width: min(100% - 32px, var(--container));
        margin: 0 auto;
    }
}

/* ===== Mobile Focus Section (scoped) ===== */
.mobile-focus{
    --mf-devW: 200px;
    --mf-devH: 400px;
    --mf-ease: cubic-bezier(.2,.7,.1,1);
    --mf-edgeOffset: 60px;
    --mf-finalGap: 12vh;

    --mf-scale: 3.6;
    --mf-text-o: 0;
    --mf-topAbs: -200px;
    --mf-botAbs:  200px;

    position: relative;
    height: 260vh;
}
@media (min-width:1024px){
    .mobile-focus{ --mf-scale: 5.5; }
}
.mobile-focus .mf-pin{ position:sticky; top:0; height:100vh; overflow:hidden; }
.mobile-focus .mf-stage{ position:relative; width:100%; height:100%; display:grid; place-items:center; }

/* Device */
.mobile-focus .mf-device{
    position:relative; width:var(--mf-devW); height:var(--mf-devH);
    transform:scale(var(--mf-scale)); transform-origin:50% 50%;
    will-change: transform; transition: transform .06s var(--mf-ease);
    filter: drop-shadow(0 40px 90px rgba(0,0,0,.45));
    z-index:2;
}
.mobile-focus .mf-frame{
    position:absolute; inset:0;
    background-image:url("/assets/img/iphone.png");
    background-size:100% 100%; background-repeat:no-repeat;
    pointer-events:none;
}

/* Texte – gesteuert über Offsets zur Seitenmitte */
.mobile-focus .mf-copy{
    position:absolute; left:50%; top:50%;
    transform:translate(-50%, calc(-50% + var(--mf-offset)));
    width:min(92vw, 1400px);
    text-align:center; pointer-events:none;
    opacity:var(--mf-text-o); transition:opacity .25s var(--mf-ease);
    padding:0 4vw; will-change:transform, opacity; z-index:3;
}
.mobile-focus .mf-top   { --mf-offset: var(--mf-topAbs); }
.mobile-focus .mf-bottom{ --mf-offset: var(--mf-botAbs); color:#cfd3dc }

.mobile-focus .mf-copy h2{
    margin:0; font-weight:700; letter-spacing:.2px;
    font-size:clamp(20px,5.4vw,42px); line-height:1.12;
}
.mobile-focus .mf-copy p{
    margin:0; font-weight:500; font-size:clamp(14px,3.6vw,18px); line-height:1.35;
}

@media (prefers-reduced-motion:reduce){
    .mobile-focus .mf-device,
    .mobile-focus .mf-copy{ transition:none!important; }
}
/* Mobile-Focus: Button klickbar & Abstand */
.mobile-focus .mf-copy .btn-white{
    margin-top: 12px;
    pointer-events: auto;
    z-index: 4;
}

/* Kontakt-Karte nicht „hovern“ lassen */
#contact .card:hover { transform: none; }

/* Hero-Container Fix (Desktop & Mobile) */
.hero > .container {
    align-self: center;
    justify-self: center;
    text-align: left;
    margin: 0 auto;
}
.hero {
    min-height: calc(100svh);
    display: grid;
    place-items: center;
    padding: 0 0 56px;
}

/* ===== Single-image Gallery (Dialog) ===== */
.sg{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.75rem;margin-block:1rem}
.sg-btn{inline-size:2.25rem;block-size:2.25rem;border-radius:999px;border:1px solid rgba(255,255,255,.18);
    background:transparent;cursor:pointer;display:grid;place-items:center;font-size:1.25rem;opacity:.9;
    transition:transform .2s ease,opacity .2s ease; color: white;}
.sg-btn:hover{transform:translateY(-1px);opacity:1}

.sg-frame{
    overflow:hidden;
    border-radius:14px;
    width:100%;
}

.sg-track{
    display:flex;
    gap:0;
    list-style:none;
    margin:0;
    padding:0;
    will-change:transform;
    transition:transform .35s ease;
}

.sg-slide{
    flex:0 0 100%;
    min-width:100%;
    display:grid;
}

.sg-slide img{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:16/9;
    object-fit:cover;
    cursor:zoom-in;
}


.sg-caption{margin-top:.6rem;opacity:.85;text-align:center}

@media (prefers-reduced-motion: reduce){
    .sg-btn,.sg-track{transition:none}
}

/* Lightbox */
.img-lightbox{
    position:fixed;inset:0;display:grid;place-items:center;
    background:rgba(0,0,0,.7);opacity:0;pointer-events:none;transition:opacity .22s ease;z-index:9999
}
.img-lightbox.is-open{opacity:1;pointer-events:auto}
.img-lightbox__img{max-width:min(90vw,1920px);max-height:1080px;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.img-lightbox__close{position:fixed;top:12px;right:12px;font-size:24px;line-height:1;width:40px;height:40px;
    border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.35);cursor:pointer; color: white;}
/* Legal-Modal: scrollbarer Body, angenehme Lesebreite */
.legal-dialog .dialog-body { max-height: min(80vh, 900px); overflow: auto; }
.legal-content { max-width: 68ch; margin: 0 auto; }
.legal-content h1, .legal-content h2, .legal-content h3 { margin-top: 1.2rem; }
.legal-content p, .legal-content li { line-height: 1.6; }
.loader { opacity:.7; font-size:.95rem; padding:.5rem 0; }
#legal-visit { display:none; }
.success {
    color: #007c00;
    font-weight: bold;
}