@font-face {
  font-family: 'FS Industrie';
  src: url('fonts/FSIndustrie-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FS Industrie';
  src: url('fonts/FSIndustrie-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Ported from Players Guide (2026-09) — used for titles/nav/eyebrow labels,
   see the grouped "Two title fonts" rules near the end of this file. */
@font-face {
  font-family: 'FS Industrie Condensed';
  src: url('fonts/FSIndustrieCd-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FS Industrie Condensed';
  src: url('fonts/FSIndustrieCd-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  --blue:      #2870ED;
  --blue-dk:   #064EA1;
  --navy:      #001B41;
  --gold:      #FFCC00;
  --coal:      #303030;
  --gl:        #E4EAF0;
  --gm:        #A3B5C9;
  --gd:        #4d657f;
  --bg:        #F0F3F8;
  --white:     #ffffff;
  --r-sm:6px; --r-md:10px; --r-lg:14px;
  --max:1600px;
  --sidebar:260px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;-webkit-text-size-adjust:100%;}
body{font-family:'FS Industrie',sans-serif;background:var(--bg);color:var(--coal);min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}

/* ── LOADING ── */
#loading{position:fixed;inset:0;z-index:9999;background:var(--blue);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;transition:opacity 0.5s ease;}
#loading img{width:200px;}
#lb-wrap{width:140px;height:2px;background:rgba(255,255,255,0.25);border-radius:2px;overflow:hidden;}
#lb{height:100%;width:0;background:var(--gold);border-radius:2px;animation:lb 1s ease forwards;}
@keyframes lb{to{width:100%;}}
#loading.out{opacity:0;pointer-events:none;}

/* ══════════════════════════════════════════════
   DESKTOP LAYOUT
══════════════════════════════════════════════ */
#app{display:flex;flex-direction:column;min-height:100vh;}

/* Top bar - desktop only */
#topbar{
  display:none;
  background:var(--blue);
  border-bottom:2px solid var(--blue-dk);
  height:76px;
  position:sticky;top:0;z-index:200;
}
/* `width:100%` matters — synced from Players Guide (2026-09), which found
   and fixed this as a real bug: `#topbar-inner` is a flex item of
   `#topbar{display:flex}` (set in the desktop media query), so without an
   explicit width it shrink-wraps to fit-content instead of spanning the
   full bar — the whole grid (and the "centered" search column with it)
   sat left-of-center on wide screens. */
#topbar-inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  height:100%;
  padding:0 32px;
  gap:24px;
  width:100%;
}
#topbar-left{display:flex;align-items:center;}
#topbar-left img{height:38px;}
#topbar-search{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,0.18);
  border:1px solid rgba(255,255,255,0.3);
  border-radius:var(--r-md);
  padding:0 16px;
  width:440px;
}
#topbar-search i{color:rgba(255,255,255,0.85);font-size:18px;}
#topbar-search input{background:transparent;border:none;outline:none;color:#fff;font-size:14px;font-family:inherit;padding:12px 0;width:100%;}
#topbar-search:focus-within{box-shadow:0 0 0 2px var(--white);border-radius:var(--r-md);}
#topbar-search input::placeholder{color:rgba(255,255,255,0.92);}
#topbar-right{display:flex;align-items:center;justify-content:flex-end;}
/* Plain text, no pill — synced to match Players Guide (2026-09), by
   explicit request, overriding this repo's own earlier a11y-driven choice
   here. Was a gold-on-`--blue-dk` pill (gold directly on plain `--blue`
   only reaches ~3:1, failing 4.5:1) — Players Guide solves the same
   problem differently, by dropping gold for plain white text instead
   (white on `--blue` measures ~4.54:1, clearing 4.5:1 with very little
   margin, worth knowing if this text ever gets smaller or busier). */
#topbar-date{font-size:14px;font-weight:600;color:var(--white);letter-spacing:1px;text-transform:uppercase;}

/* Welcome block — photo hero, shown on mobile too, 2026-09 (synced to
   match Players Guide's current design; used to be desktop-only, a plain
   white card, replaced here — see the `@media(min-width:900px)` override
   below for the larger desktop size, and `images/Stadthalle_CC.jpg`'s
   origin: copied from `../Players Guide/assets/`, same venue/tournament,
   Photo credit: e-motion / Bildagentur Zolles KG / Christian Hofer). */
.desk-welcome{
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:260px;
  margin:16px;
  border-radius:var(--r-lg);
  overflow:hidden;
  padding:22px 18px;
  background:
    linear-gradient(180deg, rgba(0,27,65,0.15) 0%, rgba(0,27,65,0.4) 55%, rgba(0,27,65,0.9) 100%),
    url('images/Stadthalle_CC.jpg') center/cover no-repeat;
  position:relative;
}
.desk-welcome .dw-eyebrow{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--gold);margin-bottom:8px;}
.desk-welcome h1{font-size:26px;font-weight:700;color:var(--white);line-height:1.25;margin-bottom:8px;}
.desk-welcome h1 span{color:var(--gold);}
.desk-welcome>p{font-size:13px;color:var(--white);line-height:1.6;margin-bottom:16px;}
/* 2-column grid, not flex-wrap — chip text lengths vary enough
   ("24. Okt. – 1. Nov. 2026" vs "Wiener Stadthalle, Wien") that flex-wrap
   left most of them one-per-row on a phone-width screen, roughly doubling
   the hero's height for no benefit. A fixed 2-up grid stays compact
   regardless of each chip's own content width — same fix Players Guide
   made for the same reason. */
.desk-welcome-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
/* Frosted-glass chips over the photo — replaces the old solid-white-card
   style (which assumed a white background, not a photo). */
.dwc{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.28);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:var(--r-md);padding:7px 10px;font-size:11px;font-weight:500;color:var(--white);}
.dwc i{font-size:14px;color:var(--gold);flex-shrink:0;}

/* Desktop body = sidebar + content */
#desktop-body{display:flex;flex:1;}

/* Sidebar — hidden on mobile, sticky on desktop. Light "macOS app sidebar"
   look (icon badges, indented hierarchy, blue pill for the selected row)
   by explicit request/reference screenshot — deliberately different from
   the mobile drawer below, which stays flat and blue on purpose (a
   transient overlay suits simplicity; a persistent desktop sidebar suits
   hierarchy). `#sidebar`-scoped selectors throughout this block exist so
   they reliably win over the shared `.nav-item` rules (used by both the
   sidebar and the drawer) regardless of source order. */
