:root {
            --bg: #ffffff;
            --bg-2: #f4ecd0;          /* warm cream - visibly distinct from white */
            --bg-3: #fbf6e6;           /* subtle cream for footer / contrast */
            --bg-dark: #1a1812;        /* warm near-black for hero */
            --bg-darker: #110f0b;
            --fg: #14140f;
            --fg-soft: #2a2a23;
            --muted: #6b6b5e;
            --accent: #c9a227;         /* original gold */
            --accent-2: #e6b41a;       /* brighter gold for hover */
            --accent-3: #a37e10;       /* deep gold for active state */
            --accent-soft: rgba(201,162,39,0.10);
            --line: #e3dcc4;           /* warm border, slightly darker for definition */
            --line-2: #d5cba6;
            --line-dark: #2a2a23;
            --shadow-xs: 0 1px 2px rgba(40,30,10,0.04);
            --shadow-sm: 0 2px 6px rgba(40,30,10,0.06);
            --shadow-md: 0 14px 36px rgba(40,30,10,0.10);
            --shadow-lg: 0 30px 70px rgba(40,30,10,0.18);
            --radius-sm: 6px;
            --radius: 12px;
            --radius-lg: 20px;
            --display: 'Oswald', 'Inter', system-ui, sans-serif;
            --sans: 'Inter', system-ui, -apple-system, sans-serif;
            --cjk: 'Noto Sans SC', sans-serif;
            --reveal-y: 30px;
        }
        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        html, body { margin: 0; padding: 0; overflow-x: clip; }
        body {
            font-family: var(--sans);
            background: var(--bg); color: var(--fg);
            line-height: 1.65;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
        }
        ::selection { background: var(--accent); color: #fff; }

        a { color: var(--accent); text-decoration: none; transition: color .2s; }
        a:hover { color: var(--accent-2); }
        img { max-width: 100%; height: auto; display: block; }

        .container { max-width: 1024px; margin: 0 auto; padding: 0 clamp(1.25rem, 3vw, 2rem); }
        .container--narrow { max-width: 760px; }
        .container--wide { max-width: 1280px; }

        h1, h2, h3, h4 {
            font-family: var(--display);
            font-weight: 700;
            line-height: 0.95;
            margin: 0 0 1rem;
            color: var(--fg);
            text-transform: uppercase;
            letter-spacing: 0.005em;
        }
        h1 { font-size: clamp(2.8rem, 8vw, 6.5rem); font-weight: 700; }
        h2 { font-size: clamp(2rem, 4.5vw, 3.75rem); }
        h3 { font-size: clamp(1.3rem, 1.7vw, 1.6rem); letter-spacing: 0.02em; }
        h4 { font-size: 1.1rem; letter-spacing: 0.04em; }
        p { margin: 0 0 1rem; }
        p.lead, .lead { font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--muted); max-width: 60ch; line-height: 1.6; text-transform: none; }

        .eyebrow {
            display: inline-flex; align-items: center; gap: .7rem;
            font-family: var(--sans); font-size: .72rem;
            text-transform: uppercase; letter-spacing: 0.22em;
            color: var(--accent); font-weight: 700;
        }
        .eyebrow::before {
            content: ''; width: 36px; height: 2px; background: var(--accent);
        }

        .rule-red, .rule-gold {
            display: inline-block; width: 56px; height: 3px;
            background: var(--accent); margin: 0 0 1.25rem;
            border-radius: 2px;
        }
        h2 + .rule-red, .section-head .rule-red { margin-top: -.25rem; }

        /* Bei reinen Content-Pages (about, sifu, system, wing-tzun, escrima …) liegen
           h2/h3 direkt im .container neben Absaetzen. Etwas mehr Luft daraufgeben,
           damit Ueberschriften nicht am Vorabsatz kleben. Greift nicht in den Home-
           Layout-Bloecken wo Ueberschriften innerhalb .section-head leben. */
        section > .container > h2,
        section > .container > p + h2,
        section > .container > ul + h2,
        section > .container > ol + h2,
        section > .container > blockquote + h2 { margin-top: 3.5rem; }
        section > .container > h3,
        section > .container > p + h3,
        section > .container > ul + h3,
        section > .container > ol + h3 { margin-top: 2.25rem; }

        /* HEADER */
        header.site {
            position: sticky; top: 0; z-index: 100;
            background: #fff;
            border-bottom: 1px solid var(--line);
        }
        /* note: deliberately no backdrop-filter here - it would create a containing block
           for the fixed-position drawer (nav.main) and trap it inside the header height. */
        .nav-row { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 0; gap: 1rem; position: relative; }
        .nav-actions { display: inline-flex; align-items: center; gap: .65rem; }
        .brand {
            display: inline-flex; align-items: center; gap: 1.5rem;
            text-decoration: none;
        }
        .brand-logo {
            height: clamp(60px, 7vw, 84px); width: auto;
            display: block; border-radius: var(--radius-sm);
            transition: transform .25s ease;
        }
        .brand:hover .brand-logo { transform: scale(1.04); }
        .brand-text {
            display: flex; flex-direction: column; line-height: 1.1;
            padding-left: 1.25rem; border-left: 2px solid var(--accent);
        }
        .brand-text span {
            color: var(--accent-3); font-family: var(--display); font-weight: 700;
            font-size: 1.05rem; letter-spacing: 0.16em; text-transform: uppercase;
            white-space: nowrap;
        }
        @media (max-width: 720px) {
            .brand-text { display: none; }
            /* a touch of breathing room so the logo + burger don't kiss the screen edges */
            .nav-row { padding-left: .85rem; padding-right: .85rem; gap: .65rem; }
        }
        /* nav links/buttons inside drawer */
        nav.main > a, nav.main > .nav-group > .nav-toggle {
            position: relative; color: var(--fg-soft); font-weight: 600; font-size: .9rem;
            background: none; border: 0; cursor: pointer; font-family: inherit;
            text-transform: uppercase; letter-spacing: 0.08em;
            display: inline-flex; align-items: center; gap: .35rem;
        }
        nav.main > a:hover, nav.main > .nav-group > .nav-toggle:hover { color: var(--accent); }
        nav.main > a.active, nav.main > .nav-group.is-active > .nav-toggle { color: var(--accent); }

        /* dropdown chevron */
        .nav-group > .nav-toggle .caret {
            display: inline-block; width: 0; height: 0;
            border: 4px solid transparent; border-top-color: currentColor;
            margin-top: 3px; margin-left: .15rem;
            transition: transform .2s;
        }
        .nav-group:hover > .nav-toggle .caret,
        .nav-group[data-open="true"] > .nav-toggle .caret { transform: rotate(180deg); }

        /* dropdown inside drawer */
        .nav-group { position: relative; }
        .nav-dropdown a {
            padding: .65rem .85rem; font-size: .85rem; font-weight: 500;
            color: var(--fg-soft); border-radius: var(--radius-sm);
            text-transform: none; letter-spacing: 0;
            text-decoration: none;
        }
        .nav-dropdown a:hover {
            background: var(--accent-soft); color: var(--fg);
        }
        .nav-dropdown a.active {
            background: var(--accent); color: #fff;
        }

        /* hamburger - always visible */
        .nav-burger {
            display: inline-flex; width: 42px; height: 42px;
            background: none; border: 1px solid var(--line); border-radius: var(--radius-sm);
            cursor: pointer; align-items: center; justify-content: center;
            padding: 0; transition: border-color .2s, background .2s;
            z-index: 110; position: relative;
        }
        .nav-burger:hover { background: var(--bg-3); }
        .nav-burger:hover { border-color: var(--accent); }
        .nav-burger .bars {
            display: block; width: 18px; height: 2px; background: var(--fg);
            position: relative;
            transition: background .35s cubic-bezier(.65, 0, .35, 1);
        }
        .nav-burger .bars::before, .nav-burger .bars::after {
            content: ''; position: absolute; left: 0; right: 0; height: 2px; background: var(--fg);
            transition: transform .35s cubic-bezier(.65, 0, .35, 1), top .35s cubic-bezier(.65, 0, .35, 1), opacity .25s;
        }
        .nav-burger .bars::before { top: -6px; }
        .nav-burger .bars::after { top: 6px; }
        body.nav-open .nav-burger .bars { background: transparent; }
        body.nav-open .nav-burger .bars::before { top: 0; transform: rotate(45deg); }
        body.nav-open .nav-burger .bars::after { top: 0; transform: rotate(-45deg); }

        /* DRAWER - always (also desktop) */
        nav.main {
            position: fixed; top: 0; right: 0; bottom: 0;
            width: min(88vw, 380px);
            background: #fff;
            flex-direction: column; align-items: stretch;
            padding: 5.5rem 1.75rem 2rem;
            gap: .25rem;
            box-shadow: var(--shadow-lg);
            transform: translateX(100%);
            transition: transform .3s ease;
            overflow-y: auto;
            z-index: 105;
            display: flex;
        }
        body.nav-open nav.main { transform: translateX(0); }
        body.nav-open::before {
            content: ''; position: fixed; inset: 0;
            background: rgba(20,20,15,0.55); backdrop-filter: blur(4px);
            z-index: 104;
        }
        /* lift header (and the drawer it contains) above the backdrop while open */
        body.nav-open header.site { z-index: 106; }
        body.nav-open { overflow: hidden; }
        nav.main > a, nav.main > .nav-group > .nav-toggle {
            padding: .95rem .5rem; font-size: .9rem; width: 100%; justify-content: space-between;
        }
        nav.main > a::after, nav.main > .nav-group > .nav-toggle::after { display: none; }
        nav.main > a:not(:last-child), nav.main > .nav-group { border-bottom: 1px solid var(--line); }
        .nav-group .nav-dropdown {
            position: static; transform: none; opacity: 1; pointer-events: auto;
            box-shadow: none; border: none; padding: 0 0 .5rem .5rem;
            background: transparent; margin-top: 0;
            min-width: 0;
            display: none;
            flex-direction: column;
        }
        .nav-group[data-open="true"] .nav-dropdown { display: flex; }
        .nav-group::after { display: none !important; }
        .nav-dropdown a {
            padding: .65rem .5rem; font-size: .85rem;
            border-radius: var(--radius-sm);
            text-transform: none; letter-spacing: 0;
        }
        /* lang dropdown - flag + code, opens to full names with flags */
        .lang-dropdown { position: relative; }
        .lang-current {
            display: inline-flex; align-items: center; gap: .45rem;
            padding: .5rem .8rem;
            border: 1px solid var(--line); border-radius: var(--radius-sm);
            background: #fff; cursor: pointer;
            font-family: var(--display); font-weight: 700; font-size: .78rem;
            letter-spacing: 0.12em; color: var(--fg); text-transform: uppercase;
            transition: border-color .2s, background .2s;
        }
        .lang-current:hover { border-color: var(--accent); background: var(--bg-3); }
        .lang-current .flag, .lang-menu .flag { display: inline-flex; }
        .flag-svg {
            width: 22px; height: 16px;
            border-radius: 2px; display: block;
            box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
        }
        .lang-menu .flag-svg { width: 24px; height: 18px; }
        .lang-current .caret {
            display: inline-block; width: 0; height: 0;
            border: 4px solid transparent; border-top-color: currentColor;
            margin-top: 3px; margin-left: .15rem; transition: transform .2s;
        }
        .lang-dropdown[data-open="true"] .lang-current .caret { transform: rotate(180deg); }
        .lang-menu {
            position: absolute; top: calc(100% + .4rem); right: 0;
            min-width: 170px; max-width: calc(100vw - 1.5rem); background: #fff;
            border: 1px solid var(--line); border-radius: var(--radius);
            padding: .35rem; box-shadow: var(--shadow-lg);
            opacity: 0; pointer-events: none; transform: translateY(8px);
            transition: opacity .2s, transform .2s;
            z-index: 110;
            display: flex; flex-direction: column;
        }
        .lang-dropdown[data-open="true"] .lang-menu {
            opacity: 1; pointer-events: auto; transform: translateY(0);
        }
        .lang-menu a {
            padding: .55rem .75rem; font-size: .9rem; color: var(--fg-soft);
            border-radius: var(--radius-sm); display: flex; align-items: center; gap: .65rem;
            text-decoration: none;
        }
        .lang-menu a:hover { background: var(--accent-soft); color: var(--accent); }
        .lang-menu a.active { background: var(--bg-2); color: var(--fg); font-weight: 600; }
        .lang-menu .flag { font-size: 1.15em; line-height: 1; }

        /* HERO - full bleed, no rounding */
        .hero {
            position: relative; overflow: hidden;
            margin: 0;
            border-radius: 0;
            padding: clamp(5rem, 11vh, 7.5rem) 0 clamp(4rem, 9vh, 6rem);
            background: var(--bg-dark);
            color: #fff;
        }
        .hero--home {
            min-height: 70vh;
            display: flex;
            align-items: center;
            padding-top: clamp(5rem, 12vh, 8rem);
        }
        .hero::before {
            content: ''; position: absolute; inset: 0;
            background: linear-gradient(135deg, #1f1f17 0%, #0d0d0a 100%);
        }
        @media (max-width: 720px) {
            .hero { margin: 0; border-radius: 0; }
        }
        .hero .container { position: relative; z-index: 2; }
        .hero h1 { color: #fff; max-width: 18ch; }
        .hero h1 .accent { color: var(--accent); }
        .hero p.lead { margin-top: 1.5rem; color: rgba(255,255,255,0.78); max-width: 56ch; }
        .hero .eyebrow { color: var(--accent); }
        .hero .eyebrow::before { background: var(--accent); }

        /* Chinese watermark */
        .hero .watermark {
            position: absolute;
            top: 50%; right: -2vw;
            transform: translateY(-50%);
            font-family: var(--cjk);
            font-weight: 700;
            font-size: clamp(16rem, 32vw, 32rem);
            line-height: 0.85;
            color: rgba(201,162,39,0.06);
            user-select: none; pointer-events: none;
            letter-spacing: -0.04em;
            white-space: nowrap;
            z-index: 1;
        }

        .hero--image::before {
            content: ''; position: absolute; inset: 0;
            background-image: var(--hero-bg);
            background-size: cover; background-position: center;
            opacity: 0.5;
            z-index: 1;
        }
        .hero--image::after {
            content: ''; position: absolute; inset: 0;
            background:
                linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.85) 100%),
                linear-gradient(90deg, rgba(0,0,0,0.7) 0%, transparent 50%);
            z-index: 1;
        }
        .hero--image h1 { text-shadow: 0 4px 20px rgba(0,0,0,0.5); }
        .hero--image p.lead { color: rgba(255,255,255,0.88); text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
        .hero-actions { margin-top: 2.5rem; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }

        .hero .scroll-indicator {
            position: absolute; bottom: 2rem; left: 50%;
            transform: translateX(-50%);
            color: rgba(255,255,255,0.5);
            font-size: .7rem; letter-spacing: 0.3em; text-transform: uppercase;
            font-weight: 600; z-index: 2;
            display: flex; flex-direction: column; align-items: center; gap: .8rem;
            font-family: var(--display);
        }
        .hero .scroll-indicator::after {
            content: ''; width: 1px; height: 36px; background: var(--accent);
            animation: scrollPulse 2s ease-in-out infinite;
        }
        @keyframes scrollPulse {
            0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.4; }
            50% { transform: scaleY(1); opacity: 1; }
        }

        /* BUTTONS - gold, rounded, soft */
        .btn {
            display: inline-flex; align-items: center; gap: .55rem;
            padding: .95rem 1.7rem;
            background: var(--accent); color: #fff;
            font-family: var(--display); font-weight: 700; font-size: 0.88rem;
            text-transform: uppercase; letter-spacing: 0.12em;
            border-radius: 999px; border: 2px solid var(--accent);
            cursor: pointer; position: relative;
            transition: transform .15s, background .2s, color .2s, border-color .2s, box-shadow .2s;
        }
        .btn::after {
            content: '→'; transition: transform .25s;
            font-family: var(--sans); font-weight: 400; letter-spacing: 0;
        }
        .btn:hover { background: var(--accent-2); border-color: var(--accent-2); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
        .btn:hover::after { transform: translateX(4px); }
        .btn.btn-sm { padding: .55rem 1.1rem; font-size: .78rem; }
        .btn.gold { background: var(--accent); border-color: var(--accent); }
        .btn.dark { background: var(--fg); border-color: var(--fg); color: #fff; }
        .btn.dark:hover { background: var(--accent); border-color: var(--accent); }
        .btn.outline { background: transparent; color: var(--fg); border: 2px solid var(--fg); }
        .btn.outline:hover { background: var(--fg); color: #fff; border-color: var(--fg); }
        .hero .btn.outline, .hero--image .btn.outline { color: #fff; border-color: rgba(255,255,255,0.85); }
        .hero .btn.outline:hover, .hero--image .btn.outline:hover { background: #fff; color: var(--fg); border-color: #fff; }

        .text-link {
            display: inline-flex; align-items: center; gap: .5rem;
            font-family: var(--display); font-weight: 700; font-size: .85rem;
            text-transform: uppercase; letter-spacing: 0.14em;
            color: var(--fg); border-bottom: 2px solid var(--accent);
            padding-bottom: 3px;
        }
        .text-link:hover { color: var(--accent); }
        .text-link::after { content: '→'; transition: transform .25s; }
        .text-link:hover::after { transform: translateX(4px); }
        .dark .text-link, .hero .text-link { color: #fff; }
        .dark .text-link:hover, .hero .text-link:hover { color: var(--accent-2); }

        /* SECTIONS */
        section { padding: clamp(4.5rem, 10vh, 7.5rem) 0; position: relative; }
        section.alt {
            background: var(--bg-2);
            background-image:
                radial-gradient(circle at 12% 18%, rgba(201,162,39,0.07), transparent 35%),
                radial-gradient(circle at 88% 88%, rgba(201,162,39,0.05), transparent 40%);
        }
        /* Dark sections become contained "cards" - light sections stay full bleed */
        section.dark,
        section.darker,
        section.cta-banner,
        section.newsletter-strip {
            margin: 1.5rem clamp(.75rem, 2vw, 1.5rem);
            border-radius: var(--radius-lg);
            overflow: hidden;
            max-width: calc(1280px - 1.5rem);
            margin-left: auto;
            margin-right: auto;
            width: calc(100% - clamp(1.5rem, 4vw, 3rem));
        }
        @media (max-width: 720px) {
            section.dark, section.darker, section.cta-banner, section.newsletter-strip {
                margin: 0; border-radius: 0; width: 100%;
            }
        }
        section.dark { background: var(--bg-dark); color: #f3f3f3; }
        section.dark h1, section.dark h2, section.dark h3 { color: #fff; }
        section.dark .eyebrow { color: var(--accent-2); }
        section.dark .eyebrow::before { background: var(--accent-2); }
        section.dark p { color: rgba(255,255,255,0.75); }
        section.darker { background: var(--bg-darker); color: #f3f3f3; }
        section.darker h1, section.darker h2, section.darker h3 { color: #fff; }
        section.darker .eyebrow { color: var(--accent-2); }
        section.darker .eyebrow::before { background: var(--accent-2); }
        section.darker p { color: rgba(255,255,255,0.75); }

        /* subtle hairline at end of light section before another light section */
        section + section.alt::before,
        section.alt + section:not(.alt):not(.dark):not(.darker)::before {
            content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
            width: clamp(40px, 6vw, 80px); height: 2px;
            background: var(--accent); border-radius: 2px;
            opacity: 0.4;
        }

        .section-head { margin-bottom: 3.25rem; max-width: 760px; }
        .section-head .eyebrow { margin-bottom: 1rem; }
        .section-head--center { text-align: center; margin-left: auto; margin-right: auto; }
        .section-head--center .rule-red, .section-head--center .rule-gold { display: block; margin-left: auto; margin-right: auto; }
        .section-head--split { display: flex; justify-content: space-between; align-items: flex-end; max-width: none; flex-wrap: wrap; gap: 1rem; }

        /* GRIDS */
        .grid { display: grid; gap: 1.5rem; }
        /* min(100%, N) lets the track shrink below N on narrow viewports instead of
           forcing N and overflowing (clipped by body overflow-x:clip). Keeps the
           multi-column auto-fit behaviour on wider screens. */
        .grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
        .grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
        /* fixed 3 columns max, drops to 2 then 1 on small screens - for school + instructor lists */
        .grid.cols-3-fixed { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        @media (max-width: 880px) { .grid.cols-3-fixed { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
        @media (max-width: 560px) { .grid.cols-3-fixed { grid-template-columns: 1fr; } }

        /* country / grade block headers */
        .country-block, .grade-block { margin-bottom: 3rem; }
        .country-block:last-child, .grade-block:last-child { margin-bottom: 0; }
        .country-header, .grade-header {
            display: flex; align-items: baseline; gap: 1rem;
            margin-bottom: 1.5rem; padding-bottom: .75rem;
            border-bottom: 2px solid var(--accent);
        }
        .country-header h2, .grade-header h2 {
            font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin: 0;
            text-transform: uppercase; letter-spacing: 0.04em;
        }
        .country-count, .grade-count {
            color: var(--muted); font-family: var(--display); font-size: .8rem;
            text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700;
        }

        /* CARDS */
        .card {
            position: relative;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            padding: 2rem;
            transition: border-color .25s, transform .25s, box-shadow .25s;
            overflow: hidden;
            box-shadow: var(--shadow-xs);
        }
        section.alt .card { background: #fff; box-shadow: var(--shadow-sm); }
        section.dark .card, section.darker .card { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); color: #f3f3f3; box-shadow: none; }
        .card::before {
            content: ''; position: absolute; left: 0; top: 0; bottom: 0;
            width: 0; background: var(--accent);
            transition: width .25s ease;
        }
        .card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-md); }
        .card:hover::before { width: 4px; }
        .card h3 { margin-bottom: .65rem; }
        .card h3 a { color: var(--fg); transition: color .2s; }
        section.dark .card h3 a, section.darker .card h3 a { color: #fff; }
        .card h3 a:hover { color: var(--accent); }
        .card .meta {
            color: var(--accent-3); font-size: .72rem; text-transform: uppercase;
            letter-spacing: 0.16em; font-weight: 700; margin-bottom: .9rem;
            font-family: var(--display);
        }
        section.dark .card .meta, section.darker .card .meta { color: var(--accent-2); }

        .card.feature { padding: 2.5rem 2rem; }
        .card.feature .num {
            font-family: var(--display); font-size: clamp(4.5rem, 8vw, 7rem);
            font-weight: 700; line-height: 0.85;
            display: block; margin-bottom: 1.25rem;
            letter-spacing: -0.02em;
            background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
            -webkit-background-clip: text; background-clip: text; color: transparent;
        }
        .card.feature h3 { font-size: 1.25rem; margin-bottom: .8rem; }

        /* STAT BLOCK - contained card with relief */
        .stats {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 0;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow-md);
            position: relative;
        }
        .stats::before {
            content: ''; position: absolute; left: 0; top: 0; right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 50%, var(--accent) 100%);
        }
        section.dark .stats, section.darker .stats {
            background: rgba(255,255,255,0.03);
            border-color: rgba(255,255,255,0.08);
            box-shadow: none;
        }
        .stat { padding: 2.5rem 1.5rem; border-right: 1px solid var(--line); transition: background .2s; }
        .stat:hover { background: var(--bg-3); }
        section.dark .stat:hover, section.darker .stat:hover { background: rgba(255,255,255,0.04); }
        .stat:last-child { border-right: none; }
        section.dark .stat, section.darker .stat { border-right-color: rgba(255,255,255,0.08); }
        .stat-num {
            font-family: var(--display); font-size: clamp(2.25rem, 4.5vw, 3.75rem);
            font-weight: 700; line-height: 0.9;
            letter-spacing: -0.01em;
            background: linear-gradient(135deg, var(--fg) 0%, var(--accent-3) 100%);
            -webkit-background-clip: text; background-clip: text; color: transparent;
        }
        section.dark .stat-num, section.darker .stat-num {
            background: linear-gradient(135deg, #fff 0%, var(--accent-2) 100%);
            -webkit-background-clip: text; background-clip: text; color: transparent;
        }
        .stat-num .accent { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
        .stat-label {
            display: block; margin-top: .85rem; font-size: .72rem;
            text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted);
            font-weight: 700; font-family: var(--display);
        }
        section.dark .stat-label, section.darker .stat-label { color: rgba(255,255,255,0.55); }
        @media (max-width: 760px) {
            .stat { border-right: none; border-bottom: 1px solid var(--line); }
            .stat:last-child { border-bottom: none; }
            section.dark .stat, section.darker .stat { border-bottom-color: var(--line-dark); }
        }

        /* SPLIT (two-pane disciplines) */
        .split {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
            gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
            box-shadow: var(--shadow-sm);
            background: #fff;
        }
        .split > article {
            padding: clamp(2rem, 4vw, 3.5rem);
            background: #fff; border-right: 1px solid var(--line);
            transition: background .25s;
            position: relative;
        }
        .split > article::before {
            content: ''; position: absolute; left: 0; right: 0; bottom: 0;
            height: 0; background: var(--accent);
            transition: height .3s ease;
        }
        .split > article:last-child { border-right: none; }
        .split > article:hover { background: var(--bg-3); }
        .split > article:hover::before { height: 4px; }
        .split .num {
            font-family: var(--display); font-size: 0.78rem; color: var(--accent-3);
            font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
        }
        .split .display-num {
            font-family: var(--display); font-size: clamp(5rem, 10vw, 8rem);
            font-weight: 700; line-height: 0.85;
            display: block; margin-bottom: 1.5rem; letter-spacing: -0.02em;
            background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
            -webkit-background-clip: text; background-clip: text; color: transparent;
        }
        .split h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-top: 1rem; margin-bottom: 1rem; }
        .split p { color: var(--muted); }
        @media (max-width: 760px) {
            .split > article { border-right: none; border-bottom: 1px solid var(--line); }
            .split > article:last-child { border-bottom: none; }
        }

        /* QUOTE */
        blockquote.pull {
            font-family: var(--display); font-size: clamp(1.6rem, 3.2vw, 2.6rem);
            font-weight: 500; line-height: 1.3; letter-spacing: 0.005em;
            color: var(--fg); margin: 0; padding: 2.5rem 0 0;
            text-transform: none;
            position: relative;
            max-width: 60ch;
        }
        blockquote.pull::before {
            content: '“';
            position: absolute; top: -.5rem; left: -1rem;
            font-family: Georgia, 'Times New Roman', serif;
            font-size: 7rem; line-height: 1; font-weight: 700;
            color: var(--accent);
            opacity: 0.4;
            pointer-events: none;
        }
        section.dark blockquote.pull, section.darker blockquote.pull { color: #fff; }
        section.dark blockquote.pull::before, section.darker blockquote.pull::before { color: var(--accent-2); opacity: 0.5; }
        blockquote.pull cite {
            display: block; margin-top: 1.75rem; font-family: var(--display);
            font-size: 0.78rem; font-style: normal; color: var(--accent-3);
            text-transform: uppercase; letter-spacing: 0.2em; font-weight: 700;
        }
        section.dark blockquote.pull cite, section.darker blockquote.pull cite { color: var(--accent-2); }

        /* BADGES */
        .badge {
            display: inline-block; padding: .3rem .7rem; font-size: .7rem; font-weight: 700;
            border-radius: var(--radius); background: var(--bg-2); color: var(--fg-soft);
            text-transform: uppercase; letter-spacing: 0.12em;
            font-family: var(--display);
        }
        .badge.gold { background: var(--accent); color: #fff; }
        .badge.green { background: #15803d; color: #fff; }
        .badge.red { background: var(--accent); color: #fff; }

        /* Category colors for grade badges/tiles:
              SG (Schülergrade)     → weiß
              TG (Technikergrade)   → rot
              PG (Praktikergrade)   → gold
           Gilt für sowohl Wing-Tzun- als auch Escrima-Grade. */
        .badge.cat-sg { background: #fff; color: #111; border: 1px solid #cbd0d4; }
        .badge.cat-tg { background: #b91c1c; color: #fff; }
        .badge.cat-pg { background: #c9a227; color: #fff; }

        /* FORMS */
        form.styled label { display: block; font-size: 0.78rem; color: var(--muted); margin: 1.25rem 0 .35rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; }
        form.styled input, form.styled textarea, form.styled select {
            width: 100%; padding: .85rem 1rem; background: #fff;
            border: 1px solid var(--line); color: var(--fg);
            border-radius: var(--radius); font-family: inherit; font-size: 1rem;
            transition: border-color .2s, box-shadow .2s;
        }
        form.styled input:focus, form.styled textarea:focus, form.styled select:focus {
            outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft);
        }
        .alert { padding: 1rem 1.25rem; border-radius: var(--radius); margin-bottom: 1.5rem; border: 1px solid; font-size: .95rem; }
        .alert.success { background: #f0fdf4; border-color: #86efac; color: #166534; }
        .alert.error { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }

        /* FOOTER */
        footer.site {
            border-top: 1px solid var(--line);
            padding: 4rem 0 2rem;
            color: var(--muted); font-size: 0.9rem;
            background: var(--bg-3);
        }
        footer.site a { color: var(--fg-soft); }
        footer.site a:hover { color: var(--accent); }
        footer.site .row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; align-items: center; }
        footer.site .footer-right { display: inline-flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
        footer.site .footer-divider { color: var(--line-2); }
        footer.site .footer-links {
            display: flex; justify-content: center; flex-wrap: wrap;
            gap: .35rem .65rem; align-items: center;
            margin-top: 1.25rem; padding-top: 1rem;
            border-top: 1px solid var(--line);
            font-size: .85rem;
        }
        footer.site .footer-links span { color: var(--line-2); opacity: .6; }
        @media (max-width: 720px) {
            footer.site .footer-links { font-size: .8rem; }
        }

        .social-icons { display: inline-flex; gap: .35rem; align-items: center; }
        .social-icons a {
            display: inline-flex; align-items: center; justify-content: center;
            width: 36px; height: 36px;
            border-radius: 999px; background: transparent;
            color: var(--muted); border: 1px solid transparent;
            transition: color .2s, background .2s, border-color .2s, transform .15s;
        }
        .social-icons a:hover {
            color: var(--accent); border-color: var(--line); background: #fff;
            transform: translateY(-1px);
        }
        .social-icons svg { width: 18px; height: 18px; display: block; }
        .social-icons a.is-placeholder { opacity: .35; cursor: default; }

        /* school card: flex column so the "view" link can be pinned to the bottom */
        .school-card { display: flex; flex-direction: column; }
        .school-card .school-view { margin-top: auto; padding-top: .75rem; }

        /* school card logo */
        .school-card .school-logo-wrap {
            display: block; aspect-ratio: 16 / 9; overflow: hidden;
            background: linear-gradient(135deg, var(--bg-2), var(--bg-3));
            border-radius: var(--radius-sm);
            margin: -1rem -1rem 1rem; /* stick to card top, full bleed */
            border-bottom: 1px solid var(--line);
        }
        .school-card .school-logo-wrap img {
            width: 100%; height: 100%; object-fit: cover;
            transition: transform .35s;
        }
        .school-card:hover .school-logo-wrap img { transform: scale(1.04); }

        /* keep Leaflet's panes/controls below the sticky header (100) and drawer (105/106) */
        .leaflet-pane,
        .leaflet-top,
        .leaflet-bottom,
        .leaflet-popup-pane { z-index: 50 !important; }

        /* dashboard tabs */
        .dash-tabs {
            display: flex; gap: .25rem; border-bottom: 1px solid var(--line);
            margin-bottom: 2rem; flex-wrap: wrap;
        }
        .dash-tab {
            background: none; border: none;
            padding: .85rem 1.25rem;
            font-family: var(--display); font-weight: 700; font-size: .82rem;
            text-transform: uppercase; letter-spacing: 0.1em;
            color: var(--muted); cursor: pointer;
            border-bottom: 3px solid transparent;
            margin-bottom: -1px; transition: color .2s, border-color .2s;
        }
        .dash-tab:hover { color: var(--fg); }
        .dash-tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
        .dash-panel { animation: dashFade .2s ease; }
        @keyframes dashFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
        .stat-card { text-align: center; padding: 1.5rem 1rem; }
        .social-icons a.is-placeholder:hover { color: var(--muted); border-color: transparent; background: transparent; transform: none; }

        /* TILES - image, news, generic */
        .tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
        .tile-grid--gallery { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }

        .tile {
            position: relative;
            border-radius: var(--radius);
            overflow: hidden;
            background: #fff;
            border: 1px solid var(--line);
            transition: transform .25s, box-shadow .25s, border-color .25s;
            box-shadow: var(--shadow-sm);
        }
        .tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent); }

        /* image tile (clickable for lightbox) */
        .tile-img {
            aspect-ratio: 4 / 3;
            cursor: zoom-in;
            display: block;
            background: var(--bg-2);
        }
        .tile-img img {
            width: 100%; height: 100%; object-fit: cover;
            transition: transform .45s ease;
        }
        .tile-img:hover img { transform: scale(1.06); }
        .tile-img::after {
            content: '+'; position: absolute; right: .85rem; bottom: .85rem;
            width: 38px; height: 38px; border-radius: 50%;
            background: rgba(20,20,15,0.65); color: var(--accent-2);
            display: flex; align-items: center; justify-content: center;
            font-size: 1.4rem; font-weight: 300;
            opacity: 0; transform: translateY(8px);
            transition: opacity .25s, transform .25s;
            backdrop-filter: blur(6px);
        }
        .tile-img:hover::after { opacity: 1; transform: translateY(0); }

        /* image tile with caption */
        .tile-img.has-caption { aspect-ratio: auto; cursor: zoom-in; }
        .tile-img.has-caption .cover { aspect-ratio: 4 / 3; overflow: hidden; }
        .tile-img.has-caption .cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s; }
        .tile-img.has-caption:hover .cover img { transform: scale(1.05); }
        .tile-img.has-caption .caption { padding: 1rem 1.25rem; font-size: .9rem; color: var(--muted); }

        /* news/article tile */
        .tile-news { display: flex; flex-direction: column; }
        .tile-news .cover {
            aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-2);
        }
        .tile-news .cover img {
            width: 100%; height: 100%; object-fit: cover;
            transition: transform .45s;
        }
        .tile-news:hover .cover img { transform: scale(1.04); }
        .tile-news .body { padding: 1.5rem 1.5rem 1.75rem; flex: 1; display: flex; flex-direction: column; }
        .tile-news .meta {
            color: var(--accent-3); font-size: .72rem; text-transform: uppercase;
            letter-spacing: 0.16em; font-weight: 700; margin-bottom: .8rem;
            font-family: var(--display);
        }
        .tile-news h3 { font-size: 1.2rem; margin-bottom: .65rem; line-height: 1.15; }
        .tile-news h3 a { color: var(--fg); }
        .tile-news h3 a:hover { color: var(--accent); }
        .tile-news .excerpt { color: var(--muted); font-size: .95rem; flex: 1; }
        .tile-news .more {
            margin-top: 1.25rem; font-family: var(--display); font-weight: 700;
            font-size: .78rem; text-transform: uppercase; letter-spacing: 0.14em;
            color: var(--accent); display: inline-flex; align-items: center; gap: .35rem;
        }
        .tile-news .more::after { content: '→'; transition: transform .25s; }
        .tile-news:hover .more::after { transform: translateX(4px); }

        /* event tile (date prominent) */
        .tile-event { display: grid; grid-template-columns: 88px 1fr; gap: 1.25rem; padding: 1.5rem; align-items: center; }
        .tile-event .date {
            background: var(--accent); color: #fff;
            border-radius: var(--radius-sm); padding: .85rem .5rem; text-align: center;
            font-family: var(--display);
        }
        .tile-event .date .d { display: block; font-size: 1.85rem; font-weight: 700; line-height: 1; }
        .tile-event .date .m { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: 0.14em; margin-top: .35rem; }
        .tile-event h3 { font-size: 1.1rem; margin-bottom: .35rem; }
        .tile-event .where { color: var(--muted); font-size: .85rem; }

        /* LIGHTBOX */
        .lightbox-overlay {
            position: fixed; inset: 0; z-index: 1000;
            background: rgba(15,15,12,0.94);
            display: flex; align-items: center; justify-content: center;
            padding: clamp(1rem, 4vw, 3rem);
            opacity: 0; pointer-events: none;
            transition: opacity .25s ease;
        }
        .lightbox-overlay.is-open { opacity: 1; pointer-events: auto; }
        .lightbox-image {
            max-width: 95vw; max-height: 90vh;
            border-radius: var(--radius);
            box-shadow: 0 30px 80px rgba(0,0,0,0.5);
            transform: scale(.96);
            transition: transform .3s ease;
        }
        .lightbox-overlay.is-open .lightbox-image { transform: scale(1); }
        .lightbox-close {
            position: absolute; top: 1.25rem; right: 1.25rem;
            width: 44px; height: 44px; border-radius: 50%;
            background: rgba(255,255,255,0.12); color: #fff;
            border: 1px solid rgba(255,255,255,0.25);
            font-size: 1.4rem; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: background .2s, border-color .2s;
        }
        .lightbox-close:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.5); }
        .lightbox-caption {
            position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
            color: rgba(255,255,255,0.8); font-size: .9rem; max-width: 80vw;
            text-align: center;
        }

        /* PROCESS STEPS - "Wie du anfängst" */
        .steps {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 1.5rem;
            counter-reset: step;
        }
        .step {
            position: relative; padding: 2rem 1.75rem 1.75rem;
            background: #fff; border: 1px solid var(--line);
            border-radius: var(--radius); box-shadow: var(--shadow-xs);
            transition: transform .25s, box-shadow .25s, border-color .25s;
        }
        .step:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent); }
        .step .step-num {
            position: absolute; top: -1.25rem; left: 1.5rem;
            width: 2.5rem; height: 2.5rem; border-radius: 50%;
            background: var(--accent); color: #fff;
            font-family: var(--display); font-weight: 700; font-size: 1.05rem;
            display: flex; align-items: center; justify-content: center;
            box-shadow: var(--shadow-sm);
        }
        .step h3 { font-size: 1.1rem; margin: .65rem 0 .65rem; }
        .step p { color: var(--muted); font-size: .95rem; margin: 0; }
        .step .step-icon { font-size: 1.6rem; color: var(--accent); margin-bottom: .5rem; }

        /* CTA BANNER STRIP - full bleed mit Foto */
        .cta-banner {
            position: relative; overflow: hidden;
            background: var(--bg-dark); color: #fff;
            padding: clamp(3.5rem, 8vh, 5.5rem) 0;
        }
        .cta-banner::before {
            content: ''; position: absolute; inset: 0;
            background-image: var(--cta-bg);
            background-size: cover; background-position: center;
            opacity: .35;
        }
        .cta-banner::after {
            content: ''; position: absolute; inset: 0;
            background: linear-gradient(90deg, rgba(15,15,12,0.85) 0%, rgba(15,15,12,0.55) 100%);
        }
        .cta-banner > .container { position: relative; z-index: 1; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; justify-content: space-between; }
        .cta-banner .cta-text h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: .65rem; }
        .cta-banner .cta-text p { color: rgba(255,255,255,0.85); margin: 0; max-width: 50ch; }

        /* COMPARE - two columns side-by-side */
        .compare {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
            gap: 1.5rem;
        }
        .compare-col {
            background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
            padding: 2rem; box-shadow: var(--shadow-xs);
            position: relative;
        }
        .compare-col h3 {
            display: flex; align-items: center; gap: .75rem;
            margin-bottom: 1.5rem; padding-bottom: 1rem;
            border-bottom: 2px solid var(--accent);
            font-size: 1.5rem;
        }
        .compare-col h3 .num {
            font-family: var(--display); color: var(--accent); font-size: 1rem; letter-spacing: 0.1em;
        }
        .compare-row { display: grid; grid-template-columns: 130px 1fr; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); align-items: start; }
        .compare-row:last-child { border-bottom: none; }
        .compare-row dt {
            font-family: var(--display); font-size: .75rem; text-transform: uppercase;
            letter-spacing: 0.14em; color: var(--accent-3); font-weight: 700; padding-top: .15rem;
        }
        .compare-row dd { margin: 0; color: var(--fg-soft); font-size: .95rem; }
        /* On phones the fixed 130px label column squeezes the value into a sliver,
           forcing ugly wrapping - stack label above value instead. */
        @media (max-width: 600px) {
            .compare-row { grid-template-columns: 1fr; gap: .15rem; }
            .compare-row dt { padding-top: 0; }
        }

        /* TIMELINE - vertical milestones */
        .timeline { position: relative; max-width: 760px; margin: 0 auto; padding: 1rem 0 1rem 2.5rem; }
        .timeline::before {
            content: ''; position: absolute; left: .55rem; top: 0; bottom: 0;
            width: 2px; background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 50%, transparent 100%);
        }
        .timeline-item { position: relative; padding-bottom: 2.5rem; }
        .timeline-item:last-child { padding-bottom: 0; }
        .timeline-item::before {
            content: ''; position: absolute; left: -2.45rem; top: .35rem;
            width: 1.15rem; height: 1.15rem; border-radius: 50%;
            background: #fff; border: 3px solid var(--accent);
            box-shadow: 0 0 0 4px var(--bg);
        }
        section.alt .timeline-item::before { box-shadow: 0 0 0 4px var(--bg-2); }
        .timeline-item .year {
            font-family: var(--display); font-weight: 700; font-size: 1.5rem;
            color: var(--accent); letter-spacing: 0.02em; line-height: 1;
            display: block; margin-bottom: .5rem;
        }
        .timeline-item h3 { font-size: 1.2rem; margin-bottom: .4rem; }
        .timeline-item p { color: var(--muted); margin: 0; }

        /* FAQ ACCORDION */
        .faq { display: flex; flex-direction: column; gap: .75rem; max-width: 800px; margin: 0 auto; }
        .faq-item {
            border: 1px solid var(--line); border-radius: var(--radius);
            background: #fff; box-shadow: var(--shadow-xs);
            transition: border-color .2s, box-shadow .2s;
        }
        .faq-item[open] { border-color: var(--accent); box-shadow: var(--shadow-sm); }
        .faq-item summary {
            list-style: none; cursor: pointer;
            padding: 1.25rem 1.5rem; display: flex; align-items: center; justify-content: space-between;
            gap: 1rem; font-family: var(--display); font-weight: 600; font-size: 1.05rem;
        }
        .faq-item summary::-webkit-details-marker { display: none; }
        .faq-item summary::after {
            content: '+'; flex-shrink: 0;
            width: 28px; height: 28px; border-radius: 50%;
            background: var(--accent-soft); color: var(--accent);
            display: flex; align-items: center; justify-content: center;
            font-size: 1.2rem; font-weight: 400; line-height: 1;
            transition: transform .25s, background .2s;
        }
        .faq-item[open] summary::after { transform: rotate(45deg); background: var(--accent); color: #fff; }
        .faq-item .faq-body { padding: 0 1.5rem 1.5rem; color: var(--fg-soft); line-height: 1.65; }
        .faq-item .faq-body p { margin: 0 0 .75rem; }
        .faq-item .faq-body p:last-child { margin-bottom: 0; }

        /* VIDEO BLOCK - facade with click-to-load */
        .video-block {
            position: relative; aspect-ratio: 16 / 9; max-width: 1000px; margin: 0 auto;
            border-radius: var(--radius); overflow: hidden;
            background: var(--bg-dark) var(--video-thumb) center / cover no-repeat;
            cursor: pointer; box-shadow: var(--shadow-md);
        }
        .video-block::before {
            content: ''; position: absolute; inset: 0;
            background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%);
            transition: opacity .25s;
        }
        .video-block:hover::before { opacity: .8; }
        .video-block .play {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            width: clamp(72px, 12vw, 110px); height: clamp(72px, 12vw, 110px);
            border-radius: 50%; background: var(--accent);
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 12px 36px rgba(0,0,0,0.4), 0 0 0 0 rgba(201,162,39,0.6);
            transition: transform .2s, box-shadow .25s;
        }
        .video-block:hover .play { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 12px 36px rgba(0,0,0,0.4), 0 0 0 12px rgba(201,162,39,0.18); }
        .video-block .play::before {
            content: ''; display: block;
            border-style: solid; border-width: 14px 0 14px 22px;
            border-color: transparent transparent transparent #fff;
            margin-left: 6px;
        }
        .video-block .video-caption {
            position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.5rem;
            color: #fff; z-index: 1;
        }
        .video-block .video-caption h3 { color: #fff; font-size: clamp(1.1rem, 2vw, 1.5rem); margin: 0 0 .25rem; }
        .video-block .video-caption span { color: rgba(255,255,255,0.7); font-size: .85rem; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.14em; }

        /* INSTRUCTOR / PERSON GRID - compact horizontal cards */
        .instructor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: .85rem; }
        .instructor-grid--compact { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .65rem; }
        .instructor-card {
            display: grid; grid-template-columns: 140px 1fr;
            background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
            overflow: hidden; box-shadow: var(--shadow-xs);
            transition: transform .25s, box-shadow .25s, border-color .25s;
        }
        /* Stacked variant - image on top, info below; narrower tiles. */
        .instructor-card--stacked { display: flex; flex-direction: column; }
        .instructor-card--stacked .photo { aspect-ratio: 3 / 4; min-height: 0; }
        .instructor-card--stacked .info { padding: .6rem .75rem .75rem; gap: .15rem; }
        .instructor-card--stacked .info h3 { font-size: .92rem; line-height: 1.2; margin: .25rem 0 .15rem; word-wrap: break-word; }
        .instructor-card--stacked .info .school { font-size: .78rem; margin-top: .25rem; }
        .instructor-card--stacked .title-badges { gap: .2rem; margin-bottom: .15rem; }
        .instructor-card--stacked .title-badges .title-badge { font-size: .55rem; padding: .1rem .4rem; letter-spacing: .08em; }
        .instructor-card--stacked .grade-pill { font-size: .6rem; padding: .08rem .4rem; }
        @media (max-width: 600px) {
            .instructor-grid--compact { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
            .instructor-card--stacked .info { padding: .5rem .6rem .6rem; }
            .instructor-card--stacked .info h3 { font-size: .85rem; }
        }
        .instructor-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--accent); }
        /* photo cell stretches with the grid row - no aspect-ratio constraint, no black gap. */
        .instructor-card .photo { overflow: hidden; background: #111; display: flex; align-items: stretch; justify-content: center; min-height: 180px; }
        /* Lightbox link must fill the photo box, otherwise the inner img's 100%/100% resolve
           against a shrink-to-content <a> and the image letterboxes (black bars). */
        .instructor-card .photo > a { display: block; width: 100%; height: 100%; }
        .instructor-card .photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transition: transform .45s; }
        .instructor-card .info { display: flex; flex-direction: column; gap: .25rem; }
        .instructor-card .info .title-badges { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .25rem; }
        .instructor-card .info .title-badges .title-badge { margin-bottom: 0; }
        .instructor-card:hover .photo img { transform: scale(1.04); }
        .instructor-card .info { padding: .75rem 1rem .85rem; min-width: 0; }
        .instructor-card .photo-placeholder { font-size: 1.6rem !important; }
        .instructor-card .title-badge { padding: .15rem .55rem; font-size: .62rem; margin-bottom: .35rem; letter-spacing: 0.12em; }
        .instructor-card .grades { margin-top: .15rem; }
        .grade-pill { padding: .1rem .45rem; font-size: .65rem; }
        .instructor-card .info h3 { font-size: 1.1rem; margin-bottom: .25rem; }
        .instructor-card .info .role { font-family: var(--display); color: var(--accent-3); font-size: .75rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; }
        .instructor-card .info .school { color: var(--muted); font-size: .9rem; margin-top: .35rem; display: inline-block; }
        .instructor-card .info .school:hover { color: var(--accent); }
        .instructor-card .info h3 { font-size: 1.1rem; margin: .35rem 0 .35rem; }
        .instructor-card .photo-placeholder {
            width: 100%; height: 100%;
            display: flex; align-items: center; justify-content: center;
            font-family: var(--display); font-weight: 700;
            font-size: clamp(2.5rem, 4vw, 3.5rem); letter-spacing: 0.05em;
            color: var(--accent); background: linear-gradient(135deg, var(--bg-2) 0%, var(--bg-3) 100%);
        }
        .instructor-card .grades { display: inline-flex; gap: .35rem; flex-wrap: wrap; margin-top: .15rem; }
        /* Grade pill follows the canonical EBMAS palette - same rules as
           .badge.cat-sg / .cat-tg / .cat-pg on this page. SG white with grey
           border, TG red, PG gold. Background falls back to gold when no
           category class is set (e.g. legacy callsites). */
        .grade-pill {
            display: inline-block; padding: .15rem .55rem; font-size: .7rem;
            background: var(--accent); color: #fff; font-family: var(--display);
            font-weight: 700; letter-spacing: 0.1em; border-radius: 999px;
        }
        .grade-pill.cat-sg { background: #fff;    color: #111; border: 1px solid #cbd0d4; }
        .grade-pill.cat-tg { background: #b91c1c; color: #fff; }
        .grade-pill.cat-pg { background: #c9a227; color: #fff; }
        /* `--escrima` is a discipline marker, not a category. Only apply the
           dark-background fallback when no cat-* override is present, so an
           Escrima TG3 still renders red (canonical). */
        .grade-pill--escrima:not(.cat-sg):not(.cat-tg):not(.cat-pg) { background: var(--fg); }

        .title-badge {
            display: inline-block;
            padding: .25rem .75rem; font-size: .7rem;
            background: var(--accent); color: #fff;
            font-family: var(--display); font-weight: 700; letter-spacing: 0.16em;
            text-transform: uppercase; border-radius: 999px;
            margin-bottom: .55rem;
        }

        /* Pinned Sifu feature on the roster page */
        .instructor-feature {
            display: grid; grid-template-columns: 240px 1fr; gap: 2rem;
            background: #fff; border: 1px solid var(--line);
            border-radius: var(--radius); overflow: hidden;
            box-shadow: var(--shadow-md); position: relative;
        }
        .instructor-feature::before {
            content: ''; position: absolute; left: 0; right: 0; top: 0;
            height: 3px; background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 50%, var(--accent) 100%);
        }
        .instructor-feature .photo { aspect-ratio: 3 / 4; overflow: hidden; background: var(--bg-2); }
        .instructor-feature .photo img { width: 100%; height: 100%; object-fit: cover; }
        .instructor-feature .info { padding: 2rem 2rem 2rem 0; align-self: center; }
        .instructor-feature h2 { margin: 0 0 .35rem; font-size: clamp(1.6rem, 3vw, 2.4rem); }
        .instructor-feature .role { color: var(--muted); font-size: 1rem; margin: 0 0 1rem; }
        @media (max-width: 600px) {
            .instructor-feature { grid-template-columns: 1fr; }
            .instructor-feature .info { padding: 1.5rem; }
        }

        /* NEWSLETTER STRIP */
        .newsletter-strip {
            background: var(--bg-dark) linear-gradient(135deg, #1a1812 0%, #0d0d0a 100%);
            color: #fff; padding: clamp(2.5rem, 6vh, 4rem) 0;
            position: relative; overflow: hidden;
        }
        .newsletter-strip::before {
            content: ''; position: absolute; right: -3vw; top: 50%; transform: translateY(-50%);
            width: 360px; height: 360px; border-radius: 50%;
            background: radial-gradient(closest-side, rgba(201,162,39,0.15), transparent 70%);
        }
        .newsletter-strip .container { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; flex-wrap: wrap; position: relative; z-index: 1; }
        .newsletter-strip h3 { color: #fff; font-size: clamp(1.3rem, 2.2vw, 1.75rem); margin-bottom: .35rem; }
        .newsletter-strip p { color: rgba(255,255,255,0.72); margin: 0; font-size: .95rem; }
        .newsletter-form { display: flex; gap: .5rem; flex-wrap: wrap; }
        .newsletter-form input[type="email"] {
            min-width: 260px; padding: .9rem 1.1rem; border-radius: 999px;
            border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.06);
            color: #fff; font-family: inherit; font-size: 1rem;
        }
        .newsletter-form input[type="email"]::placeholder { color: rgba(255,255,255,0.5); }
        .newsletter-form input[type="email"]:focus { outline: none; border-color: var(--accent); background: rgba(255,255,255,0.1); }
        @media (max-width: 720px) {
            .newsletter-strip .container { grid-template-columns: 1fr; }
            .newsletter-form input[type="email"] { min-width: 0; flex: 1; }
        }

        /* SCHOOL HERO with logo as background */
        .school-hero { position: relative; isolation: isolate; }
        .school-hero--with-bg {
            background-image:
                linear-gradient(115deg, rgba(15,15,15,.92) 0%, rgba(15,15,15,.72) 55%, rgba(15,15,15,.45) 100%),
                var(--bg-img);
            background-size: cover; background-position: center;
            color: #fff;
        }
        .school-hero--with-bg::before {
            content: ""; position: absolute; inset: 0;
            background: radial-gradient(ellipse at 30% 50%, rgba(0,0,0,.35) 0%, transparent 70%);
            pointer-events: none; z-index: -1;
        }
        .school-hero--with-bg .meta { color: rgba(255,255,255,.78); text-shadow: 0 1px 3px rgba(0,0,0,.5); margin-bottom: .5rem; }
        .school-hero--with-bg h1 {
            color: #fff;
            text-shadow: 0 2px 6px rgba(0,0,0,.55), 0 0 24px rgba(0,0,0,.35);
        }

        /* GALLERY GRID for school impressions */
        .gallery-grid {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: .85rem; margin-top: 1.25rem;
        }
        .gallery-item {
            display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius);
            border: 1px solid var(--line); background: var(--bg-2);
            box-shadow: var(--shadow-xs); transition: transform .25s, box-shadow .25s;
        }
        .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s; }
        .gallery-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
        .gallery-item:hover img { transform: scale(1.04); }

        /* COOKIE BANNER */
        #cookie-banner {
            position: fixed; bottom: 1.25rem; left: 1.25rem; right: 1.25rem;
            max-width: 640px; margin: 0 auto;
            z-index: 200;
            background: #fff;
            color: var(--fg);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            padding: 1rem 1.25rem;
            box-shadow: var(--shadow-lg);
            font-size: .9rem;
            display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
        }
        #cookie-banner[hidden] { display: none; }
        #cookie-banner .cookie-text { flex: 1; min-width: 200px; }
        #cookie-banner .cookie-link { font-size: .82rem; color: var(--muted); }
        #cookie-banner .cookie-link:hover { color: var(--accent); }

        /* SCROLL REVEAL */
        .reveal { opacity: 0; transform: translateY(var(--reveal-y)); transition: opacity .7s ease, transform .7s ease; }
        .reveal.is-visible { opacity: 1; transform: none; }
        @media (prefers-reduced-motion: reduce) {
            .reveal { opacity: 1; transform: none; transition: none; }
            html { scroll-behavior: auto; }
        }

        /* SEMINAR TILES - 3-up grid */
        .seminar-tile {
            background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
            overflow: hidden; box-shadow: var(--shadow-sm);
            transition: transform .25s, box-shadow .25s, border-color .25s;
            display: flex; /* let the inner link fill the full grid-cell height */
        }
        .seminar-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent); }
        .seminar-tile.is-past { opacity: .72; }
        .seminar-tile.is-past:hover { opacity: 1; }
        .seminar-tile__link {
            display: flex; flex-direction: column; width: 100%;
            color: inherit; text-decoration: none;
        }
        .seminar-tile__media {
            position: relative; aspect-ratio: 16 / 9; background: #f0ece2;
            display: flex; align-items: center; justify-content: center; overflow: hidden;
        }
        .seminar-tile__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .seminar-tile__placeholder {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            color: var(--accent-3); font-family: var(--display);
        }
        .seminar-tile__placeholder span { font-size: 3rem; font-weight: 700; line-height: 1; }
        .seminar-tile__placeholder small { font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; margin-top: .35rem; }
        .seminar-tile__badge {
            position: absolute; top: .9rem; left: .9rem;
            background: var(--accent); color: #1a1408;
            font-family: var(--display); font-size: .68rem; font-weight: 700;
            text-transform: uppercase; letter-spacing: .12em;
            padding: .35rem .7rem; border-radius: 999px;
        }
        .seminar-tile__body {
            padding: 1.4rem 1.5rem 1.6rem;
            flex: 1 1 auto; display: flex; flex-direction: column;
        }
        .seminar-tile__meta {
            color: var(--accent-3); font-size: .7rem; text-transform: uppercase;
            letter-spacing: .14em; font-weight: 700; margin-bottom: .7rem; font-family: var(--display);
        }
        .seminar-tile__title { margin: 0 0 .65rem; font-size: 1.18rem; line-height: 1.3; }
        .seminar-tile__price { color: var(--muted); font-size: .9rem; }
        .seminar-tile__chip {
            display: inline-block; margin-top: auto; align-self: flex-start;
            /* `margin-top: auto` pushes the chip to the bottom of the flex column
               so every tile lines the chip up on the same baseline regardless of
               how long the title wraps. The .9rem of breathing room above the
               chip is preserved by the body padding. */
            font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
            color: #2d6b3b; background: #d8efde; padding: .3rem .65rem; border-radius: 999px;
        }
        .seminar-tile__price { margin-bottom: 0; }
        /* Push the chip down: when no price exists, the title still aligns at the
           top while the chip sticks to the bottom thanks to margin-top:auto. */

        /* SEMINAR DETAIL - hero with promo image as background + schedule list */
        .seminar-hero { position: relative; isolation: isolate; }
        .seminar-hero--with-bg {
            background-image:
                linear-gradient(115deg, rgba(15,15,15,.92) 0%, rgba(15,15,15,.72) 55%, rgba(15,15,15,.45) 100%),
                var(--bg-img);
            background-size: cover; background-position: center;
            color: #fff;
        }
        .seminar-hero--with-bg::before {
            content: ""; position: absolute; inset: 0;
            background: radial-gradient(ellipse at 30% 50%, rgba(0,0,0,.35) 0%, transparent 70%);
            pointer-events: none; z-index: -1;
        }
        .seminar-hero--with-bg .meta { color: rgba(255,255,255,.78); text-shadow: 0 1px 3px rgba(0,0,0,.5); margin-bottom: .5rem; }
        .seminar-hero--with-bg h1 {
            color: #fff;
            text-shadow: 0 2px 6px rgba(0,0,0,.55), 0 0 24px rgba(0,0,0,.35);
        }
        .seminar-schedule { list-style: none; padding: 0; margin: 1rem 0 0; }

/* A11Y: Visible focus styles for keyboard users on custom buttons */
        .nav-burger:focus-visible,
        .lang-current:focus-visible,
        .user-current:focus-visible,
        .dash-tab:focus-visible,
        .nav-auth-link:focus-visible,
        .btn:focus-visible {
            outline: 3px solid var(--accent);
            outline-offset: 2px;
        }
        a:focus-visible,
        button:focus-visible {
            outline: 2px solid var(--accent-3);
            outline-offset: 2px;
        }

        /* TOUCH-TOOLTIP: shown via JS for tile-tooltips on mobile (title-attr is hover-only) */
        .touch-tooltip {
            position: absolute; max-width: 280px; padding: .55rem .75rem;
            background: rgba(15,15,15,.96); color: #fff;
            font-size: .82rem; line-height: 1.35; border-radius: 6px;
            box-shadow: 0 4px 14px rgba(0,0,0,.18);
            pointer-events: none; z-index: 800;
            animation: touch-tooltip-in .15s ease-out;
        }
        @keyframes touch-tooltip-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

        /* A11Y: Touch-Target-Größe - Curriculum-Mark-Buttons brauchen mind. 24px */
        @media (pointer: coarse) {
            .curriculum-tile .mark { width: 26px; height: 26px; font-size: .72rem; }
        }

        /* DASHBOARD UTILITY CLASSES - extracted from inline styles */
        .dash-section { margin-top: 2rem; }
        .dash-meta { color: var(--muted); font-size: .85rem; }
        .dash-meta--small { color: var(--muted); font-size: .8rem; }
        .dash-meta--xs { color: var(--muted); font-size: .75rem; }
        .dash-stat-num { font-family: var(--display); font-size: 2.5rem; color: var(--accent); }
        .dash-stat-label {
            color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em;
            font-size: .75rem; font-weight: 600;
        }
        .dash-card-divider { border: none; border-top: 1px solid var(--line); margin: 1.25rem 0 1rem; }
        .dash-eyebrow {
            color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .1em;
        }
        .dash-table-meta { color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: .72rem; }

        /* DASHBOARD PROFILE-ANCHOR-NAV */
        .profile-anchor-nav {
            display: flex; flex-wrap: wrap; gap: .55rem;
            padding: .65rem; margin-top: 1rem; margin-bottom: 1.25rem;
            background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
            position: sticky; top: 70px; z-index: 50;
            backdrop-filter: blur(6px);
        }
        .profile-anchor-nav a {
            padding: .5rem 1rem; border-radius: 4px;
            color: var(--fg-soft, #444); font-size: .85rem; font-weight: 600;
            text-decoration: none;
            transition: background .15s, color .15s;
        }
        .profile-anchor-nav a:hover { background: #fff; color: var(--accent-3); text-decoration: none; }
        html { scroll-padding-top: 140px; }
        @media (max-width: 720px) {
            .profile-anchor-nav { top: 60px; gap: .4rem; padding: .5rem; }
            .profile-anchor-nav a { font-size: .78rem; padding: .4rem .7rem; }
        }

        /* EXTERNAL LINK INDIKATOR - kleines ↗ neben Links auf andere Domains.
           Greift NUR im redaktionellen News-Body (.rich-content) + Tag-Folgeinhalt
           (.news-tags ~ *), nicht in Karten-/CTA-Listen. Das frühere `article p a`
           war zu breit und hat interne CTA-Links (School-Cards, News-Index, Home-
           Disziplin-Cards) erwischt → Doppel-Pfeil neben deren eigenem →. */
        .rich-content a[href^="http"]:not([href*="ebmas.world"]):not([href*="127.0.0.1"]):not([href*="localhost"])::after,
        .news-tags ~ * a[href^="http"]:not([href*="ebmas.world"]):not([href*="127.0.0.1"]):not([href*="localhost"])::after {
            content: " ↗";
            font-size: .85em;
            opacity: .7;
            display: inline-block;
            margin-left: .15em;
        }
        /* Internal CTA links (school card "view" link, etc.) already render their own arrow in markup
           - opt them out of the external-link indicator so we don't get a double arrow on hosts where
           the absolute URL doesn't contain "ebmas.world" (e.g. staging domains). */
        .school-view a::after { content: none; }

        /* SKELETON LOADING STATES - for AJAX/JS-injected content */
        @keyframes skeleton-shimmer {
            0% { background-position: -300px 0; }
            100% { background-position: 300px 0; }
        }
        .skeleton {
            background: linear-gradient(90deg, var(--bg-2) 0%, #f3f4f6 50%, var(--bg-2) 100%);
            background-size: 600px 100%;
            animation: skeleton-shimmer 1.4s ease infinite;
            border-radius: 4px;
            color: transparent;
            display: inline-block;
            min-height: 1em;
            min-width: 4ch;
        }
        @media (prefers-reduced-motion: reduce) {
            .skeleton { animation: none; background: var(--bg-2); }
        }

        /* BREADCRUMBS */
        .breadcrumbs { margin: 1rem 0 .5rem; font-size: .85rem; color: var(--muted); }
        .breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .25rem; }
        .breadcrumbs li { display: inline-flex; align-items: center; gap: .25rem; }
        .breadcrumbs li:not(:last-child)::after { content: "›"; color: var(--muted); margin-left: .25rem; opacity: .6; }
        .breadcrumbs a { color: var(--muted); text-decoration: none; }
        .breadcrumbs a:hover { color: var(--accent-3); text-decoration: underline; }
        .breadcrumbs [aria-current="page"] { color: var(--fg); font-weight: 500; }

        /* ERROR PAGES (404 / 403 / 419 / 500) */
        .error-page { padding: 5rem 1rem; text-align: center; max-width: 600px; }
        .error-page__code {
            font-family: var(--display); font-size: clamp(5rem, 18vw, 11rem);
            font-weight: 800; letter-spacing: .04em; color: var(--accent);
            line-height: 1; margin-bottom: 1rem; opacity: .85;
        }
        .error-page h1 { font-size: 1.65rem; margin: .5rem 0 1rem; }
        .error-page p { color: var(--muted); font-size: 1rem; }

        /* SUBMIT-BUTTON SPINNER */
        .btn-spinner {
            display: inline-block; width: .9em; height: .9em;
            border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
            border-radius: 50%; animation: btn-spin .8s linear infinite;
            vertical-align: -2px; margin-right: .15em;
        }
        @keyframes btn-spin { to { transform: rotate(360deg); } }
        .btn[disabled], button[disabled] { opacity: .65; cursor: progress; }

        /* AUTH NAV LINKS - login link for guests */
        .nav-auth-link {
            display: inline-flex; align-items: center; gap: .35rem;
            padding: .4rem .75rem; border-radius: 4px;
            color: var(--accent-3); font-size: .82rem; font-weight: 600;
            text-transform: uppercase; letter-spacing: .08em;
            background: transparent; border: 1px solid transparent;
            transition: background .15s, border-color .15s;
        }
        .nav-auth-link:hover { background: var(--accent-soft); border-color: var(--accent); text-decoration: none; }

        /* USER DROPDOWN - replaces the simple login/logout pair when authed */
        .user-dropdown { position: relative; }
        .user-current {
            display: inline-flex; align-items: center; gap: .5rem;
            padding: .35rem .5rem .35rem .35rem; border-radius: 999px;
            background: transparent; border: 1px solid var(--line);
            cursor: pointer; transition: background .15s, border-color .15s;
            font-family: inherit;
        }
        .user-current:hover { border-color: var(--accent); background: var(--accent-soft); }
        .user-avatar {
            width: 28px; height: 28px; border-radius: 50%;
            background: var(--accent); color: #fff;
            display: inline-flex; align-items: center; justify-content: center;
            font-family: var(--display); font-weight: 700; font-size: .82rem;
            overflow: hidden;
        }
        .user-avatar.has-photo { background: transparent; padding: 0; }
        .user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .user-name {
            font-size: .82rem; font-weight: 600;
            text-transform: uppercase; letter-spacing: .08em; color: var(--accent-3);
        }
        .user-current .caret {
            width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
            border-top: 5px solid var(--muted); transition: transform .15s;
        }
        .user-dropdown[data-open="true"] .caret { transform: rotate(180deg); }
        .user-menu {
            position: absolute; top: calc(100% + .35rem); right: 0; z-index: 220;
            min-width: 220px; max-width: calc(100vw - 1.5rem); padding: .35rem;
            background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
            box-shadow: var(--shadow-lg);
            opacity: 0; visibility: hidden; transform: translateY(-6px);
            transition: opacity .15s, transform .15s, visibility .15s;
        }
        .user-dropdown[data-open="true"] .user-menu { opacity: 1; visibility: visible; transform: translateY(0); }
        .user-menu a, .user-menu__logout, .user-menu__btn {
            display: flex; align-items: center; gap: .65rem;
            padding: .55rem .75rem; border-radius: 4px;
            color: var(--fg); font-size: .9rem; text-decoration: none;
            background: transparent; border: 0; width: 100%; text-align: left;
            cursor: pointer; font-family: inherit;
        }
        .user-menu a:hover, .user-menu__logout:hover, .user-menu__btn:hover { background: var(--accent-soft); color: var(--accent-3); text-decoration: none; }
        .user-menu__icon { width: 1.25em; display: inline-block; text-align: center; }
        .user-menu__count {
            margin-left: auto; min-width: 1.35rem; height: 1.35rem; padding: 0 .3rem;
            display: inline-flex; align-items: center; justify-content: center;
            background: #b91c1c; color: #fff; border-radius: 999px;
            font-size: .68rem; font-weight: 700; line-height: 1;
        }
        .user-menu__sep { height: 1px; background: var(--line); margin: .35rem 0; }
        .user-menu__logout { color: #b91c1c; }

        /* DASHBOARD TABS - used on /dashboard subpages */
        .dashboard-tabs { margin: 1.5rem 0 1.5rem; }
        .dashboard-tabs__nav {
            display: flex; gap: .65rem; flex-wrap: wrap;
            padding: .55rem; background: var(--bg-2);
            border-radius: var(--radius); border: 1px solid var(--line);
        }
        .dashboard-tabs__tab {
            display: inline-flex; align-items: center; gap: .5rem;
            padding: .7rem 1.15rem; border-radius: 6px;
            color: var(--fg-soft, #444); text-decoration: none;
            font-size: .9rem; font-weight: 600;
            transition: background .15s, color .15s;
        }
        .dashboard-tabs__tab:hover { background: rgba(255,255,255,.6); color: var(--accent-3); text-decoration: none; }
        .dashboard-tabs__tab.is-active { background: #fff; color: var(--accent-3); box-shadow: var(--shadow-xs); }
        .dashboard-tabs__icon { font-size: 1rem; }


        /* CURRICULUM TILE GRID - compact grade-by-grade view on the student dashboard */
        .curriculum-grade { margin-top: 1.25rem; padding-top: .9rem; border-top: 1px solid var(--line); }
        .curriculum-grade:first-of-type { border-top: none; padding-top: 0; }
        .curriculum-grade--future { opacity: .78; }
        .curriculum-grade--auto .curriculum-tile { background: rgba(21, 128, 61, 0.06); }
        .curriculum-grade__head {
            display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .55rem;
        }
        .curriculum-grade__name { font-weight: 600; font-size: .95rem; }
        .curriculum-grade__hint { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
        .curriculum-tiles {
            display: grid; gap: .45rem;
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        }
        /* SG-Grade: 2 Sektionen pro SG (Lat Sao + Dan Chi/Chi Sao) - gleiche
           kompakte Tile-Breite wie bei TG/PG, keine volle Streckung. */
        .curriculum-grade--sg .curriculum-tiles { grid-template-columns: repeat(auto-fill, minmax(0, 140px)); }
        @media (max-width: 360px) { .curriculum-grade--sg .curriculum-tiles { grid-template-columns: 1fr; } }
        /* SG-Karten selbst paarweise - SG1+SG2 nebeneinander, SG3+SG4, … */
        .curriculum-sg-grid {
            display: grid; gap: 1rem;
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        @media (max-width: 720px) { .curriculum-sg-grid { grid-template-columns: 1fr; } }
        .curriculum-sg-grid > .curriculum-grade { margin-top: 0 !important; }
        /* Im SG-Grid darf auch SG1 (first-of-type) seine Trennlinie behalten, sonst
           sitzt sie höher als SG2. Global gilt sonst „erstes Element: keine Linie". */
        .curriculum-sg-grid > .curriculum-grade:first-of-type {
            border-top: 1px solid var(--line);
            padding-top: .9rem;
        }
        .curriculum-tile {
            position: relative;
            border: 1px solid var(--line); border-radius: 6px;
            padding: .5rem .65rem;
            background: #fff;
            display: flex; flex-direction: column; gap: .15rem;
            cursor: help;
            transition: transform .15s, border-color .15s, box-shadow .15s;
        }
        .curriculum-tile:hover { transform: translateY(-1px); border-color: var(--accent); box-shadow: var(--shadow-xs); }
        .curriculum-tile.is-done { border-color: rgba(21, 128, 61, 0.35); background: rgba(21, 128, 61, 0.04); }
        .curriculum-tile__group {
            font-size: .65rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
        }
        .curriculum-tile__num { font-size: .95rem; font-weight: 700; font-family: var(--display); }
        .curriculum-tile__marks { display: flex; gap: .25rem; margin-top: .2rem; }
        .curriculum-tile .mark {
            display: inline-flex; align-items: center; justify-content: center;
            width: 22px; height: 22px; border-radius: 4px;
            font-size: .68rem; font-weight: 700; font-family: var(--display);
        }
        .curriculum-tile .mark--done { background: #15803d; color: #fff; }
        .curriculum-tile .mark--todo { background: var(--bg-2); color: var(--muted); border: 1px dashed var(--line); }
        .curriculum-tile .mark--na { background: transparent; color: var(--muted); border: 1px dashed var(--line); }
        /* Pending = ein Eintrag existiert aber wartet noch auf die Schulleiter-Verifizierung.
           Hellgrün-gestrichelt, damit es visuell zu den auto-erworbenen SG-Sektionen passt
           und sich von „endgültig erledigt" (Volltonfarbe) deutlich unterscheidet. */
        .curriculum-tile .mark--pending { background: rgba(21, 128, 61, 0.12); color: #15803d; border: 1px dashed rgba(21, 128, 61, 0.55); }
        .curriculum-tile.is-pending { border: 1px dashed rgba(21, 128, 61, 0.55); background: rgba(21, 128, 61, 0.08); }
        .curriculum-tile.is-pending.is-done { border: 1px dashed rgba(21, 128, 61, 0.55); background: rgba(21, 128, 61, 0.08); }
        .curriculum-tile__pending { font-size: .75rem; margin-left: .15rem; }
        .curriculum-tile.is-auto.is-done { background: rgba(21, 128, 61, 0.08); border-style: dashed; }
        .curriculum-tile.is-auto .mark--done { background: #6fa874; }

        /* SG ROW - alle 12 Schülergrade kompakt nebeneinander */
        .sg-row {
            display: grid; gap: .35rem;
            grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
        }
        .sg-tile {
            position: relative;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            padding: .4rem .25rem;
            border-radius: 6px;
            border: 1px dashed var(--line);
            background: var(--bg-2);
            color: var(--muted);
            font-family: var(--display); font-weight: 700;
            cursor: help;
            transition: transform .15s, box-shadow .15s, border-color .15s;
            min-height: 44px;
        }
        .sg-tile:hover { transform: translateY(-1px); box-shadow: var(--shadow-xs); border-color: var(--accent); }
        .sg-tile.is-reached {
            background: rgba(21, 128, 61, 0.08);
            border: 1px solid rgba(21, 128, 61, 0.5);
            color: #15803d;
        }
        .sg-tile.is-current {
            box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px rgba(201,162,39,.25);
        }
        .sg-tile__code { font-size: .72rem; letter-spacing: .04em; line-height: 1; }
        .sg-tile__check { font-size: .7rem; line-height: 1; margin-top: .1rem; }
        @media (max-width: 600px) {
            .sg-row { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: .25rem; }
            .sg-tile { min-height: 38px; padding: .3rem .2rem; }
            .sg-tile__code { font-size: .64rem; }
        }

        /* FORMS ROW - Wing-Tzun-Formen mit Einstiegs-Grad */
        .forms-row {
            display: grid; gap: .45rem;
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        }
        .form-tile {
            padding: .55rem .7rem;
            border-radius: 6px;
            border: 1px dashed var(--line);
            background: var(--bg-2);
            color: var(--muted);
            display: flex; flex-direction: column; gap: .15rem;
            cursor: help;
            transition: transform .15s, box-shadow .15s, border-color .15s;
        }
        .form-tile:hover { transform: translateY(-1px); box-shadow: var(--shadow-xs); border-color: var(--accent); }
        .form-tile.is-reached {
            background: rgba(21, 128, 61, 0.08);
            border: 1px solid rgba(21, 128, 61, 0.5);
            color: #15803d;
        }
        .form-tile.is-locked {
            background: rgba(180, 83, 9, 0.08);
            border: 1px solid rgba(180, 83, 9, 0.45);
            color: #b45309;
        }
        /* Pending = Grad ist nur durch noch nicht freigegebene Karten-Verifizierung
           „erreicht". Wir benutzen die gleiche hellgrüne, gestrichelte Optik wie
           bei auto-erworbenen SG-Sektionen (Dan Chi / Lat Sao / Chi Sao Sektion 1). */
        .form-tile.is-pending,
        .form-tile.is-reached.is-pending {
            background: rgba(21, 128, 61, 0.08);
            border: 1px dashed rgba(21, 128, 61, 0.5);
            color: #15803d;
        }
        .form-tile__lock { font-size: .85rem; }
        .form-tile__name { font-family: var(--display); font-weight: 700; font-size: .85rem; line-height: 1.2; }
        .form-tile__grade { font-size: .68rem; letter-spacing: .08em; opacity: .8; text-transform: uppercase; }

        /* GRADE HISTORY TILE GRID - full ladder, earned tiles colored, hover for details */
        .grade-history-grid {
            display: grid; gap: .35rem;
            grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
        }
        .grade-tile {
            position: relative;
            min-width: 0;
            padding: .4rem .25rem .35rem;
            border-radius: 6px;
            border: 1px dashed var(--line);
            background: var(--bg-2);
            color: var(--muted);
            display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
            font-family: var(--display); font-weight: 700;
            cursor: help;
            transition: transform .15s, box-shadow .15s, border-color .15s;
            min-height: 50px;
        }
        .grade-tile:hover { transform: translateY(-1px); box-shadow: var(--shadow-xs); border-color: var(--accent); }
        .grade-tile.is-earned {
            background: var(--accent); color: #fff; border: 1px solid var(--accent-3);
        }
        /* Category-Farbschema überschreibt das alte gold-für-alle-earned-Verhalten. */
        .grade-tile.is-earned.cat-sg { background: #fff; color: #111; border-color: #cbd0d4; }
        .grade-tile.is-earned.cat-tg { background: #b91c1c; color: #fff; border-color: #7f1d1d; }
        .grade-tile.is-earned.cat-pg { background: #c9a227; color: #fff; border-color: #8a6d1a; }
        /* Escrima-Unterscheidung jetzt nur noch über Code-Prefix (ESG/ETG/EPG) sichtbar. */
        .grade-tile.is-current { box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px rgba(201,162,39,.25); }
        /* Pending = noch nicht vom Schulleiter freigegeben. Gestrichelt + ⏳-Marker oben rechts. */
        .grade-tile.is-pending { opacity: .65; border-style: dashed; }
        .grade-tile.is-pending.is-earned { background: repeating-linear-gradient(45deg, #fef9e7, #fef9e7 4px, #fff 4px, #fff 8px); color: #92400e; border-color: #d4a373; }
        .grade-tile__pending { position: absolute; top: -4px; right: -4px; font-size: .75rem; line-height: 1; background: #fff; border-radius: 50%; padding: 2px; }
        .grade-tile { position: relative; }
        .grade-tile__code { font-size: .78rem; letter-spacing: .04em; line-height: 1; }
        .grade-tile__date {
            font-family: var(--sans); font-weight: 500;
            font-size: .58rem; letter-spacing: .04em; opacity: .85;
        }
        @media (max-width: 600px) {
            .grade-history-grid { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: .25rem; }
            .grade-tile { min-height: 44px; padding: .3rem .2rem; }
            .grade-tile__code { font-size: .7rem; }
            .grade-tile__date { font-size: .54rem; }
        }

        /* MOBILE TWEAKS - dashboard, day-picker, schulleiter table */
        @media (max-width: 600px) {
            /* Day-picker rows on the seminar opt-in form */
            .seminar-day-row {
                flex-wrap: wrap; gap: .35rem !important;
            }
            .seminar-day-row > strong { flex: 1 1 100%; }
            .seminar-day-row .day-time { color: var(--muted); font-size: .82rem; }
            .seminar-day-row .day-price { margin-left: 0 !important; }

            /* Director's member table - let it scroll horizontally instead of squashing */
            .dash-panel table { font-size: .8rem; }
            .dash-panel table thead th, .dash-panel table tbody td { padding: .4rem .35rem; }
            /* Aggressively shrink the schulleiter members table - hide secondary columns on phones. */
            .dash-panel table thead th:nth-child(3),
            .dash-panel table tbody td:nth-child(3),
            .dash-panel table thead th:nth-child(6),
            .dash-panel table tbody td:nth-child(6) {
                display: none;
            }

            /* Curriculum tiles smaller on phone */
            .curriculum-tiles { gap: .35rem; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
            .curriculum-tile { padding: .4rem .5rem; }
            .curriculum-tile__num { font-size: .85rem; }
            .curriculum-tile .mark { width: 18px; height: 18px; font-size: .6rem; }

            /* Top nav: stack auth link compactly */
            .nav-auth-link { padding: .3rem .5rem; font-size: .72rem; }
        }

        .seminar-schedule li { padding: .65rem 0; border-bottom: 1px solid var(--line); }
        .seminar-schedule li:last-child { border-bottom: none; }

        /* RICH-CONTENT - output of WYSIWYG fields */
        .rich-content { line-height: 1.7; }
        .rich-content > * + * { margin-top: 1em; }
        .rich-content h2, .rich-content h3 { font-family: var(--display); margin-top: 1.5em; }
        .rich-content ul, .rich-content ol { padding-left: 1.5em; }
        .rich-content blockquote {
            border-left: 3px solid var(--accent); padding-left: 1em; color: var(--muted); font-style: italic;
        }
        .rich-content a { color: var(--accent-3); text-decoration: underline; }
        .rich-content img { max-width: 100%; height: auto; border-radius: var(--radius); }

        /* NOTICES */
        .notice { padding: 1rem 1.25rem; border-radius: var(--radius); border: 1px solid; }
        .notice--success { background: #e8f5ec; color: #1f5a31; border-color: #b9dfc6; }
        .notice--error { background: #fbeaea; color: #7a2222; border-color: #e9b8b8; }

        /* LIGHTBOX - gallery navigation extras (overlay/image base styles defined earlier) */
        [data-lightbox] { cursor: zoom-in; }
        .lightbox-prev, .lightbox-next {
            position: absolute; top: 50%; transform: translateY(-50%);
            width: 48px; height: 48px; border-radius: 999px;
            background: rgba(255,255,255,.12); color: #fff;
            border: 1px solid rgba(255,255,255,.25);
            display: flex; align-items: center; justify-content: center;
            font-size: 1.5rem; cursor: pointer; transition: background .2s;
            user-select: none;
        }
        .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,.22); }
        .lightbox-prev { left: 1rem; }
        .lightbox-next { right: 1rem; }
        @media (max-width: 600px) {
            .lightbox-prev, .lightbox-next { width: 40px; height: 40px; font-size: 1.2rem; }
        }

        /* RESPONSIVE */
        @media (max-width: 720px) {
            .nav-row { gap: .75rem; }
            .hero { padding: 4rem 0 3.5rem; }
        }