/* chacho.app – gemeinsames Layout (Header, Menü, Footer, Grundelemente) · v2 · 02.10.2026 */
:root{--navy:#001f3f;--navy2:#00152c;--yellow:#FFDC00;--paper:#f0eee8;--gray:#9aa0b4;--soft:#c9ccd6;--ink2:#3c4562;--ink3:#4b5470;--green:#3ddc97;--red:#ff6b6b;
--display:'Archivo Variable','Archivo','Arial Black',system-ui,sans-serif;--body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;--mono:'DM Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;--hand:'Caveat','Comic Sans MS',cursive;--logo:'Archivo Black','Arial Black',sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--navy);color:var(--paper);font-family:var(--body);font-size:16px;line-height:1.6}
img{max-width:100%;display:block}
a{color:var(--yellow)}a:hover{color:#fff3a3}
button,input,select{font:inherit}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.wrap{max-width:1360px;margin:0 auto;padding-inline:24px}
.y{color:var(--yellow)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:14px 26px;border-radius:999px;font-weight:700;font-size:17px;text-decoration:none;border:0;cursor:pointer;transition:transform .18s ease}
.btn:hover{transform:translateY(-2px) rotate(-1deg)}
.btn-y{background:var(--yellow);color:var(--navy)}.btn-y:hover{color:var(--navy)}
.btn-n{background:var(--navy);color:var(--yellow)}.btn-n:hover{color:var(--yellow)}

/* sticky header – identisch auf allen Seiten */
.hdr{position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(240,238,232,.06)}
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(0,31,63,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:68px}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--yellow)}
.logo svg{width:32px;height:32px}
.logo span{font-family:var(--logo);font-size:21px;letter-spacing:-.01em}
.nav{display:flex;align-items:center;gap:22px;font-size:14px;font-weight:500}
.nav a.l{color:var(--paper);text-decoration:none}.nav a.l:hover,.nav a.l.cur{color:var(--yellow)}
.langs{display:flex;gap:2px;font-family:var(--mono);font-size:12px}
.langs a{color:var(--gray);text-decoration:none;padding:5px 8px;border-radius:6px}
.langs a.on{background:var(--yellow);color:var(--navy)}
.nav .btn{min-height:40px;padding:9px 18px;font-size:14px}
.burger{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;color:var(--paper);padding:0;align-items:center;justify-content:center}
.burger span,.burger span::before,.burger span::after{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;position:relative;content:''}
.burger span::before{position:absolute;top:-7px}.burger span::after{position:absolute;top:7px}
.burger[aria-expanded="true"] span{background:transparent}.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
.mmenu{display:none}
@media(max-width:1060px){
 .nav{display:none}.burger{display:inline-flex}
 .mmenu.open{display:flex;position:fixed;inset:68px 0 0 0;background:var(--navy);z-index:49;flex-direction:column;padding:28px 24px;gap:6px;overflow-y:auto}
 .mmenu a.l{color:var(--paper);text-decoration:none;font-family:var(--display);font-stretch:115%;font-weight:700;font-size:28px;padding:8px 0;border-bottom:1px solid rgba(240,238,232,.1)}
 .mmenu a.l.cur{color:var(--yellow)}
 .mmenu .langs{margin-top:18px;font-size:15px}
 .mmenu .btn{margin-top:18px;align-self:flex-start}
}

/* footer */
.ftr{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--gray);border-top:1px solid rgba(240,238,232,.12);padding-top:24px;padding-bottom:40px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}