#sidebar{
  display:none;
  width:var(--sidebar);
  background:var(--white);
  flex-shrink:0;
  position:sticky;
  top:78px;
  /* Fixed to the viewport (not `max-height`) so the white panel always
     reaches the bottom of the screen, regardless of how much nav content
     there is — a short page shouldn't leave `--bg` showing below a
     shrink-wrapped sidebar. `overflow-y:auto` still lets it scroll
     internally on short/small screens once expand/collapse (see
     `.nav-parent` below) pushes total nav content past that height. */
  height:calc(100vh - 78px);
  overflow-y:auto;
  padding:12px 10px;
  border-right:1px solid var(--gl);
  align-self:flex-start;
}
/* Flat resting state, matching Players Guide (2026-09) — used to carry a
   base `background:rgba(0,27,65,0.15)` tint here (a contrast-safety margin
   for the plain-white label text below), but Players Guide removed the
   equivalent tint because it read as a "striped/tiled" mismatch against
   the drawer's own plain blue background; dropped here too to stay in
   sync. hover/active still provide plenty of contrast on their own. Only
   applies to the drawer now (the sidebar overrides all of this below). */
.nav-item{display:flex;align-items:center;gap:12px;padding:13px 20px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,0.08);transition:background 0.15s;width:100%;text-align:left;}
.nav-item:hover{background:rgba(255,255,255,0.1);}
.nav-item.active{background:rgba(0,27,65,0.3);border-left:3px solid var(--gold);}

/* ── Expand/collapse mechanics for hierarchical nav sections — shared
   structure/behavior for BOTH the sidebar and the mobile drawer
   (Ausstellerinformationen's 6 topics nest under it in both, 2026-08).
   Two sibling buttons wrapped in one non-interactive `.nav-parent` div,
   not one nested inside the other: nested <button>s are invalid HTML and
   get silently broken apart by the browser. The row (`.nav-item`) still
   navigates on click, unchanged; the separate `.nav-toggle` chevron
   toggles `.nav-parent.expanded` independently (`e.stopPropagation()` in
   its `app.js` click handler keeps it from also triggering navigation).
   Purely structural here — colors differ per surface, set further down in
   each surface's own themed block (`#sidebar …` / `#nav-drawer …`). ── */
.nav-parent{display:flex;align-items:center;gap:2px;}
.nav-parent .nav-item{flex:1;min-width:0;margin-bottom:0;}
/* 40×40px / 15px icon, synced to match Players Guide (2026-09) — was
   24×24px / 13px. */
.nav-toggle{width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:6px;}
.nav-toggle i{font-size:15px;transition:transform 0.15s;}
/* Points down ("more below") while collapsed, flips to pointing up
   ("collapses back up") once open — the reverse of the more common
   down↔right swap, by explicit request. */
.nav-parent.expanded .nav-toggle i{transform:rotate(180deg);}
/* Collapsed by default (same `display:none`-toggled-by-a-class pattern
   `.acc-item`/`.acc-body` already uses elsewhere in this file, no
   animation) — `goTo()` in app.js adds `.expanded` to every `.nav-parent`
   whose section contains the newly active page, so landing on a sub-page
   (search, a Home tile, a direct link) always reveals it without a manual
   click first, in the sidebar AND the drawer at once, independently.
   Never auto-collapses on the way out — once opened, stays open. */
.nav-sublist{display:none;flex-direction:column;gap:1px;}
.nav-parent.expanded + .nav-sublist{display:flex;}

/* ── Sidebar hierarchy theming (light) ── */
#sidebar .nav-item--badge{padding:7px 8px;margin-bottom:1px;border-radius:8px;border-bottom:none;background:transparent;color:var(--coal);}
#sidebar .nav-item--badge:hover{background:var(--bg);}
#sidebar .nav-item--badge.active{background:var(--blue);}
#sidebar .nav-item--badge.active span{color:var(--white);}
/* "You're somewhere inside this section" (e.g. Ausstellerinformationen
   while on one of its topic pages) — a light tint, not the full blue pill,
   so it doesn't visually compete with the actual selected row below it.
   `goTo()` in app.js sets `.active` AND `.section-active` together on this
   element whenever a child page is current (not mutually exclusive at the
   class level, despite `.active` normally meaning "the blue pill") — so
   without this line, `.active span{color:white}` above still won and left
   near-white text sitting on this light `--gl` background: an accessibility
   contrast failure, not just a visual mismatch. Resetting back to
   `inherit` here (the same dark `--coal` every non-active row already
   uses) restores full contrast. */
#sidebar .nav-item--badge.section-active{background:var(--gl);}
#sidebar .nav-item--badge.section-active span{color:inherit;}
/* font-size 16px, not 13px — bumped 2026-09 to match Players Guide
   exactly (a precise re-comparison found this, among other sidebar
   sizing drift not caught in the first sync pass). */
#sidebar .nav-item--badge span{font-size:16px;font-weight:600;color:inherit;}
/* No ink-offset transform needed here — this row used to carry
   `translateY(0.23em)` under plain FS Industrie (documented in the parent
   `EBO Projekte/CLAUDE.md`, "Custom-Font-Metriken: FS Industrie"), but
   switching this label to FS Industrie Condensed Bold (see "Two title
   fonts" near the end of this file) changed the font's ink metrics enough
   that re-measuring (same canvas ink-center method) showed only ~0.02em of
   residual — under 1px, not worth a transform. Players Guide hit the exact
   same thing on its own equivalent row (same font, same weight, and now
   the same 16px size too) and also landed on no transform — confirms this
   isn't a coincidence of Fanzone's old 13px specifically. Re-measure again
   if this label's font/weight/size ever changes. */
/* Single uniform badge color for every item, matching Players Guide
   (2026-09) — was 5 different per-item colors set via inline
   `style="background:var(--X)"` on each `.nav-badge`, which also caused a
   real contrast bug on the gold Zusatzpakete badge (its icon is a plain
   `<i>` child, not something the inline `color:var(--navy)` on the badge
   span could reach — `#sidebar .nav-badge i{color:var(--white)}` below
   always won, so the icon rendered white-on-gold). Removed the inline
   styles from index.html and fixed the background here instead — no
   contrast issue left since every badge is the same dark blue now. */
#sidebar .nav-badge{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--blue-dk);}
/* `width`/`text-align` reset to override the shared `.nav-item i` rule
   (width:22px, no text-align) further down — that rule was winning the
   `width` property (unset here previously) and left the glyph flush-left
   inside a box wider than itself, reading as off-center within the badge.
   `text-align:center` covers it structurally for any future icon-font
   glyph, not just today's specific ones. */
#sidebar .nav-badge i{width:auto;font-size:15px;color:var(--white);text-align:center;}
#sidebar .nav-parent{margin-bottom:1px;}
#sidebar .nav-toggle{color:var(--gm);}
#sidebar .nav-toggle:hover{background:var(--bg);color:var(--navy);}
#sidebar .nav-sublist{margin:1px 0 6px;}
/* Indent kept shallow on purpose (30px, down from an earlier 44px) — just
   enough to read as nested under its badged parent, without pushing all
   the way out to where the parent's own label text starts. */
