/* Mobile First Base Styles */
*{box-sizing:border-box}
html{height:100%; -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden}
body{min-height:100%; margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--text); background:var(--bg); line-height:1.6; font-size:16px; overflow-x:hidden}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}
.container{max-width:var(--max); margin:0 auto; padding:0 1.25rem; width:100%}

/* NAV */
.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.95); border-bottom:1px solid var(--border); backdrop-filter:saturate(120%) blur(10px); width:100%}
.nav__in{display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.7rem 1.25rem; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:.5rem; font-weight:800; letter-spacing:.2px; font-size:15px}
.logo{width:32px; height:32px; border-radius:8px; background:linear-gradient(135deg,var(--primary),var(--accent)); display:grid; place-items:center; color:#fff; font-weight:800; font-size:14px}
.links{display:flex; gap:.6rem; align-items:center; flex-wrap:wrap}
.links a{color:#1f2937; font-weight:600; font-size:14px}


.btn{display:inline-flex; gap:.4rem; align-items:center; padding:.6rem .9rem; border-radius:10px; border:1px solid var(--border); background:#fff; font-weight:800; font-size:14px; white-space:nowrap; cursor:pointer; transition:all .2s ease}
.btn.primary{background:var(--primary); color:#fff; border-color:transparent}
.btn.primary:hover{background:var(--primary-600)}
.btn.primary:disabled{background:#94a3b8; cursor:not-allowed}
.btn.ghost{background:transparent; color:var(--primary); border-color:var(--primary)}

/* HERO */
.hero{padding:2.5rem 0 2.5rem}
.hero__grid{display:grid; grid-template-columns:1fr; gap:var(--space-4); align-items:center}
.kicker{display:inline-flex; gap:.4rem; align-items:center; color:var(--muted); font-weight:800; font-size:13px}
.dot{width:8px; height:8px; border-radius:50%; background:var(--primary)}
h1{font-size:clamp(2rem,8vw,3.4rem); line-height:1.15; margin:.6rem 0 .8rem}
.text-primary{color:var(--primary)}
.sub{color:var(--muted); font-size:1.05rem; max-width:62ch; line-height:1.65}
.cta{display:flex; flex-direction:column; gap:.8rem; margin-top:1.4rem}
.cta .btn{width:100%; justify-content:center}
.panel{border:1px solid var(--border); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow); padding:1rem; max-width:100%; overflow:hidden}
.pan-head{font-weight:800; margin:0 0 .4rem 0; font-size:14px}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11px; color:#111; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:10px; overflow-x:auto; max-width:100%; word-wrap:break-word; white-space:pre-wrap}
.code code{display:block; max-width:100%}

/* LOGOS */
.logos{padding:2rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:linear-gradient(180deg,#fff, #fcfcfc)}
.logos__in{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem .8rem; opacity:.9; align-items:center}
.logos__in img{margin:0 auto; object-fit:contain; width:100%; max-width:180px; height:auto}

/* SECTIONS */
section{padding:2.5rem 0}
.stitle{font-size:clamp(1.75rem,6vw,2.2rem); margin:0 0 .6rem; line-height:1.25}
.ssub{color:var(--muted); max-width:70ch; font-size:1rem; line-height:1.65}

.grid-3{display:grid; grid-template-columns:1fr; gap:1.25rem; margin-top:1.5rem}
.card{border:1px solid var(--border); border-radius:var(--radius); background:#fff; padding:1.25rem; box-shadow:var(--shadow-sm)}
.card h3{margin:.4rem 0 .6rem; font-size:1.25rem}
.card p{font-size:1rem; line-height:1.65; color:var(--muted)}
.badge{display:inline-block; font-size:11px; font-weight:900; padding:.3rem .55rem; border-radius:999px; color:#fff; background:linear-gradient(135deg,var(--primary),var(--accent))}
.badge--green{background:linear-gradient(135deg,#22c55e,#16a34a)}
.badge--blueviolet{background:linear-gradient(135deg,#0ea5e9,#7c3aed)}
.list{margin:.6rem 0 0 1.2rem; color:var(--muted); font-size:14px}

/* PROCESS */
.timeline{display:grid; gap:1.25rem; margin-top:1.5rem}
.step{display:grid; grid-template-columns:48px 1fr; align-items:flex-start; gap:1rem}
.step h3{font-size:1.15rem; margin:.1rem 0 .4rem}
.step p{font-size:15px; line-height:1.65; color:var(--muted)}
.num{width:48px; height:48px; border-radius:12px; background:linear-gradient(135deg,var(--primary),var(--accent)); display:grid; place-items:center; color:#fff; font-weight:900; font-size:18px}

/* STATS */
.stats{display:grid; grid-template-columns:1fr; gap:1rem; margin-top:1.5rem}
.stat{border:1px solid var(--border); border-radius:12px; padding:1.25rem; background:#fff; text-align:center}
.n{font-weight:900; font-size:clamp(1.6rem,5vw,1.8rem)}
.t{color:var(--muted); font-weight:700; font-size:14px}

/* CASE */
.case{display:grid; grid-template-columns:1fr; gap:1.25rem; align-items:start}
.case > div{min-width:0}
.quote{border-left:4px solid var(--primary); padding-left:1rem; color:#111; font-size:1rem; line-height:1.65; margin:1rem 0}
.author{color:var(--muted); font-weight:600; font-size:14px}

/* CONTACT */
.contact{display:grid; grid-template-columns:1fr; gap:1.5rem}
form{display:grid; gap:.9rem}
form > div{width:100%}
input, textarea{width:100%; border:1px solid var(--border); border-radius:10px; padding:.8rem .9rem; font:inherit; background:#fff; font-size:15px; transition:border-color .2s ease}
input:focus, textarea:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(11,95,255,.1)}
input::placeholder, textarea::placeholder{color:#94a3b8}
textarea{min-height:110px; resize:vertical}
button[type="submit"]{width:100%}

/* FOOTER */
.footer{border-top:1px solid var(--border); padding:1.5rem 0; color:var(--muted); font-size:13px}
.foot__inner{display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap}

/* Reveal */
[data-reveal]{opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease}
[data-reveal].in{opacity:1; transform:none}

/* Mobile Only: Nur Button + mobile-visible Links sichtbar */
@media (max-width:639px){
    .links a:not(.btn):not(.mobile-visible){display:none}
}

/* Tablet & Desktop Breakpoints (Mobile First) */
@media (min-width:640px){
    .container{padding:0 1.5rem}
    .nav__in{padding:.9rem 1.5rem}
    /* Desktop: Alle Links sichtbar */
    .links a:not(.btn){display:block}
    .cta{flex-direction:row}
    .cta .btn{width:auto}
    .logos__in{grid-template-columns:repeat(4,1fr); gap:1rem}
    .stats{grid-template-columns:repeat(2,1fr)}
    .step{grid-template-columns:58px 1fr; gap:var(--space-3)}
    .num{width:58px; height:58px; border-radius:14px; font-size:20px}
    .code{font-size:12px}
    .panel{padding:1.25rem}
}

@media (min-width:768px){
    .hero{padding:calc(var(--space-6) + .5rem) 0 var(--space-6)}
    section{padding:var(--space-6) 0}
    .logos{padding:var(--space-5) 0}
    .grid-3{grid-template-columns:repeat(2,1fr)}
    .card{padding:var(--space-4)}
    .case{gap:1.5rem}
}

@media (min-width:1020px){
    .hero__grid{grid-template-columns:1.1fr .9fr; gap:var(--space-5)}
    .grid-3{grid-template-columns:repeat(3,1fr)}
    .stats{grid-template-columns:repeat(4,1fr)}
    .case{grid-template-columns:1.1fr .9fr; align-items:center}
    .contact{grid-template-columns:1.1fr .9fr}
    .code{font-size:13px}
}