/* ============================================================
   v-massive – Shared Stylesheet
   Included by: index.html, impressum.html, datenschutz.html,
                cookies.html
   ============================================================ */

/* ---- Fonts ---- */
@font-face { font-family:'Poppins'; font-style:normal; font-weight:300; font-display:swap; src:url('font/poppins/normal/300-latin-ext.woff2') format('woff2'); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:300; font-display:swap; src:url('font/poppins/normal/300-latin.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap; src:url('font/poppins/normal/400-latin-ext.woff2') format('woff2'); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap; src:url('font/poppins/normal/400-latin.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap; src:url('font/poppins/normal/500-latin-ext.woff2') format('woff2'); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap; src:url('font/poppins/normal/500-latin.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url('font/poppins/normal/600-latin-ext.woff2') format('woff2'); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url('font/poppins/normal/600-latin.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap; src:url('font/poppins/normal/700-latin-ext.woff2') format('woff2'); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap; src:url('font/poppins/normal/700-latin.woff2') format('woff2'); }
@font-face { font-family:'Material Symbols Outlined'; font-style:normal; font-weight:100 700; font-display:swap; src:url('font/materialsymbolsoutlined/materialsymbolsoutlined.woff2') format('woff2'); }

.icon {
    font-family: 'Material Symbols Outlined';
    font-weight: normal; font-style: normal;
    font-size: inherit; line-height: 1;
    letter-spacing: normal; text-transform: none;
    display: inline-block; white-space: nowrap;
    direction: ltr; -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

/* ---- Variables ---- */
:root {
    --bg-0:    #c2ddef;
    --bg-1:    #d5eaf8;
    --bg-2:    #e8f3fc;
    --bg-card: #f4f9fd;
    --bg-card-h: #eaf3fb;

    --t0: #050e1c;
    --t1: #0f2440;
    --t2: #2d5070;
    --t3: #587a94;

    --nav-bg:      rgba(255,255,255,.97);
    --nav-text:    #0f2440;
    --nav-text-m:  #2d5070;
    --nav-border:  rgba(15,36,64,.12);

    --accent:   #3b82f6;
    --accent-l: #60a5fa;
    --accent-d: #1d4ed8;
    --accent-g: rgba(59,130,246,.18);
    --warm:     #f59e0b;
    --warm-l:   #fbbf24;

    --border:   rgba(15,36,64,.13);
    --border-h: rgba(59,130,246,.55);
    --radius-s: 8px;
    --radius-m: 16px;
    --radius-l: 24px;
    --shadow-m: 0 8px 32px rgba(15,36,64,.10);
    --shadow-l: 0 24px 64px rgba(15,36,64,.15);
    --ease:     cubic-bezier(.4,0,.2,1);
    --tr:       .28s;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

body {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    background: var(--bg-1);
    color: var(--t1);
    line-height: 1.6;
    overflow-x: hidden;
}

/* ---- Layout ---- */
.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 28px; }

/* ---- Typography ---- */
h2 { font-size: clamp(1.9rem,4vw,3rem); font-weight:600; line-height:1.15; letter-spacing:-.025em; color:var(--t0); }
h3 { font-size:1.2rem; font-weight:600; line-height:1.3; color:var(--t0); margin-bottom:8px; }
h4 { font-size:.95rem; font-weight:600; color:var(--t0); margin-bottom:4px; }
p  { color:var(--t2); font-weight:300; line-height:1.75; }
.label { display:block; font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; }

/* ---- Buttons ---- */
.btn {
    display:inline-flex; align-items:center; gap:8px;
    padding:13px 26px; border-radius:var(--radius-s);
    font-family:'Poppins',sans-serif; font-size:.9375rem; font-weight:500;
    cursor:pointer; border:none;
    transition: background var(--tr) var(--ease), color var(--tr) var(--ease),
                transform var(--tr) var(--ease), box-shadow var(--tr) var(--ease),
                border-color var(--tr) var(--ease);
}
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-l); transform:translateY(-2px); box-shadow:0 10px 28px var(--accent-g); }
.btn-outline { background:transparent; color:var(--t1); border:1px solid var(--border); }
.btn-outline:hover { border-color:var(--border-h); color:var(--t0); background:rgba(15,36,64,.05); }
.btn-sm { padding:9px 18px; font-size:.84rem; }

/* ---- Progress bar ---- */
#progress { position:fixed; top:0; left:0; height:2px; background:var(--accent); width:0%; z-index:9999; transition:width .1s linear; }

/* ---- Navigation ---- */
#nav {
    position:fixed; top:0; left:0; right:0; z-index:1000;
    padding:22px 0;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background var(--tr) var(--ease), padding var(--tr) var(--ease),
                border var(--tr) var(--ease), backdrop-filter var(--tr) var(--ease);
}
#nav.solid {
    background: var(--nav-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 14px 0;
    border-bottom: 1px solid var(--nav-border);
    box-shadow: 0 2px 24px rgba(15,36,64,.10);
}
.nav-inner { display:flex; align-items:center; justify-content:space-between; }
.nav-logo svg { height:34px; width:auto; fill:var(--t0); display:block; }
.nav-links { display:flex; align-items:center; gap:34px; }
.nav-links a { font-size:.88rem; font-weight:400; color:var(--nav-text-m); transition:color var(--tr); }
.nav-links a:hover { color:var(--nav-text); }
.nav-right { display:flex; align-items:center; gap:14px; }