/* font-size 15.5px + color var(--coal), not 12.5px/var(--gd) — synced to
   match Players Guide exactly, 2026-09. Players Guide doesn't dim
   sub-item text color the way Fanzone used to (`--gd`, a lighter grey-blue
   than normal body text) — hierarchy there is carried entirely by the
   Condensed Light vs. Condensed Bold weight contrast (see "Two title
   fonts"), not by also dimming the color on top of that. */
#sidebar .nav-subitem{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:6px 8px 6px 30px;border-radius:7px;font-size:15.5px;font-weight:500;color:var(--coal);cursor:pointer;}
/* No leading icon on sub-nav rows, matching Players Guide (2026-09) — used
   to carry a Tabler `<i>` per topic; removed from index.html along with
   the `#sidebar .nav-subitem i` rule this used to need. `gap:8px` on the
   row above is now unused (nothing to space from the label) but left as-is
   — harmless, and Players Guide's own equivalent rule keeps it too. */
#sidebar .nav-subitem:hover{background:var(--bg);color:var(--navy);}
#sidebar .nav-subitem.active{background:var(--blue);color:var(--white);}
#sidebar .nav-subitem.active i{color:var(--white);}
.nav-item i{font-size:19px;color:rgba(255,255,255,0.8);width:22px;flex-shrink:0;}
.nav-item.active i{color:var(--gold);}
/* font-size 16px, not 13px — synced to match Players Guide exactly,
   2026-09 (precise sidebar/drawer re-comparison). `:not(.nav-badge)` isn't
   needed here the way it is in Players Guide's equivalent shared rule —
   Fanzone's badge span only ever exists inside `#sidebar`, which has its
   own more-specific `#sidebar .nav-item--badge span` rule (font-size:16px,
   no transform) that already wins the cascade regardless, so this plain
   `.nav-item span` effectively only reaches `#nav-drawer .nav-item span`
   in practice.
   No `translateY` here — first tried adopting Players Guide's own
   documented `0.1em` for this row directly (same font/weight/size/
   icon-size, reasoning that the values should transfer), but direct
   measurement against the live rendered row (`#nav-drawer .nav-item`,
   icon vs. label ink-center) showed that actually *introduced* a ~1.6px
   error rather than closing one — i.e. Players Guide's own `0.1em` value
   is itself stale here too (this file already has one other confirmed
   case of a stale ink-offset comment/value inside Players Guide's own
   CSS, see the Font section above), not something to copy blind even when
   the row's dimensions match on paper. Re-measured and confirmed ~0
   residual is correct as rendered — no transform needed. */
.nav-item span{font-size:16px;font-weight:700;color:var(--white);}
/* Shared, unscoped — covers both `#sidebar .nav-subitem span` and
   `#nav-drawer .nav-subitem span` (font-size/color set per-surface above).
   Same story as `.nav-item span` just above: Players Guide's documented
   `0.1em` for this row measured as actively wrong once applied here
   (~1.5px error on the sidebar row, ~1px on the drawer row — direct
   measurement, not assumed) — removed rather than kept, no transform on
   either surface's `.nav-subitem span`. */

/* Main content area */
#main-content{flex:1;min-width:0;}

/* ══════════════════════════════════════════════
   MOBILE HEADER
══════════════════════════════════════════════ */
#mob-hdr{background:var(--blue);padding:0 16px;display:flex;align-items:center;justify-content:space-between;height:76px;position:sticky;top:0;z-index:200;border-bottom:2px solid var(--blue-dk);}
#mob-hdr img{height:34px;}
#mob-hdr-right{display:flex;align-items:center;gap:10px;}
/* Plain text, no pill, 14px — synced to match Players Guide (2026-09),
   same as #topbar-date above (and comfortably clear of the old 11px
   Apple-HIG-minimum concern this used to be tuned around, back when it
   was a small pill). */
#mob-date{font-size:14px;font-weight:600;color:var(--white);letter-spacing:0.8px;text-transform:uppercase;}
#mob-menu-btn{width:44px;height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border-radius:8px;transition:background 0.15s;}
#mob-menu-btn:hover{background:rgba(255,255,255,0.1);}
#mob-menu-btn span{display:block;width:20px;height:2px;background:#fff;border-radius:2px;transition:all 0.25s;transform-origin:center;}
#mob-menu-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
#mob-menu-btn.open span:nth-child(2){opacity:0;transform:scaleX(0);}
#mob-menu-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Mobile search */
#mob-search-wrap{background:var(--blue-dk);padding:10px 16px 12px;position:sticky;top:76px;z-index:190;}
#mob-search-box{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);border-radius:var(--r-md);padding:0 12px;}
#mob-search-box i{color:rgba(255,255,255,0.5);font-size:17px;flex-shrink:0;}
#mob-search-inp{flex:1;background:transparent;border:none;outline:none;color:#fff;font-size:14px;font-family:inherit;padding:10px 0;}
#mob-search-box:focus-within{box-shadow:0 0 0 2px var(--white);border-radius:var(--r-md);}
#mob-search-inp::placeholder{color:rgba(255,255,255,0.85);}
#mob-search-clr{color:rgba(255,255,255,0.4);font-size:17px;display:none;padding:4px;line-height:1;}
#mob-search-clr.on{display:block;}

/* Shared search results */
.search-res-box{display:none;background:var(--white);border-radius:var(--r-md);margin-top:6px;overflow:hidden;max-height:260px;overflow-y:auto;box-shadow:0 4px 20px rgba(0,0,0,0.2);}
.search-res-box.on{display:block;}
.sr-item{padding:11px 14px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--gl);cursor:pointer;font-size:13px;color:var(--coal);width:100%;text-align:left;}
.sr-item:last-child{border-bottom:none;}
.sr-item:hover{background:var(--gl);}
.sr-item i{font-size:15px;color:var(--blue);flex-shrink:0;}
/* Same FS Industrie ink-offset fix as elsewhere (see "Custom-Metriken: FS
   Industrie" in the parent `EBO Projekte/CLAUDE.md`) — the label text is
   now wrapped in its own `.sr-label` span in `app.js` specifically so this
   rule can target it without also shifting the `.sr-cat` pill. Measured
   ~0.20em. */
.sr-item .sr-label{transform:translateY(0.2em);}
/* 11px, not 10px — see the note on `.sec-lbl` (Apple HIG minimum sizes). */
.sr-cat{margin-left:auto;font-size:11px;color:var(--gd);background:var(--gl);padding:2px 7px;border-radius:20px;white-space:nowrap;}
.sr-empty{padding:16px;font-size:13px;color:var(--gd);text-align:center;}

/* Mobile nav overlay */
/* z-index 195/196, not 150/160 — matching a fix Players Guide already made
   (2026-08): #mob-search-wrap's sticky bar sits at z-index:190, which sat
   above the drawer's old 160 and rendered on top of the open drawer's top
   portion since the drawer is full-height from top:0. Raised above the
   search bar but kept below #mob-hdr's 200 on purpose — the header's
   hamburger button doubles as the drawer's close button (X) and needs to
   stay reachable while the drawer is open. */
