/* neuroJourney – Hauptseite */
@font-face{font-family:"Chillax";font-weight:400;font-style:normal;font-display:swap;
    src:url("../fonts/Chillax-Regular.woff2") format("woff2"),url("../fonts/Chillax-Regular.woff") format("woff")}
@font-face{font-family:"Chillax";font-weight:500;font-style:normal;font-display:swap;
    src:url("../fonts/Chillax-Medium.woff2") format("woff2"),url("../fonts/Chillax-Medium.woff") format("woff")}

:root{
    --navy:#061542; --white:#fff;
    --rosa:#D9748F; --lila:#685DAB; --blaugruen:#189698; --hellgruen:#96C044;
    --hellblau:#259DCC; --orange:#DB912A; --rot:#CE5345; --grau:#CCCCCC;
    --font-text:"Montserrat", system-ui, sans-serif;
    --font-head:"Chillax","Montserrat", system-ui, sans-serif;
    --max:1120px; --pad:clamp(1.25rem,5vw,3rem);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:7rem}
body{margin:0;background:var(--white);color:var(--navy);font-family:var(--font-text);font-size:1.0625rem;line-height:1.7;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
main{flex:1 0 auto}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--hellblau);outline-offset:3px}
h1,h2,h3{font-family:var(--font-head);font-weight:500;line-height:1.15;margin:0 0 1rem}
h1{font-size:clamp(2.4rem,7vw,4.5rem)}
h2{font-size:clamp(1.8rem,4.5vw,2.75rem)}
h3{font-size:1.25rem}
p{margin:0 0 1.1rem;max-width:68ch}
.nj{font-family:var(--font-head);font-weight:400}
.nj b{font-weight:500}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
section{padding:clamp(3.5rem,9vw,6.5rem) 0}
.alt{background:#f5f6fa}

/* Header & Footer: invertiert */
.site-header,.site-footer{background:var(--navy);color:var(--white)}
.site-header{position:sticky;top:0;z-index:50}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;min-height:6rem}
.logo img{height:2.25rem;width:auto}
.site-header .logo img{height:3.75rem}
.nav-toggle{position:absolute;opacity:0;pointer-events:none}
.burger{display:block;cursor:pointer;padding:.75rem;margin-right:-.75rem}
.burger span,.burger span::before,.burger span::after{display:block;width:1.6rem;height:2px;background:var(--white);content:"";position:relative;transition:transform .2s,top .2s}
.burger span::before{position:absolute;top:-8px}
.burger span::after{position:absolute;top:8px}
.nav-toggle:focus-visible+.burger{outline:3px solid var(--hellblau)}
.nav-toggle:checked+.burger span{background:transparent}
.nav-toggle:checked+.burger span::before{top:0;transform:rotate(45deg)}
.nav-toggle:checked+.burger span::after{top:0;transform:rotate(-45deg)}
.main-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--navy);padding:.5rem var(--pad) 1.5rem;border-top:1px solid rgba(255,255,255,.15)}
.nav-toggle:checked~.main-nav{display:block}
.main-nav ul{list-style:none;margin:0;padding:0}
.main-nav a{display:block;padding:.75rem 0;text-decoration:none;font-weight:500}
.main-nav a:hover{text-decoration:underline;text-underline-offset:6px}
@media(min-width:860px){
    .burger{display:none}
    .main-nav{display:block;position:static;padding:0;border:0;background:none}
    .main-nav ul{display:flex;gap:2.25rem}
    .main-nav a{padding:.5rem 0}
}
.site-footer{padding:3rem 0 2rem;font-size:.95rem}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.75rem}
.site-footer a{text-decoration:underline;text-underline-offset:4px}
.site-footer .logo img{height:4rem}
.footer-right{display:flex;flex-direction:column;gap:1.25rem}
.site-footer .copy{margin:0;opacity:.7;font-size:.85rem}
@media(min-width:760px){.footer-right{align-items:flex-end;text-align:right}.site-footer ul{justify-content:flex-end}}

/* Hero */
.hero{padding:clamp(4rem,12vw,9rem) 0 clamp(3.5rem,8vw,6rem)}
.hero-grid{display:grid;gap:3rem;align-items:center}
@media(min-width:860px){.hero-grid{grid-template-columns:1.3fr 1fr;gap:4rem}}
.hero-logo{width:min(100%,380px);justify-self:center}
.hero h1{max-width:16ch}
.hero .lead{font-size:clamp(1.1rem,2.4vw,1.35rem);max-width:46ch}
.dots{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2.5rem}
.dots i{width:1.1rem;height:1.1rem;border-radius:50%}

/* Vision */
.split{display:grid;gap:2rem}
@media(min-width:860px){.split{grid-template-columns:1fr 1.3fr;gap:4rem;align-items:center}.vision-img{order:-1}}
.vision-img{width:100%;max-width:440px;justify-self:center;border-radius:1.5rem}
.quote{font-family:var(--font-head);font-size:clamp(1.4rem,3vw,2rem);line-height:1.35;border-left:6px solid var(--lila);padding-left:1.25rem;margin:0}

/* Über die App */
.features{display:grid;gap:1.5rem;margin:2.5rem 0;padding:0;list-style:none}
@media(min-width:760px){.features{grid-template-columns:repeat(3,1fr)}}
.features li{border-top:5px solid var(--c);padding-top:1rem}
.features p{margin:0;font-size:1rem}

/* Clickdummy-Platzhalter */
.demo{text-align:center}
.demo p{margin-left:auto;margin-right:auto}
.phone{width:min(260px,70vw);aspect-ratio:9/18.5;margin:2.5rem auto 0;border:10px solid var(--navy);border-radius:2.5rem;display:grid;place-items:center;padding:1.5rem;color:#5a6384;background:#f5f6fa;font-size:.95rem}

/* FAQ */
.faq{max-width:780px}
.faq details{border-bottom:1px solid var(--grau)}
.faq summary{cursor:pointer;list-style:none;display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:1.25rem 0;font-family:var(--font-head);font-weight:500;font-size:1.2rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.75rem;line-height:1;color:var(--c);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-bottom:1.25rem;margin:0}

/* Über mich */
.about{display:grid;gap:2rem;align-items:center}
@media(min-width:760px){.about{grid-template-columns:320px 1fr;gap:4rem}}
.about img{width:100%;max-width:320px;aspect-ratio:1;object-fit:cover;object-position:50% 15%;border-radius:50%;border:6px solid var(--rosa)}
.sign{font-family:var(--font-head);font-weight:500}

/* Rechtstexte */
.legal{padding-top:clamp(3rem,8vw,5.5rem)}
.legal h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:2rem}
.legal h2{font-size:1.5rem;margin:2.5rem 0 .75rem}
.legal h3{font-size:1.15rem;margin:1.75rem 0 .5rem}
.legal ul{max-width:68ch;margin:0 0 1.1rem;padding-left:1.25rem}
.legal li{margin-bottom:.4rem}
.legal a{text-underline-offset:3px;overflow-wrap:anywhere}