/* openmatch shared layer. Tokens, base, nav, footer, buttons, banner, modal, forms,
   section headers and the page type scale (--fs-1 … --fs-8). Every page links this
   before its own /assets/<page>.css. The phone/desktop mockups are illustrations and
   keep their own pixel sizes on purpose. Batch 0 of the 2026-09 site audit. */
        :root { --bg: #04040A; --bg-2: #0A0A14; --bg-3: #0E0E1A; --bg-card: #111124; --bg-card-h: #16163A; --glass: rgba(10,10,20,0.65); --accent: #E94560; --accent-l: #FF6B8A; --accent-d: #C02040; --btn-fill: #CC3C54; --btn-fill-2: #C02040; --accent-glow: rgba(233,69,96,0.35); --accent-soft: rgba(233,69,96,0.07); --accent-b: rgba(233,69,96,0.12); --green: #22C55E; --green-s: rgba(34,197,94,0.08); --green-b: rgba(34,197,94,0.15); --purple: #8B5CF6; --purple-s: rgba(139,92,246,0.08); --purple-b: rgba(139,92,246,0.12); --blue: #3B82F6; --amber: #F59E0B; --amber-s: rgba(245,158,11,0.08); --amber-b: rgba(245,158,11,0.12); --blue-s: rgba(59,130,246,0.08); --blue-b: rgba(59,130,246,0.12); --t1: #F2F2FA; --t2: #8E8EA8; --t3: #84849F; --t-mute: #52526E; --b1: rgba(255,255,255,0.04); --b2: rgba(255,255,255,0.07); --b3: rgba(255,255,255,0.11); --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 28px; --r-full: 100px; --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --mono: 'JetBrains Mono', monospace; --ease: cubic-bezier(0.16,1,0.3,1); --bounce: cubic-bezier(0.34,1.56,0.64,1); --fs-1: 0.7rem; --fs-2: 0.82rem; --fs-3: 0.92rem; --fs-4: 1.05rem; --fs-5: 1.25rem; --fs-6: 1.5rem; --fs-7: 2rem; --fs-8: 2.6rem; }
        *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
        html { scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--accent) var(--bg); }
        body { background: var(--bg); color: var(--t1); font-family: var(--font); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
        ::-webkit-scrollbar { width: 4px; }
        ::-webkit-scrollbar-track { background: var(--bg); }
        ::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; }
        ::selection { background: rgba(233,69,96,0.3); color: #fff; }
        img { max-width:100%; display:block; }
        a { color:inherit; text-decoration:none; }
        button { cursor:pointer; font-family:inherit; border:none; }
        body::after { content:''; position:fixed; inset:0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.018'/%3E%3C/svg%3E"); pointer-events:none; z-index:9999; }
        .container { max-width:1100px; margin:0 auto; padding:0 1.5rem; }
        .nav { position:fixed; top:0; left:0; right:0; z-index:1000; padding: 0.7rem 0 0; transition: all 0.5s var(--ease); }
        .nav.scrolled { background: rgba(4,4,10,0.88); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); border-bottom: 1px solid var(--b1); padding: 0.4rem 0 0; }
        .nav-top { display:flex; justify-content:space-between; align-items:center; padding-bottom:0.45rem; }
        .nav-top-center { display:flex; align-items:center; gap:0.25rem; }
        .nav-tab { font-size:var(--fs-2); font-weight:600; color:var(--t3); padding:0.35rem 0.9rem; border-radius:var(--r-full); transition: all 0.25s; white-space:nowrap; text-decoration:none; }
        .nav-tab:hover { color:var(--t1); background:var(--b1); }
        .nav-tab.active { color:#fff; background:var(--btn-fill); box-shadow:0 2px 10px var(--accent-glow); }
        .nav-top-right { display:flex; align-items:center; gap:0.65rem; }
        .nav-bottom { display:flex; justify-content:center; padding:0.45rem 0 0.55rem; gap:1.8rem; align-items:center; border-top:1px solid rgba(255,255,255,0.04); }
        .nav-logo { display:inline-flex; align-items:center; gap:0; font-size:var(--fs-5); font-weight:800; letter-spacing:-0.5px; }
        .nav-logo em { font-style:normal; color:var(--accent); }
        .nav-logo svg { width:64px; height:54px; flex-shrink:0; margin-right:0.6rem; }
        .nav-links a { font-size:var(--fs-2); font-weight:500; color:var(--t2); transition: color 0.25s; position:relative; white-space:nowrap; }
        .nav-links a:hover { color:var(--t1); }
        .nav-links a::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:1.5px; background:var(--accent); transition: width 0.3s var(--ease); }
        .nav-links a:hover::after { width:100%; }
        .btn-nav { padding: 0.42rem 1rem; background: var(--btn-fill) !important; color:#fff !important; border-radius: var(--r-sm); font-weight:600; font-size:var(--fs-2); transition: all 0.3s; position:relative; overflow:hidden; box-shadow: 0 4px 20px var(--accent-glow); text-decoration:none; white-space:nowrap; }
        .btn-nav::after { display:none !important; }
        .btn-nav::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent); animation: shimmer 3s infinite; }
        @keyframes shimmer {
            0%{left:-100%} 100%{left:200%}
        }
        .btn-nav:hover { transform:translateY(-1px); box-shadow: 0 6px 30px var(--accent-glow); }
        .mobile-toggle { display:none; background:none; border:none; color:var(--t1); font-size:var(--fs-6); padding:0.25rem; }
        .nav-mobile-extras { display:none; }
        .nav-tabs-mobile { display:none; }
        .lang-toggle { display:flex; align-items:center; gap:0; background:var(--b1); border:1px solid var(--b1); border-radius:var(--r-full); overflow:hidden; }
        .lang-btn { padding:0.3rem 0.65rem; font-size:var(--fs-1); font-weight:600; color:var(--t3); background:transparent; border:none; cursor:pointer; transition:all 0.25s; letter-spacing:0.5px; font-family:var(--font); }
        .lang-btn.active { background:var(--btn-fill); color:#fff; box-shadow: 0 2px 8px var(--accent-glow); }
        .lang-btn:hover:not(.active) { color:var(--t2); }
        .btn { display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; padding:0.85rem 1.8rem; border-radius:var(--r-md); font-size:var(--fs-3); font-weight:600; border:none; transition: all 0.35s var(--ease); position:relative; overflow:hidden; }
        .btn-primary { background: linear-gradient(135deg, var(--btn-fill) 0%, var(--accent-d) 100%); color:#fff; box-shadow: 0 4px 24px var(--accent-glow); }
        .btn-primary:hover { transform:translateY(-3px); box-shadow: 0 8px 40px var(--accent-glow); }
        .btn-primary::before { content:''; position:absolute; inset:0; background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.12) 100%); opacity:0; transition: opacity 0.35s; }
        .btn-primary:hover::before { opacity:1; }
        .btn-primary:focus-visible { outline:2px solid var(--accent-l); outline-offset:3px; }
        .btn-ghost { background: var(--b1); color:var(--t1); border: 1px solid var(--b2); backdrop-filter:blur(8px); }
        .btn-ghost:hover { background:var(--b2); border-color:var(--b3); transform:translateY(-3px); }
        .btn-ghost:focus-visible { outline:2px solid var(--t2); outline-offset:3px; }
        .venue-grid-bg { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
        .venue-grid-bg svg { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; max-width:1000px; height:auto; opacity:0.03; }
        @keyframes ping {
            0%{opacity:0.5;transform:scale(1)} 100%{opacity:0;transform:scale(2.8)}
        }
        .s-pad { padding:7rem 0; }
        .s-divider { border-top:1px solid var(--b1); }
        .s-bg { background:var(--bg-2); }
        .s-label { font-family:var(--mono); font-size:var(--fs-4); font-weight:600; text-transform:uppercase; letter-spacing:3.5px; color:var(--accent); margin-bottom:0.75rem; }
        .s-title { font-size:clamp(1.9rem, 3.8vw, 2.8rem); font-weight:800; letter-spacing:-1.8px; line-height:1.08; }
        .s-desc { font-size:var(--fs-4); color:var(--t2); max-width:500px; line-height:1.75; margin-top:1rem; font-weight:300; }
        .s-head { margin-bottom:4rem; }
        .s-head-c { text-align:center; display:flex; flex-direction:column; align-items:center; }
        .pr-card { background:var(--bg-card); border:1px solid var(--b1); border-radius:var(--r-xl); padding:2.5rem 1.8rem; transition:all 0.4s var(--ease); position:relative; display:flex; flex-direction:column; }
        .pr-card:hover { transform:translateY(-6px); box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
        .pr-card.pop { border-color:var(--accent-b); background: linear-gradient(180deg, rgba(233,69,96,0.03) 0%, var(--bg-card) 35%); }
        .pr-card.pop::before { content:'Early Birds'; position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--accent); color:#fff; font-size:var(--fs-1); font-weight:700; text-transform:uppercase; letter-spacing:1.5px; padding:0.3rem 0.9rem; border-radius:var(--r-full); box-shadow: 0 4px 16px var(--accent-glow); }
        .pr-tier { font-size:var(--fs-2); font-weight:600; color:var(--t2); margin-bottom:0.4rem; }
        .pr-amt { font-size:var(--fs-8); font-weight:900; letter-spacing:-2px; }
        .pr-amt span { font-size:var(--fs-2); font-weight:300; color:var(--t3); }
        .pr-amt .pr-amt-val { font-size:inherit; font-weight:inherit; color:inherit; letter-spacing:inherit; }
        .pr-amt-old { font-size:var(--fs-5); font-weight:500; color:var(--t3); text-decoration:line-through; text-decoration-thickness:2px; margin-right:0.5rem; letter-spacing:-0.5px; opacity:0.6; vertical-align:0.45em; }
        .pr-promo { font-size:var(--fs-2); font-weight:700; color:var(--accent); letter-spacing:0.2px; line-height:1.45; margin:0.5rem 0 0.4rem; }
        .pr-desc { font-size:var(--fs-2); color:var(--t3); margin:0.4rem 0 1.5rem; }
        .pr-feats li { display:flex; align-items:center; gap:0.45rem; font-size:var(--fs-2); color:var(--t2); }
        .pr-feats li .ck { color:var(--green); font-size:var(--fs-1); }
        .pr-btn { display:block; width:100%; padding:0.75rem; border-radius:var(--r-sm); font-weight:600; font-size:var(--fs-3); text-align:center; transition:all 0.3s; border:1px solid var(--b2); background:transparent; color:var(--t1); font-family:inherit; margin-top:auto; }
        .pr-btn:hover { background:var(--b2); border-color:var(--b3); }
        .pr-card.pop .pr-btn { background:var(--accent); border-color:var(--accent); color:#fff; box-shadow: 0 4px 20px var(--accent-glow); }
        .pr-card.pop .pr-btn:hover { box-shadow: 0 8px 32px var(--accent-glow); transform:translateY(-1px); }
        .pr-zero-row { display:flex; align-items:center; justify-content:center; gap:0.5rem; max-width:720px; margin:1.5rem auto 0; flex-wrap:wrap; }
        .pr-zero-pill { display:inline-flex; align-items:center; gap:0.35rem; padding:0.4rem 0.9rem; border-radius:var(--r-full); background:rgba(74,222,128,0.06); border:1px solid rgba(74,222,128,0.12); font-size:var(--fs-2); color:var(--t2); font-weight:500; }
        .pr-zero-pill .zv { color:var(--green); font-weight:700; font-size:var(--fs-2); }
        .pr-zero-dot { width:3px; height:3px; border-radius:50%; background:var(--b3); flex-shrink:0; }
        .pr-note { text-align:center; margin-top:1.25rem; }
        .pr-note-inner { display:inline-block; padding:0.6rem 1.5rem; background:var(--b1); border:1px solid var(--b1); border-radius:var(--r-full); font-size:var(--fs-2); color:var(--t2); }
        .pr-note-inner strong { color:var(--green); font-weight:600; }
        .footer { padding:3rem 0; border-top:1px solid var(--b1); background:var(--bg-2); }
        .ft-top { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.5rem; }
        .ft-left { display:flex; align-items:center; gap:2rem; }
        .ft-logo { font-size:var(--fs-4); font-weight:800; }
        .ft-logo em { font-style:normal; color:var(--accent); }
        .ft-nav { display:flex; gap:1.3rem; }
        .ft-nav a { font-size:var(--fs-2); color:var(--t3); transition:color 0.2s; }
        .ft-nav a:hover { color:var(--t2); }
        .ft-social { display:flex; gap:0.6rem; }
        .ft-social a { width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:var(--bg-card); border:1px solid var(--b1); border-radius:var(--r-sm); font-size:var(--fs-3); color:var(--t2); transition:all 0.25s; }
        .ft-social a:hover { border-color:var(--accent-b); color:var(--accent); transform:translateY(-2px); }
        /* "Made with love in Berlin" on its own line, the legal links centred under it. */
        .ft-bottom { display:flex; flex-direction:column; align-items:center; gap:0.9rem; margin-top:2rem; padding-top:2rem; border-top:1px solid var(--b1); text-align:center; }
        .ft-copyright { text-align:center; margin-top:1.2rem; }
        .ft-copyright .ft-copy { font-size:var(--fs-1); color:var(--t3); }
        .ft-copy { font-size:var(--fs-1); color:var(--t3); }
        .ft-made { display:inline-flex; align-items:center; gap:0.3rem; padding:0.25rem 0.7rem; background:var(--b1); border-radius:var(--r-full); font-size:var(--fs-1); color:var(--t3); font-weight:500; }
        .ft-made img { width:18px; height:18px; display:block; }
        .ft-legal { display:flex; flex-wrap:wrap; justify-content:center; gap:0.6rem 1.2rem; align-items:center; }
        .ft-legal span { font-size:var(--fs-1); line-height:1.2; }
        .ft-legal a { font-size:var(--fs-1); color:var(--t3); transition:color 0.2s; white-space:nowrap; }
        .ft-legal a:hover { color:var(--t2); }
        /* visibility (not just opacity) so a closed dialog's controls leave the tab order and the
           accessibility tree; the delayed visibility transition keeps the fade-out. */
        .modal-overlay { position:fixed; inset:0; z-index:9999; background:rgba(4,4,10,0.85); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; pointer-events:none; transition:opacity 0.3s var(--ease), visibility 0s linear 0.3s; padding:1.25rem; }
        .modal-overlay.active { opacity:1; visibility:visible; pointer-events:auto; transition:opacity 0.3s var(--ease), visibility 0s; }
        .modal-box { background:var(--bg-card); border:1px solid var(--b2); border-radius:var(--r-lg); width:100%; max-width:460px; max-height:90vh; overflow-y:auto; padding:2.5rem 2rem 2rem; position:relative; transform:translateY(24px) scale(0.96); transition:transform 0.35s var(--ease); box-shadow:0 40px 100px rgba(0,0,0,0.5); }
        .modal-overlay.active .modal-box { transform:translateY(0) scale(1); }
        .modal-close { position:absolute; top:1rem; right:1rem; width:32px; height:32px; border-radius:50%; background:var(--b1); border:1px solid var(--b2); color:var(--t3); font-size:var(--fs-4); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; }
        .modal-close:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
        .modal-label { font-family:var(--mono); font-size:var(--fs-1); font-weight:600; text-transform:uppercase; letter-spacing:2px; color:var(--accent); margin-bottom:0.5rem; }
        .modal-title { font-size:var(--fs-5); font-weight:800; letter-spacing:-0.5px; margin-bottom:0.4rem; color:var(--t1); }
        .modal-desc { font-size:var(--fs-2); color:var(--t3); margin-bottom:1.5rem; line-height:1.5; }
        .modal-field { margin-bottom:1rem; }
        .modal-field label { display:block; font-size:var(--fs-1); font-weight:600; color:var(--t2); text-transform:uppercase; letter-spacing:1px; margin-bottom:0.35rem; }
        .modal-field input:focus, .modal-field select:focus, .modal-field textarea:focus { border-color:var(--accent); }
        .modal-field input::placeholder, .modal-field textarea::placeholder { color:var(--t3); }
        .modal-field textarea { resize:vertical; min-height:70px; }
        .modal-field select { cursor:pointer; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23888' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 0.8rem center; }
        .modal-field select option { background:var(--bg); color:var(--t1); }
        .modal-submit { width:100%; padding:0.8rem; border:none; border-radius:var(--r-sm); background:var(--accent); color:#fff; font-weight:700; font-size:var(--fs-3); cursor:pointer; transition:all 0.25s; margin-top:0.5rem; }
        .modal-submit:hover { background:var(--accent-l); transform:translateY(-2px); box-shadow:0 8px 30px var(--accent-glow); }
        .modal-submit:disabled { opacity:0.5; cursor:not-allowed; transform:none; box-shadow:none; }
        .modal-consent { display:flex; align-items:flex-start; gap:0.5rem; margin-top:0.6rem; margin-bottom:0.2rem; }
        .modal-consent input[type="checkbox"] { margin-top:0.25rem; accent-color:var(--accent); flex-shrink:0; width:15px; height:15px; cursor:pointer; }
        .modal-consent label { font-size:var(--fs-1); color:var(--t3); line-height:1.5; cursor:pointer; }
        .modal-consent a { color:var(--t2); text-decoration:underline; }
        .modal-consent a:hover { color:var(--accent); }
        .modal-success { text-align:center; padding:2rem 0; }
        .modal-success-icon { font-size:var(--fs-8); margin-bottom:0.75rem; }
        .modal-success-title { font-size:var(--fs-4); font-weight:700; color:var(--t1); margin-bottom:0.3rem; }
        .modal-success-desc { font-size:var(--fs-2); color:var(--t3); line-height:1.5; }
        .modal-optional { font-size:var(--fs-1); color:var(--t3); font-weight:400; text-transform:none; letter-spacing:0; margin-left:0.3rem; }
        @keyframes fadeUp {
            from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)}
        }
        .reveal { opacity:0; transform:translateY(36px); transition:all 0.9s var(--ease); will-change:transform,opacity; }
        .reveal.v { opacity:1; transform:translateY(0); }
        .d1 { transition-delay:0.06s; }
        .d2 { transition-delay:0.12s; }
        .d3 { transition-delay:0.18s; }
        .d4 { transition-delay:0.24s; }
        @media(max-width:900px) {
            .nav-top-center { display:none; }
            .nav-bottom { display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; background:rgba(4,4,10,0.97); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); padding:1.5rem; gap:0; border-bottom:1px solid var(--b1); border-top:none; }
            .nav-bottom.open { display:flex; }
            .nav-bottom .nav-tabs-mobile { display:flex; gap:0.5rem; justify-content:center; padding-bottom:0.75rem; border-bottom:1px solid var(--b1); margin-bottom:0.25rem; }
            .nav-bottom .nav-tabs-mobile .nav-tab { font-size:var(--fs-2); padding:0.45rem 1rem; }
            .nav-bottom .nav-links { display:flex; flex-direction:column; gap:0; width:100%; }
            .nav-links a::after { display:none; }
            .mobile-toggle { display:block; }
            .nav-top-right .btn-nav { display:none; }
            .nav-top-right .lang-toggle { display:none; }
            .nav-mobile-extras { display:flex; flex-direction:column; align-items:center; gap:1rem; padding-top:1rem; border-top:1px solid var(--b1); }
            .nav-mobile-extras .btn-nav-mobile { width:100%; text-align:center; padding:0.7rem 1rem; font-size:var(--fs-3); }
            .nav-mobile-extras .lang-toggle-mobile { margin:0; }
        }
        @media(max-width:680px) {
            .ft-top { flex-direction:column; text-align:center; }
            .ft-left { flex-direction:column; gap:1rem; }
        }
        a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent-l); outline-offset: 2px; border-radius: 4px; }
        .btn-block { display:flex; width:100%; }

        /* nav variants that used to live in home.css; the nav is shared now */
        .nav-links { display:flex; flex-direction:column; align-items:center; gap:0.35rem; }
        .nav-links-main, .nav-links-secondary { display:flex; align-items:center; justify-content:center; gap:1.8rem; flex-wrap:wrap; }
        .nav-links-secondary { gap:1.2rem; margin-top:0.22rem; }
        .nav-links-main a { font-size:var(--fs-3); }
        .nav-links-secondary a { font-weight:700; color:var(--t1); font-size:var(--fs-2); }
        .nav:not(.scrolled) .nav-top-right .btn-nav { background: transparent !important; color: var(--t1) !important; box-shadow: none; border: 1px solid var(--b3); }
        .nav:not(.scrolled) .nav-top-right .btn-nav::before { display: none; }
        .nav:not(.scrolled) .nav-top-right .btn-nav:hover { background: var(--b2) !important; border-color: var(--accent); transform: translateY(-1px); box-shadow: none; }
        @media(max-width:900px) {
            .nav-bottom .nav-links-main, .nav-bottom .nav-links-secondary { display:flex; flex-direction:column; gap:0; width:100%; }
            .nav-bottom .nav-links a { padding:0.65rem 0; font-size:var(--fs-3); border-bottom:1px solid var(--b1); text-align:center; }
            .nav-bottom .nav-links-secondary a { font-weight:700; color:var(--t1); }
            .nav-bottom .nav-links-secondary a:last-child { border-bottom:none; }
        }

        /* pages that never had a nav: keep their first line clear of the fixed bar */
        body[data-page="impressum"], body[data-page="datenschutz"], body[data-page="privacy"], body[data-page="support"], body[data-page="delete-account"], body[data-page="confirmed"], body[data-page="404"] { padding-top: 4.5rem; }
        /* Skip link (WCAG 2.4.1): off-screen until it takes keyboard focus. */
        .skip-link { position:absolute; left:1rem; top:-3rem; z-index:100000; padding:0.6rem 1rem; background:var(--btn-fill); color:#fff; border-radius:var(--r-sm); font-weight:600; font-size:var(--fs-2); text-decoration:none; transition:top 0.2s; }
        .skip-link:focus { top:1rem; }