#nav-overlay{position:fixed;inset:0;background:rgba(0,0,0,0);pointer-events:none;z-index:195;transition:background 0.3s;}
#nav-overlay.open{background:rgba(0,0,0,0.5);pointer-events:all;}
/* Full-width, not a fixed 280px side panel — synced to match Players
   Guide (2026-09), which uses `right:-100%;width:100%` for a full-screen
   mobile drawer instead of a narrow slide-in panel. */
#nav-drawer{position:fixed;top:0;right:-100%;width:100%;height:100%;background:var(--blue);z-index:196;transition:right 0.3s cubic-bezier(0.4,0,0.2,1);overflow-y:auto;padding-bottom:40px;}
#nav-drawer.open{right:0;}
#nav-drawer-hdr{padding:16px 16px 14px;}
#nav-drawer-hdr img{height:22px;}
/* 11px, not 10px — see the note on `.sec-lbl` (Apple HIG minimum sizes). */
#nav-drawer-hdr p{font-size:11px;color:rgba(255,255,255,0.75);margin-top:6px;letter-spacing:0.5px;text-transform:uppercase;}
#nav-drawer .nav-item{border-bottom:none;}
/* ── Drawer hierarchy theming (blue) — mirrors the sidebar's expand/
   collapse structure above with the drawer's own existing color language
   (dimmed-white icons/text, navy-tint active state) instead of the
   sidebar's light one. Indent (46px) kept shallow for the same reason as
   the sidebar's: just enough to read as nested under
   Ausstellerinformationen's own row, not flush with its label text. */
#nav-drawer .nav-toggle{color:rgba(255,255,255,0.8);}
#nav-drawer .nav-toggle:hover{background:rgba(255,255,255,0.1);color:var(--white);}
/* font-size 15.5px + solid var(--white), not 12.5px/rgba(255,255,255,0.75)
   — synced to match Players Guide exactly, 2026-09. Same reasoning as the
   sidebar's `.nav-subitem` above: Players Guide doesn't dim sub-item text,
   it relies on the Condensed Light vs. Bold weight contrast alone. */
#nav-drawer .nav-subitem{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 20px 10px 46px;font-size:15.5px;font-weight:600;color:var(--white);cursor:pointer;border-bottom:1px solid rgba(255,255,255,0.08);}
/* No leading icon here either, matching Players Guide (2026-09) — same
   change as the sidebar's `.nav-subitem` above. */
#nav-drawer .nav-subitem:hover{background:rgba(255,255,255,0.1);}
#nav-drawer .nav-subitem.active{background:rgba(0,27,65,0.3);color:var(--white);}
#nav-drawer .nav-subitem.active i{color:var(--gold);}

/* ══════════════════════════════════════════════
   PAGES
══════════════════════════════════════════════ */
.page{display:none;}
.page.active{display:block;animation:fadeIn 0.18s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:translateY(0);}}

/* ── HOME ── */
#page-home{padding-bottom:40px;}
/* `.mobile-page-title` removed, 2026-09 — used to be a mobile-only <h1>
   ("Fanzone — Aussteller") needed because `.desk-welcome`'s own <h1> was
   desktop-only. Now that the photo hero (`.desk-welcome` above) shows on
   mobile too, its own h1 ("Willkommen in der Fanzone") is present at every
   width, so this stand-in is redundant — removed from index.html and here. */
/* 11px, not 10px — see the note on `.sec-lbl` (Apple HIG minimum sizes). */
.tiles-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--gd);padding:14px 20px 10px;}
.tiles-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:0 20px;}
.tile-card{background:var(--white);border-radius:var(--r-lg);padding:18px 16px 16px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;cursor:pointer;border:1px solid var(--gl);transition:border-color 0.15s,transform 0.15s,box-shadow 0.15s;position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent;width:100%;text-align:left;}
.tile-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--blue);opacity:0;transition:opacity 0.15s;}
.tile-card:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:0 6px 16px rgba(40,112,237,0.12);}
.tile-card:hover::before{opacity:1;}
.tile-card:active{transform:translateY(0);}
.tc-icon{width:42px;height:42px;background:var(--gl);border-radius:10px;display:flex;align-items:center;justify-content:center;}
.tc-icon i{font-size:22px;color:var(--blue-dk);}
.tc-label{font-size:12px;font-weight:600;color:var(--navy);line-height:1.35;}
.tc-arrow{position:absolute;bottom:14px;right:14px;font-size:14px;color:var(--gm);}
.tile-card.wide{grid-column:span 2;flex-direction:row;align-items:center;padding:16px 18px;gap:14px;}
.tile-card.wide .tc-label{font-size:13px;flex:1;}
.tile-card.wide .tc-arrow{position:static;}

/* ── SECTION PAGES ── */
.page-inner{padding-bottom:56px;}
/* Ported from Players Guide (2026-09) — replaces the old blue `.sec-hdr`
   banner (back-btn + gold icon + small uppercase h1) with a plain title
   row in the page body: back-btn with a visible label + a big navy h1.
   No icon in this row, matching Players Guide's current (icon-removed)
   state — see that repo's CLAUDE.md "The blue .sec-hdr banner is gone"
   for the history of why it went through icon-in-banner → icon-in-row →
   no-icon before landing here. */
.page-title-row{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:28px 16px 4px;}
.back-btn{display:flex;align-items:center;gap:4px;color:var(--gd);font-size:13px;font-weight:700;padding:4px;margin-left:-4px;line-height:1;transition:color 0.15s;}
.back-btn i{font-size:18px;line-height:1;}
.back-btn:hover{color:var(--navy);}
.page-title{font-size:28px;font-weight:700;color:var(--navy);line-height:1.2;}

/* Contact card — sizing/colors synced to match Players Guide exactly,
   2026-09 (precise page-by-page re-comparison). Icon now sits in its own
   soft frosted badge box (42×42px, `rgba(255,255,255,0.14)` background,
   12px radius) instead of a plain bare icon — same motif as the sidebar's
   `.nav-badge`, just semi-transparent since this card is already on a
   blue background. */
.contact-card{margin:14px 16px 0;background:var(--blue-dk);border-radius:var(--r-lg);padding:16px 18px;display:flex;align-items:center;gap:14px;box-shadow:0 6px 18px rgba(0,27,65,0.2);}
/* Fanzone-specific — Players Guide's `.p-btn{flex:1}` (just synced above)
   only ever sits inside `.place-acts`, a dedicated full-width footer strip
   with no competing sibling; Fanzone nests it two levels deeper, inside
   `.info-actions` inside this card's unstyled text wrapper `<div>`, which
   is itself a flex child of `.contact-card` alongside the icon. Without
   this rule that wrapper stays content-sized (flex's `0 1 auto` default),
   so `.p-btn`'s `flex:1` had nothing to grow into — found by checking the
   Hausordnung page's single-button case, where it visibly failed to fill
   the row (the two-button Zusatzpakete case happened to look plausible by
   coincidence, not because it actually worked). `min-width:0` is required
   alongside `flex:1` on a flex child that contains text — without it the
   child's default `min-width:auto` can prevent it shrinking/growing
   correctly against long content. */
