/* Sound Loud · DJ-Technik-Schule (Albert 21.10.2026): /oborudovanie-dj/, /uz/dj-texnikasi/, /en/dj-gear-guide/ — erzeugt von
   tools/gear-page.mjs, App site/gear/gear.js. Buehnen-Optik wie die Website: fast schwarz, eine Limette, Unbounded/Onest/JetBrains Mono
   (Schriften aus /assets/fonts wie die Hauptseite). Handy 360 px zuerst; im Unterricht Vollbild mit grosser Schrift. */
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(/assets/fonts/JetBrainsMono-cyrillic-676ac43d.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(/assets/fonts/JetBrainsMono-latin-340e696a.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/Onest-cyrillic-9b144952.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/Onest-latin-324d4be3.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:700 800;font-display:swap;src:url(/assets/fonts/Unbounded-cyrillic-3e88c0f8.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:700 800;font-display:swap;src:url(/assets/fonts/Unbounded-latin-aef5c246.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --bg:#060607; --panel:#0e0e10; --surface:#141417; --surface2:#1c1c20; --line:rgb(242 242 240 / .1); --line2:rgb(242 242 240 / .2);
  --text:#f2f2f0; --muted:#9a9ca3; --faint:#5d5f66; --accent:#d2ee52; --on-accent:#060607; --accent-soft:rgb(210 238 82 / .14);
  --ok:#3ed27f; --bad:#ff6b6b;
  --fd:"Unbounded","Arial Black",system-ui,sans-serif; --fb:"Onest",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --fm:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.55 var(--fb);-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
h1,h2,h3{font-family:var(--fd);font-weight:700;letter-spacing:-.01em;line-height:1.15;margin:0;text-wrap:balance}
h1{font-size:clamp(26px,5vw,44px)} h2{font-size:clamp(19px,3vw,26px)} h3{font-size:16px}
p{margin:0}
.g-wrap{max-width:1200px;margin:0 auto;padding:0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px))}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Kopf */
.g-top{position:sticky;top:0;z-index:20;background:rgb(6 6 7 / .92);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.g-top .g-wrap{display:flex;align-items:center;gap:14px;min-height:56px;padding-top:env(safe-area-inset-top, 0px)}
.g-logo{font:800 18px/1 var(--fd);color:var(--text);text-decoration:none;white-space:nowrap}
.g-logo i{font-style:normal;color:var(--accent)}
.g-nav{display:flex;gap:14px;margin-left:auto;align-items:center;flex-wrap:wrap}
.g-nav a{color:var(--muted);text-decoration:none;font-size:14px}
.g-nav a:hover{color:var(--text)}
.g-lang{display:flex;gap:4px}
.g-lang a{font:500 12px/1 var(--fm);padding:6px 8px;border-radius:7px;border:1px solid var(--line);color:var(--muted);text-decoration:none}
.g-lang a[aria-current=true]{color:var(--on-accent);background:var(--accent);border-color:transparent}
.g-cta{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 16px;border-radius:10px;background:var(--accent);color:var(--on-accent)!important;font-weight:600;text-decoration:none;white-space:nowrap}
@media (max-width:760px){.g-nav .g-hide{display:none}}
@media (max-width:480px){.g-nav{flex-wrap:nowrap;gap:8px}.g-nav .g-cta{display:none}.g-logo{font-size:16px}}

/* Seitenkopf, Brotkrumen */
.g-hero{padding:28px 0 8px;display:grid;gap:12px;max-width:820px}
.g-crumbs{font:500 12px/1.4 var(--fm);color:var(--muted);display:flex;gap:6px;flex-wrap:wrap}
.g-crumbs a{color:var(--muted);text-decoration:none}
.g-lead{font-size:18px;color:#d6d7db}
.g-kick{font:500 12px/1 var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}

/* Geraete-Kacheln (Uebersicht) */
.g-devs{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin:22px 0}
.g-dev{display:grid;gap:8px;padding:16px;border-radius:16px;border:1px solid var(--line);background:var(--surface);color:var(--text);text-decoration:none;min-width:0}
.g-dev:hover{border-color:var(--accent)}
.g-dev .t{font:700 17px/1.2 var(--fd)}
.g-dev .s{color:var(--muted);font-size:14px}
.g-dev .n{font:500 12px var(--fm);color:var(--accent)}
.g-dev svg{width:100%;height:auto;display:block;border-radius:10px;background:radial-gradient(120% 90% at 50% 20%,#17181c,#0a0a0c)}

/* Werkzeug */
.g-tool{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:14px;display:grid;gap:12px;margin:18px 0}
.g-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.g-chips{display:flex;gap:6px;flex-wrap:wrap}
.g-chip{font:600 13px/1 var(--fb);padding:9px 13px;border-radius:999px;border:1px solid var(--line2);background:var(--surface);color:var(--text);cursor:pointer;min-height:38px;text-decoration:none;display:inline-flex;align-items:center}
.g-chip[aria-pressed=true],.g-chip[aria-current=page]{background:var(--accent);color:var(--on-accent);border-color:transparent}
.g-modes .g-chip{font:500 12px/1 var(--fm);letter-spacing:.05em;text-transform:uppercase}
.g-stage{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:12px;align-items:start}
.g-view{position:relative;background:radial-gradient(120% 90% at 50% 20%,#17181c,#0a0a0c);border:1px solid var(--line);border-radius:16px;padding:8px;min-width:0;touch-action:manipulation}
.g-view svg{display:block;width:100%;height:auto;max-height:70vh}
.g-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;display:grid;gap:12px;min-width:0;align-content:start}
.g-tag{font:500 11px/1.3 var(--fm);color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.g-name{font:600 21px/1.15 var(--fm);color:var(--accent);letter-spacing:.02em;overflow-wrap:anywhere}
.g-loc{font:700 18px/1.2 var(--fd)}
.g-lvl{display:inline-flex;gap:6px;align-items:center;font:500 11px/1 var(--fm);padding:5px 8px;border-radius:999px;background:var(--surface2);color:var(--muted);width:max-content}
.g-card dl{display:grid;gap:10px;margin:0}
.g-card dt{font:600 11.5px/1 var(--fb);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.g-card dd{margin:5px 0 0;font-size:15px}
.g-tip{background:var(--accent-soft);border-radius:10px;padding:10px 12px;font-size:14.5px}
.g-tip b{color:var(--accent)}
.g-rel{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.g-rel button{font:500 12px var(--fm);padding:6px 9px;border-radius:8px;border:1px solid var(--line2);background:var(--surface2);color:var(--text);cursor:pointer}
.g-list{display:grid;gap:2px;max-height:420px;overflow:auto;padding-right:4px}
.g-list h4{margin:10px 0 4px;font:600 11px/1 var(--fm);color:var(--faint);text-transform:uppercase;letter-spacing:.08em}
.g-list button{display:grid;grid-template-columns:28px 1fr;gap:8px;align-items:baseline;text-align:left;padding:7px 8px;border-radius:8px;border:0;background:transparent;color:var(--text);cursor:pointer;font-size:14px}
.g-list button:hover,.g-list button.on{background:var(--surface2)}
.g-list i{font:500 11px var(--fm);font-style:normal;color:var(--accent)}
.g-list small{color:var(--muted);font:500 11px var(--fm);display:block}
.g-nav2{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.g-btn{font:600 14px/1 var(--fb);min-height:44px;padding:0 16px;border-radius:12px;border:1px solid var(--line2);background:var(--surface2);color:var(--text);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.g-btn.acc{background:var(--accent);color:var(--on-accent);border-color:transparent}
.g-prog{height:4px;border-radius:2px;background:var(--surface2);overflow:hidden}
.g-prog i{display:block;height:100%;background:var(--accent);transition:width .2s}
.g-fb{font-size:15px;font-weight:600}
.g-fb.ok{color:var(--ok)} .g-fb.bad{color:var(--bad)}
.g-filter{display:flex;gap:6px;flex-wrap:wrap}

/* Zeichnung */
.dl{fill:#b9bac0;font:500 9px var(--fm);letter-spacing:.03em;pointer-events:none}
.dzl{fill:#6c6e75;font:600 12px var(--fm);letter-spacing:.12em;text-transform:uppercase;pointer-events:none}
.hs{cursor:pointer}
.hs .ring{fill:transparent;stroke:transparent;stroke-width:2.6}
.hs:hover .ring,.hs:focus .ring{stroke:var(--accent)}
.hs.on .ring{stroke:var(--accent);fill:rgb(210 238 82 / .18)}
.hs.on .hs .num{fill:var(--on-accent);font:700 11px var(--fm)}
.img .hs .numb{fill:var(--accent);stroke:#060607;stroke-width:1.5}
.img .hs.on .ring{fill:transparent}
.shade{fill:rgb(0 0 0 / .62);pointer-events:none}
.dbg{stroke:rgb(255 0 255 / .35);stroke-width:1}
.dbgc .ring{stroke:#ff3dd2 !important}
.dbgt{fill:#ff3dd2;font:600 10px var(--fm)}
.g-view img,.g-dev img{display:block;width:100%;height:auto;border-radius:10px}
.g-view img{max-height:70vh;object-fit:contain}
.g-dev img{max-height:340px;object-fit:contain;background:radial-gradient(120% 90% at 50% 20%,#17181c,#0a0a0c)}
.g-credit{font-size:12px;color:var(--faint);margin:6px 2px 0}
.g-credit a{color:inherit}
.hs .numb{fill:var(--accent)}
.hs.dim{opacity:.22}
.hs.pulse .ring{animation:g-pulse 1.4s ease-in-out infinite}
@keyframes g-pulse{0%,100%{stroke-opacity:1}50%{stroke-opacity:.25}}
.hs:focus{outline:none}

/* Unterricht (Vollbild) */
.g-tool:fullscreen{padding:24px;border-radius:0;overflow:auto;background:var(--bg)}
.g-tool:fullscreen .g-stage{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.g-stage.wide,.g-tool:fullscreen .g-stage.wide{grid-template-columns:1fr}
.g-tool:fullscreen .g-loc{font-size:32px}
.g-tool:fullscreen .g-name{font-size:28px}
.g-tool:fullscreen .g-card dd{font-size:21px}
.g-tool:fullscreen .g-tip{font-size:19px}
.g-tool.lesson .g-card{border-color:var(--accent)}

/* Lesbarer Teil fuer alle (und Suchmaschinen) */
.g-all{display:grid;gap:18px;margin:32px 0}
.g-sec{display:grid;gap:8px}
.g-sec h3{font:600 12px/1 var(--fm);color:var(--accent);text-transform:uppercase;letter-spacing:.1em}
.g-art{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:12px 14px;display:grid;gap:4px;scroll-margin-top:72px}
.g-art h4{margin:0;font:600 15px/1.3 var(--fb)}
.g-art h4 code{font:500 13px var(--fm);color:var(--accent);margin-right:6px}
.g-art p{font-size:14.5px;color:#d0d1d6}
.g-art .tip{color:var(--muted);font-size:13.5px}
.g-grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:8px}
.g-gloss{display:grid;gap:8px}
.g-gloss input{width:100%;min-height:46px;padding:10px 14px;border-radius:12px;border:1px solid var(--line2);background:var(--surface2);color:var(--text);font:400 16px var(--fb)}
.g-term{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:12px 14px;display:grid;gap:4px}
.g-term b{font:600 15px var(--fb)}
.g-term b span{font:500 12px var(--fm);color:var(--accent);margin-left:6px}
.g-term p{font-size:14.5px;color:#d0d1d6}

/* Probestunde */
.g-book{margin:36px 0;padding:22px;border-radius:20px;border:1px solid var(--accent);background:linear-gradient(135deg,rgb(210 238 82 / .12),rgb(210 238 82 / .02));display:grid;gap:12px;justify-items:start}
.g-book p{color:#d6d7db;max-width:640px}
.g-book .row{display:flex;gap:10px;flex-wrap:wrap}
.g-foot{border-top:1px solid var(--line);margin-top:40px;padding:24px 0 max(32px, env(safe-area-inset-bottom, 0px));color:var(--muted);font-size:13px;display:grid;gap:6px}
.g-foot a{color:var(--muted)}
.g-note{font-size:12px;color:var(--faint)}
@media (max-width:900px){.g-stage{grid-template-columns:1fr}.g-tool{padding:10px;border-radius:16px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.g-succ{margin:18px 0 0;border:1px solid var(--line2);border-radius:16px;background:var(--surface);padding:16px 18px;display:grid;gap:6px}
.g-succ h2{font:600 18px/1.25 var(--fd)}
.g-succ p{color:#d0d1d6;font-size:15px}