/* District Utility: use-case stations, interactive tools and the legal archive. */
:root { --du-line: rgba(64,217,255,.22); --du-line-hot: rgba(64,217,255,.58); --du-red: #ff4b2b; --du-cyan: #35d8ff; --du-panel: rgba(3,14,22,.9); }

main[data-station] .page-hero {
  position: relative; isolation: isolate; overflow: hidden; min-height: 28rem;
  display: grid; align-items: end; margin: 0 0 1rem; padding: clamp(5rem,10vw,8rem) clamp(1.25rem,5vw,5rem) clamp(2rem,5vw,4rem);
  border: 1px solid var(--du-line); background:
    linear-gradient(90deg,rgba(1,8,13,.98) 0 32%,rgba(1,8,13,.66) 62%,rgba(1,8,13,.9)),
    url('/assets/district/city-map-1600.webp') center 46%/cover no-repeat;
}
main[data-station] .page-hero::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.46; background: repeating-linear-gradient(90deg,transparent 0 79px,rgba(53,216,255,.07) 80px), linear-gradient(180deg,transparent 52%,rgba(53,216,255,.08)); }
main[data-station] .page-hero::after { content:attr(data-station-label); position:absolute; right:1.5rem; top:1.25rem; color:rgba(255,255,255,.25); font:700 clamp(2.8rem,8vw,8rem)/1 monospace; letter-spacing:.08em; }
.page-hero-inner { position:relative; z-index:1; max-width:70rem; }
.ph-eyebrow { display:block; color:var(--du-cyan); font:700 .76rem/1.2 monospace; letter-spacing:.18em; text-transform:uppercase; }
.ph-title { max-width:18ch; margin:.7rem 0 1rem; color:#f4f8fb; font-size:clamp(2.7rem,6vw,6.4rem); line-height:.91; letter-spacing:-.055em; }
.ph-title em,.ph-title .serif-em { color:inherit !important; font-family:inherit !important; font-style:normal !important; }
.ph-sub { max-width:64ch; margin:0; color:#bed0dc; font-size:clamp(1rem,1.5vw,1.22rem); line-height:1.65; }

/* Each station is a place, not a reskinned template. */
main[data-station="Watcher"] .page-hero { background-position:18% 56%; background-image:linear-gradient(90deg,#02090f 5%,rgba(2,9,15,.62),rgba(3,20,29,.88)),url('/assets/district/city-map-1600.webp'); }
main[data-station="Manga-Reader"] .page-hero { background-position:74% 38%; background-image:linear-gradient(90deg,#070b0e 2%,rgba(7,11,14,.6),rgba(30,18,8,.88)),url('/assets/district/city-map-1200.webp'); }
main[data-station="Cosplayer"] .page-hero { background-position:45% 74%; background-image:linear-gradient(90deg,#090707 2%,rgba(9,7,7,.58),rgba(40,10,6,.86)),url('/assets/district/city-map-800.webp'); }
main[data-station="Voice"] .page-hero { background-position:84% 58%; background-image:radial-gradient(circle at 78% 48%,rgba(53,216,255,.2),transparent 22%),linear-gradient(90deg,#02090f 10%,rgba(2,9,15,.56),rgba(3,18,29,.9)),url('/assets/district/city-map-1600.webp'); }
main[data-station="Watcher"] .page-hero::before { animation:du-studio-scan 14s linear infinite; }
main[data-station="Manga-Reader"] .page-hero::before { background:repeating-linear-gradient(0deg,transparent 0 47px,rgba(255,177,62,.08) 48px); }
main[data-station="Cosplayer"] .page-hero::before { background:linear-gradient(115deg,transparent 0 56%,rgba(255,75,43,.1) 57%,transparent 58%); animation:du-neon-pass 10s ease-in-out infinite; }
main[data-station="Voice"] .page-hero::before { background:repeating-radial-gradient(circle at 78% 48%,transparent 0 44px,rgba(53,216,255,.08) 45px,transparent 46px 72px); animation:du-radio 8s ease-out infinite; }
@keyframes du-studio-scan { to { transform:translateX(80px); } }
@keyframes du-neon-pass { 50% { transform:translateX(-12%); opacity:.7; } }
@keyframes du-radio { 50% { opacity:.18; transform:scale(1.025); } }
.du-subnav { position:sticky; top:0; z-index:12; display:flex; align-items:center; gap:1px; overflow:auto; margin:0 0 1rem; padding:0; border:1px solid var(--du-line); background:rgba(2,10,16,.95); backdrop-filter:blur(14px); scrollbar-width:thin; }
.du-subnav__label,.du-subnav a { flex:0 0 auto; padding:.8rem 1rem; font:700 .68rem/1 monospace; letter-spacing:.08em; text-transform:uppercase; }
.du-subnav__label { color:var(--du-red); border-right:1px solid var(--du-line); }.du-subnav a { color:#aebfc9; text-decoration:none; border-right:1px solid rgba(64,217,255,.1); }
.du-subnav a:hover,.du-subnav a:focus-visible { color:#001017; background:var(--du-cyan); outline:none; }

main[data-station] .section, main[data-station] .bp { position:relative; margin:1rem 0; padding:clamp(1.2rem,3vw,2.6rem); border:1px solid var(--du-line); background:linear-gradient(135deg,rgba(4,18,28,.96),rgba(2,10,16,.98)); }
main[data-station] .section::before, main[data-station] .bp::before { content:""; position:absolute; width:3rem; height:1px; left:-1px; top:-1px; background:var(--du-red); box-shadow:0 0 14px var(--du-red); }
.press-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--du-line); border:1px solid var(--du-line); }
.press-card { min-width:0; padding:clamp(1.2rem,2.5vw,2rem); background:#06121a; border:0; border-radius:0; }
.press-card-wide { grid-column:1/-1; }
.press-card h2 { margin:0 0 1rem; font:700 clamp(1rem,2vw,1.35rem)/1.2 monospace; letter-spacing:.04em; text-transform:uppercase; color:#fff; }
.press-list { display:grid; gap:.8rem; padding:0; margin:0; list-style:none; }
.press-list li { position:relative; padding-left:1.25rem; color:#b9cad4; line-height:1.55; }
.press-list li::before { content:""; position:absolute; left:0; top:.65em; width:.45rem; height:.45rem; border:1px solid var(--du-cyan); transform:rotate(45deg); }
.press-quote { margin:0; padding:1rem 1.2rem; border-left:2px solid var(--du-cyan); color:#d8e6ee; font-size:clamp(1rem,2vw,1.3rem); line-height:1.65; }
.stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--du-line); background:var(--du-line); gap:1px; }
.stat { min-width:0; padding:1.4rem; background:#05121a; }
.stat-num { display:block; color:var(--du-cyan); font:700 clamp(1.6rem,4vw,3.4rem)/1 monospace; }
.stat-label { display:block; margin:.7rem 0; color:white; font:700 .78rem/1.3 monospace; text-transform:uppercase; letter-spacing:.08em; }
.stat-desc { color:#9eb1bd; font-size:.9rem; line-height:1.5; }

/* Functional stations */
.mood-wrap,.trivia-wrap,.glossar-search-wrap,.compare-table-wrap { border:1px solid var(--du-line); background:#031019; box-shadow:0 28px 80px rgba(0,0,0,.25); }
.mood-pick,.mood-results,.trivia-screen { padding:clamp(1.2rem,4vw,3rem); }
.mood-chips,.trivia-categories { display:flex; flex-wrap:wrap; gap:.55rem; }
.mood-chips button,.trivia-cat-btn,.ai-btn,.privacy-btn { min-height:44px; border:1px solid var(--du-line-hot); border-radius:2px; background:#071923; color:#dcebf2; padding:.7rem 1rem; font:700 .76rem/1 monospace; letter-spacing:.04em; }
.mood-chips button:hover,.trivia-cat-btn:hover,.trivia-cat-btn.is-active,.ai-btn:hover,.privacy-btn:hover { color:#001017; background:var(--du-cyan); box-shadow:0 0 20px rgba(53,216,255,.22); }
.trivia-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--du-line); }
.trivia-options button { min-height:5rem; border:0; border-radius:0; background:#06141d; color:#eef7fa; text-align:left; padding:1rem; }
.glossar-search { width:100%; min-height:3.4rem; padding:0 1rem; border:0; border-bottom:1px solid var(--du-line-hot); background:#06141d; color:white; font:600 1rem monospace; }
.glossar-az-nav { display:flex; flex-wrap:wrap; gap:1px; padding:.8rem; background:rgba(53,216,255,.08); }
.gl-az-link { display:grid; place-items:center; width:2.2rem; height:2.2rem; border:1px solid var(--du-line); color:#9bb0bc; text-decoration:none; font:700 .75rem monospace; }
.gl-az-active:hover { color:#001017; background:var(--du-cyan); }
.glossar-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--du-line); }
.glossar-group { padding:1.25rem; background:#04131c; }
.glossar-letter { color:var(--du-red); font:700 1.5rem monospace; }
.glossar-term { display:grid; grid-template-columns:minmax(7rem,.45fr) 1fr; gap:1rem; padding:.8rem 0; border-top:1px solid rgba(64,217,255,.12); }
.glossar-term dt { color:#eef7fa; font-weight:700; }.glossar-term dd { margin:0; color:#aebfc9; line-height:1.5; }
.compare-table { width:100%; border-collapse:collapse; font-size:.9rem; }
.compare-table th { position:sticky; top:4rem; z-index:2; background:#081923; color:var(--du-cyan); font:700 .74rem monospace; letter-spacing:.04em; }
.compare-table th,.compare-table td { padding:.85rem; border:1px solid rgba(64,217,255,.13); text-align:left; }
.compare-table tbody tr:hover { background:rgba(53,216,255,.06); }

/* Privacy control desk */
.privacy-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; border:1px solid var(--du-line); background:var(--du-line); }
.privacy-card { min-width:0; padding:1.35rem; border:0; border-radius:0; background:#05131c; }
.privacy-card-head { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.8rem; border-bottom:1px solid var(--du-line); padding-bottom:.9rem; }
.privacy-emoji { display:grid; place-items:center; width:2.5rem; height:2.5rem; border:1px solid var(--du-line-hot); background:#061b26; }
.privacy-card h2 { margin:0; font:700 .95rem monospace; text-transform:uppercase; }
.privacy-status { color:#7ef0bd; font:700 .7rem monospace; text-transform:uppercase; }.privacy-status.is-off { color:#9bacb5; }
.privacy-card p { color:#aebfc9; line-height:1.55; }.privacy-actions { display:flex; flex-wrap:wrap; gap:.5rem; }
.privacy-btn.is-danger { border-color:rgba(255,75,43,.55); }.privacy-btn.is-danger:hover { background:var(--du-red); color:white; }

/* Legal archive */
main[data-district="legal"].wrap { max-width:86rem; padding-inline:clamp(1rem,4vw,3rem); }
.du-archive-hero { position:relative; min-height:18rem; display:flex; flex-direction:column; justify-content:flex-end; margin:2rem 0 0; padding:clamp(1.2rem,4vw,3rem); overflow:hidden; border:1px solid var(--du-line); background:linear-gradient(90deg,rgba(2,10,15,.98),rgba(2,10,15,.62),rgba(2,10,15,.92)),url('/assets/district/city-map-1200.webp') 70% 70%/cover; }
.du-archive-hero::before { content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(90deg,transparent 0 119px,rgba(53,216,255,.055) 120px); animation:du-archive-scan 18s linear infinite; }
.du-archive-hero span,.du-archive-hero small { position:relative; color:#8fa5b1; font:700 .68rem monospace; letter-spacing:.12em; text-transform:uppercase; }.du-archive-hero span { color:var(--du-red); }
.du-archive-hero b { position:relative; margin:.65rem 0; color:#f4f9fb; font:700 clamp(2.3rem,7vw,6.2rem)/.9 monospace; letter-spacing:-.06em; text-transform:uppercase; }
@keyframes du-archive-scan { to { background-position:120px 0; } }
main[data-district="legal"] > h1 { max-width:18ch; margin:clamp(4rem,8vw,7rem) 0 2rem; font-size:clamp(2.6rem,6vw,5.5rem); line-height:.94; }
main[data-district="legal"].wrap > p:first-of-type { max-width:72ch; color:#b8cad4; font-size:1.05rem; line-height:1.65; }
main[data-district="legal"].wrap > h2 { margin:2.2rem 0 0; padding:1.1rem 1.2rem; border:1px solid var(--du-line); border-bottom:0; background:#071823; color:#f5fafc; font:700 1rem monospace; letter-spacing:.04em; }
main[data-district="legal"].wrap > h2 ~ p, main[data-district="legal"].wrap > h2 ~ ul { max-width:none; }
main[data-district="legal"].wrap > p, main[data-district="legal"].wrap > ul, main[data-district="legal"].wrap > ol, main[data-district="legal"] .legal-card { margin-block:0; padding:1.1rem 1.2rem; border-inline:1px solid var(--du-line); background:rgba(4,17,25,.76); color:#afc0c9; line-height:1.7; }
main[data-district="legal"] a { text-underline-offset:.2em; }

/* Distinct utility landmarks */
main[data-station="App Download"] .bk,main[data-station="Web live"] .bk { background:linear-gradient(90deg,rgba(1,10,16,.98),rgba(2,25,36,.46)),url('/assets/district-heroes/download-station-v1.webp') center 51%/cover; }
main[data-station="Sicherheit"] .bk { background:linear-gradient(90deg,rgba(1,13,15,.98),rgba(5,29,25,.42)),url('/assets/district-heroes/values-shrine-v1.webp') center 48%/cover; }
main[data-station="Vergleich"] .bk { background:linear-gradient(90deg,rgba(2,9,15,.98),rgba(4,26,37,.45)),url('/assets/district-heroes/features-lab-v1.webp') center 46%/cover; }
main[data-station="Glossar"] .bk { background:linear-gradient(90deg,rgba(4,8,12,.98),rgba(8,28,36,.44)),url('/assets/district-heroes/archetype-temple-v1.webp') 62% 50%/cover; }
main[data-station="Mood"] .bk { background:linear-gradient(90deg,rgba(1,10,16,.98),rgba(8,31,39,.42)),url('/assets/district-heroes/archetype-temple-v1.webp') 78% 52%/cover; }
main[data-station="Trivia"] .bk { background:linear-gradient(90deg,rgba(8,6,5,.98),rgba(30,14,10,.42)),url('/assets/district-heroes/archetype-temple-v1.webp') 45% 50%/cover; }
main[data-station="Lost Station"] .bk { background:linear-gradient(90deg,rgba(8,6,6,.98),rgba(27,10,8,.5)),url('/assets/district-heroes/faq-terminal-v1.webp') 72% 50%/cover; }
main[data-station="App Download"] .bk,main[data-station="Web live"] .bk,main[data-station="Sicherheit"] .bk,main[data-station="Vergleich"] .bk,main[data-station="Glossar"] .bk,main[data-station="Mood"] .bk,main[data-station="Trivia"] .bk,main[data-station="Lost Station"] .bk { min-height:20rem; align-items:end; background-color:#031019; }

@media (max-width:800px) {
  main[data-station] .page-hero { min-height:24rem; padding:6rem 1rem 2rem; background-position:62% center; }
  .press-grid,.privacy-grid,.glossar-list,.stats-grid { grid-template-columns:1fr; }
  .press-card-wide { grid-column:auto; }.trivia-options { grid-template-columns:1fr; }
  .glossar-term { grid-template-columns:1fr; gap:.25rem; }.compare-table-wrap { overflow:auto; }
  .compare-table { min-width:48rem; }.ph-title { font-size:clamp(2.5rem,13vw,4.5rem); }
  .du-subnav { top:0; margin-inline:-.25rem; }
}
@media (prefers-reduced-motion:reduce) { main[data-station] .page-hero::before { display:none; } .du-archive-hero::before { animation:none; } }