.contact-card>div{flex:1;min-width:0;}
.contact-card i{font-size:22px;color:var(--white);flex-shrink:0;width:42px;height:42px;line-height:42px;text-align:center;background:rgba(255,255,255,0.14);border-radius:12px;}
.cc-icon-img{width:42px;height:42px;padding:10px;box-sizing:border-box;flex-shrink:0;opacity:1;background:rgba(255,255,255,0.14);border-radius:12px;}
.cc-name{font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;color:rgba(255,255,255,0.7);}
.cc-val{font-size:20px;font-weight:700;color:var(--white);margin-top:3px;}
.cc-val a{color:var(--white);}
.cc-sub{font-size:11.5px;color:rgba(255,255,255,0.75);margin-top:3px;line-height:1.4;}
.cc-sub a{color:rgba(255,255,255,0.9);text-decoration:underline;text-decoration-color:rgba(255,255,255,0.45);text-underline-offset:2px;}
.cc-sub a:hover{text-decoration-color:currentColor;}

/* Section label */
/* 11px, not 10px, 2026-08 — Apple HIG's "Ensuring legibility" table lists
   10pt as macOS's absolute minimum readable size and 11pt as iOS's; a
   handful of uppercase micro-labels site-wide sat exactly on that 10pt
   floor (fine as short eyebrow tags per the desktop-font-size-bump note
   below, but landing on a hard minimum rather than comfortably above it
   is its own small risk, worth closing since this site is read on phones
   as much as desktop). Bumped this one plus every other 10px label the
   same 1px, in one sweep (2026-08): `#mob-date`, `.sr-cat`,
   `#nav-drawer-hdr p`, `.tiles-label`, `.cc-name`. Reading-content sizes
   (`.acc-body`, `.d-row`, etc.) were already well above this floor and
   untouched.
   `.sec-lbl` bumped again, further, 2026-09 — 11px→14px, synced to match
   Players Guide exactly (precise page-by-page re-comparison; `.cc-name`
   above went through the same 2026-09 bump to 14px, for the same reason,
   moving it well past the 2026-08 HIG-floor fix too). */
.sec-lbl{margin:18px 16px 8px;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--gd);display:flex;align-items:center;gap:8px;}
.sec-lbl::after{content:'';flex:1;height:1px;background:var(--gl);}

/* Generic horizontal-inset utility — see the desktop `900px` override
   (bumps to 32px) for the full reasoning. Use on any plain paragraph,
   wrapper `<div>`, or component that needs to align with the rest of a
   page's content but has no other class already covering it. */
.page-pad{margin-left:16px;margin-right:16px;}