.lang-switch { display:flex; align-items:center; gap:3px; background:rgba(255,255,255,.15); border-radius:20px; padding:4px; }
.lang-btn { font-family:'Poppins',sans-serif; font-size:.72rem; font-weight:600; letter-spacing:.05em; color:var(--t3); background:none; border:none; cursor:pointer; padding:4px 11px; border-radius:16px; transition:background var(--tr), color var(--tr); }
.lang-btn.active { background:var(--accent); color:#fff; }
.lang-btn:hover:not(.active) { color:var(--t1); }

/* Solid nav – adapted colours */
#nav.solid .nav-logo svg     { fill: var(--nav-text); }
#nav.solid .nav-links a      { color: var(--nav-text-m); }
#nav.solid .nav-links a:hover{ color: var(--nav-text); }
#nav.solid .lang-switch       { background: rgba(15,36,64,.08); }
#nav.solid .lang-btn          { color: var(--nav-text-m); }
#nav.solid .lang-btn.active   { background: var(--accent); color: #fff; }
#nav.solid .burger            { color: var(--nav-text); }

.burger { display:none; background:none; border:none; color:var(--t0); font-size:1.6rem; cursor:pointer; line-height:1; }

#mobile-nav {
    display:none; position:fixed; inset:0;
    background:var(--bg-2); z-index:999;
    flex-direction:column; padding:90px 28px 40px; gap:8px; overflow-y:auto;
}
#mobile-nav.open { display:flex; }
.mob-close { position:absolute; top:20px; right:22px; background:none; border:none; color:var(--t1); font-size:1.8rem; cursor:pointer; }
.mob-link { font-size:1.4rem; font-weight:600; color:var(--t1); padding:14px 0; border-bottom:1px solid var(--border); transition:color var(--tr); }
.mob-link:hover { color:var(--accent); }

/* ---- Footer ---- */
footer { background:var(--bg-0); padding:68px 0 32px; border-top:1px solid var(--border); }
.footer-top { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:52px; }
.footer-brand svg { height:30px; width:auto; fill:var(--t0); display:block; margin-bottom:16px; }
.footer-tagline { font-size:.82rem; color:var(--t3); }
.footer-col h5 { font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--t2); margin-bottom:16px; }
.footer-col ul { display:flex; flex-direction:column; gap:11px; }
.footer-col ul li a { font-size:.84rem; color:var(--t3); transition:color var(--tr); }
.footer-col ul li a:hover { color:var(--t1); }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; padding-top:30px; border-top:1px solid var(--border); }
.footer-copy { font-size:.78rem; color:var(--t3); }
.footer-legal { display:flex; gap:22px; }
.footer-legal a { font-size:.78rem; color:var(--t3); transition:color var(--tr); }
.footer-legal a:hover { color:var(--t1); }

/* ---- Cookie Banner ---- */
#cookie-banner {
    position:fixed; bottom:20px; left:20px; max-width:460px;
    background:var(--bg-2); border:1px solid var(--border);
    border-radius:var(--radius-m); padding:24px; z-index:2000;
    box-shadow:var(--shadow-l); display:none;
}
#cookie-banner.show { display:block; animation:slideUp .4s var(--ease); }
@keyframes slideUp { from { transform:translateY(80px); opacity:0; } to { transform:none; opacity:1; } }
#cookie-banner p { font-size:.84rem; margin-bottom:16px; }
#cookie-banner a { color:var(--accent-l); text-decoration:underline; }
.cookie-btns { display:flex; gap:10px; }

/* ---- Reveal ---- */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .65s var(--ease), transform .65s var(--ease); }
.reveal.visible { opacity:1; transform:none; }
.d1 { transition-delay:.10s; } .d2 { transition-delay:.20s; }
.d3 { transition-delay:.30s; } .d4 { transition-delay:.40s; }

/* ---- Responsive ---- */
@media (max-width:1024px) {
    .footer-top { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
    .nav-links, .nav-right .btn { display:none; }
    .burger { display:flex; align-items:center; justify-content:center; }
    .footer-top { grid-template-columns:1fr; }
    .footer-bottom { flex-direction:column; gap:14px; text-align:center; }
}
@media (max-width:480px) {
    .container { padding:0 18px; }
}

/* ---- Subpage shared JS snippet ---- */