/* Accordion */
.acc-list{margin:0 16px;display:flex;flex-direction:column;gap:2px;}
.acc-item{background:var(--white);border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--gl);}
/* font-size 16px, not 13px — synced to match Players Guide, 2026-09. */
.acc-btn{width:100%;text-align:left;background:transparent;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:16px;font-weight:500;color:var(--coal);transition:background 0.1s;border-bottom:1px solid transparent;}
.acc-btn-label{display:flex;align-items:center;gap:10px;}
.acc-btn-ico{width:22px;height:22px;border-radius:var(--r-sm);flex-shrink:0;object-fit:cover;}
.acc-btn:hover{background:var(--gl);}
.acc-ico{font-size:16px;color:var(--gm);flex-shrink:0;transition:transform 0.2s,color 0.2s;display:inline-block;}
.acc-item.open .acc-btn{border-bottom-color:var(--gl);}
.acc-item.open .acc-ico{transform:rotate(45deg);color:var(--blue);}
.acc-body{display:none;padding:12px 16px 14px;font-size:14px;line-height:1.65;color:#444;}
.acc-item.open .acc-body{display:block;}
.acc-body a{color:var(--blue-dk);text-decoration:underline;}
.acc-body .contact-card a{color:var(--white);text-decoration:none;}
.acc-body p+p{margin-top:8px;}
.acc-body h3{font-size:12px;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:0.5px;margin:14px 0 6px;}
.acc-body h3:first-child{margin-top:0;}

/* Reusable sub-heading/body-text pair for content that lives on its own
   page (not inside .acc-body) but wants the same visual language — the
   Ausstellerinformationen sub-pages, mostly. */
.sub-heading{font-size:12px;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:0.5px;margin:16px 0 6px;}
.sub-heading:first-child{margin-top:0;}
.body-text{margin:0;font-size:14px;line-height:1.65;color:#444;}
.body-text+.body-text{margin-top:8px;}
.body-text a{color:var(--blue-dk);text-decoration:underline;}
.acc-body ul{padding-left:18px;margin-top:6px;}
.acc-body li{margin-bottom:6px;}
.acc-body li:last-child{margin-bottom:0;}
.body-list{list-style:disc;padding-left:18px;font-size:14px;line-height:1.65;color:#444;}
.body-list li{margin-bottom:8px;}
.body-list li:last-child{margin-bottom:0;}
/* Topic list (Ausstellerinformationen index → its sub-pages) — same list
   shell as .acc-list/.acc-item, but each row navigates to its own page
   instead of expanding inline, so it gets a chevron instead of the
   accordion's plus icon. */
.topic-list{margin:0 16px;display:flex;flex-direction:column;gap:2px;}
/* font-size 16px, not 13px — synced to match Players Guide, 2026-09
   (desktop gets a further 17px bump, see the reading-size bump block). */
.topic-row{width:100%;text-align:left;background:var(--white);border:1px solid var(--gl);border-radius:var(--r-sm);padding:14px 16px;display:flex;align-items:center;gap:12px;font-size:16px;font-weight:500;color:var(--coal);transition:background 0.1s,border-color 0.15s;}
.topic-row:hover{background:var(--gl);}
.topic-row i:first-child{font-size:18px;color:var(--blue);flex-shrink:0;width:22px;}
/* Ink-offset transform removed 2026-09 — was `translateY(0.18em)` under
   plain FS Industrie (see "Custom-Font-Metriken: FS Industrie" in the
   parent `EBO Projekte/CLAUDE.md`), but this label is now FS Industrie
   Condensed Bold (see "Two title fonts" near the end of this file);
   re-measuring against the live row shows ~0.02em of residual, under 1px.
   Re-measure again (same canvas ink-center method) if this label's font/
   weight/row-height ever changes. */
.topic-row span{flex:1;}
.topic-row .ti-chevron-right{font-size:16px;color:var(--gm);flex-shrink:0;}

/* font-size 14px, not 13px — synced to match Players Guide, 2026-09
   (makes the old desktop-only 14px reading-bump for this selector a
   no-op — left in place anyway, Players Guide's own file keeps the same
   redundant declaration). */
.d-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:6px;font-size:14px;color:#555;}
.d-row:last-child{margin-bottom:0;}
.d-row i{font-size:14px;color:var(--blue);flex-shrink:0;margin-top:1px;}
.d-row img{width:16px;height:16px;flex-shrink:0;margin-top:1px;}
.d-row a{color:var(--blue-dk);text-decoration:underline;}
.info-box{background:var(--gl);border-radius:var(--r-sm);padding:10px 12px;margin-top:10px;}

/* compact info card: icon + name/value/sub, for light (non-contact-card) backgrounds */
.mini-info{display:flex;gap:10px;align-items:flex-start;}
.mini-info img{width:22px;height:22px;flex-shrink:0;margin-top:1px;}
.mini-info-name{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--navy);}
.mini-info-val{font-size:14px;font-weight:600;color:var(--blue-dk);margin-top:2px;}
.mini-info-val a{color:var(--blue-dk);}
.mini-info-sub{font-size:13px;color:#555;margin-top:4px;line-height:1.5;}

/* click-to-enlarge lightbox for inline images (Lagepläne) */
img.zoomable{cursor:zoom-in;}
#lightbox{position:fixed;inset:0;background:rgba(0,0,0,0.85);display:none;align-items:center;justify-content:center;z-index:9998;padding:32px;}
#lightbox.open{display:flex;}
#lightbox img{max-width:90vw;max-height:90vh;border-radius:var(--r-md);}
#lightbox-close{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.15);color:var(--white);font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;}

/* List group */
/* No horizontal margin here (was `0 16px 12px`) — 2026-09 alignment fix.
   Both current usages of `.list-group` (Pläne page, Zufahrt/Lageplan tabs)
   sit inside `#sp-zufahrt`/`#sp-lageplan`, which already carry their own
   horizontal inset (see `#sp-umgebung,#sp-zufahrt,#sp-lageplan` below and
   in the desktop-bump block) — this class's own 16px was compounding with
   that parent inset (32px+16px=48px indent at desktop, vs. every other
   page's 32px), not providing an independent one. If `.list-group` is
   ever used somewhere without an already-inset parent, give that specific
   usage its own margin (e.g. the `.page-pad` utility class) rather than
   restoring this. */
.list-group{margin:0 0 12px;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--gl);}
/* `align-items:center`, not `flex-start` — synced to match Players Guide,
   2026-09. Used to be a deliberately hand-tuned top-alignment model (with
   `margin-top:1px` on the icon, see below) specifically to *avoid* the
   FS-Industrie ink-offset issue centered rows can have — switching back to
   centered means re-checking whether that issue actually shows up here now
   (see the ink-offset note on `.lr-name`/`.lr-sub` below). */
.list-row{background:var(--white);padding:12px 14px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--gl);}
.list-row:last-child{border-bottom:none;}
.list-row>i{font-size:20px;color:var(--blue);flex-shrink:0;}
.lr-text{flex:1;min-width:0;}
/* font-size 16px + font-weight 500, not 13px/600 — synced to match
   Players Guide, 2026-09. */
.lr-name{font-size:16px;font-weight:500;color:var(--navy);}
.lr-sub{font-size:12px;color:var(--gd);margin-top:2px;line-height:1.5;}
.lr-link{font-size:11px;color:var(--blue-dk);white-space:nowrap;font-weight:500;flex-shrink:0;display:inline-flex;align-items:center;padding:8px 4px;margin:-8px -4px;}

/* Info-card grid (Aufbau/Abbau/Anlieferung je Standort) — the original
   "boxes" design, brought back by request in place of the .list-group
   rows it was briefly swapped for. 3 columns → 3×2 for 6 cards per
   Standort, collapsing to 2/1 columns in the responsive block below.
   Fixed-height gold head (icon + one line of label) keeps every card's
   yellow/white split aligned; .info-card is a flex column stretched to
   the row's height (CSS Grid default `align-items:stretch`) with the
   body taking flex:1, so the boundary lines up across a row without
   hand-measuring anything. */
.info-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px;}
.info-card{display:flex;flex-direction:column;height:100%;border:1px solid var(--gl);border-radius:var(--r-sm);overflow:hidden;background:var(--white);box-shadow:0 1px 3px rgba(0,27,65,0.06);}
.info-card__head{flex-shrink:0;height:150px;background:var(--gold);color:var(--navy);font-weight:700;padding:10px 12px;font-size:1.2rem;letter-spacing:0.02em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;}
/* Icon files live in icons/<slug>.svg — onerror hides a missing one
   cleanly instead of showing a broken-image glyph. */
.info-card__icon{width:90px;height:90px;object-fit:contain;display:block;flex-shrink:0;}
.info-card__body{flex:1;min-height:140px;padding:12px;font-size:0.9rem;display:flex;flex-direction:column;gap:4px;}
.info-card__tag{align-self:flex-start;background:var(--bg);color:var(--blue-dk);font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;padding:2px 8px;border-radius:999px;margin-bottom:2px;}
.info-card__primary{margin:0;font-size:0.9rem;}
.info-card__note{color:var(--gd);font-size:0.85rem;margin:0;}
@media(max-width:900px){.info-cards{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.info-cards{grid-template-columns:1fr;}}

/* Sub-tabs */
.subtabs-wrap{margin-top:14px;padding:14px 16px 16px;}
.subtabs{display:flex;overflow-x:auto;scrollbar-width:none;gap:8px;flex-wrap:wrap;}
.subtabs::-webkit-scrollbar{display:none;}
/* Vertical padding split 11.8/10.2 instead of an even 11/11 — same FS
   Industrie ink-offset as the nav (see the "Custom-Font-Metriken: FS
   Industrie" note in the parent `EBO Projekte/CLAUDE.md`), measured here
   with a temporary wrapped-span + canvas ink-center check against each
   pill's own vertical center (no adjacent icon to compare against, unlike
   the nav — a plain text pill still needs this, since FS Industrie's
   reserved descender space throws off *any* vertically-centered box, not
   just ones next to a fixed icon). Padding, not `transform`, because a
   transform would drag the pill's own border/background down with the
   text, leaving a gap at the bottom instead of just re-centering the ink;
   redistributing the same total (22px) between top/bottom shifts the text
   within a same-size, still-precisely-centered pill. Measured diff varied
   ~0.4–1.8px across the 5 tabs (Foyer/Garderobengang/Umgebungsplan/
   Zufahrt/Lageplan) — used the ~0.8px average rather than a per-tab value,
   since they're one visual set and must line up with each other. */
/* padding 7px 16px + font-size 15px, not 11.8/10.2px + 12px — synced to
   match Players Guide, 2026-09. Uniform padding, not the old asymmetric
   11.8px/10.2px split (that was this file's own ink-offset fix for the
   smaller 12px size under plain FS Industrie — needs re-measuring fresh
   at this new size/font rather than assuming it still applies; see the
   ink-offset note below this rule). */
.stab{flex-shrink:0;padding:7px 16px;font-size:15px;font-weight:600;color:var(--gd);background:var(--white);border:1.5px solid var(--gl);border-radius:100px;cursor:pointer;white-space:nowrap;transition:all 0.15s;}
.stab.active{background:var(--blue);color:var(--white);border-color:var(--blue);}
.stab:hover:not(.active){background:var(--gl);color:var(--navy);border-color:var(--gm);}
.subpanel{display:none;}
.subpanel.active{display:block;}

/* Buttons (Directions/Website-style actions) */
/* `flex:1`/`display:block`/tighter padding, not `inline-block`/8px 14px —
   synced to match Players Guide exactly, 2026-09. Only takes effect inside
   a flex row (`.info-actions`) — a lone button (e.g. Hausordnung's single
   PDF download) stretches to fill the row's width, same as it would in
   Players Guide's equivalent single-button contexts. */
.p-btn{flex:1;padding:8px 6px;border-radius:var(--r-sm);font-size:13px;font-weight:500;text-align:center;background:var(--gl);color:var(--navy);display:block;transition:background 0.15s;}
.p-btn:hover{background:var(--gm);}
.p-btn.pri{background:var(--blue);color:var(--white);}
.p-btn.pri:hover{background:var(--blue-dk);}
.info-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}

/* Notice / warning box (dates not yet confirmed etc.) — same visual
   language as .info-box but gold-accented since it flags something the
   reader should actively notice, not just neutral detail. */
.notice{background:#FFF7DA;border:1px solid var(--gold);border-radius:var(--r-sm);padding:12px 14px;margin:14px 16px 0;}
.notice strong{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--navy);margin-bottom:4px;}
.notice p{font-size:13px;line-height:1.6;color:#444;}

/* Data tables (Öffnungszeiten, Zusatzpakete-Preise) — Players Guide has
   no native table component (no page needs one), so this is a small,
   token-matched addition rather than a ported piece. Collapses to
   label/value cards on mobile, same spirit as the rest of the page. */
.table-wrap{margin:0 16px 12px;border:1px solid var(--gl);border-radius:var(--r-md);overflow:hidden;background:var(--white);}
.table-wrap table{width:100%;border-collapse:collapse;font-size:13px;}
.table-wrap caption{text-align:left;padding:10px 14px;background:var(--bg);border-bottom:1px solid var(--gl);color:var(--gd);font-size:11px;font-weight:600;}
.table-wrap th,.table-wrap td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--gl);}
.table-wrap th{background:var(--gl);color:var(--navy);font-size:11px;text-transform:uppercase;letter-spacing:0.4px;}
.table-wrap tbody tr:last-child td{border-bottom:none;}
.table-wrap tbody tr:nth-child(even) td{background:var(--bg);}

/* Numbers-style compact rows, reused for Öffnungszeiten mobile view isn't
   needed — real <table> stays a table at all widths, just scrolls
   horizontally on narrow screens rather than card-collapsing, since the
   Öffnungszeiten table's 7 columns don't map cleanly onto one label/value
   pair the way Players Guide's num-card rows do. */
@media(max-width:520px){
  .table-wrap{overflow-x:auto;margin-left:16px;margin-right:16px;}
  .table-wrap table{min-width:640px;}
}

/* Footer — background is --blue-dk rather than plain --blue: the smaller
   footer text (12px, well under the "large text" threshold) needs 4.5:1,
   and even solid white on plain --blue only just clears that with zero
   margin. --blue-dk gives every opacity level below real headroom. */
footer{background:var(--blue-dk);padding:40px 20px 24px;}
.footer-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;padding-bottom:24px;margin-bottom:20px;border-bottom:1px solid rgba(255,255,255,0.15);}
.footer-brand{display:flex;align-items:center;gap:14px;}
.footer-brand img{width:64px !important;height:auto !important;object-fit:fill !important;display:block;}
.footer-brand-meta{display:flex;flex-direction:column;gap:3px;}
.footer-brand-meta strong{font-size:13px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--white);}
.footer-brand-meta span{font-size:12px;color:rgba(255,255,255,0.8);}
.footer-bottom{display:flex;flex-direction:column;gap:8px;font-size:12px;color:rgba(255,255,255,0.92);}
.footer-bottom a{color:var(--white);font-weight:600;text-decoration:underline;}
.footer-copy{color:rgba(255,255,255,0.8);}

/* ══════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
══════════════════════════════════════════════ */
@media(min-width:600px){
  .tiles-grid{grid-template-columns:repeat(3,1fr);}
  .tile-card.wide{grid-column:span 3;}
}

@media(max-width:899px){
  .page.active{flex:1;}
}

@media(min-width:900px){
  #mob-hdr,#mob-search-wrap,#nav-overlay,#nav-drawer{display:none!important;}
  #topbar{display:flex;}
  #sidebar{display:block;}
  .page-title-row .back-btn{display:none;}

  .page-title-row{padding-left:32px;padding-right:32px;}
  .page-title{font-size:32px;}
  .sec-lbl{margin-left:32px;margin-right:32px;}
  .acc-list{margin-left:32px;margin-right:32px;}
  .contact-card{margin-left:32px;margin-right:32px;}
  .notice{margin-left:32px;margin-right:32px;}
  .table-wrap{margin-left:32px;margin-right:32px;}
  .subtabs-wrap{margin-left:32px;margin-right:32px;}
  #sp-umgebung,#sp-zufahrt,#sp-lageplan{margin-left:32px;margin-right:32px;}
  /* `.topic-list` was missing from this list entirely, 2026-09 fix — the
     Ausstellerinformationen index page's topic links sat flush at 16px
     while `.contact-card`/`.notice`/`.sec-lbl` above them on the same page
     all bumped to 32px, a visible left-edge mismatch. `.list-group` was
     removed from this list the same pass, for the opposite reason — see
     the comment on `.list-group`'s own rule above. */
  .topic-list{margin-left:32px;margin-right:32px;}
  /* Generic horizontal-inset utility, 2026-09 — replaces a scatter of
     one-off inline `style="margin:… 16px …"` / `style="padding:… 16px …"`
     on plain paragraphs/wrapper-divs/`.info-cards` across most content
     pages, none of which were ever bumped to 32px here, so they sat 16px
     closer to the edge than every "real" component class on the same page
     (found by measuring actual rendered positions, not just reading the
     CSS — a `.page-title`/`.table-wrap` pair a few lines apart in the DOM
     can still end up misaligned on screen if only one of them is in this
     block). Apply to any new plain text/wrapper element that needs to
     line up with the rest of a page's content at both widths, instead of
     another inline style. */
  .page-pad{margin-left:32px;margin-right:32px;}

  /* Used to be a two-tone blue/--bg gradient matching the sidebar's old
     blue background — sidebar is white now, so a flat --bg behind
     everything is enough (the sidebar paints its own white background and
     border-right regardless of how tall its content is). */
  #app{background:var(--bg);}
  footer{padding:56px 40px 32px;}

  /* Home now matches every other page's grey `--bg` background instead of
     standing out as the one white page — no `background:var(--white))`
     override any more (2026-09, synced to Players Guide). Still needs its
     own min-height so the column reaches full height on short content. */
  #page-home{min-height:100%;}

  /* ── hero: Stadthalle_CC.jpg under a navy scrim, bottom-aligned text —
     larger desktop size, re-specifies every property from the mobile-size
     base rule above so nothing from there leaks through. Synced to match
     Players Guide's current design, 2026-09 (was a plain white card
     before — see the base `.desk-welcome` rule above for the fuller
     history). */
  .desk-welcome{
    flex-direction:column;justify-content:flex-end;
    min-height:380px;
    margin:32px 40px 0;
    border-radius:var(--r-lg);
    overflow:hidden;
    padding:40px;
    background:
      linear-gradient(180deg, rgba(0,27,65,0.15) 0%, rgba(0,27,65,0.35) 55%, rgba(0,27,65,0.88) 100%),
      url('images/Stadthalle_CC.jpg') center/cover no-repeat;
    position:relative;
  }
  .desk-welcome .dw-eyebrow{
    font-size:14px;font-weight:700;text-transform:uppercase;
    letter-spacing:2px;color:var(--gold);margin-bottom:12px;
  }
  .desk-welcome h1{
    font-size:40px;font-weight:700;color:var(--white);
    line-height:1.2;margin-bottom:14px;
  }
  .desk-welcome h1 span{color:var(--gold);}
  .desk-welcome>p{
    font-size:14px;color:var(--white);line-height:1.75;
    max-width:560px;margin-bottom:28px;
  }
  .desk-welcome-cards{display:flex;gap:12px;flex-wrap:wrap;}
  /* Frosted-glass chips over the photo, larger desktop size. */
  .dwc{
    display:flex;align-items:center;gap:10px;
    background:rgba(255,255,255,0.14);
    border:1px solid rgba(255,255,255,0.28);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-radius:var(--r-md);padding:10px 18px;
    font-size:13px;font-weight:500;color:var(--white);
  }
  .dwc i{font-size:18px;color:var(--gold);}

  /* ── quick-access grid, below the hero: 3 columns, `.wide` (Hausordnung,
     the trailing 4th tile) spans the full row underneath — matches
     Players Guide's pattern for a lone leftover tile. Shown at desktop
     now too, 2026-09 (used to be mobile-only, hidden here before). */
  .tiles-label{display:block;padding:28px 40px 12px;}
  .tiles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 40px 40px;}
  .tile-card.wide{grid-column:span 3;}
}

/* ── Desktop-only reading-size bump ──────────────────────────────
   Mobile-first sizes below are tuned for a compact phone screen; on
   desktop there's no space constraint forcing text that small, so bump
   the core *reading* content (not micro-labels like .sec-lbl/.cc-name,
   which are short eyebrow-style tags, not something anyone reads at
   length) by ~1px for comfier reading with all that extra room. */
@media(min-width:900px){
  .acc-body{font-size:15px;}
  .acc-body h3{font-size:13px;}
  .d-row{font-size:14px;}
  /* 17px, not 14px — synced to match Players Guide's own desktop-bump
     value for these two selectors, 2026-09 (base sizes were also bumped,
     see `.lr-name`/`.acc-btn`/`.topic-row` above/below). */
  .lr-name{font-size:17px;}
  .lr-sub{font-size:13px;}
  .table-wrap table{font-size:14px;}
  .notice p{font-size:14px;}
  .acc-btn{font-size:17px;}
  .topic-row{font-size:17px;}
  .body-text{font-size:15px;}
  .body-list{font-size:15px;}
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;}}

/* Skip link (a11y) */
.skip-link{position:absolute;top:-40px;left:8px;background:var(--navy);color:var(--white);padding:10px 16px;border-radius:var(--r-md);font-size:13px;font-weight:600;z-index:1000;transition:top 0.15s;}
.skip-link:focus{top:8px;}

/* ── Visible keyboard focus ───────────────────────────────────────
   No component below had its own :focus style, so every interactive
   element relied on the browser's default outline. That default is
   often a blue ring, which can all but disappear on this site's many
   solid-blue surfaces (nav items, active tabs, the header). This makes
   focus visibility explicit and consistent everywhere, keyed off
   :focus-visible so it only shows for keyboard use, not every mouse
   click. Gold on the blue chrome (nav/topbar/tabs/lightbox), dark blue
   everywhere else (white cards, tables, footer, .back-btn — no longer
   on a blue banner since the .sec-hdr → .page-title-row change). */
:focus-visible{outline:2px solid var(--blue-dk);outline-offset:2px;}
/* #sidebar deliberately excluded here — it's a light/white surface now
   (see the sidebar redesign above), so it wants the same dark-blue ring
   as every other light surface, not the gold reserved for blue chrome. */
#sidebar .nav-item--badge.active:focus-visible,
#sidebar .nav-subitem.active:focus-visible{outline-color:var(--white);}
#nav-drawer :focus-visible,
#topbar :focus-visible,
#mob-hdr :focus-visible,
.stab.active:focus-visible,
footer :focus-visible,
#lightbox :focus-visible{
  outline-color:var(--gold);
}
img.zoomable:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;}

/* ── Two title fonts — FS Industrie Condensed (2026-09) ──────────────────
   Ported from Players Guide, which added `FS Industrie Condensed`
   (Bold 700 for titles/nav/labels, Light 300 for nested sub-nav only) on
   top of the plain `FS Industrie` this file already had. Grouped into two
   selector-list rules, same as Players Guide, so this stays a single place
   to extend — add a new selector to the matching group rather than
   hand-editing `font-family` in its own rule. Neither group touches
   `font-size` — Condensed is narrower, not smaller. Body copy
   (`.acc-body`, `.d-row`, `.body-text`, `.sub-heading`, table cells, etc.)
   is deliberately excluded, same as Players Guide — stays plain
   `FS Industrie`. */
#topbar-date,
#mob-date,
.nav-item--badge span,
#nav-drawer .nav-item span,
.page-title,
.tiles-label,
.tc-label,
.cc-name,
.cc-val,
.sec-lbl,
.topic-row span,
.stab,
.dwc span{
  font-family:'FS Industrie Condensed','FS Industrie',sans-serif;
  font-weight:700;
}
#sidebar .nav-subitem,
#nav-drawer .nav-subitem{
  font-family:'FS Industrie Condensed','FS Industrie',sans-serif;
  font-weight:300;
}